/* ==========================================================================
   FORMAZIONE CLAUDE · sistema visivo
   Impianto:  more.leads (`_Lab/moresales/sito/assets/stile.css`, 1453 righe),
              copiato riga per riga: scala tipografica, griglia, componenti,
              le sei regole della grammatica.
   Palette:   Dominio 2 Formazione (KIT-UFFICIALE.md §3), misurata e mappata
              in `30_Design/PALETTE.md` il 2026-09-09.

   Tutti i rapporti scritti in questo file sono ricalcolati con node
   (WCAG 2.1, luminanza relativa, (L1+0,05)/(L2+0,05)). Nessuno ricopiato dal
   foglio di more.leads, che parlava di un'altra palette: un commento che
   mente costa piu' di un colore sbagliato, perche' il prossimo lo crede.

   == COSA CAMBIA RISPETTO AL MODELLO, e non e' solo il fondo ===============
   more.leads e' freddo: fondo nero-blu, accento ciano, segno viola, coral
   per la sezione Claude. Qui il fondo e' caldo, l'accento e' il rosso
   segnale, il segno e' una sabbia neutra. Tre conseguenze, tutte misurate:

   1. DENTRO IL ROSSO SI SCRIVE BIANCO (4,55:1). Su more.leads dentro il
      ciano e dentro il coral si scriveva SCURO, perche' erano due accenti
      chiari. Qui lo scuro fa 4,01 e l'inchiostro della pagina 3,94: bocciati
      tutti e due. La regola del modello non si riporta per abitudine.
   2. L'HOVER SCURISCE. La regola di casa resta «l'hover allontana il fondo
      dal testo che ci sta dentro»: qui dentro c'e' bianco, quindi si va giu'.
      Su more.leads si andava su, e non era una semplificazione.
   3. IL TETTO CHE NON C'E'. more.leads separava titolo e corpo con due grigi
      (17,32 e 12,08). Il kit del Dominio 2 da' UN solo inchiostro, e sopra di
      lui c'e' solo il bianco puro, che questa casa non usa. Quindi --ink e
      --testo sono lo stesso valore e la gerarchia la fanno corpo, peso e
      filetto. Non e' una svista.

   == LE MISURE CHE REGGONO L'IMPIANTO =====================================
     testo  #F2EEE6 su fondo 15,77:1 · su superficie 13,91 · su sup-2 12,23
     muto   #8A8A86 su fondo  5,27:1 · su superficie  4,64 · su sup-2  4,08 NO
     muto-sup #A8A69E        7,49:1 ·               6,60 ·          5,80
     accento-t #FF6A55 su fondo 6,47:1 · bianco dentro il rosso pieno 4,55

   == ROSSO OPPURE GIALLO, MAI INSIEME (kit §5.3) ==========================
   --giallo #E8E000 e' il colore piu' leggibile della palette e resta qui
   SPENTO, dichiarato nel :root come promemoria che esiste. Se un giorno
   comanda lui, esce il rosso: non si aggiunge.

   == COSA NON C'E' PIU', rispetto al foglio di more.leads =================
   · il MONDO CALDO `[data-mondo="claude"]` e tutte le sue regole. Era la
     palette coral di Anthropic, uscita dal kit il 03/09 e vietata dal
     brief §1. Nessun logo, nessun «corso ufficiale», nessuna affiliazione.
   · la FASCIA DEI LOGHI e la sua giostra: uscita il 09/09, TORNATA il
     12/09 come sezione 03, «Con chi ho lavorato». Le regole stanno in
     fondo al foglio, nel blocco MONTAGGIO v3.
   · il VIDEO DI APERTURA e il velo. Il marchio non e' deciso, quindi l'intro
     non esiste ancora.
   I tre punti in cui erano sono segnati qui sotto con un commento, cosi' chi
   li rimette sa dove.

   == Sei regole della grammatica, e un pezzo che ne rompe una e' fuori =====
     A · contorno, mai riempimento sfumato: niente box-shadow, blur, gradienti
     B · l'angolo e' tagliato (clip-path), mai arrotondato
     C · PENSIONATA il 06/09 sul modello, era «la griglia si vede». Le regole
         restano, spente. Dettaglio piu' giu', su `.griglia`
     D · i caratteri sono da strumento: Recursive (titoli e marchio),
         Inter (corpo), DM Mono (schede), JetBrains Mono (etichette)
     E · il micro-testo e' texture, non testo
     F · un solo accento per composizione: qui e' il rosso, e porta le
         richieste. Il segno non porta mai una richiesta
   ========================================================================== */

/* --- caratteri, tutti qui dentro: nessun dominio terzo ------------------- */
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-var.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
/* Recursive · un file variabile solo, da 400 a 800: dove prima servivano
   tre tagli statici qui ce n'e' uno. Il latin-ext e' un secondo file con il
   suo unicode-range, quindi si scarica SOLO se in pagina compare una
   lettera che sta li' dentro, e per l'italiano quasi mai. */
@font-face{font-family:'Recursive';src:url('fonts/Recursive-var.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Recursive';src:url('fonts/Recursive-var-ext.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';src:url('fonts/DMMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url('fonts/DMMono-Regular-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Khand SemiBold (SIL OFL 1.1) e Array Bold (ITF FFL 2.0), dal 15/09: i file
   ufficiali di Fontshare, così come sono. Array non si ritaglia, non si
   converte e non si rinomina (licenza, sezione 02). Le licenze stanno accanto
   ai file, in assets/fonts. */
@font-face{font-family:'Khand';src:url('fonts/Khand-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Array';src:url('fonts/Array-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- token ---------------------------------------------------------------
   Il token si chiama `--fondo`, non `--carta`: su una pagina scura «carta»
   sarebbe un nome che mente, e i nomi che mentono si portano dietro errori. */
:root{
  /* --- i neutri. Elevazione = carta miscelata sul fondo. Scala 5,5·10·14·26 */
  --fondo:#17150F;
  --superficie:#23211B;     /* carta al 5,5% · 1,13:1 sul fondo */
  --superficie-2:#2D2B25;   /* carta al 10%  · 1,29:1 */
  --filo:#36332D;           /* carta al 14%  · 1,45:1 */
  --filo-forte:#504D47;     /* carta al 26%  · 2,17:1 */

  /* --- inchiostro */
  --ink:#F2EEE6;            /* 15,77:1 sul fondo · 13,91 su superficie */
  --testo:#F2EEE6;          /* stesso valore, vedi la nota qui sopra */
  --muto:#8A8A86;           /* 5,27:1 SOLO SUL FONDO */
  --muto-sup:#A8A69E;       /* 7,49:1 · OBBLIGATORIO appena si sale di un piano:
                               il muto su superficie-2 fa 4,08 e non passa */

  /* --- l'accento. Rosso segnale, uno solo per composizione (regola F) */
  --accento:#E0301E;        /* 4,01:1 sul fondo · tratti, fondi pieni, titoli grandi */
  --accento-hover:#D02C1B;  /* SCURISCE · bianco dentro 5,17 · pieno sul fondo 3,53 */
  --accento-t:#E0301E;      /* 14/09, Gabriele: un arancio solo, quello di «Scrivimi». Era #FF6A55 (6,47:1). Ora 4,01:1: vedi UN COLORE SOLO in fondo */
  --accento-in:#FFFFFF;     /* BIANCO dentro il rosso (4,55:1). Scuro = 4,01, no */

  /* --- cornici e linee, derivate dalla carta come tutto il resto */
  --bordo:#77746E;          /* carta al 44% · 3,92:1 sul fondo, 3,04 su superficie-2 */
  --tratto:#737069;         /* carta al 42% · 3,69:1 · linee degli schemi */

  /* --- il segno. NON e' un secondo accento: e' tratti e tinte, e non porta
     mai una richiesta. Sabbia calda, saturazione 20% contro il 76% del rosso
     e il 100% del giallo: non puo' essere scambiato per un accento. */
  --segno:#B5A98F;          /* 7,85:1 sul fondo · 6,93 su superficie · 6,09 su sup-2 */
  --segno-pieno:#B5A98F;    /* fa da fondo di suo: dentro ci si scrive scuro */
  --segno-in:#17150F;       /* 7,85:1 dentro il segno pieno */

  /* --- i due segni semantici. Il rosso semantico di more.leads (#FF6B6B) e'
     USCITO: stava a 6 gradi di tinta dall'accento, e il foglio del modello
     aveva fissato 50 gradi come distanza minima fra due segni piccoli. La
     croce diventa neutra: «spento», non «allarme». */
  --si:#4ADE80;             /* 10,47:1 sul fondo · tinta 142 gradi, 136 dal rosso */
  --no-c:#A8A69E;           /* 7,49:1 · saturazione 5%, fuori dalla ruota */

  /* --- il blocco che sta a parte: chiaro dentro la pagina scura */
  --blocco:#F2EEE6;
  --blocco-ink:#17150F;     /* 15,77:1 dentro il blocco */
  --blocco-testo:#3A3831;   /* fondo all'84% · 10,14:1 */
  --blocco-muto:#615F58;    /* fondo al 66% · 5,52:1 */
  --blocco-filo:#D8D4CC;    /* fondo al 12% · 1,28:1 */
  --blocco-filo-forte:#C2BEB7; /* fondo al 22% · 1,60:1 */
  --blocco-bordo:#807D76;   /* fondo al 52% · 3,55:1 */
  /* Dentro il blocco chiaro il rosso si INVERTE con lui. Il rosso base fa
     3,94 sulla carta e il rosso-t crolla a 2,44, sotto perfino la soglia dei
     tratti. Vale per le croci, i filetti e i pulsanti dentro `.riq--pieno`. */
  --blocco-acc:#E0301E;     /* 14/09, un arancio solo. Era #B82415 (5,50:1). Ora 3,94:1 sulla carta · bianco dentro 4,55 */
  --blocco-hover:#96190B;   /* 7,44:1 · qui l'hover scurisce ancora, c'e' spazio */
  --blocco-si:#276B3F;      /* 5,56:1 · il verde chiaro sulla carta fa 1,51 e sparisce */
  --blocco-no:var(--blocco-muto);

  /* --- spento, ma dichiarato: il secondo accento che esclude il rosso */
  /* --giallo:#E8E000;      13,12:1 · kit §5.3, rosso OPPURE giallo */

  --smusso-s:8px; --smusso-m:12px; --smusso-l:18px;
  --colonna:1180px;
  --passo:64px;

  /* 05/09 sul modello: i titoli sono Recursive in grassetto, scelto da
     Gabriele sul banco caratteri. Anton e' uscito dal sito insieme al
     maiuscolo forzato: reggeva una parola sola e pesava 18,6 KB scaricati
     da tutti. --f-marchio resta come alias del titolo, cosi' se un giorno il
     marchio deve distinguersi si cambia in un punto solo. */
  --f-tit:'Recursive','Segoe UI',system-ui,sans-serif;
  --f-marchio:var(--f-tit);
  --f-schede:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-testo:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-dati:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* [USCITO] Qui il modello aveva `[data-mondo="claude"]{...}`, 21 token del
   mondo caldo coral. Cancellato: e' la palette di Anthropic, fuori dal kit
   dal 03/09 e vietata dal brief §1. Su questa pagina non c'e' un secondo
   mondo, l'argomento e' Claude dalla prima riga. */

/* --- fondamenta --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* color-scheme:dark dice al browser che i controlli nativi, menu' a tendina,
   caselle di spunta, barre di scorrimento, vanno disegnati scuri. Senza,
   restano bianchi in mezzo alla pagina e sembrano un errore. */
/* Il fondo sta anche qui e non solo nel :root: e' il colore che riempie
   l'area di rimbalzo sopra e sotto la pagina. Fuori dai token si dimentica,
   e allora scorrendo oltre il fondo si vede una banda di un altro colore. */
html{scroll-behavior:smooth;scroll-padding-top:88px;background:#17150F;color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--fondo);
  color:var(--testo);
  font-family:var(--f-testo);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Il maiuscolo forzato se n'e' andato con Anton, e non e' una liberta':
   Anton e' un condensato da manifesto, disegnato per stare tutto in
   maiuscolo. Recursive e' un carattere da testo. Le stesse parole in
   maiuscolo qui diventano circa un terzo piu' larghe e perdono le ascendenti
   e le discendenti, che sono quello che rende una parola riconoscibile a
   colpo d'occhio. Il grassetto lo chiede Gabriele; il maiuscolo no. */
h1,h2,h3{
  font-family:var(--f-tit);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.02;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(31px,5.2vw,58px);line-height:1.06}
h2{font-size:clamp(25px,3.6vw,42px);line-height:1.08}
h3{font-size:clamp(19px,2vw,25px);line-height:1.15}
/* Il titolo di scheda e' un h3 per la struttura (niente salti di livello),
   ma non urla come un titolo di sezione: stessa mano, misura da scheda. */
.titolino{font-family:var(--f-tit);font-weight:700;font-size:19px;color:var(--ink);
  margin:0;line-height:1.3;text-transform:none;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accento-t)}
strong,b{font-weight:600;color:var(--ink)}
/* ⚠️ Vale solo sugli elementi SENZA clip-path: il ritaglio cancella il
   contorno senza dare nessun errore, e getComputedStyle continua a
   rispondere «solid 3px». Chi aggiunge un clip-path aggiunge anche
   l anello interno, come i comandi qui sotto. Trovato col collaudo a
   pixel del 09/09: 7 pulsanti su 7 non dipingevano niente. */
:focus-visible{outline:3px solid var(--accento);outline-offset:3px}

/* L anello dei comandi sta DENTRO il ritaglio, se no sparisce.
   Bianco nel rosso: 4,55:1, contro una soglia di 3 per un segno di fuoco. */
/* outline trasparente e non none (verifica del 14/09): coi colori forzati di
   Windows il box-shadow sparisce, e l'outline trasparente diventa del colore
   di sistema. Senza colori forzati non cambia niente. */
.bottone:focus-visible{outline:3px solid transparent;outline-offset:-6px;box-shadow:inset 0 0 0 3px var(--accento-in)}
.bottone--vuoto:focus-visible{outline:3px solid transparent;outline-offset:-6px;box-shadow:inset 0 0 0 3px var(--accento-t)}
.scelta:focus-within{box-shadow:inset 0 0 0 2px var(--accento-t)}
/* Il fuoco usa l'accento: 4,01:1 sul fondo, e un anello di 3px e' un tratto,
   soglia 3. Il segno non puo' farlo, perche' il segno non chiama mai. */

/* --- griglia visibile (regola C) · PENSIONATA sul modello il 2026-09-06 ---
   Tolta dall'apertura su giudizio di Gabriele: «troppo ai slop». Una griglia
   a un solo passo su fondo scuro era l'unico elemento puramente decorativo
   della pagina, cioe' l'unica cosa che rompeva la disciplina che tiene su
   tutto il resto. Era anche usata UNA volta sola, e `--passo` esiste solo
   per lei.

   Le regole restano qui, non cancellate, come le classi `h1-*` piu' giu': se
   la texture torna, torna in un attimo rimettendo `griglia` sulla sezione.
   Se torna, pero', che non sia questa: una griglia a DUE frequenze, fitta
   piu' una riga marcata ogni dieci, cioe' la carta millimetrata di un
   geometra, direbbe qualcosa del mestiere di chi legge invece di dire
   «sito tecnologico».

   Le righe sono l'inchiostro al 5,5%: sul fondo l'esito e' esattamente
   #23211B, cioe' --superficie, 1,13:1. Si vede appena, ed e' voluto. */
.griglia{
  background-image:
    repeating-linear-gradient(0deg,transparent 0 calc(var(--passo) - 1px),rgba(242,238,230,.055) calc(var(--passo) - 1px) var(--passo)),
    repeating-linear-gradient(90deg,transparent 0 calc(var(--passo) - 1px),rgba(242,238,230,.055) calc(var(--passo) - 1px) var(--passo));
}
/* [USCITO] la seconda griglia, quella del mondo caldo. Un mondo solo, una
   griglia sola. */

/* --- impianto ----------------------------------------------------------- */
/* `background-color`, non `background`: la scorciatoia azzera la
   background-image della griglia, e la regola C muore in silenzio. */
/* IL RESPIRO · 06/09, audit APSOC. 76 a 104 (56 a 72 su mobile).
   Il ritmo resta UNO SOLO, «stessa spaziatura sopra e sotto ogni battuta»,
   e sui siti di Pascu 25 sezioni su 27 hanno lo stesso passo. Non e' varieta'
   che manca: e' larghezza. Qui l'aria fa anche un secondo mestiere, perche'
   il cambio di fondo fra una sezione e l'altra (--fondo verso --superficie)
   misura 1,13:1 e nessuno lo vede: finche' resta cosi', il capitolo lo
   separa lo spazio, non il colore. Sul modello erano 1,097:1, stessa
   conclusione, numero diverso. Dal 13/09 il filo in cima non sta piu' su
   ogni sezione: vedi FILI E FILETTI qui sotto. L'aria resta quella. */
.sez{background-color:var(--fondo);padding:136px 0}
/* 14/09, Gabriele: «tra le sezioni più respiro». 104 → 136, 72 → 96 sotto i
   900, la fitta 52 → 68, e il fondo dell'apertura 142 → 184: tutto +30%. */
/* FILI E FILETTI · 13/09. Il filetto apre un capitolo. Fra un capitolo e
   l'altro stacca il fondo, ma solo dove cambia davvero, e in questa pagina
   cambia solo sulla carta (15,77:1 contro il nero). Nero e grigio stanno a
   1,13:1 e contano come lo stesso fondo: fra due capitoli scuri resta il
   filo da 1 px (.sez--filo), lo stesso --filo che prima stava su tutte. In
   cima alla carta, alla fascia e alle due sezioni che vengono subito dopo
   la carta (la 07 e la 14) il filo non c'e': li' stacca il fondo, o la
   sezione continua quella prima. Una sezione che continua il discorso di
   quella prima non riapre il capitolo, e perde anche il filetto
   (.sez--segue: la 02, la 09 e la 11b). */
.sez--filo{border-top:1px solid var(--filo)}
.sez--segue .filetto{display:none}
.sez--fitta{padding:68px 0}
/* Il nome resta `--bianca` per non toccare l'HTML, ma sullo scuro vuol dire
   «la sezione sollevata di un gradino»: sul buio si sale, non si scende. */
.sez--bianca{background-color:var(--superficie)}
/* e0f1ecd0 · «la hero section deve essere 25% piu' alta». Misurata prima di
   toccarla: 531px a 1440. Piu' 25% = 664, cioe' 133px da distribuire sopra e
   sotto. Non uso min-height in vh: una prima schermata legata all'altezza
   della finestra su un portatile basso spinge fuori tutto il resto. */
/* (0,2,0) e non (0,1,0): `.sez{padding:72px 0}` dentro @media(max-width:900px)
   sta piu' sotto nel foglio e a pari specificita' vinceva, misurato 72/72 dove
   dovevano essere 64/88. La specificita' regge anche se domani si sposta. */
.sez.sez--prima{border-top:0;padding-top:106px;padding-bottom:184px}
@media(max-width:640px){.sez.sez--prima{padding-top:64px;padding-bottom:116px}}
.dentro{width:min(100% - 44px,var(--colonna));margin-inline:auto}
.pila{display:flex;flex-direction:column;gap:28px}
.pila--larga{gap:44px}
/* 66 caratteri: il modello vuole 65-70, quindi non si tocca. */
.stretta{max-width:66ch}
/* Una frase appena piu' lunga della gabbia lascia l'ultima parola da sola su
   una riga, e si legge come un buco. `balance` distribuisce le righe invece
   di riempirle fino all'orlo. Dove il browser non lo conosce non succede
   niente: resta l'a capo di prima, non peggiora. */
.bilancia{text-wrap:balance}
/* Un a capo deciso a mano per la riga lunga del desktop: sullo schermo stretto
   il titolo va gia' a capo da solo e quel taglio in piu' lascia una parola sola
   su una riga. Sotto i 700 sparisce e il titolo si impagina da se'. */
@media(max-width:700px){ .solo-largo{display:none} }
/* 1,60 verso 1,72: da 30,4 a 32,7 px fra una riga e l'altra. E' il testo che
   si legge davvero, ed e' li' che «troppo testo» si sente o non si sente. */
.testo-g{font-size:19px;line-height:1.72}
/* «Quanto costa? Lo vediamo in call.» nell'apertura: +10% (14/09, commento di
   Gabriele), da 19 a 20,9 px. */
.testo-g--piu{font-size:20.9px}

/* Filetto di apertura sezione. Lo porta il SEGNO, non l'accento: apre un
   capitolo, non chiede niente. Sabbia sul fondo, 7,85:1, e' un tratto da 4px
   e la soglia sarebbe 3. */
.filetto{height:4px;width:76px;background:var(--segno);flex:none}

/* --- comandi ------------------------------------------------------------ */
.comandi{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.bottone{
  display:inline-block;
  background:var(--accento);color:var(--accento-in);
  font-family:var(--f-testo);font-weight:600;font-size:16px;
  padding:16px 30px;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:background .15s;
}
/* L'hover SCURISCE, ed e' l'opposto del modello: dentro il pulsante c'e'
   bianco, e la regola di casa e' «allontana il fondo dal testo che ci sta
   dentro». Bianco dentro il rosso base 4,55, dentro l'hover 5,17.
   Il prezzo, dichiarato: il salto vale 1,14 contro l'1,21 del ciano di
   more.leads. Li' l'hover schiariva e si allontanava dalla pagina, quindi
   aveva corsa libera; qui scurisce verso il fondo e la corsa finisce a 3:1.
   Il pulsante pieno fa 3,53 sul fondo e 3,11 su --superficie; su
   --superficie-2 farebbe 2,73 e NON passa: vedi la nota su `.riq`. */
.bottone:hover{background:var(--accento-hover)}
.bottone--vuoto{
  background:transparent;color:var(--accento-t);
  border:1px solid var(--filo-forte);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.bottone--vuoto:hover{background:var(--superficie-2)}
.link-t{
  color:var(--accento-t);font-weight:600;font-size:16px;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;
}

/* --- riquadri (regola B: angolo tagliato) ------------------------------- */
.riq{
  /* il fondo NON sta qui: sta su ::after, sotto la cornice. Qui resta solo
     il valore, che le varianti (sollevata, piena, colorata, segnata)
     continuano a cambiare come prima. */
  --fondo-riq:var(--superficie);
  position:relative;isolation:isolate;background:none;border:0;
  padding:26px 26px 24px;
  display:flex;flex-direction:column;gap:12px;
}
/* La cornice: due poligoni uguali, il secondo rientrato di 1,5px. Il bordo
   e' la differenza, e segue anche le due diagonali, che e' tutto il punto:
   un `border` normale li' viene tagliato via dal clip-path. */
.riq::before,.riq::after{content:"";position:absolute;pointer-events:none}
.riq::before{inset:0;z-index:-2;background:var(--bordo);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.riq::after{inset:1.5px;z-index:-1;background:var(--fondo-riq);clip-path:polygon(0 0,calc(100% - 14.5px) 0,100% 14.5px,100% 100%,14.5px 100%,0 calc(100% - 14.5px))}
/* Dentro una sezione gia' sollevata il riquadro sale ancora di un gradino.
   Su --superficie-2 il pulsante pieno d'accento fa 3,11 e l'hover 2,73:
   sotto la soglia. Un `.bottone` dentro un riquadro di una `.sez--bianca`
   deve tenere un filo di --bordo da 1px, che su --superficie-2 fa 3,04 e
   porta lui il confine. */
.sez--bianca .riq{--fondo-riq:var(--superficie-2)}
/* Il blocco che sta a parte: sul chiaro era scuro, sullo scuro e' chiaro.
   Tutto quello che ci sta dentro cambia colore, accento compreso: il rosso
   base sulla carta fa 3,94 e non passa come testo, quindi li' comanda
   --blocco-acc, 5,50. */
.riq--pieno{--fondo-riq:var(--blocco);--bordo:var(--blocco)}
.sez--bianca .riq--pieno{--fondo-riq:var(--blocco)}
.riq--pieno h3,.riq--pieno .titolino{color:var(--blocco-ink)}
.riq--pieno p,.riq--pieno li,.riq--pieno span{color:var(--blocco-testo)}
.riq--pieno strong,.riq--pieno b{color:var(--blocco-ink)}
.riq--pieno .indice,.riq--pieno .croce{color:var(--blocco-acc)}

.rete{display:grid;gap:18px}
.rete--2{grid-template-columns:repeat(2,1fr)}
.rete--3{grid-template-columns:repeat(3,1fr)}
.rete--4{grid-template-columns:repeat(4,1fr)}

/* --- dati, numeri, etichette (regola D) --------------------------------- */
.dato{font-family:var(--f-dati);font-variant-numeric:tabular-nums}
.et{
  font-family:var(--f-dati);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muto);
}
.misura{
  font-family:var(--f-dati);font-weight:700;font-size:13px;letter-spacing:.06em;
  color:var(--accento-t);border:1px solid var(--filo-forte);
  /* 700 dal 14/09 (audit): l'arancio unico a 13 px fa 4:1, e l'eccezione
     decisa per l'arancio vale per il testo grande o in grassetto. */
  padding:5px 11px;display:inline-block;font-variant-numeric:tabular-nums;
  /* Un'etichetta su due righe: la pastiglia si allarga sulla riga piu' lunga e
     la corta va centrata, se no resta appesa a sinistra. Su quelle di una riga
     sola non cambia niente, la scatola e' gia' larga quanto il testo. */
  text-align:center;line-height:1.35;
}
/* Sotto la mappa del percorso interrotto l'accento direbbe il contrario di
   quello che la mappa mostra. Qui la coppia non e' piu' «verde contro rosso»
   ma «acceso contro spento»: --no-c e' neutro, 7,49:1 sul fondo, saturazione
   5%, cioe' fuori dalla ruota dei colori. Il verde e' la sua gemella per il
   percorso che arriva in fondo, 10,47:1. */
.misura--no{color:var(--no-c);border-color:var(--no-c)}
.misura--si{color:var(--si);border-color:var(--si)}
/* La pastiglia grande: una sola, «5 GG / MESE» nella 12, al centro della
   colonna (Gabriele, 12/09 sera, «allinea al centro e ingrandisci»). */
.misura--grande{font-size:19px;padding:8px 17px;letter-spacing:.08em}
@media (max-width:560px){.misura--grande{font-size:17px;padding:7px 14px}}
.misure{display:flex;flex-wrap:wrap;gap:10px}
.cifra{font-family:var(--f-dati);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.indice{font-family:var(--f-dati);font-weight:700;font-size:13px;color:var(--accento-t);letter-spacing:.08em}

/* --- elenchi ------------------------------------------------------------ */
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.lista li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.lista .indice,.lista .croce{padding-top:3px}
.croce{font-family:var(--f-dati);font-weight:700;color:var(--accento-t);font-size:15px}

/* --- tabelle ------------------------------------------------------------ */
.tab-scorre{overflow-x:auto;border:1px solid var(--filo);background:var(--superficie)}
.sez--bianca .tab-scorre{background:var(--superficie-2)}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:15px}
th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--filo);vertical-align:top}
thead th{
  /* --muto-sup, non --muto: qui il fondo e --superficie-2, e --muto
     ci fa 4,08 contro una soglia di 4,5. E la regola del :root. */
  color:var(--muto-sup);
  font-family:var(--f-dati);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;background:var(--superficie-2);
  border-bottom:1px solid var(--filo-forte);white-space:nowrap;
}
/* Sul telefono gli 11px delle intestazioni non sono micro-testo decorativo:
   sono le colonne che dicono di cosa parla ogni cella. Salgono a 13px, e la
   tabella scorre gia' nel suo nastro, quindi la larghezza in piu' non sborda. */
@media(max-width:640px){thead th{font-size:13px;letter-spacing:.08em}}
tbody th{font-weight:600;color:var(--ink);font-family:var(--f-testo);font-size:15px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
/* La colonna «io» prende l'accento, al 12%. Sul chiaro bastava il 6%, sullo
   scuro una velatura cosi' leggera non si vede: serve piu' corpo.
   L'esito e' #3A231B, e dentro il secondario DEVE salire a --muto-sup:
   --muto li' dentro fa 4,22 e non passa, --muto-sup fa 6,00. Il testo pieno
   fa 12,64, il segno 6,29. */
td.mia{background:rgba(224,48,30,.12)}
/* [USCITO] la stessa cella nel mondo caldo. */

/* Sul telefono le due tabelle NON scorrono: si impilano.
   Misurato a 360px: scrollWidth 660 contro clientWidth 314, cioe' 346px fuori
   dallo schermo. Sulla prima si vedeva una colonna sola, tagliata a meta'
   parola, e le sue intestazioni sono nascoste ai vedenti, quindi restava una
   fila di frasi col segno di spunta senza niente con cui confrontarle.
   I ruoli role="table|row|cell|rowheader" stanno nel markup apposta:
   display:block cancella i ruoli impliciti della tabella. Si aggiusta
   l'occhio senza rompere l'orecchio. */
@media(max-width:640px){
  .tab-scorre--coppie,.tab-scorre--confronto{overflow-x:visible;border:0;background:none}
  .tab-scorre--coppie table,.tab-scorre--confronto table{min-width:0;display:block;font-size:15px}
  .tab-scorre--coppie tbody,.tab-scorre--confronto tbody,
  .tab-scorre--coppie tr,.tab-scorre--confronto tr,
  .tab-scorre--coppie td,.tab-scorre--confronto td,
  .tab-scorre--confronto tbody th{display:block;width:auto}

  /* le coppie: le due celle della stessa domanda restano dentro lo stesso
     riquadro, cosi' si vede che sono un confronto e non due voci di elenco. */
  .tab-scorre--coppie tr{margin-bottom:16px;border:1px solid var(--filo);background:var(--superficie)}
  .tab-scorre--coppie td{padding:15px 16px;border-bottom:1px solid var(--filo)}
  .tab-scorre--coppie tr td:last-child{border-bottom:0}

  /* il confronto: ogni riga diventa una scheda, l'intestazione di riga fa
     da titolo e ogni cella si porta davanti il nome della sua colonna. */
  .tab-scorre--confronto thead{display:none}
  .tab-scorre--confronto tr{margin-bottom:16px;border:1px solid var(--filo);background:var(--superficie)}
  .tab-scorre--confronto tbody th{background:var(--superficie-2);padding:12px 16px;
    border-bottom:1px solid var(--filo-forte)}
  .tab-scorre--confronto td{padding:12px 16px;border-bottom:1px solid var(--filo)}
  .tab-scorre--confronto tr td:last-child{border-bottom:0}
  .tab-scorre--confronto td::before{content:attr(data-col);display:block;
    font-family:var(--f-dati);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muto);margin-bottom:5px}
  /* CORREZIONE, non una copia. Il modello scriveva qui `var(--accento)`,
     e con il ciano a 11:1 andava bene. Dentro la cella tinta (#3A231B)
     l'accento nuovo fa 3,21, e questo e' TESTO: un'etichetta di colonna in
     maiuscolo da 12px, soglia 4,5. Bocciato. Ci va --accento-t, 5,18, che e'
     per definizione il rosso quando porta testo. */
  .tab-scorre--confronto td.mia::before{color:var(--accento-t)}
}

/* --- le recensioni: marchio Trustpilot e schede ------------------------- */
/* Il marchio sta su una riga sua, centrato e cliccabile: e' la firma di chi
   garantisce, non un pulsante. Larghezza contenuta perche' a piena colonna
   diventerebbe piu' importante del titolo della sezione.
   Nota per chi impagina: il brief §4.2 vieta testimonianze e virgolettati
   finche' Gabriele non li manda, quindi su questa pagina queste regole
   restano probabilmente inutilizzate. Non le cancello: la struttura c'e' se
   e quando le recensioni arrivano. */
.tp-riga{display:block;width:max-content;margin:26px auto 4px;text-decoration:none}
.tp-marchio{display:block;width:152px;height:auto}
.tp-riga:hover .tp-marchio{opacity:.82}

.recensioni{margin-top:22px}
/* Le schede vuote hanno il fondo della SUPERFICIE e non del blocco: una
   scheda trasparente si confonderebbe col fondo invece di sembrare un posto
   vuoto. */
.rec{--fondo-riq:var(--superficie);gap:14px;padding:20px 20px 18px}
.rec-stelle{display:flex;gap:5px;justify-content:center}
/* Grigie, non verdi: cinque stelle nel verde di Trustpilot su una scheda
   senza recensione si leggono come un voto che nessuno ha dato. Il filo su
   superficie fa 1,28, cioe' si vede appena, che e' il punto. */
.rec-stella{width:19px;height:auto;fill:var(--filo);flex:none}
/* `width:100%` non e' ridondante: con `main#top .riq{align-items:center}`
   questo blocco si stringerebbe sul contenuto, e il contenuto sono
   percentuali di lui stesso, misurate larghe ZERO. */
.rec-righe{display:flex;flex-direction:column;gap:9px;width:100%;align-items:center}
.rec-righe span{display:block;height:8px;background:var(--filo-forte);border-radius:1px}
.rec-righe span:nth-child(1){width:100%}
.rec-righe span:nth-child(2){width:88%}
.rec-righe span:nth-child(3){width:58%}
.rec-attesa{font-family:var(--f-dati);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muto);margin:2px 0 0}
@media(max-width:560px){.tp-marchio{width:134px}.rec{padding:18px}}

/* --- segnaposto immagine ------------------------------------------------ */
.segnaposto{color:var(--muto-sup); /* 5,80 su --superficie-2. Era --muto: 4,08, bocciato (PALETTE §7) */
  
  border:1px dashed var(--filo-forte);background:var(--superficie-2);
  min-height:210px;display:grid;place-items:center;padding:26px;text-align:center;
  font-family:var(--f-dati);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.8; /* ⚠️ NIENTE color qui: lo dichiara la prima riga.
     Una seconda dichiarazione vince sulla prima e riporta il 4,08. */
}
.segnaposto--alto{min-height:320px}
/* Il chip dei `[DA GABRIELE: ...]`. Il brief §8 dice che i buchi si scrivono
   e non si riempiono, quindi questo chip e' un elemento vivo della pagina,
   non un residuo di bozza: deve VEDERSI.
   Il fondo e' il rosso al 14% su --superficie-2, esito #462C24, e dentro
   --accento-t fa 4,52, che passa al filo.
   Il bordo NON e' una copia del modello, e' una correzione: li' era il
   ciano al 38%, e il rosso al 38% contro --superficie-2 farebbe 1,42, cioe'
   invisibile. Al 100% fa 3,11 e il chip ha un confine vero. */
.da-decidere--riga{white-space:nowrap}
/* Sulla carta (dal 13/09 le sezioni di solo testo) il chip scrive in
   --blocco-acc: col rosso al 14% sotto fa 4,51, al filo. Col rosso della
   carta al 10% fa 4,70, e il bordo resta. */
.sez--blu .da-decidere{background:rgba(184,36,21,.10)}
.da-decidere{
  font-family:var(--f-dati);font-size:.86em;font-weight:500;
  background:rgba(224,48,30,.14);color:var(--accento-t);
  padding:1px 7px;border:1px solid var(--accento);white-space:normal;
  /* ⚠️ normal, non nowrap: 17 chip su 27 sono frasi intere e col nowrap
     sbordavano. I pochi corti che stanno in mezzo a una riga prendono
     .da-decidere--riga. */
}

/* --- testata ------------------------------------------------------------ */
.testata{
  position:sticky;top:0;z-index:20;background:var(--fondo);
  border-bottom:1px solid var(--filo);
}
/* La testata cresce da 66 a 78px per fare posto al segno piu' grande: il
   segno e' centrato in assoluto, quindi da solo non spingerebbe niente e
   sarebbe uscito dalla fascia scavalcando il bordo. Sotto i 760 torna a 66
   (LA TESTATA DEL TELEFONO, piu' giu'). */
.testata .dentro{display:flex;align-items:center;gap:22px;height:78px;position:relative}
/* IL MARCHIO, e il brief §1 e' esplicito: nome e logo non sono decisi, e
   devono essere sostituibili IN UN PUNTO SOLO. I due colori del marchio
   stanno in due regole sole, `.mar-punto` e `.mar-nome`, qui sotto.
   ⚠️ La classe si chiamava `.mar-leads` fino al 09/09: rinominata quando il
   nome del sito e diventato more.skills, perche una classe che dice «leads»
   su una pagina che dice «skill» e un nome che mente.
   Il punto porta il SEGNO (7,85:1 sul fondo). Un punto fermo e' un glifo di
   testo, non un tratto, quindi la soglia e' 4,5 e non 3: il segno la passa
   comodo. La seconda parola porta --accento-t, 6,47:1.
   Se il marchio cambia forma questa mappatura cade, ed e' il momento di
   rifarla, non di adattarla. */
/* NIENTE gap qui dentro. Il marchio e' un flex, e i suoi tre pezzi sono tre
   elementi flex: un gap li separa TUTTI, e il nome si legge come tre parole
   invece di una. */
.marchio{font-family:var(--f-marchio);font-weight:800;font-size:25px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;flex:none;
  display:inline-flex;align-items:center;gap:0}
/* Il segno grafico sta ACCANTO alla parola, non al posto suo: da solo un
   monogramma non si legge come un nome, e la testata e' il punto in cui uno
   deve capire dov'e'. alt="" perche' il nome e' gia' scritto qui di fianco.
   62px in una fascia da 78: otto di aria sopra e sotto. */
.marchio-segno{height:62px;width:auto;display:block;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none}
/* Misurato a 360px, la larghezza piu' stretta che collaudiamo: il marchio
   finisce a 130, il pulsante comincia a 248, quindi in mezzo restano 118px
   liberi. Un segno alto 46 ne occupa 43. Ci sta, e resta aria da tutte e due
   le parti. A 62 no: erano 58 di larghezza su 118, e bastava una parola in
   piu' nel pulsante per farli toccare. */
@media(max-width:760px){.marchio-segno{height:46px}}
/* Sotto i 360 pero' il varco a sinistra scende a 8px e il segno arriva
   addosso al marchio. Li' sparisce ancora: 8px non sono un contatto, ma sono
   stretti, e in cima alla pagina si vede. Misurato a 320, non stimato. */
@media(max-width:359px){.marchio-segno{display:none}}
/* LA TESTATA DEL TELEFONO · 13/09. Sotto i 760 il segno e' alto 46, e la
   fascia da 78 gli lasciava 16 px sopra e sotto: torna a 66, com'era prima
   del segno grande, e ne restano 10. A 390 la testata col suo filo passa
   da 79 a 67 px, dal 9,4% al 7,9% di una schermata da 844. Lo
   scroll-padding scende con lei, 66 piu' 10 di aria, cosi' un'ancora lascia
   il titolo visibile sotto la testata. La barra dei comandi in basso non
   entra, come su more.leads. */
@media(max-width:760px){.testata .dentro{height:66px} html{scroll-padding-top:76px}}
/* Il punto di Recursive ha le spalle larghe: fra le due parole si aprivano
   due buchi e il marchio si leggeva come tre parole. Si tirano dentro i due
   lati del punto. La misura e' in em, non in px, cosi' regge anche quando il
   marchio rimpicciolisce. */
.mar-punto{color:var(--segno);margin-inline:-.02em}
.mar-nome{color:var(--accento-t)}
.voci{display:flex;gap:22px;margin-left:auto;align-items:center}
.voci a{font-size:15px;font-weight:500;color:var(--testo);text-decoration:none}
.voci a:hover{color:var(--accento-t)}
/* `.voci a{color:var(--testo)}` e' (0,2,0) e batteva `.bottone` (0,1,0): il
   pulsante della testata aveva la scritta chiara sul rosso pieno. Serve la
   stessa specificita' per riportare dentro il colore giusto.
   ATTENZIONE, ed e' la trappola numero uno di questa palette, qui in
   triplice copia: dentro il rosso si scrive BIANCO. Il modello scriveva
   nero, perche' il ciano e il coral erano due accenti chiari. Qui il nero
   passerebbe a numeri (4,61) ma su una pagina quasi nera legge come un buco,
   il fondo fa 4,01 e l'inchiostro della pagina 3,94: bocciati.
   Resta --accento-in, che vale #FFFFFF, 4,55:1 e sull'hover 5,17. */
.testata .bottone{padding:11px 20px;font-size:15px;color:var(--accento-in)}
.voci a.bottone{color:var(--accento-in)}
.voci a.bottone:hover{color:var(--accento-in)}
.contatto-testata{font-family:var(--f-dati);font-weight:500;font-size:15px;letter-spacing:.02em;
  color:var(--ink)!important;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.contatto-testata:hover{color:var(--accento-t)!important}
/* Sul telefono cadono le ancore e resta il comando. */
@media(max-width:880px){.voci a:not(.bottone){display:none}}
@media(max-width:560px){
  .testata .dentro{gap:12px}
  .marchio{font-size:20px}
  .testata .bottone{padding:10px 14px;font-size:14px}
  .contatto-testata{font-size:14px}
}
/* Sotto i 480 il pulsante mandava a capo: si stringe invece di sparire,
   cosi' un comando resta sempre. */
@media(max-width:480px){
  .testata .bottone{padding:10px 13px;font-size:13.5px}
}

/* --- micro-impegno ------------------------------------------------------ */
.impegno{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.impegno .et{width:100%}
.scelta input{accent-color:var(--accento)}
.scelta{
  font-family:var(--f-testo);font-size:15px;font-weight:500;
  background:var(--superficie);color:var(--testo);
  border:1px solid var(--filo-forte);padding:11px 20px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.scelta:hover{border-color:var(--accento-t)}
/* ⚠️ Era .scelta[aria-pressed="true"], e in pagina non c e un solo elemento
   con quell attributo: codice morto, residuo di una versione a pulsanti.
   Il micro-impegno e fatto con radio nativi, quindi lo stato e :checked. */
.scelta:has(input:checked){background:var(--accento);color:var(--accento-in);border-color:var(--accento)}
.scelta:has(input:checked) input{accent-color:var(--accento-in)}
.eco{font-size:15px;color:var(--muto);margin-top:4px}

/* --- prezzi ------------------------------------------------------------- */
.prezzo{
  display:flex;flex-direction:column;gap:12px;
  background:var(--superficie);border:1px solid var(--filo);padding:26px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.sez--bianca .prezzo{background:var(--superficie-2)}
/* Il bordo del riquadro in evidenza usa l'accento pieno: qui e' un tratto,
   non un testo, e su --superficie fa 3,53, sopra la soglia dei 3. */
.prezzo--fuoco{border:2px solid var(--accento)}
.prezzo .cifra{font-size:34px;line-height:1}
.prezzo .nota{font-size:14.5px;color:var(--muto)}
.prezzo ul{margin:0;padding-left:18px;font-size:15px;display:flex;flex-direction:column;gap:6px}

/* --- modulo -------------------------------------------------------------
   Il brief §7 dice ZERO form: le richieste passano da due porte sole,
   WhatsApp col messaggio gia' scritto e la prenotazione della call, via
   redirect dichiarati in `sito/_redirects`. Queste regole restano perche' il
   questionario di pre-qualifica (brief §0) potrebbe volerle un giorno, ma su
   questa pagina non dovrebbero comparire. */
.modulo{display:flex;flex-direction:column;gap:18px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-family:var(--f-dati);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muto)}
.campo input,.campo textarea,.campo select{
  font-family:var(--f-testo);font-size:16px;color:var(--ink);
  background:var(--superficie-2);border:1px solid var(--filo-forte);
  padding:13px 14px;width:100%;border-radius:0;
}
.sez--bianca .campo input,.sez--bianca .campo textarea,.sez--bianca .campo select{background:var(--fondo)}
.campo textarea{min-height:118px;resize:vertical}
/* Niente opacita' sul segnaposto del campo: abbasserebbe un contrasto gia'
   misurato. Il colore e' gia' quello giusto. */
.campo input::placeholder,.campo textarea::placeholder{color:var(--muto);opacity:1}
.consenso{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:14.5px;color:var(--muto)}
.consenso input{width:19px;height:19px;margin-top:2px;accent-color:var(--accento)}

/* --- pagine di testo lungo (informativa, ringraziamento) ---------------- */
.documento{width:min(100% - 44px,74ch);margin-inline:auto;padding:60px 0 84px;display:flex;flex-direction:column;gap:26px}
.documento h1{font-size:clamp(30px,5vw,50px)}
.documento h2{font-size:clamp(21px,2.6vw,28px);margin-top:18px}
.documento p,.documento li{font-size:16.5px}
.documento ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.documento .riq{padding:22px}
.torna{font-family:var(--f-dati);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accento-t);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;align-self:flex-start}
.data-doc{font-family:var(--f-dati);font-size:13px;color:var(--muto);letter-spacing:.06em}

/* --- piede ---------------------------------------------------------------
   IL PIEDE E' PIU' POVERO DI QUELLO DEL MODELLO, e non per scelta.
   Su more.leads il piede era blu, e quel blu veniva contato sui pixel di una
   foto (8,7% dei pixel del disegno). Questa pagina quella foto non ce l'ha,
   e sotto --fondo #17150F non c'e' spazio per andare piu' scuri: il gradino
   successivo darebbe 1,06. Quindi il piede sale di un gradino invece di
   scendere, e si stacca con il filetto e con l'aria, non con il colore.
   Il filetto e' --filo-forte contro --superficie: 1,91, si vede.
   Il testo torna standard, --testo 13,91 e --muto-sup 6,60: il grigio del
   modello era stato alzato apposta per reggere sul blu, e senza blu quella
   deroga non serve piu'.
   Se un giorno Gabriele vuole un piede che si veda, serve una decisione
   nuova (per esempio il piede come blocco chiaro, che more.leads aveva
   scartato sul suo scuro), non un ritocco qui. */
.piede{background:var(--superficie);color:var(--testo);padding:56px 0 30px;border-top:1px solid var(--filo-forte)}
.piede-coda{border-top-color:var(--filo)}
.piede h3,.piede .titolino{color:var(--ink)}
.piede a{color:var(--ink)}
.piede a:hover{color:var(--accento-t)}
/* Il secondario del piede: il piede sta su --superficie, cioe' un piano
   sopra il fondo, e la regola d'uso dice che li' il secondario e'
   --muto-sup. --muto ci farebbe 4,64, che passa di misura, ma la regola e'
   una sola e vale ovunque si salga di un piano. */
.piede .et{color:var(--muto-sup)}
.piede strong{color:var(--ink)}
.piede-rete{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.piede-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.piede-coda{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--filo);
  font-size:13.5px;color:var(--muto-sup);display:flex;flex-direction:column;gap:6px;
}
/* Il marchio chiude la pagina. 44px: piu' piccolo dei 62 della testata,
   perche' qui e' una firma e non un'insegna. */
.marchio-piede{height:44px;width:auto;display:block;margin:0 auto 14px}

@media(max-width:900px){
  .rete--3,.rete--4{grid-template-columns:1fr}
  .rete--2{grid-template-columns:1fr}
  .piede-rete{grid-template-columns:repeat(2,1fr)}
  .sez{padding:96px 0}
  body{font-size:16px}
}
@media(max-width:560px){
  .piede-rete{grid-template-columns:1fr}
  :root{--passo:48px}
}

/* ==========================================================================
   ALLINEAMENTO AL CENTRO, ereditato dal modello (2026-09-04, T-260904-36)
   Vale per la landing (`main#top`) e per il piede. NON tocca l'informativa
   ne' la pagina di ringraziamento (`.documento`): sono testi lunghi da
   leggere, non da guardare, e li' il centrato lavora contro chi legge.

   Nota di merito, lasciata scritta perche' e' gia' costata una volta:
   il post-mortem del ridisegno Prisma (T-260821-07) ha attribuito il
   giudizio «senza anima» proprio a un blocco «TUTTO CENTRATO», che aveva
   spento la griglia a 12 colonne. Qui la scelta e' deliberata e dichiarata,
   non ereditata per inerzia.

   Centrare il testo non basta: se il blocco resta ancorato a sinistra, il
   testo centrato dentro un contenitore largo galleggia. Quindi si centra
   anche il BLOCCO: `margin-inline:auto` sulle colonne strette,
   `align-items:center` sulle pile, `justify-content:center` sulle file.
   ========================================================================== */

main#top,
.piede{text-align:center}

/* le colonne strette si centrano come blocco, non solo come testo */
main#top .stretta{margin-inline:auto}
main#top .filetto{margin-inline:auto}

/* file di elementi: dal bordo sinistro al centro */
main#top .comandi,
main#top .azioni,
main#top .misure,
main#top .impegno{justify-content:center}

/* Le celle avevano `text-align:left` scritto a mano: una dichiarazione
   esplicita batte l'ereditarieta', e la tabella era rimasta l'unica cosa
   allineata a sinistra della pagina. Trovato guardando, non misurando. */
main#top th,
main#top td{text-align:center}

/* le schede: il contenuto si impila al centro, e niente sborda */
main#top .riq,
main#top .prezzo{align-items:center}
main#top .riq > *,
main#top .prezzo > *{max-width:100%}

/* un elenco puntato centrato coi pallini a sinistra e' sbilenco:
   via i pallini e via il rientro */
main#top .prezzo ul{list-style:none;padding-left:0;align-items:center}
main#top .prezzo li{max-width:34ch}

/* le liste numerate diventano una pila: il numero sopra, il testo sotto.
   Con due colonne il testo si centrerebbe solo dentro la sua meta'. */
main#top .lista li{grid-template-columns:1fr;justify-items:center;gap:5px}
main#top .lista .indice,
main#top .lista .croce{padding-top:0}
main#top .lista li > span:last-child{max-width:60ch}

/* il modulo: etichette e comandi al centro, il testo che SI SCRIVE resta a
   sinistra, perche' un campo che si compila da centro e' scomodo, e non e'
   un testo della pagina ma un comando. */
main#top .modulo{align-items:center}
main#top .campo{width:100%}
main#top .campo input,
main#top .campo textarea,
main#top .campo select{text-align:left}
main#top .consenso{grid-template-columns:auto auto;justify-content:center;text-align:left;max-width:52ch}

/* il piede: le quattro colonne restano quattro, ma dentro si centrano */
.piede-lista{align-items:center}
.piede-coda{align-items:center}

/* TITOLO DI SCHEDA · 13/09. Il clamp di h3: 25 px al computer, 19 al
   telefono come prima. Resta legato a main#top: il marchio del piede, le
   pagine documento e il questionario restano a 19. */
main#top .titolino{font-size:clamp(19px,2vw,25px);line-height:1.2}
/* L'INDICE DENTRO IL TITOLO DI SCHEDA, nella 08 · dopo la verifica del
   mockup. «01 ·» era 13 px fissi: col titolo a 19 stava a 0,68 del titolo,
   col titolo a 25 scendeva a 0,52 e si leggeva come una nota. Adesso segue
   il titolo nella stessa proporzione, 0,68 (17 px al computer), e al
   telefono non scende sotto i 13 di prima. E il titolo diventa una fila
   sulla linea di base: l'indice da una parte, il testo dall'altra, cosi' la
   seconda riga di un titolo lungo («04 · Con quante persone...») riparte
   sotto il testo e non sotto l'indice. Il testo dopo l'indice e' testo nudo,
   senza tag: nella fila resta un pezzo solo e va a capo dentro di se'.
   L'indice non va mai a capo: nella fila si stringeva col titolo lungo, e
   «04 ·» finiva su due righe. */
main#top .titolino .indice{font-size:max(13px,.68em);white-space:nowrap}
main#top #il-criterio .titolino{display:flex;align-items:baseline;column-gap:.3em}

/* UNA COLONNA DI LETTURA · 13/09. I paragrafi di lettura della landing
   prendono una larghezza sola, 581 px: una colonna di .rete--2 (--colonna
   1180 meno il gap di 18, diviso due), la stessa della 02. La .stretta da
   sola, 66ch, li lasciava a 708 px a 1440. Restano fuori le battute
   (.tirata) e i capoversi grandi (.testo-g), che hanno la loro misura, e le
   due righe .eco, che stanno a 52ch e si bilanciano, cosi' non resta una
   parola sola in coda. Il :not(.eco) e' la prima differenza dalla regola di
   more.leads: qui i due .eco stanno dentro una .stretta, e senza di lui la
   regola della colonna (1,3,2) batterebbe quella dell'eco (1,1,1).
   Il riquadro della meta' non e' una .stretta e portava righe fino a 110
   caratteri: prende la stessa colonna, e il filo bianco dentro si stringe
   con i suoi paragrafi.
   L'ultima riga e' la seconda differenza: nella 12 l'ultimo capoverso sta
   in una .pila dentro la .stretta, col suo filo in cima, e senza questa
   riga restava largo 708 px, filo compreso, sotto un filo da 581.
   Un capoverso che sta su una riga sola non arriva a 581: il margine
   automatico, in una colonna flex, lo stringe sul suo testo. Col testo
   centrato non si vede; con quello a sinistra si', e per questo la variante
   M04-a rimette il margine a zero. Al telefono non cambia niente: la
   colonna e' gia' 346.
   CODE DI DUE PAROLE, dopo la verifica del mockup. Il `pretty` di Chrome
   toglie la parola sola in coda, non le due: a 581 px sette capoversi
   centrati, corti, chiudevano con due parole fra l'11 e il 22% della riga
   sopra («da solo.», «ci sentiamo.», «tu firmi.»...). Nella pagina portano
   `.bilancia`, e la seconda riga qui sotto gliela lascia fare: e' lo stesso
   selettore della colonna piu' la classe, quindi vince. Il capoverso della
   08 con l'a capo scritto a mano resta pretty: nella base, bilanciato,
   al telefono chiudeva con «manca.» da sola. */
main#top :is(p.stretta,.stretta > p):not(.tirata):not(.testo-g):not(.eco){max-width:calc((var(--colonna) - 18px) / 2);margin-inline:auto;text-wrap:pretty}
main#top :is(p.stretta,.stretta > p):not(.tirata):not(.testo-g):not(.eco).bilancia:not(:has(br)){text-wrap:balance}
main#top .eco{max-width:52ch;margin-inline:auto;text-wrap:balance}
main#top .riq--colorato > p{max-width:calc((var(--colonna) - 18px) / 2)}
main#top .stretta.pila > .pila{max-width:calc((var(--colonna) - 18px) / 2);margin-inline:auto}

/* IL TITOLO DI RIGA DEL CONFRONTO, al telefono · 13/09. Sotto i 640 ogni
   riga della tabella diventa una scheda, e il suo th ne e' il titolo: prende
   la mano del .titolino (Recursive 700, 19 px, interlinea 1,3), e fra una
   scheda e l'altra c'e' il passo della .pila, 28 px. Su more.leads questo
   titolo era uscito perche' la sua sezione stava sotto le 2,5 schermate; qui
   la 14 al telefono ne misurava 3,83 prima di questa regola (3.233 px su
   844), e la stessa regola lo fa entrare. Il fondo resta --superficie-2, e
   l'inchiostro ci fa 12,23:1. (1,1,3) batte il tbody th del foglio e quello
   della variante M03, se resta. */
@media(max-width:640px){
  main#top .tab-scorre--confronto tbody th{font-family:var(--f-tit);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.01em}
  main#top .tab-scorre--confronto tr{margin-bottom:28px}
}

/* ==========================================================================
   Ritocchi ereditati dai commenti sull'artifact del modello (2026-09-04)
   ========================================================================== */

/* «Sottotitoli»: la battuta staccata sotto un titolo e il capoverso di
   apertura di una sezione. Vanno nella mano dei titoli, non in quella del
   corpo, se no il salto fra titolo e testo e' troppo secco. */
.tirata,.testo-g.stretta,p.testo-g{font-family:var(--f-tit)}
.tirata{
  font-family:var(--f-testo);font-weight:600;
  font-size:clamp(21px,2.5vw,29px);line-height:1.3;text-wrap:balance;
  color:var(--ink);max-width:30ch;margin-inline:auto;
}
/* I 30ch sono tarati su frasi corte. Una chiusura di due periodi lunghi
   dentro quella misura si spezza in cinque righe e la battuta si perde: qui
   la gabbia si allarga, il corpo resta lo stesso. */
.tirata--larga{max-width:52ch}

/* Il titolo della sezione di apertura alla misura piu' grande. */
.h2--grande{font-size:clamp(34px,6.2vw,74px)}

/* I numeri delle trappole, da etichetta a cifra. */
.indice--grande{font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:0}

/* La scheda colorata: fondo pieno d'accento, e dentro si scrive BIANCO.
   Sostituisce il blocco chiaro solo dove serve gridare, non ovunque.
   Bianco dentro il rosso: 4,55. E' l'unico valore utile, vedi la nota sulla
   testata.
   Serve la stessa specificita' di `.sez--bianca .riq--pieno` (0,2,0): con il
   solo `.riq--colorato` (0,1,0) il bordo diventava d'accento e il fondo
   restava chiaro. Una classe che perde una guerra di specificita' non da'
   errore: fa meta' del suo lavoro, ed e' il modo peggiore di sbagliare. */
.riq--colorato,
.sez--bianca .riq--colorato,
.riq--pieno.riq--colorato{--fondo-riq:var(--accento);--bordo:var(--accento)}
.riq--colorato h3,.riq--colorato .titolino,
.riq--colorato strong,.riq--colorato b{color:var(--accento-in)}
.riq--colorato p,.riq--colorato li,.riq--colorato span{color:var(--accento-in)}
/* [USCITO] le tre righe gemelle per `[data-mondo="claude"] .riq--colorato`.
   Un selettore che non puo' piu' agganciare niente e' codice morto. */

/* LA SCHEDA SEGNATA · sorella di `.riq--colorato`, col segno invece che con
   l'accento. Qui il fondo E' --segno-pieno, e su questa palette segno e
   segno-pieno sono lo stesso valore: la sabbia #B5A98F e' gia' abbastanza
   chiara da fare da fondo di suo, come faceva la salvia nel mondo caldo del
   modello. Dentro ci si scrive scuro, --segno-in, 7,85:1.
   La regola di casa vale anche qui: dentro un fondo CHIARO si scrive scuro.
   E' l'unico posto della pagina dove non e' capovolta, perche' il rosso e'
   l'unico fondo scuro-medio della palette.
   Stessa specificita' di `.sez--bianca .riq--pieno` (0,2,0), per la ragione
   gia' scritta sopra a `.riq--colorato`. */
.riq--segnato,
.sez--bianca .riq--segnato,
.riq--pieno.riq--segnato{--fondo-riq:var(--segno-pieno);--bordo:var(--segno-pieno)}
.riq--segnato h3,.riq--segnato .titolino,
.riq--segnato strong,.riq--segnato b,
.riq--segnato p,.riq--segnato li,.riq--segnato span,
.riq--segnato .indice{color:var(--segno-in)}

/* I tre pulsanti del micro-impegno, colorati: contorno d'accento e testo
   d'accento finche' non li tocchi, pieni quando ne scegli uno.
   L'hover velato: il rosso al 10% sul fondo, esito #2B1811, e dentro
   --accento-t fa 6,00. */
.scelta input{accent-color:var(--accento)}
.scelta{border-color:var(--accento);color:var(--accento-t)}
.scelta:hover{background:rgba(224,48,30,.1);border-color:var(--accento-hover)}

/* ==========================================================================
   IL BANNER, ereditato dal modello (2026-09-04, T-260904-36)
   Chiuso si legge solo il titolo e il comando; aperto allunga la pagina con
   la sezione intera. E' un `<details>` nativo: si apre senza JavaScript,
   risponde a Invio e Spazio, e annuncia da se' aperto o chiuso a chi legge
   con uno screen reader. Un pannello fatto a mano con un `<div>` e una
   classe avrebbe richiesto tutti e tre a mano, e uno dei tre sarebbe saltato.
   ========================================================================== */

.sez--banner{padding:0}
.banner{width:100%}

.banner-testa{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 26px;
  padding:30px 22px;cursor:pointer;
  background:var(--superficie);
  transition:background .15s;
}
/* via il triangolino di sistema: il comando e' il riquadro a destra */
.banner-testa::-webkit-details-marker{display:none}
.banner-testa{list-style:none}
.banner-testa::marker{content:""}
.banner-testa:hover{background:var(--superficie-2)}
details[open] > .banner-testa{border-bottom:1px solid var(--filo)}

.banner-titolo{
  font-family:var(--f-marchio);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3.8vw,46px);line-height:1.05;letter-spacing:.005em;
  color:var(--ink);margin:0;
}
/* La parola in evidenza dentro il titolo del banner prende l'accento pieno.
   Su --superficie fa 3,53: passa perche' e' testo GRANDE (la misura non
   scende mai sotto i 28px, vedi la riga piu' giu'), soglia 3.
   Se un giorno il banner rimpicciolisce sotto i 24px, questo va portato a
   --accento-t, che sulla stessa superficie fa 5,71. */
.banner-titolo em{font-style:normal;color:var(--accento)}

.banner-comando{
  font-family:var(--f-testo);font-weight:600;font-size:15px;
  background:var(--accento);color:var(--accento-in);
  padding:12px 26px;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.banner-comando::after{content:"Si'"}
details[open] .banner-comando::after{content:"Chiudi"}

/* il corpo, quando e' aperto, prende il respiro di una sezione vera */
.banner > .dentro{padding:56px 0 76px}

@media(max-width:560px){
  .banner-testa{padding:24px 18px;gap:12px}
  .banner-comando{padding:11px 22px}
}

/* --- ritocchi del 04/09, terza tornata di commenti ----------------------- */

/* d2886ea5 · il banner piu' alto e la scritta piu' grande: chiuso deve
   fermare l'occhio, non passare per una riga di servizio. */
.banner-testa{padding:46px 22px;gap:16px 30px}
.banner-titolo{font-size:clamp(28px,5vw,62px)}
.banner-comando{font-size:17px;padding:15px 34px}
@media(max-width:560px){
  .banner-testa{padding:30px 18px;gap:14px}
  .banner-comando{font-size:15px;padding:12px 26px}
}

/* f2e17982 · il filo sotto i titoli delle schede e' il SEGNO: sabbia su
   --superficie fa 6,93, molto sopra la soglia dei tratti (3). Sottolineare
   con l'accento lo avrebbe fatto sembrare un comando, e non lo e'. */
.filo-segno{
  display:inline-block;
  border-bottom:3px solid var(--segno);
  padding-bottom:9px;
}

/* [USCITO] `.parola-claude`, `.voce-claude` e il suo hover. Erano il coral
   di Anthropic, e servivano a dire «di la' si cambia argomento» quando la
   sezione Claude era un mondo a parte dentro more.leads. Qui l'argomento e'
   Claude dalla prima riga, quindi non hanno piu' mestiere; e il coral e'
   comunque vietato dal brief §1. */

/* UNA PAROLA DENTRO UN TITOLO. Il nome dice `h1` per ragioni storiche: dal
   06/09 questi segnano UNA parola dentro un titolo qualunque.
   La scelta del colore non e' libera, segue il vocabolario dei segni:
   l'ACCENTO su cio' che deve SUCCEDERE, il SEGNO su cio' che uno ha gia' o
   su una tesi.
   Misure: l'accento sul fondo fa 4,01 e il segno 7,85. Sopra i 24px in
   grassetto la soglia e' 3, quindi passano tutti e due, e h1 non scende mai
   sotto i 31px. */
.h1-accento{color:var(--accento)}
.h1-segno{color:var(--segno)}
/* `.h1-viola` resta definita e inutilizzata, come sul modello: il nome dice
   un colore che qui non esiste piu', ma cancellarla romperebbe l'HTML che
   la usasse. Punta al segno come la sua gemella. */
.h1-viola{color:var(--segno)}
/* [USCITO] `.h1-coral`. Terza copia del coral di Anthropic. */

/* [TORNATA il 12/09] LA FASCIA DEI LOGHI, `.fascia`, `.giostra` e tutto il
   suo apparato. Era uscita il 09/09; e rientrata come sezione 03 perche
   Gabriele vuole le stesse sezioni di more.leads. L'etichetta dice «Con chi
   ho lavorato», mai «clienti» (brief §4.2): i quattro marchi sono la
   carriera di Gabriele, non le cinque sessioni di formazione.
   Le regole stanno in fondo al foglio, nel blocco MONTAGGIO v3, con le due
   cose che chi la tocca deve sapere: i #000 della maschera sono canale alfa
   e non si convertono, e i quattro SVG hanno il grigio scritto dentro
   (riscritto a #8A8A86, il --muto di qui). */

/* ==========================================================================
   SPUNTE E CROCI
   Due segni, e non sono un secondo accento. Misurati adesso, non scelti a
   occhio:
     --si   #4ADE80 · 10,47:1 sul fondo · 9,24 su superficie · 8,12 su sup-2
     --no-c #A8A69E ·  7,49:1 sul fondo · 6,60 su superficie · 5,80 su sup-2
   Passano la soglia del TESTO (4,5), non solo quella dei tratti (3), quindi
   reggerebbero anche se un giorno portassero una parola.

   IL ROSSO SEMANTICO E' USCITO, e non per contrasto. #FF6B6B sul fondo
   nuovo fa 6,58 e passerebbe comodo: lo boccia la TINTA. Sta a 0 gradi,
   l'accento a 6: sei gradi di distanza. Il foglio di more.leads aveva
   fissato 50 gradi come distanza minima perche' due segni piccoli non si
   confondano, e --accento-t sarebbe stato pure peggio, 2 gradi. Verde 142,
   accento 6: 136 gradi, comodo. La croce diventa neutra, saturazione 5%,
   cioe' fuori dalla ruota.
   La coppia non e' piu' «verde contro rosso», e' «acceso contro spento»:
   per un elenco di «non serve quando» e' anche piu' giusto, perche' non e'
   un errore, e' un'esclusione. E il rosso resta una cosa sola su tutta la
   pagina: la richiesta.

   Costa qualcosa, e si compensa senza colore: la croce perde peso visivo, e
   prende un tratto piu' spesso della spunta, 3.2 contro 2.6.
   Il colore non e' mai l'unica informazione: nella tabella l'intestazione di
   colonna dice gia' «Passa» e «Non passa», e nelle due meta' il titolo dice
   «Serve quando» e «Non serve quando». Per questo le SVG sono aria-hidden.
   ========================================================================== */
/* Doppione voluto del :root in testa: i due token stanno anche li', e questa
   riga resta dove il modello l'aveva messa cosi' che il blocco spunte-croci
   si legga tutto insieme. Stessi valori, nessuna sorpresa nella cascata. */
:root{--si:#4ADE80;--no-c:#A8A69E}
.spunta,.croce-r{width:20px;height:20px;flex:none;display:inline-block;
  vertical-align:-4px;margin-inline-end:8px;
  fill:none;stroke-linecap:butt;stroke-linejoin:miter}
.spunta{stroke:var(--si);stroke-width:2.6}
.croce-r{stroke:var(--no-c);stroke-width:3.2}
/* dentro la tabella il segno sta sulla prima riga del testo, non a meta'
   cella: le celle sono alte e un segno centrato finirebbe nel vuoto */
main#top td .spunta,main#top td .croce-r{vertical-align:-3px}

/* Le due meta'. Non e' una .rete--2 qualsiasi: ognuna porta il suo filo
   colorato in alto, che e' il modo del kit di dire «questo blocco e' di
   questo tipo» senza riempirlo di colore (regola A, contorno mai
   riempimento sfumato). */
.due-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:center}
.meta{background-color:var(--superficie);border:1px solid var(--filo);
  border-top-width:3px;padding:26px 24px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.meta--si{border-top-color:var(--si)}
.meta--no{border-top-color:var(--no-c)}
.meta .titolino{display:flex;align-items:center;justify-content:center;gap:2px}
.meta p{margin-block-start:12px}
@media(max-width:720px){
  .due-meta{grid-template-columns:1fr}
}


/* ==========================================================================
   DM MONO DENTRO LE SCHEDE · scelto da Gabriele il 05/09.
   Le descrizioni delle schede vanno in monospaziato. E' una scelta forte: un
   mono a corpo di lettura e' piu' largo e piu' lento da leggere di un
   grottesco, e su paragrafi lunghi si sente. Qui pero' le schede portano
   testi corti, e il mono le fa somigliare a una scheda tecnica invece che a
   un blocco di prosa: e' lo stesso mestiere che fa gia' nelle etichette.
   La misura scende a 15px e l'interlinea sale: DM Mono ha l'occhio piccolo,
   e alla misura del corpo normale sembrerebbe piu' piccolo di quello che e'.
   ========================================================================== */
.riq p,.meta p,.prezzo p{font-family:var(--f-schede);font-size:15px;line-height:1.62;
  letter-spacing:-.01em}
.riq .misura,.riq .indice{font-family:var(--f-dati)}
@media(max-width:560px){.riq p,.meta p{font-size:14.5px}}

/* ==========================================================================
   IL CAROSELLO DEL CASO STUDIO · 05/09, commento 56874d50.
   Nessuna riga di JavaScript: e' una striscia che scorre in orizzontale con
   scroll-snap, e le schede si agganciano una alla volta.
   Le pastiglie sono ANCORE vere, non pulsanti finti: portano alla scheda col
   suo id, quindi funzionano da tastiera, funzionano col tasto indietro e
   funzionano anche se lo scorrimento morbido e' spento.
   Nota per chi impagina: il brief §8.1 dice che i cinque casi studio vanno
   costruiti con la struttura pronta e i segnaposto `[DA GABRIELE: ...]`
   espliciti. Le schede ci sono, i contenuti no, e non si inventano.
   ========================================================================== */
.carosello{position:relative}
/* Due schede alla volta sul largo, una sul telefono: se ci stessero tutte e
   quattro non sarebbe un carosello, sarebbe una griglia. */
.carosello-nastro{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 8px);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0 0 14px;
  scrollbar-color:var(--filo-forte) transparent}
.carosello-scheda{scroll-snap-align:start;background-color:var(--superficie);
  border:1px solid var(--filo);padding:24px 24px 22px;display:flex;flex-direction:column;gap:12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.carosello-conta{font-family:var(--f-dati);font-size:11.5px;letter-spacing:.14em;color:var(--accento-t)}
.carosello-scheda p{font-family:var(--f-schede);font-size:15px;line-height:1.62;letter-spacing:-.01em;margin:0}
.carosello-scheda .misura{align-self:center;margin-top:auto}
.carosello-passi{display:flex;gap:8px;justify-content:center;margin-top:16px}
.carosello-passi a{font-family:var(--f-dati);font-size:12px;letter-spacing:.1em;color:var(--muto);
  text-decoration:none;border:1px solid var(--filo);padding:7px 12px}
.carosello-passi a:hover,.carosello-passi a:focus-visible{color:var(--accento-t);border-color:var(--filo-forte)}
@media(max-width:640px){
  /* 26px di padding per lato, su una colonna da 316, valgono circa 6
     caratteri per riga: meta' del divario fra la misura delle schede e
     quella del corpo. Il taglio non tocca la cornice: il clip-path sta su
     ::before e ::after con «inset», e non dipende dal padding. */
  .riq{padding:26px 16px 24px}
  .carosello-scheda{padding-left:16px;padding-right:16px}
  .carosello-nastro{grid-auto-columns:88%}
  /* Sul telefono i passi sono il modo con cui si cambia scheda, e
     misuravano 43x36: sotto i 44px consigliati per un bersaglio da toccare.
     Il testo resta 12px, cresce l'area, che e' quello che conta al dito. */
  .carosello-passi a{min-width:44px;min-height:44px;padding:0 12px;
    display:flex;align-items:center;justify-content:center}
}

/* Il testo della colonna «io» nella tabella del confronto. Lo porta il
   SEGNO, che qui segna «questa e' la mia», cioe' esattamente distinguere
   senza chiamare. Dentro la cella tinta (#3A231B) fa 6,29, e su
   --superficie-2, dove la cella non e' tinta, 6,09. */
/* 10/09, Gabriele: «colore font arancio segnale». Il colore della palette
   che porta testo e sta verso l arancio e --accento-t (#FF6A55): il rosso
   segnale pieno (#E0301E) su --superficie-2 non passa per un testo da 11px.
   Il contrasto lo misura il collaudo dal vivo. */
.mia-t{color:var(--accento-t)!important}

/* Un'intestazione che serve a chi ascolta e non a chi guarda. Non
   display:none, che la toglierebbe anche ai lettori di schermo: resta nel
   documento, larga un pixel e fuori dal ritaglio. */
.solo-voce{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* I due cappelli. Trapezio, banda, tesa: tre rettangoli e un taglio dritto,
   nessuna curva, come tutto il resto. Stanno in cima alla scheda e al
   centro, e ognuno dei due sta sul fondo che lo fa vedere. */
.cappello{display:block;width:64px;height:40px;margin:0 auto 12px}

/* La lista con i segni al posto dei numeri.
   70541c9e: le spunte erano staccate dal testo e sembravano un elenco
   puntato qualsiasi. A 7px il segno appartiene alla riga.
   05/09 09:26 · il segno sta DENTRO la riga, non accanto. Prima era un
   elemento flex fratello del testo: si appoggiava al bordo sinistro del
   blocco mentre la prima riga si centrava dentro il blocco, e fra i due
   restava un buco largo quanto la riga era corta. Adesso la SVG e' dentro lo
   span, prima della prima parola: si centra insieme a lei e non puo' piu'
   staccarsi, qualunque lunghezza abbia il testo. */
.lista--segni li{display:block}
.lista--segni .spunta,.lista--segni .croce-r{margin:2px 0 0;vertical-align:0}
.riq--pieno .lista--segni span{color:var(--blocco-testo)}
/* Dentro il blocco chiaro la croce si scambia, come fa l'accento: sulla
   carta --no-c farebbe 2,11 e sparirebbe. --blocco-no vale --blocco-muto,
   5,52 sulla carta. */
.riq--pieno .croce-r{stroke:var(--blocco-acc)} /* rosse dal 14/09 su commento di Gabriele, prima neutre */
/* Il filetto sotto la frase che chiude la scheda chiara. Non e' decorazione:
   e' la riga in cui Gabriele si impegna, e va vista prima di essere letta. */
.filo-no{display:inline-block;border-bottom:3px solid var(--blocco-no);padding-bottom:5px;margin-top:4px}


/* ==========================================================================
   LE FOTO · 05/09, commento c10345d0.
   Angolo tagliato come tutto il resto, e nessuna cornice sfumata (regola A).
   La didascalia porta il senso: senza, e' una bella foto e basta.
   ========================================================================== */
.foto{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center}
/* La foto ridotta · 06/09, su commento di Gabriele sul telefono.
   Non e' un capriccio di gusto, e' una proporzione: un 4:3 e un 16:9 a
   colonna piena (1180) vengono alti 885 contro 664, cioe' il 33% in piu' a
   parita' di larghezza. Al 70% scende a 826x620, e le due foto della pagina
   tornano a pesare uguale.
   Solo sopra i 640px: sul telefono la larghezza e' gia' poca, e ridurla
   ancora del 30% farebbe un francobollo. */
@media (min-width:641px){
  .foto--media{width:70%;margin-inline:auto}
}
/* La foto sta dentro una cornice, come le schede. Il <picture> fa da telaio:
   prende il colore del bordo e 1,5px di padding, e l'immagine dentro ha lo
   stesso taglio rimpicciolito. Il `border` sull'<img> non poteva funzionare:
   il clip-path del telaio se lo mangiava all'angolo. */
.foto picture{display:block;width:100%;background:var(--bordo);padding:1.5px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.foto img{display:block;width:100%;height:auto;border:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16.5px),calc(100% - 16.5px) 100%,0 100%)}
/* Questo blocco sta QUI e non lassu' con .segnaposto per una ragione sola:
   `.foto--ritratto img` e `.foto img` hanno la STESSA specificita' (0,1,1),
   quindi vince chi viene dopo. Scritto piu' in alto, `height:auto` di .foto
   lo batteva e l'immagine tornava alta 777 mentre il testo di fianco ne
   faceva 340. Non dava errore: faceva meta' del suo lavoro. E' la terza
   volta che questo file paga la stessa trappola. */
/* `height:100%` sull'immagine da solo NON basta, ed e' un giro a vuoto che
   si vede solo misurando: in una griglia la riga e' alta quanto il suo
   elemento piu' alto, e se l'immagine porta la sua altezza naturale e' lei a
   decidere. L'immagine va tolta dal calcolo dell'altezza, e si toglie
   mettendo il <picture> in assoluto: cosi' la riga la decide il TESTO. */
.foto--ritratto{position:relative;height:100%;min-height:340px}
.foto--ritratto picture{position:absolute;inset:0;display:block}
/* L'immagine sta nel FLUSSO, non in assoluto, e non e' un dettaglio: per un
   elemento in assoluto il blocco contenitore e' il padding box dell'antenato,
   quindi `inset:0` copre il padding, cioe' la cornice da 1,5px, che c'era nel
   foglio e non si vedeva a schermo (misurato 0/0/0/0 il 07/09). */
.foto--ritratto img{position:static;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%}
@media(max-width:860px){
  /* Colonna sola: nessuno con cui pareggiarsi. Una sorgente 16:9 a 331px
     verrebbe alta 186, cioe' una striscia. Un 4:3 la porta a 248 tagliando
     solo i lati. */
  .foto--ritratto{position:static;height:auto;min-height:0}
  .foto--ritratto picture{position:static;height:auto}
  .foto--ritratto img{position:static;height:auto;aspect-ratio:4/3}
}

.foto figcaption{font-family:var(--f-dati);font-size:12px;letter-spacing:.06em;
  color:var(--muto);text-align:center}
/* Il credito della banca immagini: obbligatorio in pagina, quindi VISIBILE.
   Piccolo, non nascosto: nasconderlo sarebbe come non scriverlo.
   Sta nel piede, che e' su --superficie: li' il secondario e' --muto-sup,
   6,60. Sul modello era un grigio alzato a mano per reggere sul blu, e
   quella deroga qui non serve. */
.crediti-foto{color:var(--muto-sup)}

/* La foto dentro una colonna della rete: si allinea in alto col testo, non
   al centro verticale, se no il primo rigo e il bordo della foto non
   cominciano insieme e la coppia sembra storta. */
.rete .foto{align-self:start}
/* Il testo accanto a una foto si centra in verticale: la colonna del testo
   e' piu' corta, e allineata in alto lascia un vuoto lungo quanto la foto. */
.pila--accanto{align-self:center}

/* Le due risposte sotto una domanda: la riga intera si centra, segno
   compreso. Non basta text-align, perche' il li e' un flex: senza
   justify-content il segno resta incollato a sinistra e il testo si centra
   da solo dentro quello che avanza, cioe' due centrature diverse sulla
   stessa riga. */
.lista--centrata li span{text-align:center}

/* ==========================================================================
   FILETTI SOTTO UNA PAROLA · 05/09, commento 1e43407e.
   I due filetti dicono la stessa cosa che dice la frase, ma con il colore:
   il SEGNO su cio' che uno ha gia', l'ACCENTO su cio' che deve succedere.
   Non e' una decorazione: e' la stessa frase detta due volte, una a parole e
   una a colori.
   Non riuso .filo-segno: quello ha 9px di stacco perche' sta sotto un titolo
   di scheda. Dentro una riga di testo la riga cadrebbe troppo bassa e
   toccherebbe la riga dopo.
   Misure sul fondo: segno 7,85 e accento 4,01. Sono tratti, la soglia e' 3.
   ========================================================================== */
.filo-riga{display:inline-block;border-bottom:3px solid;padding-bottom:4px}
.filo-riga--segno{border-bottom-color:var(--segno)}
.filo-riga--accento{border-bottom-color:var(--accento)}

/* Sottolineare una FRASE, non una parola. Qui non va il filetto di prima:
   quello e' un bordo sotto un blocco, e una frase che va a capo si
   porterebbe la riga solo sotto l'ultimo rigo. `text-decoration` invece
   segue ogni rigo, che e' quello che serve quando la battuta si spezza sul
   telefono. Spessore e stacco sono gli stessi del filetto, cosi' i due modi
   si vedono uguali: 3px, e la riga a cinque pixel dal testo. */
.filo-frase{text-decoration-line:underline;text-decoration-thickness:3px;
  text-underline-offset:5px;text-decoration-skip-ink:none}
.filo-frase--segno{text-decoration-color:var(--segno)}
.filo-frase--accento{text-decoration-color:var(--accento)}

/* ==========================================================================
   SFONDI DI SEZIONE, ereditati dal modello (2026-09-07, T-260907-07)
   Regole di questo telaio:
   · l'immagine e' un <img> dentro <picture>, non un background: cosi' ha il
     srcset (tre larghezze) e il lazy. Un background le perde tutte e due.
   · sta DIETRO al contenuto con z-index negativo, mai in opacity:0. Un
     elemento a opacita' zero resta «visibile» per i controlli e sparisce per
     chi guarda: e' il difetto opposto di quello che serve.
   · il velo e' un gradiente, non un colore piatto: si stringe al centro,
     dove sta la colonna del testo, e si apre ai bordi.
   · isolation:isolate tiene lo z-index negativo dentro la sezione, senza
     farlo scivolare sotto lo sfondo della pagina.
   Il velo e' costruito su color-mix con var(--fondo), quindi segue il token
   da solo: cambiando la palette e' cambiato anche lui, senza toccarlo.
   ========================================================================== */
.sez--fondo{position:relative;isolation:isolate;overflow:hidden}
.sfondo-sez{
  position:absolute;inset:0;z-index:-2;pointer-events:none;display:block;
}
.sfondo-sez img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;
}
.sez--fondo::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--fondo) 62%, transparent) 0%, color-mix(in srgb, var(--fondo) 90%, transparent) 26%,
    color-mix(in srgb, var(--fondo) 90%, transparent) 74%, color-mix(in srgb, var(--fondo) 62%, transparent) 100%);
}

/* Un disegno fitto sotto il testo vuole piu' velo di una texture quasi tutta
   scura di suo. Due dosi, non una. */
.sez--fondo.fondo--fitto::before{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--fondo) 70%, transparent) 0%, color-mix(in srgb, var(--fondo) 94.5%, transparent) 22%,
    color-mix(in srgb, var(--fondo) 94.5%, transparent) 78%, color-mix(in srgb, var(--fondo) 70%, transparent) 100%);
}

/* L'apertura: il testo sta in alto e la texture vive in basso, quindi il
   velo scende invece di stringersi. In fondo si apre e si vede intera. */
.sez--prima.sez--fondo::before{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--fondo) 90%, transparent) 0%, color-mix(in srgb, var(--fondo) 86%, transparent) 46%, color-mix(in srgb, var(--fondo) 72%, transparent) 100%);
}


/* Uno sfondo che si scioglie nelle sezioni vicine (la tastiera, 14/09): in
   alto e in basso il velo torna fondo pieno, così la sezione non fa
   cornice, e al centro tiene la colonna del testo all'88%. */
.sez--fondo.fondo--dissolto::before{
  background:
    linear-gradient(to bottom, var(--velo) 0%, transparent 24%, transparent 76%, var(--velo) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--velo) 50%, transparent) 0%, color-mix(in srgb, var(--velo) 88%, transparent) 30%,
      color-mix(in srgb, var(--velo) 88%, transparent) 70%, color-mix(in srgb, var(--velo) 50%, transparent) 100%);
}
/* Il velo prende il colore della sezione: il fondo, o il grigio della
   sezione sollevata (la 05, 14/09), che così resta grigia ai bordi. */
.fondo--dissolto{--velo:var(--fondo)}
.sez--bianca.fondo--dissolto{--velo:var(--superficie)}
/* Al telefono la colonna del testo è larga quanto lo schermo: il velo resta
   all'88% su tutta la larghezza invece di aprirsi al 50% ai lati. Audit del
   14/09: la croce di «Bad» nella 05 scendeva a 2,8:1 sopra le scritte. */
@media(max-width:640px){.sez--fondo.fondo--dissolto::before{background:
  linear-gradient(to bottom, var(--velo) 0%, transparent 24%, transparent 76%, var(--velo) 100%),
  linear-gradient(color-mix(in srgb, var(--velo) 88%, transparent), color-mix(in srgb, var(--velo) 88%, transparent))}}

/* L'apertura a puntini (14/09, Gabriele: «puntini sfondo hero»). La griglia è
   CSS e non un'immagine: nitida a ogni densità e senza peso, col punto
   nell'inchiostro della pagina al 24%. Sopra, un velo ellittico la spegne
   dietro al testo, e in alto e in basso sfuma nel fondo. */
.sez--puntini{
  background-image:
    radial-gradient(ellipse 62% 55% at 50% 50%, color-mix(in srgb, var(--fondo) 70%, transparent) 0%, transparent 100%),
    linear-gradient(to bottom, var(--fondo) 0%, transparent 16%, transparent 84%, var(--fondo) 100%),
    radial-gradient(circle, color-mix(in srgb, var(--ink) 24%, transparent) 0 1px, transparent 1.6px);
  background-size:100% 100%, 100% 100%, 14px 14px;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, repeat;
}

/* Sotto i 720px il disegno fine diventa poltiglia e ruba solo banda: resta
   la texture larga, che a quella scala si legge ancora, e il resto si
   spegne. */
@media(max-width:720px){
  .fondo--fitto .sfondo-sez{display:none}
  .fondo--fitto::before{background:none}
}

/* ==========================================================================
   IL BLOCCO CHIARO, cioe' la sezione che sta a parte.
   Il nome della classe resta `.sez--blu` per non toccare l'HTML del modello,
   ma il blu qui NON esiste: su more.leads veniva contato sui pixel di un
   disegno che questa pagina non ha.

   Su una pagina tutta scura il pattern interrupt e' il COLORE, e questa
   palette possiede una sola altra superficie vera, la carta #F2EEE6. Il
   resto e' aria: fra --fondo e --superficie corrono 1,13:1, che nessuno
   vede. Quindi il pattern interrupt e' la carta, 15,77:1 contro il fondo.

   Dentro il blocco l'accento si inverte con lui, ed e' la trappola gemella
   di quella del pulsante: il rosso base sulla carta fa 3,94 e non passa come
   testo, il rosso-t crolla a 2,44, sotto perfino la soglia dei tratti. Li'
   comanda --blocco-acc, 5,50, con il bianco dentro a 6,36.
   ========================================================================== */
.sez.sez--blu{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--blocco);
  border-top:0;                      /* 13/09: stacca la carta, niente filo (FILI E FILETTI) */
  color:var(--blocco-testo);
  --ink:var(--blocco-ink);           /* 15,77:1 */
  --testo:var(--blocco-testo);       /* 10,14:1 */
  --muto:var(--blocco-muto);         /*  5,52:1 */
  --bordo:var(--blocco-bordo);       /*  3,55:1 */
  --tratto:var(--blocco-bordo);
  --accento-t:var(--blocco-acc);     /*  5,50:1 */
  --accento:var(--blocco-acc);
  --accento-hover:var(--blocco-hover);
  --si:var(--blocco-si);
  --no-c:var(--blocco-muto);
  /* --- ESTENSIONE, e la dichiaro perche' non viene dalla PALETTE §6: e' una
     decisione mia del 09/09, presa su una misura.
     Il §6 rimappa l'inchiostro e gli accenti ma lascia stare le SUPERFICI, e
     dentro il blocco chiaro le superfici scure diventano una trappola muta:
     una `.riq` qui dentro terrebbe --superficie #23211B come fondo mentre il
     testo scende a --blocco-testo #3A3831, cioe' 1,37:1. Idem
     `.scheda-tit::after` (che usa --fondo, 1,56:1), `.tab-scorre`, `.meta`,
     `.carosello-scheda`, `.campo input`. Nessuna di queste da' errore: fanno
     meta' del loro lavoro, che e' il modo peggiore di sbagliare.
     Rimappo quindi anche le superfici, e SOLO su token che esistono gia':
     non invento nessun colore nuovo. Dentro il blocco la pagina e' carta, le
     schede sono carta, e a separarle e' la cornice --blocco-bordo (3,55),
     che e' esattamente la regola A: contorno, mai riempimento. */
  --fondo:var(--blocco);
  --superficie:var(--blocco);
  --superficie-2:var(--blocco);
  --filo:var(--blocco-filo);           /* 1,28:1 sulla carta, si vede */
  --filo-forte:var(--blocco-filo-forte); /* 1,60:1 */
  --muto-sup:var(--blocco-muto);       /* 5,52:1 */
  /* Il segno sulla carta farebbe 2,01 e sparirebbe. Qui lo porta il neutro
     scuro, che passa come testo E come tratto: 5,52. Resta un segno, cioe'
     distingue senza chiamare, e non e' l'accento. */
  --segno:var(--blocco-muto);
  --segno-pieno:var(--blocco-muto);
  --segno-in:var(--blocco);            /* 5,52:1 dentro il segno pieno */
  /* --accento-in resta #FFFFFF e non si tocca: dentro --blocco-acc fa 6,36,
     dentro --blocco-hover 8,60. E' l'unico token della coppia che vale
     uguale su tutte e due le facce della pagina. */
}
.sez--blu.fondo--capovolto .sfondo-sez img{transform:rotate(180deg)}

/* [USCITO] `.sez--blu::before`, il velo scuro sopra l'immagine di fondo.
   Serviva a scurire un disegno che passava dietro il titolo su un fondo blu.
   Qui la sezione e' carta piena: un velo scuro sopra la carta la
   spegnerebbe, e non c'e' nessuna immagine da domare. */

/* Il filetto di apertura, dentro il blocco chiaro, va all'inchiostro: e' il
   valore piu' forte che la carta possiede, 15,77:1, e un filetto e' un
   tratto. Il segno rimappato ci farebbe 5,52, che pure basterebbe, ma qui il
   filetto apre il capitolo che stacca dal resto della pagina e deve essere
   il piu' netto dei due. */
.sez--blu .filetto{background:var(--ink)}

/* Chiesto sull'artifact il 07/09: il carattere dei titoli sulla frase-perno
   della sezione. Col carattere del corpo si perdeva in mezzo agli altri
   paragrafi. Solo qui: `.tirata` sta anche altrove. */
.in-tit{font-family:var(--f-tit);letter-spacing:-.01em;line-height:1.35}
.tirata.in-tit{line-height:1.16}

/* La cornice dentro il blocco chiaro: il grigio del fondo scuro sparirebbe
   sulla carta, quindi qui la cornice e' --blocco-bordo, 3,55. La riga e' un
   doppione del token gia' dichiarato qui sopra: resta perche' sul modello
   stava qui, e cosi' chi cerca `--bordo` dentro `.sez--blu` lo trova due
   volte e non zero. */
.sez--blu{--bordo:var(--blocco-bordo)}

/* Immagini dentro un riquadro: la scheda fa gia' da cornice, quindi qui
   serve solo che stiano nella loro colonna. */
.riq picture{display:block;width:100%}
.riq img{display:block;width:100%;height:auto}

/* Chiesto sull'artifact: il nome della cosa piu' grande del titolo della
   sezione. L'h2 arriva a 42px, quindi qui si parte piu' su. */
.filo-segno--grande{font-size:clamp(30px,4.4vw,52px);line-height:1.05}

/* ==========================================================================
   SCHEDE PICCOLE · 2026-09-07
   Stesso meccanismo di cornice delle schede grandi: due strati con lo stesso
   poligono, il secondo rientrato di 1,5px, cosi' il bordo segue anche le
   diagonali. Taglio 10px invece di 16: sono elementi piu' piccoli.
   ========================================================================== */

/* Il titolo (o la riga) dentro una scheda: si stringe al testo invece di
   prendere tutta la colonna, se no non e' una scheda, e' una fascia. */
.scheda-tit{
  position:relative;isolation:isolate;
  width:fit-content;max-width:100%;margin-inline:auto;
  padding:18px 26px;
}
.scheda-tit::before,.scheda-tit::after{content:"";position:absolute;pointer-events:none}
.scheda-tit::before{inset:0;z-index:-2;background:var(--bordo);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.scheda-tit::after{inset:1.5px;z-index:-1;background:var(--fondo);clip-path:polygon(0 0,calc(100% - 8.5px) 0,100% 8.5px,100% 100%,8.5px 100%,0 calc(100% - 8.5px))}
/* Dentro il blocco chiaro il fondo della scheda e' la carta, perche' li'
   --fondo e' rimappato a --blocco: la scheda si stacca con la cornice, non
   col colore. Sul modello questa riga rimetteva il fondo scuro sopra il blu,
   e senza il rimappaggio qui sopra sarebbe stata testo scuro su carta scura,
   1,56:1. */
.sez--blu .scheda-tit::after{background:var(--fondo)}
.scheda-tit>*{margin:0}

/* Le quattro colonne del piede. Piu' strette di respiro delle schede grandi:
   li' dentro ci sono tre righe di link, non un discorso. */
.riq--piede{
  position:relative;isolation:isolate;padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:6px;text-align:left;
}
.riq--piede::before,.riq--piede::after{content:"";position:absolute;pointer-events:none}
.riq--piede,.riq--piede *{text-align:left}
.riq--piede .piede-lista{align-items:flex-start}
.riq--piede::before{inset:0;z-index:-2;background:var(--bordo-piede);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.riq--piede::after{inset:1.5px;z-index:-1;background:var(--fondo-piede);clip-path:polygon(0 0,calc(100% - 8.5px) 0,100% 8.5px,100% 100%,8.5px 100%,0 calc(100% - 8.5px))}

/* La scheda dentro il piede. Sul modello il piede era blu e la scheda un blu
   piu' scuro con la cornice azzurra. Qui il piede sta su --superficie e la
   scheda sale a --superficie-2: lo stacco fra i due e' 1,14, che nessuno
   vede, quindi la scheda la tiene in piedi la CORNICE, --bordo contro
   --superficie-2, 3,04. E' di misura, ed e' il numero che dice perche' quel
   filo non si puo' assottigliare. */
.piede{--bordo-piede:var(--bordo);--fondo-piede:var(--superficie-2)}

@media(max-width:560px){
  .scheda-tit{padding:14px 18px}
  .riq--piede{padding:16px 16px 14px}
}

/* Le immagini degli schemi hanno gia' la loro cornice, disegnata dentro
   l'immagine e nello stesso stile (angoli tagliati, filo grigio). Metterle
   dentro una scheda che ne ha un'altra faceva due cornici concentriche,
   segnalato sull'artifact come «effetto matrioska», e giusto. Qui resta solo
   il telaio che tiene insieme immagine ed etichetta.
   Nota per le due mappe A/B del brief §6: si disegnano fuori di qui, quindi
   il loro colore non passa da questi token. Se devono stare in riga con la
   pagina devono atterrare su --fondo #17150F, --tratto #737069, --accento
   #E0301E e --segno #B5A98F, e la verifica si fa sull'immagine finita
   leggendo i pixel, non sul prompt. */
.schema{display:flex;flex-direction:column;gap:12px;align-items:center}
.schema picture{display:block;width:100%}
.schema img{display:block;width:100%;height:auto}

/* L INTRO · 10/09. Tornata col marchio MS. Video di 4 s del marchio che si
   compone, poi il velo sfuma e sotto c e il sito. Il video e RIGENERATO sul
   fondo #17150F (era il timore del 09/09: il file di MORE.leads finiva su un
   nero diverso), e la dissolvenza la fa il CSS una volta sola. */
.velo{position:fixed;inset:0;z-index:9990;background:var(--fondo);
  opacity:1;transition:opacity .62s cubic-bezier(.4,0,.2,1)}
.velo--via{opacity:0;pointer-events:none}
.velo__v{width:100%;height:100%;object-fit:cover;display:block}
html.velo-fermo{overflow:hidden}
/* Chi ha chiesto meno movimento non vede il video: entra dritto nel sito. */
@media (prefers-reduced-motion:reduce){.velo{display:none}}

/* Il ritratto nella chiusura. 280px: deve dare una faccia al comando che sta
   sotto, non prendersi la scena, perche' a piena colonna diventerebbe una
   copertina e il pulsante finirebbe sotto la piega.
   La cornice e' il grigio freddo del modello sostituito dalla sua gemella
   calda: 7,49:1 sul fondo, molto sopra la soglia dei 3 di un tratto. */
.foto--io{width:280px;margin:0 auto 22px;--bordo:#A8A69E}
@media(max-width:560px){.foto--io{width:200px;margin-bottom:18px}}

/* --- montaggio della v2 (T-260910-17): regole nuove dei blocchi ------------ */
/* TESTATA */
/* TESTATA · il pulsante sempre a schermo alto 44px anche sul telefono.
   Fra 320 e 560 era alto 42-43px: la regola dei 42 sta sotto i 480 e quella
   dei 43 fino a 560, quindi la soglia qui e 560 (revisione del 10/09). */
@media (max-width:560px){.testata .bottone{min-height:44px;display:inline-flex;align-items:center}}

/* GA */
/* GA · 01 (#apertura) · il titolo su una riga.
   L'ELEMENTO VISIVO del copy v2 vuole il titolo «nell'unico corpo fuori
   scala di tutta la pagina, su una riga». Il titolo nuovo non ha la barra,
   quindi niente <br>; ma al tetto di `.h2--grande` (74px) le sue sette
   parole in Recursive sono larghe 1443px, la colonna ne da' 1180
   (--colonna), e `text-wrap:balance` lo spezza in due righe. Misurato il
   10/09 con Chrome headless, foglio e font veri: due righe a 1424, 1264 e
   1084 di finestra.
   1180 / 1443 x 74 = 60,5px: il tetto scende a 60, e il 4,6vw lo tiene su
   una riga anche quando la finestra e' piu' stretta della colonna piena.
   Rimisurato con questa riga, anche con una barra di scorrimento da 17px:
   una riga da 740 a 1440 di finestra, e a 60px il titolo e' largo 1170 su
   1180. Sotto, al minimo di 34px che resta quello di prima, va a capo da
   solo: due righe fino a 640, tre sui telefoni come senza questa riga,
   perche' sette parole a 375 non stanno su una riga a nessun corpo
   leggibile. Resta il corpo piu' grande della pagina: dopo vengono l'h2 e
   `.indice--grande`, a 42px.
   Legata a `.sez--prima` e a `.h2--grande`, che stanno solo su questa
   sezione e su questo h1. (0,2,0) vince su `.h2--grande` (0,1,0) anche se
   questa riga finisse sopra nel foglio. */
.sez--prima .h2--grande{font-size:clamp(42px,5.14vw,74px)}
/* 14/09, commento di Gabriele sull'apertura: «ingrandisci, colora la scritta
   Claude di arancio segnale». Il titolo passa da 34-60 a 42-74 px, la stessa
   scala dell'h1 di more.leads (main#top h1 là). «Claude» in arancio segnale:
   #FF7A1A fa 7,00:1 sul fondo #17150F, e sta a 20 gradi di tinta dal rosso
   degli accenti, quindi si legge come arancio e non come un rosso sbagliato.
   È un secondo colore caldo nella stessa schermata del pulsante rosso: scelta
   sua, dichiarata qui perché il foglio altrove dice un accento solo. */
/* 14/09, più tardi: l'arancio segnale è uscito. Un arancio solo in tutta la
   pagina, quello del pulsante «Scrivimi» (vedi UN COLORE SOLO in fondo). */
.h1-claude{color:var(--accento)}

/* GP1 */

/* GP2 */

/* GS1 */
/* GS1 · sezione 06 (#otto-ore) · le due pastiglie «8 ORE» e «2 ORE DI RICHIAMO».
   Il copy v2 le vuole PIENE di rosso con il testo bianco («qui dentro il rosso
   si scrive bianco»). `.misura` nel foglio e' solo contornata (testo
   --accento-t, filo --filo-forte) e nessuna classe dichiarata la riempie:
   senza questa riga l'elemento visivo della 06 non si fa. Nessuna classe
   nuova, solo l'id della sezione, cosi' le altre pastiglie della pagina
   restano come sono. Bianco dentro --accento: 4,55:1, passa i 4,5 anche a
   13px; il fondo pieno contro --fondo fa 4,01, sopra i 3 di un tratto. */
#otto-ore .misura{background:var(--accento);border-color:var(--accento);color:var(--accento-in)}

/* GS1 · sezione 07 (#cosa-resta) · i numeri 01 02 03 04 delle quattro schede.
   Il copy v2 li voleva grandi in --accento, il rosso dei tratti e dei titoli
   grandi, e questa riga ce li metteva: --accento su --superficie-2 (il fondo
   di `.riq` dentro `.sez--bianca`) fa 3,11:1, che passava solo come testo
   grande (30-42 px in grassetto, soglia 3). Era l'unico testo della pagina
   sotto 4,5. Dal mockup del 13/09 il numero e' testo come gli altri, e
   prende --accento-t: 5,02:1 sullo stesso fondo, lo stesso rosso degli
   indici della 11 (5,71 su --superficie). La riga resta, legata all'id della
   sezione: se il copy torna a volerli nel rosso dei tratti, cambia una
   parola sola, e il conto e' qui sopra. */
#cosa-resta .indice--grande{color:var(--accento-t)}

/* GS4 */
/* GS4 · 10 · le due mappe affiancate da 768px, come chiede il copy.
   `.rete--2` si impila fino a 900, e fra 768 e 900 il testo diceva
   «a sinistra / a destra» di due mappe una sotto l altra (revisione del
   10/09). (1,1,0) vince sul (0,1,0) della media a 900. */
@media (min-width:768px){#due-mappe .rete--2{grid-template-columns:repeat(2,1fr)}}

/* GO1 */
/* GO1 · #il-prezzo · le schede prezzo. Erano tre fino al 12/09: la scheda
   del sistema da 390 € e uscita, e restano la giornata e le automazioni.
   Le regole qui sotto valgono uguali su due schede; dove il commento dice
   «tre», e la misura presa quando erano tre.
   L'ELEMENTO VISIVO del v2 chiede tre cose che le classi dichiarate non sanno
   fare, e sulla disposizione comanda lui (REGOLE 2.2). Nessuna classe nuova:
   tutto passa per l'id della sezione, e ogni altra .prezzo resta com'e'.

   1 · «la cifra in corpo grande in alto a destra di ognuna». `.prezzo` e' una
       colonna, e `main#top .prezzo` la centra: la cifra cadeva sotto il
       titolino, su una riga sua. Qui la scheda diventa una fila che va a capo:
       sulla prima riga il titolino a sinistra e la colonna della cifra a
       destra, sulla stessa linea di base; ogni altro figlio prende la riga
       intera e resta centrato, come il resto della pagina.
   2 · «Nella terza 390 € ... allineato alle altre due, e IN MEDIA in corpo
       piccolo accanto, sulla stessa riga». La colonna della cifra e' larga
       uguale nelle tre schede, 182px, sta a filo del margine destro, e la
       cifra ci sta dentro a sinistra: le tre cifre partono dalla stessa x, e
       con le cifre tabellari finiscono sulla stessa x. A destra resta il posto
       per IN MEDIA, che nella terza viene DOPO il 390 €, come nel copy
       («390 € IN MEDIA»): chi guarda e chi ascolta ricevono lo stesso ordine.
       I 182px sono la terza misurata in JetBrains Mono: 5 segni a 34px (102)
       + 10 di stacco + 8 segni a 13px con la spaziatura (69); un Consolas di
       riserva, piu' stretto, ci sta dentro. I 13px sono quelli delle
       pastiglie. Su una scheda stretta (telefono) la colonna non sta accanto
       al titolino: va a capo, sempre a destra, e la cifra resta alla stessa x
       delle altre due.
   3 · La prima col filetto d'accento sul lato sinistro, le altre due senza
       (il copy scrive il colore a mano, qui e' --accento, lo stesso valore).
       `.prezzo--fuoco` fa il bordo d'accento su quattro lati: qui torna il
       filo di tutte le schede e l'accento resta solo a sinistra, 4px come il
       `.filetto` della pagina. Il padding cala di 3px, cosi' il titolino della
       prima parte dalla stessa riga delle altre due. --accento su
       --superficie-2 fa 3,1:1: e' un tratto, non un testo, e la soglia e' 3. */
#il-prezzo .prezzo{flex-direction:row;flex-wrap:wrap;column-gap:16px}
#il-prezzo .prezzo > *{flex:0 0 100%}
#il-prezzo .prezzo > .titolino{flex:1 1 11ch;text-align:left;align-self:baseline}
#il-prezzo .prezzo > .titolino + *{flex:0 0 182px;margin-left:auto;align-self:baseline;text-align:left}
#il-prezzo .prezzo > .titolino + :not(.cifra){display:flex;align-items:baseline;gap:10px}
#il-prezzo .prezzo .dato{font-size:13px;letter-spacing:.06em}
#il-prezzo .prezzo--fuoco{border:1px solid var(--filo);border-left:4px solid var(--accento);padding-left:23px}

/* GO2 */
/* GO2 · 13 «La prova, col suo limite» · le quattro righe come un registro.
   L'ELEMENTO VISIVO del copy v2 vuole «il mestiere a sinistra, il lavoro a
   destra in corpo piu' piccolo, incolonnato», e righe ad «altezza fissa».
   In main#top ogni `.lista li` diventa una pila centrata
   (`main#top .lista li{grid-template-columns:1fr;justify-items:center}`):
   qui il lavoro finiva SOTTO il mestiere e ogni riga era alta a modo suo.
   Nessuna classe dichiarata fa un registro a colonne, quindi servono queste
   righe.
   · Tre colonne con lo stesso modello su tutte e quattro le righe: il numero
     in una colonna fissa (2.8em tiene «02 03», che e' la piu' larga), poi
     due colonne in fr. Le righe sono larghe uguali, quindi le colonne cadono
     una sotto l'altra senza bisogno di subgrid.
   · Il testo sta a sinistra DENTRO le colonne: centrato si sfalserebbe riga
     per riga, che e' proprio il motivo per cui main#top impila le liste.
     Il blocco resta centrato come la colonna stretta che lo contiene.
   · `grid-auto-rows:1fr` fa ogni riga alta quanto la piu' alta: e' l'altezza
     fissa, senza un numero di pixel che il testo potrebbe sfondare.
   · Sotto i 640, la soglia delle tabelle, tre colonne non ci stanno: il
     lavoro scende sotto il mestiere, nella stessa colonna, e resta
     incolonnato.
   Legato all'id della sezione, perche' lo chiede solo la 13, e con main#top
   davanti: `#la-prova .lista li` da solo perde contro `main#top .lista li`,
   che ha un elemento in piu'. Nessun colore: filetti e spaziature restano
   quelli in linea del blocco. */
main#top #la-prova .lista{display:grid;grid-auto-rows:1fr;text-align:left}
main#top #la-prova .lista li{grid-template-columns:2.8em minmax(0,1fr) minmax(0,1.2fr);
  justify-items:stretch;align-content:center;align-items:baseline;column-gap:18px}
main#top #la-prova .lista li > span:first-child{white-space:nowrap}
@media(max-width:640px){
  main#top #la-prova .lista li{grid-template-columns:2.8em minmax(0,1fr);row-gap:0}
  main#top #la-prova .lista .eco{grid-column:2}
}

/* GO2 · 14 · la tabella impilata sotto i 640: anche l ultima scheda,
   «Quando lo fai», tiene i suoi filetti. La regola della tabella larga
   (tbody tr:last-child th e td senza bordo sotto) ha piu specificita e
   sotto i 640 li toglieva tutti: 0px su cinque celle (revisione del 10/09). */
@media (max-width:640px){
  .tab-scorre--confronto tbody tr:last-child th{border-bottom:1px solid var(--filo-forte)}
  .tab-scorre--confronto tbody tr:last-child td:not(:last-child){border-bottom:1px solid var(--filo)}
}

/* GO3 */
/* GO3 · 15 · la croce sul titolino «Non serve quando».
   `.croce` e' tarata sui 15px di una riga di elenco. Sul titolino da 19px,
   accanto alla spunta SVG da 20px, restava un puntino: misurato sul render a
   1280 del 10/09. L'elemento visivo vuole i due segni in coppia, uno per
   titolino, e la misura non si puo' scrivere in linea (REGOLE 2.5). Qui la
   croce prende il corpo del titolino. Aggancia solo una croce DENTRO un
   titolino, e nella pagina ce n'e' una sola. */
.titolino .croce{font-size:inherit}

/* GO3 · 15 (#squalifica) · le due meta' si impilano sotto i 768px.
   L'ELEMENTO VISIVO del copy v2 le vuole «affiancate sopra i 768px,
   impilate sotto». `.due-meta` nel foglio si impila solo a 720
   (@media max-width:720px), quindi fra 721 e 767 restavano affiancate.
   Nessuna classe dichiarata ha il punto di rottura a 768: `.rete--2` si
   impila a 900, e da 769 a 900 le terrebbe impilate contro il copy.
   Misurato il 10/09 con Chrome headless, foglio vero, un iframe per
   larghezza: con questa riga affiancate a 768, 769, 800, 900 e 1280,
   impilate a 767, 740 e 721; senza, a 721, 740 e 767 restano affiancate.
   Legata all'id della sezione perche' la chiede solo la 15: cosi' non
   cambia niente se `.due-meta` un giorno torna altrove. (1,1,0) vince su
   `.due-meta` (0,1,0) anche se questa riga finisse sopra nel foglio. */
@media(max-width:767px){#squalifica .due-meta{grid-template-columns:1fr}}

/* GPIEDE */
/* GPIEDE · piede · quattro colonne da 768px in su, impilate sotto.
   L'ELEMENTO VISIVO del copy v2 vuole «quattro colonne di uguale larghezza
   su schermo largo, impilate sotto i 768px nell'ordine scritto». Il foglio
   tiene `.piede-rete` a quattro colonne, due per riga sotto i 900px e una
   sola sotto i 560: fra 768 e 900 ne dava due invece di quattro, fra 561 e
   767 due per riga invece di impilarle. Nessuna classe dichiarata ha il
   punto di rottura a 768.
   `.piede-rete` sta solo nel piede di index.html (l'informativa usa
   `.piede` e `.piede-coda`, non la rete): non cambia nient'altro.
   (0,2,0) vince su `.piede-rete` (0,1,0) delle due @media del foglio anche
   se queste righe finissero sopra. Fra loro due la seconda resta dopo la
   prima. La prima non ha @media, cosi' non resta un buco fra 767 e 768
   quando la finestra ha una larghezza frazionaria (zoom). */
/* 14/09: le schede sono cinque (è entrata «parliamo», come su more.leads).
   Cinque in fila solo da 1100 in su: sotto, la scheda dell'altro sito col
   segno a 62 px non ci sta. Fra 768 e 1099 tre per riga, tre più due. */
.piede .piede-rete{grid-template-columns:repeat(3,1fr)}
@media(min-width:1100px){.piede .piede-rete{grid-template-columns:repeat(5,1fr)}}
@media(max-width:767px){.piede .piede-rete{grid-template-columns:1fr}}

/* GPIEDE · i link del piede alti 44px, il bersaglio che la pagina si e
   data (.carosello-passi). Erano alti 19px, e informativa e telefono stavano
   a 14px l uno dall altro sul telefono (revisione del 10/09). */
.piede-lista a{display:inline-flex;align-items:center;min-height:44px}

/* PIEDE · il logo di more.leads davanti al link «Landing page» (Gabriele,
   10/09). Piccolo: 28px di altezza dentro un link alto 44. Il file e il
   marchio.png di more.leads, copiato uguale in assets/img/. */
.piede-lista a img{height:28px;width:auto;flex:none;margin-right:10px}

/* TESTATA · il segno MS sparisce sotto i 390px, non solo sotto i 360 come su
   MORE.leads. La soglia e nata per «Come si comincia», molto piu largo di
   «Scrivimi»: misurato il 10/09, a 360 il segno sbordava di 3px sul
   pulsante, a 375 restavano 4px, a 390 12px. Dal 12/09 il pulsante dice
   «Scrivimi», come su MORE.leads. Rimisurato il 12/09 col segno acceso a
   forza: a 360 restano 28px fra marchio e segno e 59 fra segno e pulsante,
   a 375 36 e 67, a 389 43 e 74. La soglia potrebbe quindi scendere a 359,
   come su MORE.leads: resta a 390 finche Gabriele non lo decide, perche e
   una scelta di disegno e non un difetto. Il nome MORE.skills resta sempre. */
@media(max-width:389px){.marchio-segno{display:none}}

/* ==========================================================================
   MONTAGGIO v3 · T-260912-14 · 12/09/2026
   La pagina passa a 17 sezioni, gemella di more.leads. Le regole nuove
   stanno tutte qui, sui token di questo foglio: nessun colore scritto a
   mano, e ognuna legata alla sua sezione o a classi che vivono solo li.
   ========================================================================== */

/* 03 · LA FASCIA, «Con chi ho lavorato». Uscita il 09/09, tornata il 12/09
   perche Gabriele vuole le stesse sezioni di more.leads. Copiata per intero
   da `_Lab/moresales/sito/assets/stile.css` (righe 1016-1082), ed e gia sui
   token: usa --superficie, --muto e --f-dati, che qui valgono i colori di
   questa palette. La sezione non ha id (IMPIANTO-v3 §2.1): le classi
   vivono solo li dentro. Una differenza dal 13/09: niente filo in cima,
   perche la fascia continua la 02 e non apre un capitolo (FILI E FILETTI);
   il capitolo dopo lo apre il filo della 04.
   Tre cose che chi la tocca deve sapere.
   1. I due #000 della maschera NON sono un colore: sono canale alfa, dicono
      «qui la maschera e opaca». Non si convertono al fondo.
   2. Nel markup la serie e scritta QUATTRO volte e il nastro trasla del 25%:
      la percentuale e 100/N, e il collaudo (controllo 6b) boccia se i due
      numeri non tornano. Con due copie al 50% su uno schermo da 1280
      restava un buco di 227px (misurato su more.leads il 06/09).
   3. Il movimento si ACCENDE dentro prefers-reduced-motion:no-preference,
      non si spegne da fuori: spegnendolo da fuori l'animazione parte e
      viene troncata, e il nastro resta fermo coi loghi a meta corsa. Sotto
      i 640 e con «riduci movimento» il nastro sta fermo e si scorre a mano:
      la giostra ha tabindex="0", quindi da tastiera si prende col Tab e si
      sposta con le frecce. Il collaudo 6b boccia un `animation:scorri`
      scritto fuori da quella media query.
   I quattro SVG dei loghi hanno il grigio scritto dentro il file (mask-image
   da file:// non dipinge): e #8A8A86, il --muto di qui, e il collaudo 7
   cerca i colori del mondo vecchio anche dentro quei file. */
.fascia{background-color:var(--superficie);border-top:0;
  padding:44px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* --muto su --superficie fa 4,64: passa per un'etichetta da 11,5px. */
.fascia-eti{font-family:var(--f-dati);font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muto);
  text-align:center;margin:0 0 28px;padding-inline:max(28px,7.5%)}
/* L'invito compare solo dove il nastro si spinge a mano: al desktop scorre
   da solo e dirlo sarebbe una bugia. */
.fascia-scorri{display:none}
@media (max-width:640px),(prefers-reduced-motion:reduce){.fascia-scorri{display:inline}}
/* padding-inline-end pari al gap: con flex la larghezza e somma + (N-1)*gap,
   e senza l'ultimo gap il giro salterebbe di un passo a ogni ripartenza. */
.giostra{display:flex;width:max-content;align-items:center;
  gap:76px;padding-inline-end:76px}
/* --k scala tutti i loghi insieme; --w e --h sono le misure vere dei file. */
.marchio-logo{flex:none;--k:1.05;
  width:calc(var(--w) * var(--k) * 1px);height:calc(var(--h) * var(--k) * 1px)}
.marchio-altri{flex:none;width:128px;text-align:center;
  font-family:var(--f-dati);font-size:13px;letter-spacing:.1em;
  color:var(--muto);line-height:1.4}
@media (prefers-reduced-motion:no-preference) and (min-width:641px){
  .giostra{animation:scorri 64s linear infinite}
}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-25%)}}
/* Fermo, si scorre a mano. Le copie con aria-hidden servono solo a
   richiudere il giro: a mano sarebbero gli stessi marchi visti quattro
   volte, quindi spariscono. I 28px tengono il primo e l'ultimo fuori dalla
   sfumatura, che a 375px mangia 26px per lato. */
@media (max-width:640px),(prefers-reduced-motion:reduce){
  .giostra{width:auto;overflow-x:auto;overscroll-behavior-x:contain;
    padding-inline:28px;scrollbar-width:none}
  .giostra::-webkit-scrollbar{display:none}
  .giostra > [aria-hidden="true"]{display:none}
}
@media (max-width:640px){
  .fascia{padding:34px 0}
  /* 36 e non 52: col passo stretto il quarto marchio spunta dentro la
     sfumatura, e un nastro che si vede TAGLIATO dice da solo che continua. */
  .giostra{gap:36px}
  .marchio-logo{--k:.85}
}
/* Il nastro si FERMA (WCAG 2.2.2, audit del 12/09: sopra i 640 girava e
   niente lo fermava, ed era ereditato da more.leads). Tre modi, nessuno
   script: al passaggio del puntatore, col fuoco dentro la giostra, e col
   comando «ferma il nastro», una casella nascosta con la sua etichetta. Da
   fermo col comando il nastro prende lo stato dei telefoni: niente
   movimento, si scorre a mano, copie nascoste. Il comando si vede solo
   dove il nastro gira da solo: sotto i 641 e con «riduci movimento» e gia
   fermo. Il collaudo 6b boccia la giostra senza pausa o senza comando.
   L anello del fuoco va sull etichetta, che non ha clip-path. */
.giostra-ferma{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.giostra-comando{display:none}
.giostra-comando__riparti{display:none}
@media (prefers-reduced-motion:no-preference) and (min-width:641px){
  .giostra:hover,.giostra:focus-within{animation-play-state:paused}
  .giostra-comando{display:inline;margin-left:14px;color:var(--muto);
    text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .giostra-comando:hover{color:var(--testo)}
  .giostra-ferma:focus-visible ~ .fascia-eti .giostra-comando{
    outline:3px solid var(--accento);outline-offset:3px}
  .giostra-ferma:checked ~ .fascia-eti .giostra-comando__ferma{display:none}
  .giostra-ferma:checked ~ .fascia-eti .giostra-comando__riparti{display:inline}
  .giostra-ferma:checked ~ .giostra{animation:none;width:auto;overflow-x:auto;
    overscroll-behavior-x:contain;padding-inline:28px;scrollbar-width:none}
  .giostra-ferma:checked ~ .giostra > [aria-hidden="true"]{display:none}
}
/* 08 · #il-criterio · gli schemi larghi hanno le scritte a 26 su 1280
   unita: affiancati fra 901 e 1199 px scendevano sotto gli 11 px (8,5 a
   901, audit del 12/09). Si impilano fino a 1199, larghi al massimo 760,
   e le scritte restano sopra i 14. Sotto i 768 arriva la versione
   verticale. Le sizes della pagina dicono le stesse misure. */
@media (max-width:1199px){#il-criterio .rete--2{grid-template-columns:1fr;
  width:100%;max-width:760px;margin-inline:auto}}
/* 17 · #domande · se le domande sono dispari, l'ultima, sola sulla sua
   riga, prende tutta la larghezza (erano cinque la sera del 12/09, poi
   quattro: oggi la regola non scatta, e resta pronta). */
/* Il suo testo resta largo come quello delle altre: a piena riga,
   a 1280, correva su 150 caratteri. */
@media (min-width:901px){
  #domande .rete--2 > .riq:last-child:nth-child(odd){grid-column:1 / -1}
  #domande .rete--2 > .riq:last-child:nth-child(odd) > p{max-width:62ch;margin-inline:auto}
}

/* 07 · #cosa-resta · la mappa dell'ufficio a piena colonna, sotto i quattro
   riquadri e senza pastiglia. Mai piu larga della variante da 682: le
   scritte stanno dentro l'immagine (IMMAGINI-v3), e le sizes lo dicono gia,
   «682px». Il pannello e scuro sulla carta del blocco chiaro: e lui a
   interrompere lo scorrere, non serve altro. */
#cosa-resta .schema{width:100%;max-width:682px;margin-inline:auto}

/* ==========================================================================
   IL QUESTIONARIO · T-260913-15 · 13/09/2026
   La pagina che Gabriele manda PRIMA della telefonata, `questionario.html`,
   con le risposte in Netlify Forms, e quella dove si arriva dopo l'invio.
   Portato dal foglio di more.leads (blocco «questionario», T-260911-09) coi
   token di qui. Sta dentro `.documento`, cioe' a sinistra: un modulo si
   compila riga per riga, e il centrato della landing (main#top) qui non
   arriva.

   Il `.campo` del modulo di prima era un contatto da quattro campi, e
   l'etichetta in maiuscoletto mono andava bene per «NOME». Qui ogni
   etichetta e' una domanda intera, e una frase in maiuscolo da 11,5 px non
   si legge: la domanda prende la mano dei titoli, le etichette di servizio
   («Tu», «Il numero», «Se e' altro, cosa») restano quelle di prima. Le
   risposte a scelta si chiamano `.opzione` e non `.scelta`: `.scelta`
   esiste gia', ed e' il pulsante del micro-impegno.

   Le misure, ricalcolate con la formula del :root il 13/09:
     cornice dei campi e delle scelte, --bordo   3,92:1 sul fondo, 3,04 su
                                                 --superficie-2 (soglia 3)
       il --filo-forte del modulo di prima fa 2,17 sul fondo: bocciato per
       il confine di un campo (WCAG 1.4.11)
     scelta spuntata, bordo --accento            4,01:1 sul fondo, 3,71 sulla
                                                 sua velatura
     la velatura, rosso al 10% sul fondo         #2B1811, --ink dentro 14,62
     numeri, «obbligatoria», «Cancella»          --accento-t, 6,47:1
     obbligatoria lasciata vuota, campo o riga   --accento-t, 6,47:1, e in piu
       di scelte                                  la scritta «manca» accanto a
                                                 «obbligatoria»: il colore da
                                                 solo non basta (WCAG 1.4.1).
       Qui il rosso semantico non esiste (SPUNTE E CROCI), e un grigio non
       direbbe «manca qualcosa»
   ========================================================================== */
.questionario{display:flex;flex-direction:column;gap:40px}
.questionario .campo{gap:10px}
/* Il titolo di blocco del modulo apre come le sezioni della landing, col
   filetto di sabbia sopra. Disegnato qui e non scritto nel markup: fra un
   filetto e il suo titolo il gap di 40px del modulo sarebbe troppo. */
.questionario > h2::before{content:"";display:block;width:76px;height:4px;background:var(--segno);margin-bottom:22px}
fieldset.campo,.sotto-gruppo{border:0;margin:0;padding:0;min-width:0}
fieldset.campo > legend,.sotto-gruppo > legend{padding:0;margin-bottom:10px}
.campo .domanda{font-family:var(--f-tit);font-size:19px;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.domanda .num{font-family:var(--f-dati);font-size:14px;color:var(--accento-t);margin-right:6px}
.obbl{font-family:var(--f-dati);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accento-t);margin-left:6px;white-space:nowrap}
.sotto-gruppo{margin-top:8px}
.sotto-gruppo > legend{font-family:var(--f-testo);font-size:16px;font-weight:600;color:var(--ink)}
.sotto-gruppo > .aiuto{margin-bottom:10px}
/* La sotto-domanda scritta (la 4) e' una frase intera: prende la mano della
   legenda dei gruppi, non il maiuscoletto delle etichette di servizio.
   (0,2,0) contro il (0,1,1) di `.campo label`. */
.campo .sotto-domanda{font-family:var(--f-testo);font-size:16px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink)}
.documento .aiuto{font-size:15.5px;line-height:1.6;color:var(--testo)}
.documento .aiuto--forte{color:var(--ink);font-weight:600}
/* I titoli dei riquadri sono h2.titolino, e dentro `.documento` la regola
   `.documento h2` (0,1,1) batteva `.titolino` (0,1,0): uscivano grandi
   quanto i titoli di blocco del modulo, con 18px di margine in piu dentro il
   riquadro (rilettura del 13/09). Tornano titoli di scheda, come nella
   landing. */
.documento .titolino{font-size:19px;margin-top:0}
/* `.documento ul` (0,1,1) rientra di 20px, con un passo di 9, e batteva
   `.lista` (0,1,0): i numeri dei quattro impegni e dei tre passi stavano
   spostati a destra, e le righe piu strette che nella landing. Rientro e
   passo tornano quelli di `.lista`. */
.documento .lista{padding-left:0;gap:14px}
.documento .nota-bozza{font-family:var(--f-dati);font-size:13px;color:var(--muto);letter-spacing:.04em}
/* Il tasto che cancella la bozza sta dentro la nota, che esiste solo col
   JavaScript: senza, non c'e' bozza e non c'e' niente da cancellare. Sembra
   un link perche' e' una cosa secondaria, ma e' alto 44 px perche' si tocca
   col pollice. ⚠️ Niente display sulla nota: batterebbe l'attributo hidden,
   e la promessa della bozza comparirebbe anche a chi la bozza non ce l'ha. */
.cancella-bozza{display:inline-block;min-height:44px;margin-left:8px;padding:10px 0;
  font:inherit;letter-spacing:inherit;color:var(--accento-t);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sotto-campo{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.opzioni{display:flex;flex-wrap:wrap;gap:10px}
/* Il confine dei campi: --bordo invece del --filo-forte del modulo di prima,
   che sul fondo fa 2,17. Solo dentro il questionario: la landing un modulo
   non ce l'ha, e non si tocca quello che non si vede. */
.questionario .campo input,.questionario .campo textarea{border-color:var(--bordo)}
/* Tutta la riga e' il bersaglio, non il pallino: 48 px d'altezza, perche' si
   compila col pollice. Il pallino resta quello del sistema, disegnato scuro
   da color-scheme e colorato da accent-color, cosi' chi usa i tasti o il
   lettore di schermo trova un comando vero e non un disegno. L'angolo resta
   vivo, non tagliato: il clip-path si porterebbe via il bordo sulle due
   diagonali (vedi `.riq`), e qui le scelte sono sessanta, 44 pallini e 16
   caselle. */
.campo .opzione{display:flex;align-items:center;gap:11px;min-height:48px;padding:10px 16px;
  font-family:var(--f-testo);font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;
  line-height:1.35;color:var(--testo);border:1px solid var(--bordo);cursor:pointer}
.campo .opzione input{width:20px;height:20px;margin:0;padding:0;flex:none;border:0;background:none;accent-color:var(--accento)}
.campo .opzione:hover{background:var(--superficie)}
.campo .opzione:has(input:checked){border-color:var(--accento);color:var(--ink);background:rgba(224,48,30,.10)}
/* L'obbligatoria lasciata vuota si segna solo DOPO che uno ci e' passato,
   o dopo un invio a vuoto: :user-invalid non accende niente su una pagina
   appena aperta. Sui pallini il bordo e' azzerato, quindi si segna la RIGA
   della scelta, non l'input (fino alla rilettura del 13/09 i tre gruppi
   obbligatori restavano muti). E accanto a «obbligatoria» compare «manca»:
   il colore da solo non basta. Dove :has() non c'e', resta il fumetto del
   browser, e niente si rompe. */
.campo input:user-invalid,.campo textarea:user-invalid{border-color:var(--accento-t)}
.campo .opzione:has(input:user-invalid){border-color:var(--accento-t)}
.campo:has(:user-invalid) > .domanda .obbl::after,
.sotto-gruppo:has(:user-invalid) > legend .obbl::after{content:" · manca"}
/* La testata del questionario ha un comando solo, il WhatsApp del vocale, e
   sotto gli 880 px la regola delle ancore (`.voci a:not(.bottone)`) lo
   nascondeva: la testata fissa restava col solo marchio, e la navigazione
   «Comandi» vuota. Qui resta, alto 44 px. La classe sta solo sulle due
   pagine del questionario: l'informativa ha anche «Scrivimi», e li' basta
   quello (rilettura del 13/09). */
.voci--questionario a.contatto-testata{display:inline-flex;align-items:center;min-height:44px}
/* Il fuoco dei pulsanti e' un anello DENTRO il ritaglio, fatto di
   box-shadow: coi colori forzati di Windows (contrasto elevato) il browser
   toglie le ombre, e con `outline:none` non restava niente. Un contorno
   trasparente di norma non si vede, e coi colori forzati prende quello del
   sistema. Solo nelle pagine di testo lungo: la landing ha lo stesso
   difetto, fuori da questo lavoro. */
.documento .bottone:focus-visible,.documento .bottone--vuoto:focus-visible{outline:3px solid transparent;outline-offset:-3px}
@media(max-width:560px){
  .coppia{grid-template-columns:1fr}
  .questionario{gap:34px}
}

/* ── VARIANTE M03 · Inter nelle schede lunghe · da chiedere. Il mono nelle
   schede e' una scelta di Gabriele del 05/09 (regola D in testata e nota
   «DM MONO DENTRO LE SCHEDE»). Se passa si aggiornano quelle due; se no si
   toglie tutto fino a «fine M03». ── */
main#top .riq h3 ~ p{font-family:var(--f-testo);font-size:inherit;line-height:inherit;letter-spacing:0;text-wrap:pretty}
/* Il pretty viene dalla verifica del mockup: in Inter la risposta della 08
   «Istruzioni che Claude rilegge, o appunti tuoi.» al telefono chiudeva con
   «tuoi.» da sola, all'11% della riga sopra; in mono no. Toglie la parola
   sola in coda, e se ne va col blocco. */
main#top table{font-size:inherit}
:where(main#top) tbody th{font-size:inherit}
/* ── fine M03 ── */

/* ── VARIANTE M04-a · testo lungo a bandiera, a ogni larghezza · da chiedere.
   Rovescia in parte «tutto centrato» (richiesta di Gabriele del 04/09,
   blocco ALLINEAMENTO AL CENTRO). Si toglie fino a «fine M04-a». ── */
main#top .riq:has(.titolino){align-items:flex-start;text-align:left}
main#top .riq:has(.titolino) :is(h3,p,li,span){text-align:left}
/* Il riquadro della meta' e' largo quanto la pagina (1.180 al computer), e
   i suoi capoversi stanno nella colonna da 581: appoggiati a sinistra
   lasciavano 575 px di rosso vuoto a destra. La colonna torna al centro del
   riquadro e il testo resta a bandiera dentro di lei: titolo, capoversi e
   filo bianco partono dalla stessa x. Al telefono la colonna e' gia' tutta
   la scheda, e non cambia niente. */
main#top .riq--colorato:has(.titolino){align-items:center}
main#top .riq--colorato:has(.titolino) > *{width:min(100%,calc((var(--colonna) - 18px) / 2))}
/* I segni della 16 stanno dentro la riga, prima della prima parola (vedi
   la lista coi segni): centrati non si notava, a bandiera la seconda riga
   tornava sotto il segno. Rientro appeso: la riga rientra di quanto e'
   largo il segno col suo spazio (20 px piu' lo spazio di Inter, 0,28em) e
   la prima riga esce di altrettanto, cosi' i segni fanno colonna e il
   testo pure. Col pretty, a bandiera, nessuna voce chiude con una parola
   sola. */
main#top .riq:has(.titolino) .lista--segni li{padding-left:calc(20px + .28em);text-indent:calc(-20px - .28em);text-wrap:pretty}
/* margin-inline:0 perche' il capoverso corto non resti centrato come blocco
   dentro la colonna. Il :not(.eco) porta la regola a (1,4,2), pari a quella
   della colonna di lettura, e cosi' vince perche' viene dopo: senza, a
   (1,3,2), perdeva, e nella 02 due capoversi su quattro partivano 47 e 4 px
   dentro al primo (misurato a 1440). */
@media(min-width:901px){main#top .rete--2 > .pila.stretta > p:not(.eco){text-align:left;margin-inline:0}}
/* E il titolo della 02 va coi suoi capoversi: centrato sopra una colonna a
   bandiera aveva un asse suo, diverso da quello del testo che ha sotto. */
@media(min-width:901px){main#top .rete--2 > .pila.stretta > h2{text-align:left}}
/* ── fine M04-a ── */

/* ── VARIANTE M04-b · al telefono anche le schede corte · da chiedere.
   La squalifica: la .due-meta porta .bilancia, e le righe bilanciate,
   appoggiate a sinistra, stavano fra 170 e 290 px dei 346 della colonna,
   con un terzo vuoto a destra e un asse loro. Qui vanno a capo piene
   (pretty, niente parola sola in coda) e il blocco prende la colonna intera
   sotto il titolo centrato. Il rientro appeso dei segni e' lo stesso
   dell'altra meta': ognuna delle due si stacca da sola. ── */
@media(max-width:640px){
  main#top .riq:not(.rec){align-items:flex-start;text-align:left}
  main#top #squalifica .due-meta{text-align:left;text-wrap:pretty}
  main#top #squalifica .lista li{justify-items:start}
  main#top .riq:not(.rec) .lista--segni li{padding-left:calc(20px + .28em);text-indent:calc(-20px - .28em);text-wrap:pretty}
}
/* ── fine M04-b ── */

/* Una parola del titolo nel colore segnale (14/09, commento di Gabriele: «colorala
   arancio segnale»): «AI» nella 11a, «dimenticato» nella 11b, e «Ogni volta» e «Perdi tempo» nella 04. È il rosso che
   porta testo, --accento-t, 6,47:1 sul fondo; una parola sola per titolo (regola F). */
/* Sull’abbr di «AI» il browser mette la sottolineatura a puntini: in rosso
   sembra il segno di un errore di battitura, e si toglie. Il title resta. */
.tit-segnale{color:var(--accento-t);text-decoration:none}
/* Dentro un capoverso (14/09, commento di Gabriele: «AI» arancio nella prima
   frase dell'apertura). A 19 px l'arancio unico fa 4,01:1 e il testo piccolo
   ne chiede 4,5; in grassetto, sopra i 18,66 px, conta come testo grande e la
   soglia è 3. */
.testo-g .tit-segnale{font-weight:700}

/* La scritta di more.leads nel piede, com'è nella sua testata (14/09, su commento
   di Gabriele): MORE nell'inchiostro, il punto e «leads» nei due colori di more.leads,
   in Recursive 800 a 17 px, come MORE.skills nel piede di more.leads. Sulla scheda
   del piede il punto fa 4,85:1 e «leads» 8,06:1. Il controllo 7 del collaudo toglie
   dal conto solo le due regole qui sotto: sono un marchio, non un residuo.
   Inline-block largo quanto la riga: la sottolineatura del link non la attraversa. */
.altro-sito{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.altro-sito img{height:44px;width:auto;flex:none}
/* Il segno ML alto quanto il segno MS della testata (Gabriele, commento del
   14/09): 62 px al computer, 46 sotto i 760, come .marchio-segno. La regola
   sopra non arrivava mai: `.piede-lista a img` (0,1,2) la batteva e lo teneva
   a 28. Questa e (0,2,1). */
.piede-lista .altro-sito img{height:62px}
@media(max-width:760px){.piede-lista .altro-sito img{height:46px}}
.altro-sito-testo{display:block;line-height:1.3;text-align:left}
.altro-marchio{display:inline-block;width:100%;margin-bottom:2px;font-family:var(--f-marchio);font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.ml-punto{color:#9B85FF;margin-inline:-.02em}
.ml-nome{color:#2BD4FF}

/* LA CASELLA «FERMA IL NASTRO» · verifica del 14/09. Sotto i 641 px e con
   «riduci movimento» la sua etichetta è display:none, ma la casella restava
   nel giro del Tab: un fermo invisibile. Lì il nastro non gira, quindi esce. */
@media (max-width:640px),(prefers-reduced-motion:reduce){.giostra-ferma{display:none}}

/* UN COLORE SOLO · 14/09 (Gabriele): «usiamo solo il colore arancione che
   abbiamo nella CTA Scrivimi del nav». Quello è --accento, #E0301E, e adesso è
   l'unico: --accento-t era #FF6A55, --blocco-acc (le sezioni chiare) #B82415,
   «Claude» nell'apertura #FF7A1A. Anche le scritte rosse dentro i disegni
   passano da #FF6A55 a #E0301E (rifatti in _lavoro/disegni/).
   Restano più scuri solo gli stati al passaggio del mouse (--accento-hover
   #D02C1B, --blocco-hover #96190B): senza, il pulsante non risponde.
   ⚠️ IL PREZZO, misurato con Node (WCAG 2.1): #E0301E fa 4,01:1 sul fondo,
   3,53 su --superficie, 3,11 su --superficie-2, 3,94 sulla carta. Per il
   testo grande (dai 24 px, o 18,7 in grassetto) e per i tratti basta, soglia
   3. Per il testo piccolo la soglia è 4,5, e non ci arriva: i link nel testo,
   le pastiglie, gli indici, i numeri delle domande e le scritte piccole dei
   disegni sono sotto il livello AA. Dentro il rosso si scrive bianco: 4,55. */

/* CARATTERI · 15/09 (T-260915-03, dal piano di T-260915-02). I titoli in Khand
   SemiBold al posto di Recursive 700, scelta del 05/09; su more.leads le
   parole già evidenziate nei titoli in Array Bold: è il «mix 03», scelto da
   Gabriele il 15/09 fra dieci prove. --f-tit non si tocca: fa anche il
   marchio, il testo grande (.tirata, .testo-g) e le domande del questionario,
   che restano Recursive. Khand ha un peso solo, 600: dove un titolo chiede 700
   il browser prende il 600 senza inventare un grassetto. Il tracciamento
   negativo di Recursive su un carattere stretto chiude troppo: a zero.
   Il blocco sta in fondo al foglio per vincere sulle regole dei titoli che
   stanno sopra a pari specificità. */
:root{--f-titoli:'Khand','Segoe UI',system-ui,sans-serif;--f-segno:'Array',var(--f-titoli)}
h1,h2,h3,.titolino{font-family:var(--f-titoli);font-weight:600;letter-spacing:0}
/* Il marchio scritto nel piede è un h3.titolino: resta Recursive 800, come in testata. */
.titolino:has(.mar-punto){font-family:var(--f-marchio);font-weight:800;letter-spacing:-.02em}