/* ============================================================
   SOLARPLAN360 — veste «Istruttoria» (DESIGN-01, lug 2026)
   Il fascicolo istruttorio: carta calda, filetti al posto delle
   ombre, righe di protocollo (eyebrow mono + filetto), timbro di
   verdetto, tratteggio catastale come segno di sezione.
   Sistema completo: docs/design-system/design.md
   ⚠ ZONA CONGELATA più sotto (landing ld-* + funnel fn-*, dal
   blocco `.ld, .fn-overlay` alla sezione Lux): NON toccare — i
   token che le servono sono congelati in uno snapshot locale
   subito prima del blocco.
   ============================================================ */

:root {
  /* — superfici e inchiostri (contrasti AA calcolati: design.md) — */
  --carta: #FEFEFC;            /* fondo pagina, carta (decisione del committente 03/11/2026, era #F6F4EC) */
  --superficie: #FFFFFF;       /* card-atto */
  --superficie-2: #FBFAF3;     /* pannelli secondari, zone examples */
  --inchiostro: #1B241C;       /* testo primario · 15,8:1 su carta */
  --corpo: #46514A;            /* testo corrente · 8,2:1 */
  --sordina: #5D685F;          /* didascalie, eyebrow · 5,8:1 */
  --muto: #68746B;             /* secondario minimo · 4,9:1 su superficie */
  --filetto: #DAD6C6;          /* righe sottili */
  --filetto-tenue: #EAE7D8;    /* separatori interni alle card */
  --filetto-forte: #D9D5C4;    /* filetti di protocollo (03/11/2026, era #B9B49E) */
  --filetto-input: #C9C4B0;    /* bordi dei campi */

  /* — brand (stesso hex di CONFIG.accent in app.js, che a runtime
       riscrive --accent: cambiare l'uno = cambiare l'altro) — */
  --brand: #2E5F27;
  --brand-scuro: #234A1E;
  --brand-velo: rgba(46, 95, 39, .14);
  --brand-tenue: #F5F9F9;      /* = --sp-primary-bg in Chiaro (03/11/2026, era #ECF2E6) */
  --su-brand: #FFFFFF;         /* testo e glifi su fondo brand o semaforo pieno · 7,6:1 su brand */

  /* — semaforo esiti: stesse famiglie dei PDF (verde/ambra/rosso/
       grigio); le loro copie in app.js sono uscite con la schermata
       progetto (ARCH-5a, 30/09/2026).
       `na` percettivamente neutro, mai verde-ish (regola 1). — */
  --pass: #22794A; --pass-bg: #E4F1E7; --pass-bd: #C2DECB;
  --warn: #95580A; --warn-bg: #FCF3E1; --warn-bd: #EAD5A6;
  --fail: #B8402F; --fail-bg: #F9EAE6; --fail-bd: #EBC8BF;
  --na:   #5F6B75; --na-bg:   #F0F2F3; --na-bd:   #D8DDDF;

  /* — tipografia (famiglie self-hosted in vendor/fonts/) — */
  --sans: 'Satoshi', system-ui, sans-serif;
  --mono: 'SP Cifre', 'Clash Display', ui-monospace, 'Cascadia Mono', monospace;

  /* — raggi (scala dichiarata: interni stretti, contenitori morbidi) — */
  --r-xs: 4px;   /* pill mono, swatch */
  --r-s: 6px;    /* bottoni, campi, chip */
  --r-m: 8px;    /* timbro, box interni */
  --r-l: 10px;   /* card-atto */
  --r-xl: 14px;  /* modali */

  /* — rilievo: la carta è piatta, il rilievo è solo dei premibili — */
  --ombra-filo: 0 1px 0 rgba(27, 36, 28, .05);
  --ombra-press: 0 2px 0;              /* + colore bordo dell'elemento */
  --ombra-modale: 0 24px 70px -30px rgba(27, 36, 28, .45);

  /* — motion: due primitive nominate, niente altro — */
  --t-scatto: .12s ease;                        /* feedback fisico */
  --t-posa: .22s cubic-bezier(.2, .8, .3, 1);   /* comparse, pannelli */

}
/* NB: i vecchi nomi token (--accent, --bg, --ink, --line…) NON esistono
   più a livello :root — la zona congelata landing+funnel legge i quattro
   che le servono dallo snapshot locale più sotto. app.js imposta ancora
   --accent a runtime (CONFIG.accent): resta per compatibilità, nessuna
   regola del foglio lo consuma. */

/* Scala dei breakpoint dell'app: 900 · 680 · 560. Le media query non leggono le
   variabili CSS, quindi la scala si documenta qui. 900 = due colonne → una (risultato,
   Progetto) · 680 = topbar e righe di protocollo compatte · 560 = telefono (tabelle di
   fatti a 2 colonne, campi impilati, pannello Lux a filo). Nessun'altra soglia nell'app;
   la zona congelata landing+funnel ha le sue, invariate. */

* { box-sizing: border-box; }
/* `clip` e non `hidden`: preserva position:sticky/fixed sui discendenti
   (topbar, colonna sinistra del risultato, FAB di Lux). Guardia di pagina
   contro lo scorrimento orizzontale ai 320px. */
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  min-height: 100vh;
  background: var(--carta);
  font-family: var(--sans);
  color: var(--inchiostro);
  -webkit-font-smoothing: antialiased;
}

@keyframes idoSpin { to { transform: rotate(360deg); } }

button { font-family: inherit; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-velo);
}
::placeholder { color: var(--sordina); opacity: 1; }

/* focus tastiera visibile su ogni interattivo dell'app e del
   back-office (la zona congelata ha la sua regola, invariata) */
#app :is(button, a, [role="link"], [role="button"], select, summary, input[type="radio"], input[type="checkbox"]):focus-visible,
#lux-root :is(button, a, textarea):focus-visible,
.bo :is(button, a, select, input, textarea):focus-visible {
  outline: 2px solid var(--brand);   /* 7,5:1 su carta (LEG-01); il velo resta l'alone dei campi */
  outline-offset: 2px;
}
/* zona congelata: la landing (con la sua modale legale) sta dentro #app e la
   regola sopra la raggiunge per specificità; tiene l'anello di sempre, pixel
   invariati. Il funnel (.ld ~ .fn-overlay) dal 15/10/2026 ha l'anello brand
   anche sui campi di testo (LND-04): 6,1:1 sull'alone, 7,5:1 sul bianco
   della modale; il velo di input:focus resta l'alone; offset e raggio
   vengono dalla sua regola. La
   modale upsell (fn-overlay senza .ld) e la visura (.imp-modal dal ciclo P2,
   LEG-15) prendono l'anello nuovo. */
#app .ld :is(button, a, [role="link"], [role="button"], select, summary, input[type="radio"], input[type="checkbox"]):focus-visible {
  outline: 3px solid var(--brand-velo);
}
#app .ld ~ .fn-overlay :focus-visible { outline: 2px solid var(--brand); }
/* Lux: la × sta su fondo brand, dove un anello brand sparirebbe */
#lux-root .lux-head :focus-visible { outline-color: var(--su-brand); }

/* reduced-motion: l'app si ferma (la landing ha già la sua variante) */
@media (prefers-reduced-motion: reduce) {
  #app *, #lux-root * { animation: none !important; transition: none !important; }
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------- header: intestazione di fascicolo ----------------
   Filetto DOPPIO sotto (riga d'inchiostro + filetto forte staccato):
   è la prima riga di protocollo della pagina. */
.topbar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 18px;
  padding: 12px 28px;
  background: rgba(254, 254, 252, .92);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--inchiostro);
  box-shadow: 0 3px 0 -2px var(--filetto-forte);
}
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--sans); font-weight: 900; font-size: 17px; letter-spacing: -0.01em; }
.brand-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--sordina); text-transform: uppercase; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-norm { font-family: var(--mono); font-size: 12px; color: var(--sordina); }
/* sotto i 900px la citazione normativa lascia spazio alle azioni, come il gemello
   .sp-hnorm di Layout.tsx (a 12 px la testata andava a capo tra 716 e 805 px, LEG-25);
   il sottotitolo del marchio stringe il tracking per restare su una riga con i bottoni
   fino a 340 px e senza riga vuota sulla schermata Account fino a 350 px */
@media (max-width: 900px) { .topbar-norm { display: none; } }
@media (max-width: 680px) { .brand-sub { letter-spacing: 0.08em; } }
@media (max-width: 380px) { .brand-sub { letter-spacing: 0.02em; } }

.btn-ghost {
  font-weight: 700; font-size: 13px; color: var(--inchiostro);
  background: var(--superficie); border: 1px solid var(--filetto-forte);
  border-radius: var(--r-s); padding: 8px 14px; cursor: pointer;
  box-shadow: var(--ombra-press) var(--filetto);
  transition: transform var(--t-scatto), box-shadow var(--t-scatto), border-color var(--t-scatto);
}
.btn-ghost:hover { border-color: var(--inchiostro); }
.btn-ghost:active { transform: scale(.96); }

/* ---------------- home: apertura del fascicolo ---------------- */
.home-main { max-width: 1120px; margin: 0 auto; padding: 54px 28px 80px; }

.home-h1 {
  font-family: var(--sans); font-weight: 900;
  font-size: clamp(36px, 4.8vw, 56px); line-height: 1.02;
  letter-spacing: -0.025em; margin: 0 0 20px; text-wrap: balance;
}
.home-lede { font-size: 17px; line-height: 1.6; color: var(--corpo); max-width: 46ch; margin: 0 0 28px; text-wrap: pretty; }
.home-lede strong { color: var(--inchiostro); }

/* la scheda-modulo: card-atto con cornice interna da modulo cartaceo */
.form-card {
  background: var(--superficie); border: 1px solid var(--filetto-forte); border-radius: var(--r-l);
  padding: 8px; box-shadow: var(--ombra-filo);
}
.form-inner { padding: 24px 24px 0; }
.tab {
  font-weight: 700; font-size: 14px; padding: 11px 4px; margin-right: 20px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--sordina); cursor: pointer;
  transition: color var(--t-scatto), border-color var(--t-scatto);
}
.tab:hover { color: var(--inchiostro); }

/* etichette dei campi in voce di protocollo (stessa voce di fn-label
   nel funnel congelato: parentela dichiarata; fn-label resta a 10,5 px, LEG-25) */
.field-label {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sordina);
  margin-bottom: 7px;
}
.field {
  width: 100%; padding: 13px 14px; border: 1px solid var(--filetto-input);
  border-radius: var(--r-s); font-size: 16px; font-family: inherit;
  background: var(--superficie); color: var(--inchiostro); margin-bottom: 16px;
  transition: border-color var(--t-scatto), box-shadow var(--t-scatto);
}
.field.mono { font-family: var(--mono); margin-bottom: 0; }
.field-hint { font-size: 13px; color: var(--sordina); margin: 0 0 4px; line-height: 1.5; }

.btn-primary {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: 15.5px; color: var(--su-brand);
  border: 1px solid var(--brand-scuro); border-radius: var(--r-s); padding: 13px; cursor: pointer;
  margin-bottom: 6px; background: var(--brand);
  flex: 2; min-width: 160px;
  box-shadow: var(--ombra-press) var(--brand-scuro);
  transition: transform var(--t-scatto), box-shadow var(--t-scatto), background var(--t-scatto);
}
.btn-primary svg { margin-right: 4px; }
.btn-primary:hover { background: var(--brand-scuro); }
.btn-primary:active { transform: scale(.96); }

/* annotazioni a margine del fascicolo: filetto verticale di stato */
.error-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--fail-bg); border: 1px solid var(--fail-bd); border-left: 3px solid var(--fail);
  border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--fail);
}
/* LEG-17: glifi SVG di app.js (icon()) al posto delle emoji, nel colore del testo; nel banner allineati alla prima riga */
.ico { flex: none; vertical-align: -3px; }
.error-banner > .ico { margin-top: 2px; }

.home-disclaimer { margin: 40px auto 0; max-width: 680px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--sordina); }

/* ---------------- analisi: istruttoria in corso ---------------- */
.analyzing-main { max-width: 560px; margin: 0 auto; padding: 80px 28px; text-align: center; }
.spinner-wrap { width: 72px; height: 72px; margin: 0 auto 28px; position: relative; }
.spinner-wrap svg { animation: idoSpin 1s linear infinite; }

/* card-atto: superficie su carta, filetto, rilievo quasi nullo */
.card { background: var(--superficie); border: 1px solid var(--filetto); border-radius: var(--r-l); box-shadow: var(--ombra-filo); }
.wms-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--corpo); cursor: pointer; white-space: nowrap; }
.wms-toggle input { accent-color: var(--brand); }
.btn-secondary {
  flex: 1; min-width: 120px; font-weight: 700; font-size: 14.5px; color: var(--inchiostro);
  background: var(--superficie); border: 1px solid var(--filetto-forte); border-radius: var(--r-s);
  padding: 12px 14px; cursor: pointer;
  box-shadow: var(--ombra-press) var(--filetto);
  transition: transform var(--t-scatto), box-shadow var(--t-scatto), border-color var(--t-scatto);
}
.btn-secondary:hover { border-color: var(--inchiostro); }
.btn-secondary:active { transform: scale(.96); }
.btn-secondary:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }

.btn-primary:disabled { opacity: 0.6; cursor: progress; box-shadow: none; transform: none; }

/* ---------------- onboarding (Fase 0 Solar Plan 360) ----------------
   Apertura della pratica: stesso linguaggio del fascicolo, consensi
   come spunte apposte a mano. */
.ob-main { max-width: 640px; }
.ob-card { margin-top: 8px; }
.ob-h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 12px; }
.ob-note { text-align: left; max-width: none; margin-top: 16px; }
.field-err { border-color: var(--fail) !important; background: var(--fail-bg); }
.field-err-msg { color: var(--fail); font-size: 14px; margin: -8px 0 14px; }
.ob-cf { text-transform: uppercase; }
/* accesso con codice (AUTH-01): le sei cifre, ben spaziate */
.ob-code { font-size: 22px; letter-spacing: 0.4em; text-align: center; }
/* avviso di sessione scaduta: in linea nella scheda Account, in basso sulla landing */
.ob-needs-login { margin-top: 0; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--filetto-forte); border-radius: var(--r-m); background: var(--superficie); color: var(--inchiostro); font-size: 14px; }
.ob-needs-login-float { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 6px 22px rgba(27, 36, 28, .22); border-radius: var(--r-m); }
.ob-needs-login-float .ob-needs-login { margin: 0; }
.btn-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; cursor: pointer; }
/* riga di protocollo delle sezioni onboarding (stesso segno di .report-h3) */
.ob-section { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin: 22px 0 10px; }
.ob-section::after { content: ''; flex: 1; border-top: 1px solid var(--filetto-forte); }
.docs-box { border: 1px solid var(--filetto); border-radius: var(--r-m); overflow: hidden; }
.doc-item + .doc-item { border-top: 1px solid var(--filetto-tenue); }
.doc-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; background: var(--superficie); border: none; cursor: pointer; text-align: left; }
.doc-row:hover .doc-label { color: var(--brand); }
.doc-arrow { color: var(--warn); font-weight: 700; }
.doc-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--inchiostro); }
.doc-chevron { color: var(--sordina); }
.doc-text { max-height: 240px; overflow: auto; padding: 12px 14px; background: var(--superficie-2); border-top: 1px solid var(--filetto-tenue); font-size: 12px; line-height: 1.55; color: var(--corpo); white-space: pre-wrap; }
.ob-check { display: flex; gap: 11px; width: 100%; text-align: left; padding: 12px 13px; margin-bottom: 10px; background: var(--superficie); border: 1.5px solid var(--filetto); border-radius: var(--r-m); cursor: pointer; transition: border-color var(--t-scatto), background var(--t-scatto); }
.ob-check:hover { border-color: var(--filetto-forte); }
.ob-check.on { border-color: var(--warn); background: var(--warn-bg); }
.ob-box { flex: none; width: 26px; height: 26px; border-radius: var(--r-xs); border: 1.5px solid var(--filetto-input); background: var(--superficie); display: flex; align-items: center; justify-content: center; color: var(--su-brand); font-weight: 800; }
.ob-check.on .ob-box { background: var(--warn); border-color: var(--warn); }
.ob-check-txt { display: flex; flex-direction: column; gap: 3px; }
.ob-check-main { font-size: 14px; line-height: 1.4; color: var(--inchiostro); }
.ob-check-note { font-size: 12px; line-height: 1.4; color: var(--sordina); font-style: italic; }
select.field { appearance: auto; -webkit-appearance: auto; background: var(--superficie); cursor: pointer; }

/* ---------------- stampa ---------------- */
@media print {
  body { background: #fff; }
  .topbar { display: none !important; }
}
.imp-modal {
  position: fixed; inset: 0; background: rgba(27, 36, 28, .42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  z-index: 1300; /* X-07: sopra Lux (.lux-fab e .lux-panel 1200), sotto .fn-overlay (2000) */
}
.imp-modal-card {
  background: var(--superficie); border: 1px solid var(--filetto-forte); border-radius: var(--r-xl); padding: 22px; max-width: 540px; width: 100%;
  max-height: 84vh; overflow: auto; box-shadow: var(--ombra-modale);
}
/* wrap: sotto i 375 px i due bottoni (120 + 160 px minimi) vanno a capo invece di uscire dalla card (WCAG 1.4.10) */
.imp-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* LEG-15: modale visura nella voce dell'app (testata, titolo, testo, errore, nota) al posto delle classi fn-* del funnel */
.imp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.imp-modal-label { font-size: 12px; letter-spacing: .04em; color: var(--sordina); }
.imp-modal-x {
  flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--filetto); border-radius: var(--r-s); background: var(--superficie);
  color: var(--inchiostro); font-size: 20px; line-height: 1; cursor: pointer;
}
.imp-modal-x:hover { border-color: var(--inchiostro); }
.imp-modal-title { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin: 14px 0 10px; color: var(--inchiostro); }
.imp-modal-text { font-size: 14px; line-height: 1.55; color: var(--corpo); margin: 0 0 16px; }
.imp-modal-err { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--fail); }
.imp-modal-note { font-size: 12px; color: var(--sordina); text-align: center; margin: 12px 0 0; }
/* Nascosto alla vista, presente per lo screen reader e la tastiera (gemello di .sp-sr-only di packages/ds) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* LEG-26: input file nascosto dietro un bottone in italiano, col nome del file accanto; il bottone mostra il fuoco dell'input */
.vis-file { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.vis-file .btn-secondary { flex: none; }
.vis-file-nome { font-size: 13px; color: var(--sordina); overflow-wrap: anywhere; }
.btn-secondary:has(> .sr-only:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Pacchetti a card (bill-plan*): i crediti visura del modale ── */
.bill-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bill-plan {
  border: 1px solid var(--filetto); border-radius: var(--r-m); padding: 16px;
  background: var(--superficie); display: flex; flex-direction: column; gap: 4px;
}
.bill-plan-name { font-weight: 700; font-size: 15px; }
.bill-plan-cap { font-size: 12px; color: var(--sordina); }
.bill-plan-price { font-size: 22px; font-weight: 900; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bill-plan-per { font-size: 12px; font-weight: 500; color: var(--sordina); margin-left: 2px; }
/* Presentazione decoy: il pacchetto consigliato evidenziato "Più scelto" (badge coerente con la landing). */
.bill-plan-hot { border-color: var(--brand); box-shadow: 0 6px 18px -12px rgba(46, 95, 39, .5); position: relative; }
.bill-plan-tag {
  position: absolute; top: -10px; left: 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-xs);
  color: var(--su-brand); background: var(--brand);
}
/* LEG-13: il bottone della card non si allunga con la card più alta della riga */
.bill-plan > :is(.btn-primary, .btn-secondary) { flex: none; width: 100%; }

/* ── SNAPSHOT token per la ZONA CONGELATA (DESIGN-01 §2.1) ──
   La landing e il funnel usano quattro token storici dell'app
   (--line, --line-soft, --line-input, --accent-ring). Qui sono
   CONGELATI ai valori precedenti l'overhaul (tranne --line-input,
   LND-04), così la resa di landing+funnel resta identica al pixel
   qualunque cosa succeda ai token :root. NON rimuovere, NON "unificare". */
.ld, .fn-overlay {
  --line: #dde5df;
  --line-soft: #eaf0ea;
  /* LND-04 (15/10/2026, WCAG 1.4.11): bordo dei campi e delle card di scelta
     del funnel, tinta di --sp-faint; 3,15:1 su --sp-bg, 3,34:1 su bianco
     (era #d2ddd4, 1,32-1,40:1) */
  --line-input: #829088;
  --accent-ring: rgba(46, 95, 39, .14);
}

/* ════════════════════════════════════════════════════════════
   LANDING (ld-*) + FUNNEL (fn-*) — vista marketing (landing.js)
   Porting fedele del design di riferimento Higgsfield (sito-web/app):
   token sp-* (carta #f7f9f7, inchiostro #16231c, verde brand
   armonizzato col LOGO VETTORIALE #254b20→#74a558, CTA ambra
   #b45309), nav trasparente su hero scuro full-screen, card di
   esito, piani con toggle, FAQ accordion, CTA finale, footer.
   ════════════════════════════════════════════════════════════ */
/* il funnel (.fn-overlay) è un FRATELLO di .ld nel DOM: i token vanno
   dichiarati su entrambi, o le custom property non lo raggiungono */
.ld, .fn-overlay {
  --sp-bg: #f7f9f7; --sp-surface: #ffffff; --sp-ink: #16231c;
  --sp-body: #43554b; --sp-faint: #5f7166; --sp-line: #dde5df;   /* faint scurito dal riferimento (#67796e): AA 4,5:1 anche su --sp-bg */
  --sp-green: #2e5f27; --sp-green-deep: #1c3f17; --sp-green-soft: #eaf2e5;
  --sp-amber: #b45309; --sp-amber-hover: #92400e; --sp-amber-soft: #fef3e2;
  --sp-ok: #15803d; --sp-warn: #b45309; --sp-bad: #b91c1c;
  --sp-gold: #d69a17;
}
.ld {
  background: var(--sp-bg); color: var(--sp-ink);
  font-family: 'Satoshi', system-ui, sans-serif;
}
.fn-overlay { font-family: 'Satoshi', system-ui, sans-serif; color: var(--sp-ink); }
.ld a { color: inherit; }
.ld-centro { text-align: center; }
.ld-skip {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--sp-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
  font-weight: 700; text-decoration: none;
}
.ld-skip:focus { left: 0; }

/* ── hero full-screen scuro (nav trasparente sopra) ── */
.ld-hero {
  position: relative; display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(1000px 640px at 82% 10%, rgba(214, 154, 23, .17), transparent 62%),
    radial-gradient(860px 600px at 6% 94%, rgba(88, 130, 63, .30), transparent 62%),
    linear-gradient(180deg, #0d2012 0%, #143621 56%, #1d4527 100%);
}
.ld-hero::before {
  /* trama catastale sottile, dissolta verso il basso */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 78%);
}
/* video hero full-bleed (asset self-hosted in vendor/media) + velo scuro per
   il contrasto AA del testo; il poster è il background del layer, così su
   mobile/reduced-motion (video rimosso in bindLanding) resta l'immagine */
.ld-hero-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: url('vendor/media/hero-poster.jpg') center / cover no-repeat; }
.ld-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-hero-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 20, 12, .60) 0%, rgba(9, 20, 12, .70) 55%, rgba(12, 30, 17, .84) 100%); }
.ld-audio {
  position: absolute; right: 20px; bottom: 20px; z-index: 20;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 22, 13, .55); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .14s ease, border-color .14s ease;
}
.ld-audio:hover { background: rgba(10, 22, 13, .78); border-color: rgba(255, 255, 255, .6); }
.ld-audio span { display: inline-flex; }
.ld-audio[aria-pressed="true"] .ld-audio-off { display: none; }
.ld-audio[aria-pressed="false"] .ld-audio-on { display: none; }
/* pausa del video (D6, 14/10/2026, WCAG 2.2.2): gemello di .ld-audio, nascosto con lui dalle due @media sotto;
   a 120px dal bordo perché il FAB di Lux (fisso, right 22px, ~84px) copre l'angolo a primo schermo */
.ld-pausa { right: 120px; }
.ld-pausa[data-paused="true"] .ld-ico-pausa, .ld-pausa[data-paused="false"] .ld-ico-play { display: none; }
@media (max-width: 767px) { .ld-hero-video, .ld-audio { display: none; } }
@media (prefers-reduced-motion: reduce) { .ld-hero-video, .ld-audio { display: none; } }

/* Nav a filo di pagina, non incolonnata nel container: il marchio sta sul
   margine come l'intestazione di un fascicolo, non al centro di una barra
   SaaS. Insieme alla voce mono delle sezioni e al filetto che stacca le
   azioni, è ciò che distingue questa testata dalla forma
   [wordmark | 4 link | bottone] che ha qualunque landing generata. */
.ld-nav { position: absolute; inset: 0 0 auto 0; z-index: 30; }
.ld-nav-inner {
  max-width: none; margin: 0; height: 84px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.ld-brand { display: inline-flex; align-items: center; }
/* lockup orizzontale = unica immagine; l'altezza è per contesto, larghezza auto */
.ld-logo-lockup { display: block; width: auto; }
.ld-nav .ld-logo-lockup { height: 42px; }
.ld-footer .ld-logo-lockup { height: 34px; }
.ld-nav-links { display: flex; gap: 30px; }
/* voce di protocollo (stessa del sistema «Istruttoria»): le sezioni sono
   voci di indice, non link di menu */
/* LND-10 (16/10/2026): etichette di landing e funnel a 12 px (erano 10-11,5). Sul mono il tracking cala quanto basta
   a tenere la larghezza: IBM Plex Mono avanza 0,6em, (0,6 + .14em) × 11 px ≈ (0,6 + .08em) × 12 px (conto fatto su Plex: dal
   20/10/2026 le lettere del mono sono Clash Display, proporzionale, e la larghezza non è più quella del conto) */
.ld-nav-links a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  /* .9 e non .85: il mono a 12px (11 fino al 16/10/2026) è più piccolo del
     sans a 14px che c'era prima, e sul video dell'hero serve più stacco */
  color: rgba(255, 255, 255, .9); text-decoration: none;
  white-space: nowrap; transition: color .14s ease;
}
.ld-nav-links a:hover { color: #fff; }
.ld-nav-right { display: flex; align-items: center; gap: 14px; }
/* filetto: stacca le azioni dall'indice, come la riga di protocollo stacca
   il titolo di sezione dal corpo */
.ld-nav-right::before {
  content: ''; flex: none; width: 1px; height: 22px;
  background: rgba(255, 255, 255, .28);
}
@media (max-width: 880px) { .ld-nav-right::before { display: none; } }
.ld-nav-app {
  height: 38px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, .32);
  color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600;
  transition: border-color .14s ease, background .14s ease;
}
.ld-nav-app:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
.ld-nav-cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  white-space: nowrap;   /* a 320px «Verifica il terreno» andava a due righe */
  border-radius: 8px; background: var(--sp-amber); color: #fff !important;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: background .14s ease;
}
.ld-nav-cta:hover { background: var(--sp-amber-hover); }

.ld-hero-inner {
  position: relative; z-index: 10; flex: 1;
  max-width: 1120px; width: 100%; margin: 0 auto; padding: 128px 28px 72px;
  display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center;
}
.ld-h1 {
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; font-weight: 900;   /* ADR 0096: il Black dichiarato (800 non esiste in Satoshi) */
  letter-spacing: -0.02em; margin: 0; max-width: 17ch; color: #fff; text-wrap: balance;
}
.ld-lede {
  font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .85);
  font-weight: 500; max-width: 52ch; margin: 20px 0 0; text-wrap: pretty;
}
.ld-verifica { margin-top: 30px; max-width: 560px; scroll-margin-top: 96px; }
.ld-free { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .78); margin: 14px 0 0; }
.ld-micro { font-size: 12.5px; color: rgba(255, 255, 255, .55); font-weight: 500; margin: 6px 0 0; max-width: 52ch; }

/* teaser (campo civetta): UN campo + CTA ambra — vive su fondi scuri
   (hero e banda verde), quindi label chiara e input bianco */
.ld-teaser-label {
  display: block; font-size: 13.5px; font-weight: 600;
  color: rgba(255, 255, 255, .9); margin-bottom: 7px;
}
.ld-teaser-row { display: flex; gap: 10px; }
.ld-teaser-input {
  flex: 1; min-width: 0; height: 50px; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px; padding: 0 16px; font-family: inherit; font-size: 15.5px;
  font-weight: 600; color: var(--sp-ink); background: rgba(255, 255, 255, .96);
}
/* `.ld a { color: inherit }` (sopra, specificità 0,1,1) vinceva su `.ld-cta`
   (0,1,0): le CTA <button> restavano bianche, la CTA finale — l'unica <a> —
   ereditava l'inchiostro e usciva a 3,24:1 su ambra (sotto AA). Il selettore
   di pari specificità riporta il bianco a tutte: 5,02:1. */
.ld-cta, .ld a.ld-cta {
  border: none; height: 50px; padding: 0 22px; border-radius: 10px; cursor: pointer; flex: none;
  white-space: nowrap;   /* sotto i 375px «Verifica il terreno» andava a due righe */
  background: var(--sp-amber); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
  transition: background .14s ease, transform .14s ease;
}
.ld-cta:hover { background: var(--sp-amber-hover); transform: translateY(-1px); }
.ld-teaser-err { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #fecaca; }

/* ── scheda di esito (mockup fedele del motore) ── */
.ld-card {
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 16px;
  overflow: hidden; box-shadow: 0 10px 40px -18px rgba(22, 35, 28, .25);
}
.ld-card-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--sp-line); background: var(--sp-bg);
}
.ld-card-luogo { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ld-card-pin { color: var(--sp-green); display: inline-flex; margin-top: 2px; }
.ld-card-ref { font-size: 14px; font-weight: 700; color: var(--sp-ink); margin: 0; }
/* LND-08 (16/10/2026, leggibilità): i testi di scheda e card salgono a 12 px
   (erano 10-11,5); text-wrap: pretty evita la parola orfana a 360 px */
.ld-card-sub { font-size: 12px; color: var(--sp-faint); margin: 2px 0 0; text-wrap: pretty; }
.ld-verdetto {
  display: inline-flex; align-items: center; text-align: center;
  border-radius: 100px; border: 1px solid; padding: 6px 13px;
  font-size: 12px; font-weight: 700; line-height: 1.25; max-width: 230px;
}
.ld-verdetto-ok { background: var(--sp-green-soft); color: var(--sp-green); border-color: rgba(21, 128, 61, .25); }   /* verde brand: AA su green-soft (--sp-ok non passa) */
.ld-verdetto-warn { background: var(--sp-amber-soft); color: var(--sp-warn); border-color: rgba(180, 83, 9, .25); }
.ld-verdetto-bad { background: #fef2f2; color: var(--sp-bad); border-color: rgba(185, 28, 28, .25); }
.ld-card-righe { list-style: none; margin: 0; padding: 0; }
.ld-riga, .ld-check { display: flex; align-items: flex-start; gap: 11px; padding: 12px 20px; }
.ld-riga + .ld-riga, .ld-check + .ld-check { border-top: 1px solid var(--line-soft); }
.ld-riga-segno {
  flex: none; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ld-riga-segno.ld-st-ok { background: var(--sp-green-soft); color: var(--sp-ok); }
.ld-riga-segno.ld-st-warn { background: var(--sp-amber-soft); color: var(--sp-warn); }
.ld-riga-segno.ld-st-bad { background: #fef2f2; color: var(--sp-bad); }
.ld-riga-testo { min-width: 0; flex: 1; }
.ld-riga-label { font-size: 13.5px; font-weight: 600; color: var(--sp-ink); margin: 0; }
.ld-riga-fonte { font-size: 12px; letter-spacing: .02em; color: var(--sp-faint); margin: 3px 0 0; text-transform: uppercase; }
.ld-riga-esito { flex: none; font-size: 13px; font-weight: 700; margin-top: 2px; }
.ld-riga-esito.ld-st-ok { color: var(--sp-body); }
.ld-riga-esito.ld-st-warn { color: var(--sp-warn); }
.ld-riga-esito.ld-st-bad { color: var(--sp-bad); }
.ld-card-piede {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 11px 20px; border-top: 1px solid var(--sp-line); background: var(--sp-bg);
  font-size: 12px; color: var(--sp-faint); text-wrap: pretty;   /* LND-08 */
}
.ld-card-pdf { display: inline-flex; align-items: center; gap: 6px; }

/* ── la scheda ANIMATA dell'hero (firma) ── */
.ld-scheda { box-shadow: 0 34px 70px -30px rgba(5, 15, 8, .6); }
.ld-scheda-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
}
/* LND-08: a 12 px la spaziatura scende da .16em a .1em, o a 1440 px
   l'eyebrow non starebbe più su una riga accanto al riferimento */
.ld-scheda-eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-faint); }
.ld-scheda-ref { font-size: 12px; font-weight: 500; color: var(--sp-green); white-space: nowrap; }
.ld-mappa { position: relative; height: 236px; background: linear-gradient(165deg, #AEC993, #8FB179 60%, #7FA56E); }
.ld-mappa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-mappa-legenda {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .92); padding: 6px 11px; border-radius: 100px;
  font-size: 12px; font-weight: 600; color: var(--sp-ink);
}
.ld-mappa-legenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ld-checks { padding: 2px 0; }
.ld-check { padding: 9px 18px; }
.ld-scheda-esito {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px 15px; border-top: 1px solid var(--line-soft);
}
.ld-timbro {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sp-green-soft); border: 1.5px solid rgba(21, 128, 61, .3); color: var(--sp-green);
  font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
  padding: 8px 14px; border-radius: 10px; transform: rotate(-2deg);
}
/* LND-08: 12 px (era 10) senza spaziatura e su righe bilanciate, così a 360 px
   il timbro resta su due righe; gli a capo vietati sono &nbsp; in landing.js */
.ld-scheda-nota { font-size: 12px; color: var(--sp-faint); text-align: right; text-wrap: balance; }

/* animazione istruttoria: gli stati "nascosti" vivono SOLO dentro
   no-preference → con reduced-motion la scheda è statica e completa.
   LND-06: render() ricrea l'hero a ogni cambio di stato; ogni ritardo è
   arretrato di --ld-t (secondi dal primo disegno della landing, da app.js),
   così la sequenza suona una volta: riprende dov'era e, finita, resta ferma */
@media (prefers-reduced-motion: no-preference) {
  .ld-anim-parcel { fill: rgba(74, 168, 191, .28); fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ldDraw .9s ease calc(.45s - var(--ld-t, 0s)) forwards, ldFill .5s ease calc(1.35s - var(--ld-t, 0s)) forwards; }
  .ld-anim-vincolo, .ld-anim-ref { opacity: 0; animation: ldIn .5s ease forwards; }
  .ld-anim-vincolo { animation-delay: calc(1.15s - var(--ld-t, 0s)); }
  .ld-anim-ref { animation-delay: calc(1.6s - var(--ld-t, 0s)); }
  .ld-check { opacity: 0; transform: translateY(8px); animation: ldRiga .45s ease forwards; animation-delay: calc(1.85s + var(--i) * .22s - var(--ld-t, 0s)); }
  .ld-timbro { opacity: 0; transform: scale(1.45) rotate(-7deg); animation: ldStamp .4s cubic-bezier(.2, 1.4, .4, 1) calc(2.95s - var(--ld-t, 0s)) forwards; }
  .ld-hero-testo, .ld-hero-scheda { animation: ldIn .55s ease calc(0s - var(--ld-t, 0s)) both; }
  .ld-hero-scheda { animation-delay: calc(.12s - var(--ld-t, 0s)); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-anim-parcel { fill: rgba(74, 168, 191, .28); }
}
@keyframes ldDraw { to { stroke-dashoffset: 0; } }
@keyframes ldFill { to { fill-opacity: 1; } }
@keyframes ldIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ldRiga { to { opacity: 1; transform: none; } }
@keyframes ldStamp { to { opacity: 1; transform: scale(1) rotate(-2deg); } }

/* ── sezioni ── */
.ld-sez { padding: 88px 28px; scroll-margin-top: 64px; }   /* = scroll-mt-16 del riferimento (16 × 0.25rem) */
.ld-sez-inner { max-width: 1120px; margin: 0 auto; }
.ld-sez-alt { background: var(--sp-surface); border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.ld-h2 {
  font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.12; margin: 0; max-width: 26ch; text-wrap: balance; color: var(--sp-ink);
}
.ld-centro .ld-h2 { margin-left: auto; margin-right: auto; }
.ld-sotto {
  font-size: 16px; line-height: 1.6; color: var(--sp-body); font-weight: 500;
  max-width: 46ch; margin: 14px 0 0; text-wrap: pretty;   /* LND-08: 46ch di Satoshi ≈ 75 caratteri per riga (62ch ne dava 93-102) */
}
.ld-sotto-centro { margin-left: auto; margin-right: auto; }

/* come funziona: passi + scheda */
.ld-cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 48px; }
.ld-cf-passi { display: flex; flex-direction: column; gap: 32px; }
.ld-step { display: flex; gap: 16px; }
.ld-step-icona {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--sp-green-soft); color: var(--sp-green);
  display: inline-flex; align-items: center; justify-content: center;
}
.ld-step-titolo { font-size: 16px; font-weight: 700; margin: 0; color: var(--sp-ink); }
.ld-step-testo { font-size: 14px; line-height: 1.6; color: var(--sp-body); margin: 6px 0 0; }

/* esempi reali */
.ld-esempi { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 48px; }

/* funzionalità (14 card) — campate ASIMMETRICHE su 6 colonne: le due voci
   di apertura occupano mezza riga ciascuna, le altre un terzo. Rompe la
   griglia a tre colonne uguali con icona-sopra-titolo, che è la forma che
   ogni landing generata condivide. L'icona sta INLINE col titolo (la card
   apre con una riga leggibile, non con un quadrato colorato). */
.ld-funz-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 20px; margin-top: 48px; }
.ld-funz {
  grid-column: span 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 13px; align-items: center; align-content: start;
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 16px;
  padding: 22px; box-shadow: 0 6px 24px -16px rgba(22, 35, 28, .18);
}
/* le due di apertura: campata doppia e più aria (altezze volutamente diverse) */
.ld-funz:nth-child(-n+2) { grid-column: span 3; padding: 26px 28px; }
.ld-funz-icona {
  grid-row: 1; width: 38px; height: 38px; border-radius: 10px;
  background: var(--sp-green-soft); color: var(--sp-green);
  display: inline-flex; align-items: center; justify-content: center;
}
.ld-funz-titolo { grid-row: 1; font-size: 15.5px; font-weight: 700; margin: 0; color: var(--sp-ink); }
.ld-funz-testo { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.6; color: var(--sp-body); margin: 13px 0 0; }

/* banda di verifica SOPRA i piani (dichiara il limite delle 3 analisi) */
.ld-banda {
  position: relative; overflow: hidden; border-radius: 22px; text-align: center;
  background: var(--sp-green-deep);   /* ADR 0096: tinta piena come la CTA finale (era gradiente con alone dorato) */
  padding: 48px 40px 52px; margin: 40px auto 0; max-width: 980px;
}
.ld-banda-h2 { color: #fff; margin-left: auto; margin-right: auto; }
.ld-banda-sotto { font-size: 15.5px; color: rgba(255, 255, 255, .82); font-weight: 500; margin: 12px auto 0; max-width: 52ch; }
.ld-banda .ld-teaser { max-width: 560px; margin: 26px auto 0; }

/* piani: toggle cadenza + 3 card da /billing-config */
.ld-cad { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 42px 0 0; }
.ld-cad-btn {
  border: none; cursor: pointer; background: transparent; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 100px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--sp-body);
  transition: background .14s ease, color .14s ease;
}
.ld-cad-btn:hover { color: var(--sp-ink); }
.ld-cad-on { background: var(--sp-green); color: #fff; }
.ld-cad-on:hover { color: #fff; }
.ld-cad-badge { font-size: 12px; font-weight: 500; color: var(--sp-amber); }   /* ADR 0096: testo, non pill */
.ld-cad-on .ld-cad-badge { color: #fff; }
.ld-piani { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 36px auto 0; max-width: 1000px; }
.ld-piano {
  position: relative; display: flex; flex-direction: column;
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 16px;
  padding: 28px; box-shadow: 0 8px 30px -18px rgba(22, 35, 28, .2);
}
.ld-piano-hot { border-color: var(--sp-green); box-shadow: 0 16px 50px -20px rgba(22, 35, 28, .3); }   /* ADR 0096: ombra neutra */
/* Deroga 13/08/2026 (committente): rilievo della card "Più scelto" — solo
   quando la griglia è a 3 colonne (sotto 1020px le card sono impilate). */
@media (min-width: 1021px) { .ld-piano-hot { transform: translateY(-12px); } }
/* ADR 0096: riga di protocollo in testa alla card (era una pill a cavallo del bordo) */
.ld-piano-badge {
  display: block; margin: 0 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sp-green);
}
.ld-piano-nome { font-size: 17px; font-weight: 700; margin: 0; color: var(--sp-ink); }
.ld-piano-cap { font-size: 13px; color: var(--sp-faint); margin: 4px 0 0; }
.ld-piano-prezzo { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.ld-piano-prezzo span { font-size: 14px; font-weight: 600; color: var(--sp-faint); margin-left: 3px; }
.ld-piano-fatt { font-size: 12.5px; color: var(--sp-faint); margin: 5px 0 0; }
.ld-piano-fatt b { color: var(--sp-green); }
.ld-piano-punti { list-style: none; margin: 20px 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ld-piano-punti li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--sp-body); }
.ld-tick {
  flex: none; width: 18px; height: 18px; border-radius: 6px; margin-top: 1px;
  background: var(--sp-green-soft); color: var(--sp-green);
  display: inline-flex; align-items: center; justify-content: center;
}
.ld-piano-nota { font-size: 12.5px; color: var(--sp-faint); margin: 16px 0 0; }
.ld-piano-cta {
  margin-top: 18px; height: 44px; border-radius: 10px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--sp-ink);
  background: var(--sp-surface); border: 1px solid var(--sp-line);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.ld-piano-cta:hover { border-color: rgba(46, 95, 39, .4); }
.ld-piano-cta-hot { background: var(--sp-amber); border-color: var(--sp-amber); color: #fff; }
.ld-piano-cta-hot:hover { background: var(--sp-amber-hover); border-color: var(--sp-amber-hover); }
.ld-piani-nota { font-size: 12px; color: var(--sp-faint); margin: 24px auto 0; max-width: 46ch; text-align: center; }   /* LND-08: ≈ 75 caratteri per riga (80ch ne dava 127) */
/* Due famiglie di piani (particelle / funzionalità) nella vetrina landing. */
.ld-piani-gruppo { font-size: 18px; font-weight: 700; color: var(--sp-ink); text-align: center; margin: 32px 0 0; }   /* ADR 0096: titolo, non maiuscoletto */
.ld-piani-gruppo + .ld-sotto { text-align: center; }   /* ADR 0096: il sottotitolo segue il titolo centrato (andava a sinistra a capo) */
.ld-piano-promo { font-size: 12.5px; font-weight: 700; color: var(--sp-green); margin: 12px 0 0; }
.ld-piani-feat { grid-template-columns: repeat(4, 1fr); max-width: 1120px; }
.ld-piano-feat { padding: 22px; }
.ld-piano-soon { opacity: .9; background: #fafbf9; }
/* LND-08 (WCAG 1.4.3): con l'opacità .9 della card il --sp-faint scende a 4,08:1;
   il --sp-body risale a 5,8:1 su prezzo annuale, «/mese» e nota */
.ld-piano-soon .ld-piano-fatt, .ld-piano-soon .ld-piano-prezzo span, .ld-piano-soon .ld-piano-nota { color: var(--sp-body); }
/* LND-11 (16/10/2026, WCAG 1.4.3): il grigio #6b7280 sotto l'opacità .9 della card dava 3,96:1 al bianco;
   --sp-body, il grigio verde della landing, dà 6,1:1 */
.ld-piano-badge-soon { color: var(--sp-body); }
.ld-piano-cta-soon { cursor: not-allowed; opacity: .7; }
.ld-piano-cta-soon:hover { border-color: var(--sp-line); }
.ld-soon-banner { max-width: 900px; margin: 20px auto 0; padding: 12px 16px; border-radius: 12px; background: var(--sp-bg); border: 1px solid var(--sp-line); color: var(--sp-body); font-size: 13px; text-align: center; }   /* ADR 0096: neutri della landing (era grigio-azzurro fuori palette) */
@media (max-width: 900px) { .ld-piani-feat { grid-template-columns: 1fr; max-width: 460px; } }

/* Servizi a consumo · visure catastali (add-on, fuori dagli abbonamenti) */
.ld-serv-eyebrow { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--sp-green); margin-bottom: 14px; }   /* ADR 0096: riga di protocollo, non pill */
.ld-serv-pack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin: 36px auto 0; }
.ld-serv-card { position: relative; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 16px; padding: 24px 20px; text-align: center; }
.ld-serv-card-hot { border-color: var(--sp-green); box-shadow: 0 0 0 1px var(--sp-green); }
.ld-serv-badge { display: block; margin: 0 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-green); white-space: nowrap; }   /* ADR 0096: come .ld-piano-badge */
.ld-serv-nome { font-size: 17px; font-weight: 700; color: var(--sp-ink); margin: 0; }
.ld-serv-desc { font-size: 13px; color: var(--sp-faint); margin: 5px 0 0; min-height: 34px; }
.ld-serv-prezzo { font-size: 30px; font-weight: 700; color: var(--sp-ink); margin: 12px 0 0; }
.ld-serv-meta { font-size: 12px; color: var(--sp-faint); margin: 6px 0 0; line-height: 1.5; }
.ld-serv-nota-credito { text-align: center; font-size: 13px; color: var(--sp-body); margin: 18px auto 0; max-width: 680px; }
.ld-serv-extra { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 860px; margin: 16px auto 0; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 14px; padding: 18px 24px; }
.ld-serv-extra-nome { font-size: 16px; font-weight: 700; color: var(--sp-ink); margin: 0; }
.ld-serv-extra-desc { font-size: 13px; color: var(--sp-faint); margin: 3px 0 0; }
.ld-serv-extra-prezzo { font-size: 24px; font-weight: 700; color: var(--sp-ink); white-space: nowrap; }
.ld-serv-extra-prezzo span { font-size: 13px; font-weight: 500; color: var(--sp-faint); }
@media (max-width: 560px) { .ld-serv-extra { flex-direction: column; align-items: flex-start; gap: 8px; } }
.ld-serv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 860px; margin: 40px auto 0; }
.ld-serv-step { display: flex; gap: 14px; align-items: flex-start; }
.ld-serv-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--sp-green-soft); color: var(--sp-green); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.ld-serv-step-t { font-size: 15px; font-weight: 700; color: var(--sp-ink); margin: 3px 0 0; line-height: 1.3; }
.ld-serv-step-p { font-size: 13.5px; line-height: 1.55; color: var(--sp-body); margin: 5px 0 0; }
.ld-serv-avviso { display: flex; gap: 12px; align-items: flex-start; width: fit-content; max-width: 860px; margin: 36px auto 0; background: var(--sp-amber-soft); border: 1px solid rgba(180, 83, 9, .2); border-radius: 12px; padding: 14px 18px; }   /* LND-08: il riquadro si stringe sulla nota a 44ch, niente metà vuota */
.ld-serv-avviso-ic { color: var(--sp-amber); display: inline-flex; margin-top: 1px; flex: 0 0 auto; }
.ld-serv-avviso p { font-size: 13.5px; line-height: 1.55; color: var(--sp-amber-hover); margin: 0; max-width: 44ch; }   /* LND-08: ≤ 75 caratteri per riga (erano 131) */
@media (max-width: 1020px) { .ld-serv-pack, .ld-serv-steps { grid-template-columns: 1fr; max-width: 460px; } .ld-serv-extra, .ld-serv-avviso { max-width: 460px; } }

/* FAQ accordion */
.ld-faq {
  max-width: 760px; margin: 40px auto 0;
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 16px;
}
.ld-faq-item + .ld-faq-item { border-top: 1px solid var(--sp-line); }
.ld-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
  padding: 18px 22px; font-size: 15px; font-weight: 700; color: var(--sp-ink);
}
.ld-faq-chev { color: var(--sp-faint); display: inline-flex; transition: transform .18s ease; }
.ld-faq-chev-on { transform: rotate(180deg); }
.ld-faq-a { padding: 0 22px 18px; margin: 0; font-size: 14px; line-height: 1.65; color: var(--sp-body); max-width: calc(46ch + 44px); }   /* LND-08: 46ch di testo (≈ 75 caratteri, erano 116) più i 22 px di padding per lato */
.ld-faq-a-rich > p { margin: 0 0 10px; }
.ld-faq-a-rich > p:last-child { margin-bottom: 0; }
.ld-faq-a-rich strong { color: var(--sp-ink); font-weight: 700; }
.ld-faq-list { margin: 4px 0 0; padding-left: 20px; list-style: disc; }
.ld-faq-list li { margin: 0 0 8px; }
.ld-faq-list li:last-child { margin-bottom: 0; }
.ld-faq-list-vantaggi li { margin-bottom: 12px; }
.ld-faq-list-vantaggi strong { display: inline-block; margin-bottom: 2px; }

/* CTA finale su verde scuro */
.ld-cta-fin { background: var(--sp-green-deep); padding: 72px 28px; text-align: center; }
.ld-cta-fin-h2 { color: #fff; margin: 0 auto; }
.ld-cta-fin-sotto { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); margin: 12px auto 0; max-width: 56ch; }
.ld-cta-fin-btn { margin-top: 28px; text-decoration: none; }

/* footer */
.ld-footer { background: var(--sp-surface); border-top: 1px solid var(--sp-line); }
.ld-footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 48px 28px 40px;
  display: flex; justify-content: space-between; gap: 46px; flex-wrap: wrap;
}
.ld-footer-brand { max-width: 380px; }
.ld-footer-brand p { font-size: 13.5px; line-height: 1.6; color: var(--sp-body); font-weight: 500; margin: 14px 0 0; }
/* Chiusura, non sitemap: le destinazioni stanno su una riga sola in voce di
   protocollo. Le due colonne di link + coda del copyright erano la forma del
   footer SaaS generico; qui il footer chiude il documento. Effetto collaterale
   voluto: il flex-wrap non ha una larghezza minima, quindi sotto i 364px non
   sfora più (era la causa dello scorrimento orizzontale a 320). */
.ld-footer-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.ld-footer-nav a, .ld-footer-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sp-faint); font-weight: 500; text-decoration: none; white-space: nowrap;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.ld-footer-nav a:hover, .ld-footer-link:hover { color: var(--sp-ink); }
.ld-footer-base {
  max-width: 1120px; margin: 0 auto; padding: 18px 28px 22px;
  border-top: 1px solid var(--sp-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--sp-faint); font-weight: 500;
}
.ld-footer-base .mono { font-size: 12px; letter-spacing: 0; }

/* ── FUNNEL (modal multi-step) ── */
.fn-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(22, 35, 28, .55);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  overflow: auto;
}
.fn-modal {
  background: var(--sp-surface); border-radius: 18px; width: 100%; max-width: 620px;
  padding: 26px 30px 30px; box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  max-height: calc(100vh - 44px); overflow: auto;
}
/* LND-09: render() ricrea overlay e modale a ogni passo; il ritardo arretrato di --fn-t (secondi dall'apertura, da
   fnOverlayClock in app.js) li fa entrare una volta: un ridisegno dopo l'entrata nasce fermo */
@media (prefers-reduced-motion: no-preference) {
  .fn-overlay { animation: ldIn .2s ease calc(0s - var(--fn-t, 0s)); }
  .fn-modal { animation: fnSu .3s cubic-bezier(.2, .9, .3, 1) calc(0s - var(--fn-t, 0s)); }
}
@keyframes fnSu { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
.fn-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fn-conferma { font-size: 12px; letter-spacing: .04em; color: var(--sp-body); }
.fn-conferma b { color: var(--sp-ink); }
.fn-conferma-tick { color: var(--sp-ok); font-weight: 700; }
.fn-chiudi {
  border: none; background: var(--line-soft); color: var(--sp-body); cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px; font-size: 20px; line-height: 1; flex: none;
}
.fn-chiudi:hover { background: var(--line); }
.fn-progress { display: flex; gap: 6px; margin: 16px 0 8px; }
.fn-seg { flex: 1; height: 5px; border-radius: 4px; background: var(--sp-line); transition: background .25s ease; }
.fn-seg-on { background: var(--sp-green); }
.fn-passo { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-faint); margin: 0 0 6px; }
.fn-titolo { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--sp-ink); }
.fn-sotto { font-size: 14.5px; line-height: 1.55; color: var(--sp-body); font-weight: 500; margin: 0 0 18px; }
.fn-riga { display: flex; gap: 14px; }
.fn-campo { flex: 1; }
.fn-label { display: block; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--sp-faint); margin-bottom: 7px; }
.fn-input {
  width: 100%; height: 50px; border: 1px solid var(--line-input); border-radius: 10px;
  padding: 0 15px; font-size: 16.5px; font-weight: 600; color: var(--sp-ink); background: var(--sp-bg);
  font-family: inherit;
}
.fn-input.mono { font-family: var(--mono); }
.fn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fn-card {
  border: 1.5px solid var(--line-input); background: var(--sp-surface); border-radius: 14px; cursor: pointer;   /* 3:1 (LND-04) */
  padding: 18px 14px; text-align: left; display: flex; flex-direction: column; gap: 8px;
  font-family: inherit; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.fn-card:hover { border-color: var(--sp-green); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 35, 28, .1); }
.fn-card-on { border-color: var(--sp-green); background: var(--sp-green-soft); box-shadow: 0 0 0 3px var(--accent-ring); }
.fn-card-icona { color: var(--sp-green); }
.fn-card-titolo { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--sp-ink); }
.fn-card-testo { font-size: 12px; color: var(--sp-body); font-weight: 500; line-height: 1.4; }
.fn-avanti {
  margin-top: 20px; width: 100%; border: none; cursor: pointer;
  height: 50px; border-radius: 11px; background: var(--sp-amber); color: #fff;
  font-family: inherit; font-size: 15.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 16px rgba(22, 35, 28, .16);   /* ADR 0096: ombra neutra (era arancio) */
  transition: background .14s ease, transform .14s ease;
}
.fn-avanti:hover { background: var(--sp-amber-hover); transform: translateY(-1px); }
.fn-avanti:disabled { opacity: .6; cursor: default; transform: none; }
.fn-link {
  display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--sp-green);
}
.fn-link:hover { text-decoration: underline; }
.fn-link-inline { display: inline; margin: 0; padding: 0; font-size: inherit; text-decoration: underline; }
.fn-indietro {
  margin-top: 16px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--sp-faint);
}
.fn-indietro:hover { color: var(--sp-ink); }
.fn-err { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--sp-bad); }
.fn-consenso { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; }
.fn-consenso input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--sp-green); flex: none; }
.fn-consenso span { font-size: 13px; line-height: 1.5; color: var(--sp-body); font-weight: 500; }
.fn-privacy {
  margin-top: 12px; max-height: 180px; overflow: auto; white-space: pre-wrap;
  background: var(--sp-bg); border: 1px solid var(--sp-line); border-radius: 12px;
  padding: 14px; font-size: 12px; line-height: 1.55; color: var(--sp-body);
}
/* LND-08: 12 px (era 10); text-wrap: pretty non spezza «l'e-mail» a 390 px
   e non lascia «scheda.» da sola a 1440 */
.fn-nota { font-size: 12px; letter-spacing: .06em; color: var(--sp-faint); text-align: center; margin: 12px 0 0; text-wrap: pretty; }

/* focus visibile (tastiera) su landing e funnel */
.ld :focus-visible, .fn-overlay :focus-visible {
  outline: 3px solid var(--accent-ring); outline-offset: 2px; border-radius: 8px;
}
.ld-hero :focus-visible { outline-color: rgba(255, 255, 255, .55); }

/* ── responsive ── */
@media (max-width: 1020px) {
  .ld-hero-inner { grid-template-columns: 1fr; gap: 44px; padding-top: 112px; }
  .ld-hero-scheda { max-width: 560px; }
  .ld-cf-grid { grid-template-columns: 1fr; gap: 36px; }
  .ld-esempi { grid-template-columns: 1fr; }
  /* 4 colonne: le card normali stanno a due per riga, le due di apertura
     tengono la riga intera — l'asimmetria sopravvive al tablet */
  .ld-funz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ld-funz:nth-child(-n+2) { grid-column: span 4; }
  .ld-piani { grid-template-columns: 1fr; max-width: 460px; }
  .ld-piano-badge[aria-hidden="true"] { display: none; }   /* ADR 0096: card impilate, nessun nome da allineare */
}
/* il menu ("Funzionalità Premium" è lungo) si nasconde prima delle azioni:
   sotto 880px resta brand + Apri l'app + CTA, le voci restano nel footer */
@media (max-width: 880px) {
  .ld-nav-links { display: none; }
}
@media (max-width: 760px) {
  .ld-nav-links { display: none; }
  .ld-nav-app { display: none; }
  .ld-nav .ld-logo-lockup { height: 32px; }   /* lockup più basso: sta accanto alla CTA senza overflow */
  .ld-sez { padding: 64px 20px; }
  .ld-hero-inner { padding-left: 20px; padding-right: 20px; }
  .ld-teaser-row { flex-direction: column; }
  .ld-teaser-input { flex: none; }   /* ADR 0096: in colonna `flex: 1` (base 0) schiacciava il campo a 22 px; torna a 50 */
  .ld-cta { justify-content: center; }
  .ld-funz-grid { grid-template-columns: 1fr; }
  .ld-funz, .ld-funz:nth-child(-n+2) { grid-column: auto; padding: 20px; }
  .ld-banda { padding: 36px 22px 40px; }
  .fn-cards { grid-template-columns: 1fr; }
  .fn-modal { padding: 22px 20px 24px; }
  .fn-riga { flex-direction: column; gap: 10px; }
  .ld-footer-inner { padding: 40px 20px 32px; }
  .ld-footer-base { padding: 16px 20px 20px; }
}
@media (max-width: 480px) {
  /* la scheda animata resta leggibile: via l'eyebrow decorativo (l'aria-label
     della scheda descrive già tutto), il riferimento catastale resta */
  .ld-scheda-eyebrow { display: none; }
}
/* X-08 (WCAG 1.4.10): a 320 px la CTA della testata usciva di 19 px, tagliata
   dall'hero. Sotto i 420 px la testata prende il margine di 20 px del contenuto
   e, solo se ancora non basta, il lockup cede larghezza (proporzioni intatte) */
@media (max-width: 420px) {
  .ld-nav-inner { padding: 0 20px; gap: 12px; }
  .ld-nav .ld-brand { min-width: 0; }
  .ld-nav .ld-logo-lockup { max-width: 100%; object-fit: contain; object-position: left center; }
}

/* ════════════════ LUX-01 — assistente virtuale «Lux» ════════════════
   DOM proprio (#lux-root, fuori da #app): il render distruttivo della SPA
   non lo tocca. Dal DESIGN-01 la palette è UNIFICATA al sistema
   «Istruttoria» (il vecchio teal #1E5748 fuori famiglia è rimosso):
   Lux è l'assistente del fascicolo, non un widget di terze parti. */
.lux-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1200;
  display: flex; align-items: center; gap: 8px;
  background: var(--brand); color: var(--su-brand); border: 1px solid var(--brand-scuro); cursor: pointer;
  border-radius: 999px; padding: 13px 18px; font-size: 17px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(20, 30, 22, 0.28);   /* ADR 0096: ombra neutra (era verde), come il lancio React */
  transition: transform var(--t-scatto), box-shadow var(--t-scatto), background var(--t-scatto);
}
.lux-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 30, 22, 0.34); }
.lux-fab-label { font-size: 14px; letter-spacing: 0.02em; }
.lux-fab-open { background: var(--brand-scuro); }

/* invito sempre raggiungibile: stessa frase del fumetto, all'hover o col Tab.
   aria-hidden nel markup — l'aria-label del bottone la annuncia già una volta. */
.lux-fab-tip {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: max-content; max-width: 232px;
  background: var(--superficie); color: var(--inchiostro); text-align: left;
  border: 1px solid var(--filetto-forte); border-radius: var(--r-l); border-bottom-right-radius: var(--r-xs);
  padding: 10px 13px; font-size: 13px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 14px 34px rgba(27, 36, 28, 0.18);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lux-fab:hover .lux-fab-tip,
.lux-fab:focus-visible .lux-fab-tip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lux-fab-tip { transition: none; } }

/* fumetto-invito del launcher: cliccarlo apre la chat, la × lo chiude;
   la scelta persiste (localStorage) e aprire la chat vale come "visto".
   LEG-28: render() ricrea il fumetto; il ritardo arretrato di --lux-t (da luxRender) riprende l'entrata dov'era */
.lux-teaser { position: fixed; right: 22px; bottom: 86px; z-index: 1199; max-width: 252px; animation: lux-teaser-in 0.3s ease calc(0s - var(--lux-t, 0s)); }
/* X-07: un modale aperto dopo il fumetto lo nasconde (il modale è il compito) */
body:has([aria-modal='true']) .lux-teaser { display: none; }
.lux-teaser-msg {
  display: block; background: var(--superficie); color: var(--inchiostro); text-align: left; cursor: pointer;
  border: 1px solid var(--filetto-forte); border-radius: var(--r-l); border-bottom-right-radius: var(--r-xs);
  padding: 11px 14px; font: inherit; font-size: 14px; line-height: 1.45;
  box-shadow: 0 14px 34px rgba(27, 36, 28, 0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lux-teaser-msg:hover { border-color: var(--brand); box-shadow: 0 16px 38px rgba(27, 36, 28, 0.24); }
.lux-teaser-x {
  position: absolute; top: -9px; left: -9px; width: 24px; height: 24px; /* LEG-18: 24 px (WCAG 2.5.8; era 22) */
  border-radius: 999px; border: 1px solid var(--filetto-forte); background: var(--superficie); color: var(--sordina);
  font-size: 13px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 10px rgba(27, 36, 28, 0.12);
}
.lux-teaser-x:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
@keyframes lux-teaser-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lux-teaser { animation: none; } }

.lux-panel {
  position: fixed; right: 22px; bottom: 84px; z-index: 1200;
  width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--filetto-forte); border-radius: var(--r-xl);
  box-shadow: var(--ombra-modale);
}
.lux-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; background: var(--brand); color: var(--su-brand);
  border-bottom: 1px solid var(--brand-scuro);
}
.lux-title { font-weight: 700; font-size: 16px; margin-right: 8px; }
.lux-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
/* LEG-18: bersaglio di 32 px (WCAG 2.5.8; era 22) */
.lux-x {
  background: none; border: none; color: var(--su-brand); font-size: 22px; cursor: pointer; line-height: 1; padding: 0;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-s);
}

.lux-msgs { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: var(--carta); }
.lux-hint { color: var(--sordina); font-size: 13px; line-height: 1.5; padding: 10px 6px; }
.lux-msg { display: flex; flex-direction: column; max-width: 88%; }
.lux-user { align-self: flex-end; align-items: flex-end; }
.lux-bot { align-self: flex-start; align-items: flex-start; }
.lux-bubble {
  padding: 9px 12px; border-radius: var(--r-l); font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.lux-user .lux-bubble { background: var(--brand); color: var(--su-brand); border-bottom-right-radius: var(--r-xs); }
.lux-bot .lux-bubble { background: var(--superficie); color: var(--inchiostro); border: 1px solid var(--filetto); border-bottom-left-radius: var(--r-xs); }
.lux-service .lux-bubble { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--corpo); }
.lux-guard { margin-top: 6px; font-size: 12px; color: var(--warn); border-top: 1px dashed var(--warn-bd); padding-top: 5px; }
.lux-fonti { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lux-fonte { font-family: var(--mono); font-size: 12px; color: var(--brand); background: var(--brand-tenue); border: 1px solid var(--pass-bd); border-radius: var(--r-xs); padding: 2px 8px; }
.lux-toolnote { align-self: flex-start; font-size: 12px; color: var(--sordina); }   /* ADR 0096: niente corsivo, icona clock come il gemello React */

/* card di conferma L3: proposta d'atto — chiede firma prima di agire */
.lux-confirm { background: var(--superficie); border: 1.5px solid var(--filetto-forte); border-left: 3px solid var(--warn); border-radius: var(--r-m); padding: 12px; }
.lux-confirm-q { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.lux-confirm-args { font-family: var(--mono); font-size: 12px; color: var(--sordina); word-break: break-all; margin-bottom: 9px; }
.lux-confirm-btns { display: flex; gap: 8px; }
.lux-confirm-btns .btn-primary, .lux-confirm-btns .btn-secondary { padding: 8px 12px; font-size: 13px; margin-bottom: 0; }

.lux-nocredits { background: var(--superficie); border: 1px solid var(--fail-bd); border-left: 3px solid var(--fail); border-radius: var(--r-m); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.lux-err { color: var(--fail); font-size: 14px; padding: 4px 2px; }

.lux-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--filetto); background: var(--superficie); }
.lux-input {
  flex: 1; resize: none; border: 1px solid var(--filetto-input); border-radius: var(--r-s);
  padding: 9px 11px; font: inherit; font-size: 16px; max-height: 92px; background: var(--superficie);
}
.lux-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-velo); }
.lux-send { background: var(--brand); color: var(--su-brand); border: 1px solid var(--brand-scuro); border-radius: var(--r-s); width: 42px; cursor: pointer; font-size: 15px; box-shadow: var(--ombra-press) var(--brand-scuro); transition: transform var(--t-scatto), box-shadow var(--t-scatto); }
.lux-send:active { transform: scale(.96); }
.lux-send:disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; }
.lux-empty { padding: 22px 18px; font-size: 14px; line-height: 1.55; color: var(--corpo); display: flex; flex-direction: column; gap: 10px; }
.lux-empty .btn-primary { margin-bottom: 0; }
.lux-footer { font-family: var(--mono); font-size: 12px; color: var(--sordina); padding: 7px 14px 10px; background: var(--superficie); border-top: 1px solid var(--filetto-tenue); }

@media (max-width: 560px) {
  .lux-panel { right: 8px; left: 8px; width: auto; bottom: 78px; height: min(560px, calc(100vh - 96px)); }
  .lux-fab { right: 14px; bottom: 14px; }
  .lux-teaser { right: 14px; bottom: 74px; max-width: min(252px, calc(100vw - 28px)); }
}

/* ── Recesso del consumatore (rc-*): qualifica dell'acquirente e avviso di rinnovo (il blocco Recesso è nelle Impostazioni React) ── */
.rc-buyer { border: 1px solid var(--filetto); border-radius: var(--r-m); padding: 10px 12px; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--corpo); }
.rc-legend { font-weight: 700; padding: 0 4px; }
.rc-scelta { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.rc-consenso { flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; cursor: pointer; }
.rc-consenso input { margin-top: 3px; flex: none; }
.rc-rinnovo { font-size: 12px; line-height: 1.45; color: var(--sordina); margin: 6px 0 0; }
.rc-errore { color: var(--fail); }
@media (prefers-reduced-motion: reduce) { .btn-ghost:active, .btn-primary:active, .btn-secondary:active, .lux-send:active { transform: none; } }