/* smart ways - il sito (v2). Un solo foglio di stile, senza tele.css.

   Lo stile: il blu scuro di enerdata per menu, testate e piede, sezioni
   chiare per il resto (la home e' tutta chiara); titoli in maiuscolo, righe
   sottili, angoli vivi. Niente
   schede arrotondate, niente pillole: si separa con le righe e con lo
   spazio. Gli unici elementi grafici sono disegni a linee e le schermate
   della piattaforma rifatte in HTML.

   Indice: base - testi - bottoni e link - menu - testate - sezioni -
   colonne e passi - pannelli delle soluzioni - schermate - tabelle - FAQ -
   moduli - prova di lettura - piede - telefono */

:root {
  --scuro: #0f2350;                    /* il blu scuro di enerdata (app, logo navy) */
  --scuro-2: #16306a;
  --scuro-3: #0b1a3d;
  --riga-scura: rgba(255, 255, 255, .16);
  --testo-scuro: rgba(255, 255, 255, .76);
  --carta: #f2f5f9;
  --bianco: #fff;
  --inchiostro: #0f2350;
  --grigio: #4d5868;
  --grigio-2: #8590a0;
  --riga: #d8dee7;
  --accento: #97d2ff;                  /* l'azzurro del simbolo */
  --blu: #1d5fae;
  --verde: #1f8a5b;
  --rosso: #c8372d;
  --ambra: #c98400;
  --titoli: "Space Grotesk", Inter, "Segoe UI", sans-serif;
}

/* --- base ------------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--inchiostro); background: var(--scuro); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1296px; margin: 0 auto; padding: 0 32px; }
.salta { position: absolute; left: -9999px; top: 10px; z-index: 100; padding: 10px 16px; background: #fff; color: var(--inchiostro); }
.salta:focus { left: 16px; }
[hidden] { display: none !important; }
.nascosto { position: absolute; left: -9999px; }

/* --- testi ----------------------------------------------------------------- */
.titolo-1, .titolo-2, .titolo-3, .maiuscolo { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.titolo-1 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.08; }
.titolo-2 { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.12; text-transform: none; letter-spacing: -.005em; }
.titolo-3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.introduzione { max-width: 720px; margin-top: 24px; font-size: 18px; line-height: 1.6; }
.scuro { background: var(--scuro); color: #fff; }
.scuro .introduzione, .scuro p { color: var(--testo-scuro); }
.scuro b, .scuro strong { color: #fff; font-weight: 600; }
.chiaro { background: var(--bianco); color: var(--inchiostro); }
.carta { background: var(--carta); color: var(--inchiostro); }
.chiaro p, .carta p { color: var(--grigio); }
.chiaro b, .carta b { color: var(--inchiostro); font-weight: 600; }
.testo p + p { margin-top: 18px; }
.testo a, .faq a, .nota a { text-decoration: underline; text-underline-offset: 3px; }

/* l'etichetta della sezione: una riga sottile con un tratto piu' chiaro a
   sinistra, sotto il nome in maiuscolo */
.etichetta { position: relative; padding-top: 22px; border-top: 1px solid var(--riga-scura); font-family: var(--titoli); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.etichetta::before { content: ""; position: absolute; left: 0; top: -1px; width: 200px; height: 1px; background: #fff; }
.chiaro .etichetta, .carta .etichetta { border-top-color: var(--riga); color: var(--inchiostro); }
.chiaro .etichetta::before, .carta .etichetta::before { background: var(--inchiostro); }

/* --- bottoni e link -------------------------------------------------------- */
/* il link con la freccia: maiuscolo, riga sotto, freccia in fondo */
.freccia {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-width: 260px; padding: 0 0 8px;
  border-bottom: 1px solid currentColor; font-family: var(--titoli); font-size: 14px; letter-spacing: .07em; text-transform: uppercase;
  transition: gap .2s, color .2s;
}
.freccia::after { content: "\2192"; font-family: Inter, sans-serif; font-size: 17px; line-height: 1; transition: transform .2s; }
.freccia:hover::after { transform: translateX(5px); }
.scuro .freccia:hover { color: var(--accento); }
.chiaro .freccia:hover, .carta .freccia:hover, .pannello .freccia:hover { color: var(--blu); }
.collegamenti { display: flex; flex-wrap: wrap; gap: 18px 44px; margin-top: 36px; }
/* il bottone: rettangolo con il bordo, pieno al passaggio */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 26px;
  border: 1px solid currentColor; background: transparent; font-family: var(--titoli); font-size: 14px; letter-spacing: .07em;
  text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.scuro .bottone:hover, .nav .bottone:hover { background: #fff; border-color: #fff; color: var(--scuro); }
.bottone.pieno { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.bottone.pieno:hover { background: var(--blu); border-color: var(--blu); }
.bottone:disabled { opacity: .55; cursor: default; }

/* --- menu ------------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 60; background: var(--scuro); color: #fff; border-bottom: 1px solid transparent; transition: border-color .3s, transform .3s ease; }
/* a scomparsa (v2.js): scorrendo verso il basso il menu esce, verso l'alto torna */
.nav.ritirato { transform: translateY(-100%); }
.nav.staccato { border-bottom-color: var(--riga-scura); }
.nav .wrap { display: flex; align-items: center; gap: 30px; height: 64px; }
.nav .marchio { flex: none; }
.nav .marchio img { height: 24px; width: auto; }
.nav .voci { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav .voce, .nav .gruppo > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--titoli); font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav .voce:hover, .nav .gruppo:hover > button, .nav .gruppo.aperto > button { color: var(--accento); }
.nav .voce[aria-current], .nav .gruppo.attivo > button { border-bottom-color: #fff; }
.nav .gruppo { position: relative; }
.nav .gruppo > button svg { width: 11px; height: 11px; transition: transform .2s; }
.nav .gruppo.aperto > button svg { transform: rotate(180deg); }
.nav .tendina-menu {
  position: absolute; left: -24px; top: calc(100% + 13px); width: 340px; padding: 6px 24px; background: var(--scuro-2);
  border: 1px solid var(--riga-scura); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.nav .tendina-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav .gruppo.aperto .tendina-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1081px) { .nav .gruppo:hover .tendina-menu { opacity: 1; visibility: visible; transform: none; } }
.nav .tendina-menu a { display: block; padding: 16px 0; border-bottom: 1px solid var(--riga-scura); }
.nav .tendina-menu a:last-child { border-bottom: 0; }
.nav .tendina-menu b { display: block; font-family: var(--titoli); font-size: 14px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.nav .tendina-menu small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--testo-scuro); }
.nav .tendina-menu a:hover b, .nav .tendina-menu a[aria-current] b { color: var(--accento); }
.nav .azioni { display: flex; align-items: center; gap: 26px; flex: none; }
.nav .accedi { display: inline-flex; align-items: center; gap: 8px; font-family: var(--titoli); font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; }
.nav .accedi svg { width: 16px; height: 16px; }
.nav .accedi:hover { color: var(--accento); }
.nav .bottone { min-height: 36px; padding: 0 18px; font-size: 13.5px; }
.nav .apri { display: none; }

/* --- testate --------------------------------------------------------------- */
/* la home: titolo grande a sinistra, il disegno a linee sullo sfondo */
.apertura { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(calc(100vh - 88px), 760px); padding: 80px 0 110px; background: var(--scuro); color: #fff; }
.apertura .wrap { position: relative; width: 100%; }
.apertura .titolo-1 { max-width: 880px; }
.apertura .introduzione { color: var(--testo-scuro); }
/* le pagine interne: briciole, titolo, introduzione */
.testata { position: relative; overflow: hidden; padding: 72px 0 96px; background: var(--scuro); color: #fff; }
/* the smart ways symbol in lines (figure.py): large, whole inside the header, on the right at the edge of the content */
.testata .disegno { position: absolute; top: 50%; right: max(16px, calc((100% - 1296px) / 2)); height: 84%; width: auto; max-width: none; transform: translateY(-50%); color: rgba(255, 255, 255, .2); pointer-events: none; }
.testata .wrap { position: relative; }
.testata .titolo-1 { max-width: 900px; margin-top: 40px; }
.testata .introduzione { color: var(--testo-scuro); }
.briciole { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; font-family: var(--titoli); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-scuro); }
.briciole li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .35); }
.briciole a:hover { color: #fff; }

/* --- sezioni ----------------------------------------------------------------- */
.sezione { padding: 110px 0; }
.sezione.stretta { padding: 80px 0; }
/* a dark section right after a dark one: less space between them */
.scuro + .sezione.scuro { padding-top: 40px; }
/* due colonne: titolo a sinistra, testo a destra */
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 72px; }
.due-colonne .titolo-2 { max-width: 540px; }
.due-colonne > .testo { font-size: 17px; }

/* --- colonne e passi ------------------------------------------------------- */
.colonne { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; margin-top: 64px; }
.colonne.tre { grid-template-columns: repeat(3, 1fr); }
.colonne.due { grid-template-columns: repeat(2, 1fr); }
.colonna { padding-top: 22px; border-top: 1px solid var(--riga); }
.scuro .colonna { border-top-color: var(--riga-scura); }
.colonna .numero { display: block; margin-bottom: 22px; font-family: var(--titoli); font-size: 15px; letter-spacing: .06em; color: var(--grigio-2); }
.colonna h3 { font-family: var(--titoli); font-size: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.colonna p { margin-top: 10px; font-size: 15.5px; }
.colonne + .colonne { margin-top: 48px; }
/* i fatti: numero grande e didascalia */
.fatti { display: grid; gap: 0; }
.fatto { display: grid; grid-template-columns: 170px 1fr; align-items: baseline; gap: 24px; padding: 22px 0; border-top: 1px solid var(--riga-scura); }
.fatto:last-child { border-bottom: 1px solid var(--riga-scura); }
.fatto b { font-family: var(--titoli); font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -.01em; color: #fff; }
.fatto span { color: var(--testo-scuro); }

/* --- pannelli delle soluzioni (la home) ------------------------------------- */
.pannelli { display: grid; gap: 28px; margin-top: 90px; }
.pannello { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; padding: 84px 72px; background: var(--bianco); color: var(--inchiostro); }
.pannello h2 { padding-bottom: 16px; border-bottom: 1px solid var(--inchiostro); font-family: var(--titoli); font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.pannello p { margin-top: 20px; color: var(--grigio); font-size: 16.5px; }
.pannello .freccia { margin-top: 34px; }
/* two links side by side in the panel: shorter, they share the row and go
   one under the other only when there is no room */
.pannello .collegamenti { gap: 16px 32px; margin-top: 34px; }
.pannello .collegamenti .freccia { flex: 1 1 auto; min-width: 0; gap: 24px; margin-top: 0; }
.pannello .elenco-marche { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.elenco-marche div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--riga); }
.elenco-marche b { font-family: var(--titoli); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.elenco-marche span { color: var(--grigio); text-align: right; font-size: 14.5px; }

/* --- schermate della piattaforma --------------------------------------------- */
/* una pagina dell'app (schermate/*.html, schermate.py) a grandezza vera,
   1280 x 720, rimpicciolita come uno screenshot: v2.js mette in --s la scala */
.schermo-fig { margin: 0; }
.schermo { position: relative; aspect-ratio: 1280 / var(--h, 720); overflow: hidden; background: #f4f6f9; border: 1px solid #c9cdd3; box-shadow: 0 30px 60px -36px rgba(15, 35, 80, .45); }
.schermo iframe { position: absolute; left: 0; top: 0; width: 1280px; height: calc(var(--h, 720) * 1px); border: 0; transform-origin: 0 0; transform: scale(var(--s, .45)); pointer-events: none; }
.schermo-fig figcaption:empty { display: none; }
.didascalia { margin-top: 14px; font-size: 13.5px; color: var(--grigio-2); }
.schermo-grande { margin-top: 64px; }
.schermi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
@media (max-width: 860px) { .schermi-due { grid-template-columns: 1fr; } }

/* --- tabelle (fonti dati, modelli, prezzi) --------------------------------- */
.tabella { width: 100%; border-collapse: collapse; text-align: left; }
.tabella th { padding: 0 0 14px; border-bottom: 1px solid var(--inchiostro); font-family: var(--titoli); font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.tabella td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--riga); vertical-align: top; }
.tabella td:last-child { padding-right: 0; }
.tabella .codice { width: 84px; }
.tabella code { display: inline-block; min-width: 50px; padding: 2px 8px; border: 1px solid var(--riga); font: 600 12px Inter, sans-serif; letter-spacing: .02em; text-align: center; color: var(--inchiostro); background: var(--bianco); }
.tabella .piccolo { color: var(--grigio-2); font-size: 14px; }
.tabella .marca { width: 220px; font-family: var(--titoli); font-size: 17px; letter-spacing: .03em; text-transform: uppercase; }
.blocchi-tabella { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 64px; }
.blocchi-tabella h3 { margin-bottom: 26px; font-family: var(--titoli); font-size: 22px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
.blocchi-tabella h3 small { display: block; margin-top: 6px; font-family: Inter, sans-serif; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--grigio); }
.nota { margin-top: 36px; padding-left: 18px; border-left: 2px solid var(--inchiostro); font-size: 15.5px; color: var(--grigio); }
.scuro .nota { border-left-color: #fff; color: var(--testo-scuro); }
/* i prezzi: voci in righe, la colonna a destra dice quando */
.voci-prezzo { margin-top: 30px; border-top: 1px solid var(--inchiostro); }
.voce-prezzo { display: grid; grid-template-columns: 220px 1fr 160px; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--riga); }
.voce-prezzo h3 { font-family: var(--titoli); font-size: 19px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.voce-prezzo p { font-size: 15.5px; }
.voce-prezzo .quando { font-family: var(--titoli); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); text-align: right; }

/* --- FAQ ------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--inchiostro); }
.faq details { border-bottom: 1px solid var(--riga); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; color: var(--inchiostro); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--titoli); font-size: 24px; font-weight: 300; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 820px; padding: 0 0 24px; color: var(--grigio); }
.faq-blocco { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-top: 64px; }
.faq-blocco + .faq-blocco { margin-top: 90px; }
.faq-blocco h2 { font-family: var(--titoli); font-size: 22px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }

/* --- moduli ------------------------------------------------------------------ */
.contatto { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; margin-top: 72px; }
.recapiti h3 { font-family: var(--titoli); font-size: 22px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.recapiti ul { list-style: none; margin-top: 26px; border-top: 1px solid var(--riga); }
.recapiti li { padding: 18px 0; border-bottom: 1px solid var(--riga); }
.recapiti li span { display: block; font-family: var(--titoli); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio-2); }
.recapiti li a, .recapiti li div { display: block; margin-top: 4px; font-size: 17px; color: var(--inchiostro); }
.recapiti li a:hover { color: var(--blu); }
.modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.campo > span { display: block; margin-bottom: 8px; font-family: var(--titoli); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.campo > span small { font-family: Inter, sans-serif; letter-spacing: 0; text-transform: none; color: var(--grigio-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #c4c4be; border-radius: 0; background: #fff; font-size: 16px; color: var(--inchiostro);
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--inchiostro); }
.lungo { grid-column: 1 / -1; }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--grigio); }
.consenso input { margin-top: 4px; accent-color: var(--inchiostro); }
.consenso a { text-decoration: underline; text-underline-offset: 2px; }
.invio { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.esito { font-size: 14px; color: var(--grigio); }
.esito.ok { color: var(--verde); }
.esito.ko { color: var(--rosso); }

/* --- prova di lettura (tele.js, [data-prova]) ----------------------------- */
.prova { margin-top: 56px; background: #fff; border: 1px solid var(--riga); text-align: left; }
.prova-campi { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr .6fr auto; gap: 18px; align-items: end; padding: 30px; }
.prova-campi .prova-consenso { grid-column: 1 / -1; order: 1; }
.prova-campi .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border: 1px solid var(--inchiostro); background: var(--inchiostro); color: #fff; font-family: var(--titoli); font-size: 14px; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.prova-campi .btn:hover { background: var(--blu); border-color: var(--blu); }
.prova-campi .btn:disabled { opacity: .6; cursor: default; }
.prova-campi .btn.carica:disabled { opacity: 1; cursor: progress; }
.prova-campi .btn .ti { display: none; }
.prova-campi .campo.obbligatorio small { display: none; }
.prova-campi .campo.obbligatorio > span::after { content: " *"; }
.pv-rotella { flex: none; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: pv-gira .7s linear infinite; }
@keyframes pv-gira { to { transform: rotate(360deg); } }
.prova-errore { margin: -12px 30px 20px; font-size: 14px; color: var(--rosso); }
.prova-errore:empty { display: none; }
.tendina { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s ease; }
.tendina.aperta { grid-template-rows: 1fr; }
.tendina-dentro { min-height: 0; overflow: hidden; }
.pv { display: grid; grid-template-columns: 340px 1fr; border-top: 1px solid var(--riga); }
.pv-sx { padding: 28px 30px; border-right: 1px solid var(--riga); background: var(--carta); }
.pv-dx { min-width: 0; padding: 28px 30px; }
.pv-testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: start; margin-bottom: 22px; }
.pv-testa > div { display: contents; }
.pv-testa b { font-size: 17px; }
.pv-testa [data-pv-modello] { grid-column: 1; grid-row: 1; }
.pv-testa [data-pv-dove] { grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--grigio-2); }
.pv-stato { grid-column: 2; grid-row: 1; padding: 3px 9px; font-size: 12px; font-weight: 600; background: #fff4e0; color: var(--ambra); }
.pv[data-stato="linea"] .pv-stato { background: #e6f4ec; color: var(--verde); }
.pv[data-stato="fatto"] .pv-stato { background: #e7eef8; color: var(--blu); }
.pv[data-stato="errore"] .pv-stato { background: #fbeceb; color: var(--rosso); }
.pv-passi { list-style: none; display: grid; gap: 16px; }
.pv-passi li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; opacity: .4; transition: opacity .3s; }
.pv-passi li.corso, .pv-passi li.fatto, .pv-passi li.errore { opacity: 1; }
.pv-passi li > i { position: relative; width: 18px; height: 18px; margin-top: 3px; border: 2px solid var(--riga); }
.pv-passi li.corso > i { border-color: var(--ambra); }
.pv-passi li.fatto > i { border-color: var(--verde); background: var(--verde); }
.pv-passi li.fatto > i::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pv-passi li.errore > i { border-color: var(--rosso); background: var(--rosso); }
.pv-passi li.errore > i::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.pv-passi b { display: block; font-size: 15px; font-weight: 600; }
.pv-passi span { display: block; margin-top: 2px; font-size: 13px; color: var(--grigio); }
.pv-passi li.errore span { color: var(--rosso); }
.pv-titolo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px; }
.pv-titolo .pv-imm, .pv-titolo .pv-pre { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-titolo .pv-imm { color: #1864ab; }
.pv-titolo .pv-pre { color: #c2255c; text-align: right; }
.pv-titolo [data-pv-titolo] { font-size: 14px; font-weight: 600; text-align: center; }
.pv-grafico { position: relative; margin-top: 14px; }
.pv-grafico svg { display: block; width: 100%; height: 190px; overflow: visible; cursor: crosshair; }
.pv-griglia { stroke: #e3e8ef; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.pv-base { stroke: #d5dde8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pv-area { fill: rgba(24, 100, 171, .12); }
.pv-imm-l { fill: none; stroke: #1864ab; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pv-pre-l { fill: none; stroke: #c2255c; stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pv-mira { stroke: #5a6478; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.pv-scale span { position: absolute; transform: translateY(-50%); padding: 0 3px; background: rgba(255, 255, 255, .85); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.pv-scale .imm { left: 2px; color: #1864ab; }
.pv-scale .pre { right: 2px; color: #c2255c; }
.pv-tip { position: absolute; z-index: 2; padding: 9px 12px; background: #1f2a37; color: #fff; font-size: 12px; line-height: 1.5; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -100%); transition: opacity .15s; }
.pv-tip b { display: block; margin-bottom: 3px; font-weight: 700; }
.pv-tip div { display: flex; justify-content: space-between; gap: 16px; }
.pv-tip .imm { color: #74b4f0; }
.pv-tip .pre { color: #f08ab0; }
.pv-asse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--grigio-2); font-variant-numeric: tabular-nums; }
.pv-numeri { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 20px; border-top: 1px solid var(--riga); }
.pv-num { padding: 14px 14px 0 0; }
.pv-num + .pv-num { padding-left: 14px; border-left: 1px solid var(--riga); }
.pv-num b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-num span { display: block; margin-top: 2px; font-size: 12px; color: var(--grigio); }
.pv-invito { display: none; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-top: 20px; padding: 16px 18px; background: var(--carta); font-size: 15px; font-weight: 500; }
.pv-invito .btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; background: var(--inchiostro); color: #fff; font-family: var(--titoli); font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
.pv[data-stato="fatto"] .pv-invito { display: flex; }
.pv-piede { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; font-size: 13px; color: var(--grigio-2); }
.pv-piede span { display: inline-flex; align-items: center; gap: 6px; }
.pv-piede .ti { display: none; }
.pv-piede button { border: 0; background: transparent; color: var(--inchiostro); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* --- clienti -------------------------------------------------------------- */
.loghi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px; align-items: center; margin-top: 56px; }
.loghi img { height: 30px; width: auto; max-width: 100%; margin: 0 auto; filter: brightness(0) invert(1); opacity: .6; transition: opacity .2s; }
.loghi img:hover { opacity: 1; }

/* --- piede ------------------------------------------------------------------- */
.piede { background: var(--scuro); color: var(--testo-scuro); font-size: 14.5px; }
.piede .alto { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding: 80px 0 64px; border-top: 1px solid var(--riga-scura); }
.piede .alto img { height: 26px; width: auto; }
.piede .alto p { max-width: 300px; margin-top: 22px; }
.piede h2 { margin-bottom: 18px; font-family: var(--titoli); font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.piede ul { list-style: none; display: grid; gap: 10px; }
.piede a:hover { color: #fff; }
.piede .basso { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding: 24px 0 36px; border-top: 1px solid var(--riga-scura); font-size: 13px; color: rgba(255, 255, 255, .5); }
.piede .basso .legale { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }

/* --- larghezze minori -------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav .wrap { height: 58px; }
  .nav .apri { display: inline-grid; place-content: center; gap: 5px; flex: none; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; cursor: pointer; }
  .nav .apri span { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform .25s, opacity .25s; }
  .nav.aperto .apri span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.aperto .apri span:nth-child(2) { opacity: 0; }
  .nav.aperto .apri span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav .azioni { margin-left: auto; }
  .nav .voci {
    display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 58px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 32px 28px; background: var(--scuro); border-top: 1px solid var(--riga-scura); border-bottom: 1px solid var(--riga-scura);
  }
  .nav.aperto .voci { display: flex; }
  .nav .voce, .nav .gruppo > button { width: 100%; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--riga-scura); font-size: 15px; }
  .nav .voce[aria-current], .nav .gruppo.attivo > button { border-bottom-color: var(--riga-scura); color: var(--accento); }
  .nav .tendina-menu { position: static; width: auto; padding: 0 0 0 18px; border: 0; background: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .nav .gruppo.aperto .tendina-menu { display: block; }
  .due-colonne, .contatto, .blocchi-tabella, .faq-blocco { grid-template-columns: 1fr; gap: 40px; }
  .pannello { grid-template-columns: 1fr; padding: 56px 40px; gap: 48px; }
  .colonne { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .colonne.tre { grid-template-columns: 1fr 1fr; }
  .piede .alto { grid-template-columns: 1fr 1fr; }
  .loghi { grid-template-columns: repeat(3, 1fr); }
  .prova-campi { grid-template-columns: 1fr 1fr; }
  .prova-campi .btn { grid-column: 1 / -1; }
  .prova-campi .prova-consenso { order: 0; }
  .pv { grid-template-columns: 1fr; }
  .pv-sx { border-right: 0; border-bottom: 1px solid var(--riga); }
  .voce-prezzo { grid-template-columns: 1fr; gap: 8px; }
  .voce-prezzo .quando { text-align: left; }
  .testata .disegno { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .nav .voci { padding: 6px 20px 24px; }
  .nav .bottone { display: none; }
  .nav .marchio img { height: 21px; }
  .sezione { padding: 76px 0; }
  .apertura { min-height: 0; padding: 72px 0 120px; }
  .testata { padding: 48px 0 64px; }
  .colonne, .colonne.tre, .colonne.due { grid-template-columns: 1fr; gap: 32px; }
  .pannello { padding: 40px 22px; }
  .pannello .elenco-marche { grid-template-columns: 1fr; }
  .fatto { grid-template-columns: 1fr; gap: 6px; }
  .modulo { grid-template-columns: 1fr; }
  .piede .alto { grid-template-columns: 1fr; gap: 36px; }
  .piede .basso .legale { margin-left: 0; }
  .loghi { grid-template-columns: repeat(2, 1fr); }
  .prova-campi { grid-template-columns: 1fr; padding: 22px; }
  .pv-numeri { grid-template-columns: 1fr 1fr; }
  .pv-num:nth-child(3) { padding-left: 0; border-left: 0; }
  .freccia { min-width: 0; width: 100%; }
  .tabella .marca { width: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* il disegno delle testate (figure.py): solo linee */
.disegno path { fill: none; vector-effect: non-scaling-stroke; }
.disegno path.f { fill: var(--scuro); stroke: none; }
/* a sinistra il disegno sfuma sotto il testo */
.testata .disegno { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.voce-prezzo a.quando { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.voce-prezzo a.quando:hover { color: var(--blu); }
/* correzioni dopo la prova */
a.freccia { text-decoration: none; }
.pannello b { color: var(--inchiostro); }
.pannello h2 { line-height: 1.2; }

/* --- la home chiara ------------------------------------------------------ */
/* l'apertura su fondo bianco: titolo blu scuro */
.apertura { background: var(--bianco); color: var(--inchiostro); }
.apertura .introduzione { color: var(--grigio); }
.apertura .freccia:hover { color: var(--blu); }
.apertura b { color: var(--inchiostro); font-weight: 600; }
/* i pannelli su fondo chiaro: bianchi sulla carta, carta sul bianco */
.chiaro .pannello { background: var(--carta); }
/* i fatti e i loghi su fondo chiaro */
.chiaro .fatto, .carta .fatto { border-top-color: var(--riga); }
.chiaro .fatto:last-child, .carta .fatto:last-child { border-bottom-color: var(--riga); }
.chiaro .fatto b, .carta .fatto b { color: var(--inchiostro); }
.chiaro .fatto span, .carta .fatto span { color: var(--grigio); }
.chiaro .loghi img, .carta .loghi img { filter: brightness(0) saturate(100%) invert(11%) sepia(46%) saturate(2700%) hue-rotate(211deg) brightness(92%); opacity: .55; }
.chiaro .loghi img:hover, .carta .loghi img:hover { opacity: .9; }
/* il piede un tono piu' scuro delle testate */
.piede { background: var(--scuro-3); }
.piede .alto { border-top: 0; }
/* la home chiara: l'apertura occupa quasi tutto lo schermo (fra 640 e 880 px), il titolo al centro */
.apertura { min-height: clamp(640px, calc(100vh - 64px), 880px); padding: 110px 0 130px; }
@media (max-width: 640px) { .apertura { padding: 64px 0 110px; } }

/* --- i loghi dei clienti scorrono (come nel sito attuale) ----------------- */
/* la fila c'e' due volte e scorre di una copia esatta (spazio a destra uguale
   a quello tra i loghi): il ritorno all'inizio non si vede. Ai lati sfumano,
   col mouse sopra si fermano */
.nastro { overflow: hidden; margin-top: 56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nastro-fila { --spazio: clamp(48px, 6vw, 96px); display: flex; align-items: center; gap: var(--spazio); width: max-content; padding-right: var(--spazio); animation: nastro 34s linear infinite; }
.nastro:hover .nastro-fila { animation-play-state: paused; }
@keyframes nastro { to { transform: translateX(-50%); } }
.nastro img { flex: none; height: clamp(26px, 2.6vw, 34px); width: auto; max-width: none; transition: opacity .2s;
  filter: brightness(0) saturate(100%) invert(11%) sepia(46%) saturate(2700%) hue-rotate(211deg) brightness(92%); opacity: .55; }
.nastro img:hover { opacity: .95; }

/* --- la hero che si muove (v2.js) ----------------------------------------- */
/* la fine del titolo si scrive da sola: blu, col cursore che lampeggia */
.rotante { color: var(--blu); white-space: nowrap; }
.rotante.scrive::after { content: ""; display: inline-block; width: .055em; height: .82em; margin-left: .08em; background: currentColor; vertical-align: -.04em; animation: cursore 1s steps(1) infinite; }
@keyframes cursore { 50% { opacity: 0; } }
/* sullo sfondo della hero: a sinistra la foto di un impianto (imgs/hero-impianto.jpg),
   piena sul bordo e sfumata verso il centro; dal centro verso destra, sotto la
   parete dei contatori, la griglia delle curve di Teleletture (imgs/hero-curve.png,
   schermate.py), sfumata verso il centro */
.apertura::before, .apertura::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 0; }
.apertura::before {
  left: 0; width: 60%; background: url(imgs/hero-impianto.jpg) center / cover no-repeat; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 96%);
}
.apertura::after {
  right: 0; width: 62%; background: url(imgs/hero-curve.png) right bottom / 1250px auto no-repeat; opacity: .1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%), linear-gradient(0deg, #000 75%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%), linear-gradient(0deg, #000 75%, transparent 100%);
  mask-composite: intersect;
}
.apertura .wrap { z-index: 2; }
@media (max-width: 1080px) { .apertura::before { width: 100%; opacity: .28; } .apertura::after { width: 100%; opacity: .08; } }
@media (max-width: 640px) { .apertura::after { background-size: 900px auto; } }
/* The wall of meters (v2.js), at the bottom right of the hero under the
   text: light cells, each with its day curve; the left columns fade so they
   never disturb the text. Up to 1080 px it goes under the text, never
   over it */
.apertura .hero-wall {
  position: absolute; z-index: 1; right: max(32px, calc((100% - 1296px) / 2 + 32px)); bottom: 9%; width: min(44%, 640px); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.apertura .hero-wall svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-wall .frame { fill: rgba(255, 255, 255, .75); stroke: #dfe5ed; stroke-width: 1; }
.hero-wall .line { fill: none; stroke: #1864ab; stroke-opacity: .7; stroke-width: 1.2; stroke-linejoin: round; }
.hero-wall .area { fill: #1864ab; fill-opacity: .06; stroke: none; }
.hero-wall .dash { stroke: #c3cad6; stroke-width: 1.2; }
.hero-wall .axis { fill: none; stroke: #c9d2de; stroke-width: .8; }
.hero-wall .day { font: 600 8px var(--titoli); letter-spacing: .08em; text-transform: uppercase; fill: #6b7a90; }
.hero-wall .kwh { font: 500 6.5px Inter, sans-serif; font-variant-numeric: tabular-nums; fill: #8592a6; }
@media (max-width: 1080px) {
  .apertura { flex-direction: column; justify-content: center; }
  .apertura .hero-wall { position: relative; right: auto; bottom: auto; order: 2; width: min(100% - 40px, 600px); margin-top: 40px; opacity: .85;
    -webkit-mask-image: none; mask-image: none; }
}
/* la parola che si scrive sta sulla riga di "produzione,": se e' lunga si
   rimpicciolisce quanto basta (v2.js); sul telefono ha una riga sua, cosi'
   il testo sopra e sotto non si sposta mentre cambia */
@media (max-width: 760px) { .apertura .rotante { display: block; } }
/* sul computer "produzione, <parola>" non va mai a capo (la parola, se serve, e' gia' piu' piccola)
   e sta sempre su una riga sua: quando la parola e' cancellata il resto non
   sale sulla riga sopra, e il titolo non cambia altezza (in inglese "Production
   plant data," starebbe su una riga). Larga quanto il testo: v2.js ne misura
   la larghezza */
@media (min-width: 761px) { .apertura .titolo-1 .riga { display: block; width: max-content; white-space: nowrap; } }

/* The headers of the two solution pages with their scene (v2.js,
   .header-scene): two columns on the computer, the text on the left and the
   scene on the right; below 1080 px the scene goes under the text. The scene
   is abstract, light on the navy header: the sources on an arc, enerdata in
   the middle, what comes out on the right; the meter reading in light blue,
   the portals in cyan */
.header-scene { width: 100%; max-width: 640px; }
.header-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 1081px) {
  .testata.has-scene .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .testata.has-scene .titolo-1 { font-size: clamp(34px, 3.3vw, 48px); }
  .testata.has-scene .header-scene { justify-self: end; }
}
@media (max-width: 1080px) { .header-scene { margin: 44px auto 0; } }
@media (max-width: 640px) { .flow .caption { display: none; } }
.flow { --acc: #97d2ff; --ok: #8ce99a; --ko: #ff8787; --warn: #ffd43b; }
.flow.web { --acc: #66d9e8; }
.flow .wire { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1; transition: stroke .4s; }
.flow.tele .wire.on { stroke: rgba(151, 210, 255, .45); }
.flow.web .wire.on { stroke: rgba(102, 217, 232, .45); }
.flow .wire.bad { stroke: rgba(255, 135, 135, .45); }
/* the sources: dim at rest, they ring when called, green while the data
   comes back, red when they fail */
.flow .src .body { fill: var(--scuro); stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.flow .src .ring { fill: none; stroke: var(--acc); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.flow .src.call .body { stroke: var(--acc); }
.flow .src.call .ring { animation: flow-ring 1s ease-out infinite; }
.flow .src.line .body { stroke: var(--ok); fill: rgba(140, 233, 154, .35); }
.flow .src.done .body { stroke: var(--ok); fill: rgba(140, 233, 154, .16); }
.flow .src.fail .body { stroke: var(--ko); fill: rgba(255, 135, 135, .25); }
.flow .src.fail .ring { stroke: var(--ko); animation: flow-ring 1s ease-out 2; }
.flow .src .brand { opacity: .5; transition: opacity .3s; }
.flow .src.call .brand, .flow .src.line .brand, .flow .src.done .brand { opacity: 1; }
@keyframes flow-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
/* enerdata */
.flow .core .box { fill: var(--scuro-2); stroke: var(--acc); stroke-width: 1; }
.flow .core .pulse { fill: none; stroke: var(--acc); opacity: 0; transform-box: fill-box; transform-origin: center; }
.flow .core.busy .pulse { animation: flow-pulse 2s ease-out infinite; }
.flow .core.busy .pulse.late { animation-delay: 1s; }
@keyframes flow-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 2); } }
/* what travels */
.flow .p.call .halo { fill: var(--acc); opacity: .25; }
.flow .p.call .spark { fill: #fff; }
.flow .p.data { fill: var(--ok); }
.flow .p.fail { fill: var(--ko); }
.flow .p.out { fill: var(--acc); }
/* the outputs */
.flow .axis { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.flow .area { fill: rgba(151, 210, 255, .14); }
.flow .line { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-linejoin: round; }
.flow .head { fill: #fff; }
.flow .reg-box { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .2); stroke-width: 1; transition: fill .3s, stroke .3s; }
.flow .register.reading .reg-box { fill: rgba(151, 210, 255, .12); stroke: var(--acc); }
.flow .digit { font: 600 13px Inter, sans-serif; font-variant-numeric: tabular-nums; fill: rgba(255, 255, 255, .88); }
.flow .digit.lead { fill: rgba(255, 255, 255, .3); }
.flow .reg-name { font: 600 10.5px Inter, sans-serif; letter-spacing: .04em; fill: rgba(255, 255, 255, .55); transition: fill .3s; }
.flow .register.reading .reg-name { fill: var(--acc); }
.flow .state { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .22); stroke-width: 1; transition: fill .4s, stroke .4s; }
.flow .state.ok { fill: rgba(140, 233, 154, .5); stroke: var(--ok); }
.flow .state.fail { fill: rgba(255, 135, 135, .35); stroke: var(--ko); }
.flow .cell { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .14); stroke-width: 1; transition: fill .4s, stroke .4s; }
.flow .cell.ok { fill: rgba(140, 233, 154, .55); stroke: rgba(140, 233, 154, .8); }
.flow .cell.multi { fill: rgba(140, 233, 154, .55); stroke: var(--warn); stroke-width: 1.6; }
.flow .cell.wait { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .3); }
.flow .cell.fail { fill: rgba(255, 135, 135, .2); stroke: var(--ko); }
.flow .now { fill: none; stroke: var(--acc); stroke-width: 1; stroke-dasharray: 3 3; transition: x .4s; }
.flow .entry .text { fill: rgba(255, 255, 255, .24); }
.flow .entry.new .tick { fill: var(--ok); }
.flow .entry.multi .tick { fill: var(--warn); }
.flow .entry.fail .tick { fill: var(--ko); }
.flow .caption { font: 500 10px Inter, sans-serif; letter-spacing: .12em; fill: rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: reduce) { .flow * { animation: none !important; } }

/* The legal pages (documenti, privacy): in the header the company and the
   date of the last update; below, the index on the left (it stays in view
   on the computer) and the text on the right, in numbered sections with
   thin rules; the tables with a rule per row */
.document-meta { margin-top: 22px; font-size: 14px; color: var(--testo-scuro); }
.testata .introduzione a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.document { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: start; }
.document-index { position: sticky; top: 96px; }
.document-index ol { margin-top: 18px; list-style: none; counter-reset: document; }
.document-index li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--riga); counter-increment: document; font-size: 15px; line-height: 1.4; }
.document-index li::before { content: counter(document, decimal-leading-zero); flex: none; min-width: 22px; font-family: var(--titoli); color: var(--grigio); }
.document-index a { color: var(--inchiostro); }
.document-index a:hover { color: var(--blu); }
/* the section being read, lit by v2.js: a blue bar on the left, number and
   title in blue */
.document-index li { padding-left: 12px; box-shadow: inset 2px 0 0 transparent; transition: box-shadow .25s; }
.document-index li::before, .document-index a { transition: color .25s; }
.document-index li.on { box-shadow: inset 3px 0 0 var(--blu); }
.document-index li.on::before, .document-index li.on a { color: var(--blu); }
/* on the computer the index stays in view: a long one scrolls inside */
@media (min-width: 901px) { .document-index { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; } }
.document-body { font-size: 17px; line-height: 1.65; }
.document-body section { scroll-margin-top: 96px; }
/* the box before the first article (the terms of service: provider and scope) */
.document-lead { margin-bottom: 48px; padding: 20px 24px; background: var(--carta); border-left: 3px solid var(--inchiostro); }
.document-lead p + p { margin-top: 10px; }
.document-body section + section { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--riga); }
.document-body h2 { display: flex; gap: 16px; align-items: baseline; margin-bottom: 16px; font-family: var(--titoli); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--inchiostro); }
.document-body h2 span { flex: none; font-size: 16px; color: var(--grigio); }
.document-body h3 { margin: 26px 0 6px; font-size: 16px; font-weight: 600; color: var(--inchiostro); }
.document-body p, .document-body li, .document-body td { color: var(--grigio); }
.document-body ul { margin: 12px 0; padding-left: 20px; }
.document-body li + li { margin-top: 6px; }
.document-body table { width: 100%; margin: 14px 0 18px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.document-body th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--inchiostro); text-align: left; font-family: var(--titoli); font-size: 12.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--inchiostro); }
.document-body td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--riga); vertical-align: top; }
@media (max-width: 900px) { .document { grid-template-columns: 1fr; gap: 40px; } .document-index { position: static; } }
@media (max-width: 600px) { .document-body { font-size: 16px; } .document-body table { font-size: 14px; } .document-body th, .document-body td { padding-right: 10px; } }

/* The photo of the inner page headers (--photo on the section, a file per
   page in imgs/header-*.jpg): on the left, faded towards the centre as in
   the home, light on the navy so the white text reads */
.testata::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; pointer-events: none;
  background: var(--photo, none) center / cover no-repeat; opacity: .3; filter: saturate(.75);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 95%);
  mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 95%);
}
@media (max-width: 1080px) { .testata::before { width: 100%; opacity: .2; } }

/* The blog (blog.py). The article has the layout of the legal pages (the
   index on the left, the text on the right) with a smaller title, the lead
   paragraph larger, the box that leads to the service, the sources and the
   related articles. The index lists the guides and then every article by
   topic */
.article-title { max-width: 1000px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.article-body > p:first-child { font-size: 19px; line-height: 1.6; color: var(--inchiostro); }
.article-body h2 { margin: 48px 0 16px; padding-top: 34px; border-top: 1px solid var(--riga); scroll-margin-top: 96px; }
.article-body p, .article-body ul, .article-body ol, .article-body table { margin-bottom: 16px; }
.article-body ol { padding-left: 22px; }
.article-body li + li { margin-top: 6px; }
.article-cta { margin-top: 56px; padding: 34px 34px 30px; }
.article-cta .cta-title { margin-top: 18px; font-family: var(--titoli); font-size: 26px; line-height: 1.2; text-transform: uppercase; color: #fff; }
.article-cta p { margin-bottom: 0; }
.article-cta .cta-title + p { margin-top: 10px; }
.article-cta .collegamenti { gap: 16px 32px; margin-top: 26px; }
.article-cta .freccia { flex: 1 1 auto; min-width: 0; gap: 24px; color: #fff; text-decoration: none; }
.article-sources { margin-top: 44px; font-size: 14px; }
.article-sources ul { margin-top: 16px; padding-left: 18px; }
.article-sources li, .article-sources a { color: var(--grigio); }
.article-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin-top: 40px; }
.article-card { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--inchiostro); color: var(--inchiostro); }
.article-card span { font-family: var(--titoli); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.article-card b { font-family: var(--titoli); font-size: 20px; font-weight: 400; line-height: 1.25; }
.article-card small { font-size: 15px; line-height: 1.5; color: var(--grigio); }
.article-card:hover b { color: var(--blu); }
.blog-topics { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; font-family: var(--titoli); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.blog-topics a { padding-bottom: 6px; border-bottom: 1px solid var(--riga); transition: color .2s, border-color .2s; }
.blog-topics a:hover { color: var(--blu); border-bottom-color: var(--blu); }
.blog-group { margin-top: 64px; scroll-margin-top: 96px; }
.blog-group h2 { padding-bottom: 14px; border-bottom: 1px solid var(--inchiostro); font-family: var(--titoli); font-size: 22px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.blog-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; list-style: none; }
.blog-list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 0; border-bottom: 1px solid var(--riga); }
.blog-list b { font-weight: 600; color: var(--inchiostro); }
.blog-list span { font-size: 14.5px; color: var(--grigio); }
.blog-list a:hover b { color: var(--blu); }
@media (max-width: 900px) { .article-related, .blog-list { grid-template-columns: 1fr; } .article-cta { padding: 28px 22px 24px; } }
/* the IT / EN switch in the menu, before Accedi */
.nav .lingua { display: inline-flex; align-items: center; padding: 6px 0; font-family: var(--titoli); font-size: 13.5px; letter-spacing: .08em; color: var(--testo-scuro); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav .lingua:hover { color: #fff; border-bottom-color: currentColor; }

/* --- the shapes of the content (2026-10-26) ----------------------------------
   Each content in the form it has: a table for data with attributes, a sheet
   for features, a timeline for steps in time, numbers only where there is an
   order, plain text for a story, a short band at the end of the service pages
   instead of FAQ and form. Used by the Italian pages: home, telelettura,
   portali, chi siamo, prova gratis, prezzi, contatori supportati. */

/* a big title over a full-width block (the screen of a dark section) */
.lead-title { max-width: 860px; margin: 18px 0 48px; }

/* notes under a big screen: what is on it */
.screen-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 44px 0 0; }
.screen-notes dt { font-family: var(--titoli); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--blu); }
.screen-notes dd { margin: 8px 0 0; color: var(--grigio); font-size: 15px; line-height: 1.55; }
.scuro .screen-notes dt { color: var(--accento); }
.scuro .screen-notes dd { color: var(--testo-scuro); }
.lead-title + .schermo-grande { margin-top: 0; }
.scuro .didascalia { color: var(--testo-scuro); }

/* two columns: the name of the section on the left, its content on the right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.split .titolo-2 { margin-top: 18px; }
.split .collegamenti { margin-top: 30px; }
.split-text { margin-top: 22px; color: var(--grigio); font-size: 17px; line-height: 1.65; }
.split-text.top { margin-top: 0; }
.split-text p + p { margin-top: 14px; }
.scuro .split-text { color: var(--testo-scuro); }
.split-full { grid-column: 1 / -1; margin-top: 24px; }
.after-timeline { max-width: 760px; margin-top: 48px; }

/* a table of data */
.data-table { margin-top: 6px; }
.data-table td { font-size: 15.5px; color: var(--grigio); }
.data-table td b { color: var(--inchiostro); font-weight: 600; }
/* the tables on a dark section (Cosa si legge, the data sources of Portali) */
.scuro .tabella th { border-bottom-color: rgba(255, 255, 255, .5); color: var(--testo-scuro); }
.scuro .tabella td { border-bottom-color: var(--riga-scura); color: var(--testo-scuro); }
.scuro .tabella td b { color: #fff; }
.scuro .tabella code { border-color: rgba(255, 255, 255, .35); background: transparent; color: #fff; }
.scuro .tabella .piccolo { color: rgba(255, 255, 255, .55); }
.scuro .blocchi-tabella h3 { color: #fff; }
.scuro .blocchi-tabella h3 small { color: var(--testo-scuro); }
.scuro .nota a { color: #fff; }

/* the sheet: name and description, one under the other */
.sheet { margin: 0; border-top: 1px solid var(--inchiostro); }
.sheet div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--riga); }
.sheet dt { padding-top: 2px; font-family: var(--titoli); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro); }
.sheet dd { margin: 0; color: var(--grigio); font-size: 15.5px; line-height: 1.55; }
.sheet a { color: var(--blu); text-decoration: underline; text-underline-offset: 3px; }

/* the timeline: steps in time, side by side */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--riga); }
.timeline li { position: relative; padding-top: 34px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; background: var(--inchiostro); }
.timeline span { display: block; font-family: var(--titoli); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blu); }
.timeline b { display: block; margin-top: 8px; font-family: var(--titoli); font-size: 22px; font-weight: 400; color: var(--inchiostro); }
.timeline p { margin-top: 8px; color: var(--grigio); }

/* the steps: an order, one under the other, the number in the margin */
.steps { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--inchiostro); }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--riga); }
.steps span { font-family: var(--titoli); font-size: 15px; letter-spacing: .06em; color: var(--blu); padding-top: 3px; }
.steps b { display: block; font-family: var(--titoli); font-size: 20px; font-weight: 400; color: var(--inchiostro); }
.steps p { margin-top: 6px; color: var(--grigio); font-size: 15.5px; }
.steps p b { display: inline; font-family: inherit; font-size: inherit; font-weight: 600; }
.screens-stack { display: grid; gap: 34px; }
.screens-stack figure { margin: 0; }

/* four short items in a grid of rules, no numbers (the home) */
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin: 40px 0 0; }
.rules-grid div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--riga); }
.rules-grid div:nth-child(-n+2) { border-top-color: var(--inchiostro); }
.rules-grid dt { font-family: var(--titoli); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro); }
.rules-grid dd { margin: 0; color: var(--grigio); font-size: 15.5px; }

/* figures with what they count (instead of the band of big numbers) */
.facts-table td { padding-top: 18px; padding-bottom: 18px; font-size: 15.5px; }
.facts-table td:first-child { width: 150px; font-family: var(--titoli); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.facts-table td b { font-family: var(--titoli); font-size: 22px; font-weight: 400; }
.scuro .facts-table { border-top: 1px solid rgba(255, 255, 255, .5); }
.scuro .facts-table td { border-bottom-color: var(--riga-scura); color: var(--testo-scuro); }
.scuro .facts-table td:first-child { color: #fff; }
.facts-table.company { border-top: 1px solid var(--inchiostro); }
.split > .facts-table.company { margin-top: 0; }

/* the figures side by side, on dark (Chi siamo): what is counted, the figure,
   what it means */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.facts-row div { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .5); }
.facts-row dt { font-family: var(--titoli); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accento); }
.facts-row dd { margin: 14px 0 0; color: var(--testo-scuro); font-size: 15px; line-height: 1.55; }
.facts-row b { display: block; margin-bottom: 10px; font-family: var(--titoli); font-size: 40px; font-weight: 400; line-height: 1.1; color: #fff; }
.facts-table.company .marca { width: 190px; font-size: 13px; letter-spacing: .08em; color: var(--inchiostro); }

/* the prices: one table, the services side by side */
.price-table { margin-top: 40px; }
.price-table th:nth-child(1) { width: 170px; }
.price-table th:nth-child(2) { width: 130px; }
.price-table td { font-size: 15.5px; color: var(--grigio); }
.price-table td:nth-child(1) b { font-family: var(--titoli); font-size: 18px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--inchiostro); }
.price-table td:nth-child(2) { font-family: var(--titoli); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro); padding-top: 19px; }
.price-table td.none { color: var(--grigio-2); }

/* plain text: a story, with small titles */
.prose { color: var(--grigio); font-size: 17px; line-height: 1.7; }
.prose p + p { margin-top: 16px; }
.split .prose { margin-top: 22px; }
.split > .prose:first-child, .split > div + .prose { margin-top: 0; }
.prose h3 { margin: 36px 0 10px; font-family: var(--titoli); font-size: 14px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro); }
.prose b { color: var(--inchiostro); font-weight: 600; }
.plain-list { margin: 0; padding: 0 0 0 20px; }
.plain-list li + li { margin-top: 8px; }

/* the end of a page: what to do next, without a form */
.closing .wrap { display: grid; gap: 18px; }
.closing p { max-width: 680px; font-size: 18px; }
.closing p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.closing .collegamenti { margin-top: 18px; }

@media (max-width: 980px) {
  .screen-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline li { padding: 0 0 0 40px; }
  .rules-grid { grid-template-columns: minmax(0, 1fr); }
  .rules-grid div:nth-child(2) { border-top-color: var(--riga); }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
}
@media (max-width: 760px) {
  /* the tables one row under the other: the name, then its lines */
  .data-table thead, .price-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td,
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: auto; }
  .data-table tr, .price-table tr { padding: 14px 0; border-bottom: 1px solid var(--riga); }
  .data-table td, .price-table td { padding: 2px 0; border: 0; }
  .price-table td:nth-child(2) { padding-top: 4px; }
  .price-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--inchiostro); }
  .price-table td.none { display: none; }
  .sheet div, .rules-grid div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .facts-table td:first-child { width: 110px; }
}
@media (max-width: 600px) {
  .screen-notes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .facts-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}