/*
  AppMeetingReservation — foglio di stile del sito. VARIANTE GRAFICA v2.

  Questa e' la v2 (cartella `sitoweb_amr_v2`), affiancata alla v1 e non al posto
  suo: la v1 resta intatta in `sitoweb_amr`. La grammatica e' la stessa —
  superfici piatte, un solo colore d'azione, etichette monospaziate al posto
  delle pillole — cambiano la palette e alcune scelte di superficie.

  IDENTITA'
  I colori NON sono scelti a mano: sono CAMPIONATI dallo sketch di riferimento.
  L'arancio e' #E54A02 (azione: pulsanti e accenti), il complementare e' il teal
  #01676C (icone, etichette, stati di disponibilita'/conferma). Dal 2026-08-21 le
  SUPERFICI teal non sono piu' tinta piatta ma un gradiente (--grad-teal, 135deg
  da #127373 a #01676C): hero, pulsante teal, pannello statistiche, sezione
  "Come funziona" e footer. I due capi sono i due teal che il progetto usa gia',
  non tinte nuove. Il carbone #3C3C3C non esiste piu' in pagina. Il carattere e'
  Inter, con IBM Plex Mono per etichette e numeri.

  COSA CAMBIA RISPETTO ALLA v1 (differenze deliberate, non sviste)
  1. Il raggio passa da 4px fisso a 6px / 10px (--radius / --radius-lg). Nello
     sketch le superfici sono leggermente piu' morbide: e' la scelta che rende la
     v2 piu' piacevole alla vista. Restano due soli valori, non una scala libera.
  2. Torna un'ombra, ma MOLTO tenue (--shadow-card): nello sketch le schede si
     staccano dal fondo con un alone appena percepibile. NON e' l'ombra pesante
     della versione originale del 2026-08-19, e soprattutto NON torna il
     sollevamento al passaggio del mouse: le superfici restano appoggiate.
  3. La riga corta sotto l'occhiello (.brand-stripe) NON fa piu' parte della
     testata di sezione: nello sketch non c'e'. La classe resta definita perche'
     le sezioni non riscritte (funzionalita', roadmap, faq, contatti) la usano
     ancora, ma le sezioni nuove non la emettono.
  4. La sezione scura non e' piu' una tinta: e' il gradiente --grad-teal. Prima
     era carbone #3C3C3C, prima ancora il grigio medio #575757 della v1.
  5. Le liste lunghe possono girare in carosello continuo (.marquee /
     .marquee-track): striscia di fiducia e schede funzionalita'. Si ferma al
     passaggio del mouse e col fuoco da tastiera, e sotto prefers-reduced-motion
     non si anima affatto — si scorre a mano.
  6. Le schede funzionalita' non hanno piu' una scheda "in evidenza" sempre
     accesa: tutte uguali, l'arancio compare solo al passaggio del mouse o col
     fuoco. Sono spariti .feature-card--featured e .feature-legend.
  7. Le schede dei passi (.step-card) sono VETRO: velo di bianco all'8%,
     backdrop-filter (sfocatura + saturazione) e filo di luce in alto. Il
     gradiente si vede attraverso e la lastra lo schiarisce appena — e' l'effetto
     "lente" chiesto dall'utente. C'e' un ripiego a fondo piu' opaco per i
     browser senza backdrop-filter, e un tetto di contrasto da non superare.

  CONTRASTO — si misura, non si guarda
  Ogni token di TESTO sta >= 4.5:1 sul proprio fondo (>= 3:1 se il testo e'
  grande o se e' un'icona). I conti fatti su questa palette:
    --brand      #E54A02 su bianco   3,95  -> superfici e testo GRANDE, mai 14px
    --brand-btn  #D24503 su bianco   4,57  -> fondo dei pulsanti (testo bianco)
    --brand-text #B84309 su bianco   5,46  · su mist 5,15 · su brand-tint 4,89
    --brand-dark #A83C07 su bianco   6,34  -> hover dei pulsanti arancio
    --teal       #01676C su bianco   6,65  · bianco sul teal: 6,65 (e' simmetrico)
    --teal-dark  #014E52 su bianco   9,49  -> capo scuro del gradiente premuto
    --ink        #1A1A1A su bianco  17,40  · --body #55565A 7,33 · --muted 5,36
  Sul GRADIENTE il conto si fa sul capo CHIARO (#127373, luminanza 0,1363), che
  e' il caso peggiore; fra parentesi il capo scuro (#01676C, luminanza 0,1079):
    bianco pieno                     5,64  (6,65) -> in soglia anche a 14px
    bianco/82%                       4,36  (5,05) · /80% 4,23 (4,87) · /72% 3,74
    arancio chiaro #FFC99C           3,78  (4,46) -> solo testo GRANDE (soglia 3)
    arancio #FF8B4A                  2,43  (2,86) -> non si usa piu'
    arancio pieno #E54A02            1,43  (1,68) -> non si usa piu'
  Sul VETRO delle schede dei passi il velo di bianco schiarisce il fondo e abbassa
  il contrasto di quello che ci sta sopra. Sul capo chiaro, bianco pieno:
    velo 8%  4,80  ·  velo 10% 4,59  ·  velo 12% 4,43  ·  velo 18% 3,94
  Il velo NON supera il 10%, altrimenti il testo dei passi esce da soglia.
  Cambiando UN colore si rifa' il conto di tutta la colonna in cui compare.

  DUE REGOLE CHE VALGONO SU TUTTE LE SUPERFICI TEAL
  1. Il bianco ci sta a piena opacita' e basta: /80 e /82 valgono 4,23 e 4,36,
     cioe' sotto i 4,5:1 del testo normale. La gerarchia la fanno corpo, peso e
     spaziatura, non l'opacita'.
  2. L'arancio non si usa, MAI e in nessuna forma: quello pieno sta a 1,43:1 e
     quello schiarito che reggeva sul carbone (#FF8B4A, 4,75 su #3C3C3C) qui
     crolla a 2,43. L'ultima eccezione rimasta erano i numeri dei passi in
     apricot; ora sono bianchi anche loro (scelta dell'utente), quindi su queste
     superfici c'e' una tinta sola.

  LE TRE TRAPPOLE GIA' VISTE (restano risolte, non reintrodurle)
  - Nessun colore fisso sui titoli senza eccezione per i fondi scuri: h1..h4 con
    `color: var(--ink)` rendeva invisibile il titolo della sezione carbone.
    Vedi la regola `.bg-surfaceDark h1..h4 { color: inherit }` (estesa al teal).
  - Nessun elemento con lo stesso fondo della sezione che lo contiene: il .tag ha
    fondo BIANCO, non mist, perche' dentro una scheda mist spariva.
  - Nessuno stato hover che spegne il testo: l'hover cambia bordo o fondo, mai la
    leggibilita'.

  NOTA SULLA CASCATA (Tailwind)
  Il CDN di Tailwind inietta il suo <style> in coda a <head>, cioe' DOPO questo
  foglio: a parita' di specificita' vince l'utility. Dove il markup mette una
  utility sulla stessa proprieta' che qui va governata (es. `grid-cols-2` su
  .stat-panel) la regola usa la classe raddoppiata (.stat-panel.stat-panel) per
  alzare la specificita' senza ricorrere a !important.
*/

/* ============================ TOKEN ============================ */
:root {
  /* --- Arancio: e' l'AZIONE, uno solo per schermata --- */
  --brand:        #E54A02;  /* l'arancio dello sketch: superfici e testo grande */
  --brand-btn:    #D24503;  /* fondo dei pulsanti: bianco a 4,57:1. L'arancio
                               pieno sta a 3,95 e su un pulsante non basta */
  --brand-text:   #B84309;  /* arancio come TESTO piccolo su bianco: 5,46:1 */
  --brand-dark:   #A83C07;  /* hover/stato premuto dei pulsanti arancio */
  --brand-tint:   #FDF0E7;  /* fondo della scheda funzionalita' al passaggio del
                               mouse (prima: della scheda "in evidenza" fissa) */
  /* Qui c'era --brand-on-dark (#FFC99C), l'unico arancio che reggesse la soglia
     del testo grande sulle superfici teal: serviva ai numeri dei passi, ora
     bianchi per scelta dell'utente. Rimosso invece che lasciato inutilizzato,
     cosi' il file mantiene la sua proprieta': nessun token dichiarato e mai
     usato. Sulle superfici teal ORA NON C'E' PIU' ARANCIO, in nessuna forma. */

  /* --- Teal: il complementare. Fa anche da "verde di successo" --- */
  --teal:         #01676C;  /* 6,65:1 su bianco E bianco a 6,65:1 sopra di esso.
                               E' anche il capo SCURO del gradiente */
  --teal-tint:    #EEF6F6;  /* celle "disponibile", badge confermato */
  --teal-dark:    #014E52;  /* capo scuro del gradiente premuto (hover .btn-teal) */

  /* --- Gradiente teal: e' la SUPERFICIE, non un colore di testo ---
     Dipinge hero (.hero-teal-block), pulsante secondario, pannello statistiche e
     tutte le sezioni scure (.bg-surfaceDark: "Come funziona" e footer). I due
     capi non sono tinte nuove: #127373 e' il teal che il progetto usava gia' e
     #01676C e' --teal. Il capo chiaro non ha un token suo perche' esiste solo
     qui dentro.
     Contrasto: bianco pieno 5,64:1 sul capo chiaro e 6,65 sul capo scuro, quindi
     in soglia anche per il testo normale. Restano due divieti: il bianco non
     scende sotto il pieno (a /80 si va a 4,23) e l'arancio non si usa (1,43 il
     pieno, 2,43 lo schiarito), senza eccezioni. Vedi la testata del file. */
  --grad-teal:    linear-gradient(135deg, rgba(18, 115, 115, 1) 0%, rgba(1, 103, 108, 1) 100%);
  /* Stato premuto: lo STESSO disegno spostato di due passi in basso
     (--teal -> --teal-dark). Non una tinta piatta: un pulsante che al passaggio
     del mouse perde il gradiente sembra un altro pulsante. */
  --grad-teal-hover: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);

  /* --- Neutri --- */
  --ink:          #1A1A1A;  /* titoli */
  --body:         #55565A;  /* testo corrente */
  --muted:        #6B6B66;  /* note e didascalie: 5,36 su bianco, 5,05 su mist */
  --line:         #E7E5E1;
  --line-strong:  #D5D2CC;
  --paper:        #FFFFFF;
  --mist:         #F9F8F6;  /* fondo delle sezioni alternate, dell'hero e della
                               fascia di richiamo finale (.cta-band) */

  /* --- Fili sui fondi scuri: sono decorativi, non testo ---
     Rialzati passando dal carbone al gradiente: il teal e' piu' chiaro del
     carbone, quindi un velo di bianco ci cambia meno le carte e alla vecchia
     opacita' i fili sbiadivano (il divisore del pannello scendeva da 1,95:1 sul
     carbone a 1,55 sul capo chiaro). Ora --rule-light sta a 1,88:1 sul capo
     chiaro e 2,00 sul capo scuro, --rule-faint a 1,68 e 1,76: restano hairline
     decorative — il contrasto lo portano il testo e i numeri dentro. */
  --rule-light:   rgba(255, 255, 255, .32); /* divisori del pannello, bordo del vetro */
  --rule-faint:   rgba(255, 255, 255, .26); /* marcature tenui sul fondo teal */

  /* --- Superficie --- */
  --radius:       6px;
  --radius-lg:    10px;
  --radius-sm:    3px;      /* solo per i micro-rettangoli (.tag): un raggio da
                               6px su un'etichetta alta 20px la fa sembrare una
                               pillola, ed e' esattamente cio' che non vogliamo */
  /* Ombra di ritorno nella v2, ma appena percepibile: un filo di stacco (1px) e
     un alone corto e rientrato. Serve a staccare la scheda dal fondo, non a
     farla galleggiare. Non esiste una variante "hover" piu' marcata: le schede
     non si sollevano. */
  --shadow-card:  0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -16px rgba(0, 0, 0, .10);

  --stat-value:   34px;     /* il numero grande del pannello statistiche */
  --mono:         "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* ============================ BASE ============================ */
html {
  scroll-behavior: smooth;
  /* L'ANCORA NON DEVE FINIRE SOTTO LA BARRA. La barra in cima e' fissa e alta
     64px: senza questo margine, arrivando su `/#faq` il titolo della sezione si
     ferma esattamente dietro di lei. Sulla monopagina il difetto si vedeva poco
     — si arrivava alle sezioni scorrendo, e il JS tiene la barra fuori strada
     durante il salto — ma da quando i link del menu sono `/#faq` e simili, il
     salto avviene al CARICAMENTO di un'altra pagina, quando nessun JS ha ancora
     avuto occasione di intervenire. 80px = 64 della barra + un po' d'aria. */
  scroll-padding-top: 80px;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Interlinea generosa: i paragrafi sono lunghi e 1.5 li impasta. */
  line-height: 1.7;
}

h1, h2, h3, h4, .display {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* I titoli NON possono avere un colore fisso: sui fondi scuri sparivano (nero su
   nero). Dentro una sezione scura o su un pannello teal ereditano il colore del
   contenitore. Regola da tenere presente aggiungendo sezioni: se il fondo e'
   scuro, la sezione deve portare .bg-surfaceDark (o il pannello deve dichiarare
   il colore dei titoli). */
.bg-surfaceDark h1, .bg-surfaceDark h2, .bg-surfaceDark h3, .bg-surfaceDark h4, .bg-surfaceDark .display,
.bg-teal h1, .bg-teal h2, .bg-teal h3, .bg-teal h4, .bg-teal .display,
.stat-panel h1, .stat-panel h2, .stat-panel h3, .stat-panel h4, .stat-panel .display { color: inherit; }
h1 { letter-spacing: -0.035em; }

/* LA SECONDA RIGA DELL'H1 DELLA HOME.
   L'H1 contiene il claim (la riga grande) e una riga descrittiva che dice cosa
   sia il prodotto: e' la richiesta dell'audit SEO al par. 8, risolta senza
   rinunciare al claim. Perche' funzioni deve LEGGERSI COME UN SOTTOTITOLO e non
   come un terzo verso del titolo, quindi qui si annullano le tre cose che
   rendono titolo un titolo — corpo, peso e crenatura stretta — e si riporta
   l'interlinea a un valore da testo. Resta dentro l'H1: e' una scelta di
   impaginazione, non di semantica. */
.hero-h1-sub {
  display: block;
  margin-top: 18px;
  max-width: 34ch;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--body);
}

/* SALTO AL CONTENUTO.
   Fuori dallo schermo finche' non prende il fuoco da tastiera: chi naviga col
   Tab non deve attraversare tutta la barra prima di arrivare al contenuto. Con
   sette pagine invece di una, il menu si ripete su ognuna.
   Non e' `display:none`: un elemento nascosto cosi' non e' focalizzabile, cioe'
   il collegamento non esisterebbe proprio. */
.amr-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 12px 18px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-weight: 600;
}
.amr-skip:focus {
  left: 12px;
  top: 12px;
}

/* ============================ LOGO ============================ */
.light-logo, .dark-logo {
  max-width: 240px;
  /* width: 100%; */
  height: auto;
  display: block;
}

/* ============================ ACCENTO ============================ */
/* Solo per il testo GRANDE (titoli): l'arancio pieno sta a 3,95:1 sul bianco,
   sopra la soglia dei 3:1 del testo grande ma sotto quella del testo piccolo.
   Per un accento dentro un paragrafo si usa .label-brand / --brand-text. */
.text-arena { color: var(--brand); }

/* Riga corta piena. Nella v2 NON fa piu' parte della testata di sezione (nello
   sketch non c'e'): resta definita per le sezioni non riscritte che la usano
   ancora. Se serve un segno sotto l'occhiello, chiederselo prima: di norma la
   risposta e' no. */
.brand-stripe {
  height: 2px;
  border-radius: 0;
  background: var(--brand);
}

/* ============================ SFONDI ============================
   Nessuna trama, nessuna griglia: le sezioni si riconoscono per stacco di
   tinta piatta. .bg-paper-grid ha il nome della vecchia griglia a quadri ed e'
   rimasto solo per non toccare il markup delle sezioni non riscritte. */
.bg-paper-grid { background: var(--mist); }
.section-mist  { background: var(--mist); }

/* Filo arancio in cima alla pagina: un segno di identita' a costo zero. */
.brand-topline {
  height: 4px;
  background: var(--brand);
}

/* Sezione scura ("Come funziona" e footer). Il nome e' il RUOLO — la superficie
   scura della pagina — non la tinta: quel fondo e' gia' passato per #2E2E2D,
   #122B2D, #575757 e il carbone #3C3C3C, e un nome legato al colore andrebbe
   rinominato a ogni giro. Dal 2026-08-21 dipinge il gradiente teal.
   Sulla cascata: il markup porta l'utility Tailwind `bg-surfaceDark`, iniettata
   DOPO questo foglio, che dichiara pero' solo `background-color`. Il gradiente
   e' `background-image` e si disegna sopra: nessun conflitto.
   La prima riga e' il ripiego a tinta piatta per i browser che non risolvono il
   gradiente: e' scritta a mano e non con un token apposta, perche' un `var()` di
   ripiego fallirebbe esattamente negli stessi browser in cui fallisce il
   gradiente. #127373 e' il capo chiaro di --grad-teal. */
.bg-surfaceDark {
  background: #127373;
  background: var(--grad-teal);
  color: #fff;
}

/* ============================ ETICHETTE ============================
   Al posto delle pillole: testo monospaziato maiuscolo con un segno. Si legge
   come una marcatura editoriale, non come un chip. */
.label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.label::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--brand);
  flex: 0 0 auto;
}
.label-brand { color: var(--brand-text); }
.label-plain::before { display: none; }
/* Etichetta sulle superfici scure. Era bianco al 72% (6,59:1 sul carbone): sul
   gradiente lo stesso 72% scende a 3,74:1 sul capo chiaro, sotto soglia per un
   testo da 11px. Bianco pieno: 5,64 sul capo chiaro, 6,65 sul capo scuro. */
.label-light { color: #fff; }

/* Occhiello di sezione. Nella v2 sta da solo: niente riga sotto. */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Arancio scurito: a 11px l'arancio pieno sta a 3,72 su mist, sotto soglia. */
  color: var(--brand-text);
}

/*
  Sulle superfici a gradiente l'arancio NON si usa per il testo piccolo, in
  nessuna tonalita': quello schiarito che reggeva sul carbone (#FF8B4A, 4,75:1)
  qui sta a 2,43:1 sul capo chiaro, e l'occhiello e' testo da 11px. Tutto cio'
  che sul fondo chiaro sarebbe arancio — occhiello, etichetta, titolo
  evidenziato, riga — diventa BIANCO PIENO (5,64:1 sul capo chiaro).
  Anche il bianco tenue dell'occhiello sul pannello statistiche (82%) e' salito a
  pieno: sul gradiente valeva 4,36:1, sotto soglia per quel corpo. L'occhiello
  resta distinto dal titolo per corpo, spaziatura e monospazio, non per tinta.
  Su queste superfici l'arancio non compare in nessuna forma: anche i numeri dei
  passi, ultimo accento caldo rimasto, sono bianchi (vedi .step-num).
  Le tre superfici sono la stessa cosa (.bg-surfaceDark, .stat-panel, .bg-teal),
  quindi la regola e' una sola.
*/
.bg-surfaceDark .eyebrow,
.bg-surfaceDark .label-brand,
.bg-surfaceDark .text-arena,
.bg-teal .eyebrow,
.bg-teal .label-brand,
.bg-teal .text-arena,
.stat-panel .eyebrow,
.stat-panel .label-brand,
.stat-panel .text-arena { color: #fff; }
.bg-surfaceDark .brand-stripe,
.bg-teal .brand-stripe { background: #fff; }

/* Trappola n.2 applicata alla superficie nuova: il .label ha colore --teal, che
   e' esattamente il capo scuro del gradiente — teal su teal, invisibile. Su
   queste superfici passa a bianco, e con lui il quadratino arancio del ::before
   (l'arancio pieno ci sta a 1,43:1, cioe' non si vede). */
.bg-surfaceDark .label,
.bg-teal .label,
.stat-panel .label { color: #fff; }
.bg-surfaceDark .label::before,
.bg-teal .label::before,
.stat-panel .label::before { background: #fff; }

/* Marcatura di stato (Disponibile, Confermata, In arrivo...): rettangolo quasi
   squadrato con tinta piatta, non pillola. */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  /* Fondo BIANCO, non mist: dentro una sezione o una scheda gia' mist il
     riquadro spariva perche' aveva lo stesso colore dello sfondo. */
  background: var(--paper);
  color: var(--teal);
  border: 1px solid var(--line-strong);
}
.tag-brand { background: var(--brand-tint); color: var(--brand-text); border-color: rgba(229, 74, 2, .3); }
/* Stato "confermato/riuscito": il teal copre il ruolo che altrove sarebbe del
   verde-successo, senza introdurre un terzo colore nel sistema. */
.tag-teal  { background: var(--teal-tint); color: var(--teal); border-color: rgba(1, 103, 108, .3); }
.tag-solid { background: var(--brand-btn); color: #fff; border-color: var(--brand-btn); }
/* Marcatura sulle superfici scure. Il testo e' bianco pieno (era all'80%, che
   sul capo chiaro del gradiente vale 4,23:1, sotto soglia per un corpo da 10px).
   Il velo di bianco dell'8% schiarisce il fondo e si porta via un po' di
   contrasto: bianco pieno su quel velo = 4,80:1, ancora in soglia. Non alzare il
   velo oltre il 10%, e' lo stesso limite del vetro delle schede dei passi. */
.tag-light { background: rgba(255, 255, 255, .08); color: #fff; border-color: var(--rule-faint); }

/* ============================ PULSANTI ============================
   Piatti, senza ombra e senza sollevamento: l'ombra tenue della v2 e' per le
   superfici-scheda, non per i comandi. Un pulsante che si alza sembra staccato
   dalla pagina, ed e' il difetto da cui e' nata la revisione dello stile. */
.btn-primary,
.btn-brand,
.btn-teal,
.btn-ghost {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: none;
  /* Nota: .btn-teal ha un GRADIENTE, cioe' un background-image, e i gradienti non
     sono interpolabili — il suo cambio di stato e' istantaneo per come funziona
     il CSS, non per una dimenticanza. Gli altri pulsanti sfumano. */
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* L'arancio e' l'azione: .btn-primary e .btn-brand sono lo stesso pulsante, il
   doppio nome viene dal markup precedente. Resta l'UNICO pulsante arancio pieno
   per schermata: due arancioni pieni farebbero a gara per l'attenzione. */
.btn-primary,
.btn-brand { background: var(--brand-btn); color: #fff; border: 1px solid var(--brand-btn); }
.btn-primary:hover,
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* Eccezione ammessa alla regola del pulsante pieno unico: il teal e' un secondo
   pieno per l'azione secondaria dichiarata (il "Scopri come funziona"
   dell'hero). Non compete con l'arancio perche' e' un colore diverso e
   visivamente piu' quieto, non un secondo invito identico.
   Dal 2026-08-21 non e' teal pieno ma il gradiente, come le altre superfici teal.
   Il bordo e' trasparente e non teal: serve solo a tenere lo stesso ingombro di
   .btn-ghost (1px), e un filo di tinta piena sul gradiente si vedrebbe come un
   alone piu' scuro sull'angolo chiaro. Il gradiente si disegna anche sotto il
   bordo (background-clip: border-box, il valore di partenza).
   L'etichetta e' bianca: 5,64:1 sul capo chiaro, 6,65 sul capo scuro. In soglia
   su tutto il pulsante. Prima riga = ripiego a tinta piatta. */
.btn-teal { background: #127373; background: var(--grad-teal); color: #fff; border: 1px solid transparent; }
.btn-teal:hover { background: #01676C; background: var(--grad-teal-hover); border-color: transparent; color: #fff; }

/* Terza scelta: contorno. L'hover cambia il bordo e appena il fondo — non tocca
   il colore del testo, che resta --ink. */
.btn-ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--teal); background: var(--mist); color: var(--ink); }

/* ============================ SUPERFICI ============================ */
/* Al passaggio del mouse cambia il bordo: la scheda non si alza e l'ombra non
   cresce. Il fondo non diventa mist, perche' dentro una sezione mist la scheda
   sparirebbe. */
.card-hover { transition: border-color .2s ease; }
.card-hover:hover {
  border-color: var(--teal);
  transform: none;
}

/* Le utility d'ombra del tema originale restano dichiarate ma neutre: i loro
   valori erano le ombre pesanti del 2026-08-19. Il markup che le usa ancora non
   deve stonare; l'ombra buona della v2 e' --shadow-card, applicata dalle classi
   di componente. Da togliere quando si ripulisce il markup. */
.shadow-soft, .shadow-brand, .shadow-glow { box-shadow: none !important; }

/* ============================ HERO ============================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--mist);
}

/*
  Il blocco teal pieno ancorato a destra: e' la superficie-firma della schermata
  (l'unico accento esteso della pagina), e per questo e' UNA sola.
  z-index 0 e non 1: il contenitore del contenuto e' `position: relative` e viene
  dopo nel DOM, quindi a parita' di livello dipinge sopra. Con z-index 1 il
  blocco coprirebbe il testo su schermi molto stretti in cui le colonne si
  sovrappongono.
  Sotto i 1024px sparisce: in colonna il mockup passa sotto il testo e una fascia
  teal a destra non avrebbe piu' niente da reggere.
*/
.hero-teal-block { display: none; }

@media (min-width: 1024px) {
  .hero-teal-block {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 38%;
    /* Gradiente e non tinta piatta: il capo chiaro cade in alto a sinistra (135
       gradi), cioe' dal lato del mockup, e il blocco si scurisce scendendo verso
       il bordo destro della pagina. Qui sopra non ci va testo: e' superficie
       pura. Prima riga = ripiego a tinta piatta (vedi .bg-surfaceDark). */
    background: #127373;
    background: var(--grad-teal);
    z-index: 0;
    pointer-events: none;
  }
}

/* La scheda bianca del mockup: sta SOPRA il blocco teal e ne sporge a sinistra
   sul fondo chiaro. Il padding sta qui e non nel markup perche' e' una misura
   della superficie, non del contenuto. */
.hero-mock {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
@media (min-width: 1024px) {
  .hero-mock { padding: 22px; }
}

/* ============================ STRISCIA DI FIDUCIA ============================
   Fascia a tutta larghezza subito sotto l'hero. NON e' piu' una griglia fissa di
   quattro voci con i divisori: e' un CAROSELLO (vedi .marquee qui sotto), perche'
   le voci sono diventate sette — le tre che stavano sotto i pulsanti dell'hero
   (Multi-sede, White-label, Sync AppReception) sono migrate qui.

   Cosa e' stato tolto, e perche' NON va rimesso:
   - `display: grid` con le colonne per breakpoint: la pista del carosello e' un
     flex che deve poter essere PIU' LARGA della fascia. Dentro una griglia veniva
     schiacciata in una cella sola e in pagina si vedeva una voce soltanto;
   - i divisori `.trust-item + .trust-item` con le regole `:nth-child` contro il
     filo penzolante: servivano a una griglia che andava a capo. In una pista che
     scorre non ci sono righe, e quei bordi tagliavano le card.

   Le voci NON sono schede: niente fondo proprio, niente bordo, niente raggio,
   niente ombra. Nello sketch sono testo appoggiato sulla fascia, separato da un
   semplice filo verticale. Erano diventate schede per un giro, e il risultato
   era una fila di rettangoli che scorrevano: e' esattamente cio' che l'utente ha
   chiesto di togliere. Per questo il fondo puo' tornare BIANCO: non c'e' piu'
   nessuna superficie bianca sopra che ci sparirebbe dentro. */
.trust-strip {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: 20px;
}

/*
  Il separatore e' LATERALE e basta, come nello sketch: un filo verticale a
  sinistra di ogni voce.
  Qui, a differenza della vecchia griglia, il filo penzolante non esiste: la
  pista e' una riga sola infinita, non va mai a capo, quindi non c'e' una "prima
  voce di riga" da cui toglierlo. Il filo della primissima voce non si vede
  comunque, perche' la dissolvenza della .marquee sfuma proprio quel bordo.
  Il passo fra le voci lo fa il padding, NON il gap della pista (l'istanza mette
  --marquee-gap: 0px): con un gap il filo resterebbe attaccato alla voce di
  destra invece di stare in mezzo alle due.
*/
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 30px;
  border-left: 1px solid var(--line);
}
/* L'icona e' teal (6,65:1 sul bianco), il titolo --ink, il sottotitolo --muted:
   i colori li mette il markup, qui c'e' solo cio' che il markup non puo' sapere. */
.trust-item > :last-child { min-width: 0; }

/* ============================ CAROSELLO IN LOOP ============================
   Classi generiche: le usano sia la striscia di fiducia sia le schede
   funzionalita', e chiunque altro abbia una lista che deve scorrere da sola.
   Qui non c'e' niente che sappia COSA scorre.

   CONTRATTO COL MARKUP (senza queste tre cose il carosello non gira):
   1. la lista va emessa DUE VOLTE dentro la stessa .marquee-track — la seconda
      copia marcata `aria-hidden="true"` cosi' i lettori di schermo la leggono
      una volta sola. L'animazione trasla del 50%: e' la seconda copia che
      arriva dove stava la prima, ed e' per questo che il ciclo non salta;
   2. le due copie devono essere IDENTICHE (stesse voci, stesso ordine): se una
      delle due e' piu' corta il -50% non combacia piu' con niente;
   3. la durata si passa dall'istanza con --marquee-duration (piu' voci ci sono,
      piu' lunga va messa, altrimenti la stessa velocita' apparente cambia); il
      passo fra le voci con --marquee-gap. Entrambe hanno un ripiego qui.
   Le due copie possono essere 2N voci una in fila all'altra oppure due gruppi
   (due <ul> identici): il conto del 50% regge in tutti e due i casi. */
/* La finestra non puo' essere lei la causa di uno sconfinamento orizzontale: e'
   larga il 100% del contenitore (col box-sizing di Tailwind il padding sta
   dentro quel 100%) e taglia tutto quello che esce, pista compresa. Se una voce
   e' piu' larga dello schermo il punto dove intervenire e' la voce, non questa
   regola — l'unico caso in cui il taglio non c'e' e' sotto
   prefers-reduced-motion, e li' le voci hanno un massimo (vedi in fondo). */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* overflow: hidden taglia anche in verticale. Se dentro ci vanno superfici con
     ombra (le .feature-card ne hanno una, che sporge di ~4px sotto) l'istanza si
     da' un --marquee-pad, altrimenti l'ombra viene tranciata dal bordo della
     finestra. Di serie 0: la striscia di fiducia non ne ha bisogno. */
  padding-block: var(--marquee-pad, 0px);
  /* Dissolvenza ai due bordi: senza, le voci entrano ed escono tagliate di
     netto e si vede il bordo della finestra. La maschera e' decorativa, non
     nasconde contenuto: quello che sbiadisce sta per uscire comunque.
     Doppia dichiarazione perche' Safari vuole ancora il prefisso. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

.marquee-track {
  display: flex;
  /* max-content: la pista e' larga quanto le due copie messe in fila, non
     quanto la finestra. Senza, il flex le comprimerebbe per farcele stare. */
  width: max-content;
  gap: var(--marquee-gap, 16px);
}

/*
  L'ANIMAZIONE PARTE SOLO A PISTA RADDOPPIATA (`.is-looped`, la mette site.js
  dopo aver clonato le voci). Dal 2026-08-31 il markup emette UNA copia sola:
  l'audit SEO segnalava blocchi di contenuto che comparivano due volte nel DOM
  (par. 21) e le due copie del carosello erano proprio quelle. La seconda serve
  al movimento, non al contenuto, quindi la fa il JavaScript.
  Senza JavaScript non resta una pista rotta: resta una fila statica di voci,
  tutte presenti nell'HTML — e' l'unico stato in cui il taglio della finestra
  nasconde le ultime, ma il crawler le legge lo stesso e chi ha il JS le vede
  scorrere. Senza questa condizione, con una copia sola, l'animazione
  porterebbe il contenuto fuori dalla finestra lasciando meta' giro vuoto.
*/
.marquee.is-looped .marquee-track {
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

/* Le voci non si restringono mai: con `flex: 1` o con lo shrink di partenza la
   pista larga max-content si sfalda. Vale per qualunque figlio diretto, cosi'
   il markup non deve ricordarselo. */
.marquee-track > * { flex: 0 0 auto; }

/*
  IL CONTO DEL GAP — e' la parte che si sbaglia sempre.
  Con N voci per copia, la pista larga max-content misura 2N*voce + (2N-1)*gap:
  i gap sono uno IN MENO degli elementi, perche' `gap` sta solo FRA di loro. Il
  50% di quella larghezza vale N*voce + (N-0,5)*gap, cioe' mezzo gap in meno di
  quello che serve: a ogni giro il carosello scatterebbe indietro di gap/2.
  Si aggiusta aggiungendo il gap come margine finale dell'ultima voce: la pista
  diventa 2N*(voce+gap) e il 50% torna a essere esattamente una copia intera,
  gap di raccordo compreso. Basta l'ULTIMA voce della pista, non l'ultima di
  ciascuna copia: fra la fine della prima copia e l'inizio della seconda il gap
  ce lo mette gia' `gap`.
*/
.marquee-track > :last-child { margin-inline-end: var(--marquee-gap, 16px); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pausa col mouse e col fuoco da tastiera. Non e' un vezzo: un contenuto che
   scorre di continuo non si legge, e se contiene link non si clicca — col
   fuoco, chi naviga da tastiera si troverebbe il bersaglio che scappa.
   Vale finche' a muovere la pista e' questa animazione, cioe' quando il JS non
   c'e'; con il JS la pausa la fa lui, alle stesse due condizioni. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* ---- SI AFFERRA E SI TRASCINA ----
   `.is-draggable` la mette site.js quando prende in carico il movimento, e non
   compare mai nel markup: senza JS resta l'animazione qui sopra, che da sola
   funziona.

   L'animazione va SPENTA, non messa in pausa: sono due sorgenti della stessa
   proprieta' e una regola d'animazione vince sul `transform` che il JS scrive
   sull'elemento, quindi convivendo la pista tornerebbe indietro a ogni
   fotogramma. Spenta l'animazione, la posizione ce l'ha in mano un solo padrone
   e al rilascio non c'e' nessun salto (il perche' per esteso sta in site.js).

   `touch-action: pan-y` e' la meta' mobile della distinzione fra gesto
   orizzontale e verticale: il browser si tiene lo scorrimento verticale della
   pagina — che quindi non si rompe mai sopra il carosello — e lascia al JS
   quello orizzontale. Non e' `none`, che bloccherebbe anche il verticale. */
.marquee.is-draggable {
  cursor: grab;
  touch-action: pan-y;
}
.marquee.is-draggable .marquee-track {
  animation: none;
  will-change: transform;
}

/* Mentre si trascina: lo dice il cursore, e il testo non si seleziona — con la
   selezione attiva il gesto diventerebbe un evidenziatore invece di uno
   scorrimento. Stessa specificita' della regola qui sopra: vince perche' viene
   dopo. */
.marquee.is-dragging { cursor: grabbing; }
.marquee.is-dragging .marquee-track {
  -webkit-user-select: none;
          user-select: none;
}

/* ============================ PANNELLO STATISTICHE ============================
   Il blocco teal pieno della sezione "Cos'e'". I divisori sono i BORDI delle
   celle, non elementi a parte: cosi' non c'e' niente da mantenere allineato e la
   griglia resta una griglia. */
.stat-panel {
  /* Prima riga = ripiego a tinta piatta, vedi .bg-surfaceDark. */
  background: #127373;
  background: var(--grad-teal);
  border-radius: var(--radius-lg);
  color: #fff;
  display: grid;
  padding: 14px;
}
/* Classe raddoppiata: il markup porta l'utility `grid-cols-2` di Tailwind, che
   e' iniettata dopo questo foglio e a parita' di specificita' vincerebbe. Su
   mobile due colonne strizzerebbero il numero grande, quindi qui si passa a una
   colonna sola e si toglie il divisorio verticale. */
.stat-panel.stat-panel { grid-template-columns: minmax(0, 1fr); }

.stat-cell { padding: 20px 22px; }
.stat-cell:nth-child(n+2) { border-top: 1px solid var(--rule-light); }

@media (min-width: 640px) {
  .stat-panel.stat-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Griglia 2x2: filo orizzontale solo sotto la prima riga, verticale solo tra
     la prima e la seconda colonna. Stesso discorso dell'ordine di sopra. */
  .stat-cell:nth-child(n+2) { border-top: 0; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--rule-light); }
  .stat-cell:nth-child(even) { border-left: 1px solid var(--rule-light); }
}

/* Sotto-elementi della cella. Il markup puo' ottenere le stesse misure con la
   scala tipografica di Tailwind (text-3xl/4xl): queste classi servono a tenere
   la misura del numero in UN posto solo (--stat-value) per chi non usa utility. */
.stat-icon  { color: #fff; }
.stat-value { font-size: var(--stat-value); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.02em; }
.stat-label { font-size: 14px; font-weight: 600; color: #fff; }
/* Era bianco all'80%, che sul teal pieno bastava per un pelo (4,87:1). Sul
   gradiente lo stesso 80% vale 4,23:1 sul capo chiaro: qui il bianco e' PIENO
   (5,64:1) e non si scende piu'. La gerarchia fra valore, etichetta e
   descrizione la fanno corpo e peso, non l'opacita'. */
.stat-desc  { font-size: 14px; color: #fff; }

/* ============================ SCHEDE FUNZIONALITA' ============================
   Dal 2026-08-21 le schede sono TUTTE UGUALI: non esiste piu' la scheda "in
   evidenza" sempre accesa (.feature-card--featured) ne' la sua etichetta a
   cavallo del bordo (.feature-legend). Erano due classi sole a dire "questa
   conta di piu'", e la scelta era dei contenuti, non del disegno.
   L'arancio adesso e' un COMMENTO al passaggio del mouse, non uno stato del
   contenuto. */
.feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* Solo colore: nessuna trasformazione, la scheda non si alza (regola del
     progetto). */
  transition: background-color .18s ease, border-color .18s ease;
}
/* L'icona e' in outline, SENZA quadratino di fondo: nella v1 stava dentro un
   quadrato mist, nello sketch il quadrato non c'e' piu'. */
.feature-icon { color: var(--teal); transition: color .18s ease; }

/*
  Evidenza al passaggio del mouse E col fuoco da tastiera: :focus-within accende
  la scheda quando il fuoco entra su un link o un pulsante al suo interno, cosi'
  chi naviga da tastiera vede la stessa cosa di chi usa il mouse. Da mobile il
  :hover non esiste e su molti browser il primo tocco lo simula: qui va bene lo
  stesso perche' l'evidenza e' PURA DECORAZIONE — nessun contenuto e nessuna
  differenza di significato dipende da lei. Se un giorno dovesse voler dire
  qualcosa (una scheda "consigliata"), non si torna al :hover: ci vuole un segno
  visibile a riposo.
  Contrasto sul fondo --brand-tint #FDF0E7: titolo --ink 15,58:1, testo --body
  6,56:1, icona --brand 3,54:1 (e' un elemento grafico, soglia 3:1). Il bordo
  --brand non e' testo.
  Cascata: nel markup le schede portano anche .card-hover, il cui :hover porta il
  bordo a --teal. I due selettori valgono entrambi 0,2,0, quindi decide l'ordine
  nel file: questo viene DOPO e vince. Non spostarlo piu' in alto.
*/
.feature-card:hover,
.feature-card:focus-within {
  background: var(--brand-tint);
  border-color: var(--brand);
}
.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon { color: var(--brand); }

/* ============================ SEZIONE SCURA: COME FUNZIONA ============================ */
/*
  LE SCHEDE SONO VETRO ("liquid glass"). Prima erano solo un bordo su fondo
  trasparente; adesso sono una lastra smerigliata appoggiata sul gradiente: velo
  di bianco appena accennato, sfocatura di cio' che ci sta sotto, e un filo di
  luce sul bordo superiore. E' quel filo a far leggere la superficie come VETRO
  invece che come un rettangolo semitrasparente qualsiasi — senza, l'effetto non
  si vede. La saturazione alzata nel backdrop-filter tiene vivo il teal sotto,
  che la sfocatura da sola smorzerebbe.
  Da sapere prima di tarare i valori: sotto la scheda c'e' SOLO il gradiente, che
  e' gia' liscio — la sfocatura da sola quindi non si nota quasi. A fare
  l'effetto sono il velo, il filo di luce e la saturazione; la sfocatura si vede
  davvero solo dove il vetro passa sopra a qualcosa di disegnato.

  IL NUMERO DA NON SUPERARE: il velo di bianco SCHIARISCE il fondo e quindi
  abbassa il contrasto del testo bianco che ci sta sopra. Misurato sul capo
  chiaro del gradiente (#127373), bianco pieno sul risultato:
      velo  8%  4,80:1  <- scelto
      velo 10%  4,59:1  <- massimo utile, e' il ripiego qui sotto
      velo 12%  4,43:1  fuori soglia
      velo 18%  3,94:1  fuori soglia
  Oltre il 10% il testo dei passi esce dai 4,5:1. Se un giorno l'effetto sembra
  troppo timido si alza la SFOCATURA, non il velo.

  -webkit-backdrop-filter va tenuto: Safari lo vuole ancora col prefisso, e
  senza, sul browser piu' diffuso su iOS l'effetto sparisce del tutto.
*/
.step-card {
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--rule-light);
  /* Il raggio grande (10px, non 6px): restano i due soli valori del sistema, ma
     una lastra di vetro con lo spigolo quasi vivo non sembra vetro. */
  border-radius: var(--radius-lg);
  /* Il filo di luce interno in alto: e' il riflesso del bordo della lastra.
     Sotto, un'ombra cortissima e rientrata che stacca il vetro dal fondo senza
     sollevarlo (le superfici di questo progetto restano appoggiate). */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 8px 24px -18px rgba(0, 0, 0, .45);
}

/* Ripiego per chi non ha backdrop-filter: senza sfocatura un velo all'8% e'
   quasi invisibile, quindi si sale al 10% — che resta il massimo consentito dal
   conto qui sopra (bianco a 4,59:1) — e il bordo si fa un po' piu' netto. Non
   e' vetro, ma e' una superficie che si legge. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .step-card {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .42);
  }
}

/* Il numero grande e' BIANCO come tutto il resto della sezione: scelta esplicita
   dell'utente ("i testi vanno bene tutti bianchi"). Prima era l'apricot #FFC99C,
   tenuto perche' era l'unico accento caldo che reggesse la soglia del testo
   grande (3,78:1 sul gradiente, 3,22 sul vetro, 3,08 sul ripiego): in soglia, ma
   di stretta misura. Il bianco pieno sta a 5,64:1 sul capo chiaro del gradiente
   e 4,80 sul vetro all'8%, quindi il margine e' molto piu' largo e la sezione ha
   una tinta sola. Con questo l'arancio sparisce del tutto dalle superfici teal:
   li' non era comunque utilizzabile (#FF8B4A 2,43:1, #E54A02 1,43). */
.step-num {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

/* L'icona sta in alto a destra: la posizione la fa la riga flex del markup
   (numero a sinistra, icona a destra), qui c'e' solo il colore. Era bianca
   all'80%: sul vetro scendeva a 3,69:1 e, pur essendo un'icona (soglia 3:1),
   non c'e' motivo di tenerla tenue quando tutto il resto e' bianco pieno. */
.step-icon {
  color: #fff;
  flex: 0 0 auto;
  margin-top: 4px;
}

/*
  Il chevron tra una scheda e l'altra. Sta DENTRO la scheda in posizione assoluta
  (non come elemento fratello) cosi' la griglia resta di quattro colonne pulite.

  DOVE STA, ADESSO: nel VUOTO fra due schede, senza toccare nessun bordo. Prima
  era appoggiato sul bordo destro della scheda e ci si sovrapponeva.
  Il conto, con la griglia a gap 44px: `right: -22px` porta il bordo destro del
  cerchio a meta' del vuoto, e `translate(50%, ...)` lo sposta di meta' della sua
  larghezza, cosi' e' il CENTRO del cerchio a cadere a meta' del vuoto. Un
  cerchio da 30px dentro 44px di vuoto lascia 7px liberi da ciascun lato: non
  tocca ne' la scheda di sinistra ne' quella di destra.
  Verticalmente sta a meta' della scheda (top 50% + translateY(-50%)): in una
  riga di griglia le schede sono alte uguali, quindi i chevron risultano
  allineati fra loro senza dover inseguire con un valore fisso il padding della
  scheda o il corpo del titolo, come faceva il vecchio --step-connector-top.

  IMPILAMENTO: la scheda ha backdrop-filter, che crea un contesto di
  impilamento. Il chevron ci sta dentro (e' un figlio) e per questo prende lo
  z-index 1: cosi' resta sopra il velo e il filo di luce del vetro. Non viene
  ritagliato dalla scheda perche' la scheda non ha overflow: hidden — se un
  giorno gliela si mettesse, il chevron sparirebbe e andrebbe spostato fuori.
  Il cerchio cade nel vuoto, cioe' sul gradiente nudo: il suo filo bianco all'85%
  ci sta a 4,56:1 sul capo chiaro e 5,28 sul capo scuro, ben sopra i 3:1 di un
  elemento grafico.

  Sotto i 1024px non si emette: in una o due colonne una freccia orizzontale
  indicherebbe il passo sbagliato.
*/
.step-connector { display: none; }

@media (min-width: 1024px) {
  .step-connector {
    --step-gap: 44px;             /* deve corrispondere al gap della griglia */
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--step-gap) / 2);
    z-index: 1;
    width: 30px;
    height: 30px;
    transform: translate(50%, -50%);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    color: #fff;
    pointer-events: none;
  }
  /* Il chevron dentro al cerchio: la misura la decide il cerchio, non l'utility
     `w-4 h-4` che lucide lascia sull'<svg>. Un selettore discendente con un tipo
     (0,1,1) sta sopra la classe singola dell'utility (0,1,0), quindi vince senza
     bisogno di !important. */
  .step-connector svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
  }
}

/* ============================ FASCIA CTA FINALE ============================
   Il fondo e' --mist, lo stesso delle sezioni alternate, chiuso fra due fili.
   Prima era una tinta teal chiarissima tutta sua (#F1F7F7, token --cta-band, ora
   tolto): una quarta superficie colorata per una fascia sola. Con --mist la
   fascia resta comunque staccata perche' sta fra la sezione a gradiente che la
   precede e il bianco della roadmap che la segue — se un giorno finisse fra due
   sezioni gia' mist, servirebbero i fili (ci sono) o un fondo diverso.
   Il layout interno (icona a sinistra, testo, pulsante a destra, in colonna su
   mobile) lo fa il markup: qui c'e' la fascia. */
.cta-band {
  background: var(--mist);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 28px;
}
@media (min-width: 768px) {
  .cta-band { padding-block: 36px; }
}

/* ============================ COMPARSA IN SCROLL ============================ */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

.nav-blur {
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
}

/* ============================ MODULO ============================ */
.amr-input {
  width: 100%;
  padding: .8rem .9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.5;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.amr-input::placeholder { color: var(--muted); }
.amr-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(229, 74, 2, .16);
}
.amr-input[aria-invalid="true"] { border-color: #C0392B; }
/* Rosso scurito: #C0392B sta a 5,44:1 e va bene per il bordo, ma il messaggio e'
   testo da 12,5px e conviene stare piu' larghi (7,04:1). */
.amr-field-error { color: #A8281B; font-size: 12.5px; margin-top: .35rem; }

/* ============================ CALENDARIO DEL MOCKUP ============================ */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  aspect-ratio: 1;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono);
  border: 1px solid transparent;
  /* Gli elementi di una griglia partono con `min-width: auto`, cioe' non
     scendono sotto la larghezza del proprio contenuto: sette celle che si
     rifiutano di stringersi allargano la griglia oltre la scheda e la scheda
     oltre lo schermo. Con `1fr` per colonna la larghezza la decide la griglia,
     quindi quel minimo va tolto. Vale anche in verticale per via
     dell'aspect-ratio, che riporta la misura da un asse all'altro. */
  min-width: 0;
}

/*
  Quattro stati del giorno. La regola che vale per tutti: la cella NON puo' avere
  lo stesso fondo della scheda che la contiene (che e' mist) senza almeno un
  bordo, altrimenti sparisce — era il difetto del giorno corrente, che risultava
  un buco in mezzo alla griglia.
*/
/* Libero = teal: nel calendario e' il segnale di "disponibile", non un giorno
   qualunque su fondo neutro. Testo teal sul teal-tint: 6,06:1. */
.cal-free   { background: var(--teal-tint); border-color: rgba(1, 103, 108, .32); color: var(--teal); }
/* Fine settimana: fondo bianco e filo neutro, resta leggibile (5,36:1) ma non
   attira. */
.cal-off    { background: var(--paper); border-color: var(--line); color: var(--muted); }
/* Prenotato: l'arancio dei PULSANTI, non quello pieno del logo — il numero e'
   bianco e piccolo, e sull'arancio pieno starebbe a 3,95:1. */
.cal-booked { background: var(--brand-btn); border-color: var(--brand-btn); color: #fff; }
/* Oggi: nessun riempimento, anello teal spesso. Si distingue a colpo d'occhio sia
   dai giorni liberi sia da quelli prenotati, senza bisogno di una legenda. */
.cal-today  {
  background: var(--paper);
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
  color: var(--teal);
  font-weight: 700;
}

@supports (padding: env(safe-area-inset-bottom)) {
  .safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + .75rem); }
}

/* ============================ ACCESSIBILITA' ============================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Sulle superfici teal l'arancio come indicatore di fuoco non regge: #E54A02 sta
   a 1,43:1 sul capo chiaro del gradiente e 1,68 sul capo scuro, sotto i 3:1
   richiesti a un indicatore. Li' l'anello diventa bianco: 5,64:1 e 6,65:1. */
.bg-surfaceDark a:focus-visible,
.bg-surfaceDark button:focus-visible,
.bg-teal a:focus-visible,
.bg-teal button:focus-visible,
.stat-panel a:focus-visible,
.stat-panel button:focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-hover,
  .feature-card, .feature-icon,
  .btn-primary, .btn-brand, .btn-teal, .btn-ghost,
  .amr-input { transition: none; }
  .animate-rise { animation: none !important; }

  /*
    Il carosello si ferma del tutto. Un loop infinito e' esattamente il movimento
    che questa preferenza chiede di spegnere: non si rallenta, si toglie.

    Al posto dell'animazione le voci VANNO A CAPO, non si scorrono a mano.
    Prima qui c'era `overflow-x: auto` con lo scorrimento manuale, ed era una
    scelta peggiore per due motivi:
    - lasciava in pagina una BARRA DI SCORRIMENTO sotto ogni carosello, che e'
      brutta e viene scambiata per un difetto (l'utente l'ha segnalata);
    - obbligava comunque a un'interazione per leggere meta' del contenuto, in una
      fascia che e' informativa e non merita fatica.
    Andando a capo si vede tutto insieme, senza barre e senza movimento: e' il
    ripiego piu' semplice e il piu' leggibile.
  */
  .marquee {
    overflow: visible;
    padding-inline: 1rem;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 14px;
    /* Il trascinamento qui non e' agganciato (site.js non aggancia niente sotto
       questa preferenza), ma se l'impostazione cambia a pagina aperta il JS puo'
       aver gia' scritto una traslazione sulla pista: senza questo azzeramento le
       voci andate a capo resterebbero spostate di lato. E' inline, quindi per
       toglierla ci vuole !important. */
    transform: none !important;
  }
  /* Le voci hanno una larghezza fissa (300px la striscia, 340px le schede) e qui
     non c'e' piu' la finestra a tagliarle: su uno schermo da 320-360px
     sforerebbero. Ferme e andate a capo, quella larghezza puo' diventare un
     massimo — il testo va a capo e nessuno esce dallo schermo. */
  .marquee-track > * {
    max-width: 100%;
  }
  /* La copia doppia serve solo a far combaciare il ciclo: ferma la pista e'
     contenuto ripetuto. Dal 2026-08-31 sotto questa preferenza il clone non
     viene nemmeno creato (site.js non lo fa), quindi questa regola non ha piu'
     niente da nascondere al primo caricamento: resta perche' l'impostazione
     puo' cambiare a pagina aperta, dopo che il clone e' gia' stato fatto. I
     cloni li marca `aria-hidden="true"` chi li crea. */
  .marquee-track > [aria-hidden="true"] { display: none; }
  /* Senza animazione il margine di raccordo lascerebbe un vuoto in coda. */
  .marquee-track > :last-child { margin-inline-end: 0; }
  /* Il filo verticale della striscia di fiducia si toglie: andando a capo la
     prima voce di ogni riga se lo porterebbe dietro nel vuoto (il "filo
     penzolante"). Qui a separare bastano lo spazio e il ritorno a capo. */
  .trust-item { border-left: 0; }
}

/* ===========================================================================
   AGGIUNTA DELLA VERSIONE WORDPRESS — testo lungo scritto nell'editor
   ===========================================================================

   Da qui in giu' il foglio si allontana da quello del sito PHP custom, ed e'
   l'unica differenza fra i due. Il motivo: WordPress porta una cosa che li' non
   c'era, cioe' un EDITOR con dentro del testo libero. Una privacy policy, una
   pagina di ringraziamento, un articolo: markup che nessun template conosce in
   anticipo (<p>, <ul>, <h2>, <blockquote>, <table>) e che senza regole esce con
   gli stili di partenza del browser — Times New Roman e interlinea 1,2 in mezzo
   a una pagina che ha un sistema tipografico suo. Si vede, e si vede subito.

   Le misure NON sono nuove: sono quelle che il sistema usa gia' altrove.
   Interlinea del corpo 1.7 (la regola del progetto e' >= 1.7 contro titoli
   <= 1.25), colori dai token, spigoli vivi, l'accento solo sui link. Non c'e'
   nessun valore inventato qui dentro: se un domani cambia --body, cambia anche
   questo blocco.
   ========================================================================= */

.amr-prose {
  color: var(--body);
  font-size: 1rem;
  line-height: 1.7;
}

/* Il primo e l'ultimo elemento non portano margine: il vuoto sopra e sotto lo
   decide la sezione che li contiene, altrimenti si sommano e il blocco sembra
   staccato dal titolo. */
.amr-prose > :first-child { margin-top: 0; }
.amr-prose > :last-child  { margin-bottom: 0; }

.amr-prose p {
  margin: 0 0 1.15em;
}

.amr-prose h2,
.amr-prose h3,
.amr-prose h4 {
  margin: 2em 0 .6em;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.25;
}

.amr-prose h2 { font-size: 1.75rem; }
.amr-prose h3 { font-size: 1.3rem; }
.amr-prose h4 { font-size: 1.1rem; }

.amr-prose ul,
.amr-prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em;
}

.amr-prose ul { list-style: disc; }
.amr-prose ol { list-style: decimal; }
.amr-prose li { margin-bottom: .4em; }

/* Il link e' l'unico punto in cui l'accento entra in un testo lungo. La
   sottolineatura NON si toglie: dentro un paragrafo il solo colore non basta a
   distinguere un link, e chi non percepisce quel colore non lo vede affatto. */
.amr-prose a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.amr-prose a:hover { color: var(--brand2); }

.amr-prose strong { color: var(--ink); font-weight: 700; }

.amr-prose blockquote {
  margin: 1.5em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--teal);
  color: var(--ink);
}

.amr-prose code {
  padding: .1em .35em;
  background: var(--mist);
  border: 1px solid var(--line);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: .9em;
}

.amr-prose pre {
  margin: 1.5em 0;
  padding: 1em 1.1em;
  background: var(--mist);
  border: 1px solid var(--line);
  /* Il codice non manda mai la pagina in scorrimento orizzontale: scorre lui,
     dentro il proprio riquadro. */
  overflow-x: auto;
}

.amr-prose pre code { padding: 0; background: none; border: 0; }

.amr-prose img {
  max-width: 100%;
  height: auto;
}

.amr-prose hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Una tabella scritta nell'editor puo' essere piu' larga della colonna: scorre
   nel suo contenitore invece di allargare la pagina. */
.amr-prose table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: .95em;
}

.amr-prose th,
.amr-prose td {
  padding: .6em .8em;
  border: 1px solid var(--line);
  text-align: left;
}

.amr-prose th {
  background: var(--mist);
  color: var(--ink);
  font-weight: 700;
}