/*
  Cartlas — sito vetrina.

  I token qui sotto portano gli STESSI NOMI di quelli in src/Cartlas.Web/wwwroot/app.css,
  e gli stessi valori, che vengono da CartlasTheme.cs. Non è pedanteria: due fogli con gli
  stessi nomi si confrontano riga per riga, due fogli con nomi diversi divergono senza che
  nessuno se ne accorga. Se un valore qui litiga con quello dell'app, ha ragione l'app.

  Il sito è deliberatamente a tema chiaro solo: la palette scura resta per la sezione
  d'ancora e per i mockup dell'app, dove è la sua schermata a essere scura, non la pagina.
*/

/* ---------------------------------------------------------------- caratteri */
/* Self-hosted, mai dal CDN di Google: sarebbe un trasferimento di dati verso terzi
   su un sito che dichiara di non farne, e renderebbe falsa la propria privacy policy.
   Sono i sottoinsiemi variabili: un file copre l'asse 100-900. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------- token */
:root {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #748193;
  --color-text: #0f172a;
  --color-text-muted: #475569;

  --color-primary: #047857;
  /* NON è emerald-800: è il valore che MudBlazor CALCOLA per --mud-palette-primary-darken a
     partire da #047857, ed è quello con cui l'app dipinge l'hover di ogni bottone primario
     (.mud-button-filled-primary:hover). Misurato eseguendo PaletteLight, non dedotto a occhio: se
     un giorno --color-primary cambia, questo va rimisurato, non ricalcolato. */
  --color-primary-hover: #024f39;
  --color-primary-contrast: #ffffff;
  /* ⚠️ Questi due sono un'ESTENSIONE DEL SITO, gli unici token di questo file che l'app non ha:
     Cartlas.Web non possiede alcuna superficie verde tenue (niente bande tinte, niente callout), e
     inventarle in app.css avrebbe voluto dire due token morti più una coppia di valori scuri che
     nessuno ha disegnato. Restano quindi qui, e la regola «ha ragione l'app» non li riguarda perché
     non esiste un valore dell'app con cui possano litigare. Se un giorno l'app avrà una banda
     tinta, questi due si spostano in app.css con il loro corrispettivo scuro e il sito li rispecchia
     come tutti gli altri. */
  --color-tint: #ecfdf5;
  --color-tint-strong: #d1fae5;

  --color-accent: #0e7490;
  --color-warn: #b45309;
  --color-danger: #b3261e;

  --color-ink-dark: #0d1117;
  --color-on-dark: #e6edf3;
  --color-on-dark-muted: #9ba7b4;
  --color-primary-on-dark: #34d399;
  --color-border-dark: #262e38;

  --price-accent: var(--color-primary);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-card: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 32px -8px rgba(15, 23, 42, .12);

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --dur: 180ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  --wrap: 1120px;
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}

/* Come i tag di questo sito si appoggiano ai passi della scala di CartlasTheme.cs. Scritto perché
   la corrispondenza NON è uno a uno, e senza questa nota sembra uno scarto da correggere:

       h1 -> H1     h2 -> H2     h3 -> H4     h4 -> H6

   I valori sono quelli dell'app; a cambiare è il livello semantico a cui vengono usati, perché qui
   h2 è un titolo di sezione e h3 un titolo di card, mentre nell'app H3 è un titolo di pagina.
   ATTENZIONE: portare h3 a 1.5rem "per allinearlo ad H3" romperebbe la gerarchia invece di
   ripararla, perché h2 parte esattamente da 1.5rem e sui viewport stretti i due diventerebbero
   indistinguibili. */
h3 { font-weight: 650; font-size: 1.25rem; line-height: 1.35; letter-spacing: -.005em; }
h4 { font-weight: 600; font-size: 1rem; line-height: 1.45; letter-spacing: .005em; }

p, ul, ol { margin: 0; }

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--color-primary-hover); }

img, svg { max-width: 100%; }

strong { font-weight: 650; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.lede { font-size: 1.0625rem; color: var(--color-text-muted); max-width: 62ch; }
.muted { color: var(--color-text-muted); }
.small { font-size: .9375rem; }
.xs { font-size: .8125rem; line-height: 1.5; color: var(--color-text-muted); }

.stack { display: flex; flex-direction: column; }
.g2 { gap: var(--space-2); } .g3 { gap: var(--space-3); }
.g4 { gap: var(--space-4); } .g5 { gap: var(--space-5); }

/* ------------------------------------------------------- intestazione sito */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--color-bg); }
}

.site-header-in {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
}
.brand-mark { display: block; flex: none; color: var(--color-primary); }
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  /* 1.4rem, con il segno a 21x28 accanto (intestazione) e 16x21 sotto a 1.125rem (piè di pagina).
     I due numeri NON sono a occhio: brand/geometry.json fissa capTarget 24 su un'altezza
     d'inchiostro di 40, cioè un rapporto cap/segno di 0.6, e l'altezza delle maiuscole di Outfit è
     0.706em. Da 1.4rem = 22.4px escono maiuscole da ~15.8px e quindi un segno da ~26px, che è il 28
     che BrandLogo.razor usa nell'app. Fino al 2026-08-30 qui c'erano 24x32 e 21x28: il segno era
     circa il 14% troppo grande rispetto al proprio nome, e il commento diceva già di seguire il
     lockup vettoriale mentre non lo faceva. Se cambi una delle due misure, ricalcola l'altra. */
  font-size: 1.4rem;
  letter-spacing: -.02em;
  color: currentColor;
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

.site-nav { display: none; width: 100%; }
.site-nav[data-open='true'] { display: block; }
.site-nav ul {
  list-style: none;
  padding: 0 0 var(--space-3);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.site-nav a {
  display: block;
  padding: .625rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--color-primary); background: var(--color-surface); }
.site-nav a[aria-current='page'] { color: var(--color-primary); font-weight: 600; }

/*
  «Apri l'app»: l'unica voce di questa nav che porta fuori dal sito, e l'unica che deve leggersi
  come un'azione e non come una pagina. Riusa i COLORI di .btn-primary senza riusare la classe,
  perché .btn porta un min-height di 44px e un padding propri che, dentro una riga di nav, darebbero
  due altezze diverse fra le voci. Sotto gli 800px resta a piena larghezza come le altre voci del
  menu aperto; sopra diventa inline, ed è l'ultima cosa a destra.
*/
.site-nav .nav-cta a {
  display: flex;
  align-items: center;
  gap: .375rem;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}
.site-nav .nav-cta a:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

@media (min-width: 800px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; width: auto; margin-left: auto; }
  .site-nav ul { flex-direction: row; padding: 0; gap: var(--space-1); }
  .site-nav .nav-cta a { display: inline-flex; }
}

/* -------------------------------------------------------------- sezioni */
/*
  Il ritmo della pagina: bianco → superficie → bianco → tinta → bianco → scuro.
  Mai due sezioni colorate di fila, e una sola sezione scura per pagina — è
  l'ancora narrativa, non una decorazione che si ripete.
*/
.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section--surface { background: var(--color-surface); }
.section--tint { background: var(--color-tint); }
.section--dark { background: var(--color-ink-dark); color: var(--color-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--color-on-dark); }
.section--dark p, .section--dark li { color: var(--color-on-dark-muted); }
.section--dark .eyebrow { color: var(--color-primary-on-dark); }
.section--dark a { color: var(--color-primary-on-dark); }
.section--dark .btn { border-color: var(--color-border-dark); background: transparent; color: var(--color-on-dark); }
.section--dark .btn-primary {
  background: var(--color-primary-on-dark);
  border-color: var(--color-primary-on-dark);
  color: #062015;
}
/* Anche sulla banda scura si SCURISCE, come fa l'app: #28b883 è il primary-darken che MudBlazor
   calcola dal #34d399 della propria palette scura. La versione precedente schiariva a emerald-300,
   cioè andava nella direzione opposta a quella del prodotto che questa banda sta imitando. */
.section--dark .btn-primary:hover { background: #28b883; border-color: #28b883; }

.section-head { display: flex; flex-direction: column; gap: var(--space-2); max-width: 68ch; margin-bottom: var(--space-5); }

/* ---------------------------------------------------------------- hero */
.hero {
  padding-block: var(--space-6) var(--space-6);
  background:
    radial-gradient(60rem 30rem at 12% -14%, rgba(4, 120, 87, .11), transparent 70%),
    radial-gradient(45rem 25rem at 98% 2%, rgba(14, 116, 144, .09), transparent 65%);
  border-bottom: 1px solid var(--color-border);
}
/*
  .hero-inner e .prose stanno sullo STESSO elemento di .wrap. Se dichiarassero un
  max-width proprio vincerebbero su quello di .wrap — stessa specificità, arrivano dopo —
  e insieme al margin-inline:auto di .wrap la colonna verrebbe RICENTRATA: l'hero
  finirebbe rientrato rispetto all'intestazione e alle sezioni sotto, che restano larghe
  1120. Succedeva davvero, e si vedeva.
  Quindi la larghezza di lettura si mette sui FIGLI: la colonna resta allineata a sinistra
  con tutto il resto e le righe di testo restano corte abbastanza da leggersi.
*/
.hero-inner { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-inner > * { max-width: 46rem; }
.hero h1 { max-width: 18ch; }
.hero .lede { font-size: 1.125rem; }

/* -------------------------------------------------------------- pulsanti */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* 44px e non 48: è l'unico min-height esplicito dell'app (.btn e i campi delle pagine di
     autenticazione). Resta comunque sopra la soglia di WCAG 2.5.5 (AAA), che è 44 px. */
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--color-border-strong); color: var(--color-text); }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-primary-contrast); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-surface); border-color: transparent; }

/* ----------------------------------------------------------------- card */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  /* 12px come .card e .product-card dell'app, non 16: nel design system il raggio grande e'
     riservato ai PANNELLI (.auth-card, .home-search-panel dell'app), ed è per questo che
     .callout qui sotto conserva --radius-lg mentre le card no. */
  border-radius: var(--radius);
}
.card p { color: var(--color-text-muted); font-size: .9375rem; }
.card--link { position: relative; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card--link:hover { border-color: var(--color-border-strong); }
@media (hover: hover) and (pointer: fine) {
  .card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
}
.card--link a::after { content: ''; position: absolute; inset: 0; }
/* Il titolo è già l'intera card cliccabile: sottolinearlo di default farebbe sembrare
   il link una parte della card invece che la card stessa. Torna al passaggio del mouse. */
.card h3 a { text-decoration: none; color: var(--color-text); }
.card--link:hover h3 a { color: var(--color-primary); text-decoration: underline; }
.card-more { margin-top: auto; padding-top: var(--space-2); font-weight: 600; font-size: .9375rem; color: var(--color-primary); }

.card-icon { color: var(--color-primary); }
.section--dark .card { background: transparent; border-color: var(--color-border-dark); }

/* ------------------------------------------------------------- sequenza */
/* I passi sono numerati perché sono davvero un ordine: prima si scansiona, poi si
   confronta, poi si decide dove andare. Dove non c'è una sequenza non si numera. */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { display: flex; flex-direction: column; gap: var(--space-2); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-tint-strong);
  color: var(--color-primary-hover);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
}
.step p { color: var(--color-text-muted); }

/* ----------------------------------------------------------- elenchi */
.list-plain { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.list-plain > li { display: flex; gap: .75rem; align-items: flex-start; }
.list-plain .tick { flex: none; margin-top: .2rem; color: var(--color-primary); }
.section--dark .list-plain .tick { color: var(--color-primary-on-dark); }

.list-bullets { padding-left: 1.15rem; display: flex; flex-direction: column; gap: var(--space-2); }
.list-bullets li { color: var(--color-text-muted); }
.list-bullets li::marker { color: var(--color-primary); }

/* ------------------------------------------------------------- prosa */
.prose { display: flex; flex-direction: column; gap: var(--space-4); }
.prose > * { max-width: 46rem; }
.prose h2 { margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-3); }
.prose p, .prose li { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); }
.prose .note {
  border-left: 3px solid var(--color-primary);
  padding: .25rem 0 .25rem var(--space-3);
  color: var(--color-text-muted);
}

.callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-tint);
  border-radius: var(--radius-lg);
}
.callout p { color: var(--color-text-muted); }

/* ------------------------------------------------------- prezzo, etichette */
.price { color: var(--price-accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.chip--tint { background: var(--color-tint-strong); border-color: transparent; color: var(--color-primary-hover); font-weight: 600; }
.chip--warn { background: #fdf1e3; border-color: transparent; color: var(--color-warn); font-weight: 600; }

/* ---------------------------------------------------------------- form */
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 34rem; }
.field { display: flex; flex-direction: column; gap: .375rem; }
.field label { font-size: .9375rem; font-weight: 500; }
.field .hint { font-size: .8125rem; color: var(--color-text-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  /* 44px e non 48: è l'unico min-height esplicito dell'app (.btn e i campi delle pagine di
     autenticazione). Resta comunque sopra la soglia di WCAG 2.5.5 (AAA), che è 44 px. */
  min-height: 44px;
  padding: .625rem .875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, .18);
}

.field-consent { flex-direction: row; align-items: flex-start; gap: .625rem; }
.field-consent input { width: 20px; min-height: 20px; height: 20px; margin-top: .2rem; flex: none; }
.field-consent label { font-size: .875rem; color: var(--color-text-muted); font-weight: 400; }

/* Il campo trappola: invisibile a chi legge, compilato dai robot. Fuori dal flusso e
   nascosto agli screen reader, così non capita mai a una persona di doverlo saltare. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .9375rem;
}
.form-message--ok { background: #e6f2ed; border-color: #bfe0d2; color: #065f46; }
.form-message--error { background: #fbeceb; border-color: #f2cfcc; color: #8f1d17; }
.field-error { font-size: .8125rem; color: var(--color-danger); font-weight: 500; }

/* --------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
  background: var(--color-surface);
}
.footer-cols { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 800px) { .footer-cols { flex-direction: row; justify-content: space-between; gap: var(--space-6); } }

.footer-brand { display: flex; flex-direction: column; gap: var(--space-2); max-width: 22rem; }
.brand--footer .brand-wordmark { font-size: 1.125rem; }
.footer-tagline { color: var(--color-text-muted); font-size: .9375rem; }

.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
@media (min-width: 640px) { .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-nav h2 { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.footer-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.footer-nav a { color: var(--color-text-muted); text-decoration: none; font-size: .9375rem; }
.footer-nav a:hover { color: var(--color-primary); text-decoration: underline; }

.footer-legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  /* Il credito ODbL non è la cosa più tenue del footer: 0.875rem e il colore del testo
     attenuato, non un grigio più chiaro inventato per farlo sparire. */
  font-size: .875rem;
  color: var(--color-text-muted);
}
.footer-legal a { color: var(--color-text-muted); text-decoration: underline; }
.footer-legal a:hover { color: var(--color-primary); }

.footer-meta { margin-top: var(--space-3); font-size: .8125rem; color: var(--color-text-muted); }

/* -------------------------------------------------------------- utilità */
.center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data th, table.data td { padding: .625rem .75rem; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
table.data th { font-weight: 600; color: var(--color-text); }
table.data td { color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}