/* ==========================================================================
   SEGNALAZIONE VINCENTE — Design system
   Ingegneria Relazionale: la disciplina che tratta le relazioni come un
   sistema progettabile e misurabile.

   DIREZIONE (revisione del 2026-08-13, richiesta di Oscar: «più professionale,
   sullo stile di protolabs.com»). Il registro è quello dei fornitori
   industriali B2B seri: fondo bianco, bande alternate, titoli di sezione
   centrati, una sola azione a colore pieno, angoli appena smussati, densità
   alta e niente svolazzi. La versione precedente era un documento editoriale —
   colonna di marginalia, filetti sottili, spalla condensata a 68px: bella da
   guardare, ma parlava da rivista invece che da fornitore.

   COSA RESTA. La palette (oro, nero caldo, bianco — decisione di Oscar) e il
   TAG DI MISURA: ogni numero pubblicato porta con sé la finestra temporale e
   il metodo. È il vincolo etico del canone («senza misura non c'è scienza»)
   trasformato in componente, ed è la cosa che ci distingue davvero da un
   fornitore che pubblica solo i numeri che gli fanno comodo. Il 6% di match
   senza risposta sta nella stessa fila del 68%, con lo stesso trattamento.

   TIPOGRAFIA. IBM Plex, tre ruoli:
     - Sans Condensed 700 → display (richiama la condensata del logo)
     - Sans              → corpo, alta leggibilità (pubblico 40-65, mobile)
     - Mono              → SOLO dati, etichette e finestre temporali
   ========================================================================== */

/* --- Font ---------------------------------------------------------------
   IBM Plex auto-ospitato in assets/fonts/ (SIL OFL), subset latin+latin-ext,
   solo i pesi usati: ~240 KB totali, zero richieste a terzi (requisito GDPR).

   I @font-face stanno in assets/fonts/fonts.css e vanno collegati con un
   <link> nella pagina, PRIMA di questo foglio. Niente @import: aggiungerebbe
   una richiesta in sequenza invece che in parallelo, e l'LCP ne risente.
   ---------------------------------------------------------------------- */

:root {
  /* ---- Colore: superfici --------------------------------------------- */
  --c-ink: #1e1810;          /* nero caldo del marchio — testo e fondi scuri */
  --c-ink-soft: #2b241a;     /* elevazione su fondo scuro */
  --c-paper: #ffffff;        /* bianco pieno: fondo del sito */
  --c-paper-alt: #f4f2ee;    /* banda alternata, appena calda */

  /* ---- Colore: marchio ------------------------------------------------ */
  --c-gold: #f9c349;         /* primario. MAI testo su fondo chiaro */
  --c-amber: #ffb100;        /* accento, stati attivi */
  --c-gold-tint: #fdf1d6;    /* superficie dell'azione secondaria */

  /* ---- Colore: testo -------------------------------------------------- */
  --c-text: var(--c-ink);
  --c-text-muted: #5f5d57;   /* 6,6:1 su bianco, 5,9:1 sulla banda — AA */
  --c-text-on-dark: #f6f4f0;
  --c-text-muted-on-dark: #b0aca3;  /* 7,8:1 su ink */
  --c-rule: #e3ded5;         /* bordi e filetti su chiaro */
  --c-rule-dark: #3a3227;    /* filetti su scuro */

  /* L'unico colore fuori dalla palette del marchio in tutto il foglio, e vale
     solo per la validazione dei moduli. L'oro è il colore dell'azione: usarlo
     anche per l'errore renderebbe indistinguibili i due stati, e su fondo
     chiaro non è comunque leggibile come testo (1,6:1). */
  --c-error: #a3231b;        /* 7,5:1 su bianco, 6,7:1 sulla banda — AA */

  /* Contrasti calcolati sui valori qui sopra, non stimati a occhio
     (WCAG AA = 4,5:1 testo normale, 3:1 testo grande)
     ink su bianco ......... 17,6:1
     ink su banda .......... 15,7:1
     gold su ink ........... 10,8:1
     ink su gold ........... 10,8:1   ← testo dei bottoni
     ink su gold-tint ...... 15,7:1   ← azione secondaria
     muted su bianco ........ 6,6:1
     muted su banda ......... 5,9:1   ← il testo secondario ci finisce spesso
     muted-on-dark su ink ... 7,8:1
     gold su bianco ......... 1,6:1   ← VIETATO per il testo */

  /* ---- Tipografia -----------------------------------------------------
     Scala volutamente contenuta: il riferimento tiene l'H1 a 46px con peso
     700 e crenatura normale. Titoli enormi e molto crenati leggono come una
     rivista; questi leggono come un'azienda. */
  --f-display: "IBM Plex Sans Condensed", "Archivo Narrow", "Helvetica Neue",
               system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;                                /* 17px: leggibilità 40-65 */
  --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --t-2xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
  --t-3xl: clamp(2.125rem, 1.55rem + 2.5vw, 3.25rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* ---- Spazio: scala geometrica --------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  /* ---- Layout --------------------------------------------------------- */
  --w-container: 74rem;
  --w-prose: 40rem;          /* misura di lettura ~72 caratteri */
  --radius: 6px;             /* appena smussato, come il riferimento */
  --radius-lg: 10px;
  --border: 1px solid var(--c-rule);
  --shadow-card: 0 1px 2px rgb(30 24 16 / 6%);
  --shadow-lift: 0 12px 28px rgb(30 24 16 / 12%);

  --tap: 44px;               /* target minimo touch */
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* L'intestazione è appiccicata in cima: un collegamento a un'ancora deve
   fermarsi sotto, non sotto di essa. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { max-width: var(--w-prose); }
p + p { margin-top: var(--s-4); }

/* Paragrafo introduttivo: "cappello", il termine giornalistico italiano.
   Il nome inglese equivalente è vietato dal lessico canonico anche nei nomi
   delle classi, per evitare che rientri dalla finestra. */
.cappello {
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}

strong, b { font-weight: 600; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--c-amber); }

/* Le frasi che non si leggono, si ricordano: la frase madre, il motto, la
   riga che chiude un ragionamento. Due livelli e non uno solo:
   `.statement--madre` (più sotto, con la banda di rottura) è riservato alla
   FRASE MADRE e sta in un posto per pagina; `.statement` da solo è il registro
   delle altre frasi canoniche, e anche quello va usato con parsimonia — due
   per pagina sono già tante, tre lo svuotano. */
.statement {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  max-width: 24ch;
  text-wrap: balance;
}
/* L'enfasi cambia tecnica col fondo, perché l'oro non è leggibile sul chiaro.
   Su carta: sottolineatura spessa, il colore decora e il nero porta il
   contrasto. Su fondo scuro: oro pieno, che lì vale 10,8:1. */
.statement em {
  font-style: normal;
  box-shadow: inset 0 -0.18em 0 var(--c-gold);
}
.section--ink .statement em {
  color: var(--c-gold);
  box-shadow: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--s-8); }
@media (min-width: 60rem) { .section { padding-block: var(--s-9); } }

.section--tight { padding-block: var(--s-7); }
.section--alt { background: var(--c-paper-alt); }

/* Sezione scura: il registro della disciplina. */
.section--ink {
  background: var(--c-ink);
  color: var(--c-text-on-dark);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--c-text-on-dark); }
.section--ink .cappello { color: var(--c-text-muted-on-dark); }
.section--ink .rule { background: var(--c-rule-dark); }

/* --- Testata di sezione, centrata ---------------------------------------
   È il segno che dà al sito il passo del fornitore invece che quello della
   rivista: ogni blocco si presenta al centro, poi il contenuto si apre in
   griglia sotto. ---------------------------------------------------------- */
.section__head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--s-7);
  text-align: center;
}
.section__head p { margin-inline: auto; }
.section__head .cappello { max-width: 40rem; }

/* Coda di sezione: ciò che viene DOPO la griglia e la commenta — l'elenco
   delle sei dimensioni, la riga che dice dove continua la lettura. Torna al
   centro come la testata, così il blocco si chiude dove si era aperto. */
.section__foot {
  max-width: 52rem;
  margin-inline: auto;
  margin-top: var(--s-7);
  text-align: center;
}
.section__foot p { margin-inline: auto; }
.section__foot .eyebrow + .tags { margin-top: var(--s-3); }

/* Approfondimento agganciato al blocco principale della sezione: la stessa
   sezione continua, non ne comincia un'altra. Perciò uno stacco più corto di
   quello fra due sezioni. */
.section__more { margin-top: var(--s-7); }

/* --- Due colonne: testo e materiale --------------------------------------
   Il riferimento alterna testo a sinistra e oggetto a destra. `.split--flip`
   inverte l'ordine visivo senza toccare l'ordine di lettura. */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .split--flip > :first-child { order: 2; }
}

/* Testo contro testo: le due colonne partono dalla stessa riga. Il centraggio
   di `.split` serve a far galleggiare un testo accanto a una figura; fra due
   blocchi di prosa di lunghezza diversa produce solo un gradino. */
.split--top { align-items: start; }

.rule { height: 1px; background: var(--c-rule); border: 0; margin-block: var(--s-6); }

/* ==========================================================================
   Componenti
   ========================================================================== */

/* --- Occhiello ----------------------------------------------------------
   Etichetta breve sopra un titolo. La numerazione si usa SOLO dove l'ordine
   è informazione vera: le sei leggi, i quattro tempi del metodo, i cinque
   livelli di maturità. Mai come decorazione.
   ---------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.section--ink .eyebrow { color: var(--c-gold); }
.section__head .eyebrow { margin-bottom: var(--s-3); }

.eyebrow__num { font-variant-numeric: tabular-nums; }

/* --- TAG DI MISURA — l'elemento firma -----------------------------------
   Ogni numero pubblicato porta con sé la finestra temporale e il metodo.
   Non usare mai per numeri privi di finestra: se manca, manca il tag.
   Il filetto d'oro è passato da sinistra a sopra: in una fila di dati
   allineati la riga superiore li lega, il bordo laterale li spezzava.
   ---------------------------------------------------------------------- */
.measure {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 3px solid var(--c-gold);
}

.measure__value {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.measure__label {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  max-width: 30ch;
}

.measure__window {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}
.section--ink .measure__window { color: var(--c-text-muted-on-dark); }

/* Il numero scomodo. Stesso posto, stessa fila, stessa dimensione: cambia
   solo il filetto, tratteggiato. Si dichiara, non si nasconde e non si
   drammatizza. */
.measure--candid { border-top-style: dashed; }

/* Le righe sono le stesse per tutti i tag della fila: valore, etichetta che si
   allunga quanto serve, finestra in fondo. Senza questo le finestre partono ad
   altezze diverse e la fila perde l'allineamento che la rende leggibile. */
.measures > .measure { grid-template-rows: auto 1fr auto; }

.measures { display: grid; gap: var(--s-6); }
@media (min-width: 40rem) { .measures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .measures--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 60rem) { .measures--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Bottoni ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Azione primaria: una sola in tutto il sito — AIRA-SCAN©, il check-up
   (D-020, 2026-08-16: prima era l'Analisi Stoica, che adesso si raggiunge dalla
   chiamata e non ha più CTA proprie). Testo nero su oro: 10,8:1. */
.btn--primary { background: var(--c-gold); color: var(--c-ink); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--c-amber); color: var(--c-ink); }

/* Azione secondaria: superficie tenue, nessun bordo. È la seconda strada,
   non un ripiego grafico. */
.btn--soft { background: var(--c-gold-tint); color: var(--c-ink); }
.btn--soft:hover, .btn--soft:focus-visible { background: #fbe7b4; }

/* Azione forte su fondo chiaro dove l'oro non è disponibile: il primario è
   riservato ad AIRA-SCAN© e non si presta a nient'altro. */
.btn--ink { background: var(--c-ink); color: var(--c-text-on-dark); border-color: var(--c-ink); }
.btn--ink:hover, .btn--ink:focus-visible { background: var(--c-ink-soft); border-color: var(--c-ink-soft); }

.btn--ghost { background: transparent; color: currentColor; border-color: var(--c-rule); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--c-amber); }
.section--ink .btn--ghost { border-color: var(--c-rule-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; }

/* --- Formula R = MC/2 — la firma del canone ----------------------------- */
.formula {
  font-family: var(--f-mono);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.formula em { font-style: normal; color: var(--c-gold); }

/* --- Card --------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card > p { max-width: none; }
.section--ink .card { background: var(--c-ink-soft); border-color: var(--c-rule-dark); box-shadow: none; }

/* Card che è tutta un collegamento: si solleva, e il titolo prende il segno
   dell'accento. Il bordo d'oro va sul bordo, mai sul testo. */
.card--link { text-decoration: none; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.card--link:hover, .card--link:focus-visible {
  border-color: var(--c-gold);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.cards { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Campione di colore -------------------------------------------------
   Serve alla pagina del design system: mostra il colore invece di nominarlo.
   Le varianti sono classi e non stili in linea, così il campione resta
   agganciato ai token e non a un valore copiato a mano.
   ---------------------------------------------------------------------- */
.swatch__chip {
  height: 4.5rem;
  border: var(--border);
  border-radius: var(--radius);
}
.swatch__chip--gold { background: var(--c-gold); }
.swatch__chip--amber { background: var(--c-amber); }
.swatch__chip--ink { background: var(--c-ink); }
.swatch__chip--tint { background: var(--c-gold-tint); }
.swatch__chip--paper-alt { background: var(--c-paper-alt); }
.swatch__chip--muted { background: var(--c-text-muted); }

/* --- Riga di credenziali ------------------------------------------------
   Sotto la spalla, come le certificazioni ISO del riferimento: cose piccole e
   verificabili. Se una voce non è verificabile, non entra.

   [CORRETTO 2026-08-15] Prima era una fila con un pallino d'oro *fra* le voci,
   messo con `li + li::before`. Un separatore fra le voci funziona finché la
   fila sta su una riga sola — e qui non ci sta mai: vive nella colonna di
   sinistra della spalla, larga la metà del contenitore, quindi manda a capo
   già sul desktop. Andando a capo il separatore finisce a inizio riga e si
   legge come il punto elenco di una lista sbilenca: la prima voce senza
   pallino, le altre con. Oscar l'ha scambiata per un segnaposto, ed è la
   prova che il componente non stava comunicando quello che doveva.

   Adesso è dichiaratamente un elenco incolonnato: il pallino sta su OGNI voce
   e fa da marcatore invece che da separatore, così è identico sia che le voci
   stiano su una riga sia che stiano su tre. Il pallino resta oro perché è
   superficie, non testo: la regola sul contrasto è salva.
   ---------------------------------------------------------------------- */
.proof {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: var(--border);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}

/* `start` e non `center`: quando una voce va su due righe, il marcatore deve
   restare accanto alla prima riga del testo, non fluttuare a metà del blocco. */
.proof li {
  display: grid;
  grid-template-columns: 4px 1fr;
  align-items: start;
  gap: var(--s-3);
}
.proof li::before {
  content: "";
  width: 4px;
  height: 4px;
  /* mezza riga di testo, meno mezzo pallino: il marcatore si allinea alla
     linea mediana della prima riga invece che al suo bordo superiore. */
  margin-top: calc(0.5em * var(--lh-snug) - 2px);
  background: var(--c-gold);
  border-radius: 50%;
}

/* --- Spalla -------------------------------------------------------------- */
.hero { background: var(--c-paper-alt); padding-block: var(--s-8); }
@media (min-width: 60rem) { .hero { padding-block: var(--s-9); } }
.hero__text > * + * { margin-top: var(--s-5); }
.hero .cappello { max-width: 34rem; }

/* Il riquadro del materiale: figura, video o schermata. Tiene il rapporto
   anche quando l'immagine non c'è ancora. */
.frame {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: var(--c-paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.frame img { border-radius: var(--radius); }
/* Il marchio dentro il riquadro finché il materiale fotografico non c'è. */
.frame__mark { height: 13rem; width: auto; }

/* Fotografia vera: niente margine bianco intorno, l'immagine È il contenuto.
   È la chiusura di D-009 — il riferimento industriale regge su fotografie di
   pezzi reali, e la nostra fotografia sono le sale piene. */
.frame--photo { padding: 0; }
.frame--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Una pagina stampata è verticale: il riquadro cambia proporzione invece di
   tagliarla, e la banda tenue fa da tavolo su cui la pagina è appoggiata. */
.frame--page {
  aspect-ratio: 4 / 5;
  background: var(--c-paper-alt);
}
/* `max-height` e non `height`: con l'altezza imposta, il `max-width: 100%` del
   reset stringe la larghezza senza toccare l'altezza, e la pagina si deforma. */
.frame--page img { max-height: 100%; width: auto; box-shadow: var(--shadow-lift); }

/* --- Banda di chiamata all'azione ---------------------------------------
   Il filetto d'oro in cima non è decorazione: la banda precede il footer, che
   è dello stesso nero, e senza un segno i due blocchi diventano una macchia
   scura sola. È lo stesso filetto del tag di misura e delle porte del 404.
   ---------------------------------------------------------------------- */
.cta-band {
  background: var(--c-ink);
  color: var(--c-text-on-dark);
  border-top: 3px solid var(--c-gold);
}
.cta-band__inner {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 60rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
}
.cta-band h2 { color: var(--c-text-on-dark); }
.cta-band p { color: var(--c-text-muted-on-dark); }

/* --- Frase madre in posizione di rottura --------------------------------
   `.statement` da sola sta dentro un discorso; qui è il discorso. Un solo
   punto per sito — la sezione del rovesciamento — e nessuna variante. ---- */
.statement--madre { font-size: var(--t-3xl); max-width: 20ch; }
.section__head .statement { margin-inline: auto; }

/* --- Riga di etichette ---------------------------------------------------
   Le sei dimensioni di valutazione, i settori, gli attributi: elenchi brevi
   che sono dati, non prosa. Perciò mono, come ogni dato del sito.
   ---------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags--center { justify-content: center; }
.tag {
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.2;
  color: var(--c-text-muted);
  background: var(--c-paper);
  border: var(--border);
  border-radius: var(--radius);
}
.section--alt .tag { background: var(--c-paper); }

/* --- Elenco delle fonti --------------------------------------------------
   Un dato di mercato senza la sua fonte non va sul sito (FONTI-MERCATO.md,
   regola 1). Le note stanno in fondo alla sezione che le usa, non in fondo
   alla pagina: a fondo pagina nessuno le collega più al numero.
   ---------------------------------------------------------------------- */
.sources {
  max-width: 52rem;
  margin-inline: auto;
  padding-top: var(--s-4);
  margin-top: var(--s-6);
  border-top: var(--border);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}
.sources p { max-width: none; }
.sources p + p { margin-top: var(--s-2); }

/* --- Domande frequenti ---------------------------------------------------
   <details> nativo: apertura, stato e tastiera li dà il browser. Le risposte
   restano nel DOM anche da chiuse, quindi sono indicizzabili e coerenti con
   i dati strutturati FAQPage dichiarati in pagina.
   ---------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: 52rem; margin-inline: auto; }

.faq__item {
  background: var(--c-paper);
  border: var(--border);
  border-radius: var(--radius);
}
.faq__item[open] { border-color: var(--c-gold); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap);
  padding: var(--s-4) var(--s-5);
  font-weight: 600;
  line-height: var(--lh-snug);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

/* Il segno è disegnato con due tratti e non con un carattere: il "+" di una
   font di testo non è mai centrato quanto sembra. */
.faq__q::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background:
    linear-gradient(var(--c-ink), var(--c-ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--c-ink), var(--c-ink)) center / 2px 100% no-repeat;
  transition: transform 0.15s ease;
}
/* Aperta: i due tratti ruotano insieme e diventano una croce. Ruotarne uno
   solo lascerebbe una barra obliqua, che non dice «chiudi» né «meno». */
.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__a { padding: 0 var(--s-5) var(--s-5); }
.faq__a > * + * { margin-top: var(--s-3); }
.faq__a p { max-width: none; color: var(--c-text-muted); }

/* ==========================================================================
   Barra di servizio, intestazione e navigazione

   DUE REGIMI, UNA SOLA STRUTTURA HTML.
   - Sotto --nav-bp: pannello a tutta pagina aperto dal bottone. Il JS gestisce
     stato, trappola del focus e Esc; il tab order lo gestisce il CSS con
     display:none, che è più affidabile di aria-hidden.
   - Sopra --nav-bp: barra orizzontale con i sottomenu in tendina, aperti da
     :hover e da :focus-within. Nessun JS: i sottomenu restano nell'albero di
     accessibilità (opacity:0, non visibility:hidden) proprio perché il focus
     deve poterci entrare — è quel focus che li rende visibili.

   La soglia è alta (68rem) perché il menu convive con una CTA lunga: sotto
   quella larghezza la barra orizzontale si spezzerebbe.
   ========================================================================== */

:root {
  --nav-bp: 68rem;
  --topbar-h: 2.25rem;
  --bar-h: 3.75rem;
  /* Altezza totale di ciò che resta appiccicato in cima. Il pannello del menu
     e le ancore la usano: se cambia una delle due misure, cambia qui e basta. */
  --header-h: calc(var(--topbar-h) + var(--bar-h));
}
@media (min-width: 68rem) { :root { --bar-h: 4.5rem; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-paper);
  border-bottom: var(--border);
}

/* --- Barra di servizio ---------------------------------------------------
   La striscia scura del riferimento porta un annuncio; qui porta le due cose
   che un imprenditore cerca per prime: il numero di telefono e la credenziale
   che dice chi siamo. Sotto i 48rem resta solo il telefono: su un telefono,
   il telefono. ---------------------------------------------------------- */
.topbar {
  background: var(--c-ink);
  color: var(--c-text-muted-on-dark);
  font-size: var(--t-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--topbar-h);
}
/* 24px pieni anche qui: è il minimo WCAG 2.5.8, e su un telefono questo è il
   collegamento che vale di più della pagina — il numero da chiamare. */
.topbar a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--c-text-on-dark);
  text-decoration: none;
}
.topbar a:hover { text-decoration: underline; text-decoration-color: var(--c-amber); }
.topbar__phone { font-family: var(--f-mono); font-weight: 500; }
.topbar__note { display: none; }
@media (min-width: 48rem) { .topbar__note { display: block; } }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--bar-h);
}

/* --- Logo --------------------------------------------------------------
   Il marchio quadrato dove la riga è stretta, il lockup completo dove c'è
   spazio: un solo collegamento, due file.

   I file sono quattro (vedi assets/img/): `currentColor` non attraversa un
   <img>, quindi la versione per fondo scuro è un file suo. Il logo NON si
   ricolora via CSS.
   ---------------------------------------------------------------------- */
.site-header__logo {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  margin-right: auto;
  color: var(--c-ink);
  text-decoration: none;
}
.site-header__logo img { width: auto; }
.site-header__logo .site-header__mark { display: block; height: 2.25rem; }
.site-header__logo .site-header__lockup { display: none; height: 2.25rem; }

@media (min-width: 30rem) {
  .site-header__logo .site-header__mark { display: none; }
  .site-header__logo .site-header__lockup { display: block; }
}
@media (min-width: 68rem) {
  .site-header__logo .site-header__lockup { height: 2.5rem; }
}

/* --- Bottone del menu (solo sotto la soglia) ----------------------------
   Il bottone nasce con l'attributo `hidden` e lo toglie nav.js: senza
   JavaScript non deve comparire un comando che non fa niente. Serve la regola
   esplicita perché una regola d'autore su `display` batte il `[hidden]` del
   browser, e l'attributo da solo non basterebbe.
   ---------------------------------------------------------------------- */
.nav-toggle[hidden] { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-text);
  background: transparent;
  border: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Tre tratti che diventano una croce. Nessuna animazione da mostrare: è un
   interruttore, non un effetto. */
.nav-toggle__icon { position: relative; width: 18px; height: 12px; }
.nav-toggle__icon::before,
.nav-toggle__icon::after,
.nav-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle__icon::before { content: ""; top: 0; }
.nav-toggle__icon span { top: 5px; }
.nav-toggle__icon::after { content: ""; top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-5px) rotate(-45deg); }

/* --- Voci ---------------------------------------------------------------- */
.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
a.site-nav__link:hover,
.site-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-amber); }

/* Voce di raggruppamento senza pagina propria (Ecosistema): è un'etichetta,
   non un collegamento, e non finge di esserlo. Il sottomenu si apre col
   passaggio del mouse e col focus che entra nei suoi collegamenti. */
.site-nav__link--static { cursor: default; }

.site-nav__menu .site-nav__link { font-weight: 400; }

/* --- CTA: un solo nome accessibile, due lunghezze visibili ---------------
   L'aria-label sull'ancora fissa il nome per la tecnologia assistiva; le due
   etichette qui sotto cambiano solo ciò che si vede. */
.site-header__cta { min-height: 2.75rem; padding-inline: var(--s-4); }
.site-header__cta .cta-full { display: none; }
@media (min-width: 68rem) {
  .site-header__cta .cta-full { display: inline; }
  .site-header__cta .cta-short { display: none; }
}
@media (max-width: 26rem) {
  .site-header__cta { font-size: var(--t-sm); padding-inline: var(--s-3); }
}

/* ==========================================================================
   Navigazione — regime stretto (pannello)
   ========================================================================== */

@media (max-width: 67.99rem) {
  .site-nav {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-paper);
    /* Il pannello è `fixed`: esce dal .container e si ripaga da sé il
       rientro laterale, che deve restare uguale a quello del contenuto. */
    padding: var(--s-5) var(--s-5) var(--s-8);
    border-top: var(--border);
  }
  .site-header[data-nav-open="true"] .site-nav { display: block; }

  .site-nav__list { display: grid; }
  .site-nav__group + .site-nav__group,
  .site-nav__item + .site-nav__item { border-top: var(--border); }

  .site-nav__link { font-size: var(--t-lg); }

  /* Nel pannello i sottomenu sono sempre aperti: meno stati da gestire, e
     niente da scoprire a tentoni. */
  .site-nav__menu {
    padding-bottom: var(--s-3);
    padding-left: var(--s-4);
    border-left: 3px solid var(--c-gold);
    margin-left: var(--s-1);
  }
  .site-nav__menu .site-nav__link { font-size: var(--t-base); color: var(--c-text-muted); }
}

/* ==========================================================================
   Navigazione — regime largo (barra)
   ========================================================================== */

@media (min-width: 68rem) {
  .nav-toggle { display: none; }

  .site-nav__list { display: flex; align-items: center; gap: var(--s-5); }
  .site-nav__group { position: relative; }

  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: calc(var(--s-4) * -1);
    min-width: 16rem;
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper);
    border: var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  .site-nav__group:hover > .site-nav__menu,
  .site-nav__group:focus-within > .site-nav__menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* Anche in tendina le voci restano da 44px: sopra questa soglia ci sono
     anche i tablet in orizzontale, che si toccano col dito. */

  /* Il segno che c'è dell'altro sotto. */
  .site-nav__group > .site-nav__link::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: var(--s-8) var(--s-6);
  background: var(--c-ink);
  color: var(--c-text-muted-on-dark);
  font-size: var(--t-sm);
}
.site-footer a { color: var(--c-text-on-dark); }
.site-footer h2 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.site-footer__logo { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer__logo img { height: 2.5rem; width: auto; }

.site-footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-5); } }

.site-footer__links { display: grid; gap: var(--s-1); }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.site-footer p { max-width: 34rem; }

/* Telefono e indirizzo email sono testo vero, non iniettati: devono essere
   leggibili dai motori. Recapiti unici del progetto, vedi
   assets/js/constants.js. */
.site-footer__mail {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.site-footer__phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--f-mono);
  font-size: var(--t-lg);
  color: var(--c-text-on-dark);
  text-decoration: none;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-5);
  margin-top: var(--s-6);
  border-top: 1px solid var(--c-rule-dark);
  font-size: var(--t-xs);
}
.site-footer__legal .formula { font-size: var(--t-lg); }

/* ==========================================================================
   Pagina 404 — non è uno scarto, è una superficie di marca
   ========================================================================== */

.error-code {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.doors { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .doors { grid-template-columns: repeat(2, 1fr); } }

.door {
  display: block;
  padding: var(--s-5);
  background: var(--c-ink-soft);
  border: 1px solid var(--c-rule-dark);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.door:hover, .door:focus-visible { background: #332b1f; }
.door h3 { margin-bottom: var(--s-2); }

/* ==========================================================================
   Consenso — la CMP self-ospitata

   Due superfici, un solo registro. Il banner è la fascia scura in fondo alla
   finestra, con il filetto d'oro in alto: lo stesso segno del tag di misura e
   delle porte del 404, perché è la stessa voce che parla.

   REGOLA CHE NON SI TOCCA: «Rifiuta tutto» e «Accetta tutto» hanno lo stesso
   trattamento, la stessa dimensione e lo stesso peso. Le due risposte devono
   costare uguale. Per questo non si usa il bottone primario oro — è dell'unica
   azione commerciale del sito, l'Analisi Stoica, e usarlo qui inclinerebbe una
   scelta che deve restare piatta.

   Il markup lo costruisce assets/js/consent.js: qui c'è solo l'aspetto.
   ========================================================================== */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  /* Sopra il pannello di navigazione (90) e sopra l'intestazione (100).
     Sotto il salto al contenuto (200), che deve restare il primo comando. */
  z-index: 150;
  background: var(--c-ink);
  color: var(--c-text-on-dark);
  border-top: 3px solid var(--c-gold);
  box-shadow: 0 -8px 32px rgb(30 24 16 / 24%);
}

.consent__inner {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-5);
}

@media (min-width: 60rem) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-7);
  }
  .consent__title { grid-column: 1; }
  .consent__text { grid-column: 1; }
  .consent__actions { grid-column: 2; grid-row: 1 / span 2; }
}

.consent__title {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.consent__text {
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-text-muted-on-dark);
}
.consent__text a { color: var(--c-text-on-dark); }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
/* Su schermo stretto i due bottoni della scelta occupano la stessa riga e la
   stessa frazione: nessuno dei due può sembrare la strada principale. */
.consent__actions .btn--consent { flex: 1 1 10rem; }

.btn--consent {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.btn--consent:hover,
.btn--consent:focus-visible { background: var(--c-paper-alt); border-color: var(--c-paper-alt); }

.consent .btn--ghost,
.consent-panel .btn--ghost { border-color: var(--c-rule-dark); }
.consent .btn--ghost { color: var(--c-text-on-dark); }

/* --- Pannello delle preferenze -----------------------------------------
   <dialog> nativo: la trappola del focus, Esc e il ritorno del focus li dà il
   browser, e li dà meglio di qualunque codice scritto a mano. Dove showModal()
   manca, il pannello si apre lo stesso — non modale — e il JS copre Esc.
   ---------------------------------------------------------------------- */
.consent-panel {
  width: min(42rem, calc(100vw - var(--s-5) * 2));
  max-height: min(90vh, 48rem);
  padding: 0;
  color: var(--c-text);
  background: var(--c-paper);
  border: var(--border);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--radius);
  overflow: hidden;
}
.consent-panel::backdrop { background: rgb(30 24 16 / 62%); }

/* Colonna: scorrono le categorie, i bottoni restano dove sono. Su uno schermo
   basso — un telefono coricato — il pannello supererebbe l'altezza utile e i
   comandi finirebbero sotto la piega: si può scegliere solo ciò che si vede.
   La regola è legata a [open] perché il foglio del browser nasconde il dialogo
   con `display: none`, e uno `display: flex` d'autore lo terrebbe aperto sempre. */
.consent-panel[open] { display: flex; flex-direction: column; }

.consent-panel__inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Stretto di lato sul telefono: ogni millimetro tolto al margine è un
     millimetro dato alle categorie, che sono l'unica cosa da leggere qui. */
  padding: var(--s-5) var(--s-4);
}
@media (min-width: 40rem) {
  .consent-panel__inner { padding: var(--s-6) var(--s-5); }
}

.consent-panel h2 { font-size: var(--t-xl); }
.consent-panel__intro { font-size: var(--t-sm); }

.consent-groups {
  display: grid;
  gap: var(--s-4);
  min-height: 0;
  padding-block: var(--s-2);
  overflow-y: auto;
}

.consent-group {
  padding: var(--s-4);
  background: var(--c-paper-alt);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
}

.consent-group__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.consent-group__input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--c-ink);   /* l'oro come riempimento non arriverebbe ad AA */
  flex: none;
  cursor: pointer;
}
.consent-group__input:disabled { cursor: default; }

/* L'etichetta è il bersaglio da toccare: 44px anche se il testo è una parola. */
.consent-group__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
  cursor: pointer;
}
.consent-group__input:disabled + .consent-group__label { cursor: default; }

.consent-group__always {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.consent-group__text {
  margin-top: var(--s-2);
  max-width: none;
  font-size: var(--t-sm);
  color: var(--c-text-muted);
}

/* ==========================================================================
   Pagine legali — informativa, cookie policy, note legali

   Un'informativa che sembra scritta per non essere letta è una dichiarazione
   di intenti sul rapporto con chi la legge, e questo sito vende fiducia. Da qui
   le tre scelte: sommario sempre visibile accanto al testo (non un elenco di
   ancore in cima, che si perde al primo scorrimento), misura di lettura vera
   invece della larghezza piena, tabelle per ciò che è tabellare — i cookie —
   invece di elenchi puntati lunghi una pagina.

   Il registro resta quello di D-009: nessun componente nuovo che non sia già
   nella grammatica del sito. Il filetto d'oro in cima, la banda #f4f2ee come
   superficie secondaria, il mono per etichette e dati.
   ========================================================================== */

/* `minmax(0, 1fr)` e non `1fr`: la traccia di una griglia si dimensiona sul
   contenuto minimo dei figli, e il contenuto minimo di una tabella è la tabella
   intera. Con `1fr` la colonna si allarga fino a 1.191px su uno schermo da 390 e
   a scorrere in orizzontale è la pagina, non la tabella — che è esattamente ciò
   che .table-scroll esiste per evitare. */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (min-width: 64rem) {
  .legal { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-8); }
}

/* --- Sommario -----------------------------------------------------------
   Appiccicato sotto l'intestazione dove c'è la colonna per tenerlo; sopra il
   testo, e scorrevole con esso, dove non c'è. La numerazione è informazione
   vera (le sezioni si citano per numero: «vedi la sezione 7»), quindi è un
   <ol> e i numeri si vedono. ------------------------------------------- */
.legal__toc {
  padding: var(--s-5);
  background: var(--c-paper-alt);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--radius);
}
@media (min-width: 64rem) {
  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100vh - var(--header-h) - var(--s-6));
    overflow-y: auto;
  }
}

.legal__toc h2 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-3);
}

.legal__toc ol {
  display: grid;
  gap: var(--s-1);
  list-style: none;
  counter-reset: toc;
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-2);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
}
.legal__toc a::before {
  content: counter(toc);
  flex: none;
  width: 1.5em;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
}
.legal__toc a:hover { text-decoration: underline; text-decoration-color: var(--c-amber); }

/* --- Corpo ---------------------------------------------------------------
   Le sezioni si numerano da CSS: rinumerare a mano un'informativa dopo aver
   inserito una sezione è esattamente il modo in cui un documento legale finisce
   per contraddire i propri rimandi interni. -------------------------------- */
.legal__body { counter-reset: legal; }
.legal__body > section { counter-increment: legal; }
.legal__body > section + section { margin-top: var(--s-7); }
.legal__body > section > h2::before {
  content: counter(legal) ". ";
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--c-text-muted);
}
.legal__body > section > * + * { margin-top: var(--s-4); }
.legal__body h3 { margin-top: var(--s-5); }

/* Il reset toglie i segni agli elenchi perché nel resto del sito sono griglie
   e non prosa. Qui la prosa c'è, e un elenco deve sembrare un elenco. */
.legal__body ul,
.legal__body ol {
  display: grid;
  gap: var(--s-2);
  max-width: var(--w-prose);
  padding-left: 1.35em;
}
.legal__body ul { list-style: disc; }
.legal__body ol { list-style: decimal; }
.legal__body li::marker { color: var(--c-text-muted); }

.legal__body dl { display: grid; gap: var(--s-3); max-width: var(--w-prose); }
.legal__body dt { font-weight: 600; }
.legal__body dd { margin: 0; color: var(--c-text-muted); }

/* --- Riquadro di richiamo -----------------------------------------------
   Per la cosa che, se il lettore legge una riga sola, deve essere quella: la
   registrazione della sessione, il consenso alla profilazione. Non è una nota
   a margine e non si tratta come tale. ------------------------------------ */
.callout {
  padding: var(--s-5);
  background: var(--c-gold-tint);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
}
.callout > * + * { margin-top: var(--s-3); }
/* Il riquadro sta accanto al testo, non sopra: i titoli scendono di un gradino
   rispetto alla scala normale, altrimenti competono con il titolo della
   sezione che li ospita. */
.callout h2 { font-size: var(--t-xl); }
.callout h3 { font-size: var(--t-lg); }
.callout p { max-width: none; }

/* Il riquadro si porta dietro la propria superficie chiara anche dentro una
   banda scura, quindi deve riportarsi dietro anche il proprio colore di
   testo: senza queste tre righe eredita il chiaro della sezione e sparisce
   sul fondo oro. Successo davvero, su /analisi-stoica/. */
.section--ink .callout { color: var(--c-ink); }
.section--ink .callout h2,
.section--ink .callout h3 { color: var(--c-ink); }
.section--ink .callout .text-muted { color: var(--c-text-muted); }

/* --- Intestazione del documento -----------------------------------------
   Versione e data di entrata in vigore, in mono come ogni dato del sito: sono
   la prima cosa che un'autorità o un cliente guarda. --------------------- */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-4);
  margin-top: var(--s-5);
  border-top: var(--border);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text-muted);
}
.legal__meta > * { margin: 0; }

/* --- Tabelle -------------------------------------------------------------
   L'involucro scorre in orizzontale invece di far scorrere la pagina: una
   tabella di cookie ha cinque colonne e un telefono ne tiene due. È
   focalizzabile (tabindex="0") perché un'area che scorre e non si raggiunge da
   tastiera è contenuto che per qualcuno non esiste.
   ---------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  margin-top: var(--s-4);
  border: var(--border);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}
.table caption {
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: left;
  border-bottom: var(--border);
}
.table th,
.table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border);
}
.table thead th {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
  background: var(--c-paper-alt);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table td:first-child { font-family: var(--f-mono); white-space: nowrap; }
/* Intestazione di riga: stesso trattamento della prima colonna, perché fa lo
   stesso mestiere — il numero del livello, il nome del cookie. */
.table tbody th { font-family: var(--f-mono); font-weight: 500; white-space: nowrap; }
.table p { max-width: none; }

/* Tabella di prosa: tre colonne di frasi, non di dati. La prima colonna torna
   al carattere del corpo e va a capo — in mono e senza ritorni a capo una
   matrice Sintomo → Causa → Terapia diventa larga come tre schermi. */
.table--prose td:first-child { font-family: var(--f-body); white-space: normal; }
.table--prose { min-width: 44rem; }

/* ==========================================================================
   Moduli — il modulo dell'Analisi Stoica, e ogni modulo che verrà

   Un modulo che chiede nove campi a un imprenditore prima di dargli qualcosa
   deve sembrare la scheda d'ingresso di una diagnosi, non un modulo di
   contatto: da qui il riquadro bianco col filetto d'oro in cima, lo stesso
   trattamento del TAG DI MISURA, e le etichette sempre visibili sopra il
   campo. Niente segnaposto al posto dell'etichetta — sparisce appena si
   scrive, e chi torna a controllare non sa più cosa stava compilando.

   Gli stati di errore non si affidano al colore: il messaggio è testo, sta
   sotto il campo, ed è collegato all'input con aria-describedby. Il colore
   arriva dopo, come rinforzo.
   ========================================================================== */

.form {
  padding: var(--s-6);
  background: var(--c-paper);
  border: var(--border);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--radius);
}
.form > * + * { margin-top: var(--s-6); }

.form__grid { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

/* Terza occorrenza dello stesso difetto, dopo `.nav-toggle` e `.form__summary`:
   `display: grid` è una regola d'autore e batte il `[hidden]` del browser, così
   un campo nato nascosto resta visibile. Misurato in un browser vero, non
   dedotto: senza questa riga il campo del prefisso manuale di /aira-scan/ è a
   schermo sempre invece di comparire con «Altro paese», e su /contatti/ si
   vedeva in chiaro la trappola per i bot.
   Le tre righe stanno insieme al loro `display`: verificato che `.field` sia
   l'ultima classe del foglio che imposta `display` e può ricevere `hidden`. */
.field[hidden] { display: none; }

.field { display: grid; gap: var(--s-2); align-content: start; }

.field__label { font-weight: 600; font-size: var(--t-sm); }
/* Il segno dell'obbligatorio è un <abbr>: la tecnologia assistiva legge
   "obbligatorio" invece di "asterisco", e chi vede legge un asterisco. */
.field__label abbr { text-decoration: none; color: var(--c-text-muted); }

.field__hint {
  max-width: none;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-snug);
  color: var(--c-text);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
}
.textarea { min-height: 6rem; line-height: var(--lh-body); resize: vertical; }

/* La freccia è un'immagine di sfondo in SVG in linea: nessuna richiesta in
   più e nessun font di icone da caricare per un triangolo. */
.select {
  appearance: none;
  padding-right: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f5d57' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--c-text-muted); }

/* Campo in errore: bordo più spesso E messaggio testuale sotto il campo.
   Il colore è un rinforzo, non il segnale — vedi --c-error. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }

.field__error {
  max-width: none;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-error);
}

/* --- Consensi -----------------------------------------------------------
   Caselle separate, mai preselezionate, e il testo di ciascuna dice cosa
   autorizza. Il facoltativo è dichiarato facoltativo: vedi PRIVACY.md.
   ---------------------------------------------------------------------- */
.checks { display: grid; gap: var(--s-4); }

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: start; }
/* Il messaggio d'errore si allinea sotto l'etichetta, non sotto la casella. */
.check .field__error { grid-column: 2; }
.check__input {
  width: 1.25rem;
  height: 1.25rem;
  /* I controlli di modulo non ereditano il corpo del testo: senza questa riga
     `em` qui sotto varrebbe il default del browser (~13px) invece della
     dimensione dell'etichetta, e il calcolo sarebbe fatto sul numero
     sbagliato. */
  font-size: var(--t-sm);
  /* mezza riga di testo meno mezza casella: la casella si allinea alla linea
     mediana della prima riga dell'etichetta, non al suo bordo superiore. */
  margin: calc(0.5em * var(--lh-snug) - 0.625rem) 0 0;
  accent-color: var(--c-ink);
}
.check__label { font-size: var(--t-sm); line-height: var(--lh-snug); }
.check__label--required { font-weight: 600; }

/* --- Riepilogo degli errori ---------------------------------------------
   Compare solo dopo un invio rifiutato, in cima al modulo, con role="alert":
   chi naviga da tastiera o con uno screen reader deve sapere che è successo
   qualcosa senza dover riattraversare nove campi per scoprirlo.
   ---------------------------------------------------------------------- */
.form__summary {
  padding: var(--s-4) var(--s-5);
  background: var(--c-paper-alt);
  border-left: 3px solid var(--c-error);
  border-radius: var(--radius);
}
.form__summary p { max-width: none; }
.form__summary[hidden] { display: none; }

.form__foot { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: var(--border); }
.form__foot p { max-width: none; }

/* --- Esito del filtro sul numero di persone ------------------------------
   Il contenitore resta SEMPRE nel documento perché è una regione live: una
   regione che compare e scompare non viene annunciata in modo affidabile.
   Quando però non ha niente da dire non deve nemmeno lasciare un buco nel
   modulo, e la spaziatura fra i blocchi arriva da `.form > * + *`.
   ---------------------------------------------------------------------- */
.form__routing:not(:has(> :not([hidden]))) { margin-top: 0; }

/* ==========================================================================
   Accessibilità
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--c-amber);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink);
  color: var(--c-text-on-dark);
  border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card--link:hover, .card--link:focus-visible { transform: none; }
}

/* ==========================================================================
   Utility — poche e nominate per il ruolo, non per l'effetto
   ========================================================================== */

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-6); }
.text-muted { color: var(--c-text-muted); }
.section--ink .text-muted { color: var(--c-text-muted-on-dark); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }