/* Generato da src/styles/ — non modificare qui. */
@layer base, components, pieces, utilities;

/* ═══ 00-reset.css ═══ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* `only` — non `light`: è `only` che impedisce a Chrome su Android di invertire
       i colori di sua iniziativa. Il sito è a tema chiaro deliberato. */
    color-scheme: only light;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* ⚠️ NIENTE `overflow-x: hidden`: nasconderebbe gli errori di layout invece di
       impedirli, e renderebbe invisibile la prossima regressione. Se compare uno
       scorrimento orizzontale, si trova la causa. */
  }

  img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  p, h1, h2, h3, h4 { overflow-wrap: break-word; }

  h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; }

  p { text-wrap: pretty; }

  a { color: inherit; }

  ul, ol { padding: 0; list-style: none; }

  /* Le liste che devono MOSTRARE i punti elenco se li riprendono in `.prose`.
     ⚠️ Non dare mai `display: flex` a una `ul` con i marcatori: li sopprimerebbe. */

  /* `hidden` deve vincere su qualunque `display` d'autore: un pannello con `display: grid`
     resterebbe visibile anche con l'attributo — è successo al banner del consenso. */
  [hidden] { display: none !important; }
}

/* ═══ 01-tokens.css ═══ */
/* Token — la sola sede dei valori. Nessun componente scrive un colore, una dimensione
   o una durata a mano: li nomina da qui.

   Due regole che rendono inutile un secondo livello di «primitive»:
   · si dichiara solo ciò che ha un consumatore reale (niente rampe 50-900 mai usate);
   · il nome dice il RUOLO, non il colore — `--group-identity`, non `--group-red`:
     se domani quel gruppo diventasse blu, il nome mentirebbe.

   `:root` sta FUORI dai layer: sono custom property, non hanno nulla da vincere. */

:root {
  /* ── Caratteri ───────────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;

  /* ── Colore ──────────────────────────────────────────────────────────── */
  /* ⚠️ Questi due valori coincidono deliberatamente col design system
     dell'applicazione: sono un'identità condivisa, non una coincidenza. */
  --color-accent: oklch(0.52 0.12 195);
  --color-accent-deep: oklch(0.4 0.11 195);
  --color-accent-bright: oklch(0.72 0.13 195);

  --ink: oklch(0.22 0.008 255);
  --ink-muted: oklch(0.4 0.012 255);
  --ink-faint: oklch(0.48 0.012 255);

  --surface: oklch(0.98 0.004 240);
  /* ⚠️ `#fff`, NON `oklch(1 0 0)`: è l'unica eccezione all'uso di oklch, e ha una
     ragione precisa. `oklch(1 0 0)` dichiara una tonalità REALE pari a 0, quindi
     `color-mix(in oklch, teal 12%, quel bianco)` interpola la tonalità da 195 verso
     0 per l'arco più corto — passando per il blu e il magenta — e la tinta esce
     ROSA. Il bianco esadecimale non ha tonalità: resta quella dell'altro colore. */
  --surface-raised: #fff;
  --surface-inverse: oklch(0.16 0.028 220);
  --ink-inverse: oklch(0.97 0.005 210);
  --ink-inverse-muted: oklch(0.8 0.02 210);

  --border: oklch(0.91 0.006 255);
  --border-strong: oklch(0.85 0.008 255);

  --state-warning: oklch(0.5 0.14 65);
  --state-success: oklch(0.48 0.13 150);

  /* Veli sul fondo scuro: alfa sul fondo, non miscela col bianco. */
  --veil-1: oklch(1 0 0 / 0.05);
  --veil-2: oklch(1 0 0 / 0.1);
  --veil-3: oklch(1 0 0 / 0.16);

  /* I quattro gruppi editoriali: legenda e tredici angoli. */
  --group-offer: oklch(0.52 0.14 60);
  --group-identity: oklch(0.55 0.19 10);
  --group-relation: oklch(0.5 0.18 300);
  --group-value: oklch(0.46 0.12 155);

  /* ⚠️ Le SERIE della barra di distribuzione sono SEI, non quattro: due rossi e due
     ambra distinti. Appiattirle sui gruppi perderebbe la separazione visiva. */
  --series-storytelling: oklch(0.6 0.2 10);
  --series-backstage: oklch(0.66 0.17 10);
  --series-product: oklch(0.72 0.15 60);
  --series-educational: oklch(0.63 0.15 155);
  --series-community: oklch(0.56 0.19 300);
  --series-promotion: oklch(0.78 0.13 60);

  /* Le tinte tenui non si scrivono MAI a mano: si compongono con questi tre valori,
     miscelando con `--surface-context` — non col bianco, perché le sezioni scure
     ne hanno una diversa. È ciò che impedisce la deriva 12% / 13% / 14%. */
  --surface-context: var(--surface-raised);
  --tint-soft: 12%;
  --tint-medium: 26%;
  --tint-strong: 40%;

  /* ── Tipografia: sette gradini, nessun mezzo-pixel ───────────────────── */
  --text-2xs: clamp(0.688rem, 0.67rem + 0.09vw, 0.75rem);
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.813rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --text-md: clamp(1rem, 0.97rem + 0.15vw, 1.063rem);
  --text-lg: clamp(1.125rem, 1.07rem + 0.27vw, 1.313rem);
  --text-xl: clamp(1.75rem, 1.36rem + 1.95vw, 2.875rem);
  --text-2xl: clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);

  /* ── Spazio: griglia di 4px, i gradini grandi fluidi ─────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: clamp(2.5rem, 5vw, 4rem);
  --space-2xl: clamp(3.5rem, 8vw, 6.5rem);

  /* ── Geometria ───────────────────────────────────────────────────────── */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* ── Misure di riga ──────────────────────────────────────────────────── */
  --measure-tight: 46ch;
  --measure: 62ch;
  --measure-wide: 80ch;
  --wrap: 75rem;
  --gutter: clamp(1.25rem, 5vw, 2.75rem);

  /* ── Movimento ───────────────────────────────────────────────────────── */
  --speed-fast: 120ms;
  --speed: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ═══ 02-base.css ═══ */
/* ═════════════════════════════════════════════════════════════════════════
   FONT self-hosted — SIL OFL 1.1, vedi fonts/OFL-*.txt
   Serviti dal dominio, NON da Google Fonts: il sito dichiara zero terze parti
   (vedi privacy.html). Non reintrodurre il CDN.
   Variable font: un file per subset copre tutto il range wght.
   unicode-range copiati verbatim dalla risposta css2.
   Provenienza, versioni e comandi di ri-download: fonts/README.md
   ═════════════════════════════════════════════════════════════════════════ */

/* ⚠️ font-weight: 500 800 — NON 100 900. Il file ha l'asse wght
   sottoinsiemato a questo range: allargarlo cambierebbe il rendering. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
  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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  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-weight: 400 700 — NON 100 900. Un peso fuori range non fallisce:
   si aggancia al limite e rende diverso dal previsto. Non usare 800 sul
   carattere del corpo: clamperebbe a 700 senza dirlo. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2) format('woff2');
  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: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2');
  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;
}

@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--ink);
    background: var(--surface);
  }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
  }

  a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

  a:hover { text-decoration-color: var(--color-accent); }

  strong { font-weight: 600; }

  /* Anello di focus a due strati: quello scuro si vede sulle superfici chiare,
     quello chiaro sulle superfici scure. Serve perché i controlli di questo sito
     stanno sia sull'uno sia sull'altro fondo. */
  :focus-visible {
    outline: 2px solid var(--color-accent-deep);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--surface-raised);
    border-radius: var(--radius-xs);
  }

  /* Lo skip-link porta il focus qui: senza questa regola l'anello disegnerebbe
     un rettangolo grande quanto la pagina. */
  main:focus-visible { outline: none; box-shadow: none; }

  /* ── Testo lungo (pagine istituzionali) ───────────────────────────────
     ⚠️ Agisce sui FIGLI DIRETTI: incapsulare i blocchi in wrapper intermedi
     azzererebbe in un colpo tutta la spaziatura di chi-sono e privacy. */
  .prose { max-inline-size: var(--measure); }

  .prose > * + * { margin-block-start: var(--space-sm); }

  .prose h2 {
    font-size: var(--text-lg);
    margin-block-start: var(--space-xl);
  }

  .prose h2 + p { margin-block-start: var(--space-xs); }

  /* ⚠️ I punti elenco si riprendono QUI, e la spaziatura si fa con `li + li`.
     Dare `display: flex` a questa `ul` sopprimerebbe `::marker`. */
  .prose ul, .prose ol {
    padding-inline-start: 1.35rem;
    list-style: disc;
  }

  .prose ol { list-style: decimal; }

  .prose li + li { margin-block-start: var(--space-2xs); }

  .prose li::marker { color: var(--color-accent); }

  .prose a { color: var(--color-accent-deep); }

  .prose hr {
    border: 0;
    border-block-start: 1px solid var(--border);
    margin-block: var(--space-lg);
  }

  .prose em { color: var(--ink-muted); }
}

/* ═══ 03-layout.css ═══ */
/* Primitive di layout — QUATTRO, non di più.
   Ognuna fa una cosa sola ed è parametrizzata da custom property. Sono HELPER
   RICORRENTI, non «l'architettura di tutto il layout»: header, carosello, schema e
   piano hanno e continueranno ad avere il loro posizionamento.
   Le altre (sidebar, frame, switcher) si aggiungono quando compare il SECONDO uso:
   un'astrazione costruita su un caso solo è cerimonia.

   ⚠️ Ogni primitiva ha un parametro con un nome PROPRIO (`--stack-space`, non `--space`).
      Le custom property si ereditano: un nome generico impostato su un contenitore
      cambierebbe in silenzio anche le primitive annidate dentro di esso. */

@layer base {
  /* Centra e limita. È l'unico posto in cui vive la gronda laterale della pagina. */
  .center {
    inline-size: 100%;
    max-inline-size: var(--center-max, var(--wrap));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Impila con spaziatura uniforme, agendo sui figli diretti.
     Lo spazio si sovrascrive per singolo figlio, dichiarandolo sul figlio stesso. */
  .stack { display: flow-root; }

  .stack > * + * { margin-block-start: var(--stack-space, var(--space-sm)); }

  /* Raggruppa in linea, con andata a capo naturale: pastiglie, tag, azioni.
     ⚠️ Qui flex è la scelta GIUSTA: una griglia imporrebbe colonne a elementi di
     larghezza variabile che devono solo scorrere e andare a capo. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--space-2xs));
    align-items: var(--cluster-align, center);
  }

  /* Griglia che si adatta da sé, senza media query: risponde allo spazio
     disponibile, non alla larghezza della finestra. */
  .grid {
    display: grid;
    gap: var(--grid-space, var(--space-md));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }
}

/* ═══ 04-components.css ═══ */
@layer components {

  /* ═══ PRIMITIVE ═══════════════════════════════════════════════════════════
     Sei forme che assorbono una quarantina di classi. I compositi più sotto
     fanno solo composizione e identità: non ridefiniscono forma né colore. */

  /* Livello decorativo assoluto.
     ⚠️ `pointer-events: none` è PARTE della primitiva, non una riga da ricordare
     su ogni copia: nell'impianto precedente mancava su tre livelli su otto, e la
     cliccabilità di una sezione dipendeva dall'ordine del DOM. */
  .veil {
    position: absolute;
    inset: var(--inset, 0);
    pointer-events: none;
    z-index: 0;
  }

  .veil--noise {
    background-image: url(../images/noise.svg);
    opacity: 0.5;
  }

  .veil--glow {
    background:
      radial-gradient(60% 80% at 15% 0%, color-mix(in oklch, var(--color-accent) 22%, transparent), transparent 70%),
      radial-gradient(50% 70% at 95% 20%, color-mix(in oklch, var(--color-accent-bright) 14%, transparent), transparent 70%);
  }

  /* Etichetta piccola. Una definizione sola: nell'impianto precedente erano tre
     blocchi byte per byte identici. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0.2em 0.7em;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--badge-ink, var(--color-accent-deep));
    background: color-mix(in oklch, var(--badge-ink, var(--color-accent)) var(--tint-soft), var(--surface-context));
  }

  .badge--offer { --badge-ink: var(--group-offer); }
  .badge--identity { --badge-ink: var(--group-identity); }
  .badge--relation { --badge-ink: var(--group-relation); }
  .badge--value { --badge-ink: var(--group-value); }
  .badge--warning { --badge-ink: var(--state-warning); }
  .badge--neutral { --badge-ink: var(--ink-muted); }

  /* ⚠️ Sul fondo scuro la pastiglia NON si aggiusta da sola. La formula miscela la
     tinta con `--surface-context`, che lì è già scuro — ma l'inchiostro resterebbe
     `--color-accent-deep`: teal scuro su quasi-nero, illeggibile (era il caso della
     pastiglia dell'eroe). Serve dichiarare l'inchiostro chiaro; il pallino tiene il
     colore del marchio nella sua versione chiara. */
  .badge--inverse { --badge-ink: var(--ink-inverse); }

  .badge--inverse .dot { --dot-color: var(--color-accent-bright); }

  /* Pillola grande, con o senza pallino. */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.563rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--pill-border, var(--border));
    border-radius: var(--radius-pill);
    /* ⚠️ Un componente che dichiara il proprio FONDO deve dichiarare anche il proprio
       INCHIOSTRO: senza, su una banda scura eredita il testo chiaro e diventa bianco
       su bianco. È lo stesso difetto già documentato qui sotto per `.badge`. */
    color: var(--pill-ink, var(--ink));
    background: var(--pill-surface, var(--surface-raised));
    font-size: var(--text-sm);
    font-weight: 500;
  }

  /* Pallino colorato. */
  .dot {
    inline-size: var(--size, 0.55rem);
    block-size: var(--size, 0.55rem);
    border-radius: 50%;
    background: var(--dot-color, var(--color-accent));
    flex: none;
  }

  /* Superficie con bordo e raggio. Undici card diventano una, con tre varianti reali.
     ⚠️ La superficie è un PARAMETRO: su una banda bianca (`band--raised`) una card
        bianca sparirebbe, e il rapporto si rovescia — la card prende il fondo di
        pagina. È la stessa scelta già fatta da `.step`, resa dichiarabile. */
  .card {
    padding: var(--card-space, var(--space-md));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card-surface, var(--surface-raised));
  }

  .card--inverse {
    border-color: var(--veil-2);
    background: var(--veil-1);
    color: var(--ink-inverse);
  }

  .card--dashed { border-style: dashed; background: transparent; }

  .card--accent {
    border-color: transparent;
    background: linear-gradient(150deg, var(--color-accent), var(--color-accent-deep));
    color: var(--ink-inverse);
  }

  /* Il tassello del logo: una geometria, tre taglie. */
  .logo-tile {
    display: grid;
    place-items: center;
    inline-size: var(--size, 2rem);
    block-size: var(--size, 2rem);
    border-radius: var(--radius-xs);
    background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent-deep));
    color: var(--surface-raised);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: calc(var(--size, 2rem) * 0.46);
    line-height: 1;
  }

  /* Cifra grande. Il contorno è una variante: il pieno resta il caso base, così
     se `-webkit-text-stroke` non si applicasse il numero non sparirebbe. */
  .numeral {
    font-family: var(--font-display);
    font-size: var(--numeral-size, var(--text-lg));
    font-weight: 800;
    line-height: 1;
    color: var(--numeral-color, var(--color-accent));
  }

  .numeral--outline {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--numeral-color, var(--color-accent));
  }

  /* ═══ IMPALCATURA DI PAGINA ══════════════════════════════════════════════ */

  .band {
    position: relative;
    padding-block: var(--space-2xl);
    /* `clip`, non `hidden`: non crea un contenitore di scorrimento e non rompe
       `position: sticky` dei discendenti. */
    overflow: clip;
  }

  .band--raised { background: var(--surface-raised); }

  .band--inverse {
    background: var(--surface-inverse);
    color: var(--ink-inverse);
  }

  .band > .center { position: relative; z-index: 1; }

  .kicker {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
  }

  .band--inverse .kicker { color: var(--color-accent-bright); }

  /* Sulla banda-foto l'occhiello è BIANCO, non teal chiaro come sulle bande scure:
     lì sotto non c'è un fondo dichiarato ma un'immagine, e la sua luminosità non è
     sotto controllo. Il titolo grande accanto fa già così. */
  .scene-band__inner .kicker { color: var(--ink-inverse); }

  /* Titolo a sinistra e introduzione a destra, allineati in basso: è la forma
     dell'intestazione di sezione, non un semplice impilamento. */
  .band-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md) clamp(2rem, 5vw, 3.75rem);
  }

  .band-head > * { max-inline-size: 40rem; }
  .band-head .band-lead { max-inline-size: 24rem; }

  .band-title {
    font-size: var(--text-xl);
    max-inline-size: 20ch;
  }

  .band-lead {
    font-size: var(--text-lg);
    color: var(--ink-muted);
    max-inline-size: var(--measure);
  }

  .band--inverse .band-lead { color: var(--ink-inverse-muted); }

  .band-note {
    font-size: var(--text-sm);
    color: var(--ink-faint);
    max-inline-size: var(--measure);
  }

  /* Come per `.band-lead`: sul fondo scuro `--ink-faint` sarebbe grigio scuro su
     quasi-nero. Finora nessuna nota compariva su una banda scura, quindi la regola
     mancava — ed è lo stesso difetto già trovato nella pastiglia dell'eroe. */
  .band--inverse .band-note,
  .hero .band-note { color: var(--ink-inverse-muted); }

  /* ═══ INTESTAZIONE E NAVIGAZIONE ═════════════════════════════════════════ */

  .site-header {
    position: relative;
    /* ⚠️ Il livello va dichiarato QUI, non solo sul pannello del menu: il corpo
       dell'eroe e il contenuto delle fasce dichiarano `z-index: 1`, e un elemento
       con un livello dichiarato vince su uno che non ce l'ha, qualunque sia il
       livello dei suoi figli. Senza questa riga il menu aperto finisce SOTTO la
       prima card della pagina. */
    z-index: 30;
    background: var(--surface-inverse);
    color: var(--ink-inverse);
    /* ⛔ MAI `overflow: hidden` qui: il pannello del menu esce dal riquadro e
       verrebbe tagliato, rendendolo invisibile. Un test lo impedisce. */
  }

  .site-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-inverse);
  }

  /* Il logo è disegnato per fondo scuro, ed è lì che vive: barra e piede.
     `alt=""` perché il nome «Soffio Digitale» gli sta accanto come testo: dargliene
     uno lo farebbe leggere due volte. */
  .brand__mark { inline-size: 2rem; block-size: 2rem; }

  .nav__disclosure { position: relative; }

  .nav__toggle {
    display: none;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--veil-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .nav__toggle::-webkit-details-marker { display: none; }

  .nav__toggle-icon {
    inline-size: 1rem;
    block-size: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }

  .nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
  }

  .nav__list a {
    display: inline-block;
    padding-block: var(--space-3xs);
    color: var(--ink-inverse-muted);
    text-decoration: none;
  }

  .nav__list a:hover { color: var(--ink-inverse); }

  /* ── La gerarchia del menu ────────────────────────────────────────────────
     Sotto «Home» stanno le sue SEZIONI (ancore), più piccole e separate dal resto
     da un filo; «Il corso» e «Chi sono» sono pagine vere; «Scrivimi» è un'azione e
     ha l'aspetto di un pulsante. ⚠️ La gerarchia vive nel registro `menu.mjs`:
     qui si mostra soltanto. */
  .nav__group { display: flex; align-items: center; gap: var(--space-md); }

  .nav__group::after {
    content: "";
    inline-size: 1px;
    block-size: 1.1rem;
    background: var(--veil-3);
  }

  .nav__sub { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }

  .nav__sub a { font-size: var(--text-xs); }

  .nav__list .nav__cta {
    padding: var(--space-3xs) var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--surface-raised);
    font-weight: 600;
    transition: background var(--speed) var(--ease);
  }

  .nav__list .nav__cta:hover { background: var(--color-accent-deep); color: var(--surface-raised); }

  .nav__list a[aria-current] {
    color: var(--ink-inverse);
    box-shadow: inset 0 -2px 0 var(--color-accent-bright);
  }

  /* Sotto la soglia il pannello si apre e si chiude; sopra è sempre una riga.
     `open` è gestito dal JavaScript: se manca, il menu resta aperto — cioè
     navigabile — invece di sparire. */
  @media (width < 48rem) {
    .nav__toggle { display: inline-flex; }

    .nav__disclosure[open] .nav__list {
      position: absolute;
      inset-inline: auto 0;
      inset-block-start: calc(100% + var(--space-2xs));
      z-index: 20;
      flex-direction: column;
      gap: 0;
      min-inline-size: 14rem;
      padding: var(--space-2xs);
      border: 1px solid var(--veil-2);
      border-radius: var(--radius-md);
      background: var(--surface-inverse);
      box-shadow: 0 1.5rem 3rem oklch(0 0 0 / 0.35);
    }

    .nav__disclosure[open] .nav__list a { padding: var(--space-2xs) var(--space-xs); }

    /* Nel pannello la gerarchia diventa verticale: le sezioni rientrano sotto la
       loro pagina, con un filo che le raccoglie. Il filo divisorio orizzontale
       qui non serve — lo fa già il rientro. */
    .nav__group { display: block; }
    .nav__group::after { display: none; }

    .nav__sub {
      display: block;
      margin-block-end: var(--space-2xs);
      margin-inline-start: var(--space-xs);
      padding-inline-start: var(--space-2xs);
      border-inline-start: 1px solid var(--veil-2);
    }

    .nav__disclosure[open] .nav__cta {
      display: block;
      margin-block-start: var(--space-2xs);
      text-align: center;
    }

    .nav__disclosure:not([open]) .nav__list { display: none; }
  }

  /* ═══ PIEDE ══════════════════════════════════════════════════════════════ */

  .site-footer {
    padding-block: var(--space-xl) var(--space-md);
    background: var(--surface-inverse);
    color: var(--ink-inverse-muted);
    font-size: var(--text-sm);
  }

  /* Una colonna sotto la soglia, tre sopra — con la prima più larga.
     ⚠️ NON `auto-fit`: a larghezze intermedie produceva due colonne, e il blocco
     «Titolare» finiva sotto il marchio invece che accanto. */
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.125rem;
    align-items: start;
  }

  @media (width >= 48rem) {
    .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-xl); }
  }

  .site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }

  .site-footer__text { font-size: 0.813rem; line-height: 1.6; max-inline-size: 26.25rem; }

  .site-footer__label {
    font-family: var(--font-display);
    font-size: 0.719rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(0.75 0.09 195);
    margin-block-end: 0.125rem;
  }

  /* Senza sottolineatura, come nel piede precedente: qui i collegamenti sono un
     elenco di destinazioni, non richiami dentro un testo. */
  .site-footer__col a { font-size: 0.844rem; text-decoration: none; }
  .site-footer__col a:hover { color: var(--ink-inverse); text-decoration: underline; }

  .site-footer__links { display: grid; gap: var(--space-3xs); }

  .site-footer__links a { display: inline-block; padding-block: var(--space-3xs); }

  .site-footer__legal { font-style: normal; font-size: 0.813rem; line-height: 1.75; }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--veil-2);
    font-size: 0.75rem;
    color: oklch(0.68 0.02 210);
  }

  /* ═══ TESTATA DELLE PAGINE INTERNE (template `hero`) ═════════════════════
     Immagine a piena larghezza sotto la barra, poi il testo in colonna di lettura.
     ⚠️ Il CSS di questo template NON esisteva: la specifica lo dichiarava e la
        prima versione affermava il falso dicendo «il CSS non cambia». */

  .page-hero {
    position: relative;
    margin: 0;
    background: var(--surface-inverse);
    overflow: clip;
  }

  .page-hero__media {
    inline-size: 100%;
    block-size: clamp(12rem, 32vw, 24rem);
    object-fit: cover;
  }

  .page-hero__caption {
    padding: var(--space-2xs) var(--gutter);
    background: var(--surface-inverse);
    color: var(--ink-inverse-muted);
    font-size: var(--text-xs);
    text-align: center;
  }

  /* ═══ EROE ═══════════════════════════════════════════════════════════════ */

  .hero {
    position: relative;
    padding-block: var(--space-2xl);
    background: var(--surface-inverse);
    color: var(--ink-inverse);
    overflow: clip;
  }

  .hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem);
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-xl);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  }

  .hero__title {
    font-size: var(--text-2xl);
    max-inline-size: 15ch;
  }

  .hero__title em { font-style: normal; color: var(--color-accent-bright); }

  .hero__lead {
    font-size: var(--text-lg);
    color: var(--ink-inverse-muted);
    max-inline-size: var(--measure-tight);
  }

  .button-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.7em 1.3em;
    border: 1px solid var(--veil-3);
    border-radius: var(--radius-pill);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }

  .button-ghost:hover { background: var(--veil-1); border-color: var(--color-accent-bright); }

  /* Il pulsante PIENO. Esiste perché una pagina di atterraggio ha UNA sola azione e
     quella deve essere l'elemento più evidente dello schermo.
     ⚠️ `.button-ghost` resta per gli inviti secondari — un contorno su fondo scuro
     non chiama nessuno, e usarlo per l'azione principale è il difetto che questa
     regola corregge. Non invertirli. */
  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.85em 1.7em;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--button-surface, var(--color-accent));
    color: var(--button-ink, var(--surface-raised));
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--speed) var(--ease);
  }

  .button:hover { background: var(--color-accent-deep); }

  /* ── La SCHEDA della testata ───────────────────────────────────────────────
     La testata fa due lavori: dice di cosa si tratta, e chiede di agire. Finché
     erano lo stesso flusso di testo, l'azione spariva dentro il messaggio e i
     quattro fatti sembravano parole in fila senza struttura. Qui il secondo
     lavoro ha un pannello proprio: una riga per fatto, con icona e spiegazione,
     e il pulsante staccato da un filo.
     ⚠️ I fatti sono informazione, NON comandi: niente forma di pastiglia, che li
     metterebbe in concorrenza con l'unico pulsante vero della pagina.
     ⚠️ Il fondo è un velo (bianco al 5%), quindi il colore reale dipende da ciò
     che sta sotto. Le coppie di contrasto lo dichiarano già composito: il
     calcolatore segue `var()` e `color-mix`, ma NON sa leggere l'opacità. */
  .hero__card {
    --card-space: var(--space-lg);
    display: grid;
    gap: var(--space-md);
    max-inline-size: 34rem;
  }

  /* Intestazione della scheda del corso: dice che i dati sotto sono del corso, non della serata. */
  .hero__card-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-inverse);
  }

  .hero__card-intro { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-inverse-muted); }

  .hero__facts { display: grid; gap: var(--space-sm); }

  .hero__fact { display: grid; gap: 0.15rem; }

  .hero__fact dt {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--ink-inverse);
  }

  .hero__fact dd {
    margin: 0;
    padding-inline-start: calc(1.25rem + var(--space-2xs));
    font-size: var(--text-sm);
    color: var(--ink-inverse-muted);
  }

  .hero__fact svg {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--color-accent-bright);
  }

  .hero__action {
    display: grid;
    justify-items: start;
    gap: var(--space-2xs);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--veil-2);
  }

  .hero__note { font-size: var(--text-sm); color: var(--ink-inverse-muted); }

  /* ⚠️ Sul pannello scuro il colore dei collegamenti va dichiarato: l'inchiostro
     del corpo è pensato per il chiaro e qui sparirebbe. */
  .hero__note a { color: var(--color-accent-bright); }

  /* ═══ FASCIA DI PAROLE ═══════════════════════════════════════════════════
     Statica: non si muove da sola, quindi non serve un comando per fermarla. */

  .marquee {
    padding-block: var(--space-sm);
    border-block: 1px solid var(--border);
    background: var(--surface-raised);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .marquee .cluster { justify-content: center; --cluster-space: var(--space-sm); }

  .marquee__sep { color: var(--color-accent); }

  /* ═══ PASSI, CARD, ELENCHI ═══════════════════════════════════════════════ */

  /* Due colonne: a sinistra il perché (che RESTA mentre si scorre), a destra i passi.
     Il testo lungo su tutta la larghezza dello schermo sarebbe illeggibile — è la
     ragione per cui questa sezione è nata a due colonne. */
  .flow {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(2.25rem, 5vw, 4.5rem);
  }

  .flow__aside { flex: 0 1 22.5rem; min-inline-size: 0; }

  .flow__sticky { position: sticky; inset-block-start: var(--space-lg); }

  .flow__steps { flex: 1 1 30rem; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-xs); }

  .flow__list { display: flex; flex-direction: column; gap: var(--space-xs); }

  .step {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--space-2xs) var(--space-sm);
    align-items: start;
    padding: var(--space-md) 1.625rem;
    border: 1px solid oklch(0.93 0.005 240);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
  }

  .step:hover { border-color: color-mix(in oklch, var(--color-accent) 50%, #fff); background: var(--surface-raised); }

  .step--optional {
    border-style: dashed;
    border-color: color-mix(in oklch, var(--color-accent) 45%, #fff);
    background: color-mix(in oklch, var(--color-accent) 7%, #fff);
  }

  .step .numeral { --numeral-size: 1.875rem; }

  .step__title { font-size: var(--text-md); font-weight: 600; }

  .step__text { font-size: var(--text-sm); color: var(--ink-muted); }

  .step__why { color: var(--color-accent-deep); font-weight: 600; }

  .pillar {
    --card-space: 1.875rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    border-radius: 1.375rem;
    transition: translate var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  }

  .pillar:hover { translate: 0 -0.375rem; box-shadow: 0 1.25rem 2.75rem oklch(0.22 0.008 255 / 0.09); }

  .pillar .numeral { --numeral-size: 2.75rem; }

  .pillar__title { font-size: 1.188rem; font-weight: 700; letter-spacing: -0.01em; }

  .pillar__text { font-size: 0.906rem; line-height: 1.65; color: var(--ink-muted); text-wrap: pretty; }

  /* Manifesto: stesse card, ma sul fondo scuro. */
  .card--inverse { --card-space: 1.75rem 1.625rem; border-radius: var(--radius-lg); transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease); }
  .card--inverse:hover { border-color: color-mix(in oklch, var(--color-accent-bright) 60%, transparent); background: oklch(1 0 0 / 0.07); }
  .card--inverse .numeral { --numeral-size: 2.375rem; }
  .card--inverse .pillar__text { color: var(--ink-inverse-muted); }

  .callout {
    padding: var(--space-md);
    border-inline-start: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in oklch, var(--color-accent) var(--tint-soft), var(--surface-context));
  }

  .callout__label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
  }

  /* Variante d'avviso: per un richiamo che mette in guardia invece di spiegare.
     Stessa geometria, sola tinta diversa — non è un componente nuovo. */
  .callout--warning {
    border-inline-start-color: var(--state-warning);
    background: color-mix(in oklch, var(--state-warning) var(--tint-soft), var(--surface-context));
  }

  .callout--warning .callout__label { color: var(--state-warning); }

  .callout__text { font-size: var(--text-sm); margin-block-start: var(--space-3xs); }

  /* ═══ FOTO ═══════════════════════════════════════════════════════════════ */

  .gallery__grid {
    display: grid;
    gap: var(--space-2xs);
    grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 45%), 1fr));
  }

  .gallery__grid img { aspect-ratio: 1; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); }

  .gallery__caption { font-size: var(--text-xs); color: var(--ink-faint); margin-block-end: var(--space-2xs); }

  .rank {
    --card-space: 1.5rem 1.625rem;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-3xs) 1.125rem;
    align-items: center;
    border-radius: var(--radius-lg);
    transition: translate var(--speed) var(--ease);
  }

  .rank:hover { translate: 0 -0.25rem; }

  .rank .numeral { --numeral-size: 2.125rem; }

  .rank__title { font-size: 1.031rem; font-weight: 700; }

  .rank__text { font-size: 0.844rem; line-height: 1.55; color: var(--ink-faint); }

  .card--accent { box-shadow: 0 1rem 2.5rem oklch(0.52 0.12 195 / 0.3); }
  .card--accent .rank__text { color: var(--ink-inverse); }

  /* ═══ BANDA IMMAGINE ═════════════════════════════════════════════════════ */

  .scene-band { position: relative; overflow: clip; }

  .scene-band__media {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .scene-band { min-block-size: clamp(18.75rem, 42vw, 30rem); }

  /* Il velo è più fitto in BASSO, dove sta il testo: è lì che serve leggibilità. */
  .scene-band__overlay {
    background: linear-gradient(to top,
      oklch(0.12 0.02 220 / 0.85), oklch(0.12 0.02 220 / 0.2) 55%, oklch(0.12 0.02 220 / 0.4));
  }

  .scene-band__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: clamp(18.75rem, 42vw, 30rem);
    padding-block: clamp(3rem, 8vw, 5.625rem);
    color: var(--ink-inverse);
  }

  .scene-band__title {
    margin-block-start: var(--space-xs);
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    max-inline-size: 47.5rem;
  }

  /* ═══ SEGNALI ════════════════════════════════════════════════════════════ */

  .hint {
    padding: 1.5rem 1.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 0.75rem 2rem oklch(0.22 0.008 255 / 0.06);
  }

  .hint__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
  }

  .hint__label .dot { animation: hint-pulse 2.4s ease-in-out infinite; }

  @keyframes hint-pulse {
    0%, 100% { scale: 1; opacity: 1; }
    50% { scale: 1.15; opacity: 0.7; }
  }

  .hint blockquote { margin-block-start: var(--space-xs); font-size: 0.906rem; line-height: 1.65; text-wrap: pretty; }

  .hint__foot {
    margin-block-start: var(--space-xs);
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid oklch(0.93 0.005 240);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--ink-faint);
  }

  /* ═══ PIANO EDITORIALE ═══════════════════════════════════════════════════ */

  .angle {
    display: inline-flex;
    padding: 0.563rem 1.125rem;
    border: 1px solid color-mix(in oklch, var(--angle-ink, var(--ink-muted)) 30%, var(--surface-context));
    border-radius: var(--radius-pill);
    font-size: 0.844rem;
    font-weight: 600;
    color: var(--angle-ink, var(--ink-muted));
    background: color-mix(in oklch, var(--angle-ink, var(--ink-muted)) 13%, var(--surface-context));
  }

  .angle--offer { --angle-ink: var(--group-offer); }
  .angle--identity { --angle-ink: var(--group-identity); }
  .angle--relation { --angle-ink: var(--group-relation); }
  .angle--value { --angle-ink: var(--group-value); }

  .dist__bar {
    display: flex;
    block-size: 3.375rem;
    border-radius: 0.875rem;
    box-shadow: 0 0.625rem 1.75rem oklch(0.22 0.008 255 / 0.1);
    overflow: clip;
  }

  /* Numerali bianchi dentro i segmenti, come nel disegno originale.
     ⚠️ Il contrasto misurato è sotto la soglia WCAG su cinque colori su sei (il
        peggiore 2,06 contro 4,5): è una scelta del committente, presa sapendolo.
        Il dato resta comunque leggibile nella legenda qui sotto, che lo ripete
        accanto al nome — ed è il motivo per cui la barra è `aria-hidden`. */
  .dist__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    background: var(--seg);
    color: #fff;
    font-size: 0.938rem;
    font-weight: 700;
  }

  .dist__key { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); font-weight: 600; }

  .dist__key em { font-style: normal; color: var(--ink-faint); }

  .swatch { inline-size: 0.688rem; block-size: 0.688rem; border-radius: 0.25rem; background: var(--seg); flex: none; }

  /* ═══ L'INVITO ═══════════════════════════════════════════════════════════
     Chiude la home: l'unico blocco a tinta piena dopo l'eroe. L'evidenza la
     porta il colore, non le parole — il testo resta un invito, e l'indirizzo è
     un `mailto:`, non un modulo (il sito non raccoglie dati: un controllo del
     costruttore vieta proprio il `<form>`). */

  .invite {
    --card-space: var(--space-lg) var(--space-md);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md) var(--space-lg);
    box-shadow: 0 1rem 2.5rem oklch(0.52 0.12 195 / 0.25);
  }

  /* 24rem: sotto questa misura il testo andrebbe a capo ogni tre parole, e
     l'indirizzo scende sotto — che è il comportamento voluto sul telefono. */
  .invite__body { flex: 1 1 24rem; min-inline-size: 0; }

  .invite__label {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .invite__lead { font-size: var(--text-sm); line-height: 1.65; text-wrap: pretty; max-inline-size: var(--measure); }

  .invite__note { font-size: var(--text-xs); font-style: italic; line-height: 1.6; max-inline-size: var(--measure); }

  .invite__mail {
    flex: none;
    max-inline-size: 100%;
    padding: 0.85em 1.5em;
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--color-accent-deep);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    /* L'indirizzo è una parola sola di 26 caratteri: senza questo, su schermi
       stretti sborderebbe dalla pastiglia invece di andare a capo. */
    overflow-wrap: anywhere;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
  }

  .invite__mail:hover { background: var(--surface-inverse); color: var(--color-accent-bright); }

  /* ═══ SCHEDA IDENTIFICATIVA (solo privacy.html) ══════════════════════════ */

  .idcard {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    font-size: var(--text-sm);
  }

  .idcard__row { display: grid; gap: var(--space-3xs); }

  .idcard dt { font-weight: 600; color: var(--ink-faint); font-size: var(--text-xs); }

  /* Variante «elenco di fatti»: otto righe di fila si leggono come un blocco unico,
     e un filo fra l'una e l'altra basta a renderle scorribili. ⚠️ La scheda dei dati
     identificativi di `privacy.html` NON la usa: lì le righe sono poche e il filo
     sarebbe rumore. */
  .idcard--rows { gap: 0; }

  .idcard--rows .idcard__row {
    padding-block: var(--space-xs);
    border-block-start: 1px solid var(--border);
  }

  .idcard--rows .idcard__row:first-child { padding-block-start: 0; border-block-start: 0; }
  .idcard--rows .idcard__row:last-child { padding-block-end: 0; }

  /* Variante «il termine è il protagonista»: per un elenco di strumenti il nome
     conta più della descrizione, e l'etichetta tenue invertirebbe la gerarchia. */
  .idcard--titled dt {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink);
  }

  @media (width >= 40rem) {
    .idcard__row { grid-template-columns: 9rem 1fr; gap: var(--space-sm); align-items: baseline; }
    .idcard--titled .idcard__row { grid-template-columns: 11rem 1fr; }
  }
}

/* ── Consenso ai cookie ──────────────────────────────────────────────────────
   Il banner sta in basso, NON è modale (la pagina resta usabile) e non copre più di
   quanto serve a leggere e scegliere. «Accetta tutti» e «Rifiuta» hanno la STESSA forma:
   è la pari evidenza che il Garante chiede fra accettare e chiudere/rifiutare;
   «Personalizza» è l'unico in variante a contorno. La X è un comando vero, grande
   quanto un dito. Nessun colore a mano: token, o miscele sui token. */
@layer components {
  .consent {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    padding: var(--space-sm) var(--gutter) max(var(--space-sm), env(safe-area-inset-bottom));
    pointer-events: none;
  }

  .consent__panel {
    position: relative;
    display: grid;
    gap: var(--space-sm);
    max-inline-size: var(--wrap);
    margin-inline: auto;
    padding: var(--space-md) var(--space-lg);
    padding-inline-end: calc(var(--space-lg) + 2.5rem);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1rem 2.5rem color-mix(in oklch, var(--surface-inverse) 25%, transparent);
    pointer-events: auto;
    /* Mai più alto dello schermo visibile: ancorato in basso, crescerebbe verso l'alto e
       titolo, testo e X uscirebbero dallo schermo (succede con «Personalizza» aperto sul
       telefono). Oltre, si scorre DENTRO il riquadro e la pagina sotto resta ferma.
       `dvh` segue la barra del browser estesa o ridotta; `vh` è il ripiego. */
    max-block-size: calc(100vh - var(--space-sm) - max(var(--space-sm), env(safe-area-inset-bottom)));
    max-block-size: calc(100dvh - var(--space-sm) - max(var(--space-sm), env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .consent__close {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .consent__close:hover { background: var(--surface); border-color: var(--border-strong); }

  .consent__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .consent__text {
    font-size: var(--text-sm);
    line-height: 1.6;
    max-inline-size: var(--measure-wide);
    text-wrap: pretty;
  }

  .consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

  .consent__actions .button { font-size: var(--text-sm); padding: 0.7em 1.4em; cursor: pointer; }

  /* Variante a contorno del pulsante pieno: stessa forma, meno peso. Solo per un'azione
     secondaria accanto a quella principale. */
  .button--outline {
    --button-surface: transparent;
    --button-ink: var(--color-accent-deep);
    border-color: var(--color-accent-deep);
  }

  .button--outline:hover { background: color-mix(in oklch, var(--color-accent) var(--tint-soft), var(--surface-context)); }

  .consent__prefs {
    display: grid;
    gap: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--border);
  }

  .consent__group { display: grid; gap: var(--space-3xs); margin: 0; padding: 0; border: 0; }

  .consent__option {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 600;
  }

  .consent__option input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--color-accent); }

  .consent__option-text, .consent__services {
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--ink-muted);
    max-inline-size: var(--measure-wide);
  }

  .consent__services { padding-inline-start: 1.2em; }

  /* Sul telefono il banner NON deve mangiarsi lo schermo (misurato: 70 % a 393×660 con le
     misure del desktop). Scala compatta: meno respiro, testo un gradino sotto, pulsanti
     più stretti. Il contenuto resta identico: è ciò che il Garante chiede di dire. */
  @media (width < 48rem) {
    .consent { padding-inline: var(--space-2xs); }
    .consent__panel { gap: var(--space-xs); padding: var(--space-sm); padding-inline-end: calc(var(--space-sm) + 2.25rem); border-radius: var(--radius-md); }
    .consent__close { inline-size: 2.25rem; block-size: 2.25rem; font-size: 1.25rem; }
    .consent__title { font-size: var(--text-md); }
    .consent__text { font-size: var(--text-xs); line-height: 1.5; }
    .consent__actions { gap: var(--space-2xs); }
    .consent__actions .button { font-size: var(--text-xs); padding: 0.6em 1.1em; }
  }

  /* Nel piede: un pulsante che sembra un collegamento, perché sta fra collegamenti. */
  .consent-reopen {
    padding: var(--space-3xs) 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .consent-reopen:hover { text-decoration: underline; }

  /* La tabella dei cookie nell'informativa. */
  .cookie-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .cookie-table th, .cookie-table td {
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
  }

  .cookie-table thead th { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

  .cookie-table code { font-size: 0.9em; }
}

/* ── Modulo contatti ─────────────────────────────────────────────────────────
   Campi grandi quanto un dito, etichette sempre visibili (niente placeholder al posto
   dell'etichetta), esito nello stesso posto del pulsante. Nessun colore a mano. */
@layer components {
  .form {
    display: grid;
    gap: var(--space-sm);
    max-inline-size: var(--measure-wide);
    padding: var(--space-lg) var(--space-md);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .form__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .form__row {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .form__field { display: grid; gap: var(--space-3xs); }

  .form__label { font-size: var(--text-sm); font-weight: 600; }
  .form__optional { font-weight: 400; color: var(--ink-muted); }

  .form__input {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.6em 0.9em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-md);
  }

  .form__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }

  .form__input--area { min-block-size: 8rem; resize: vertical; }

  .form__note { font-size: var(--text-xs); line-height: 1.55; color: var(--ink-muted); max-inline-size: var(--measure); }


  .form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

  .form__submit .button { cursor: pointer; }

  .form__submit .button:disabled { opacity: 0.6; cursor: wait; }

  .form__status { font-size: var(--text-sm); font-weight: 600; }
}

/* ── Evento e iscrizione ─────────────────────────────────────────────────────
   I dettagli di una serata (quando, dove, quanto costa) e la casella del modulo
   d'iscrizione. Etichetta sopra, valore sotto: si legge in un colpo anche sul telefono. */
@layer components {
  .event { display: grid; gap: var(--space-xs); margin: 0; }

  .event__row { display: grid; gap: 0.1rem; }

  .event dt {
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
  }

  .event dd { margin: 0; font-size: var(--text-md); font-weight: 600; line-height: 1.4; }

  .form__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    line-height: 1.45;
    cursor: pointer;
  }

  .form__check input {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 0.15em;
    accent-color: var(--color-accent);
  }

  /* La scheda della serata nella testata: chiara sul fondo scuro, perché è l'azione della
     pagina e deve staccare da tutto il resto. Dentro, il contesto delle tinte torna chiaro. */
  .signup {
    --surface-context: var(--surface-raised);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--ink);
  }

  .signup__label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
  }

  .signup__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }

  .signup__text { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); max-inline-size: var(--measure); }

  /* Dentro la scheda il modulo non è una seconda scheda: niente bordo né fondo propri. */
  .signup .form { padding: 0; border: 0; background: none; max-inline-size: none; }

  /* Testata con due schede: la serata e i dati del corso affiancati quando c'è spazio,
     in colonna sul telefono — la serata sempre per prima. */
  .hero__cols {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
  }

  @media (width < 48rem) {
    .signup { padding: var(--space-md); gap: var(--space-sm); }
  }
}

/* ═══ 06-piece-diagram.css ═══ */
/* PEZZO UNICO — lo schema «Dal rumore alla fiducia».
   ═══════════════════════════════════════════════════════════════════════════
   Non è un componente del sistema: è un'illustrazione. La sua unica virtù è
   SOMIGLIARE a com'è disegnata, non essere riusabile.

   Regole del piano «pezzi», valide per questo file e per ogni altro come lui:
   · tutto vive sotto un solo nome radice (qui `.diagram`);
   · consuma i token del sistema, e le tinte che il sistema non ha se le dichiara
     NEL PROPRIO AMBITO — mai in `:root`;
   · non tocca nessun componente condiviso, e nessuna sua regola può sfuggire
     fuori dalla radice;
   · sta nel layer `pieces`: può vestirsi come vuole senza gare di specificità,
     e le utility continuano a vincere su tutto.

   ⚠️ Le etichette VIBRANO, e non è un vezzo: è la vibrazione a rendere «rumore»
   il rumore. Sotto `prefers-reduced-motion` si fermano restando dove sono. */

@layer pieces {
  /* Il pannello chiaro dentro l'eroe scuro.
     ⚠️ `order: -1` è la riga che concilia le due esigenze: l'h1 resta PRIMO nel
     documento (per screen reader e motori) e il pannello torna PRIMO a vedersi,
     com'era. Si può fare senza danno solo perché qui dentro non c'è nulla che
     riceva il focus: ordine di lettura e ordine di tabulazione non divergono. */
  .diagram-panel {
    order: -1;
    --surface-context: var(--surface-raised);
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.125rem, 4vw, 2.5rem);
    border: 1px solid oklch(0.9 0.006 255);
    border-radius: var(--radius-xl);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1.875rem 4.375rem oklch(0.07 0.02 220 / 0.45);
  }

  .diagram {
    --shout-red-ink: oklch(0.5 0.2 25);
    --shout-red-bg: oklch(0.62 0.2 25 / 0.13);
    --shout-red-line: oklch(0.6 0.2 25 / 0.5);
    --shout-amber-ink: oklch(0.52 0.15 55);
    --shout-amber-bg: oklch(0.7 0.16 60 / 0.16);
    --shout-amber-line: oklch(0.68 0.16 60 / 0.55);
    --shout-violet-ink: oklch(0.48 0.18 300);
    --shout-violet-bg: oklch(0.62 0.17 300 / 0.13);
    --shout-violet-line: oklch(0.6 0.17 300 / 0.5);

    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    margin-block-start: 1.75rem;
  }

  .diagram__eyebrow {
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.688rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
  }

  .diagram__title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 4.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin-block-start: 0.75rem;
  }

  .diagram__col { display: flex; flex-direction: column; }

  /* ── La scatola del rumore ─────────────────────────────────────────────── */

  .diagram__noise {
    position: relative;
    flex: 1;
    min-block-size: 15rem;
    padding: 0.875rem;
    border: 1px dashed oklch(0.82 0.01 255);
    border-radius: var(--radius-lg);
    background: oklch(0.955 0.004 240);
    overflow: hidden;
  }

  /* Posizione e rotazione arrivano da `style=` sul singolo elemento: sono dati
     del disegno, non decisioni di sistema. */
  .diagram__shout {
    position: absolute;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.781rem;
    font-weight: 800;
    rotate: var(--rot, 0deg);
    animation: diagram-jitter var(--jitter, 5s) ease-in-out infinite var(--jitter-delay, 0s);
  }

  .diagram__shout--red { color: var(--shout-red-ink); background: var(--shout-red-bg); border: 1px solid var(--shout-red-line); }
  .diagram__shout--amber { color: var(--shout-amber-ink); background: var(--shout-amber-bg); border: 1px solid var(--shout-amber-line); }
  .diagram__shout--violet { color: var(--shout-violet-ink); background: var(--shout-violet-bg); border: 1px solid var(--shout-violet-line); }

  .diagram__pins {
    position: absolute;
    display: flex;
    gap: 0.25rem;
    rotate: var(--rot, 0deg);
    animation: diagram-jitter var(--jitter, 5s) ease-in-out infinite var(--jitter-delay, 0s);
  }

  .diagram__pin {
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--surface-raised);
    font-size: 0.688rem;
    font-weight: 800;
  }

  .diagram__pin--red { background: oklch(0.55 0.2 25 / 0.75); }
  .diagram__pin--amber { background: oklch(0.6 0.17 55 / 0.7); font-size: 0.75rem; }

  @keyframes diagram-jitter {
    0%, 100% { translate: 0 0; rotate: var(--rot, 0deg); }
    25% { translate: -2px -3px; rotate: calc(var(--rot, 0deg) - 1.5deg); }
    75% { translate: 2px 2px; rotate: calc(var(--rot, 0deg) + 1.5deg); }
  }

  /* ── Il filtro ─────────────────────────────────────────────────────────── */

  .diagram__filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
  }

  .diagram__arrow {
    font-size: 1.375rem;
    color: oklch(0.55 0.07 200);
    rotate: 90deg;
  }

  .diagram__pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    max-inline-size: 8.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid oklch(0.6 0.12 195 / 0.55);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--color-accent) 10%, var(--surface-raised));
    text-align: center;
  }

  .diagram__pill .logo-tile {
    --size: 2.125rem;
    box-shadow: 0 0 20px oklch(0.55 0.13 195 / 0.5);
  }

  .diagram__pill-label {
    font-size: 0.688rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
    line-height: 1.35;
  }

  /* ── La card di qualità ────────────────────────────────────────────────── */

  .diagram__card {
    flex: 1;
    min-block-size: 15rem;
    display: flex;
    flex-direction: column;
    border: 1px solid oklch(0.88 0.006 255);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    overflow: hidden;
    /* L'anello che respira: è ciò che distingue visivamente «la cosa buona»
       dal rumore che le sta accanto. */
    animation: diagram-glow 4s ease-in-out infinite;
  }

  .diagram__card img {
    inline-size: 100%;
    block-size: 7.5rem;
    object-fit: cover;
  }

  .diagram__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: 0.875rem 1rem;
  }

  .diagram__card-title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .diagram__card-text {
    font-size: 0.781rem;
    line-height: 1.55;
    color: var(--ink-muted);
  }

  @keyframes diagram-glow {
    0%, 100% { box-shadow: 0 0 0 0 oklch(0.6 0.13 195 / 0.5), 0 1.125rem 2.75rem oklch(0.1 0.02 220 / 0.18); }
    50% { box-shadow: 0 0 0 0.5rem oklch(0.6 0.13 195 / 0.12), 0 1.125rem 2.75rem oklch(0.1 0.02 220 / 0.18); }
  }

  /* ── Le due didascalie, ciascuna del colore della sua colonna ──────────── */

  .diagram__cap {
    margin-block-start: 1.125rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .diagram__cap--noise { color: oklch(0.52 0.17 32); }
  .diagram__cap--quality { color: var(--color-accent-deep); }

  /* Da tre colonne in su, le frecce tornano orizzontali. */
  @media (width >= 48rem) {
    .diagram { grid-template-columns: 1fr auto 1fr; }
    .diagram__arrow { rotate: 0deg; }
    .diagram__filter { flex-direction: row; }
    .diagram__filter .diagram__pill { order: 0; }
  }
}

/* ═══ 07-piece-demo.css ═══ */
/* PEZZO UNICO — la dimostrazione dell'app: il riquadro del telefono e le cinque scene.
   ═══════════════════════════════════════════════════════════════════════════
   Vale la stessa disciplina del pezzo `.diagram`: un solo nome radice, consuma i
   token, dichiara nel proprio ambito ciò che al sistema non serve, non tocca nulla
   di condiviso, vive nel layer `pieces`.

   Le cinque scene sono l'argomento della pagina: ognuna deve SOMIGLIARE alla
   schermata che racconta. Ridurle a testo con pastiglie le renderebbe mute — è
   l'errore da cui questo file nasce.

   ⚠️ `--surface-context` viene rimesso a chiaro dentro il riquadro: l'eroe che lo
   contiene è scuro, e senza questa riga ogni tinta tenue qui dentro si calcolerebbe
   sul fondo sbagliato (pastiglie scure su carta bianca).

   ⚠️ Nessuna altezza fissa sulle scene: il contenuto è testo che si riflowa, e una
   gabbia lo taglierebbe a schermo stretto o a zoom alto. */

@layer pieces {
  .demo {
    --demo-line: oklch(0.91 0.006 255);
    --demo-line-soft: oklch(0.94 0.004 255);
    --demo-red: oklch(0.6 0.2 10);
    --demo-red-ink: oklch(0.47 0.19 10);
    --demo-amber: oklch(0.52 0.15 65);
    --demo-amber-ink: oklch(0.45 0.13 65);
    --demo-green: oklch(0.52 0.13 150);

    position: relative;
    inline-size: 100%;
    max-inline-size: 33.75rem;
    margin-inline: auto;
  }

  .demo__glow {
    position: absolute;
    inset: -1.75rem;
    border-radius: 2.5rem;
    background: radial-gradient(closest-side, oklch(0.55 0.13 195 / 0.28), transparent);
    pointer-events: none;
  }

  .demo__frame {
    --surface-context: var(--surface-raised);
    position: relative;
    container-type: inline-size;
    container-name: demo;
    border: 1px solid oklch(1 0 0 / 0.14);
    border-radius: var(--radius-xl);
    background: oklch(0.99 0.002 240);
    color: var(--ink);
    box-shadow: 0 1.5rem 5rem oklch(0.1 0.02 220 / 0.55), 0 0 0 0.5rem oklch(1 0 0 / 0.04);
    overflow: hidden;
  }

  .demo__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-block-end: 1px solid oklch(0.93 0.005 240);
    background: var(--surface-raised);
    font-size: 0.844rem;
    font-weight: 600;
  }

  .demo__brand { display: flex; align-items: center; gap: 0.563rem; }
  .demo__brand .logo-tile { --size: 1.375rem; border-radius: 0.438rem; background: var(--color-accent); }

  .demo__leds { display: flex; gap: 0.313rem; }
  .demo__leds span { inline-size: 0.438rem; block-size: 0.438rem; border-radius: 50%; background: oklch(0.9 0.006 255); }
  .demo__leds span:last-child { background: var(--color-accent-bright); }

  /* ── La traccia sfogliabile ────────────────────────────────────────────── */

  .demo__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    background: oklch(0.985 0.004 250);
  }

  .demo__track::-webkit-scrollbar { display: none; }

  .demo__scene {
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.625rem;
    min-block-size: 24rem;
    padding: 1.5rem 1.625rem;
  }

  /* Solo la scena finale è centrata DAVVERO: il resto — la proposta compresa — resta
     allineato a sinistra, perché è testo da leggere, non un annuncio. */
  .demo__scene--pub { align-items: center; text-align: center; gap: 1.125rem; }

  .demo__label {
    font-size: 0.719rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-block-end: 0.25rem;
  }

  .demo__foot { font-size: 0.781rem; line-height: 1.55; color: var(--ink-faint); text-wrap: pretty; }
  .demo__foot strong { color: var(--ink); }

  /* ── Scena 1 · i materiali ─────────────────────────────────────────────── */

  .demo__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.688rem 0.875rem;
    border: 1px solid var(--demo-line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }

  .demo__icon {
    inline-size: 1.875rem;
    block-size: 2.125rem;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.188rem;
    padding: 0.438rem 0.313rem;
    border: 1.5px solid var(--color-accent);
    border-radius: 0.375rem;
  }

  .demo__icon i { block-size: 2px; inline-size: 100%; border-radius: 2px; background: oklch(0.85 0.02 195); }
  .demo__icon i:first-child { inline-size: 80%; background: var(--color-accent); }
  .demo__icon i:last-child { inline-size: 55%; }

  .demo__icon--grey { border-color: oklch(0.7 0.01 255); }
  .demo__icon--grey i { background: oklch(0.88 0.005 255); }
  .demo__icon--grey i:first-child { background: oklch(0.7 0.01 255); inline-size: 70%; }

  .demo__icon--note {
    inline-size: 2.125rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.438rem;
    background: color-mix(in oklch, var(--demo-amber) 15%, var(--surface-raised));
    color: var(--demo-amber-ink);
    font-size: 0.875rem;
    font-weight: 800;
  }

  .demo__thumb {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    flex: none;
    border-radius: 0.438rem;
    border: 1px solid oklch(0.87 0.02 195);
    object-fit: cover;
  }

  .demo__main { flex: 1; min-inline-size: 0; }
  .demo__t { font-size: 0.813rem; font-weight: 600; }
  .demo__s { font-size: 0.719rem; color: var(--ink-faint); }

  .demo__tag {
    flex: none;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.656rem;
    font-weight: 700;
  }

  .demo__tag--teal { color: var(--color-accent-deep); background: color-mix(in oklch, var(--color-accent) 13%, var(--surface-raised)); }
  .demo__tag--red { color: var(--demo-red-ink); background: color-mix(in oklch, var(--demo-red) 13%, var(--surface-raised)); }
  .demo__tag--amber { color: var(--demo-amber-ink); background: color-mix(in oklch, var(--demo-amber) 14%, var(--surface-raised)); }
  .demo__tag--grey { color: var(--ink-muted); background: oklch(0.95 0.004 255); }

  .demo__note {
    display: flex;
    align-items: center;
    gap: 0.688rem;
    margin-block-start: 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in oklch, var(--color-accent) 28%, var(--surface-raised));
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-accent) 11%, var(--surface-raised));
    font-size: 0.781rem;
    line-height: 1.45;
    color: oklch(0.38 0.06 200);
  }

  .demo__note-dot {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    flex: none;
    border-radius: 50%;
    background: var(--color-accent);
    animation: demo-pulse 2.2s ease-in-out infinite;
  }

  @keyframes demo-pulse {
    0%, 100% { scale: 1; opacity: 1; }
    50% { scale: 1.12; opacity: 0.75; }
  }

  /* ── Scena 2 · il piano ────────────────────────────────────────────────
     Le BARRE sono il messaggio: mostrano le proporzioni. Un numero in una
     pastiglia direbbe la stessa cifra senza farla vedere. */

  .demo__plan {
    display: grid;
    grid-template-columns: 6rem 1fr 1.375rem;
    gap: 0.813rem 0.75rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid var(--demo-line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    font-size: 0.813rem;
  }

  /* `display: contents` scioglie la riga nella griglia a tre colonne, così i
     nomi, le barre e i pesi restano incolonnati fra loro. */
  .demo__plan-row { display: contents; }
  .demo__plan-name { font-weight: 500; }
  .demo__plan-track { block-size: 0.563rem; border-radius: 0.313rem; background: oklch(0.955 0.004 255); overflow: hidden; }
  .demo__plan-fill { display: block; block-size: 100%; border-radius: 0.313rem; }
  .demo__plan-w { font-weight: 700; text-align: end; }

  .demo__plan-row--muted .demo__plan-name,
  .demo__plan-row--muted .demo__plan-w { color: oklch(0.6 0.01 255); }

  .demo__fill--red { background: linear-gradient(90deg, oklch(0.6 0.2 10), oklch(0.68 0.17 10)); }
  .demo__fill--amber { background: linear-gradient(90deg, oklch(0.72 0.15 60), oklch(0.78 0.13 60)); }
  .demo__fill--green { background: linear-gradient(90deg, oklch(0.63 0.15 155), oklch(0.7 0.13 155)); }

  /* ── Scena 3 · il post ─────────────────────────────────────────────────── */

  .demo__post {
    border: 1px solid var(--demo-line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0.375rem 1.25rem oklch(0.22 0.008 255 / 0.05);
    overflow: hidden;
  }

  .demo__post-media { position: relative; }

  .demo__post-media img { inline-size: 100%; block-size: 9.375rem; object-fit: cover; }

  .demo__post-tags {
    position: absolute;
    inset-block-end: 0.625rem;
    inset-inline: 0.875rem;
    display: flex;
    justify-content: space-between;
  }

  .demo__post-tag { padding: 0.188rem 0.5rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; }
  .demo__post-tag--light { color: oklch(0.3 0.02 210); background: oklch(1 0 0 / 0.9); font-weight: 600; }
  .demo__post-tag--dark { color: var(--surface-raised); background: oklch(0.4 0.06 210 / 0.82); }

  .demo__badges { display: flex; flex-wrap: wrap; gap: 0.438rem; }

  .demo__post-body { display: flex; flex-direction: column; gap: var(--space-2xs); padding: 1rem 1.125rem; }

  .demo__title { font-family: var(--font-display); font-size: 1.031rem; font-weight: 700; letter-spacing: -0.01em; }
  .demo__text { font-size: 0.781rem; line-height: 1.55; color: var(--ink-muted); }

  .demo__hashtags { display: flex; flex-wrap: wrap; gap: 0.438rem; font-size: 0.719rem; color: var(--color-accent-deep); }

  .demo__why {
    padding-block-start: 0.563rem;
    border-block-start: 1px solid var(--demo-line-soft);
    font-size: 0.719rem;
    line-height: 1.5;
    color: var(--ink-faint);
  }

  .demo__why strong { color: var(--color-accent-deep); }

  /* ── Scena 4 · la revisione ────────────────────────────────────────────── */

  .demo__review {
    display: flex;
    flex-direction: column;
    gap: 0.813rem;
    padding: 1.25rem 1.375rem;
    border: 1px solid var(--demo-line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
  }

  .demo__warn {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.688rem 0.875rem;
    border-radius: 0.688rem;
    background: color-mix(in oklch, var(--demo-amber) 13%, var(--surface-raised));
    font-size: 0.75rem;
    line-height: 1.5;
    color: oklch(0.38 0.1 65);
  }

  .demo__bang {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--demo-amber);
    color: var(--surface-raised);
    font-size: 0.75rem;
    font-weight: 800;
  }

  .demo__actions { display: flex; flex-wrap: wrap; gap: 0.563rem; }

  .demo__action {
    padding: 0.625rem 1rem;
    border: 1px solid oklch(0.9 0.006 255);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--ink-muted);
  }

  .demo__action--primary {
    padding-inline: 1.375rem;
    border-color: transparent;
    background: var(--color-accent);
    color: var(--surface-raised);
    font-weight: 600;
    box-shadow: 0 0.25rem 0.875rem oklch(0.52 0.12 195 / 0.35);
  }

  /* ── Scena 5 · pubblicato ──────────────────────────────────────────────── */

  .demo__ring {
    inline-size: 4.625rem;
    block-size: 4.625rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in oklch, var(--demo-green) 15%, var(--surface-raised));
  }

  .demo__check {
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--demo-green);
    color: var(--surface-raised);
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 0.375rem 1.25rem oklch(0.52 0.13 150 / 0.4);
  }

  .demo__pub-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

  .demo__channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }

  .demo__chan {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.563rem 1.125rem;
    border: 1px solid var(--demo-line);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    font-size: 0.813rem;
    font-weight: 600;
  }

  .demo__chan-dot { inline-size: 0.563rem; block-size: 0.563rem; border-radius: 50%; }
  .demo__chan-dot--ig { background: oklch(0.56 0.19 300); }
  .demo__chan-dot--fb { background: oklch(0.52 0.13 245); }

  .demo__pub-text { max-inline-size: 21rem; font-size: 0.781rem; line-height: 1.55; color: var(--ink-faint); text-wrap: pretty; }

  /* ── I comandi, FUORI dal riquadro: stanno sul fondo scuro dell'eroe ───── */

  .demo__controls {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-block-start: 1.375rem;
  }

  .demo__step {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid oklch(1 0 0 / 0.16);
    border-radius: 50%;
    background: oklch(1 0 0 / 0.06);
    color: var(--ink-inverse-muted);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
                border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  }

  .demo__step:hover { border-color: var(--color-accent-bright); color: var(--ink-inverse); }

  .demo__step[aria-current] {
    background: var(--color-accent-bright);
    border-color: oklch(0.7 0.13 195);
    color: var(--surface-raised);
    box-shadow: 0 0 1.125rem oklch(0.6 0.13 195 / 0.55);
  }

  @container demo (min-width: 30rem) {
    .demo__scene { padding: 1.75rem 2rem; }
  }

  /* ── Riquadro stretto (telefono) ────────────────────────────────────────
     Qui il vincolo NON è la larghezza, è l'ALTEZZA: il riquadro più i comandi
     1-5 devono stare in UNA schermata anche quando il browser mostra la barra
     estesa — che è il caso peggiore, non un caso raro. Altrimenti i bottoni
     finiscono sotto la barra e la giostra sembra rotta.
     L'altezza la detta sempre la scena più alta (la 1, quattro righe), perché
     in una giostra tutte le schede sono alte uguale.

     Il pezzo passa quindi a una SCALA COMPATTA: è l'illustrazione di una
     schermata, non testo da leggere, e rimpicciolirla è legittimo — il testo
     vero della pagina intorno resta alla sua misura.

     ⚠️ La pastiglia resta IN LINEA col titolo anche qui, e non è una svista:
     mandarla a capo costa una riga per ciascuna delle quattro righe (~85px in
     tutto), che è quasi tutto il margine disponibile. A questa scala il titolo
     più lungo («Foto · «Cornetto appena sfornato»») misura ~184px e la
     pastiglia più larga accanto ~48: dei ~253 disponibili ne restano una
     ventina di margine. È stretto ma verificato sui testi reali — se un domani
     un titolo si allunga, va a capo e la riga si alza: si controlla lì. */
  @container demo (max-width: 28rem) {
    .demo__scene {
      gap: 0.5rem;
      min-block-size: 18rem;
      padding: 0.875rem 1rem;
    }

    .demo__label { font-size: 0.688rem; margin-block-end: 0.125rem; }
    .demo__text { font-size: 0.75rem; }
    .demo__foot { font-size: 0.75rem; }

    /* Scena 1 */
    .demo__row { gap: 0.625rem; padding: 0.625rem 0.75rem; }
    .demo__t { font-size: 0.719rem; line-height: 1.3; }
    .demo__s { font-size: 0.688rem; line-height: 1.4; }
    .demo__tag { padding: 0.125rem 0.5rem; font-size: 0.625rem; }
    .demo__note { padding: 0.625rem 0.75rem; font-size: 0.719rem; }

    /* Scena 2 */
    .demo__plan { gap: 0.625rem; padding: 0.875rem; font-size: 0.75rem; }

    /* Scena 4 · senza questo diventerebbe lei la scena più alta, e il conto
       tornerebbe da capo. */
    .demo__review { gap: 0.625rem; padding: 0.875rem 1rem; }
    .demo__action { padding: 0.438rem 0.75rem; font-size: 0.75rem; }
    .demo__action--primary { padding-inline: 1rem; }

    /* Scena 5 */
    .demo__ring { inline-size: 3.5rem; block-size: 3.5rem; }
    .demo__check { inline-size: 2.375rem; block-size: 2.375rem; font-size: 1.125rem; }
    .demo__pub-title { font-size: 1.25rem; }
    .demo__chan { padding: 0.438rem 0.875rem; font-size: 0.75rem; }
    .demo__pub-text { font-size: 0.75rem; }
  }
}

/* ═══ 08-piece-figure.css ═══ */
/* PEZZO UNICO — le illustrazioni della pagina del corso.
   ═══════════════════════════════════════════════════════════════════════════
   Non sono componenti del sistema: sono disegni, uno per concetto. La loro unica
   virtù è SOMIGLIARE a come sono disegnati, non essere riusabili.

   Regole del piano «pezzi», come negli altri file `0N-piece-*`:
   · tutto vive sotto un solo nome radice (qui `.fig`);
   · consuma i token del sistema e non ne dichiara di nuovi: se la palette cambia,
     i disegni si adeguano da soli;
   · le tinte tenui si compongono con `color-mix`, mai scritte a mano;
   · nessuna animazione — sono figure ferme.

   ⚠️ IL TESTO DENTRO UN DISEGNO NON SI LEGGE SUL TELEFONO. Un disegno largo 640
   unità mostrato a 360 px rimpicciolisce ogni parola di quasi due volte: perciò
   qui dentro stanno SOLO poche parole grandi, e la lettura vera sta nella
   didascalia in HTML, che resta alla misura del testo della pagina. Aggiungere
   etichette piccole dentro l'SVG è il modo sicuro di renderle illeggibili.

   ⚠️ I pannelli sono chiari: queste figure sono pensate per le bande CHIARE. Su
   fondo scuro andrebbero ridichiarate le tinte, non riusate così. */

@layer pieces {
  .fig {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    max-inline-size: 44rem;
  }

  .fig > svg {
    inline-size: 100%;
    block-size: auto;
  }

  .fig figcaption {
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

  /* Una didascalia che elenca dei passi li mette UNO PER RIGA: in un unico periodo
     i numeri in grassetto si perdono dentro il testo e l'ordine non si vede. */
  .fig figcaption ol {
    display: grid;
    gap: var(--space-3xs);
    margin: 0;
    padding-inline-start: 1.5em;
    list-style: decimal;
  }

  .fig figcaption li::marker {
    color: var(--color-accent-deep);
    font-weight: 700;
  }

  .fig figcaption p { margin-block-start: var(--space-2xs); }

  /* ── superfici ── */
  .fig .fig-panel {
    fill: var(--surface-raised);
    stroke: var(--border-strong);
    stroke-width: 1.5;
  }

  .fig .fig-panel--accent {
    fill: color-mix(in oklch, var(--color-accent) var(--tint-soft), var(--surface-raised));
    stroke: var(--color-accent);
  }

  /* ── segni ── */
  .fig .fig-glyph {
    fill: none;
    stroke: var(--color-accent-deep);
    stroke-width: 3;
    stroke-linecap: round;
  }

  .fig .fig-glyph--solid {
    fill: var(--color-accent-deep);
    stroke: none;
  }

  .fig .fig-bar { fill: color-mix(in oklch, var(--ink) 20%, var(--surface-raised)); }

  /* La scatola chiusa: piena e muta, senza contorno. Non si vede cosa c'è dentro,
     ed è esattamente ciò che deve comunicare. */
  .fig .fig-closed { fill: color-mix(in oklch, var(--ink) 18%, var(--surface-raised)); }
  .fig .fig-closed--top { fill: color-mix(in oklch, var(--ink) 34%, var(--surface-raised)); }

  /* Il numero del passo: pallino pieno, cifra chiara sopra. */
  .fig .fig-badge { fill: var(--color-accent-deep); }

  .fig .fig-badge-text {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    fill: var(--surface-raised);
  }

  .fig .fig-arrow {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .fig .fig-arrow--warning { stroke: var(--state-warning); }

  /* ── parole: poche e grandi ── */
  .fig .fig-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
    fill: var(--ink);
  }

  .fig .fig-note {
    font-family: var(--font-body);
    font-size: 21px;
    font-weight: 600;
    fill: var(--color-accent-deep);
  }

  .fig .fig-note--warning { fill: var(--state-warning); }
}

/* ═══ 09-piece-come-funziona.css ═══ */
/* PEZZO UNICO — l'animazione «Come nasce ogni tuo post» (pagina come-funziona.html).
   ═══════════════════════════════════════════════════════════════════════════
   Consegnata come blocco a sé (markup in src/pages/come-funziona.html, logica in coda
   a src/main.js, foto in src/assets/images/come-funziona/): tutto sotto la radice `.cf`,
   con i propri colori dichiarati nel proprio ambito, nel layer `pieces`. Le regole del
   piano «pezzi» sono in testa a 06-piece-diagram.css. Il contenuto (testi, durate, foto)
   è quello approvato: si cambia nello script (`title:`, `outcome:`, `data-cf-durate`),
   non qui. */
@layer pieces {
  /* =========================================================================
     Come nasce ogni tuo post — blocco animazione
     Tutte le regole sono sotto il prefisso .cf  (nessuno stile globale).
     I colori sono variabili CSS: per agganciarli ai colori del sito basta
     ridefinirle, ad esempio  .cf { --cf-primary: var(--colore-primario); }
     ========================================================================= */

  .cf {
    /* colori principali */
    --cf-primary: oklch(0.52 0.12 195);        /* teal — rif. #0e7c86 */
    --cf-primary-deep: oklch(0.40 0.11 195);
    --cf-fg: oklch(0.22 0.008 255);            /* testo scuro */
    --cf-muted-fg: oklch(0.55 0.012 255);      /* testo secondario */
    --cf-border: oklch(0.90 0.006 255);
    --cf-muted: oklch(0.968 0.004 255);
    --cf-card: #ffffff;
    --cf-screen: oklch(0.985 0.004 255);       /* fondo dello schermo del telefono */
    --cf-bezel: #0e1117;                       /* cornice del telefono */

    /* colori di significato */
    --cf-info: oklch(0.52 0.13 245);
    --cf-info-deep: oklch(0.45 0.11 245);
    --cf-warning: oklch(0.52 0.15 65);
    --cf-success: oklch(0.52 0.13 150);
    --cf-success-deep: oklch(0.45 0.13 150);
    --cf-danger: oklch(0.55 0.18 27);
    --cf-viola: oklch(0.56 0.19 300);
    --cf-viola-deep: oklch(0.45 0.18 300);

    /* colori dei tipi di post */
    --cf-t-offro: oklch(0.72 0.15 60);
    --cf-t-chi: oklch(0.60 0.20 10);
    --cf-t-rel: oklch(0.56 0.19 300);
    --cf-t-val: oklch(0.63 0.15 155);

    --cf-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cf-scale: 0.85; /* aggiornato dallo script in base allo spazio */

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 0 4px;
    font-family: var(--cf-font);
    font-size: 16px;
    line-height: 1.3;
    color: var(--cf-fg);
    text-align: left;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
  }
  .cf *,
  .cf *::before,
  .cf *::after { box-sizing: border-box; }

  /* ---------- telefono ---------- */

  .cf-stage {
    position: relative;
    flex-shrink: 0;
    width: calc(416px * var(--cf-scale));
    height: calc(870px * var(--cf-scale));
  }
  .cf-phone {
    position: absolute;
    left: 0;
    top: 0;
    width: 416px;
    height: 870px;
    padding: 13px;
    border-radius: 54px;
    background: var(--cf-bezel);
    box-shadow: 0 2px 2px rgba(255, 255, 255, 0.3) inset, 0 40px 80px -34px rgba(0, 0, 0, 0.55);
    transform: scale(var(--cf-scale));
    transform-origin: 0 0;
  }
  .cf-side { position: absolute; width: 3px; border-radius: 3px; background: var(--cf-bezel); }
  .cf-side-1 { left: -3px; top: 150px; height: 52px; }
  .cf-side-2 { left: -3px; top: 220px; height: 52px; }
  .cf-side-3 { right: -3px; top: 195px; height: 82px; }

  .cf-screen {
    position: relative;
    width: 390px;
    height: 844px;
    border-radius: 42px;
    overflow: hidden;
    background: var(--cf-screen);
  }
  .cf-island {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 100px;
    height: 28px;
    margin-left: -50px;
    border-radius: 999px;
    background: #0e1117;
  }
  .cf-status {
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 24px 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-fg);
  }
  .cf-status-icons { display: flex; align-items: center; gap: 4px; }
  .cf-status-bar { width: 3px; border-radius: 1.5px; background: var(--cf-fg); }
  .cf-status-batt {
    position: relative;
    width: 20px;
    height: 10px;
    margin-left: 4px;
    border-radius: 3px;
    border: 1.2px solid var(--cf-fg);
    opacity: 0.6;
  }
  .cf-status-batt::after {
    content: "";
    position: absolute;
    left: 1.4px;
    top: 1.4px;
    bottom: 1.4px;
    width: 11px;
    border-radius: 1.5px;
    background: var(--cf-fg);
  }
  .cf-apphead {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 18px;
    border-bottom: 1px solid var(--cf-border);
    background: #fff;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cf-fg);
  }
  .cf-apphead svg { width: 24px; height: 24px; flex-shrink: 0; display: block; }
  .cf-body {
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  /* ---------- copertina iniziale (niente autoplay) ---------- */

  .cf-poster {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: calc(54px * var(--cf-scale));
    background: color-mix(in oklch, var(--cf-fg) 74%, transparent);
    color: #fff;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: pointer;
    text-align: center;
  }
  .cf-poster[hidden] { display: none; }
  .cf-poster:focus-visible { outline: 3px solid var(--cf-primary); outline-offset: 4px; }
  .cf-poster-play {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: var(--cf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease;
  }
  .cf-poster:hover .cf-poster-play { transform: scale(1.06); }
  .cf-poster-play svg { width: 34px; height: 34px; margin-left: 5px; display: block; }
  .cf-poster-text { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
  .cf-poster-sub { font-size: 14.5px; font-weight: 500; opacity: 0.92; }

  /* ---------- comandi ---------- */

  .cf-controls {
    width: 100%;
    max-width: 440px;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cf-buttons { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .cf-btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 2px solid var(--cf-border);
    background: #fff;
    color: var(--cf-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: border-color 0.15s ease, transform 0.1s ease;
  }
  .cf-btn:hover { border-color: color-mix(in oklch, var(--cf-primary) 55%, #fff); }
  .cf-btn:active { transform: scale(0.95); }
  .cf-btn:focus-visible { outline: 3px solid var(--cf-primary); outline-offset: 3px; }
  .cf-btn svg { width: 22px; height: 22px; display: block; }
  .cf-btn-play {
    width: 66px;
    height: 66px;
    border: 0;
    background: var(--cf-primary);
    color: #fff;
    box-shadow: 0 12px 26px -14px var(--cf-primary);
  }
  .cf-btn-play:hover { background: var(--cf-primary-deep); }
  .cf-btn-play svg { width: 28px; height: 28px; }
  .cf-ico-pause,
  .cf-ico-replay { display: none !important; }
  .cf.is-playing .cf-ico-play { display: none !important; }
  .cf.is-playing .cf-ico-pause { display: block !important; }
  .cf.is-end .cf-ico-play { display: none !important; }
  .cf.is-end .cf-ico-replay { display: block !important; }

  .cf-track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    cursor: pointer;
    touch-action: none;
    border-radius: 10px;
    outline: none;
  }
  .cf-track:focus-visible { box-shadow: 0 0 0 3px var(--cf-primary); }
  .cf-seg { height: 100%; min-width: 0; display: flex; align-items: center; }
  .cf-seg-bar {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--cf-border);
    overflow: hidden;
    transition: height 0.15s ease, background-color 0.15s ease;
  }
  .cf-seg.is-current .cf-seg-bar { height: 12px; }
  .cf-seg:hover .cf-seg-bar { height: 12px; background: color-mix(in oklch, var(--cf-primary) 30%, #fff); }
  .cf-seg-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 999px;
    background: var(--cf-primary);
  }
  .cf-knob {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 999px;
    background: #fff;
    border: 4px solid var(--cf-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
  }
  .cf-now {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
    text-align: center;
  }
  .cf-now-n { font-size: 14px; font-weight: 500; color: var(--cf-muted-fg); font-variant-numeric: tabular-nums; }
  .cf-now-name { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--cf-fg); }
  .cf.is-hover .cf-now-name { color: var(--cf-primary-deep); }
  .cf-hint { margin: 0; font-size: 12.5px; color: var(--cf-muted-fg); text-align: center; }

  /* ---------- accessibilità ---------- */

  .cf-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .cf-noscript { margin: 0; font-size: 16px; line-height: 1.5; max-width: 40em; }

  @media (prefers-reduced-motion: reduce) {
    .cf-btn,
    .cf-seg-bar,
    .cf-poster-play { transition: none; }
  }
}

/* ═══ 05-utilities.css ═══ */
@layer utilities {
  /* Testo presente per le tecnologie assistive e per i comandi vocali, invisibile
     all'occhio. Non `display: none`, che lo toglierebbe a entrambi. */
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: 100;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--color-accent-deep);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus { transform: translateY(0); }

  /* Sul fondo scuro le tinte tenui vanno miscelate col fondo scuro, non col bianco:
     è l'unica regola che serve perché la formula delle tinte funzioni su entrambe
     le superfici invece di richiederne una seconda, non dichiarata. */
  .band--inverse, .hero, .site-header, .site-footer, .scene-band__inner {
    --surface-context: var(--surface-inverse);
  }

  .text-muted { color: var(--ink-muted); }
  .text-center { text-align: center; }
  .measure-tight { max-inline-size: var(--measure-tight); }
  .measure { max-inline-size: var(--measure); }
  .measure-wide { max-inline-size: var(--measure-wide); }
  .wrap { max-inline-size: var(--wrap); }

  /* ── Movimento ridotto ────────────────────────────────────────────────────
     Vive nell'ultimo layer perché deve vincere senza ricorrere a `!important`.
     Copre animazioni, transizioni E lo scorrimento morbido. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
  }

  /* ── Colori forzati (Windows ad alto contrasto) ───────────────────────────
     Le pastiglie hanno come unico confine uno sfondo, e le cifre in contorno
     usano `color: transparent`: senza queste righe sparirebbero o cambierebbero
     significato. */
  @media (forced-colors: active) {
    .badge, .pill, .angle, .card, .demo__step, .idcard, .hint {
      border: 1px solid CanvasText;
    }
    .numeral--outline { color: CanvasText; -webkit-text-stroke: 0; }
    .dot, .swatch, .dist__seg { forced-color-adjust: none; }
    :focus-visible { outline-color: Highlight; }
  }

  /* ── Stampa ───────────────────────────────────────────────────────────────
     `privacy.html` è l'unica pagina che qualcuno stamperà o salverà in PDF, ed è
     un'informativa: deve venire leggibile, non decorata. */
  @media print {
    .site-header, .site-footer, .skip-link, .marquee, .demo__controls, .veil, .consent { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }

    .band, .hero, .scene-band__inner { padding-block: 0; background: #fff; color: #000; }

    .center { max-inline-size: none; padding-inline: 0; }

    .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }

    .prose a[href^="#"]::after { content: ""; }

    h1, h2, h3 { break-after: avoid; }

    .idcard { border: 1px solid #000; break-inside: avoid; }
  }
}