@font-face{font-family:Montserrat;src:url('/assets/montserrat-400.0f4a15e2.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('/assets/montserrat-700.c31c3a02.woff2') format('woff2');font-weight:600 900;font-display:swap}
/* color-scheme dichiarato: senza questa riga la modalità scura automatica di alcuni
   telefoni Android reinverte i colori del marchio.
   Le misure del testo sono in rem (1rem = 16px): così l'impostazione "carattere grande"
   del browser ha effetto. Spaziature e bordi restano in px. */
:root{color-scheme:light;--blue:#0B2D3D;--teal:#00B3A6;--teal-dark:#007A72;--green:#7CB342;--gray:#E8ECEF;--soft:#F4F7F8;--ink:#34515E;--muted:#5B7482;--line:#DCE4E8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;font:1rem/1.65 Montserrat,"Segoe UI",Arial,sans-serif;color:var(--blue);background:#fff;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
p{max-width:70ch}
/* parole senza spazi (indirizzi email, indirizzi web, codici lotto) vanno a capo invece di sfondare */
a[href^="mailto:"],a[href^="tel:"],.footnote span,.genea-panel b{overflow-wrap:anywhere}
/* il contrario: «GS1-128» e «Stato-Regioni» non si spezzano sul trattino (la classe la mette
   la funzione tipografia, vedi page(): il trattino indivisibile U+2011 Montserrat non ce l'ha) */
.unito{white-space:nowrap}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:800;margin-bottom:22px}
h2{font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:800;margin-bottom:20px}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
/* La scala della home, e solo della home. La regola globale di h2 (27->40px) non si tocca:
   le altre venti pagine devono restare dove sono. Qui la misura esplode in tre punti soli,
   80px una volta (l'apertura), 56px due volte (il titolo del blocco sul tempo e i numerali
   della cesura), 24px la riga d'esito (in .sparisce, l'unico posto in cui serve): fra questi
   e il corpo del testo c'è un salto che si vede. Era proprio quello che mancava, con dieci
   misure schiacciate fra 11 e 20px. */
.claim{font-size:clamp(2.25rem,5.2vw,5rem)}
h2.forte{font-size:clamp(1.75rem,3.6vw,3.5rem)}
/* La colonna della pagina. --col è la larghezza massima, --gut il margine ai lati.
   Sono scritte come variabili perché servono anche più sotto, alla colonna di lettura
   stretta (.article e .faq): quella deve ripetere questo stesso margine sinistro invece
   di ricentrarsi per conto suo. */
.wrap{--col:1220px;--gut:32px;width:min(var(--col),calc(100% - var(--gut)*2));margin-inline:auto}
.ck{width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* header
   Il logo è un elemento flessibile in una riga che, sotto i 1114px, chiedeva più spazio
   di quello disponibile. Con height fissa e width automatica il logo veniva prima
   schiacciato e poi ridotto a zero (il max-width:100% delle immagini azzera la larghezza
   minima di un elemento flex): spariva dall'header.
   Ora il logo è dimensionato in larghezza con altezza automatica, quindi se lo spazio
   manca si riduce in proporzione senza deformarsi; lo spazio fra le voci di menu è
   elastico (clamp) e le due voci lunghe si ritirano ai punti di rottura più sotto. */
.header{border-bottom:1px solid var(--gray)}
.header .wrap{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center}
.brand img{width:154px;height:auto;display:block;flex-shrink:0}
.nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,32px);font-size:.875rem;font-weight:600}
.nav a{padding-block:10px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--teal-dark)}
.header-actions{display:flex;align-items:center;gap:18px}
.header-actions .text-link{font-size:.875rem;font-weight:600;white-space:nowrap}
.menu{display:none}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:12px 24px;background:var(--teal);color:var(--blue);font-size:.9375rem;font-weight:700;border:1px solid var(--teal-dark);border-radius:6px;line-height:1.3;white-space:nowrap}
.button:hover{background:#3fd0c3}
.button.ghost{background:transparent;border:1px solid #628A9B;color:#fff}
.button.ghost:hover{background:rgba(255,255,255,.08)}
.button.small{min-height:44px;padding:10px 18px;font-size:.875rem}
.text-link{font-weight:600;text-decoration:underline;text-underline-offset:5px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:22px}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--teal)}
.lead{font-size:1.1875rem;line-height:1.65;color:var(--ink);max-width:56ch}
/* apertura (home), su fondo blu.
   Il pannello decorativo e la finta scheda lotto sono stati tolti: erano i due elementi più
   grandi sopra la piega e non dicevano niente (il decoro muto era 19 volte l'unica azione
   della pagina). Ora sopra la piega restano un titolo, una frase, un disegno e un pulsante. */
.hero{padding-block:72px 56px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.hero .lead{font-size:1.375rem;max-width:52ch}
.hero .actions{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.hero .actions .button{min-height:56px;font-size:1.0625rem}
/* --muted sul blu fa 2,94:1 e non passa: sul fondo scuro le spunte vanno in #C9DCE3 (10,2:1) */
.hero .checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:.8125rem;font-weight:500;color:#C9DCE3}
.hero .checks span{display:flex;align-items:center;gap:8px}
.caption{font-size:.8125rem;color:var(--muted);margin-block:14px}
/* la prova tecnica, appoggiata sotto l'affermazione che la richiede e prima della piega.
   Era una striscia a metà pagina con quattro sotto-testi da 12px: ora è una riga sola per
   voce, dentro l'apertura, dove serve a dire di che cosa stiamo parlando. */
.credenziali{margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.credenziali div{display:flex;align-items:center;gap:12px}
.credenziali svg{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.credenziali b{font-size:.9375rem;font-weight:600}
/* GRAFICA 1: lo stesso codice lotto, nello stesso riquadro, cinque volte. Nasce una volta
   (il campo in alto) e arriva in quattro destinazioni seguendo un filo. Nessuna freccia
   risale: il messaggio "non lo riscrivi" sta nel tracciato, prima che nel testo.
   Colori ammessi sul blu: bianco 14,4:1, #C9DCE3 10,2:1, #8CE1D8 9,5:1, --teal 5,49:1;
   #628A9B (3,86:1) solo per i contorni, mai per il testo.
   Due disegni con lo stesso contenuto, alternati ai 1000px come per il diagramma del flusso:
   un unico SVG che rimpicciolisse porterebbe il testo sotto i 10px. */
.uv{display:block;height:auto}
.uv-h{width:100%}
.uv-v{display:none;width:100%;max-width:320px;margin-inline:auto}
.uv text{font-family:Montserrat,"Segoe UI",Arial,sans-serif}
.uv .campo{fill:#fff}
.uv .lab{fill:var(--teal-dark);font-size:13px;font-weight:700;letter-spacing:.12em}
.uv .cod{fill:var(--blue);font-size:30px;font-weight:800;letter-spacing:-.02em}
.uv .sub{fill:#C9DCE3;font-size:15px}
.uv .org{fill:var(--teal)}
.uv .filo{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round}
.uv .box{fill:none;stroke:#628A9B;stroke-width:1.5}
.uv .gi{fill:none;stroke:#8CE1D8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.uv .t1{fill:#fff;font-size:14px;font-weight:700}
.uv .t2{fill:#C9DCE3;font-size:12px}
.uv .cd{fill:#8CE1D8;font-size:12px;font-weight:700}
/* nella versione impilata il disegno è largo 320 unità invece di 520: a schermo si riduce
   di più, quindi le due righe minute salgono di misura per restare leggibili a 320px. */
.uv-v .t1{font-size:17px}
.uv-v .t2,.uv-v .cd{font-size:14px}
/* sections */
.section{padding-block:88px}
.section.corta{padding-block:60px}
.section.soft{background:var(--soft)}
/* Il fondo scuro non è più una sola isola: nella home apre la pagina e torna al centro.
   È l'unico gradino di fondo che la palette permette (--soft su bianco fa 1,08:1, --gray
   1,19:1: nessuno dei due si vede), ed è anche l'unico fondo su cui il colore del marchio
   diventa usabile in grande (--teal 5,49:1, --green 5,75:1; sul bianco stanno a 2,6 e 2,5).
   Il selettore è la sola classe .dark, così vale anche per l'apertura, che non è .section. */
.dark{background:var(--blue);color:#fff}
.dark .eyebrow{color:#8CE1D8}
.dark .lead,.dark p{color:#C9DCE3}
.section-head{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end;margin-bottom:44px}
.section-head p{color:var(--ink);font-size:1.0625rem;margin:0;max-width:46ch}
.section-head h2{margin:0}
/* fascia bordata: la forma della sezione sul caseificio, riconoscibile senza schede */
.fascia{border-block:2px solid var(--blue)}
.fascia .testo{max-width:74ch}
.testo{font-size:1.0625rem;color:var(--ink);max-width:55ch}
.testo strong{color:var(--blue)}
/* elenco con la spunta, quando le voci sono frasi intere e non schede */
.tre{list-style:none;padding:0;margin:26px 0 22px;display:grid;gap:12px;font-size:1.0625rem;color:var(--ink);max-width:70ch}
.tre li{display:flex;gap:12px;align-items:flex-start}
.tre .ck{margin-top:6px}
/* --ink su fondo blu fa 1,70:1: sulla fascia scura l'elenco passa a #C9DCE3 (10,18:1).
   La spunta invece resta --green, che sul blu fa 5,75:1 ed è il colore del marchio. */
.dark .tre{color:#C9DCE3}
/* Sul CHIARO la spunta verde farebbe 2,50:1, cioè un elemento grafico sotto il 3:1: lì
   diventa --teal-dark (5,22:1). Non è un difetto esistente, è la trappola in cui cade chi
   porta l'elenco dal fondo scuro a quello bianco senza toccare il colore. */
.tre.chiaro .ck{stroke:var(--teal-dark)}
/* settori: le schede devono DIRSI cliccabili anche da ferme.
   Sul telefono il passaggio del mouse non esiste, quindi tutto ciò che si accendeva solo
   al passaggio del mouse, lì, non c'è mai stato: restavano quattro riquadri con il bordo
   a 1,29:1 e la parola "Scopri" a 13px, la scritta più piccola della scheda.
   Adesso a riposo ci sono quattro segnali, tre dei quali non sono colore: il bollo scuro,
   il titolo SOTTOLINEATO, un bordo che si vede davvero (#78919C, 3,25:1 sul bianco: il
   3:1 che la regola chiede a un elemento grafico) e la riga d'azione in fondo.
   Il titolo è --teal-dark, 5,22:1 sul bianco.
   Tutta la scheda è il collegamento, quindi il bersaglio del dito è il riquadro intero.
   Le regole del passaggio del mouse stanno dentro @media(hover:hover): su iOS un :hover
   resta appiccicato dopo il tocco. Il tocco ha la sua regola, che è :active. */
/* Le schede sono sette dal 6 ottobre 2026. A griglia di quattro colonne la seconda fila, di tre,
   lasciava un buco a destra, e a due colonne la settima scheda restava sola a sinistra: ora sono
   una fila che va a capo e si centra (flex-wrap e justify-content:center), quattro per riga, poi
   due sotto i 1120px e una sotto gli 860, quindi la fila che resta sta in mezzo a ogni larghezza e
   con qualunque numero di settori. La base di ogni scheda è un quarto (o metà) della riga meno la
   sua parte di spazio fra le schede, con due pixel di scorta per riga: un arrotondamento non deve
   mandare a capo l'ultima. */
.sectors{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.sectors a{flex:0 1 calc(25% - 17px);display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid #78919C;border-radius:10px;background:#fff;transition:border-color .15s,background .15s,transform .15s}
/* il titolo della scheda è un h2, non un h3: fra l'h1 e queste schede non c'è
   nessun altro titolo, e un h3 sarebbe un salto di gerarchia. È la stessa scelta già
   fatta nelle schede di /guide/. */
.sectors a h2{margin:0;font-size:1.25rem;color:var(--teal-dark);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sectors p{font-size:.875rem;color:var(--ink);margin:0;flex:1}
/* La riga d'azione delle schede dei settori va a capo come il testo (6 ottobre 2026): «Apri la pagina
   Gastronomie» in una scheda da quattro per riga non sta su una riga, e in una fila flessibile la
   freccina restava sola sul margine destro, staccata dalla parola. Qui la riga è un blocco, e il nome
   del settore con la freccina sta in un pezzo che non si spezza (.azione-fine): se la riga non basta va
   a capo «Apri la pagina», e la freccina resta attaccata al nome. Solo nelle schede dei settori: le
   altre righe d'azione non vanno a capo. */
.sectors .azione{display:block}
.sectors .azione svg{display:inline-block;vertical-align:-3px;margin-left:8px}
.azione-fine{white-space:nowrap}
.sectors a:active{background:var(--soft);border-color:var(--teal-dark)}
@media(hover:hover){.sectors a:hover{border-color:var(--teal-dark);background:var(--soft);transform:translateY(-2px)}.sectors a:hover h2{text-decoration-thickness:2px}}
/* il bollo: l'icona del settore, che c'era già, dentro un quadrato pieno --blue con il
   tratto bianco (14,41:1). Non è un disegno nuovo: è la stessa icona resa riconoscibile a
   colpo d'occhio. Ed è lo stesso oggetto che accoglie la pagina di settore in grande,
   così chi ha appena cliccato vede arrivare la cosa che ha toccato.
   flex-shrink:0 non è facoltativo: è la regressione già vista sul logo dell'header. */
.bollo{width:64px;height:64px;border-radius:12px;background:var(--blue);display:grid;place-items:center;flex-shrink:0}
.bollo svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bollo.grande{width:80px;height:80px}
.bollo.grande svg{width:42px;height:42px}
/* la riga d'azione, in fondo alla scheda: prende il posto di "Scopri →" a 13px, cioè
   della parte che diceva "si apre" scritta nella misura più piccola della scheda. */
.azione{display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:700;color:var(--teal-dark);margin-top:auto}
.azione svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* GRAFICA G1 — la convergenza, sulla fascia scura di /per-chi/: i mestieri, un
   programma solo. Metà disegno e metà testo, deliberatamente: quello che ESCE dalla base
   sono le tre righe con la spunta, in HTML, che crescono con l'impostazione "carattere
   grande" del browser invece di restare congelate in unità di disegno.
   Due varianti alternate ai 1000px, come .flow-h/.flow-v e .uv-h/.uv-v: un unico SVG che
   si limitasse a rimpicciolire porterebbe i nomi sotto i 10px.
   Colori ammessi sul blu: bianco 14,41:1, #C9DCE3 10,18:1, #8CE1D8 9,53:1, --teal 5,49:1;
   #628A9B (3,86:1) solo per i contorni, mai per il testo. */
/* .due-col è la stessa griglia senza il disegno: la usa la fascia scura di /assistenza/,
   dove le due colonne sono il tasto F1 e il manuale in PDF. Sta qui, aggiunta al selettore
   invece che riscritta più sotto, così le due si impilano insieme ai 1000px e non possono
   divergere. */
.conv-grid,.due-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.conv{display:block;height:auto}
.conv-h{width:100%}
.conv-v{display:none;width:100%;max-width:340px;margin-inline:auto}
.conv text{font-family:Montserrat,"Segoe UI",Arial,sans-serif}
.conv .n{fill:#fff;font-size:15px;font-weight:700}
.conv .filo{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.conv .org{fill:var(--teal)}
.conv .box{fill:none;stroke:#628A9B;stroke-width:1.5}
.conv .b{fill:#fff;font-size:19px;font-weight:800}
.conv .s{fill:#C9DCE3;font-size:14px}
.conv .gi{fill:none;stroke:#8CE1D8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* la versione impilata è larga 340 unità e su uno schermo da 320px se ne vedono 280: si
   riduce all'82%, quindi i nomi salgono di misura per restare leggibili, come .uv-v */
.conv-v .n{font-size:17px}
.conv-v .s{font-size:15px}
/* genealogia: un pannello blu a tutta larghezza incastonato nel bianco. La finta barra di
   finestra (logo, percorso "Tracciabilità › Genealogia lotto", chip del codice) è sparita:
   era il registro "finta schermata" che la pagina doveva abbandonare. Il contenuto delle
   tre colonne resta, a misura vera, e il pannello fa anche da cesura fra le sezioni chiare.
   Il lotto al centro è l'unico oggetto a fondo teal: l'occhio atterra lì e si apre ai lati. */
.dark .text-link{color:#8CE1D8}
.genea-panel{background:var(--blue);color:#fff;border-radius:12px;padding:28px}
.genea-panel .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.genea-panel .cols>div{display:flex;flex-direction:column;gap:10px}
.genea-panel small{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8CE1D8}
.genea-panel .box{border:1px solid #628A9B;border-radius:8px;padding:12px 14px;font-size:.9375rem;color:#C9DCE3}
.genea-panel .box b{display:block;color:#fff}
.genea-panel .lot{background:var(--teal);color:var(--blue);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:6px;flex:1;font-size:.9375rem}
.genea-panel .lot b{font-size:1.125rem}
.genea-panel .lot .pill{font-size:.8125rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--blue);color:#fff;align-self:flex-start;margin-top:6px}
/* GRAFICA 4b: lo stesso filo, percorso al contrario. Rende visibile la parola "ritroso",
   che oggi si poteva solo leggere, e riusa il segno del diagramma del flusso. */
.genea-panel .ritroso{display:flex;align-items:center;gap:16px;margin-top:22px}
.genea-panel .ritroso svg{width:min(240px,50%);height:16px;flex-shrink:0}
.genea-panel .ritroso path{fill:none;stroke:#8CE1D8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.genea-panel .ritroso .tratto{stroke-dasharray:7 6}
.genea-panel .ritroso span{font-size:.9375rem;color:#C9DCE3}
.genea-panel .acts{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.genea-panel .acts span{font-size:.9375rem;font-weight:700;padding:11px 16px;border-radius:6px;border:1px solid #628A9B}
.genea-panel .acts span:first-child{background:var(--teal);border-color:var(--teal);color:var(--blue)}
.dark .caption{color:#8FA9B4}
/* funzionalità: la pagina, sezione per sezione
   Il difetto era detto in tre parole: piatte, niente che risalta, sparse. Le prime due
   sono di forma (cinque h2 tutti a 40px, la stessa testata al centesimo di pixel, e due
   soli fondi che fra loro stanno a 1,08:1, cioè non si vedono): cinque padding, cinque
   forme di testata, cinque misure di h2, e la sezione delle prove sul fondo blu, che è
   l'unico gradino di fondo che la palette permetta.
   La terza — sparse — era di ordine, e per un giro è stata trattata con una pastiglia di
   «consegna» che chiudeva ogni sezione nominando il dato passato avanti, ripetuto poi
   dalla prima riga della sezione dopo. Riletta a schermo di telefono, quella cucitura era
   la stessa frase tre volte di fila: pastiglia, occhiello, riga d'apertura. Cinque
   pastiglie tolte, cinque occhielli tolti: sotto ogni h2 resta UNA riga sola, e dice
   qualcosa che l'h2 non dice già.
   Le classi sono di questa pagina soltanto: quelle della home (.sparisce, .mestieri,
   .scheda) non si riusano, altrimenti ritoccare la home cambierebbe anche questa. */
h2.picco{font-size:clamp(1.9rem,3.2vw,2.75rem)}
h2.sezione{font-size:clamp(1.5rem,2.2vw,2rem)}
/* La sezione tranquilla era fissa a 1,75rem mentre le altre due si stringono: sotto i
   1273px di finestra diventava la SECONDA più grande della pagina (28px contro i 24 di
   S1, S4 e S5), cioè su ogni portatile e ogni telefono era la sezione del respiro a
   gridare. Ora si stringe come le altre e resta la più piccola ovunque: divario minimo
   2px a 320px, misurato da 320 a 2000. */
h2.calma{font-size:clamp(1.375rem,2vw,1.75rem)}
/* Due sezioni dello stesso peso dentro un blocco solo: «Come lavora» e «Cosa ottieni»
   erano due <section> separate, e i loro 176px di margine interno erano il pezzo più caro
   di una pagina che è già cresciuta abbastanza. Le due sezioni restano due, con lo stesso
   titolo di prima; a separarle basta lo spazio sopra il secondo. */
h2.sezione.seconda{margin-top:56px}
.apre{font-size:1.0625rem;color:var(--ink);max-width:62ch;margin-bottom:30px}
.dark .apre{font-size:1.1875rem}
/* S1 — apertura e diagramma nella stessa sezione: il disegno approvato sta sopra la
   piega invece di arrivare 1228px dopo il titolo. La figura esce dalla colonna di testo
   (1360 invece di 1220): il viewBox si scala in proporzione, quindi ogni misura dentro
   il disegno sale e nessuna scende. Titolo del diagramma a 32px sotto un h1 quasi doppio:
   la gerarchia si vede. */
.apertura{padding-block:56px 64px}
.apertura h1{max-width:26ch}
.apertura h2{margin:28px 0 18px}
/* L'invito agli esempi (5 ottobre 2026), a destra del titolo: il perché sta in build.mjs,
   sopra la costante «mazzo». Tutto il blocco è il collegamento e si dice cliccabile da fermo
   come le schede dei settori: titolo sottolineato in --teal-dark (5,22:1) e riga d'azione.
   Il titolo della pagina, solo qui e solo a colonne affiancate, scende a 52px al massimo e
   resta su tre righe: così l'apertura non si allunga. Le due carte dietro l'immagine sono
   ::before e ::after e si spostano di --passo per --su: il passaggio del mouse e il tocco
   alzano --su di un terzo, così il salto resta in proporzione anche sul telefono. */
.apertura-griglia{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,24vw,350px);gap:clamp(32px,4.4vw,64px);align-items:start}
.apertura-griglia .lead{margin-bottom:0}
/* il complemento esatto del punto di rottura dei 1000px (min-width:1001px lascerebbe scoperte
   le larghezze frazionarie dello zoom); sotto, il titolo torna alla misura delle altre pagine */
@media not all and (max-width:1000px){.apertura-griglia h1{font-size:clamp(2rem,3.8vw,3.25rem)}}
.mazzo{display:flex;flex-direction:column;gap:14px}
.mazzo-carte{--passo:9px;--su:1;display:block;position:relative;isolation:isolate;margin-top:18px}
.mazzo-carte::before,.mazzo-carte::after{content:"";position:absolute;inset:0;border-radius:12px;transform-origin:50% 0;z-index:-1;transition:transform .15s}
.mazzo-carte::after{background:var(--teal);transform:translateY(calc(var(--passo) * var(--su) * -1)) scale(.92)}
.mazzo-carte::before{background:var(--blue);transform:translateY(calc(var(--passo) * var(--su) * -2)) scale(.84)}
.mazzo-carte img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px -18px rgba(11,45,61,.55)}
.mazzo-testo{display:flex;flex-direction:column;gap:4px}
.mazzo-titolo{font-size:1.25rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;text-wrap:balance;color:var(--teal-dark);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mazzo-riga{font-size:.8125rem;line-height:1.5;color:var(--ink)}
.mazzo .azione{margin-top:6px}
.mazzo:active .mazzo-carte{--su:1.34}
.mazzo:active .mazzo-titolo{text-decoration-thickness:2px}
@media(hover:hover){.mazzo:hover .mazzo-carte{--su:1.34}.mazzo:hover .mazzo-titolo{text-decoration-thickness:2px}}
.figura-larga{width:min(1360px,calc(100% - 64px));margin-inline:auto}
/* Sotto il disegno c'era un paragrafo su due colonne che ripercorreva i sei riquadri uno
   per uno, e una riga a 24px sul percorso a ritroso che il disegno porta già scritta in
   fondo. Detta la stessa cosa quattro volte — disegno, didascalia, paragrafo, riga — la
   sezione stancava prima di finire. Restano il disegno e la sua didascalia, che è l'unica
   delle quattro a dire una cosa in più (il lotto non entra nel file XML per il SdI). */
/* S2 — il picco: quattro compiti, non sei, e l'esito promosso a 24px in bianco. Prima
   l'esito stava a 14px dentro una scheda il cui bordo faceva 1,20:1 sul fondo, e le due
   etichette comparivano dodici volte a 11px: qui compaiono una volta sola, in testa alle
   colonne (sotto i 1000px la colonna è una, quindi la testata cede il posto
   all'etichetta di riga, che è lo stesso testo). */
.cambia{padding-block:96px}
.prove .capo,.prove .riga{display:grid;grid-template-columns:300px 1fr 1fr;gap:48px}
.prove .capo{padding-bottom:12px}
.prove .capo span,.prove .lab{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.prove .a .lab,.prove .capo .ca{color:#8FA9B4}
.prove .c .lab,.prove .capo .cc{color:#8CE1D8}
/* le due etichette si vedono una volta sola, in testa alle colonne (.capo, che è solo
   visivo ed è aria-hidden): le etichette di riga restano però nel testo letto ad alta
   voce, altrimenti chi non vede la testata non saprebbe di quale colonna è la prosa */
.prove .lab{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.prove .riga{padding-block:26px;border-top:1px solid rgba(255,255,255,.18)}
.prove h3{margin:0;font-size:1.25rem}
.prove .adesso{font-size:.9375rem;max-width:46ch;margin:0}
/* La riga d'esito serve anche alla fascia scura delle pagine di settore (.problema): il
   selettore si allunga invece di duplicare sette dichiarazioni. Cambiano solo il margine
   (lì l'esito chiude la fascia, non apre una colonna) e la larghezza. */
.prove .esito,.problema .esito{display:flex;gap:12px;align-items:flex-start;font-size:1.5rem;line-height:1.3;font-weight:700;color:#fff;margin:0 0 14px;max-width:26ch}
.prove .esito .ck,.problema .esito .ck{width:22px;height:22px;margin-top:5px}
.problema .esito{margin:30px 0 0;max-width:44ch}
.prove .con{font-size:.9375rem;max-width:56ch;margin:0}
/* la riga di onestà: era una scusa messa prima dell'argomento, qui è una firma dopo */
.prove .onesta{border-top:1px solid rgba(255,255,255,.18);padding-top:26px;margin-top:4px}
.prove .onesta p{font-size:.9375rem;max-width:88ch;margin:0}
/* S3 — la sezione tranquilla, il respiro fra la prova e l'indice: colonna a 62 caratteri
   invece dei 92 di prima. Il paragrafo del problema è stato tolto, la home lo racconta
   già su fondo scuro e a 56px. */
.identita{padding-block:60px}
.identita .def{font-size:1.0625rem;color:var(--ink);max-width:62ch}
.identita .button{margin-top:10px}
.identita .def strong{color:var(--blue)}
/* GRAFICA A — la targa. Era l'unica sezione senza niente da guardare, ed è la domanda che
   più di ogni altra chiede un oggetto: che cos'è questo programma, e dove stanno i miei
   dati. La forma viene dalla relazione, che qui non è una sequenza ma un'IDENTITÀ: la
   targhetta avvitata sul fianco di un macchinario, sei righe etichetta/valore.
   È l'unico disegno della pagina fatto di HTML e bordi invece che di tracciati, ed è una
   scelta, non una scorciatoia: il testo dentro un SVG è in unità di disegno e rimpicciolisce
   insieme al contenitore, mentre questi sei valori vanno letti come il resto della pagina.
   Nessuno dei sei è un'affermazione nuova: stanno già nel piede di pagina e nella home.
   Aveva anche quattro viti disegnate agli angoli. Erano l'unico ornamento dichiarato della
   pagina, cioè quattro disegni che non aiutavano a capire niente: tolte. Il riquadro con la
   fascia scura basta a far leggere le sei righe come una scheda. */
.id-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.targa{position:relative;background:#fff;border:2px solid var(--blue);border-radius:6px;max-width:520px;overflow:hidden}
/* min-height e non height: a una riga la fascia resta esatta a 44px, ma se il browser è
   impostato su "carattere grande" la scritta cresce e la fascia cresce con lei invece di
   tagliarla. Stessa ragione per cui le misure di questo sito sono in rem. */
.tg-capo{display:flex;align-items:center;min-height:44px;margin:0;padding:8px 22px;max-width:none;background:var(--blue);color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tg-righe{margin:0;padding:0 22px 20px}
.tg-righe>div{display:grid;grid-template-columns:42% 1fr;gap:0 14px;padding:14px 0;border-top:1px solid var(--line)}
.tg-righe>div:first-child{border-top:0}
.tg-righe dt{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);padding-top:4px}
.tg-righe dd{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.45;color:var(--blue)}
/* S4 — l'indice al posto del muro di 24 schede: sei righe, tutta la riga è il collegamento,
   quindi sparisce anche "Scopri la funzione" ripetuto sei volte a 13px, cioè la parte da
   cliccare che era la scritta più piccola della scheda.
   Le sei righe avevano davanti il numero della fase corrispondente del diagramma, e non
   tornava: la quinta portava «05·06» perché consegna e fattura sono la stessa area, e la
   sesta un frammento di filo disegnato al posto del numero perché tracciabilità non è una
   fase. Due eccezioni su sei righe non sono una numerazione, sono un rebus — e la riga che
   la introduceva («le sei aree sono le sei fasi») era anche falsa. Via i numeri e via il
   frammento; l'ordine parte da Tracciabilità, che è quello che si cerca. */
.aree-indice{padding-block:88px}
.indice-fasi{list-style:none;margin:0 0 22px;padding:0}
.indice-fasi a{display:grid;grid-template-columns:28px 1fr;gap:0 16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.indice-fasi svg{width:24px;height:24px;margin-top:4px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.indice-fasi h3{margin:0 0 4px;font-size:1.25rem}
.indice-fasi p{font-size:.9375rem;color:var(--ink);margin:0;max-width:64ch}
.indice-fasi a:hover h3{text-decoration:underline;text-underline-offset:4px}
/* S5 — il muro: nove divieti con la risposta accanto, su una sola linea verticale. Il
   tratto blu da 3px si ripete su nove righe adiacenti e forma una linea sola, alta quanto
   la tabella. Prima erano quindici filetti identici da 2px in --blue, il contrasto più
   alto disponibile sul chiaro speso come texture: adesso è uno, e significa qualcosa. */
/* Prima del muro c'era una linea di confine disegnata — tratto pieno fin dove arriva il
   programma, tratteggiato oltre — con sopra due etichette, «quello che fa» e «quello che
   resta a te». Contate a schermo di telefono, fra l'h2 e la prima riga della tabella si
   attraversavano OTTO strati di testata: occhiello, h2, riga d'apertura, tre etichette,
   il disegno, e la testata vera delle due colonne. Il disegno diceva la stessa cosa della
   testata vera, che però intesta anche le righe: sono rimasti l'h2, una riga e la testata. */
.confini{padding-block:80px}
.muro-capo,.muro>div{display:grid;grid-template-columns:1fr 1.15fr}
.muro-capo{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding-bottom:12px}
.muro-capo span:first-child{text-align:right;padding-right:28px;color:var(--blue)}
.muro-capo span+span{padding-left:28px;color:var(--teal-dark)}
.muro{margin:0}
.muro dt{text-align:right;padding:14px 28px 14px 0;border-top:1px solid var(--line)}
.muro dt b{display:block;font-size:.9375rem;color:var(--blue);margin-bottom:5px}
/* in /prezzi/ la cella di sinistra è una domanda sola, senza la riga di precisazione sotto:
   senza questa riga resterebbero 5px di vuoto in fondo a ogni cella */
.muro dt b:last-child{margin-bottom:0}
.muro dt span{font-size:.8125rem;color:var(--muted)}
.muro dd{margin:0;padding:14px 0 14px 28px;border-top:1px solid var(--line);border-left:3px solid var(--blue);font-size:.9375rem;color:var(--ink)}
/* la cesura: la sezione più corta della pagina fra due delle più alte, ed è l'unico punto
   in cui il ritmo verticale si rompe. Quasi solo tipografia. Il numerale a sinistra non è
   digitato: viene dal conto delle voci dell'elenco che lo giustifica (vedi paroleCesura).
   Il numero a destra è sempre 1: la pagina non dice che il lavoro sparisce, dice che si fa
   una volta, ed è un'affermazione che si può controllare aprendo il programma. */
.cesura{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,56px);max-width:900px;padding-block:48px;text-align:center}
.cesura div{flex:1}
.cesura .n{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--blue);margin:0;text-wrap:balance}
.cesura .uno{color:var(--teal-dark)}
.cesura .d{font-size:.9375rem;color:var(--ink);margin:12px auto 0;max-width:24ch}
/* GRAFICA 2: il tratto più spesso della pagina, e serve a essere spesso. Due disegni
   alternati con display agli 860px, non uno ruotato: come .flow-h e .flow-v. */
.ces-h{width:90px;height:40px;flex-shrink:0}
.ces-v{display:none;width:40px;height:90px;flex-shrink:0}
.ces path{fill:none;stroke:var(--teal-dark);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
/* "il lavoro che sparisce": quattro righe, non quattro schede. Niente riquadro, niente
   raggio, solo un filo fra una riga e l'altra. Prima era la stessa scheda dei settori e la
   frase che porta il messaggio stava a 11px, la misura più piccola del sito, alla pari con
   l'etichetta neutra accanto. Adesso la riga d'esito è a 24px e in bianco, i passaggi a mano
   a 15px in #C9DCE3: quello che il programma fa pesa più di quello che fai a mano. */
.sparisce .riga{display:grid;grid-template-columns:300px 1fr 1fr;gap:40px;padding-block:24px;border-top:1px solid rgba(255,255,255,.18)}
.sparisce h3{margin:0 0 16px}
.sparisce .adesso{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FA9B4;margin:0 0 12px}
.sparisce ol{counter-reset:t;list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9375rem;color:#C9DCE3}
.sparisce li{display:grid;grid-template-columns:30px 1fr;align-items:start}
.sparisce li::before{counter-increment:t;content:counter(t,decimal-leading-zero);font-size:.8125rem;font-weight:800;color:#8CE1D8;padding-top:3px}
.sparisce .con{color:#8CE1D8}
.sparisce .esito{font-size:1.5rem;font-weight:700;line-height:1.3;display:flex;gap:12px;align-items:flex-start;color:#fff;margin:0 0 16px;max-width:30ch}
.sparisce .esito .ck{width:22px;height:22px;margin-top:5px}
.sparisce .spiega{font-size:1rem;margin:0 0 12px}
.sparisce .spiega:last-child{margin-bottom:0}
.sparisce .onesta{border-top:1px solid rgba(255,255,255,.18);padding-top:28px;margin-top:10px}
.sparisce .onesta p{font-size:.9375rem;max-width:88ch;margin:0}
/* GRAFICA 3: tante barre vuote quanti sono i passaggi a mano, una sola piena sotto. La
   disuguaglianza di ingombro si conta prima di leggerla, ed è la versione che funziona di
   ciò che prima tentava il riquadro velato (1,08:1, invisibile). Le due tinte stanno fra
   loro a contrasto bassissimo: si distinguono per FORMA, mai per colore. */
.g-barre{display:block;width:180px;max-width:100%;height:auto;margin-top:4px}
.g-barre .vuota{fill:none;stroke:#8FA9B4;stroke-width:1.5}
.g-barre .giu{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.g-barre .piena{fill:var(--teal)}
/* diagramma del flusso
   Due disegni con lo stesso contenuto, uno orizzontale e uno in colonna, alternati dal
   punto di rottura dei 1000px. Il testo dentro un SVG è in unità di disegno e rimpicciolisce
   insieme al contenitore: sotto i 1000px la versione orizzontale scenderebbe sotto i 10px,
   quindi il disegno si rimpila invece di miniaturizzarsi, come fa il pannello della
   genealogia, che passa da tre colonne a una. La versione in colonna è fermata a 340px di larghezza: sopra
   diventerebbe gigante, e a 320px di schermo (280px utili) resta al 93% della sua misura.
   Colori: solo --blue (14,4:1) e --teal-dark (5,2:1) su fondo chiaro. Sono gli unici due
   che superano il 3:1 richiesto agli elementi grafici che portano informazione: il teal
   chiaro (2,6:1) e il verde (2,5:1) qui non si possono usare.
   Nessuna animazione: nel resto del sito non ce n'è, un filo che si disegna da solo sarebbe
   fuori registro. Nessun attributo style nel markup: la policy del sito blocca style=. */
.flow{display:block;height:auto}
.flow-h{width:100%}
.flow-v{display:none;width:100%;max-width:340px;margin-inline:auto}
.flow-fig{margin:0 0 20px}
.flow text{font-family:Montserrat,"Segoe UI",Arial,sans-serif}
.flow .card{fill:#fff;stroke:var(--blue);stroke-width:1.4}
.flow .filo{fill:none;stroke:var(--teal-dark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.flow .way{fill:none;stroke:var(--teal-dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow .dot{fill:var(--teal-dark)}
.flow .back{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 6}
.flow .tip{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow .gi{fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow .tag{fill:var(--blue)}
.flow .t{fill:var(--blue);font-size:15px;font-weight:700}
.flow .d{fill:var(--ink);font-size:13px}
.flow .tb{fill:var(--blue);font-weight:700}
.flow .k{fill:var(--teal-dark);font-size:10.5px;font-weight:700;letter-spacing:.1em}
.flow .v{fill:#fff;font-size:10.5px;font-weight:700;letter-spacing:.03em}
.flow .num{fill:var(--teal-dark);font-size:11px;font-weight:700}
/* mestieri: i settori, e basta. Qui accanto stava l'indice delle sei aree, che è
   di /funzionalita/ e da lì si raggiunge: due elenchi identici a un clic di distanza erano
   l'eco più grossa rimasta nel sito. Zero riquadri: dopo quattro disegni il silenzio è
   ritmo, e tutta la riga è il collegamento. */
/* auto-fit invece di colonne fisse: sotto i 320px «Pasticcerie» più la sua icona
   non ci sta in mezza riga, e così scende a una colonna da sé, senza punto di rottura.
   Al massimo quattro per riga (6 ottobre 2026, con sette settori): una colonna non scende sotto un
   quarto della riga, tolti i tre spazi fra le colonne, e così sul portatile le righe sono quattro
   più tre, come le schede di /per-chi/, invece di cinque più due. */
.mestieri .settori{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(190px,calc((100% - 96px) / 4)),1fr));gap:0 32px;margin:22px 0 6px}
.settori a{display:flex;align-items:center;gap:16px;padding:12px 0;font-size:1.125rem;font-weight:700}
.settori svg{width:32px;height:32px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.settori a:hover{text-decoration:underline;text-underline-offset:4px}
/* chiusura: che cos'è il programma e dove stanno i dati, in una colonna sola e corta.
   Prima erano un muro di testo senza titolo (92 caratteri per riga) e un pannello con un
   secondo marchio dentro. Qui la riga si ferma a 62 caratteri e il marchio resta uno solo,
   in intestazione e nel piede. Nessun fondo scuro: subito dopo arriva la CTA, che è blu. */
.scheda{border:1px solid var(--line);border-radius:12px;background:#fff;padding:clamp(24px,3.4vw,44px)}
.scheda .eyebrow{margin-bottom:16px}
.scheda h2{margin-bottom:18px}
.scheda .testo{max-width:66ch}
.scheda .caption{margin:22px 0 0;max-width:70ch}
.punti{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px 32px;margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.punti > div{display:flex;gap:14px;align-items:flex-start}
.punti svg{width:28px;height:28px;flex-shrink:0;fill:none;stroke:var(--teal-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.punti b{display:block;font-size:.9375rem;margin-bottom:3px}
.punti span{font-size:.875rem;color:var(--ink);line-height:1.5}
/* cta */
.cta{background:var(--blue);color:#fff;border-radius:12px;padding:52px 60px;display:flex;align-items:center;justify-content:space-between;gap:48px;margin-block:88px}
.cta h2{font-size:clamp(1.6rem,2.5vw,2rem);margin-bottom:10px}
.cta p{color:#C9DCE3;margin:0;font-size:.9375rem}
.cta .actions{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap}
/* footer */
.footer{border-top:1px solid var(--gray);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.footer .brand img{width:140px}
.footer p{font-size:.8125rem;color:var(--muted);max-width:32ch;margin:14px 0 0}
.footer .foot-h{font-size:.875rem;font-weight:800;line-height:1.12;letter-spacing:0;color:var(--blue);max-width:none;margin:0 0 14px}
.footer .col a{display:block;font-size:.8125rem;margin:8px 0}
.footer .col a:hover{color:var(--teal-dark)}
.footnote{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--gray);padding-top:22px;margin-top:44px;font-size:.75rem;color:var(--muted)}
/* pagine interne */
.page-title{padding-block:64px 40px}
.page-title h1{max-width:22ch}
/* La riga che DICE CHE COS'È, sotto il sottotitolo delle sei pagine d'area. Un gradino sotto
   il .lead (17px contro 19px) e una riga più lunga: è la definizione, non il richiamo. */
.page-title .def{font-size:1.0625rem;line-height:1.65;color:var(--ink);max-width:64ch;margin-top:18px}
/* la testata delle pagine di settore: il bollo grande SOPRA il titolo, non accanto.
   È il primo disegno che quelle pagine abbiano mai avuto, e non è contenuto nuovo: è la
   stessa icona della scheda appena cliccata.
   Accanto era più bello e sbagliato: misurato a 1680px, un bollo da 80px con 26px di
   spazio spostava l'h1 di 106px a destra del logo e del piede di pagina, cioè rifaceva in
   testata esattamente il disallineamento che si stava correggendo nel corpo. Sopra, il
   titolo riparte dal margine della pagina a ogni larghezza. */
.page-title .bollo{margin-bottom:20px}
.breadcrumb{font-size:.8125rem;color:var(--muted);margin-bottom:26px}
.breadcrumb a:hover{text-decoration:underline}
/* La colonna di lettura, stretta e ANCORATA A SINISTRA.
   Stringerla è giusto: una riga da 1220px non si legge. Centrarla no. Questi blocchi
   portano anche la classe .wrap, che ha margin-inline:auto: il margine automatico, che
   sugli altri blocchi centra la colonna piena, qui centrava la colonna corta dentro la
   pagina e staccava il corpo del testo di 200px dal titolo, dal logo e dal piede.
   Il margine sinistro ora ripete quello del .wrap pieno — lo stesso calcolo, le stesse
   variabili — e solo il margine destro resta automatico. Così il testo parte esattamente
   dove parte il titolo, a ogni larghezza di schermo.
   Regola generale: max-width in px su un elemento che ha anche .wrap vuole questa riga.
   Non è più solo una regola scritta: una guardia in scripts/verify.mjs rilegge il foglio
   pubblicato, cerca ogni classe usata insieme a .wrap che stringa la colonna in px e fa
   fallire la compilazione se non compare qui. Le eccezioni volute sono dichiarate lì. */
.wrap.article,.wrap.faq,.wrap.guides{margin-inline:max(var(--gut),calc((100% - var(--col))/2)) auto}
.article{max-width:820px;padding-block:8px 80px}
.article h2{font-size:1.6rem;margin-top:44px;margin-bottom:14px}
.article h3{margin-top:28px}
.article p,.article li{color:var(--ink)}
.article ul,.article ol{padding-left:22px;max-width:70ch}
.article li{margin:6px 0}
.article .button{margin-top:20px}
.notice{margin-top:36px;padding:22px 26px;background:var(--soft);border-radius:8px;font-size:.875rem}
.notice h2{font-size:1.125rem;margin:0 0 8px}
.notice p:last-child{margin-bottom:0}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-weight:800;color:var(--teal-dark);font-size:.9375rem;padding-top:2px}
/* GRAFICA G2 — il filo dei passaggi, nelle pagine di settore. NESSUN SVG: è la stessa
   idea del muro di /funzionalita/, dove nove bordi adiacenti formano una linea sola. Il
   bordo sinistro delle voci si salda in un tratto unico (--teal-dark, 5,22:1) e il numero
   sale su un pallino pieno --blue con la cifra bianca (14,41:1), tirato sul filo con un
   margine negativo di 16,5px, cioè metà pallino più mezzo tratto.
   Non è un disegno perché i passi vanno da quattro a sette secondo il settore e il testo è
   testo vero: disegnarlo lo congelerebbe.
   Sull'ultima voce il tratto non deve correre nel vuoto: il bordo diventa trasparente e
   al suo posto una sola dichiarazione di sfondo dipinge 24px di filo, quanto basta ad
   arrivare al centro dell'ultimo pallino. Nessun elemento in più.
   È un modificatore e non una modifica di .steps: le stesse voci numerate stanno anche
   nelle sei sotto-pagine di /funzionalita/ e in una guida, che non sono in perimetro. */
.steps.filo{gap:0;margin-left:16px;max-width:78ch}
.steps.filo li{display:block;position:relative;padding:0 0 26px 28px;border-left:3px solid var(--teal-dark)}
.steps.filo li:last-child{padding-bottom:0;border-left-color:transparent;background:linear-gradient(var(--teal-dark) 0 0) -3px 0/3px 24px no-repeat}
.steps.filo li::before{position:absolute;left:-16.5px;top:-2px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-size:.8125rem;padding-top:0}
.faq{max-width:820px}
/* Il separatore era --line: 1,29:1 sul bianco, cioè otto righe identiche a contrasto
   quasi nullo, che si leggono come un muro. #78919C fa 3,25:1 ed è già in questo foglio. */
.faq details{border-bottom:1px solid #78919C;padding:20px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.0625rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:6px}
.faq summary::-webkit-details-marker{display:none}
/* il più diventa un bersaglio, non un carattere: riquadrato 32x32, con 6px sopra e sotto
   la riga arriva ai 44px che un elemento da toccare con il dito richiede. */
.faq summary::after{content:"+";color:var(--teal-dark);font-weight:800;line-height:1;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--teal-dark);border-radius:6px;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-top:14px;font-size:.9375rem;color:var(--ink);margin-bottom:0}
/* le domande di /assistenza/ divise per argomento. Erano otto righe di fila SENZA nessun
   titolo sopra — l'unica pagina del sito in cui questo succedeva — e per trovare la propria
   risposta bisognava leggerle tutte. Adesso sono tre gruppi con il nome scritto sopra: si
   salta al gruppo, non si scorre l'elenco.
   Il margine di 44px sopra il filetto serve: senza, la riga di chiusura dell'ultima domanda
   del gruppo precedente e questo filetto si toccherebbero e si leggerebbero come un errore. */
.faq-gruppo h3{font-size:1.0625rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);border-top:2px solid var(--teal-dark);padding-top:16px;margin:44px 0 4px}
.faq-gruppo:first-of-type h3{margin-top:0}
/* il riquadro d'aiuto quando è l'ultima cosa utile della pagina e non una nota a margine:
   corpo a 17px invece di 14, titolo a 20px invece di 18. È un modificatore, perché il
   .notice normale (la nota in coda alle sei sotto-pagine di /funzionalita/) deve restare
   piccolo: lì è davvero una nota. */
.notice.aiuto{font-size:1.0625rem}
.notice.aiuto h2{font-size:1.25rem;margin-bottom:10px}
/* il tasto F1, su fondo blu. Provato prima come disegno — la faccia del tasto in SVG e le
   lettere accanto in HTML — e a video non si leggeva: un riquadro vuoto seguito da «F1», non
   un tasto. Le lettere devono stare DENTRO. Così il tasto è fatto di bordo e ombra invece che
   di tracciati, e ha un vantaggio in più: cresce insieme alle lettere quando il browser è
   impostato su «carattere grande», che è esattamente il motivo per cui le lettere non
   dovevano finire dentro un SVG. L'ombra sotto è lo spessore del tasto.
   #8CE1D8 sul blu fa 9,53:1. */
/* le due colonne partono dall'alto: .conv-grid centra perche' regge un disegno, qui
   invece il tasto e il manuale sono due blocchi di testo e vanno allineati in testa. */
.due-col{align-items:start}
.tasto{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.tasto b{display:inline-grid;place-items:center;min-width:66px;padding:10px 16px 12px;font-size:1.625rem;line-height:1.1;border:2px solid #8CE1D8;border-radius:10px;box-shadow:0 5px 0 -1px #8CE1D8;flex-shrink:0}
.tasto span{font-size:1.0625rem}
.audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
/* il filetto era --teal su --soft: 2,44:1, cioè un elemento grafico sotto il 3:1 chiesto
   dalla regola. --teal-dark sullo stesso fondo fa 4,84:1. */
.audiences article{border-top:4px solid var(--teal-dark);padding-top:26px}
/* erano tre h2 dentro una sezione che ha già il suo h2: un salto di gerarchia vero */
.audiences h3{font-size:1.25rem;margin:0 0 10px}
.audiences p{font-size:.9375rem;color:var(--ink)}
/* prezzi: UNA cifra, non due riquadri vuoti.
   Erano due schede affiancate che dicevano tutte e due «Prezzo su richiesta»: due caselle
   vuote una accanto all'altra, perché il prezzo non c'era. Adesso il canone è pubblicato ed
   è uno solo — la licenza perpetua esce dalla pagina — quindi non resta niente da mettere a
   confronto, e la griglia a due colonne se ne va insieme ai riquadri. Al loro posto la
   cifra, grande quanto un titolo, perché è la cosa per cui si arriva su questa pagina.
   Sotto la cifra, due righe che non si possono saltare: «IVA esclusa» e quanto fa in un
   anno. Chi legge 90 e capisce 90 all'anno telefona arrabbiato alla prima fattura, e ha
   ragione: il dodicesimo va scritto accanto al mensile, non in fondo alla pagina.
   Nessun colore scritto a mano qui dentro: sul fondo blu ogni riga eredita il bianco della
   fascia, e sulla carta eredita il blu che il blocco di stampa rimette. Un colore proprio
   avrebbe preteso la sua riga nell'elenco della stampa — come è già capitato alle etichette
   delle prove — e senza quella riga sarebbe uscito bianco su bianco. */
h2.canone{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px;margin:0;font-size:clamp(3rem,7.5vw,5rem)}
.canone span{font-size:clamp(1.0625rem,1.8vw,1.375rem);font-weight:700;letter-spacing:0}
.iva{font-size:1.0625rem;font-weight:700;margin:18px 0 0}
.anno{font-size:1.1875rem;margin:10px 0 0;max-width:50ch}
/* le righe elencate di /prezzi/: che cosa resta fuori dal canone, e da che cosa dipende il
   prezzo dell'installazione. Dicono QUALI voci si contano a parte, non quanto costano: il
   costo per fattura lo spiega il muro poco sotto, e dirlo in tutti e due i posti sarebbe
   l'eco che questa pagina, come /funzionalita/, deve evitare. */
.determina{margin:30px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:70ch;font-size:.9375rem;color:var(--ink)}
.determina li{padding-left:18px;border-left:3px solid var(--teal-dark)}
/* .voci: le tre voci che si contano a parte, che sono tre OGGETTI diversi (un lavoro di
   installazione, un documento che parte, un archivio tenuto per dieci anni) e non tre
   righe uguali. Solo loro: il filetto blu da solo resta la forma giusta per le tre cose da
   cui dipende il sopralluogo, che sono fattori di un preventivo e non oggetti, e due file
   di icone identiche nella stessa pagina si annullerebbero a vicenda.
   Il modificatore serve perché .determina la usano anche le pagine delle aree e dei
   settori: senza, il flex entrerebbe anche là, dove non c'è nessuna icona da allineare.
   Misura 22px, quindi tratto 1.8, come le credenziali della home; su fondo bianco il tratto
   è --teal-dark (5,22:1): --teal starebbe a 2,44:1, sotto il minimo di un elemento grafico.
   flex-shrink:0 non è facoltativo: è la regressione già vista sul logo dell'header. */
.determina.voci li{display:flex;gap:12px;align-items:flex-start}
.determina.voci svg{width:22px;height:22px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--teal-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* la riga che chiude le tre: dice come si chiede il sopralluogo, e ha sotto il pulsante che
   lo chiede. Si stacca dall'ultima delle tre righe, altrimenti sembrerebbe la quarta. */
.chiedi{margin-top:28px}
/* stesso motivo, e stessa misura, per la riga di «quando si comincia a pagare»: .determina
   non ha margine sotto, quindi un capoverso che la segue le resta incollato e si legge come
   la quarta riga dell'elenco invece che come la frase a sé che è. */
.determina + .testo{margin-top:28px}
/* i pacchetti di fatture elettroniche: una TABELLA vera, non un'immagine di una tabella.
   Si legge da telefono, la trovano i motori di ricerca, e chi chiede a un assistente
   «quanto costa trasmettere una fattura con GUSTOID» ha una riga da citare.
   Quattro colonne sono la prima cosa che si rompe su uno schermo stretto. Qui il
   contenitore scorre per conto suo, così la tabella non può in nessun caso far scorrere di
   lato la PAGINA — che è il difetto vero, perché porta via anche il titolo, il marchio e il
   menu. Sotto gli 860px le misure si stringono (in fondo al foglio) e la tabella ci sta
   comunque: lo scorrimento resta la rete sotto, non il modo normale di leggerla.
   «IVA esclusa» sta nell'intestazione di ogni colonna di soldi, cioè SOPRA OGNI CIFRA:
   ripeterlo in ognuna delle diciotto celle sarebbe illeggibile, scriverlo una volta sola in
   fondo alla pagina sarebbe la forma che questa pagina è stata riscritta per togliere. */
.pac-w{overflow-x:auto;margin:26px 0 0}
.pac{width:100%;border-collapse:collapse;font-size:.9375rem;text-align:left}
.pac th,.pac td{padding:12px 16px 12px 0;border-top:1px solid var(--line);vertical-align:top}
.pac thead th{padding-top:0;border-top:0;border-bottom:2px solid var(--blue);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.pac thead th span{display:block;margin-top:3px;font-size:.6875rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.pac tbody th{font-weight:700;color:var(--blue);white-space:nowrap}
.pac td{color:var(--ink)}
/* la riga piccola dentro la cella del costo a fattura, sulle due righe che l'attivazione la
   pagano: «0,90 € la prima volta». Stessa forma del sottotitolo delle colonne, perché dice
   la stessa cosa — una precisazione sotto la cifra — e perché la tabella deve restare vera
   anche staccata dal riquadro qui sotto: un motore di ricerca, o un assistente a cui
   chiedono quanto costa trasmettere una fattura, si porta via la tabella e basta. */
.pac td span{display:block;margin-top:3px;font-size:.6875rem;color:var(--muted)}
/* l'avviso sull'attivazione. Non è una nota a piè di pagina: è la cosa che rende la tabella
   qui sopra utile invece che una trappola, e sta attaccata a lei.
   Si fa vedere con la forma, non con un colore nuovo: la tavolozza del sito non si tocca, e
   un rosso d'avvertimento qui dentro non esiste. Fondo chiaro, il filetto blu sul fianco
   come le righe di .determina ma più spesso, e i tre conti incolonnati uno sotto l'altro,
   perché è mettendoli in fila che si vede il rovesciamento. */
.conti{margin:32px 0 0;padding:22px 26px;background:var(--soft);border-left:5px solid var(--blue);border-radius:0 8px 8px 0;max-width:70ch}
/* il capo porta il triangolo dell'avvertenza: scorrendo, questo riquadro era un rettangolo
   grigio uguale agli altri, e l'unico segnale che dentro c'è un tranello era il filetto sul
   fianco. allineamento in alto e non al centro, perché sul telefono il capo va a due righe.
   Il tratto è currentColor, cioè il blu del capo: così alla stampa segue la regola che
   riporta in blu i testi, e non resta un'icona bianca su carta bianca. */
.conti .capo{margin:0;font-size:1.0625rem;font-weight:700;color:var(--blue);display:flex;gap:10px;align-items:flex-start}
.conti .capo svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.conti p{margin:14px 0 0;font-size:.9375rem;color:var(--ink)}
.conti ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:.9375rem;color:var(--ink)}
.conti li{padding-left:16px;border-left:3px solid var(--teal-dark)}
.conti li b{color:var(--blue)}
/* guide: due RIGHE, non due schede.
   Erano due riquadri bianchi su bianco col bordo a 1,29:1, il titolo a 20,8px e l'etichetta
   a 12px — il carattere più piccolo del sito — per presentare 279px di contenuto in una
   pagina alta 1094. Adesso ogni guida è una riga larga quanto la colonna di lettura, con il
   filetto blu in testa, il titolo SOTTOLINEATO a riposo (--teal-dark, 5,22:1) e sotto i
   suoi capitoli, che non sono scritti a mano: sono i titoli di paragrafo del testo della
   guida. Zero parole nuove, e non possono dire il falso perché sono la guida stessa. */
.guides{display:grid;grid-template-columns:1fr;gap:0;max-width:820px}
.guides a{display:flex;flex-direction:column;gap:10px;padding:26px 0 28px;border-top:2px solid var(--blue)}
.guides small{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark)}
.guides h2{margin:0;color:var(--teal-dark);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.guides p{font-size:1.0625rem;color:var(--ink);margin:0}
.guides .capitoli{font-size:.9375rem}
/* Solo fra le voci della riga, figlie dirette: un termine tenuto insieme dentro un titolo
   (.unito, qui sopra) è uno span anche lui, e non deve prendersi il punto davanti. */
.guides .capitoli>span+span::before{content:" · ";color:var(--muted)}
.guides .data{font-size:.8125rem;color:var(--muted);margin:0}
.guides a:active h2{text-decoration-thickness:2px}
@media(hover:hover){.guides a:hover h2{text-decoration-thickness:2px}}
/* l'indice in cima a una guida: gli stessi capitoli della riga in /guide/, qui come
   collegamenti interni. Chi arriva da una ricerca vede subito di che cosa si parla e salta
   al punto invece di scorrere quattromila caratteri. */
.capitoli-nav{margin:0 0 44px;padding:20px 24px;background:var(--soft);border-left:3px solid var(--blue)}
.capitoli-nav p{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 10px}
.capitoli-nav ol{margin:0}
.capitoli-nav a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px}
/* il muro di una guida lunga si spezza in capitoli visibili. È un modificatore e non una
   modifica di .article h2: la stessa misura sta anche in /demo/, in /privacy/ e nelle sei
   sotto-pagine di /funzionalita/, che non sono in perimetro e dove il filetto non serve.
   Il figlio diretto (>) esclude il titolo dentro il riquadro finale. */
.guida>h2{border-top:1px solid #78919C;padding-top:34px;margin-top:52px}
.bottom-space{padding-bottom:80px}
/* ---------------------------------------------------------------------------
   ILLUSTRAZIONE DI MESTIERE — una per pagina di settore (.mest)

   Palette del SITO, e la stessa lingua visiva dei diagrammi che già ci sono: riquadri
   bianchi con il bordo blu (come .flow .card, rx=9 e stroke --blue) e il filo in
   --teal-dark. Chi arriva qui dalla home riconosce la famiglia.
   Non è un SVG: i riquadri sono HTML perché il testo dentro un disegno non cresce con
   l'impostazione "carattere grande" del browser, e queste otto righe vanno lette. Del
   disegno resta solo la freccia, che è un segno e non un testo (stesso meccanismo della
   cesura in home). L'ultimo riquadro è pieno di blu: è il punto d'arrivo, il cliente.
   Misure prese a video: su uno schermo da 896px i quattro riquadri stanno a 174px l'uno e
   i titoli più lunghi vanno a capo invece di traboccare; sotto gli 860 la fila diventa una
   colonna e la freccia ruota; a 320px il riquadro è largo 265 e non esce dallo schermo.
--------------------------------------------------------------------------- */
.mest{margin:0 0 36px}
.mest-fasi{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch}
.mf{background:#fff;border:1.5px solid var(--blue);border-radius:9px;padding:14px 15px}
.mf .t{font-size:.9375rem;font-weight:700;color:var(--blue);line-height:1.25;margin:0 0 5px}
.mf .d{font-size:.8125rem;color:var(--ink);margin:0}
.mf.fine{background:var(--blue);border-color:var(--blue)}
.mf.fine .t{color:#fff}
.mf.fine .d{color:#C9DCE3}
.mest-fr{width:24px;height:24px;align-self:center;justify-self:center;margin-inline:8px;fill:none;stroke:var(--teal-dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* il filo passa sotto tutti e quattro i riquadri, quindi il filetto prende la larghezza
   piena (il max-width di 70ch che vale per ogni p del sito lo fermava a metà strada e
   sembrava un errore); la frase, dentro, resta larga quanto si legge bene. */
.mest-filo{margin:20px 0 0;padding-top:14px;border-top:3px solid var(--teal-dark);font-size:.9375rem;color:var(--ink);max-width:none}
.mest-filo span{display:block;max-width:70ch}
.mest .caption{margin-block:10px 0}
/* ---------------------------------------------------------------------------
   MOCKUP DEL GESTIONALE (.mock) — due ricostruzioni di schermate vere

   REGISTRO DIVERSO DALLE ILLUSTRAZIONI, E DEVE VEDERSI: qui i colori sono quelli VERI del
   programma, presi dai suoi ResourceDictionary (src/GustoID.UI/Resources/), non quelli del
   sito. Le variabili stanno dentro .mock e non in :root: la palette del sito non si tocca.
   Navy e teal coincidono col sito (il tema del programma è stato riscritto sul marchio a
   settembre 2026); la differenza vera sono i neutri tinti di teal (#E4F0EE intestazioni,
   #EDF6F4 righe alterne, #D9F4F1 selezione) e gli stati spenti.

   HTML e non SVG: il testo di una schermata va letto, e dentro un disegno non crescerebbe
   con l'impostazione "carattere grande" del browser. Nessuno script: il mockup è fermo,
   non è una demo e non deve sembrarlo. Nessun attributo style nel markup (la policy di
   sicurezza lo blocca): anche le larghezze delle barre sono classi.

   DUE SOSTITUZIONI DI COLORE, e sono le uniche. Il programma non ha il vincolo AA del
   sito, e due suoi colori di TESTO non ci arrivano; entrambi sono stati sostituiti con un
   altro colore DEL PROGRAMMA, un gradino più scuro:
     · #5B7482 (MutedBrush: etichette, intestazioni di colonna, sottotitoli) sul bianco fa
       4,92:1 e passerebbe, ma sui fondi tinti scende — 4,22 sull'intestazione #E4F0EE,
       4,48 sulla riga alterna #EDF6F4, 4,26 sulla card del lotto #D9F4F1, 4,36 sulla card
       d'allerta #FBF0DA. Qui diventa #34515E (Ink2Brush, il colore delle didascalie del
       programma): fra 7,2 e 8,5:1 ovunque.
     · #B07A2A (WarningBrush) come TESTO fa 3,71:1 sul bianco. Qui diventa #6B4814, il
       colore del testo delle pillole ambra del programma (8,2:1). Bordo e fondo ambra
       restano #B07A2A e #FBF0DA: lì il colore è un segno, non un testo.
   Restano come sono, sotto il 3:1 che il sito chiede a un elemento grafico, tre segni
   ricalcati dall'interfaccia vera (misurati il 9 settembre 2026): i bordi chiari #D9E6E4
   (1,28:1), la sottolineatura teal della linguetta attiva (#00B3A6 sul fondo, 2,32:1) e il
   bordo teal della pillola di filtro accesa (#00B3A6 su #D9F4F1, 2,27:1). Sono la
   riproduzione fedele dell'interfaccia, cioè informazione essenziale come in una fotografia,
   e nessuno dei tre porta da solo un significato: la linguetta attiva si riconosce anche dal
   testo, più scuro e in grassetto, e la pillola accesa anche dal fondo verde-azzurro pieno
   e dal testo #007A72 in grassetto (4,51:1). Tutto il resto — i 63 accostamenti di testo e
   le altre otto forme colorate — è sopra le due soglie.

   Il monospaziato del programma è JetBrains Mono, che il sito non distribuisce (zero
   dipendenze): qui si usa quello di sistema, la forma è la stessa.
--------------------------------------------------------------------------- */
.mock-fig{margin:14px 0 0}
.mock{--mk-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"Courier New",monospace;background:linear-gradient(#F6FCFB,#EFF8F7 35%,#E9F3F1);border:1px solid #C0D2CF;border-radius:12px;padding:18px;color:#0B2D3D;font-size:.8125rem;line-height:1.4}
.mock p,.mock dd{margin:0;max-width:none}
.mock .mk-t{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:#0B2D3D}
.mock .mk-sub{font-size:.8125rem;color:#34515E;margin-top:4px}
.mock .mk-btn{display:inline-block;border:1px solid #00B3A6;border-radius:10px;padding:7px 14px;font-size:.8125rem;font-weight:600;background:#00B3A6;color:#0B2D3D;white-space:nowrap}
.mock .mk-btn.sec{background:#fff;border-color:#D9E6E4}
.mock .mk-btn.gho{background:transparent;border-color:transparent;color:#34515E}
/* mockup 1 — Scheda lotto, genealogia a tre colonne */
.mock .mk-gen{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:14px;align-items:center;margin-top:18px}
.mock .mk-col{align-self:stretch;background:#fff;border:1px solid #D9E6E4;border-radius:14px;padding:16px}
.mock .mk-lab{font-size:.6875rem;font-weight:700;letter-spacing:.04em;margin-bottom:12px}
.mock .mk-lab.su{color:#3A6E84}
.mock .mk-lab.giu{color:#007A72}
.mock .mk-nodo{background:#fff;border:1px solid #D9E6E4;border-radius:10px;padding:9px 11px;margin-bottom:8px}
.mock .mk-nodo:last-child{margin-bottom:0}
.mock .mk-nodo .n{font-size:.8125rem;font-weight:600;color:#0B2D3D}
.mock .mk-nodo .c{font-size:.75rem;color:#34515E;margin-top:2px}
.mock .mk-nodo .l{font-family:var(--mk-mono);font-size:.75rem;color:#34515E;margin-top:2px}
.mock .mk-centro{background:#D9F4F1;border:2px solid #0B2D3D;border-radius:14px;padding:18px}
.mock .mk-centro .n{font-size:1rem;font-weight:600;color:#0B2D3D}
.mock .mk-centro .c{font-size:.78125rem;color:#34515E;margin-top:2px}
.mock .mk-centro .cod{font-family:var(--mk-mono);font-size:1.125rem;font-weight:600;margin:8px 0 12px;color:#0B2D3D}
.mock .mk-righe{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.78125rem;margin:0}
.mock .mk-righe dt{color:#34515E}
/* I due pulsanti in fondo vanno a capo: su uno schermo da 320px «Annulla» e «Registra
   produzione» insieme chiedono piu' spazio di quanto ce ne sia, e senza questa riga il
   secondo uscirebbe dal riquadro. */
.mock .mk-fondo{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:16px}
/* mockup 2 — Giacenze */
.mock .mk-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.mock .mk-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mock .mk-sep{width:1px;align-self:stretch;min-height:24px;background:#D9E6E4}
.mock .mk-tabs{display:flex;gap:4px;margin-top:16px;font-size:.8125rem;color:#34515E;flex-wrap:wrap}
.mock .mk-tabs span{padding:9px 14px;border-bottom:2px solid transparent}
.mock .mk-tabs .on{color:#0B2D3D;font-weight:600;border-bottom-color:#00B3A6}
.mock .mk-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
.mock .mk-k{background:#fff;border:1px solid #D9E6E4;border-radius:10px;padding:14px}
.mock .mk-k.allerta{background:#FBF0DA;border-color:#B07A2A}
.mock .mk-k.avviso{border-color:#00B3A6}
.mock .mk-k .kt{font-size:.6875rem;font-weight:600;letter-spacing:.04em;color:#34515E}
.mock .mk-k .kv{font-family:var(--mk-mono);font-size:1.375rem;font-weight:600;margin-top:10px;color:#0B2D3D}
.mock .mk-k .ks{font-size:.75rem;color:#34515E;margin-top:4px}
.mock .mk-k .att{color:#B3423A}
.mock .mk-filtri{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid #D9E6E4;border-radius:14px;padding:8px 12px;margin-top:12px}
.mock .mk-pill{display:inline-block;border:1px solid #D9E6E4;background:#fff;border-radius:10px;padding:5px 12px;font-size:.8125rem;color:#34515E;margin:3px 6px 3px 0}
.mock .mk-pill.on{background:#D9F4F1;border-color:#00B3A6;color:#007A72;font-weight:600}
.mock .mk-cerca{display:inline-block;border:1px solid #D9E6E4;border-radius:8px;background:#fff;padding:5px 10px;font-size:.8125rem;color:#34515E;margin:3px 8px 3px 0}
.mock .mk-tabw{background:#fff;border:1px solid #D9E6E4;border-radius:14px;overflow:hidden;margin-top:12px}
.mock .mk-tab{width:100%;border-collapse:collapse;table-layout:fixed}
.mock .mk-tab th{background:#E4F0EE;color:#34515E;font-size:.71875rem;font-weight:600;text-align:left;padding:11px 10px;border-bottom:1px solid #D9E6E4}
.mock .mk-tab td{padding:10px;vertical-align:middle;border-top:1px solid #D9E6E4}
.mock .mk-tab tbody tr:first-child td{border-top:0}
.mock .mk-tab tr.alt td{background:#EDF6F4}
.mock .mk-tab tr.scaduta td{background:#FBE7E5}
.mock .mk-tab .num{text-align:right}
.mock .mk-tab .an{font-weight:500}
.mock .mk-tab .ac{font-family:var(--mk-mono);font-size:.75rem;color:#34515E;margin-top:2px}
.mock .mk-tab .ac .sca{font-family:Montserrat,"Segoe UI",Arial,sans-serif;color:#6B4814}
.mock .mk-tab .q{font-family:var(--mk-mono)}
.mock .mk-tab .um{color:#34515E}
.mock .mk-tab .ross{color:#B3423A;font-family:var(--mk-mono);font-weight:500}
.mock .mk-tab .exp-past{color:#B3423A;font-weight:500}
.mock .mk-tab .exp-near{color:#6B4814}
.mock .mk-tab .sg{font-size:.75rem;color:#34515E;margin-top:5px}
.mock .mk-badge{display:inline-block;border-radius:6px;padding:2px 9px;font-size:.71875rem;font-weight:600;white-space:nowrap}
.mock .mk-badge.blu{background:#DFEDF2;color:#2C5A6E}
.mock .mk-badge.verde{background:#EAF6E4;color:#33641F}
.mock .mk-bar{display:block;width:100px;max-width:100%;height:6px;border-radius:3px;background:#E4F0EE;overflow:hidden}
.mock .mk-bar i{display:block;height:6px;border-radius:3px}
.mock .mk-bar .p32{width:32%}
.mock .mk-bar .p100{width:100%}
.mock .mk-bar .rosso{background:#B3423A}
.mock .mk-bar .verde{background:#4F8A3D}
/* Larghezze di colonna. Le proporzioni sono quelle della schermata vera (Articolo elastica,
   Tipo 130, Deposito 120, Giacenza 150, Di cui scaduta 110, Scadenza 115, Lotti 60,
   Copertura 150, Valore 120), ma ora sono anche MISURATE sul contenuto, che nella pagina è
   scritto in un altro carattere e in un'altra misura.
   Larghezza minima di ogni colonna, contenuto più i 20px di respiro, presa a video:
   Articolo 92, Tipo 126, Deposito 104, Giacenza 75, Di cui scaduta 68, Scadenza 92,
   Lotti 48, Copertura 120, Valore 65 — in tutto 790px.
   La tabella è larga quanto la finestra meno 102px, quindi sopra i 1121px ha 1019px da
   dividere: ogni colonna resta almeno 12px sopra il suo minimo. Sotto, le colonne che si
   possono leggere altrove spariscono (vedi il punto di rottura dei 1120px).
   Le prime percentuali (20/11/10/12/9/10/5/13/10) davano al Tipo l'11%, cioè 99px contro i
   126 che la pillola «Prodotto finito» chiede: fra i 1001 e i 1249px la pillola usciva dalla
   sua cella e finiva addosso al Deposito, e nello stesso tratto l'intestazione «Lotti» e la
   data «30/08/2026» si spezzavano a metà parola. Rifatte una per una. */
.mock .c-art{width:18%}
.mock .c-tipo{width:14%}
.mock .c-dep{width:12%}
.mock .c-gia{width:9%}
.mock .c-sca{width:8%}
.mock .c-exp{width:11%}
.mock .c-lot{width:6%}
.mock .c-cop{width:13%}
.mock .c-val{width:9%}
/* ---------------------------------------------------------------------------
   MOCKUP 3, 4 e 5 — «Nuova produzione», «Coda import», «Avvia richiamo prodotto».

   Stessa regola dei due precedenti: colori veri del programma, nomi e formati veri, e dove
   un dato era dubbio il dato NON è disegnato. Le uniche sostituzioni di colore sono quelle
   già dichiarate sopra (#5B7482 → #34515E, #B07A2A → #6B4814) più UNA terza, nuova:
     · il pulsante «Rivedi» della coda import è bianco su teal #00B3A6 (AccentBrush), cioè
       2,63:1. Qui il testo diventa #0B2D3D, che è il colore che il programma stesso usa
       sul teal in Btn.Primary (12,9:1). Il fondo teal resta quello vero.
   Il verde di stato del programma come TESTO (#4F8A3D su #EAF6E4 = 3,73:1) è sostituito
   con #33641F, il verde delle pillole del programma (6,3:1). Il rosso #B3423A su #FBE7E5
   fa 4,70:1 e resta com'è.

   UNA MISURA NON RIPRODOTTA, dichiarata: il pulsante d'azione della coda import ha
   MinWidth 96 nel programma; qui è largo quanto la sua etichetta, altrimenti a nove
   colonne la cella dell'azione mangiava lo spazio del nome del file. Le etichette, le
   icone e l'ordine sono quelli veri.

   IL BORDO TRATTEGGIATO della zona di trascinamento è #C0D2CF, cioè 1,39:1 sul fondo:
   sotto il 3:1 che il sito chiede a un elemento grafico. Vale per lui la stessa ragione
   già dichiarata sopra per gli altri bordi del programma — è la riproduzione fedele
   dell'interfaccia, come in una fotografia, e non porta da solo nessun significato: la
   zona si riconosce dalla scritta «Trascina qui i file XML / p7m», che è dentro.

   LE MISURE DEL CARATTERE non sono quelle del programma, e vale per tutti e cinque i
   disegni: il sito scrive in un altro carattere, a un'altra misura di partenza, e le
   larghezze delle colonne sono state misurate su QUESTE misure. Le differenze note, tenute
   scritte perché il prossimo confronto non le riscopra da capo: il titolo di una schermata
   è sempre 20px (nel programma la coda import lo scrive a 27); le due intestazioni dei
   riquadri della produzione sono 13px (nel programma 11,5, cioè mezzo punto MENO delle
   intestazioni di colonna, che qui sono 11 e là 12); il codice di lotto in monospaziato del
   richiamo è 18px (nel programma 26). Sono proporzioni, non nomi né numeri: nessuna di esse
   dice al lettore una cosa che il programma non fa. Le intestazioni di colonna sono qui
   tutte in semi-grassetto: nel richiamo è così anche nel programma, nella coda import lo
   stile vero è di peso medio.
   La SPAZIATURA FRA LE LETTERE delle etichette maiuscole è un'aggiunta del sito: WPF non la
   sa fare, e nel programma quelle scritte sono a spaziatura normale.
--------------------------------------------------------------------------- */
/* parti comuni ai tre */
.mock .mk-card{background:#fff;border:1px solid #D9E6E4;border-radius:14px;padding:14px;margin-top:14px}
.mock .mk-cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
/* Le due intestazioni dei riquadri e le etichette Operatore e Note NON sono in maiuscolo nel
   programma (lo sono invece le intestazioni di colonna e le etichette del richiamo): niente
   spaziatura fra le lettere, che si usa solo con le maiuscole. */
.mock .mk-cardhead .ct{font-size:.8125rem;font-weight:600;color:#34515E}
.mock .mk-lab2{font-size:.71875rem;font-weight:500;color:#34515E}
.mock .mk-campo{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px;border:1px solid #D9E6E4;border-radius:6px;background:#fff;padding:5px 8px;margin-top:4px;overflow-wrap:anywhere}
.mock .mk-campo i{font-style:normal;color:#34515E;flex-shrink:0}
.mock .mk-btn.xs{padding:4px 10px;font-size:.75rem;font-weight:500;background:#fff;border-color:#C0D2CF;color:#0B2D3D}
.mock .mk-btn.dan{background:transparent;border-color:transparent;color:#B3423A}
.mock .mk-ico{display:inline-block;width:26px;height:26px;line-height:24px;text-align:center;border-radius:8px;color:#34515E;font-size:.75rem;flex-shrink:0}
/* Le due iconcine della riga della coda import erano due emoji, 📄 e 🗑. La prima su Windows
   esce come un foglio monocromatico e si legge; la SECONDA no: il cestino cade su un
   carattere di ripiego e diventa una sbarretta grigia chiara, cioè niente. Verificato a
   video il 9 settembre 2026. Sono disegnate, come tutto il resto del sito: griglia 24x24,
   solo tracciati, colore e spessore dal foglio. */
.mock .mk-ico svg{width:15px;height:15px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* mockup 3 — Nuova produzione. Le intestazioni di colonna non sono quelle di una tabella
   del programma ma etichette Text.Caption scritte sopra le righe: niente fascia colorata,
   carattere normale e nessuna spaziatura fra le lettere (quella la porta Text.Label, che
   qui non c'entra). */
.mock.prod .mk-tab th{background:transparent;border-bottom:0;padding:0 6px 3px;font-size:.6875rem;font-weight:400}
.mock.prod .mk-tab td{border-top:0;padding:3px 6px}
/* Larghezze misurate, non stimate a occhio: un piccolo programma di controllo confronta, a
   dodici larghezze di schermo, lo spazio utile di ogni colonna con la parola più lunga che
   deve contenerci stare (le parole vanno a capo fra loro, una parola sola no: è lì che una
   tabella trabocca). Le colonne del pulsante ✕ sono al 6% e non al 4: quel pulsante è largo
   26px fissi e sotto i 900px di tabella non ci stava più. */
.mock .pc-art{width:30%}.mock .pc-lot{width:28%}.mock .pc-dep{width:22%}.mock .pc-qta{width:14%}.mock .pc-x{width:6%}
.mock .po-art{width:24%}.mock .po-cod{width:13%}.mock .po-dp{width:15%}.mock .po-sc{width:15%}.mock .po-dep{width:16%}.mock .po-qta{width:11%}.mock .po-x{width:6%}
.mock .mk-due{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin-top:14px}
.mock .mk-chk{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* La pillola di controllo si chiamava .ck, come la spunta verde del sito, che nel foglio è
   dichiarata SENZA nessun antenato, .ck{width:16px;height:16px}. Le due regole si
   incontravano dentro il mockup e vinceva la misura della spunta, perché .mock .ck non
   dichiarava nessuna larghezza. Le cinque pillole diventavano cinque quadratini da 20×16px
   e le cinque etichette uscivano una lettera per riga, incolonnate addosso alla didascalia,
   al titolo «Da qui il filo continua» e ai collegamenti sotto: la metà bassa della pagina
   era illeggibile. Il nome ora è suo, .mk-ck, e la guardia E di scripts/verify.mjs impedisce
   che succeda di nuovo con un altro nome. */
.mock .mk-ck{border:1px solid #4F8A3D;background:#EAF6E4;border-radius:6px;padding:4px 9px;font-size:.75rem;font-weight:600;color:#0B2D3D}
/* mockup 4 — Coda import */
.mock.coda .qc-cart{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:.75rem;color:#34515E}
.mock.coda .qc-cart .path{font-family:var(--mk-mono);overflow-wrap:anywhere}
.mock.coda .qc-drop{border:1.5px dashed #C0D2CF;border-radius:12px;padding:12px 16px;margin-top:14px}
.mock.coda .qc-drop .t{font-size:.84375rem;font-weight:600}
.mock.coda .qc-drop .d{font-size:.75rem;color:#34515E;margin-top:2px}
.mock.coda .qc-pills{display:flex;flex-wrap:wrap;margin-top:12px}
.mock .mk-pill .n{font-family:var(--mk-mono);font-size:.6875rem;margin-left:6px}
.mock .mk-k.grave{background:#FBE7E5;border-color:#B3423A}
.mock .mk-cnt{display:inline-block;background:#E4F0EE;border-radius:8px;padding:1px 7px;margin-left:8px;font-family:var(--mk-mono);font-size:.6875rem;color:#34515E}
.mock .qb{display:inline-block;border:1px solid transparent;border-radius:8px;padding:3px 10px;font-size:.75rem;font-weight:500}
.mock .qb.imp{background:#061A25;color:#fff}
.mock .qb.riv{background:#00B3A6;color:#0B2D3D}
.mock .qb.rip{background:#fff;border-color:#C0D2CF;color:#0B2D3D}
.mock .qc-az{display:flex;align-items:center;gap:6px}
.mock .qc-orig{display:inline-block;background:#E4F0EE;border-radius:7px;padding:2px 8px;font-size:.6875rem;color:#34515E}
.mock .qc-sco{font-style:italic;color:#34515E}
.mock .mk-badge.grigio{background:#E4F0EE;color:#34515E}
.mock .mk-badge.ambra{background:#FBF0DA;color:#6B4814}
.mock .mk-badge.rossa{background:#FBE7E5;color:#B3423A}
.mock .mk-badge.ok{background:#EAF6E4;color:#33641F}
/* Monospaziato e ritorno a capo dentro la parola valgono per le CELLE, non per le
   intestazioni: nel programma le intestazioni sono in carattere normale, e una parola come
   FORNITORE spezzata a meta' e' il difetto che questa riga evita. */
.mock td.q-file,.mock td.q-piva,.mock td.q-tot{font-family:var(--mk-mono);font-size:.75rem;overflow-wrap:anywhere}
.mock .q-tot{text-align:right}
.mock .q-sta{width:12%}.mock .q-file{width:16%}.mock .q-piva{width:9%}.mock .q-forn{width:13%}
.mock .q-num{width:8%}.mock .q-data{width:10%}.mock .q-tot{width:7%}.mock .q-orig{width:9%}.mock .q-az{width:16%}
.mock .q-data{white-space:nowrap}
/* mockup 5 — Avvia richiamo prodotto */
.mock .rc-banner{background:#FBE7E5;border:1px solid #B3423A;border-radius:12px;padding:14px 16px}
.mock .rc-banner .t{font-size:1.0625rem;font-weight:600;color:#8E2A1B}
.mock .rc-banner .s{font-size:.8125rem;color:#34515E;margin-top:4px}
.mock .rc-banner .s b{font-family:var(--mk-mono);font-size:1.125rem;font-weight:600;color:#0B2D3D}
.mock .rc-banner .c{font-size:.78125rem;color:#34515E;margin-top:6px}
.mock .rc-riep{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:.8125rem;color:#34515E}
.mock .rc-riep .lab{font-size:.71875rem;font-weight:600;letter-spacing:.03em}
.mock .rc-riep .warn{border:1px solid #B07A2A;background:#FBF0DA;border-radius:6px;padding:3px 9px;font-size:.71875rem;font-weight:500;color:#6B4814}
/* AUDIT del 9 settembre 2026 — «MOTIVO DEL RICHIAMO» era disegnata in grassetto come
   «CLIENTI IMPATTATI», e nel programma le due etichette NON sono uguali: la prima è un
   Text.Label liscio (peso medio), la seconda porta un FontWeight="SemiBold" scritto a mano
   sopra lo stile (StartRecallDialog.xaml, righe 33 e 65). Ora sono diverse anche qui. */
.mock .rc-lab{font-size:.71875rem;font-weight:500;color:#34515E;letter-spacing:.03em;margin-top:14px}
.mock .rc-motivo{border:1px solid #D9E6E4;background:#fff;border-radius:6px;padding:8px;margin-top:4px;min-height:38px}
.mock .r-cli{width:27%}
.mock td.r-cli{overflow-wrap:anywhere}.mock .r-doc{width:13%}.mock .r-num{width:8%}.mock .r-lot{width:12%}
.mock .r-qta{width:12%}.mock .r-data{width:15%;white-space:nowrap}.mock .r-fat{width:13%}
/* Il blocco che introduce un mockup largo: titolo e riga stanno nella colonna di lettura,
   il disegno esce più largo (come il diagramma in /funzionalita/). Nessuna di queste tre
   classi stringe la colonna in px: l'ancoraggio a sinistra resta quello di .article. */
.article.mock-sopra{padding-bottom:0}
.article.mock-intro{padding-block:0}
.article.mock-coda{padding-top:0}
.intro-fig{margin:30px 0 0}
/* LE IMMAGINI DEL PROGRAMMA (ottobre 2026). Una figura con dentro una <picture>: l'immagine
   prende tutta la larghezza del contenitore e l'altezza in proporzione. width e height nel
   markup tengono il posto mentre si scarica, così il testo sotto non salta; height:auto va
   rimesso qui, perché la regola globale delle immagini dà solo max-width e un'immagine
   ristretta resterebbe alta quanto l'attributo, cioè schiacciata. Raggio e ombra la staccano
   dal bianco senza incorniciarla: il raggio è quello del pannello della genealogia. */
.vista{margin:14px 0 0}
.vista img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 44px -26px rgba(11,45,61,.55)}
.vista-home{padding-block:16px 72px}
/* Il pulsante sotto l'immagine porta alla pagina degli esempi. È chiaro e bordato, non
   pieno: l'unica superficie piena di colore della home resta il pulsante della prova gratuita,
   che è l'azione che conta. Testo blu sul bianco 14,4:1, bordo teal scuro 5,2:1 (4,8:1 sul
   fondo grigio al passaggio del mouse). */
.button.chiaro{background:#fff;color:var(--blue);border-color:var(--teal-dark)}
.button.chiaro:hover{background:var(--soft)}
.vista-home .chiaro{margin-top:8px}
/* modulo */
fieldset{border:0;padding:0;margin:0}
legend{font-weight:700;margin-bottom:16px;font-size:1.125rem}
form label{display:block;font-size:.875rem;font-weight:600;margin:18px 0 6px}
form input:not([type=checkbox]),form textarea{width:100%;padding:13px;border:1px solid #78919C;border-radius:6px;font:inherit;color:var(--blue);background:#fff}
form input:focus,form textarea:focus{outline:3px solid var(--teal-dark);outline-offset:1px;border-color:var(--teal-dark)}
.check{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:400;margin-top:18px}
.check input[type=checkbox]{width:24px;height:24px;min-width:24px;margin:0;accent-color:var(--teal-dark)}
.check label{display:inline;margin:0;font-weight:400}
.honey{display:none}
button{font-family:inherit;border:0;cursor:pointer}
fieldset:disabled{color:var(--ink)}
fieldset:disabled input,fieldset:disabled textarea{background:var(--soft);color:var(--ink)}
fieldset:disabled .button{background:var(--gray);border-color:#78919C;color:var(--ink);cursor:not-allowed}
.cf-turnstile{margin-top:24px}
/* accessibilità */
.skip{position:absolute;top:-100px;left:20px;padding:12px;background:#fff;z-index:10}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--teal-dark);outline-offset:4px}
.dark :focus-visible,.genea-panel :focus-visible,.cta :focus-visible{outline-color:#fff}
main:focus{outline:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.menu .mc,.menu[open] .mo{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sectors a,.mazzo-carte::before,.mazzo-carte::after{transition:none}}
/* responsive: tre punti di rottura.
   1120px: le griglie larghe si stringono;
   1000px: tablet e portatili piccoli. Le griglie rigide passano a due colonne o a una,
           l'hero si mette in colonna e il pulsante della testata perde "su richiesta";
    860px: telefoni. Il menu diventa a tendina.
   La testata ne ha uno suo, 1179px: sotto si ritira "Richiedi demo", che porta allo stesso
   indirizzo del pulsante accanto. Misurata il 5 ottobre 2026 pixel per pixel, con la barra di
   scorrimento (15px): il contenitore è largo quanto lo schermo meno 64px e meno la barra, e
   con tutte le voci la testata occupa 1.052px. Col limite vecchio, 1120, a 1.121 sforava di
   8px e ci stava appena a 1.130. A 1.140 ci stava con 8,8px di scorta, ma i tre gruppi (logo,
   menu, azioni) restavano a 28px l'uno dall'altro, quanto le voci del menu fra loro, e
   "Richiedi demo" si leggeva come una settima voce: da 1.180 i gruppi si staccano di circa
   45px. Il margine più stretto delle altre fasce: 11,6px a 1.001 (senza "Richiedi demo") e
   18,7 a 861 (senza "su richiesta"). Per qualche ora, lo stesso
   giorno, una voce «Esempi» al posto di «Home» aveva spostato i limiti a 1180 e 1040 e
   avvicinato le voci sotto i 1000: tornato il menu di prima, non servono più. */
@media(max-width:1179px){
 .header-actions .text-link{display:none}
}
@media(max-width:1120px){
 .hero-grid{gap:36px}
 .credenziali{grid-template-columns:repeat(2,1fr)}
 .sparisce .riga{grid-template-columns:240px 1fr 1fr;gap:28px}
 .sectors a{flex-basis:calc(50% - 12px)}
 .prove .capo,.prove .riga{gap:32px}
 .footer-grid{grid-template-columns:1fr 1fr}
 /* mockup: qui la tabella scende a 1018px e le nove colonne non ci stanno più (ne
    chiedono 790 di solo contenuto, e la pillola del Tipo da sola ne vuole 126). Perdono
    il posto le tre che si leggono altrove: il deposito, la parte già scaduta e il valore.
    Era il punto di rottura dei 1000px, ma fra 1001 e 1120 le nove colonne erano già
    strette al punto che la pillola «Prodotto finito» finiva addosso al Deposito e
    «Lotti» si spezzava in «Lott / i». Le sei che restano si ridistribuiscono. */
 .mock .c-dep,.mock .c-sca,.mock .c-val{display:none}
 .mock .c-art{width:27%}
 .mock .c-tipo{width:18%}
 .mock .c-gia{width:15%}
 .mock .c-exp{width:14%}
 .mock .c-lot{width:7%}
 .mock .c-cop{width:19%}
 /* coda import: la tabella scende sotto i 1020px e la pillola «Da rivedere» da sola chiede
    108px con i suoi margini. Cede l'ORIGINE (Inbox o Manuale), che è l'unica delle nove a
    non dire niente della fattura: dice solo da dove è arrivato il file. Le altre otto si
    ridistribuiscono. La «Nuova produzione» non perde niente qui: quattro colonne nel primo
    riquadro e sei nel secondo ci stanno ancora. */
 .mock .q-orig{display:none}
 .mock .q-sta{width:13%}
 .mock .q-file{width:17%}
 .mock .q-piva{width:10%}
 .mock .q-forn{width:14%}
 .mock .q-num{width:8%}
 .mock .q-data{width:12%}
 .mock .q-tot{width:8%}
 .mock .q-az{width:18%}
}
@media(max-width:1000px){
 .header .wrap{gap:16px}
 .nav{font-size:.8125rem}
 .button.small .long{display:none}
 .hero{padding-block:56px 44px}
 .hero-grid{grid-template-columns:1fr;gap:30px}
 /* a 1000px l'h2 scende a 28px: se l'h3 restasse a 20px il rapporto crollerebbe a 1,40,
    cioè un titolo di sezione grande poco più del titolo di una scheda. Cede l'h3. */
 h3{font-size:1.125rem}
 .section{padding-block:68px}
 .section-head{grid-template-columns:1fr;gap:14px;margin-bottom:28px}
 /* la colonna diventa una: la testata unica delle due colonne non avrebbe più due
    colonne da intestare, quindi cede il posto all'etichetta di riga, stesso testo */
 .prove .capo{display:none}
 .prove .lab{position:static;width:auto;height:auto;margin:0 0 10px;overflow:visible;clip-path:none}
 .prove .riga{grid-template-columns:1fr;gap:20px}
 .prove h3,.indice-fasi h3{font-size:1.125rem}
 /* la targa scende sotto il testo invece di stargli accanto */
 .id-grid{grid-template-columns:1fr;gap:34px}
 .apertura{padding-block:44px 52px}
 /* il mazzo si corica sotto la riga d'apertura: immagine a sinistra, testo a destra */
 .apertura-griglia{grid-template-columns:1fr;gap:28px;margin-bottom:40px}
 .mazzo{flex-direction:row;align-items:center;gap:24px;max-width:640px}
 .mazzo-carte{flex:0 0 240px;margin-top:14px}
 .flow-h{display:none}.flow-v{display:block}
 .uv-h{display:none}.uv-v{display:block}
 .conv-h{display:none}.conv-v{display:block}
 .conv-grid,.due-col{grid-template-columns:1fr;gap:34px}
 .sparisce .riga{grid-template-columns:1fr;gap:22px}
 .sparisce ol{margin-bottom:8px}
 .audiences{grid-template-columns:repeat(2,1fr)}
 /* mockup: le quattro schede di sintesi passano a due per riga. Le colonne della tabella
    le ha già ridistribuite il punto di rottura dei 1120px, che è dove smettono di starci. */
 .mock .mk-kpi{grid-template-columns:repeat(2,1fr)}
 .mock .mk-btns .gho{display:none}
 /* coda import: sotto i 900px cadono anche DATA e TOTALE. Restano le cinque colonne che
    reggono la dimostrazione — stato, nome del file, partita IVA letta, fornitore
    riconosciuto e azione — perché è lì che si vede che il file è già stato letto. */
 .mock .q-data,.mock .q-tot{display:none}
 .mock .q-sta{width:16%}
 .mock .q-file{width:20%}
 .mock .q-piva{width:12%}
 .mock .q-forn{width:17%}
 .mock .q-num{width:10%}
 .mock .q-az{width:25%}
}
@media(max-width:860px){
 /* il margine ai lati scende da 32 a 20px: cambia la variabile, così scende insieme
    alla colonna di lettura di .article e .faq, che sullo stesso margine si appoggia */
 .wrap{--gut:20px}
 .header .wrap{min-height:68px;gap:12px}
 .brand img{width:132px}
 .nav{display:none}
 .header-actions{gap:10px}.button.small{padding:10px 14px;font-size:.8125rem}
 .menu{display:block;position:relative}
 .menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:6px}
 .menu summary::-webkit-details-marker{display:none}
 .menu summary svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
 .menu[open] summary{background:var(--gray)}
 .menu nav{position:absolute;right:0;top:52px;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(11,45,61,.18);padding:10px;display:flex;flex-direction:column;z-index:20}
 .menu nav a{padding:12px 14px;font-weight:600;font-size:.9375rem;border-radius:6px}
 .menu nav a:hover,.menu nav a[aria-current]{background:var(--soft)}
 h1{font-size:clamp(2rem,8vw,2.6rem)}
 .hero{padding-block:40px 28px}
 .hero .actions .button{width:100%}
 .credenziali{grid-template-columns:1fr;gap:14px;margin-top:36px;padding-top:24px}
 .section{padding-block:56px}
 .sectors a{flex-basis:100%}
 /* due numerali da 32px con la freccia in mezzo non stanno in 280px utili: si impilano */
 .cesura{flex-direction:column;gap:24px;padding-block:44px}
 .ces-h{display:none}.ces-v{display:block}
 .genea-panel{padding:22px}.genea-panel .cols{grid-template-columns:1fr}
 .genea-panel .ritroso svg{width:120px}
 .figura-larga{width:calc(100% - 40px)}
 /* il mazzo si stringe con lo schermo; il passo delle carte scende da 9 a 6px */
 .mazzo{gap:16px}
 .mazzo-carte{flex-basis:clamp(84px,30%,200px);margin-top:12px;--passo:6px}
 .mazzo-titolo{font-size:1.0625rem}
 /* 24px di esito in 278px utili farebbero cinque righe: scende a 20, resta il pezzo
    più grande della riga */
 .prove .esito,.problema .esito{font-size:1.25rem;max-width:none}
 /* il filo resta, pallino e rientro si stringono */
 .steps.filo{margin-left:14px}
 .steps.filo li{padding-left:22px}
 .steps.filo li::before{width:26px;height:26px;left:-14.5px}
 .indice-fasi a{grid-template-columns:24px 1fr;gap:0 12px}
 /* la targa si corica: il 42% di 236px utili non basta a un'etichetta come DOVE STANNO I
    DATI, che a 13px spaziati chiede 173px. L'etichetta va sopra il valore.
    I margini si stringono perché SCHEDA DEL PROGRAMMA, misurata a video, chiede 218px:
    su uno schermo da 320 la targa è larga 280 e i bordi ne prendono 4, quindi con 16px per
    parte alla scritta ne restano 244 e la riga è una sola dentro la fascia alta 44. */
 .tg-capo{padding-inline:16px;letter-spacing:.08em}
 .tg-righe{padding-inline:16px}
 .tg-righe>div{grid-template-columns:1fr;gap:4px}
 .tg-righe dt{padding-top:0}
 /* il muro si corica: il divieto, la precisazione sotto, la risposta rientrata di 16px
    con lo stesso tratto blu sul fianco. La testata non ha più due colonne da intestare. */
 .muro-capo{display:none}
 .muro>div{grid-template-columns:1fr}
 .muro dt{text-align:left;padding:14px 0 0}
 .muro dd{padding:8px 0 14px 16px;border-top:0}
 /* la tabella dei pacchetti si stringe. Su uno schermo da 320px restano 280px utili: i
    quattro titoli di colonna con «IVA esclusa» sotto ne chiederebbero di più, e la tabella
    finirebbe per scorrere anche dove non serve. A 13px per le cifre, 11px per il titolo e
    10px per la riga dell'IVA, con i fianchi a 8px, torna dentro i 280 e resta leggibile. */
 .pac{font-size:.8125rem}
 .pac th,.pac td{padding:10px 8px 10px 0}
 .pac thead th{font-size:.6875rem;letter-spacing:.03em}
 .pac thead th span{font-size:.625rem}
 .pac td span{font-size:.625rem}
 .conti{padding:18px 20px;border-left-width:4px}
 .cta{display:block;padding:32px 26px;margin-block:56px}.cta .actions{margin-top:24px}
 .footer-grid{grid-template-columns:1fr;gap:28px}
 .page-title{padding-block:40px 24px}
 .audiences{grid-template-columns:1fr}
 .steps li{grid-template-columns:32px 1fr}
 /* illustrazione di mestiere: la fila diventa una colonna e la freccia ruota di un quarto */
 .mest-fasi{grid-template-columns:1fr}
 .mest-fr{transform:rotate(90deg);margin:10px auto}
 /* mockup: sul telefono restano il nome della schermata, una scheda di sintesi per riga e
    le tre colonne che rispondono alla domanda (che articolo è, quanto ne ho, quando scade).
    Le schede di sintesi restano DUE per riga, non una: quattro schede impilate sono 430px
    di altezza per mostrare quattro numeri, e spingono la tabella — che è la cosa per cui il
    disegno esiste — un intero schermo più in basso. Il numero più largo è «628,40 €», che
    misurato a video chiede 103,1px; una colonna su due lascia al testo (larghezza dello
    schermo)/2 − 68px, cioè abbastanza da 343px in su. Sotto i 360px tornano a una per riga
    (vedi il punto di rottura dei 360). */
 .mock{padding:12px}
 .mock .mk-t{font-size:1.0625rem}
 .mock .mk-btns .sec{display:none}
 .mock .mk-tabs{gap:0}
 .mock .mk-tabs span{padding:9px 10px}
 .mock .mk-kpi{grid-template-columns:repeat(2,1fr);gap:10px}
 .mock .mk-gen{grid-template-columns:1fr}
 /* la tabella scende a 12px e resta a tre colonne: sotto questa misura una data spezzata a
    metà («12/05/2 026») è peggio di una colonna in meno, quindi le date non vanno a capo. */
 .mock .mk-tab{font-size:.75rem}
 .mock .mk-tab th{font-size:.6875rem}
 .mock .mk-tab .ac{font-size:.6875rem}
 .mock .mk-tab th,.mock .mk-tab td{padding:9px 7px}
 .mock .mk-tab .c-exp p,.mock .mk-tab .q{white-space:nowrap}
 .mock .c-tipo,.mock .c-lot,.mock .c-cop{display:none}
 .mock .c-art{width:40%}
 .mock .c-gia{width:28%}
 .mock .c-exp{width:32%}
 /* Su uno schermo da 320px un mockup largo ha 256px di contenuto: quanti ne restano dopo
    i margini della pagina e il bordo del riquadro. Nelle tre schermate nuove restano le
    colonne che rispondono alla domanda della schermata, e cade tutto il resto.
      produzione  cosa entra (articolo, lotto, quantità) e cosa esce (prodotto, codice del
                  lotto, quantità). Deposito e date si leggono nella versione larga.
      coda import stato, nome del file e fornitore riconosciuto: il file illeggibile
                  accanto al nome giusto è la cosa che il disegno deve far vedere.
      richiamo    cliente, lotto e quantità: chi devi chiamare e per che cosa. */
 .mock.prod .pc-dep,.mock.prod .pc-x,.mock.prod .po-dp,.mock.prod .po-sc,.mock.prod .po-dep,.mock.prod .po-x{display:none}
 .mock.prod .mk-tab th,.mock.prod .mk-tab td{padding:2px 4px}
 .mock.prod .mk-campo{padding:4px 6px}
 .mock .pc-art{width:33%}
 .mock .pc-lot{width:32%}
 .mock .pc-qta{width:35%}
 .mock .po-art{width:36%}
 .mock .po-cod{width:28%}
 .mock .po-qta{width:36%}
 .mock .mk-due{grid-template-columns:1fr}
 .mock .q-piva,.mock .q-num,.mock .q-az{display:none}
 .mock .q-sta{width:32%}
 .mock .q-file{width:30%}
 .mock .q-forn{width:38%}
 .mock td.q-forn{overflow-wrap:anywhere}
 /* La pillola di stato smette di stare su una riga sola: «Da rivedere» in 67px non ci sta,
    e una pillola che va a capo è meglio di una che esce dalla sua cella. */
 .mock .mk-badge{padding:2px 6px;font-size:.65625rem;white-space:normal}
 .mock .r-doc,.mock .r-num,.mock .r-data,.mock .r-fat{display:none}
 .mock .r-cli{width:40%}
 .mock .r-lot{width:29%}
 .mock .r-qta{width:31%}
 /* Il richiamo è l'unico mockup dentro una colonna di lettura già rientrata (il riquadro
    «Come aiuta GUSTOID» della guida). Sul telefono si riprende quel rientro, altrimenti
    resterebbero 204px per tre colonne. */
 .notice .mock-fig{margin-inline:-18px}
}
/* sotto i 360px la riga dell'intestazione non ci stava e la pagina si portava dietro una
   barra di scorrimento orizzontale. Misura su uno schermo da 320px: la riga chiedeva
   345px (20 di margine + 132 di marchio + 12 + 127 di pulsante + 10 + 44 di menu + 20),
   cioe' 25 piu' dello schermo.
   Qui sotto non sparisce e non cambia niente: cambiano solo le misure, e solo sotto i
   360px. Marchio 104 (resta alto 30px e leggibile), spazi a 8, menu 40 (il dito ne chiede
   24), pulsante con 10px di fianco invece di 14, testo del pulsante invariato. La riga
   torna a 279px dei 280 utili, dentro gli stessi margini del resto della pagina.
   Sopra i 360px non cambia un pixel. */
@media(max-width:360px){
 .brand img{width:104px}
 .header .wrap{gap:8px}
 .header-actions{gap:8px}
 .menu summary{width:40px;height:40px}
 .header-actions .button.small{padding:10px 10px}
 /* «Richiedi la prova gratuita» è largo 247px e non va a capo: nel riquadro scuro in fondo
    alla pagina, che su uno schermo da 320 ne lascia 228, sconfinava di 19px nel margine
    interno di destra — 26px di stacco a sinistra, 7 a destra. I due pulsanti prendono la
    riga intera, come già fanno quelli dell'apertura sotto gli 860px. */
 .cta .actions .button{width:100%}
 /* Qui le schede di sintesi dei mockup tornano a una per riga: da 342px in giù la cifra
    grande «628,40 €» (103,1px misurati a video) non sta più in mezza riga. */
 .mock .mk-kpi{grid-template-columns:1fr}
}
/* sotto i 340px lo schermo lascia 280px utili: il bollo grande accanto al titolo e i
   quattro bolli delle schede cedono 8px per non mangiarsi la riga. */
@media(max-width:340px){
 .bollo{width:56px;height:56px}
 .bollo svg{width:30px;height:30px}
 .bollo.grande{width:64px;height:64px}
 .bollo.grande svg{width:34px;height:34px}
}
/* stampa: i fondi scuri diventano leggibili sulla carta, il menu sparisce,
   i pulsanti restano come testo riquadrato e i collegamenti mostrano l'indirizzo. */
@media print{
 @page{margin:14mm}
 body{background:#fff}
 /* .conv sta con .uv e .g-barre: sono figure illustrative, e i loro tratti sono scelti per
    il fondo blu (#8CE1D8 su bianco fa 1,51:1). Quello che dicono è scritto accanto, nelle
    tre righe con la spunta, che si stampano. */
 /* .mock-fig sta con loro: un mockup è una figura larga, sulla carta uscirebbe compresso e
    con i fondi tinti stampati a chiazze. Quello che dice è scritto nel testo intorno, e la
    didascalia se ne va insieme al disegno, altrimenti resterebbe una riga che dichiara una
    ricostruzione che non c'è. L'illustrazione di mestiere (.mest) invece si stampa: è testo
    dentro riquadri, e sulla carta funziona. Le immagini del programma (.vista) seguono la
    regola dei mockup: sono esempi, e la loro didascalia se ne va insieme a loro. */
 .nav,.menu,.header-actions,.skip,.uv,.conv,.g-barre,.genea-panel,.mock-fig,.vista,.mazzo,.cf-turnstile{display:none}
 .header .wrap{min-height:auto;padding-block:12px}
 .section,.hero{padding-block:24px}
 .cta{margin-block:24px}
 /* i fondi scuri diventano bianchi: l'elenco è per classe perché sul blu ci sono testi
    dichiarati con due classi (.sparisce .esito, .hero .checks...), che una regola sola e
    meno specifica non riuscirebbe a riportare in blu — resterebbero bianchi sul bianco.
    Lo stesso vale un livello più sotto: le etichette di colonna delle prove hanno TRE
    classi (.prove .a .lab, .prove .c .lab, .capo .ca, .capo .cc), quindi .prove .lab
    perdeva e sulla carta uscivano #8FA9B4 e #8CE1D8 su bianco, cioè 2,47:1 e 1,51:1 — la
    seconda invisibile. Vanno elencate con la stessa specificità, e contano davvero: alla
    larghezza di un A4 valgono le regole sotto i 1000px, dove quelle etichette smettono di
    essere nascoste e si stampano. */
 .dark,.dark .lead,.dark p,.dark .tre,.dark .eyebrow,.dark .text-link,.dark .caption,.problema .esito,.hero .checks,.sparisce .adesso,.sparisce ol,.sparisce li::before,.sparisce .esito,.sparisce .onesta,.prove .capo span,.prove .lab,.prove .a .lab,.prove .c .lab,.prove .capo .ca,.prove .capo .cc,.prove .esito,.prove .onesta,.tg-capo,.cta,.cta p,.cta h2{background:#fff;color:var(--blue)}
 .cesura .n,.cesura .uno{color:var(--blue)}
 /* la targa perde il fondo blu della fascia: le serve un filo che la separi dalle righe */
 .tg-capo{border-bottom:2px solid var(--blue)}
 .sparisce .riga,.sparisce .onesta,.prove .riga,.prove .onesta,.credenziali{border-color:var(--line)}
 .cta{border:2px solid var(--blue);padding:22px 24px}
 .button,.button.ghost{background:#fff;color:var(--blue);border:1px solid var(--blue);min-height:auto;padding:6px 12px}
 .article a[href^="/"]::after,.cta a[href^="/"]::after{content:" (gustoid.com" attr(href) ")";font-weight:400}
 a[href^="http"]::after{content:" (" attr(href) ")";font-weight:400}
 .sectors a,.faq details,.audiences article,.guides a,.sparisce .riga,.prove .riga,.muro>div,.indice-fasi li,.targa,.problema,.bollo,.steps.filo li,.faq-gruppo h3,.capitoli-nav,.tasto,.determina li,.conti,.due-col>div{break-inside:avoid}
 /* il bollo è un quadrato pieno con il tratto bianco dentro: sulla carta bianca l'icona
    sparirebbe, quindi si rovescia — fondo bianco, contorno e tratto blu. */
 .bollo{background:#fff;border:2px solid var(--blue)}
 .bollo svg{stroke:var(--blue)}
 /* stesso motivo per il tasto F1: #8CE1D8 su carta bianca fa 1,51:1, cioè non c'è. Il
    tasto si stampa, perché mostra che cosa premere, ma in blu. */
 .tasto b{border-color:var(--blue);box-shadow:0 5px 0 -1px var(--blue)}
 /* la freccia della cesura porta informazione quanto i due numerali che separa */
 .ces-h{display:block}
 .ces-v{display:none}
 /* Il diagramma del flusso porta informazione, quindi si stampa (a differenza del
    pannello della genealogia, che è una figura di esempio): sulla carta va la versione
    orizzontale, e la scelta è dichiarata qui perché la larghezza del foglio potrebbe
    altrimenti far scattare il punto di rottura dei 1000px e stamparle tutte e due. */
 .flow-h{display:block}
 .flow-v{display:none}
 .flow-fig{break-inside:avoid}
}