/* ============================================================================
   GENERATO — non modificare a mano.

   Token estratti da src/styles/app.css dell'applicazione con
   `node sync-tokens.mjs`. La vetrina e l'app devono avere lo stesso aspetto:
   chi arriva dal sito e crea un account non deve credere di cambiare prodotto.

   Per aggiornarli: cambiare il valore NELL'APP, poi rilanciare lo script.
   `node sync-tokens.mjs --check` dice se questo file è rimasto indietro.

   La documentazione delle scelte sta in docs/design-system.md del progetto
   principale.
   ========================================================================== */
:root {

  /* --- Colore d'azione -----------------------------------------------------
     Blu più fondo del precedente hsl(199,100%,50%), che era saturo quasi al
     massimo. Qui accompagna solleciti dell'AFC, termini di pagamento e importi:
     stessa famiglia cromatica, tono meno clamoroso. I tre token derivati sono
     usati in 52 punti dell'app, quindi restano con gli stessi nomi. */
  --accent: hsl(207, 88%, 39%);        /* fondo dei pulsanti, elementi attivi   */
  --accent-dark: hsl(207, 90%, 31%);   /* stato premuto / hover                 */
  --accent-text: hsl(207, 90%, 30%);   /* testo e link: contrasto AA su bianco  */
  --accent-soft: hsl(207, 65%, 95%);   /* fondi tenui, chip informativi         */
  --accent-line: hsl(207, 58%, 82%);   /* bordo di ciò che sta su --accent-soft */

  /* --- Neutri --------------------------------------------------------------
     Grigi con una punta di blu: accanto al fondo chiaro non sembrano spenti. */
  --ink: hsl(213, 40%, 13%);           /* testo principale                      */
  --on-ink: #ffffff;                   /* testo sopra il fondo --ink (toast)    */
  --ink-soft: hsl(213, 22%, 30%);      /* testo secondario                      */
  --muted: hsl(213, 12%, 42%);         /* metadati, didascalie                  */
  --line: hsl(210, 20%, 90%);
  --line-strong: hsl(210, 20%, 78%);   /* bordi marcati: hover, stati attivi */
  --bg: hsl(210, 20%, 98%);
  --card: #ffffff;
  --on-accent: #ffffff;               /* testo sopra i fondi pieni colorati */
  --surface-2: hsl(210, 20%, 94%);     /* superficie tenue: pastiglie neutre */
  --track: hsl(210, 20%, 92%);         /* fondo delle barre di avanzamento  */
  --highlight: hsl(48, 100%, 78%);     /* evidenziazione della citazione     */
  --on-highlight: hsl(45, 60%, 12%);   /* testo sopra l'evidenziazione       */

  /* --- Colori di stato -----------------------------------------------------
     NON sono decorazione: dicono quanto manca a una scadenza e se un'azione è
     stata svolta. Restano separati dal colore d'azione, così un pulsante non
     compete mai con un avviso. (Valori invariati in questo passo: vanno
     ritoccati insieme ai componenti che li usano, non prima.) */
  --red: hsl(0, 84%, 60%);
  --red-soft: hsl(0, 84%, 96%);
  --red-line: hsl(0, 84%, 86%);
  --red-hover: hsl(0, 84%, 92%);
  --red-dark: hsl(0, 72%, 45%);
  /* Ambra e verde scuriti fino al minimo necessario per il contrasto AA sui
     rispettivi fondi tenui: prima erano 3.31:1 e 4.00:1, cioè sotto la soglia
     proprio sulle pastiglie che dicono quanto manca a una scadenza.
     Il rosso resta com'è: lo usiamo per barre, bordi e riempimenti, dove il
     contrasto del testo non c'entra. Per il testo esiste --red-dark. */
  --green: hsl(151, 48%, 32%);      /* 4.69:1 su --green-soft */
  --green-soft: #e6f4ec;
  --green-line: #c6e6d2;
  --amber: hsl(35, 78%, 34%);       /* 4.61:1 su --amber-soft */
  --amber-soft: #fdf3e0;
  --amber-line: #ecd9ae;
  /* Riempimenti: barre, pallini, superfici piene. Sono l'altra metà della
     coppia che il rosso ha già (--red riempie, --red-dark scrive). Ambra e
     verde erano stati scuriti per il CONTRASTO DEL TESTO e poi riusati come
     riempimento: da lì il marrone della barra «Media», che nessuno aveva
     scelto. Un colore che deve essere leggibile e un colore che deve essere
     riconoscibile non sono lo stesso colore. */
  --amber-fill: hsl(35, 92%, 50%);
  --green-fill: hsl(151, 52%, 40%);

  /* --- Scala tipografica ---------------------------------------------------
     Sei gradini, uno per compito. Se un testo non rientra in nessuno, il
     problema è la gerarchia, non la scala. La base sale da 13px a 15px: chi
     usa l'app legge importi e scadenze, spesso oltre i 45 anni e di fretta. */
  --fs-label: 12px;    /* etichette maiuscole, con letter-spacing */
  --fs-meta: 13px;     /* metadati e didascalie                   */
  --fs-body: 15px;     /* corpo del testo                          */
  --fs-strong: 17px;   /* titoli di scheda e di riga               */
  --fs-h2: 22px;       /* titoli di sezione                        */
  --fs-h1: 30px;       /* titoli di pagina                         */

  --lh-tight: 1.25;    /* titoli                                   */
  --lh: 1.55;          /* testo corrente                           */

  --ls-label: 0.08em;  /* solo per le etichette maiuscole          */
  --ls-title: -0.01em; /* i titoli grandi respirano meglio stretti */

  /* --- Ritmo delle spaziature ----------------------------------------------
     Multipli di 4: sette valori coprono tutta l'interfaccia. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px;

  --radius: 12px;
  --radius-sm: 8px;

  /* ombre molto leggere (look premium/fintech, non glow) */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);

  --focus: hsl(207, 88%, 42%);         /* anello del focus da tastiera */
  font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {

    /* Fondo e superficie distanziati di 8 punti di luminosità: le schede si
       staccano dalla pagina. Il bordo delle schede è decorativo e non deve
       raggiungere 3:1 — quella soglia WCAG vale per i CONTROLLI (input, select,
       pulsanti), che infatti usano --line-strong, portato a 48%. */
    --bg: hsl(213, 30%, 6%);
    --card: hsl(213, 22%, 14%);
    --surface-2: hsl(213, 18%, 20%);
    --track: hsl(213, 18%, 22%);
    --line: hsl(213, 16%, 28%);
    --line-strong: hsl(213, 14%, 48%);   /* 3.31:1 su --card: bordo dei controlli */

    --ink: hsl(210, 25%, 93%);
    --ink-soft: hsl(210, 14%, 78%);
    --muted: hsl(210, 10%, 64%);
    --on-ink: hsl(213, 30%, 10%);      /* il toast inverte: fondo chiaro, testo scuro */

    --accent: hsl(207, 75%, 58%);
    --accent-dark: hsl(207, 78%, 66%);  /* in scuro l'hover SCHIARISCE            */
    --accent-text: hsl(207, 80%, 72%);
    --accent-soft: hsl(207, 40%, 20%);
    --on-accent: hsl(213, 35%, 10%);    /* testo scuro sopra l'accento chiaro     */

    --red: hsl(0, 62%, 58%);
    --red-soft: hsl(0, 35%, 17%);
    --red-line: hsl(0, 32%, 30%);
    --red-hover: hsl(0, 35%, 23%);
    --red-dark: hsl(0, 75%, 74%);       /* è il colore del TESTO: in scuro schiarisce */

    --green: hsl(151, 45%, 62%);
    --green-soft: hsl(151, 30%, 14%);
    --green-line: hsl(151, 26%, 26%);

    --amber: hsl(38, 75%, 64%);
    --amber-soft: hsl(38, 35%, 15%);
    --amber-line: hsl(38, 30%, 28%);

    --accent-line: hsl(207, 40%, 34%);
    --amber-fill: hsl(38, 80%, 58%);
    --green-fill: hsl(151, 48%, 50%);

    /* In scuro l'evidenziazione diventa un ocra di luminanza media: il testo
       sopra deve restare SCURO, non seguire --ink che qui è quasi bianco.
       Con --ink il contrasto era 2.54:1, sotto la soglia AA di 4.5. */
    --highlight: hsl(48, 85%, 38%);
    --on-highlight: hsl(45, 80%, 8%);

    /* Su fondo scuro un'ombra chiara non esiste: la profondità la dà il bordo,
       quindi le ombre restano appena accennate e più profonde. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);

    --focus: hsl(207, 80%, 66%);
  }
}

/* ============================================================================
   Vetrina AI-Swisse — impaginazione e componenti.

   I TOKEN NON STANNO QUI: vengono da `tokens.css`, generato da
   `node sync-tokens.mjs` a partire da `src/styles/app.css` dell'applicazione.
   Erano stati copiati a mano e avevano già iniziato a divergere. In `dist` i
   due file vengono concatenati, quindi il browser fa una richiesta sola.

   Nessuna dipendenza: nessun carattere remoto (si usa quello di sistema, come
   nell'app), nessun framework, nessuno script.
   ========================================================================== */

:root {
  /* Larghezze di colonna: il ritmo della pagina.
     Le griglie di schede respirano larghe; l'esempio e i limiti stanno su una
     colonna più stretta, dove le righe di testo restano leggibili e la pagina
     cambia passo invece di scorrere sempre uguale. */
  --wrap: 1080px;         /* griglie di schede            */
  --wrap-mid: 900px;      /* esempio di risultato         */
  --wrap-narrow: 720px;   /* limiti, chi siamo, legali    */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-size: var(--fs-body); line-height: var(--lh, 1.55);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Collegamento per saltare la navigazione: visibile solo con la tastiera. */
.skip {
  position: absolute; left: -9999px; top: var(--sp-2);
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); z-index: 10;
}
.skip:focus { left: var(--sp-4); }

/* ---------- barra superiore ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto; padding: var(--sp-4) var(--sp-6);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent);
  color: var(--on-accent); display: grid; place-items: center; flex-shrink: 0;
}
.brand-mark .ic { width: 18px; height: 18px; stroke-width: 2.25; }
.brand-name { display: block; font-weight: 700; letter-spacing: -0.2px; }
.brand-sub { display: block; font-size: var(--fs-meta); color: var(--muted); margin-top: -2px; }

.topnav { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-left: auto; }
.topnav a { color: var(--ink-soft); font-weight: 500; padding: var(--sp-1) 0; }
.topnav a:hover { color: var(--accent-text); }
.topactions { display: flex; align-items: center; gap: var(--sp-4); }

/* La lingua corrente non è un collegamento: portava a `#`, cioè da nessuna
   parte, ed era annunciata come link dalle tecnologie assistive. */
.langs { display: inline-flex; gap: 2px; align-items: center; }
.lang-link, .lang-current {
  font-size: var(--fs-meta); padding: 4px var(--sp-2); border-radius: 6px;
  min-height: 26px; display: inline-flex; align-items: center;
}
.lang-link { color: var(--muted); }
.lang-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lang-current { color: var(--accent-text); font-weight: 600; background: var(--accent-soft); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 600; font-size: var(--fs-body);
  transition: background .12s, border-color .12s;
}
.btn:hover { border-color: var(--line-strong); background: var(--bg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn .ic { width: 18px; height: 18px; }

/* ---------- impaginazione ---------- */
main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-12) 0; border-top: 1px solid var(--line); }
.section > h2 {
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.3px;
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.section-lead { color: var(--ink-soft); max-width: 68ch; margin-bottom: var(--sp-6); }
.center { text-align: center; margin-top: var(--sp-6); }
/* Sezioni su colonna più stretta: cambiano il passo della pagina. */
.narrow { max-width: var(--wrap-narrow); }
.mid { max-width: var(--wrap-mid); }

.hero { padding: var(--sp-12) 0 var(--sp-8); }
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.15; letter-spacing: -0.8px; max-width: 22ch; font-weight: 800; }
.hero .lead { margin-top: var(--sp-4); color: var(--ink-soft); font-size: var(--fs-strong); max-width: 62ch; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-note { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-6); color: var(--muted); font-size: var(--fs-meta); }
.hero-note .ic { width: 16px; height: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); box-shadow: var(--shadow-xs);
}
.card h3 { font-size: var(--fs-strong); font-weight: 700; letter-spacing: -0.2px; }
.card p { color: var(--ink-soft); }

/* ---------- esempio di risultato ----------
   Documento e analisi AFFIANCATI, con la frase citata evidenziata nella
   lettera: è la cosa che il prodotto fa e che nessun elenco di funzioni
   riesce a spiegare. Su schermo stretto si impilano, la lettera sopra.
   Non è uno screenshot: una schermata reale mostrerebbe la ragione sociale e
   i documenti di un'impresa vera. */
.example-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.example-label {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); background: var(--surface-2); border-radius: 99px; padding: 3px var(--sp-3);
}
.example-note { font-size: var(--fs-meta); color: var(--muted); }

.example-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.pane-title {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 6px;
}
.pane-title .ic { width: 14px; height: 14px; }

.letter {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-6); box-shadow: var(--shadow-xs);
  font-size: var(--fs-meta); line-height: 1.65; color: var(--ink-soft);
  word-break: break-word;
}
/* `pre-wrap` va sui blocchi di testo, NON sul contenitore: sul contenitore
   rendeva visibili anche gli a capo dell'indentazione del sorgente HTML, e la
   lettera si apriva con tre righe vuote. */
.letter-from, .letter-body { white-space: pre-wrap; }
.letter-from { color: var(--muted); }
.letter-subject { font-weight: 700; color: var(--ink); margin: var(--sp-3) 0; }
/* L'evidenziazione usa lo stesso token dell'app, dove serve a mostrare da dove
   viene un'informazione. Il contorno la rende visibile anche a chi non
   distingue il giallo dal fondo. */
.letter mark {
  background: var(--highlight); color: var(--on-highlight); border-radius: 3px;
  padding: 1px 2px; box-shadow: 0 0 0 2px var(--highlight); font-weight: 600;
}

.mock {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--sp-6); display: grid; gap: var(--sp-4);
}
.mock-top { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.mock-top h3 { flex: 1; min-width: 200px; font-size: var(--fs-strong); }
.mock-badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-label); font-weight: 600;
  padding: 2px var(--sp-2); border-radius: 99px; background: var(--surface-2); color: var(--ink-soft);
  white-space: nowrap;
}
/* Rosso solo per l'urgenza, con il colore del TESTO e non del riempimento. */
.chip-hot { background: var(--red-soft); color: var(--red-dark); }
.chip-origin { background: var(--accent-soft); color: var(--accent-text); }
.chip-origin .ic { width: 12px; height: 12px; }

.mock-callout {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); padding: var(--sp-4);
}
.mock-ico {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
}
.mock-kicker { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); }
.mock-action { font-size: var(--fs-strong); font-weight: 700; letter-spacing: -0.2px; margin-top: 2px; }
.mock-when { font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 3px; }

.mock-quote-label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-meta); font-weight: 600; color: var(--accent-text); }
.mock-quote-label .ic { width: 14px; height: 14px; }
.mock-quote blockquote {
  margin-top: var(--sp-2); font-size: var(--fs-meta); color: var(--ink-soft);
  background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: var(--sp-2) var(--sp-3); font-style: italic;
}
.mock-verify { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.mock-verify-title { font-weight: 700; font-size: var(--fs-meta); margin-bottom: var(--sp-2); }
.mock-verify-item { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-meta); color: var(--ink-soft); }
.mock-verify-item .q {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  color: var(--amber); background: var(--amber-soft);
}

/* ---------- moduli ---------- */
.module { border-top: 3px solid var(--accent); }
.kicker { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); }
.module h3 { margin-top: var(--sp-1); font-size: var(--fs-h2); }
.module-lead { color: var(--muted); font-size: var(--fs-meta); margin-bottom: var(--sp-4); }
.ticks { list-style: none; display: grid; gap: var(--sp-3); }
.ticks li { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--ink-soft); }
.ticks .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); stroke-width: 2.25; }

/* ---------- passi ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.step { display: flex; gap: var(--sp-3); align-items: flex-start; }
.step-n {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; font-weight: 800; font-size: var(--fs-meta);
}
.step h3 { font-size: var(--fs-body); font-weight: 700; }
.step p { color: var(--muted); font-size: var(--fs-meta); margin-top: 2px; }

/* ---------- verificabilità ---------- */
.trust-card { display: grid; gap: var(--sp-2); }
.trust-ico { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }
.trust-ico .ic { width: 18px; height: 18px; }

.band { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: var(--sp-8); margin: var(--sp-12) 0; }
.band h2 { color: var(--ink); }
.band .section-lead { margin-bottom: 0; }
.band .ic { color: var(--accent-text); }

/* ---------- limiti dichiarati ---------- */
.limits { list-style: none; display: grid; gap: var(--sp-3); }
.limits li { position: relative; padding-left: var(--sp-6); color: var(--ink-soft); }
.limits li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--line-strong);
}

/* ---------- prezzi ----------
   Non quattro schede con un importo: il listino si sta definendo, e quattro
   cifre destinate a cambiare sarebbero una promessa. Restano gli assi su cui i
   piani si differenzieranno, che sono veri oggi. */
.axes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
.axis { display: flex; gap: var(--sp-3); align-items: flex-start; }
.axis-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-soft); display: grid; place-items: center; }
.axis-ico .ic { width: 17px; height: 17px; }
.axis h3 { font-size: var(--fs-body); font-weight: 700; }
.axis p { color: var(--muted); font-size: var(--fs-meta); margin-top: 2px; }
.pricing-note {
  margin-top: var(--sp-6); padding: var(--sp-4);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); color: var(--ink);
}

/* ---------- chi c'è dietro ---------- */
.about { display: flex; gap: var(--sp-6); align-items: flex-start; flex-wrap: wrap; }
.about-photo {
  width: 92px; height: 92px; flex-shrink: 0; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; font-size: var(--fs-h1); font-weight: 800;
  border: 1px solid var(--accent-line);
}
.about-main { flex: 1; min-width: 260px; }
.about-name { font-size: var(--fs-strong); font-weight: 700; }
.about-meta { color: var(--muted); font-size: var(--fs-meta); margin-top: 2px; display: grid; gap: 1px; }
.about-why { margin-top: var(--sp-4); color: var(--ink-soft); }
.about-contact { margin-top: var(--sp-4); font-size: var(--fs-meta); color: var(--muted); }

/* ---------- contatti ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.contact-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }
.contact-ico .ic { width: 18px; height: 18px; }
.contact-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-value { font-weight: 600; margin-top: 1px; }
.contact-sub { color: var(--muted); font-size: var(--fs-meta); margin-top: 2px; }

.cta { text-align: center; }
.cta h2 { justify-content: center; }
.cta .section-lead { margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

.foot {
  max-width: var(--wrap); margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-12);
  border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-meta);
  display: grid; gap: var(--sp-2);
}
.foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.foot-sep { color: var(--line-strong); }

/* ---------- pagine legali ---------- */
.legal-head { padding: var(--sp-8) 0 var(--sp-6); }
.legal-head h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.6px; }
.legal-head .section-lead { margin-top: var(--sp-3); margin-bottom: 0; }
.legal-updated { font-size: var(--fs-meta); color: var(--muted); margin-top: var(--sp-3); }
.legal-body { padding-bottom: var(--sp-12); display: grid; gap: var(--sp-8); }
.legal-body section { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.legal-body h2 { font-size: var(--fs-strong); font-weight: 700; margin-bottom: var(--sp-3); }
.legal-body p { color: var(--ink-soft); margin-bottom: var(--sp-2); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 26px; }
.back-link .ic { width: 16px; height: 16px; }
/* I dati che mancano si vedono: un segnaposto che si confonde col testo finisce
   pubblicato. */
.todo {
  background: var(--amber-soft); color: var(--amber); border: 1px dashed var(--amber-line);
  border-radius: 5px; padding: 0 6px; font-size: var(--fs-meta); font-weight: 600;
}

/* ---------- schermi piccoli ---------- */
@media (max-width: 900px) {
  .grid-2, .steps, .axes, .contact-grid { grid-template-columns: 1fr 1fr; }
  .example-split { grid-template-columns: 1fr; }   /* lettera sopra, analisi sotto */
  .topnav { display: none; }
  .topbar { padding: var(--sp-3) var(--sp-4); }
  main { padding: 0 var(--sp-4); }
  .band { padding: var(--sp-6); }
}
@media (max-width: 600px) {
  .grid-2, .steps, .axes, .contact-grid { grid-template-columns: 1fr; }
  .section { padding: var(--sp-8) 0; }
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero h1 { max-width: none; }
  .hero-actions .btn, .cta-actions .btn { flex: 1 1 auto; }
  .topactions { margin-left: auto; }
  .letter, .mock { padding: var(--sp-4); }
}

/* Chi chiede meno movimento non deve subire lo scorrimento animato. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
  * { transition: none !important; }
}