/* ==========================================================================
   more.leads — sistema visivo · VERSIONE SCURA
   Grammatica: «Brand kit tech · Web freddo» (_Outputs/2026-08-26-brand-kit-tech)
   Palette:    «KIT UFFICIALE · Mondo Web» (22_Prisma/30_Design/KIT-UFFICIALE.md §2)
   Ribaltata in scuro il 2026-09-04 su richiesta di Gabriele (T-260904-36).

   ── COS'È SUCCESSO RIBALTANDO, e non è un cambio di sfondo ────────────────
   Il fondo è diventato l'inchiostro di prima (#0B0B12) e l'inchiostro è
   diventata la carta di prima (#EFF1F3). **Tre colori hanno cambiato mestiere**,
   e due di quei tre in direzioni opposte. Tutto ricalcolato con node
   (WCAG 2.1, (L1+0,05)/(L2+0,05)), niente stimato:

     colore              su carta chiara      su fondo scuro
     #2BD4FF ciano          1,55:1  ⛔  →      11,17:1  ✅  PROMOSSO
     #6D4BFF viola pieno    4,52:1  ⚠️  →       3,83:1  ❌  RETROCESSO
     #5A34E8 viola-t        6,00:1  ✅  →       2,89:1  ❌  FUORI dal testo
     #D97757 coral          2,76:1  ⛔  →       5,33:1  ✅  PROMOSSO (mondo caldo)

   · Il **ciano** era il colore che non poteva mai essere inchiostro. Adesso è
     il più leggibile della palette — e dal 04/09, su richiesta di Gabriele,
     **è l'accento**: porta i comandi, il testo d'accento e le tinte.
   · Il **viola** ha fatto la strada opposta: da accento a **segno**. Resta nei
     filetti di sezione, dove 3,83:1 basta perché è un tratto e non un testo.
     Lo scambio non contraddice le misure: le segue.
   · Il viola da testo del mondo chiaro (#5A34E8) qui non reggerebbe (2,89:1),
     ma non serve più — sopravvive dentro il blocco chiaro invertito, dove il
     ciano a sua volta non può andare (1,55:1).
   · Il **coral vero di Claude** (#D97757), inservibile sul chiaro, sullo scuro
     è finalmente il colore della sezione Formazione.

   ── I DUE MONDI HANNO L'HOVER IN DIREZIONI OPPOSTE, ed è una regola ───────
   Il passaggio del mouse va **sempre nella direzione che allontana il fondo
   dal testo che ci sta dentro**.
     · freddo: dentro il ciano si scrive SCURO → l'hover SCHIARISCE (#7FE4FF,
       scuro dentro 13,49:1).
     · caldo:  dentro il coral si scrive SCURO → l'hover SCHIARISCE (#E08A6B,
       scuro dentro 6,35:1).
   Dallo scambio i due mondi vanno nella stessa direzione, ed è un caso, non
   una semplificazione: la regola resta quella, e con l'accento viola andava
   nell'altro verso.
   ⚠️ Dentro il ciano **non si scrive bianco**: fa 1,76:1. Stessa trappola del
   coral, e per la stessa ragione — sono due accenti chiari.

   ── LE MISURE CHE REGGONO L'IMPIANTO ─────────────────────────────────────
     testo #C8CBD3 su fondo 12,08:1 · su superficie 11,02:1 · su sup-2  9,98:1
     muto  #8B939E su fondo  6,32:1 · su superficie  5,76:1 · su sup-2  5,22:1
     ink   #EFF1F3 su fondo 17,32:1        scuro dentro il ciano  11,17:1
   Mondo caldo (è la versione scura che il kit K6 aveva già):
     #F5F4EF 15,11:1 · #B7B4AC 8,03:1 · #E08A6B 6,35:1 · salvia #70A574 5,80:1
   ⚠️ Il coral pieno #D97757 su --superficie-2 (#2E2D2A) fa **4,41:1** e NON
   passa: lì va #E08A6B (5,26:1). È l'unica trappola rimasta del mondo caldo.

   ── IL RIQUADRO INVERTITO ─────────────────────────────────────────────────
   Nella versione chiara `.riq--pieno` era il blocco scuro dentro la pagina
   chiara. Ribaltando **diventa il blocco chiaro dentro la pagina scura**: il
   mestiere è lo stesso — «questo pezzo sta a parte» — e i token `--blocco-*`
   esistono per quello. 17,32:1 nel freddo, 15,11:1 nel caldo.

   ── Sei regole della grammatica, e un pezzo che ne rompe una è fuori ──────
     A · contorno, mai riempimento sfumato — niente box-shadow, blur, gradienti
     B · l'angolo è tagliato (clip-path), mai arrotondato
     C · ⛔ PENSIONATA il 06/09 — era «la griglia si vede, sullo scuro è
         chiara e non scura». Tolta dall'apertura: su fondo nero una griglia
         a un passo solo è l'unico elemento decorativo della pagina, e le
         altre cinque regole esistono per tenere fuori la decorazione.
         Le regole CSS restano, spente. Dettaglio più giù, su `.griglia`
     D · i caratteri sono da strumento — Recursive (titoli e marchio),
         Inter (corpo), DM Mono (schede), JetBrains Mono (etichette).
         Anton è uscito il 05/09 insieme al maiuscolo forzato sui titoli
     E · il micro-testo è texture, non testo
     F · un solo accento per composizione — dal 04/09 è il ciano, non il viola
   ========================================================================== */

/* --- 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'è uno. Il latin-ext è un secondo file con il
   suo unicode-range, quindi si scarica SOLO se in pagina compare una
   lettera che sta lì dentro — 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}

/* --- 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{
  /* MONDO FREDDO — il predefinito. Elevazione = più chiaro, come su ogni
     interfaccia scura: le superfici sono la vecchia carta miscelata sul fondo. */
  --fondo:#0B0B12;          /* era l'inchiostro */
  --superficie:#16171D;     /* carta al 5%  · 1,10:1 sul fondo */
  --superficie-2:#202026;   /* carta al 9%  · 1,21:1 */
  --filo:#2B2B32;           /* carta al 14% · 1,40:1 */
  --filo-forte:#424248;     /* carta al 24% · 1,97:1 */
  --ink:#EFF1F3;            /* era la carta · 17,32:1 */
  --testo:#C8CBD3;          /* 12,08:1 */
  --muto:#8B939E;           /* 6,32:1 · e 5,22:1 anche sulla superficie-2 */
  /* ⚠️ SCAMBIATI il 2026-09-04 su richiesta di Gabriele: comanda il CIANO.
     Il ribaltamento in scuro aveva già promosso il ciano da 1,55:1 a 11,17:1
     e retrocesso il viola pieno a 3,83:1 — lo scambio segue quella misura
     invece di contraddirla. Il viola resta il SEGNO: filetti e tinte. */
  --accento:#2BD4FF;        /* il ciano · 11,17:1 sul fondo · dentro si scrive SCURO */
  --accento-hover:#7FE4FF;  /* schiarisce, perché dentro c'è testo scuro (13,49:1) */
  --accento-t:#2BD4FF;      /* porta testo di suo: 11,17:1, senza bisogno di schiarirlo */
  --accento-in:#0B0B12;     /* ⚠️ SCURO dentro il ciano. Bianco = 1,76:1, illeggibile */
  --segno:#6D4BFF;          /* il viola · 3,83:1 · solo tratti e tinte, mai inchiostro */
  --segno-pieno:#9B85FF;    /* il viola quando fa da FONDO · dentro si scrive SCURO (6,72:1 misurato) */
  --segno-in:#0B0B12;       /* ⚠️ SCURO dentro il viola pieno. Vedi la nota su .riq--segnato */
  --tratto:#6B7280;         /* linee degli schemi: 3,70:1, la soglia del non-testo */
  /* il blocco che sta a parte: chiaro dentro la pagina scura */
  --blocco:#EFF1F3;
  --blocco-ink:#0B0B12;     /* 17,32:1 dentro il blocco */
  --blocco-testo:#3a3a44;   /* 9,93:1 */
  /* Dentro il blocco chiaro l'accento si inverte con lui: il ciano su carta
     fa 1,55:1 e non può portare niente, quindi lì torna il viola scuro. */
  --blocco-acc:#5A34E8;     /* 6,00:1 sul blocco chiaro */
  /* ⚠️ Stessa faccenda per il rosso: #FF6B6B è tarato sul fondo scuro
     (6,44:1) e dentro il blocco chiaro crolla a 2,45:1, sotto perfino la
     soglia dei tratti. Qui va questo, che fa 5,05:1 e regge anche come
     testo. Vale per le croci e per i filetti dentro `.riq--pieno`. */
  --blocco-no:#C81E28;      /* 5,05:1 sul blocco chiaro */

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

  /* ⚠️ 05/09: i titoli passano da Anton a Recursive, in grassetto, scelto
     da Gabriele sul banco caratteri. Anton resta SOLO nel marchio, che è
     l'identità e non un titolo: per quello c'è --f-marchio.
     Conseguenza da sapere: Anton era condensato e Recursive no, quindi lo
     stesso titolo occupa più larghezza. Le misure scendono di conseguenza,
     se no le headline da tre righe ne prendono cinque. */
  --f-tit:'Recursive','Segoe UI',system-ui,sans-serif;
  /* ⚠️ 05/09 04:18: anche il marchio passa a Recursive, su richiesta di
     Gabriele. Anton è uscito dal sito: reggeva una parola sola e pesava
     18,6 KB scaricati da tutti. Il token resta come alias del titolo, così
     se un giorno il marchio deve tornare a distinguersi si cambia qui. */
  --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;
}

/* MONDO CALDO — solo la sezione Claude, si accende con un attributo.
   Non è una variante inventata: è il mondo scuro che il kit K6 aveva già. */
[data-mondo="claude"]{
  --fondo:#1F1E1D;          /* caldo, non nero-blu */
  --superficie:#262624;
  --superficie-2:#2E2D2A;
  --filo:#3A3936;
  --filo-forte:#504D47;
  --ink:#F5F4EF;            /* 15,11:1 */
  --testo:#DAD7CF;
  --muto:#B7B4AC;           /* 8,03:1 */
  --accento:#D97757;        /* il coral vero · 5,33:1 · dentro si scrive SCURO */
  --accento-hover:#E08A6B;  /* schiarisce, perché dentro c'è testo scuro */
  --accento-t:#E08A6B;      /* 6,35:1 sul fondo e 5,26:1 anche su --superficie-2 */
  --accento-in:#1F1E1D;     /* ⚠️ SCURO dentro il coral (5,33:1). Bianco = 3,12:1 */
  --segno:#70A574;          /* salvia: il supporto, distingue senza chiamare */
  --segno-pieno:#70A574;    /* qui la salvia fa gia da fondo: dentro si scrive scuro (5,94:1) */
  --segno-in:#1F1E1D;
  --tratto:#736F66;
  --blocco:#F5F4EF;
  --blocco-ink:#1F1E1D;     /* 15,11:1 */
  --blocco-testo:#3A3733;   /* 10,75:1 */
  --blocco-acc:#A85337;     /* 4,82:1 — il coral scuro, che sul chiaro regge */
}

/* --- fondamenta --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* color-scheme:dark dice al browser che i controlli nativi — menù a
   tendina, casella di spunta, barre di scorrimento — vanno disegnati scuri.
   Senza, restano bianchi in mezzo alla pagina e sembrano un errore. */
html{scroll-behavior:smooth;background:#0B0B12;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 ne va con Anton, e non è una libertà: Anton
   è un condensato da manifesto, disegnato per stare tutto in maiuscolo.
   Recursive è un carattere da testo. Le stesse parole in maiuscolo qui
   diventano circa un terzo più 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}
/* Titolo di riquadro: è un h3 per la struttura (niente salti di livello),
   ma non urla come un titolo di sezione. */
/* Il titolo di scheda è un h3 per la struttura 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)}
:focus-visible{outline:3px solid var(--accento);outline-offset:3px}
/* Il fuoco usa l'accento, che dallo scambio è il ciano: 11,17:1 sul fondo.
   Prima puntava a --segno, che allora era il ciano; adesso --segno è il viola
   e a 3,83:1 un anello di fuoco si vedrebbe appena. */

/* --- griglia visibile (regola C) · ⛔ PENSIONATA il 2026-09-06 -----------
   Tolta dall'apertura su giudizio di Gabriele: «troppo ai slop». Ha ragione,
   e lo dice il manifesto qui sopra prima di lui — «cosa non c'è: parallasse,
   animazioni, foto stock, icone decorative generiche». Una griglia a un solo
   passo su fondo scuro era l'unico elemento puramente decorativo della
   pagina, cioè 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-*` più giù: se
   la texture torna, torna in un attimo rimettendo `griglia` sulla sezione.
   Se torna, però, che non sia questa: una griglia a DUE frequenze — fitta
   più una riga marcata ogni dieci, cioè la carta millimetrata di un
   geometra — direbbe qualcosa del mestiere di chi legge invece di dire
   «sito tecnologico».

   [storico] Sul chiaro le righe erano scure. Ribaltando devono essere
   CHIARE, o la griglia sparisce: è lo stesso difetto già pagato una volta
   con la scorciatoia `background`, solo in un altro punto. */
.griglia{
  background-image:
    repeating-linear-gradient(0deg,transparent 0 calc(var(--passo) - 1px),rgba(239,241,243,.055) calc(var(--passo) - 1px) var(--passo)),
    repeating-linear-gradient(90deg,transparent 0 calc(var(--passo) - 1px),rgba(239,241,243,.055) calc(var(--passo) - 1px) var(--passo));
}
[data-mondo="claude"].griglia{
  background-image:
    repeating-linear-gradient(0deg,transparent 0 calc(var(--passo) - 1px),rgba(245,244,239,.06) calc(var(--passo) - 1px) var(--passo)),
    repeating-linear-gradient(90deg,transparent 0 calc(var(--passo) - 1px),rgba(245,244,239,.06) calc(var(--passo) - 1px) var(--passo));
}

/* --- 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→104 (56→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 (#0B0B12 → #16171D) misura
   1,097:1 e nessuno lo vede: finche resta cosi, il capitolo lo separa lo
   spazio, non il colore. */
.sez{background-color:var(--fondo);border-top:1px solid var(--filo);padding:104px 0}
.sez--fitta{padding:52px 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% più alta». Misurata prima di
   toccarla: 531px a 1440. +25% = 664, cioè 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. */
.sez--prima{border-top:0;padding-top:106px;padding-bottom:142px}
@media(max-width:640px){.sez--prima{padding-top:64px;padding-bottom:88px}}
.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}
/* 1,60 → 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}

/* filetto di apertura sezione — il ciano fa il segno, non l'inchiostro */
.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;
}
/* un token solo per l'hover: la direzione la decide il mondo, non la regola */
.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{
  background:var(--superficie);border:1px solid var(--filo);
  padding:26px 26px 24px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  display:flex;flex-direction:column;gap:12px;
}
/* dentro una sezione già sollevata il riquadro sale ancora di un gradino */
.sez--bianca .riq{background:var(--superficie-2)}
/* Il blocco che sta a parte: sul chiaro era scuro, sullo scuro è chiaro.
   Tutto quello che ci sta dentro cambia colore, accento compreso. */
.riq--pieno{background:var(--blocco);border-color:var(--blocco)}
.sez--bianca .riq--pieno{background: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:500;font-size:13px;letter-spacing:.06em;
  color:var(--accento-t);border:1px solid var(--filo-forte);
  padding:5px 11px;display:inline-block;font-variant-numeric:tabular-nums;
}
.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{
  font-family:var(--f-dati);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muto);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 «Io, da solo», «Te la monti tu», «Uno studio» — cioe le tre 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» si tinge appena di viola. Sul chiaro bastava il 6%,
   sullo scuro una velatura così leggera non si vede: serve più corpo. */
td.mia{background:rgba(43,212,255,.12)}
[data-mondo="claude"] td.mia{background:rgba(217,119,87,.13)}

/* --- segnaposto immagine ------------------------------------------------ */
.segnaposto{
  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;
  color:var(--muto);line-height:1.8;
}
.segnaposto--alto{min-height:320px}
.da-decidere{
  font-family:var(--f-dati);font-size:.86em;font-weight:500;
  background:rgba(43,212,255,.14);color:var(--accento-t);
  padding:1px 7px;border:1px solid rgba(43,212,255,.38);white-space:nowrap;
}

/* --- testata ------------------------------------------------------------ */
.testata{
  position:sticky;top:0;z-index:20;background:var(--fondo);
  border-bottom:1px solid var(--filo);
}
/* La testata resta fredda anche sopra la sezione calda, ed è voluto:
   appartiene alla pagina, non alla sezione sotto cui scorre. */
/* La testata cresce da 66 a 78px per fare posto al segno più grande:
   il segno è centrato in assoluto, quindi da solo non spingerebbe niente e
   sarebbe uscito dalla fascia scavalcando il bordo. */
.testata .dentro{display:flex;align-items:center;gap:22px;height:78px;position:relative}
/* Il marchio è «MORE.leads»: «MORE» in maiuscolo (scelto da Gabriele il 04/09,
   commento 0af6063a), il punto viola, «leads» minuscolo ciano. In tre
   colori: la parola in inchiostro, il punto viola, «leads» ciano.
   ⚠️ Il punto usa il viola CHIARO #9B85FF (6,72:1) e non #6D4BFF (3,83:1):
   un punto fermo è un glifo di testo, non un tratto, quindi la soglia è 4,5
   e non 3. Da lontano è lo stesso viola. */
/* ⚠️ NIENTE gap qui dentro. Il marchio è un flex, e i suoi tre pezzi —
   «MORE», il punto, «leads» — sono tre elementi flex: un gap li separa TUTTI,
   e il nome si legge «MORE . leads», tre parole invece di una. Il gap serviva
   a staccare il segno grafico quando stava dentro il link; da quando il segno
   è uscito e sta al centro della testata, quel gap non separa più il segno dal
   nome: separa il nome da sé stesso. */
.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 una M
   di cristallo non si legge come «more.leads», e la testata è il punto in cui
   uno deve capire dov'è. Il file è alto 96 px e si vede a 36: il doppio, per
   gli schermi fitti. alt="" perché il nome è già scritto qui di fianco — un
   lettore di schermo che dicesse «logo more.leads MORE.leads» lo ripeterebbe. */
/* 62px in una fascia da 78: otto di aria sopra e sotto. Il file è alto 140,
   cioè più del doppio, così resta nitido sugli schermi fitti. */
.marchio-segno{height:62px;width:auto;display:block;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none}
/* ⚠️ Sotto i 760px il segno centrato finirebbe sopra il marchio o sopra il
   pulsante: la testata non ha più la larghezza per tre cose. Lì torna dov'era
   utile, cioè fuori dai piedi — sparisce, e il nome resta. Non è una perdita:
   il nome è quello che deve leggersi in cima, il segno è un di più. */
/* ⛔ ROVESCIATA il 2026-09-06: «su mobile non vedo il logo, mettilo nel nav».
   Non spariva per un difetto misurato ma per prudenza. Misurato adesso, 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 — la prudenza di allora era giustificata,
   la misura di adesso dice che a 46 il problema non c'e. */
@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 cramped, e in cima alla pagina si vede. Misurato a 320, non stimato. */
@media(max-width:359px){.marchio-segno{display:none}}
/* ⚠️ Il punto di Recursive ha le spalle larghe: fra MORE, il punto e leads
   si aprivano due buchi e il marchio si leggeva «MORE . leads», cioè tre
   parole invece di una. Si tirano dentro i due lati del punto. La misura è
   in em, non in px, così regge anche quando il marchio rimpicciolisce. */
/* ⚠️ Qui prima c'erano due margini negativi grossi, e compensavano la cosa
   sbagliata: credevo fossero le spalle larghe del punto di Recursive, e invece
   era il gap del flex qui sopra. Tolto quello, al punto basta un filo. */
.mar-punto{color:#9B85FF;margin-inline:-.02em}
.mar-leads{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)}` è (0,2,0) e batteva `.bottone` (0,1,0):
   il pulsante della testata aveva la scritta grigio chiara sul ciano pieno.
   Serve la stessa specificità per riportare dentro il colore giusto. */
/* Nero pieno sul pulsante della testata, chiesto esplicitamente. Il token
   --accento-in (#0B0B12) era già a 11,17:1, ma #000 non lascia dubbi. */
.testata .bottone{padding:11px 20px;font-size:15px;color:#000}
.voci a.bottone{color:#000}
.voci a.bottone:hover{color:#000}
.tel-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}
.tel-testata:hover{color:var(--accento-t)!important}
/* Sul telefono cadono le ancore e resta il comando. Il numero è stato tolto
   dalla testata il 04/09: prima teneva lui il posto qui sotto. */
@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}
  .tel-testata{font-size:14px}
}
/* Sotto i 480 il pulsante mandava a capo. Adesso che il numero non c'è più
   c'è spazio: si stringe invece di sparire, così 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{
  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)}
.scelta[aria-pressed="true"]{background:var(--accento);color:var(--accento-in);border-color:var(--accento)}
.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 il viola pieno: qui è un tratto,
   non un testo, e 3,83:1 su un filetto da 2px si vede benissimo. */
.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 ------------------------------------------------------------- */
.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 opacità sul segnaposto del campo: abbasserebbe un contrasto già
   misurato. Il colore è già 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 ---------------------------------------------------------------
   Sul chiaro il piede era il blocco scuro che chiudeva la pagina. Sullo scuro
   non può essere un blocco chiaro — sarebbe un lampo in fondo — quindi va
   nell'altra direzione: **più scuro del fondo**, con un filo che lo stacca. */
.piede{background:#07070B;color:#C8CBD3;padding:56px 0 30px;border-top:1px solid var(--filo)}
.piede h3,.piede .titolino{color:var(--ink)}
.piede a{color:var(--ink)}
.piede a:hover{color:var(--accento-t)}
.piede .et{color:#8B939E}
.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 #22222A;
  font-size:13.5px;color:#8B939E;display:flex;flex-direction:column;gap:6px;
}

@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:72px 0}
  body{font-size:16px}
}
@media(max-width:560px){
  .piede-rete{grid-template-columns:1fr}
  :root{--passo:48px}
}

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

   ⚠️ Nota di merito, lasciata scritta perché è già 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 è deliberata e dichiarata, non ereditata.

   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'ereditarietà, 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 è 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 metà. */
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 — un campo che si compila da centro è scomodo, e non è 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}

/* ==========================================================================
   Ritocchi chiesti sui commenti dell'artifact — 2026-09-04 (T-260904-36)
   ========================================================================== */

/* La battuta che si stacca dal paragrafo e va letta da sola.
   Non è un titolo: è testo, quindi resta nel carattere del corpo. */
/* «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 è 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;
  color:var(--ink);max-width:30ch;margin-inline:auto;
}

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

/* I numeri delle tre 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 scuro.
   Sostituisce il blocco chiaro solo dove serve gridare, non ovunque. */
/* ⚠️ Serve la stessa specificità di `.sez--bianca .riq--pieno` (0,2,0):
   con il solo `.riq--colorato` (0,1,0) il bordo diventava ciano e il fondo
   restava chiaro. Una classe che perde una guerra di specificità non dà
   errore: fa metà del suo lavoro, ed è il modo peggiore di sbagliare. */
.riq--colorato,
.sez--bianca .riq--colorato,
.riq--pieno.riq--colorato{background:var(--accento);border-color: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)}
[data-mondo="claude"] .riq--colorato p,
[data-mondo="claude"] .riq--colorato li,
[data-mondo="claude"] .riq--colorato span{color:var(--accento-in)}

/* LA SCHEDA SEGNATA · 06/09, su commento di Gabriele sul terzo step.
   Sorella di `.riq--colorato`, col viola invece del ciano.

   ⚠️ Il fondo NON e `--segno` (#6D4BFF), e la ragione e misurata. #6D4BFF
   come fondo obbliga a scrivere CHIARO: con `--ink` fa 4,52:1, il paio piu
   stretto di tutta la pagina, e col testo scuro fa 3,80:1, che non passa.
   Peggio: inventerebbe una seconda regola in contraddizione con la prima,
   perche in questa casa «dentro un accento chiaro si scrive scuro» — vale
   per il ciano e per il coral, e il collaudo lo controlla.
   Il fondo e quindi il viola chiaro #9B85FF, che quella regola la tiene:
   dentro ci si scrive scuro. 6,72:1, misurato dipinto e non calcolato.

   ⚠️ Stessa specificita di `.sez--bianca .riq--pieno` (0,2,0), per la
   ragione gia scritta sopra a `.riq--colorato`: una classe che perde una
   guerra di specificita non da errore, fa meta del suo lavoro. */
.riq--segnato,
.sez--bianca .riq--segnato,
.riq--pieno.riq--segnato{background:var(--segno-pieno);border-color: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 finché non li tocchi, pieni quando ne scegli uno. */
.scelta{border-color:var(--accento);color:var(--accento-t)}
.scelta:hover{background:rgba(43,212,255,.1);border-color:var(--accento-hover)}

/* ==========================================================================
   IL BANNER DELLA FORMAZIONE — 2026-09-04 (T-260904-36)
   Chiuso si legge solo il titolo e il comando; aperto allunga la pagina con
   la sezione intera. È un `<details>` nativo: si apre senza JavaScript,
   risponde a Invio e Spazio, e annuncia da sé aperto/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.
   Sta prima del modulo di chiusura, non più dopo i prezzi: è la seconda
   porta, e si offre a chi ha letto tutto e sta decidendo.
   ========================================================================== */

.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 è 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;
}
/* «Claude» nel colore di Claude: il coral, 5,33:1 sul fondo caldo */
.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:"Sì"}
details[open] .banner-comando::after{content:"Chiudi"}

/* il corpo, quando è 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 più alto e la scritta più 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 è VIOLA, cioè il segno:
   3,16:1 sulla superficie delle schede, sopra la soglia dei tratti (3:1).
   Sottolineare col ciano lo avrebbe fatto sembrare un comando, e non lo è. */
.filo-segno{
  display:inline-block;
  border-bottom:3px solid var(--segno);
  padding-bottom:9px;
}

/* La parola «Claude» e la voce di menu che porta da lei prendono il coral,
   che è il colore di quel mondo. Sul fondo freddo #0B0B12 fa 6,28:1 e sulla
   superficie 5,73:1: regge come testo, senza schiarirlo.
   È l'unica cosa che attraversa il confine fra i due mondi, ed è voluto:
   dice «di là si cambia argomento» prima ancora che tu ci arrivi. */
.parola-claude{color:#D97757;font-weight:700}
.voce-claude{color:#D97757!important}
.voce-claude:hover{color:#E08A6B!important}

/* Nel titolo dell'apertura due parole prendono il colore del loro mondo:
   «Consulenze» il viola del segno, «Formazione» il coral di Claude.
   Il viola è il chiaro #9B85FF, lo stesso del punto nel marchio: su un titolo
   così grande passerebbe anche #6D4BFF (3,83:1, e sopra i 24px la soglia è 3),
   ma sarebbe smorto accanto al ciano e non somiglierebbe al punto. */
/* Nel titolo dell apertura la parola che porta il peso prende l accento.
   Dal 04/09 quella parola e «leads», che e anche meta del nome: il ciano
   fa 11,17:1 sul fondo e lega il titolo al marchio.
   Le due classi sotto restano definite ma non sono piu usate in pagina:
   servivano al titolo-elenco precedente, e le tengo perche rientrano in un
   attimo se il titolo torna a nominare i servizi. */
/* ⚠️ Il nome dice `h1` per ragioni storiche: dal 06/09 questi quattro segnano
   UNA PAROLA dentro un titolo qualunque, non solo dentro l'apertura. Il primo
   fuori dall'h1 e «performa» nel titolo «Cosa performa e cosa non lo fa»
   (sezione 9, su --superficie: 10,19:1 misurato dipinto). La scelta del colore
   non e libera, segue il vocabolario dei segni: ciano su cio che deve
   SUCCEDERE, viola su cio che uno HA GIA o su una tesi. */
.h1-accento{color:var(--accento)}
/* «virali» in viola chiaro 6,72:1 — è la parola del problema, non dell azione:
   il ciano resta all esito («leads»), il viola segna e non chiama. */
.h1-segno{color:#9B85FF}
.h1-viola{color:#9B85FF}
.h1-coral{color:#D97757}

/* ═══════════════════════════════════════════════════════════════════
   LA FASCIA DEI LOGHI · portata qui dal sito Prisma (04/09).
   Niente titolo di sezione e niente richiesta: è una prova, non una
   battuta, e sta fra il «chi sono» e il «problema» apposta — arriva
   subito dopo che ha detto di essere da solo, ed è lì che serve.

   ⚠️ I loghi NON sono inline. Lo sprite del sito Prisma pesa 87 KB
   (35 KB compressi) e avrebbe quasi raddoppiato il peso della prima
   visita di una pagina che vende siti veloci. Qui sono sei <img> SVG
   separati: pesano fuori dall HTML, si mettono in cache come i font e
   arrivano dopo il resto (loading=lazy).
   ⚠️ Il primo tentativo era `mask-image`, per far prendere al logo il
   colore del token invece di scriverglielo dentro. Non dipingeva
   niente e non dava errore: la maschera e soggetta a CORS, e da
   file:// l origine e opaca — quindi in locale non si poteva nemmeno
   collaudare. Il colore --muto #8B939E adesso sta scritto nei sei
   file: se cambia il token vanno cambiati anche quelli.

   ⚠️ LA CUCITURA (è un conto, non un gusto). Il nastro porta due volte
   la stessa serie e trasla di -50%. Ma con flex e gap G su N elementi
   la larghezza è somma + (N-1)*G: manca l'ultimo gap, la metà non cade
   sul primo logo della seconda serie e a ogni giro si vede il salto.
   Con `padding-inline-end` pari al gap il totale diventa somma + N*G e
   la ripartenza sparisce.

   ⚠️ Il movimento si ACCENDE dentro no-preference, non si spegne da
   fuori: spegnendolo l'animazione parte comunque e viene troncata, e
   la giostra resta ferma con i loghi a metà corsa. */
/* La sfumatura ai due bordi non è un vezzo: il nastro entra ed esce dal
   taglio della sezione, e senza sfumatura il primo logo risulta tranciato
   di netto contro il bordo — che a nastro fermo (chi ha chiesto meno
   movimento) sembra un difetto di impaginazione, non una scelta.
   È un gradiente, non un file: nessuna richiesta in più e nessun CORS. */
.fascia{background-color:var(--superficie);border-top:1px solid var(--filo);
  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)}
.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}
.giostra{display:flex;width:max-content;align-items:center;
  gap:76px;padding-inline-end:76px}
/* --k scala tutti i loghi insieme tenendo le proporzioni misurate
   sulle sorgenti: --w e --h sono i numeri veri, non arrotondati. */
.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}
/* La giostra gira solo dove girare serve a qualcosa. Misurato il 06/09 su
   commento di Gabriele («sul telefono non scorre e non si vedono tutti»):
   a 375px il nastro e largo 1638, la meta 819, e in finestra ci stanno
   3 marchi su 12. Il giro dura 64s: per vederli tutti bisogna restare
   fermi mezzo minuto su una fascia che si attraversa in due secondi.
   E chi ha «riduci movimento» acceso — sull'iPhone e comunissimo — non
   li vede MAI, perche l'animazione non parte affatto.
   Quindi: sopra i 640px gira, sotto (e ovunque il movimento sia ridotto)
   diventa un nastro che si spinge col dito. */
@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(-50%)}}

/* Quando NON gira si scorre a mano. Le copie con aria-hidden esistono solo
   per far richiudere il giro: a mano sarebbero sei marchi visti due volte,
   quindi spariscono. Il padding di 28px tiene il primo e l'ultimo fuori
   dalla sfumatura della fascia, 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}
  .giostra{gap:52px}
  .marchio-logo{--k:.85}
}

/* ═══════════════════════════════════════════════════════════════════
   SPUNTE E CROCI · 04/09 sera, commenti cf658c3e e 1443ff20.
   Due colori nuovi, e sono gli unici due che entrano nella palette da
   quando è stata fissata. Misurati, non scelti a occhio:
     verde  #4ADE80 · 11,25:1 sul fondo · 10,26:1 sulla superficie
     rosso  #FF6B6B ·  7,07:1 sul fondo ·  6,44:1 sulla superficie
   Passano la soglia del TESTO (4,5), non solo quella dei tratti (3), e
   quindi reggerebbero anche se un giorno portassero una parola.
   ⚠️ Le tinte: verde 142°, rosso 0°, ciano 192°. Il verde sta a 50° dal
   ciano, che è la distanza minima perché due segni piccoli non si
   confondano. Il coral di Claude (15°) sarebbe stato addosso al rosso,
   ma il mondo caldo è uscito dalla pagina stasera e il posto è libero.
   ⚠️ Il colore non è mai l'unica informazione: nella tabella l'intestazione
   di colonna dice già «Passa» e «Non passa», e nelle due metà il titolo
   dice «Serve quando» e «Non serve quando». Per questo le SVG sono
   aria-hidden — ripetere «passa» sei volte peggiorerebbe l'ascolto. */
:root{--si:#4ADE80;--no-c:#FF6B6B}
.spunta,.croce-r{width:20px;height:20px;flex:none;display:inline-block;
  vertical-align:-4px;margin-inline-end:8px;
  fill:none;stroke-width:2.6;stroke-linecap:butt;stroke-linejoin:miter}
.spunta{stroke:var(--si)}
.croce-r{stroke:var(--no-c)}
/* dentro la tabella il segno sta sulla prima riga del testo, non a metà
   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 metà. Non è una .rete--2 qualsiasi: ognuna porta il suo filo
   colorato in alto, che è il modo del kit di dire «questo blocco è 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. È una scelta forte:
   un mono a corpo di lettura è più largo e più lento da leggere di un
   grottesco, e su paragrafi lunghi si sente. Qui però le schede portano
   testi corti, e il mono le fa somigliare a una scheda tecnica invece che
   a un blocco di prosa: è lo stesso mestiere che fa già nelle etichette.
   ⚠️ La misura scende a 15px e l'interlinea sale: DM Mono ha l'occhio
   piccolo, e alla misura del corpo normale sembrerebbe più piccolo di
   quello che è. */
.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: è una striscia che scorre in orizzontale
   con scroll-snap, e le quattro schede si agganciano una alla volta.
   ⚠️ Le pastiglie 01-04 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 è spento.
   ⚠️ La striscia ha tabindex="0" via CSS? No: un contenitore che scorre
   dev'essere raggiungibile da tastiera, e i browser moderni lo rendono
   focalizzabile da soli quando ha overflow. Il gruppo è etichettato, così
   chi ascolta sa che le schede sono quattro e vanno scorse. */
.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){
  .carosello-nastro{grid-auto-columns:88%}
  /* Sul telefono i sei passi sono il modo con cui si cambia scheda, e
     misuravano 43×36: 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}
}

/* Le due colonne della tabella: la sua in viola, come ha chiesto. Il viola
   è il segno, e qui segna «questa è la mia», che è esattamente distinguere
   senza chiamare. Su --superficie-2 il viola chiaro fa 5,55:1. */
.mia-t{color:#9B85FF!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: il nero sulla
   scheda chiara, il bianco su quella scura. */
.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)}
/* Il rosso si scambia dentro il blocco chiaro, come fa il ciano. */
.riq--pieno .croce-r{stroke:var(--blocco-no)}
/* Il filetto sotto la frase che chiude la scheda nera. Non è decorazione:
   è 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}


/* ═══════════════════════════════════════════════════════════════════
   LA FOTO · 05/09, commento c10345d0.
   È la prima immagine vera della pagina: fino a stasera c'erano solo
   segnaposto. Sta dentro la sezione che dice «un sito non è una vetrina»,
   e la foto è una vetrina accesa di notte con la strada vuota — l'argomento
   della sezione, non un ornamento.
   ⚠️ Angolo tagliato come tutto il resto, e nessuna cornice sfumata
   (regola A). La didascalia porta il senso: senza, è 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: il telefono e 4:3 e la
   vetrina 16:9, quindi a colonna piena (1180) il telefono viene alto 885px
   contro i 664 della vetrina — il 33% in piu, a parita di larghezza. Al 70%
   scende a 826x620, cioe appena piu bassa della vetrina, 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}
}
.foto picture{display:block;width:100%;
  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:1px solid var(--filo)}
/* ⚠️ 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 (581x777)
   e lei a decidere — il testo di fianco si allunga a 777 con 440px di vuoto
   sotto. Misurato: scarto 0, ma nel verso sbagliato.
   L'immagine va tolta dal calcolo dell'altezza, e si toglie mettendola in
   assoluto: cosi la riga la decide il TESTO, e la figura ci si adatta. */
.foto--ritratto{position:relative;height:100%;min-height:340px}
.foto--ritratto picture{position:absolute;inset:0;display:block}
.foto--ritratto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%}
@media(max-width:860px){
  /* Colonna sola: nessuno con cui pareggiarsi. La sorgente e 16:9 e a 331px
     verrebbe alta 186, cioe una striscia. Un 4:3 la porta a 248 tagliando
     solo i lati, e dentro restano l'uomo e il portatile. */
  .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 Pexels: obbligatorio in pagina, quindi VISIBILE. Piccolo, non
   nascosto: nasconderlo sarebbe come non scriverlo. */
.crediti-foto{color:var(--muto)}

/* 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 la domanda dell etica: 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.
   Gabriele ha chiesto il viola sotto «casa» e il ciano sotto «cucina», e
   la scelta torna con i mestieri che i due colori hanno già nel foglio:
   il viola è il SEGNO — distingue senza chiamare, ed è la casa, quello che
   uno ha già; il ciano è l'ACCENTO — «qui si agisce», ed è la cucina, dove
   la cosa succede. Non è una decorazione: è la stessa frase detta due volte,
   una a parole e una a colori.
   ⚠️ Non riuso .filo-segno: quello ha 9px di stacco perché sta sotto un
   titolo di scheda. Dentro una riga di testo la riga cadrebbe troppo bassa e
   toccherebbe la riga dopo.
   Misure: viola 3,83:1 e ciano 11,17:1 sul fondo — sono tratti, la soglia è 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 è 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 è quello che serve quando la battuta si spezza sul telefono.
   Spessore e stacco sono gli stessi del filetto, così 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)}