/* =============================================================
   FABLE PUBLIC — public.css
   Revisione visuale complessiva (FRONTEND-PUBLIC-VISUAL-REFINEMENT-002)
   precedentemente FRONTEND-PUBLIC-SITE-DRAFT-001.
   ---------------------------------------------------------------
   Consuma le custom property --fbl-* definite in
   shared/design-system/fable-tokens.css (MAI modificato qui) più un
   set di token aggiuntivi --pub-* definiti in questo stesso file,
   usati SOLO dal sito pubblico. Nessuna variabile o classe "v2" è
   usata o sovrascritta: questo foglio resta isolato dal Fable
   Protocol Lab (frontend_v2/), invariato.

   DIREZIONE PALETTE: il sito resta 75-85% chiaro. Il navy resta
   riservato a testo, icone, bordi forti, piccoli pannelli tecnici
   circoscritti ed elementi del diagramma — MAI una grande sezione
   piena a tutta larghezza.

   LAYOUT: sezioni full-bleed (sfondo bordo a bordo), contenuto
   racchiuso in due container fluidi (.fbl-container / --wide).
   Nessuna larghezza fissa non responsive: tutte le misure chiave
   (contenitori, tipografia, spaziature) usano clamp().

   Tutte le classi introdotte usano il prefisso ".fbl-".
   Breakpoint (letterali, le custom property non sono valutabili
   dentro @media): 375/560/768/900/1024/1220/1440/1920px.
   ============================================================= */

:root {
  /* -- superfici chiare aggiuntive (solo Public) -- */
  --pub-bg: #ffffff;
  --pub-bg-alt: #f6f8fc;
  --pub-tint-blue: #eaf2ff;
  --pub-tint-mint: #eafbf6;
  --pub-line: #e2e8f2;
  --pub-line-strong: #c7d2e3;
  --pub-footer-bg: #eef2f8;
  --pub-footer-border: #dbe4f0;

  /* -- pannelli tecnici piccoli e circoscritti (unico uso ammesso del navy pieno) -- */
  --pub-panel-navy-bg: #0e1826;
  --pub-panel-navy-border: rgba(232, 238, 246, 0.14);

  /* -- gradiente delicato blu -> mint, mai a piena opacita' -- */
  --pub-gradient-soft: linear-gradient(135deg, var(--pub-tint-blue) 0%, var(--pub-tint-mint) 100%);
  --pub-gradient-soft-reverse: linear-gradient(315deg, var(--pub-tint-mint) 0%, var(--pub-tint-blue) 100%);

  /* -- relazione/accento del diagramma su sfondo chiaro: blu, non mint
        (il mint su bianco fallisce il contrasto minimo, vedi
        FABLE_DESIGN_SYSTEM_FOUNDATIONS.md §8) -- */
  --pub-diagram-relation: var(--fbl-s-interactive-on-light);

  /* -- pattern geometrico sottile (linee/punti), sempre a bassissima
        opacita': texture, mai un elemento decorativo dominante -- */
  --pub-pattern-dots: radial-gradient(circle at 1px 1px, rgba(29, 78, 216, 0.08) 1px, transparent 0);
  --pub-pattern-size: 28px 28px;

  /* -- contenitori: standard e wide, entrambi full-bleed a livello di
        sezione, con padding orizzontale fluido -- */
  --pub-container-std: 1440px;
  --pub-container-wide: 1600px;
  --pub-container-pad: clamp(20px, 4vw, 56px);

  /* -- scala tipografica fluida (clamp): sostituisce le taglie fisse
        del design system generico dove il mandato richiede leggibilita'
        e presenza maggiori sul sito pubblico.
        FRONTEND-PUBLIC-HOME-SYNTHESIS-006 Fase 2: ridotti solo i valori
        massimi (terzo argomento di clamp), di 1-2px, per alleggerire la
        resa a 1440/1920px senza toccare i minimi mobile ne' la
        gerarchia. Nessun valore gia' <=16px e' stato ridotto. -- */
  --pub-fs-hero-display: clamp(2.25rem, 1.15rem + 3.6vw, 4.375rem);  /* home:  ~36-70px (era 72px) */
  --pub-fs-hero-page: clamp(2rem, 1.3rem + 2.4vw, 3.375rem);         /* pagine interne: ~32-54px (era 56px) */
  --pub-fs-h2: clamp(1.75rem, 1.25rem + 1.7vw, 2.875rem);            /* ~28-46px (era 48px) */
  --pub-fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.375rem);             /* ~19-22px (era 24px) */
  --pub-fs-card-title: clamp(1.1rem, 1.02rem + 0.3vw, 1.2rem);       /* ~18-19px (era 21px) */
  --pub-fs-body-lg: clamp(1rem, 0.94rem + 0.24vw, 1.125rem);         /* ~16-18px (era 19px) */
  --pub-fs-eyebrow: 0.8125rem;                                      /* 13px, non piu' 12 */

  /* -- ombre multilivello (profondita', non glow) -- */
  --pub-shadow-sm: 0 1px 2px rgba(16, 21, 31, 0.05);
  --pub-shadow-md: 0 1px 2px rgba(16, 21, 31, 0.04), 0 10px 24px rgba(16, 21, 31, 0.07);
  --pub-shadow-lg: 0 2px 4px rgba(16, 21, 31, 0.05), 0 20px 44px rgba(16, 21, 31, 0.10);

  /* -- CTA primaria: mint del marchio, testo navy (FRONTEND-PUBLIC-ART-DIRECTION-PILOT-003,
        correzione globale A). Sostituisce il bianco-su-blu, poco nitido su schermi ad alta densita'. -- */
  --pub-cta-mint: #6dc6b3;
  --pub-cta-mint-hover: #57b39f;
  --pub-cta-text: #07111f;

  /* -- superfici aggiuntive per varieta' (correzioni su superfici e colore) -- */
  --pub-tint-dust: #eef3fb;      /* azzurro polvere */
  --pub-tint-mint-soft: #f1faf7; /* mint desaturato */
  --pub-pattern-lines: repeating-linear-gradient(115deg, rgba(13, 58, 128, 0.05) 0px, rgba(13, 58, 128, 0.05) 1px, transparent 1px, transparent 14px);

  /* -- alias per il sistema di tema chiaro/scuro (public-theme.css):
     valori identici a quanto gia' in uso, zero cambiamento visivo qui.
     L'override per il tema scuro vive solo in public-theme.css. -- */
  --pub-text-primary: var(--fbl-s-text-primary-light);
  --pub-text-secondary: var(--fbl-s-text-secondary-light);
  --pub-text-muted: var(--fbl-s-text-muted-light);
  --pub-scrim-rgb: 7, 17, 31;       /* famiglia rgba(7,17,31,*) degli scrim fotografici */
  --pub-scrim-rgb-alt: 8, 22, 39;   /* famiglia rgba(8,22,39,*), sezioni distinte: non unificare */
  --pub-wash-rgb: 244, 249, 252;    /* velo chiaro che sfuma le hero fotografiche verso il lato testo (app-hero, lab-hero, tech-hero-photo, how-tools-photo, how-journey-section) */
  --pub-header-surface-rgb: 255, 255, 255; /* base della navbar translucida */
  --pub-header-pill-rgb: 248, 250, 252;    /* base dei gruppi "pillola" della navbar Floating Contrast */
  --pub-glass-rgb: 255, 255, 255;          /* superfici "vetro" (es. .fbl-lab-explore .fbl-lab-capability) */

  /* -- badge di stato: alias dedicati cosi' la variante scura puo'
     essere verificata singolarmente (correzione #6), non dedotta da un
     redirect automatico dei token -light. -- */
  --pub-badge-success-bg: var(--fbl-s-success-bg-light);
  --pub-badge-success-text: var(--fbl-s-success-text-on-light);
  --pub-badge-success-border: var(--fbl-s-success-border-light);
  --pub-badge-warning-bg: var(--fbl-s-warning-bg-light);
  --pub-badge-warning-text: var(--fbl-s-warning-text-on-light);
  --pub-badge-warning-border: var(--fbl-s-warning-border-light);
  --pub-badge-pilot-border: #cfe0fb;
  --pub-badge-documented-text: #414c5c;
  --pub-badge-research-text: #1f6e5c;
  --pub-badge-research-border: #cdeee2;

  /* -- testo per superfici SEMPRE chiare (card "vetro" letterali che
     non usano --pub-bg/--pub-glass-rgb, quindi restano bianche anche
     in tema scuro: card fluttuanti sopra sfondi fotografici scuri
     gia' esistenti). Valore fisso, identico nei due temi: non va
     ridefinito in public-theme.css. -- */
  --pub-on-light-primary: var(--fbl-s-text-primary-light);
  --pub-on-light-secondary: var(--fbl-s-text-secondary-light);
  --pub-on-light-muted: var(--fbl-s-text-muted-light);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font: var(--fbl-s-type-body);
  font-size: var(--pub-fs-body-lg);
  background: var(--pub-bg);
  color: var(--fbl-public-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--fbl-p-font-display); margin: 0 0 var(--fbl-s-inset-sm); line-height: 1.2; }
p { margin: 0 0 var(--fbl-s-inset-md); }
a { color: var(--fbl-public-interactive); }
img, svg { max-width: 100%; display: block; }

/* --- contenitori full-bleed: usati da header/hero/section/footer --- */
.fbl-container, .fbl-section__inner, .fbl-header__bar, .fbl-footer__grid, .fbl-footer__legal, .fbl-footer__intro {
  max-width: var(--pub-container-std);
  margin: 0 auto;
  padding-inline: var(--pub-container-pad);
}
.fbl-container--wide, .fbl-section__inner--wide { max-width: var(--pub-container-wide); }

/* --- accessibilita': skip link --- */
.fbl-skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--pub-bg);
  color: var(--pub-text-primary);
  padding: 10px 16px;
  border-radius: var(--fbl-s-radius-control);
  border: 1px solid var(--pub-line-strong);
  z-index: var(--fbl-s-z-toast);
  transition: top var(--fbl-s-motion-control);
}
.fbl-skip-link:focus { top: 8px; box-shadow: var(--fbl-s-focus-ring-light); }

:focus-visible { outline: none; box-shadow: var(--fbl-s-focus-ring-light); border-radius: var(--fbl-s-radius-control); }
.fbl-panel--navy :focus-visible { box-shadow: var(--fbl-s-focus-ring-dark); }

/* =============================================================
   HEADER / NAVBAR — sticky, una sola riga su desktop, passa al
   menu mobile PRIMA che la navigazione vada a capo (mai wrapping).
   ============================================================= */
.fbl-header {
  background: rgba(var(--pub-header-surface-rgb), 0.86);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--pub-line);
  position: sticky;
  top: 0;
  z-index: var(--fbl-s-z-header);
}
@supports not (backdrop-filter: blur(1px)) {
  .fbl-header { background: var(--pub-bg); } /* niente traslucenza se non supportata: leggibilita' sempre garantita */
}
.fbl-header__bar {
  padding-block: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  flex-wrap: nowrap;
}
.fbl-brand { display: flex; align-items: center; gap: var(--fbl-p-space-2); text-decoration: none; color: inherit; flex-shrink: 0; }
.fbl-brand__mark { height: 28px; width: auto; }
.fbl-brand__wordmark { font-family: var(--fbl-p-font-display); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }

.fbl-nav { flex: 1; display: flex; justify-content: center; min-width: 0; position: relative; }
.fbl-nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--fbl-s-radius-control);
  padding: 8px 14px;
  font-family: var(--fbl-p-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.fbl-nav-toggle:hover { background: var(--pub-bg-alt); }
.fbl-nav-toggle__bars, .fbl-nav-toggle__bars::before, .fbl-nav-toggle__bars::after {
  content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.fbl-nav-toggle__bars::before { transform: translateY(-5px); }
.fbl-nav-toggle__bars::after { transform: translateY(3px); }
.fbl-nav-toggle[aria-expanded="true"] .fbl-nav-toggle__bars { background: transparent; }
.fbl-nav-toggle[aria-expanded="true"] .fbl-nav-toggle__bars::before { transform: translateY(0) rotate(45deg); }
.fbl-nav-toggle[aria-expanded="true"] .fbl-nav-toggle__bars::after { transform: translateY(0) rotate(-45deg); }

.fbl-nav__list {
  list-style: none; display: flex; flex-wrap: nowrap; white-space: nowrap;
  gap: clamp(10px, 1.4vw, 26px); margin: 0; padding: 0; align-items: center;
}
.fbl-nav__link {
  text-decoration: none; color: var(--pub-text-secondary); font-size: 0.95rem; font-weight: 600;
  padding: 8px 2px; min-height: 44px; display: inline-flex; align-items: center; position: relative;
  transition: color 150ms ease;
}
.fbl-nav__link::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 2px; background: var(--fbl-public-interactive);
  transform: scaleX(0); transform-origin: left; transition: transform 200ms ease;
}
.fbl-nav__link:hover { color: var(--fbl-public-interactive); }
.fbl-nav__link:hover::after, .fbl-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.fbl-nav__link[aria-current="page"] { color: var(--fbl-public-interactive); }

.fbl-header__cta { flex-shrink: 0; display: flex; gap: 10px; align-items: center; }

/* =============================================================
   NAVBAR TRASPARENTE (FRONTEND-PUBLIC-CONTROLS-AND-FINAL-PAGES-011)
   ---------------------------------------------------------------
   Attivata SOLO dove il template dichiara esplicitamente
   header_transparent=True (mai dedotta dai pixel della hero). Sticky
   invariata (stessa position/top di sempre): a cambiare e' solo
   sfondo/bordo/ombra/colore testo, mai l'altezza della barra — quindi
   nessun salto di layout al passaggio fra i due stati. Il passaggio a
   superficie solida avviene tramite la classe "is-scrolled", aggiunta
   da public-interactions.js dopo un piccolo scroll (24px).
   ============================================================= */
.fbl-header--transparent-capable {
  position: sticky; /* gia' vero da .fbl-header; ripetuto per chiarezza: e' il contenitore di riferimento dello scrim */
  background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
/* Causa reale della sfocatura percepita del testo (FRONTEND-PUBLIC-
   REVIEW-AND-LOCATOR-MAP-012, diagnosi via computed styles + campionamento
   pixel dell'immagine): font-family/weight/opacity/filter/backdrop-filter/
   transform/text-shadow risultavano GIA' tutti conformi (bianco pieno,
   peso 600, opacity 1, nessun filtro) — il problema non era nel CSS del
   testo. La causa reale e' il contrasto: la fascia superiore di
   "fable-hero-digital-economy.png" (dove la navbar si sovrappone) e'
   chiara (cielo/vetro), con luminanza tale da produrre un contrasto
   bianco-su-immagine misurato fra ~1.5:1 e ~3.5:1 nei punti campionati
   sotto i singoli link — ben sotto la soglia AA (4.5:1), percepito
   come testo "grigio/attenuato" pur essendo #ffffff a opacita' piena.
   Corretto con un velo/scrim uniforme dietro l'INTERA barra (mai sfondi
   separati dietro i singoli link): un overlay navy semi-trasparente
   che riporta il contrasto sopra 4.5:1 anche nel punto piu' chiaro
   campionato, mantenendo la percezione di navbar trasparente (l'immagine
   resta visibile attraverso il velo, non e' un fondo pieno). Applicato
   SOLO nello stato iniziale trasparente: sparisce quando la barra
   diventa solida (is-scrolled), dove il contrasto e' gia' garantito
   dallo sfondo chiaro + testo navy. */
.fbl-header--transparent-capable::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(var(--pub-scrim-rgb), 0.46);
  opacity: 1; transition: opacity 220ms ease;
}
.fbl-header--transparent-capable .fbl-header__bar { position: relative; z-index: 1; }
.fbl-header--transparent-capable.is-scrolled {
  background: rgba(var(--pub-header-surface-rgb), 0.86); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom-color: var(--pub-line); box-shadow: var(--pub-shadow-sm);
}
.fbl-header--transparent-capable.is-scrolled::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fbl-header--transparent-capable,
  .fbl-header--transparent-capable::before { transition: none; }
}

/* --- header-on-dark: testo bianco/off-white sopra hero fotografica
   scura, finche' la barra resta trasparente; ripristina i colori
   standard (navy/blu) non appena diventa solida (is-scrolled), dove
   lo sfondo torna chiaro. --- */
.fbl-header--on-dark .fbl-brand__wordmark,
.fbl-header--on-dark .fbl-nav__link,
.fbl-header--on-dark .fbl-nav-toggle { color: #ffffff; transition: color 220ms ease; }
.fbl-header--on-dark .fbl-nav-toggle { border-color: rgba(255, 255, 255, 0.5); }
.fbl-header--on-dark .fbl-nav__link::after { background: #ffffff; }
.fbl-header--on-dark .fbl-nav__link[aria-current="page"] { color: #ffffff; }
.fbl-header--on-dark .fbl-btn--ghost { color: #ffffff; }
.fbl-header--on-dark .fbl-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }

.fbl-header--on-dark.is-scrolled .fbl-brand__wordmark,
.fbl-header--on-dark.is-scrolled .fbl-nav__link,
.fbl-header--on-dark.is-scrolled .fbl-nav-toggle { color: var(--pub-text-secondary); }
.fbl-header--on-dark.is-scrolled .fbl-nav-toggle { border-color: var(--pub-line-strong); }
.fbl-header--on-dark.is-scrolled .fbl-nav__link::after { background: var(--fbl-public-interactive); }
.fbl-header--on-dark.is-scrolled .fbl-nav__link:hover { color: var(--fbl-public-interactive); }
.fbl-header--on-dark.is-scrolled .fbl-nav__link[aria-current="page"] { color: var(--fbl-public-interactive); }
.fbl-header--on-dark.is-scrolled .fbl-btn--ghost { color: var(--fbl-public-interactive); }
.fbl-header--on-dark.is-scrolled .fbl-btn--ghost:hover { background: var(--pub-tint-blue); }

/* =============================================================
   NAVBAR "FLOATING CONTRAST" (FRONTEND-PUBLIC-INTERACTION-AND-
   NAVBAR-FREEZE-016) — congelata nel laboratorio come variante E,
   qui applicata REALMENTE (solo alla Home, in questo ticket).
   Porta 1:1 il comportamento gia' verificato in
   app/static/public/css/visual-lab-navbar.css (.fbl-navlab-header--e):
   due gruppi flottanti sempre traslucidi (alpha reale + backdrop-
   filter solo sullo sfondo, mai sul testo), sottolineatura animata,
   hover/focus a colorazione piena. L'accento e' un modificatore
   esplicito via data-accent, MAI dedotto dai pixel dell'immagine:
   - data-accent="mint" → sito pubblico (usata qui, sulla Home);
   - data-accent="blue" → riservata alla futura piattaforma/Protocol
     Lab applicativo, non applicata a frontend_v2 in questo ticket.
   ============================================================= */
.fbl-header--floating-contrast {
  background: transparent; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 16px 20px 0; transition: padding 220ms ease;
}
.fbl-header--floating-contrast[data-accent="mint"] { --fbl-header-accent: var(--pub-cta-mint); --fbl-header-accent-tint: var(--pub-tint-mint); }
.fbl-header--floating-contrast[data-accent="blue"] { --fbl-header-accent: var(--fbl-public-interactive); --fbl-header-accent-tint: var(--pub-tint-blue); }

.fbl-header--floating-contrast .fbl-header__groups {
  /* La navbar reale ha 7 voci complete (non le 5 etichette accorciate
     del laboratorio): il contenitore deve poter usare tutta la
     larghezza disponibile, non il max-width:1260px del laboratorio,
     altrimenti .fbl-nav (flex:1, justify-content:center) trabocca
     simmetricamente oltre il proprio box e si sovrappone al marchio. */
  display: flex; align-items: stretch; justify-content: space-between; gap: clamp(10px, 2vw, 20px);
  max-width: var(--pub-container-wide); margin: 0 auto;
}
.fbl-header--floating-contrast .fbl-header__group {
  display: flex; align-items: center; gap: clamp(4px, 1vw, 14px);
  background: rgba(var(--pub-header-pill-rgb), 0.72);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(var(--pub-header-surface-rgb), 0.65); border-radius: var(--fbl-s-radius-container);
  box-shadow: var(--pub-shadow-md); padding: 12px 18px; min-width: 0;
  transition: padding 220ms ease, box-shadow 220ms ease;
}
.fbl-header--floating-contrast .fbl-header__group--left { flex: 1 1 auto; min-width: 0; position: relative; }
.fbl-header--floating-contrast .fbl-header__group--right { flex: 0 0 auto; }
.fbl-header--floating-contrast .fbl-brand,
.fbl-header--floating-contrast .fbl-nav__link,
.fbl-header--floating-contrast .fbl-btn--ghost,
.fbl-header--floating-contrast .fbl-nav-toggle { color: var(--pub-text-secondary); opacity: 1; }
.fbl-header--floating-contrast .fbl-brand { flex-shrink: 0; white-space: nowrap; overflow: visible; }
.fbl-header--floating-contrast .fbl-nav__list { flex-wrap: nowrap; }
.fbl-header--floating-contrast .fbl-nav__link { white-space: nowrap; }
/* Sottolineatura animata: riusa il meccanismo ::after gia' presente su
   .fbl-nav__link (scaleX(0)→scaleX(1) su hover/focus/aria-current),
   solo l'accento cambia colore. */
.fbl-header--floating-contrast .fbl-nav__link::after { background: var(--fbl-header-accent, var(--pub-cta-mint)); }
.fbl-header--floating-contrast .fbl-nav__link:hover,
.fbl-header--floating-contrast .fbl-nav__link:focus-visible {
  background: var(--fbl-header-accent-tint, var(--pub-tint-mint)); color: var(--pub-text-primary); border-radius: 8px;
}
.fbl-header--floating-contrast .fbl-nav__link[aria-current="page"] { color: var(--pub-text-primary); }
.fbl-header--floating-contrast .fbl-nav__link:focus-visible { outline: none; box-shadow: var(--fbl-s-focus-ring-light); }
.fbl-header--floating-contrast .fbl-btn--ghost:hover { background: var(--fbl-header-accent-tint, var(--pub-tint-mint)); }
.fbl-header--floating-contrast.is-scrolled { padding-top: 8px; }
.fbl-header--floating-contrast.is-scrolled .fbl-header__group { padding: 8px 16px; box-shadow: var(--pub-shadow-lg); }

.fbl-header--floating-contrast .fbl-nav__list--mobile {
  list-style: none; margin: 0; padding: 10px 16px 16px; display: none; flex-direction: column; gap: 4px;
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  background: rgba(var(--pub-header-pill-rgb), 0.98); border-radius: var(--fbl-s-radius-card); border: 1px solid var(--pub-line); box-shadow: var(--pub-shadow-md);
}
html.fbl-js .fbl-header--floating-contrast .fbl-nav-toggle[aria-expanded="true"] + .fbl-nav__list--mobile { display: flex; }
.fbl-header--floating-contrast .fbl-nav__list--mobile a { display: block; padding: 10px 6px; min-height: 44px; text-decoration: none; font-weight: 600; color: var(--pub-text-secondary); border-radius: 8px; }
.fbl-header--floating-contrast .fbl-nav__list--mobile a:hover,
.fbl-header--floating-contrast .fbl-nav__list--mobile a:focus-visible { background: var(--fbl-header-accent-tint, var(--pub-tint-mint)); color: var(--pub-text-primary); }
.fbl-header--floating-contrast .fbl-nav__list--mobile a:focus-visible { outline: none; box-shadow: var(--fbl-s-focus-ring-light); }
.fbl-header--floating-contrast .fbl-nav__list--mobile a[aria-current="page"] { color: var(--pub-text-primary); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .fbl-header--floating-contrast,
  .fbl-header--floating-contrast .fbl-header__group,
  .fbl-header--floating-contrast .fbl-nav__link,
  .fbl-header--floating-contrast .fbl-nav__link::after { transition: none !important; }
}

@media (max-width: 1380px) {
  /* Soglia piu' alta di quella della barra unica non-flottante
     (1220px): qui le 7 voci complete condividono lo spazio con un
     marchio a larghezza fissa dentro un gruppo flottante piu' stretto
     del viewport, quindi serve piu' margine prima di collassare.
     La regola che nasconde .fbl-nav__list e' gated dietro
     html.fbl-js (stesso meccanismo della barra non flottante, vedi
     riga ~1862): senza JavaScript il menu non deve mai sparire dietro
     un pulsante inattivo, quindi la lista resta visibile e si dispone
     a colonna dentro il gruppo sinistro. */
  .fbl-header--floating-contrast .fbl-nav__list { flex-wrap: wrap; }
  html.fbl-js .fbl-header--floating-contrast .fbl-nav__list { display: none; }
  html.fbl-js .fbl-header--floating-contrast .fbl-nav-toggle { display: inline-flex; }
}
@media (max-width: 1024px) {
  .fbl-header--floating-contrast .fbl-header__groups { gap: 8px; }
  .fbl-header--floating-contrast .fbl-header__group { padding: 10px 14px; }
}
@media (max-width: 560px) {
  .fbl-header--floating-contrast { padding: 10px 12px 0; }
  .fbl-header--floating-contrast .fbl-header__groups { gap: 6px; }
  .fbl-header--floating-contrast .fbl-header__group { padding: 8px 10px; }
  .fbl-header--floating-contrast .fbl-nav__list--mobile { margin: 6px 12px 0; }
  /* MOBILE-PLATFORM-GATE-NAV-FIX: .fbl-nav__list--mobile e' position:
     absolute con left:0;right:0 (riga 387), quindi larga quanto il
     "containing block" piu' vicino. Rimuovere solo position:relative da
     .fbl-header__group--left (riga 364) non bastava: .fbl-header__group
     (riga 356-363) ha anche backdrop-filter, che DA SOLO stabilisce un
     containing block per i discendenti assoluti (stessa regola di
     transform/filter, indipendente da position) -- confermato via
     bounding box reale (34px di larghezza, sovrapposto al gruppo destro,
     a 375px) anche dopo aver messo position:static. Serve rimuovere
     ANCHE il backdrop-filter da questo gruppo sotto il breakpoint,
     cosi' l'unico "containing block" rimasto e' .fbl-header stesso
     (gia' position:sticky, riga 187), largo quanto l'intero header.
     Nessun altro figlio di .fbl-header__group--left dipende da questo
     backdrop-filter per la propria leggibilita' (il gruppo e' solo
     marchio + hamburger a queste larghezze). */
  .fbl-header--floating-contrast .fbl-header__group--left {
    position: static;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* MOBILE-PLATFORM-GATE-NAV-FIX (2/2): il gruppo destro (divisore +
     wallet + notifiche + account, ~190-360px con username) non si
     restringe mai sotto i propri figli a larghezza fissa -- a 375px
     invade lo spazio del gruppo sinistro e COPRE FISICAMENTE l'hamburger
     (.fbl-nav-toggle), impedendo il click reale (confermato: Playwright
     riportava "intercepts pointer events" su .fbl-header__group--right,
     mai un problema solo visivo). Wallet/notifiche restano raggiungibili
     dal Protocol Lab una volta dentro; qui bastano avatar + freccia per
     aprire il menu account (logout compreso) senza saturare la riga. */
  .fbl-header--floating-contrast .fbl-wallet-menu,
  .fbl-header--floating-contrast .fbl-notification-btn,
  .fbl-header--floating-contrast .fbl-header__divider {
    display: none;
  }
  .fbl-header--floating-contrast .v2-account-username {
    display: none;
  }
}
@media (max-width: 480px) {
  /* A larghezze molto strette il gruppo sinistro (marchio + toggle)
     e il gruppo destro competono per uno spazio ridotto: il toggle
     passa a sola icona (senza l'etichetta "Menu") per evitare che il
     suo contenuto trabocchi oltre il proprio contenitore flottante e
     si sovrapponga visivamente al gruppo destro. */
  .fbl-header--floating-contrast .fbl-nav-toggle__label { display: none; }
  .fbl-header--floating-contrast .fbl-nav-toggle { padding: 10px; gap: 0; }
}
@media (max-width: 400px) {
  .fbl-header--floating-contrast .fbl-btn--ghost { display: none; }
}

/* --- pulsanti ---
   Nitidezza del testo (causa diagnosticata, vedi output del ticket
   FRONTEND-PUBLIC-VISUAL-REFINEMENT-002): dimensione precedente
   (14px, --fbl-p-fs-100) sotto la soglia minima leggibile per un CTA
   e hover implementato con "filter: brightness()", che forza la
   promozione a livello di compositing GPU dell'intero elemento
   (testo incluso) durante l'interazione, con un lieve ammorbidimento
   percepibile dei bordi dei glifi. Corretto: font-size >=16px, peso
   600 esplicito, hover risolto con un cambio di background-color
   (nessun filter/transform permanente), font-smoothing esplicito,
   nessuna opacity < 1 nello stato di riposo o finale. */
.fbl-btn {
  font-family: var(--fbl-p-font-body); font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: 0;
  border-radius: var(--fbl-s-radius-control); padding: 12px 22px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  text-decoration: none; cursor: pointer; opacity: 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 80ms ease;
}
.fbl-btn:active { transform: translateY(1px); }
/* CTA primaria: mint del marchio, testo navy (correzione globale A).
   Hover ottenuto con un colore di sfondo piu' scuro + bordo + ombra
   reali, mai un filter/opacity/transform permanente. */
/* Causa reale della scarsa nitidezza (FRONTEND-PUBLIC-HOME-SURGICAL-
   CORRECTIONS-007): "Inter" non e' mai caricato come webfont (solo
   dichiarato con fallback di sistema, vedi fable-tokens.css), quindi
   il browser usa Segoe UI/system-ui. font-weight:650 non corrisponde
   a nessun file statico realmente disponibile per questi font: Chrome
   lo sintetizza (embolding algoritmico), producendo il rendering
   "sfocato" segnalato. Rimosso: resta il 600 della base .fbl-btn,
   peso realmente disponibile in Segoe UI/Inter. */
.fbl-btn--primary { background: var(--pub-cta-mint); color: var(--pub-cta-text); border-color: transparent; }
.fbl-btn--primary:hover { background: var(--pub-cta-mint-hover); box-shadow: 0 8px 20px rgba(13, 58, 128, 0.16); }
.fbl-btn--primary:focus-visible { box-shadow: var(--fbl-s-focus-ring-light); }
/* CTA secondaria: superficie chiara/trasparente, testo blu scuro, bordo blu (contrasto AA verificato). */
.fbl-btn--secondary { background: var(--pub-bg); color: var(--fbl-s-interactive-hover-on-light); border-color: var(--fbl-public-interactive); }
.fbl-btn--secondary:hover { background: var(--pub-tint-blue); border-color: var(--fbl-s-interactive-hover-on-light); }
.fbl-btn--ghost { background: transparent; color: var(--fbl-public-interactive); border-color: transparent; padding-left: 6px; padding-right: 6px; }
.fbl-btn--ghost:hover { background: var(--pub-tint-blue); }
/* Su pannelli navy circoscritti e sulla banda tecnica a sfondo
   fotografico, la CTA secondaria deve restare leggibile su fondo
   scuro (altrimenti eredita lo sfondo chiaro di default e il testo
   scritto bianco sparisce). */
.fbl-panel--navy .fbl-btn--secondary, .fbl-bridge__panel .fbl-btn--secondary, .fbl-tech-banner .fbl-btn--secondary {
  background: transparent; color: var(--fbl-s-text-primary-dark); border-color: var(--pub-panel-navy-border);
}
.fbl-panel--navy .fbl-btn--secondary:hover, .fbl-bridge__panel .fbl-btn--secondary:hover, .fbl-tech-banner .fbl-btn--secondary:hover {
  background: rgba(232, 238, 246, 0.08); border-color: var(--fbl-s-text-secondary-dark);
}
/* Variante con bianco pieno (invece del quasi-bianco di default sui
   pannelli navy) per le CTA secondarie che devono risaltare di piu'. */
.fbl-btn--secondary-on-navy { color: #ffffff; border-color: var(--pub-panel-navy-border); }
.fbl-btn--on-dark { color: var(--pub-cta-text); }
.fbl-btn--sm { padding: 8px 16px; min-height: 38px; font-size: 0.9rem; }

/* =============================================================
   HERO (generico, riusato da tutte le pagine — vedi macros.html)
   Ricomposto: colonna narrativa compatta + colonna visuale, CTA
   vicine al testo, nessuno spazio vuoto non intenzionale.
   ============================================================= */
.fbl-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 88px); background: var(--pub-gradient-soft); }
.fbl-hero--home { padding-top: clamp(64px, 9vw, 112px); }
/* Pagine interne: il breadcrumb sopra la hero ha gia' stabilito la
   separazione dalla navbar, quindi la hero non ha bisogno di un altro
   grande padding-top: solo lo spazio minimo per respirare. */
.fbl-breadcrumb-bar + .fbl-hero { padding-top: clamp(20px, 3vw, 36px); }
.fbl-hero__ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fbl-hero__ambient::before {
  content: ""; position: absolute; inset: 0; background-image: var(--pub-pattern-dots); background-size: var(--pub-pattern-size);
  opacity: 0.5; mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
}
.fbl-hero__ambient-shape { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.35; }
.fbl-hero__ambient-shape--mint { width: 380px; height: 380px; background: var(--fbl-p-mint-500); top: -140px; right: -60px; opacity: 0.22; }
.fbl-hero__ambient-shape--blue { width: 320px; height: 320px; background: #bcd6ff; bottom: -120px; left: -80px; opacity: 0.5; }

.fbl-hero__content { position: relative; z-index: 1; max-width: var(--pub-container-std); margin: 0 auto; padding-inline: var(--pub-container-pad); text-align: center; }
.fbl-hero--home .fbl-hero__content { max-width: 860px; }
.fbl-hero--split .fbl-hero__content {
  max-width: var(--pub-container-std); text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.fbl-hero__narrative { min-width: 0; }
.fbl-hero__visual { min-width: 0; }

.fbl-preview-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fbl-p-font-mono); font-size: 0.8rem;
  color: var(--fbl-s-warning-text-on-light); background: var(--fbl-s-warning-bg-light);
  border: 1px solid var(--fbl-s-warning-border-light); border-radius: var(--fbl-s-radius-pill);
  padding: 5px 14px; margin-bottom: var(--fbl-s-inset-md);
}
.fbl-hero__eyebrow {
  font-family: var(--fbl-p-font-mono); font-size: var(--pub-fs-eyebrow); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fbl-p-navy-800); font-weight: 600; margin-bottom: var(--fbl-p-space-2);
}
.fbl-hero__title { font-size: var(--pub-fs-hero-display); color: var(--pub-text-primary); }
.fbl-hero--page .fbl-hero__title, .fbl-hero--split .fbl-hero__title { font-size: var(--pub-fs-hero-page); }
.fbl-hero__lede { font-size: var(--pub-fs-body-lg); color: var(--pub-text-secondary); max-width: 56ch; margin-left: auto; margin-right: auto; }
.fbl-hero--split .fbl-hero__lede { margin-left: 0; max-width: 52ch; }
.fbl-hero__cta-row { display: flex; gap: var(--fbl-s-inset-md); justify-content: center; margin-top: var(--fbl-s-inset-lg); flex-wrap: wrap; }
.fbl-hero--split .fbl-hero__cta-row { justify-content: flex-start; }
.fbl-hero__status {
  margin-top: 18px; font-size: 0.85rem; color: var(--pub-text-muted);
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center;
}
.fbl-hero--split .fbl-hero__status { justify-content: flex-start; }
.fbl-hero__status .fbl-hero__status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pub-line-strong); flex-shrink: 0; }

/* --- colonna visuale della hero: composizione astratta o media slot --- */
.fbl-hero__visual .fbl-media-slot { margin: 0; }

/* Pagine interne con navbar flottante e breadcrumb rimosso:
   la hero risale sotto la navbar, replicando la continuita' gia'
   applicata alla Home. Il padding aggiuntivo mantiene il contenuto
   fuori dall'area occupata dai gruppi di navigazione. */
.fbl-header--floating-contrast + main > .fbl-hero:first-child {
  margin-top: -88px;
  padding-top: calc(88px + clamp(48px, 7vw, 88px));
}

/* =============================================================
   SEZIONI — full-bleed, sempre chiare o al più tinta molto tenue.
   Il navy compare solo in .fbl-panel--navy (piccolo, circoscritto).
   ============================================================= */
.fbl-section { padding-block: clamp(48px, 7vw, 96px); position: relative; }
.fbl-section--white { background: var(--pub-bg); }
.fbl-section--alt { background: var(--pub-bg-alt); }
.fbl-section--tint { background: var(--pub-gradient-soft); }
.fbl-section--tint-reverse { background: var(--pub-gradient-soft-reverse); }
.fbl-section--pattern { background-image: var(--pub-pattern-dots); background-size: var(--pub-pattern-size); }
.fbl-section--bordered { border-top: 1px solid var(--pub-line); border-bottom: 1px solid var(--pub-line); }
.fbl-section__eyebrow {
  font-family: var(--fbl-p-font-mono); font-size: var(--pub-fs-eyebrow); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fbl-public-interactive); font-weight: 600; text-align: center; margin-bottom: 10px;
}
.fbl-section__title { font-size: var(--pub-fs-h2); text-align: center; color: var(--pub-text-primary); }
.fbl-section__lede { text-align: center; max-width: 68ch; margin: 0 auto var(--fbl-p-space-5); color: var(--pub-text-secondary); font-size: var(--pub-fs-body-lg); }
.fbl-section--left .fbl-section__title,
.fbl-section--left .fbl-section__lede,
.fbl-section--left .fbl-section__eyebrow { text-align: left; margin-left: 0; }

/* --- piccolo pannello tecnico navy, circoscritto (unico uso ammesso di navy pieno) --- */
.fbl-panel--navy {
  background: var(--pub-panel-navy-bg);
  border: 1px solid var(--pub-panel-navy-border);
  color: var(--fbl-s-text-primary-dark);
  border-radius: var(--fbl-s-radius-container);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--pub-shadow-lg);
}
.fbl-panel--navy p { color: var(--fbl-s-text-secondary-dark); }
.fbl-panel--navy .fbl-section__title { color: var(--fbl-s-text-primary-dark); }
.fbl-panel--navy .fbl-section__eyebrow { color: var(--fbl-s-operative); }
/* Paragrafo centrato a colonna stretta, usato per le frasi di
   raccordo dentro i pannelli navy (Protocollo, Come funziona,
   Applicazioni). */
.fbl-prose-centered { text-align: center; max-width: 64ch; margin: 0 auto 16px; }
.fbl-prose-centered--loose { margin-bottom: 22px; }

/* --- variante navy con immagine di sfondo velata: stessa cornice
   contenuta del pannello navy, ma con una fotografia visibile in
   trasparenza sotto un velo navy, invece del colore pieno. Diversa
   sia dal backdrop a piena larghezza di Home/Context+Product sia
   dalla tech-banner di Protocol Lab: qui l'immagine resta dentro i
   confini arrotondati della card. --- */
.fbl-panel--navy-media { position: relative; overflow: hidden; background: var(--pub-panel-navy-bg); }
.fbl-panel--navy-media__backdrop { position: absolute; inset: 0; z-index: 0; }
.fbl-panel--navy-media__backdrop picture, .fbl-panel--navy-media__backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.fbl-panel--navy-media__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 24, 38, 0.55) 0%, rgba(11, 26, 46, 0.82) 55%, rgba(14, 24, 38, 0.55) 100%); }
.fbl-panel--navy-media__content { position: relative; z-index: 1; }

/* =============================================================
   DIAGRAMMA — adattato a superficie chiara
   ============================================================= */
.fbl-diagram { margin: var(--fbl-p-space-5) auto 0; max-width: 560px; text-align: center; }
.fbl-diagram--wide { max-width: 760px; }
.fbl-diagram__svg { width: 100%; height: auto; }
.fbl-diagram__caption { font-size: 0.85rem; color: var(--pub-text-muted); margin-top: var(--fbl-s-inset-sm); }

/* =============================================================
   CARD — narrativa, principio, applicazione. Non tutte le sezioni
   usano una griglia a 3: vedi anche .fbl-bento e .fbl-steps.
   ============================================================= */
.fbl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fbl-p-space-4); margin-top: var(--fbl-p-space-4); }
.fbl-cards--2 { grid-template-columns: repeat(2, 1fr); }
.fbl-cards--4 { grid-template-columns: repeat(4, 1fr); }
/* .fbl-card e' informativa (categoria C, FRONTEND-PUBLIC-UI-CONSISTENCY-009
   Attivita' 2): <article> senza href, mai promossa a link. Hover limitato
   a ombra/bordo, senza sollevamento (che imiterebbe l'affordance di un
   link/pulsante). */
.fbl-card {
  background: var(--pub-bg); border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card);
  padding: var(--fbl-s-inset-lg); box-shadow: var(--pub-shadow-sm);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.fbl-card:hover { box-shadow: var(--pub-shadow-md); border-color: var(--pub-line-strong); }
/* .fbl-card--link (FRONTEND-PUBLIC-CONTROLS-AND-FINAL-PAGES-011,
   Contatti): usata SOLO quando la card e' un <a> con destinazione
   reale — a differenza di .fbl-card semplice (informativa, mai
   sollevamento), qui il sollevamento e la freccia sono corretti
   perche' comunicano davvero un'azione di navigazione. */
.fbl-card--link { display: block; text-decoration: none; color: inherit; }
.fbl-card--link:hover, .fbl-card--link:focus-visible { box-shadow: var(--pub-shadow-md); border-color: var(--fbl-public-interactive); transform: translateY(-3px); outline: none; }
.fbl-card--link .fbl-card__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 12px;
  border-radius: 50%; border: 1px solid var(--pub-line-strong); color: var(--fbl-public-interactive);
  transition: transform 200ms ease, background-color 200ms ease;
}
.fbl-card--link:hover .fbl-card__arrow, .fbl-card--link:focus-visible .fbl-card__arrow { transform: translateX(3px); background: var(--pub-tint-blue); }
.fbl-card__eyebrow { font-family: var(--fbl-p-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pub-text-muted); margin-bottom: 6px; }
.fbl-card__title { font-family: var(--fbl-p-font-body); font-size: var(--pub-fs-card-title); font-weight: 700; color: var(--pub-text-primary); }
.fbl-card__text { margin: 0; color: var(--pub-text-secondary); }
.fbl-card--featured { border-top: 3px solid var(--fbl-public-interactive); grid-column: span 2; }
.fbl-card--onblue { background: var(--pub-tint-blue); border-color: #d6e6ff; }

/* --- card principale + secondarie (composizione asimmetrica) --- */
.fbl-lead-cards { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--fbl-p-space-4); margin-top: var(--fbl-p-space-4); align-items: stretch; }
.fbl-lead-cards .fbl-card--lead { display: flex; flex-direction: column; justify-content: center; background: var(--pub-gradient-soft); border-color: transparent; }
.fbl-lead-cards .fbl-card--stack { display: grid; gap: var(--fbl-p-space-3); }

/* --- composizione bento (asimmetrica) --- */
.fbl-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: var(--fbl-p-space-3); margin-top: var(--fbl-p-space-4); }
/* .fbl-bento__item e' informativa (categoria C): nessun href, nessun
   sollevamento all'hover — solo ombra/bordo (vedi nota su .fbl-card). */
.fbl-bento__item {
  background: var(--pub-bg); border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card);
  padding: var(--fbl-s-inset-lg); display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--pub-shadow-sm);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.fbl-bento__item:hover { box-shadow: var(--pub-shadow-md); border-color: var(--pub-line-strong); }
.fbl-bento__item--wide { grid-column: span 2; }
.fbl-bento__item--tall { grid-row: span 2; }
.fbl-bento__item--tint { background: var(--pub-tint-blue); border-color: #d6e6ff; }

/* --- passi numerati --- */
.fbl-steps { counter-reset: fbl-step; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fbl-p-space-4); margin-top: var(--fbl-p-space-4); }
.fbl-steps__item { position: relative; padding-top: 48px; }
.fbl-steps__item::before {
  counter-increment: fbl-step; content: counter(fbl-step);
  position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--pub-bg); border: 2px solid var(--fbl-public-interactive); color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono); font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--pub-shadow-sm);
}
.fbl-steps__title { font-size: var(--pub-fs-h3); margin-bottom: 4px; }
.fbl-steps__text { color: var(--pub-text-secondary); margin: 0; }

/* --- pannello di evidenza (proprieta'/prove) --- */
.fbl-evidence { display: grid; gap: 10px; margin-top: var(--fbl-p-space-4); }
.fbl-evidence__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 20px; border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card); background: var(--pub-bg);
  box-shadow: var(--pub-shadow-sm);
}
.fbl-evidence__label { font-weight: 600; color: var(--pub-text-primary); font-size: var(--pub-fs-card-title); }
.fbl-evidence__text { color: var(--pub-text-secondary); font-size: 0.95rem; margin: 4px 0 0; }

/* --- badge di stato: Disponibile / Pilot / In validazione / Visione --- */
.fbl-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fbl-p-font-mono); font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: var(--fbl-s-radius-pill); border: 1px solid; white-space: nowrap; }
.fbl-badge--available { background: var(--pub-badge-success-bg); color: var(--pub-badge-success-text); border-color: var(--pub-badge-success-border); }
.fbl-badge--pilot { background: var(--pub-tint-blue); color: var(--fbl-public-interactive); border-color: var(--pub-badge-pilot-border); }
.fbl-badge--validation { background: var(--pub-badge-warning-bg); color: var(--pub-badge-warning-text); border-color: var(--pub-badge-warning-border); }
.fbl-badge--vision { background: var(--pub-bg-alt); color: var(--pub-text-muted); border-color: var(--pub-line-strong); }
/* Due kind aggiuntivi (FRONTEND-PUBLIC-UI-CONSISTENCY-NEXT-PAGES-010):
   "documentato" (evidenza scritta disponibile, distinto da "disponibile
   nel Lab") e "ricerca" (area di ricerca applicata, distinto da
   "visione futura" — la ricerca ha gia' un lavoro in corso, la visione
   no). Contrasto verificato >=4.5:1 sulle rispettive superfici (in
   entrambi i temi: le varianti dark sono definite in public-theme.css). */
.fbl-badge--documented { background: var(--pub-tint-dust); color: var(--pub-badge-documented-text); border-color: var(--pub-line-strong); }
.fbl-badge--research { background: var(--pub-tint-mint-soft); color: var(--pub-badge-research-text); border-color: var(--pub-badge-research-border); }

/* --- barra breadcrumb: compatta, NON un'altra .fbl-section a piena
   altezza. Correzione globale (FRONTEND-PUBLIC-VISUAL-CORRECTIONS-004):
   la causa reale dello spazio eccessivo fra navbar e hero era che il
   wrapper del breadcrumb riusava .fbl-section (padding-block fino a
   96px, condiviso fra top e bottom) con solo il bottom azzerato via
   style inline: il padding-top restava intero e si SOMMAVA al
   padding-top della hero successiva. Sostituito con un contenitore
   dedicato a padding fisso e minimo. --- */
.fbl-breadcrumb-bar { padding-top: 14px; padding-bottom: 6px; background: var(--pub-bg); }
.fbl-breadcrumb { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; font-size: 0.85rem; color: var(--pub-text-muted); flex-wrap: wrap; }
.fbl-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; }
.fbl-breadcrumb a { color: var(--pub-text-muted); text-decoration: none; }
.fbl-breadcrumb a:hover { color: var(--fbl-public-interactive); }
.fbl-breadcrumb [aria-current="page"] { color: var(--pub-text-secondary); }

/* --- collegamenti a pagine correlate ("Approfondisci") ---
   Correzione globale B: label e titolo su righe/aree distinte (mai
   sovrapposte), intera card cliccabile, freccia coerente, hover/focus
   con profondita' e movimento sobrio, ordine leggibile anche su mobile. */
.fbl-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fbl-p-space-3); margin-top: var(--fbl-p-space-4); }
.fbl-related__item {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card);
  text-decoration: none; color: var(--pub-text-primary); background: var(--pub-bg);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.fbl-related__item:hover, .fbl-related__item:focus-visible { border-color: var(--fbl-public-interactive); transform: translateY(-3px); box-shadow: var(--pub-shadow-md); background: var(--pub-tint-blue); }
.fbl-related__item .fbl-related__label {
  display: block; font-family: var(--fbl-p-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--pub-text-muted); line-height: 1.4;
}
.fbl-related__item .fbl-related__title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fbl-related__item .fbl-related__title { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.fbl-related__item .fbl-related__arrow {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--fbl-public-interactive); border: 1px solid var(--pub-line-strong); transition: transform 180ms ease, background-color 180ms ease;
}
.fbl-related__item:hover .fbl-related__arrow, .fbl-related__item:focus-visible .fbl-related__arrow { transform: translateX(3px); background: var(--pub-bg); }

/* =============================================================
   BRIDGE verso il Lab — pannello tecnico circoscritto, non piu'
   una sezione piena a tutta larghezza
   ============================================================= */
.fbl-bridge { padding-block: clamp(48px, 6vw, 72px); background: var(--pub-bg-alt); }
.fbl-bridge__panel {
  max-width: 920px; margin: 0 auto; background: var(--pub-panel-navy-bg); color: var(--fbl-s-text-primary-dark);
  border-radius: var(--fbl-s-radius-container); padding: clamp(28px, 5vw, 48px); text-align: center;
  border: 1px solid var(--pub-panel-navy-border); box-shadow: var(--pub-shadow-lg);
}
.fbl-bridge__title { color: var(--fbl-s-text-primary-dark); font-size: var(--pub-fs-h2); }
.fbl-bridge__lede { color: var(--fbl-s-text-secondary-dark); max-width: 60ch; margin: 0 auto var(--fbl-s-inset-lg); font-size: var(--pub-fs-body-lg); }
.fbl-bridge__cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =============================================================
   COMPONENTI MATEMATICI / DIMOSTRATIVI
   ============================================================= */

/* --- scenario dimostrativo: stato iniziale / eventi / stato finale --- */
.fbl-scenario { margin-top: var(--fbl-p-space-4); border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); background: var(--pub-bg); box-shadow: var(--pub-shadow-md); overflow: hidden; }
.fbl-scenario__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 24px; background: var(--pub-bg-alt); border-bottom: 1px solid var(--pub-line); }
.fbl-scenario__label { font-family: var(--fbl-p-font-mono); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fbl-public-interactive); }
.fbl-scenario__note { font-size: 0.85rem; color: var(--pub-text-muted); }
.fbl-scenario__body { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; }
.fbl-scenario__col { padding: 22px 22px; }
.fbl-scenario__col h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pub-text-muted); margin-bottom: 12px; }
.fbl-scenario__metric { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--pub-line); font-family: var(--fbl-p-font-mono); font-size: 0.9rem; }
.fbl-scenario__metric:last-child { border-bottom: none; }
/* .fbl-scenario e' usato SOLO dentro .fbl-lab-scenario/.fbl-how-scenario
   (pannello sempre chiaro su sfondo fotografico gia' scuro): la label
   a sinistra di ogni metrica non ha un colore proprio e altrimenti
   erediterebbe il colore adattivo del body, illeggibile su questo
   pannello sempre chiaro. */
.fbl-scenario__metric span:first-child { color: var(--pub-on-light-secondary); }
.fbl-scenario__metric-value { font-weight: 700; color: var(--pub-text-primary); }
.fbl-scenario__arrow { align-self: center; display: flex; align-items: center; justify-content: center; color: var(--pub-line-strong); padding: 0 4px; }
.fbl-scenario__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fbl-scenario__events li { font-size: 0.9rem; padding-left: 14px; position: relative; color: var(--pub-text-secondary); }
.fbl-scenario__events li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--fbl-public-interactive); }

/* --- grafico di evoluzione dello stato (SVG statico, no lib) --- */
.fbl-chart { margin-top: var(--fbl-p-space-4); border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); background: var(--pub-bg); padding: 24px; box-shadow: var(--pub-shadow-md); }
.fbl-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fbl-chart__title { font-weight: 700; color: var(--pub-text-primary); }
.fbl-chart__figure { position: relative; }
.fbl-chart__svg { width: 100%; height: auto; }
.fbl-chart__legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 0.85rem; color: var(--pub-text-secondary); }
.fbl-chart__legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* --- punti interattivi: hover/focus/tap mostrano un tooltip e
   evidenziano il punto (Fase 4, FRONTEND-PUBLIC-HOME-SYNTHESIS-006).
   Nessuna dipendenza da JS per il valore (title nativo + tabella
   testuale); il tooltip HTML e' un miglioramento progressivo. --- */
.fbl-chart__point { cursor: pointer; transition: r 160ms ease, opacity 160ms ease; }
.fbl-chart__point:hover, .fbl-chart__point:focus-visible, .fbl-chart__point.is-active { r: 8; }
.fbl-chart__point:focus-visible { outline: 2px solid var(--fbl-s-interactive-hover-on-light); outline-offset: 2px; }
.fbl-chart__line--dim { opacity: 0.35; }
.fbl-chart__tooltip {
  position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, -100%);
  background: var(--pub-panel-navy-bg); color: var(--fbl-s-text-primary-dark); border-radius: var(--fbl-s-radius-card);
  padding: 8px 12px; font-size: 0.8rem; box-shadow: var(--pub-shadow-lg); white-space: nowrap;
  display: flex; flex-direction: column; gap: 2px; margin-top: -10px;
}
.fbl-chart__tooltip[hidden] { display: none; }
.fbl-chart__tooltip-step { font-family: var(--fbl-p-font-mono); font-size: 0.7rem; color: var(--fbl-p-mint-500); text-transform: uppercase; letter-spacing: 0.04em; }
.fbl-chart__tooltip-event { font-weight: 600; }
.fbl-chart__tooltip-value { color: var(--fbl-s-text-secondary-dark); font-family: var(--fbl-p-font-mono); font-size: 0.75rem; }

/* --- tabella di verifica ---
   Correzione globale C: sotto 768px la tabella NON comprime piu' le
   colonne (niente clipping, niente scroll orizzontale): diventa una
   sequenza di card verticali, una per proprieta', con etichette
   esplicite generate da attr(data-label) sui singoli <td>. */
.fbl-table-wrap { margin-top: var(--fbl-p-space-4); overflow-x: auto; border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); box-shadow: var(--pub-shadow-sm); }
.fbl-table { width: 100%; border-collapse: collapse; background: var(--pub-bg); font-size: 0.95rem; }
.fbl-table caption { text-align: left; padding: 16px 20px; font-weight: 700; color: var(--pub-text-primary); border-bottom: 1px solid var(--pub-line); }
.fbl-table th, .fbl-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--pub-line); }
.fbl-table thead th { font-family: var(--fbl-p-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pub-text-muted); background: var(--pub-bg-alt); }
.fbl-table tbody tr:last-child td { border-bottom: none; }
.fbl-table tbody tr:hover { background: var(--pub-bg-alt); }

@media (max-width: 768px) {
  .fbl-table-wrap { overflow-x: visible; border: none; box-shadow: none; }
  .fbl-table, .fbl-table thead, .fbl-table tbody, .fbl-table th, .fbl-table td, .fbl-table tr { display: block; width: 100%; }
  .fbl-table caption { border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container) var(--fbl-s-radius-container) 0 0; border-bottom: none; }
  .fbl-table thead { position: absolute; left: -9999px; top: -9999px; } /* fuori vista ma letto dagli screen reader tramite scope/th del markup semantico */
  .fbl-table tbody tr {
    border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); margin-bottom: 12px;
    background: var(--pub-bg); box-shadow: var(--pub-shadow-sm); padding: 6px 0;
  }
  .fbl-table tbody tr:last-child { margin-bottom: 0; }
  .fbl-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    border-bottom: 1px dashed var(--pub-line); white-space: normal; text-align: right;
  }
  .fbl-table td:last-child { border-bottom: none; }
  .fbl-table td::before {
    content: attr(data-label); font-family: var(--fbl-p-font-mono); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--pub-text-muted); text-align: left; flex-shrink: 0; max-width: 40%;
  }
}

/* --- confronto / tab (input radio, accessibile e leggibile senza JS:
       senza JS/CSS avanzato i tre pannelli restano semplicemente
       impilati e leggibili in sequenza) --- */
.fbl-tabs { margin-top: var(--fbl-p-space-4); }
.fbl-tabs__list { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--pub-line); margin-bottom: 20px; }
.fbl-tabs__input { position: absolute; opacity: 0; pointer-events: none; }
.fbl-tabs__label {
  display: inline-flex; align-items: center; padding: 10px 18px; font-weight: 600; font-size: 0.95rem;
  color: var(--pub-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 150ms ease, border-color 150ms ease;
}
.fbl-tabs__label:hover { color: var(--fbl-public-interactive); }
.fbl-tabs__input:focus-visible + .fbl-tabs__label { box-shadow: var(--fbl-s-focus-ring-light); border-radius: var(--fbl-s-radius-control); }
.fbl-tabs__panel { display: none; }
/* con JS/CSS avanzato disponibile, il pannello selezionato viene mostrato singolarmente */
@supports selector(:has(a)) {
  .fbl-tabs__panel { display: block; }
  .fbl-tabs:has(#fbl-tab-1:checked) .fbl-tabs__panel:not([data-panel="1"]) { display: none; }
  .fbl-tabs:has(#fbl-tab-2:checked) .fbl-tabs__panel:not([data-panel="2"]) { display: none; }
  .fbl-tabs:has(#fbl-tab-3:checked) .fbl-tabs__panel:not([data-panel="3"]) { display: none; }
  .fbl-tabs__input:checked + .fbl-tabs__label { color: var(--fbl-public-interactive); border-color: var(--fbl-public-interactive); }
}
.fbl-tabs__panel-inner { border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); padding: 24px; background: var(--pub-bg); box-shadow: var(--pub-shadow-sm); margin-bottom: 12px; }
.fbl-tabs__panel-inner h4 { font-size: var(--pub-fs-h3); margin-bottom: 8px; }

/* --- accordion accessibile: <details>/<summary> nativi --- */
.fbl-accordion { margin-top: var(--fbl-p-space-4); display: grid; gap: 12px; }
.fbl-accordion__item {
  border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card); background: var(--pub-bg); overflow: hidden;
  box-shadow: var(--pub-shadow-sm); transition: box-shadow 200ms ease, border-color 200ms ease;
}
.fbl-accordion__item:hover { box-shadow: var(--pub-shadow-md); border-color: var(--pub-line-strong); }
.fbl-accordion__item[open] { border-color: var(--fbl-public-interactive); box-shadow: var(--pub-shadow-md); }
.fbl-accordion__item summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--pub-text-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none;
}
.fbl-accordion__item summary::-webkit-details-marker { display: none; }
.fbl-accordion__item summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fbl-public-interactive); }
.fbl-accordion__item summary::after {
  content: "+"; font-family: var(--fbl-p-font-mono); font-size: 1.1rem; color: var(--fbl-public-interactive); flex-shrink: 0;
  transition: transform 200ms ease;
}
.fbl-accordion__item[open] summary::after { content: "−"; }
.fbl-accordion__item .fbl-accordion__panel { padding: 0 20px 18px; color: var(--pub-text-secondary); }

/* --- variante "ricca" (Documentazione): icona + titolo/descrizione +
   stato/conteggio + chevron, riconoscibile gia' da chiusa come elemento
   apribile. Ogni categoria puo' avere una superficie leggermente
   differenziata (tint) per rinforzare la varieta' visiva. --- */
.fbl-accordion__item--rich summary {
  padding: 20px 22px; gap: 16px; align-items: flex-start;
}
.fbl-accordion__item--rich summary::after { content: none; }
.fbl-accordion__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--fbl-s-radius-card);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  background: var(--pub-tint-blue); color: var(--fbl-public-interactive); border: 1px solid #d6e6ff;
}
.fbl-accordion__item--rich[open] .fbl-accordion__icon { background: var(--pub-cta-mint); color: var(--pub-cta-text); border-color: transparent; }
.fbl-accordion__headtext { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fbl-accordion__title { font-size: var(--pub-fs-card-title); font-weight: 700; color: var(--pub-text-primary); }
.fbl-accordion__desc { font-size: 0.92rem; color: var(--pub-text-secondary); font-weight: 400; }
.fbl-accordion__meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fbl-accordion__count { font-family: var(--fbl-p-font-mono); font-size: 0.72rem; color: var(--pub-text-muted); white-space: nowrap; }
.fbl-accordion__chevron {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--pub-line-strong);
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
  color: var(--pub-text-muted); transition: transform 220ms ease, background-color 200ms ease, border-color 200ms ease;
}
.fbl-accordion__chevron::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); }
.fbl-accordion__item--rich[open] .fbl-accordion__chevron { transform: rotate(180deg); background: var(--pub-tint-blue); border-color: var(--fbl-public-interactive); color: var(--fbl-public-interactive); }
.fbl-accordion__item--rich .fbl-accordion__panel { padding: 0 22px 22px 78px; display: grid; gap: 10px; }
.fbl-accordion__panel-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--pub-line); font-size: 0.9rem; }
.fbl-accordion__panel-row:last-of-type { border-bottom: none; }
.fbl-accordion__panel-row span:first-child { color: var(--pub-text-muted); }
.fbl-accordion__panel-row span:last-child { font-weight: 600; color: var(--pub-text-primary); }
.fbl-accordion__item--tint-a { background: var(--pub-tint-dust); }
.fbl-accordion__item--tint-b { background: var(--pub-tint-mint-soft); }
@media (max-width: 560px) {
  .fbl-accordion__item--rich summary { flex-wrap: wrap; }
  .fbl-accordion__meta { flex-direction: row; align-items: center; }
  .fbl-accordion__item--rich .fbl-accordion__panel { padding-left: 22px; }
}

/* --- timeline / roadmap: presente vs futuro nettamente distinti ---
   Correzione strutturale (FRONTEND-PUBLIC-VISUAL-CORRECTIONS-004):
   con una griglia a 4 colonne e il divisore "Oggi" inserito come
   quinto figlio con grid-column:1/-1, l'auto-placement di CSS Grid
   spezzava la riga a meta' (i primi 2 item riempivano solo 2 delle 4
   colonne, il divisore forzava una nuova riga lasciando le colonne
   3-4 della riga precedente vuote, e la riga successiva con gli item
   3-4 usava di nuovo solo 2 delle 4 colonne): da qui la "grande area
   vuota a destra" e le sovrapposizioni viste negli screenshot.
   Corretto adottando una griglia 2x2 coerente (ammessa esplicitamente
   in alternativa ai 4 colonne): con esattamente 2 colonne, 2 item
   riempiono sempre una riga intera prima che il divisore (span
   1/-1) apra la riga successiva, senza celle residue. Rimossa anche
   la linea connettrice assoluta (attraversava testi/card su alcune
   larghezze): la sequenza e' resa dai marker numerati e dal divisore. */
.fbl-timeline { position: relative; margin-top: var(--fbl-p-space-5); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fbl-p-space-3); }
/* .fbl-timeline__item e' l'elemento di griglia stretchato dalla riga
   (default align-items:stretch): reso flex-column cosi' che il marker
   (fuori dalla card) e la card possano dividersi correttamente
   l'altezza della riga. Prima di questa correzione la card usava
   height:100% calcolato SENZA considerare il marker sovrastante,
   causando un overflow della card di ~48px oltre il bordo della riga
   di griglia — la causa reale della sovrapposizione con il divisore
   vista negli screenshot. */
.fbl-timeline__item { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; }
.fbl-timeline__marker { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--pub-bg); border: 2px solid var(--fbl-public-interactive); display: flex; align-items: center; justify-content: center; font-family: var(--fbl-p-font-mono); font-weight: 700; color: var(--fbl-public-interactive); margin-bottom: 14px; box-shadow: var(--pub-shadow-sm); }
.fbl-timeline__item--future .fbl-timeline__marker { border-style: dashed; color: var(--pub-text-muted); border-color: var(--pub-line-strong); }
.fbl-timeline__card { border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card); background: var(--pub-bg); padding: 18px 20px; box-shadow: var(--pub-shadow-sm); flex: 1; min-width: 0; overflow: hidden; }
.fbl-timeline__item--future .fbl-timeline__card { background: var(--pub-bg-alt); border-style: dashed; }
.fbl-timeline__badge-row { margin-bottom: 10px; }
.fbl-timeline__title { font-size: var(--pub-fs-h3); margin-bottom: 6px; }
.fbl-timeline__text { color: var(--pub-text-secondary); margin: 0; font-size: 0.95rem; }
.fbl-timeline__card details.fbl-accordion__item { max-width: 100%; }
.fbl-timeline__card details.fbl-accordion__item summary { padding: 12px 14px; font-size: 0.92rem; }
.fbl-timeline__divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.fbl-timeline__divider::before, .fbl-timeline__divider::after { content: ""; flex: 1; height: 1px; background: var(--pub-line-strong); }
.fbl-timeline__divider span { font-family: var(--fbl-p-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pub-text-muted); white-space: nowrap; }

/* --- media slot: composizione visuale astratta al posto di una
       fotografia non disponibile/non autorizzata. Mai un rettangolo
       grigio con scritta "placeholder": una composizione coerente
       con il linguaggio visuale del brand, con soggetto dichiarato. --- */
.fbl-media-slot {
  position: relative; border-radius: var(--fbl-s-radius-container); overflow: hidden;
  border: 1px solid var(--pub-line-strong); box-shadow: var(--pub-shadow-lg);
  aspect-ratio: 4 / 3; background: var(--pub-gradient-soft);
}
.fbl-media-slot__scene { position: absolute; inset: 0; }
.fbl-media-slot__caption {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  font-family: var(--fbl-p-font-mono); font-size: 0.7rem; color: var(--pub-text-secondary);
  background: rgba(255,255,255,0.82); backdrop-filter: blur(4px); border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-control); padding: 6px 10px;
}
/* --- variante "browser": inquadra un mockup astratto del Lab senza affermare che sia uno screenshot reale --- */
.fbl-media-slot--browser { aspect-ratio: 16 / 10; background: var(--pub-bg-alt); }
.fbl-media-slot__chrome { position: absolute; top: 0; left: 0; right: 0; height: 34px; background: var(--pub-bg); border-bottom: 1px solid var(--pub-line); display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.fbl-media-slot__chrome span { width: 8px; height: 8px; border-radius: 50%; background: var(--pub-line-strong); }
.fbl-media-slot__chrome-bar { flex: 1; margin-left: 10px; height: 14px; border-radius: 7px; background: var(--pub-bg-alt); border: 1px solid var(--pub-line); }
.fbl-media-slot__ui { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fbl-media-slot__ui-block { border-radius: 8px; background: var(--pub-gradient-soft); border: 1px solid var(--pub-line); }
.fbl-media-slot__ui-block--wide { grid-column: span 2; }

/* =============================================================
   IMMAGINI EDITORIALI REALI — struttura pronta per gli asset
   definitivi sotto app/static/public/media/ (FRONTEND-PUBLIC-VISUAL-
   CORRECTIONS-004). Vedi macro editorial_image() in macros.html.
   Ogni variante ha una composizione di riserva (.fbl-edimg__art)
   distinta, visibile finche' l'asset reale non e' presente.
   ============================================================= */
.fbl-edimg {
  position: relative; overflow: hidden; border-radius: var(--fbl-s-radius-container);
  border: 1px solid var(--pub-line-strong); box-shadow: var(--pub-shadow-lg); background: var(--pub-bg-alt);
}
.fbl-edimg__art { position: absolute; inset: 0; }
.fbl-edimg picture, .fbl-edimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fbl-edimg--hero-digital-economy .fbl-edimg__art {
  background: var(--pub-gradient-soft);
  background-image: radial-gradient(circle at 25% 20%, rgba(109, 198, 179, 0.35) 0%, transparent 45%),
                     radial-gradient(circle at 75% 75%, rgba(29, 78, 216, 0.22) 0%, transparent 50%), var(--pub-gradient-soft);
}
.fbl-edimg--business-design .fbl-edimg__art {
  background: linear-gradient(125deg, var(--pub-tint-blue) 0%, var(--pub-bg) 55%, var(--pub-tint-mint) 100%);
}
.fbl-edimg--economic-engine .fbl-edimg__art {
  background: linear-gradient(160deg, var(--pub-panel-navy-bg) 0%, #142943 60%, #1d3a5c 100%);
}
.fbl-edimg--observable-states .fbl-edimg__art {
  background: linear-gradient(135deg, var(--pub-tint-mint-soft) 0%, var(--pub-tint-dust) 100%);
  background-image: var(--pub-pattern-lines), linear-gradient(135deg, var(--pub-tint-mint-soft) 0%, var(--pub-tint-dust) 100%);
}

/* --- movimento dedicato alle immagini editoriali: durate/spostamenti
   conformi al mandato (450-700ms, 20-32px, scale minima 0.97),
   indipendente dalle regole generiche di reveal (vedi public-motion.css). --- */

/* --- pattern decorativo: linee/nodi connessi, elemento astratto
       riusabile nella colonna visuale delle hero --- */
.fbl-node-motif { position: absolute; inset: 0; }
.fbl-node-motif circle { fill: var(--pub-bg); }
.fbl-node-motif .fbl-node-motif__line { stroke: var(--pub-diagram-relation); stroke-width: 1.4; opacity: 0.55; }
.fbl-node-motif .fbl-node-motif__node { stroke: var(--pub-diagram-relation); stroke-width: 1.6; }
.fbl-node-motif .fbl-node-motif__node--hub { fill: var(--pub-panel-navy-bg); stroke: var(--fbl-p-mint-500); }

/* =============================================================
   SUPERFICI AGGIUNTIVE — varieta' controllata (FRONTEND-PUBLIC-ART-
   DIRECTION-PILOT-003): non applicare lo stesso pattern o lo stesso
   gradiente a tutte le sezioni/pagine.
   ============================================================= */
.fbl-section--dust { background: var(--pub-tint-dust); }
.fbl-section--mint-soft { background: var(--pub-tint-mint-soft); }
.fbl-section--lines { background-image: var(--pub-pattern-lines); }

/* =============================================================
   PROVE DI SUPERFICIE — temporanee, per confronto visivo
   (FRONTEND-PUBLIC-VISUAL-CORRECTIONS-004). Non e' ancora stata
   scelta una variante definitiva: nessuno switch visibile
   all'utente, solo tre sezioni campione marcate con commenti HTML
   "SURFACE TEST A/B/C" nei rispettivi template.
   ============================================================= */

/* --- A: editoriale luminosa — caldo off-white, gradiente radiale
   tenue, grana quasi impercettibile, card bianche con profondita' --- */
.fbl-surface-test-a {
  background-color: #faf8f4;
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(234, 242, 255, 0.55) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
}
.fbl-surface-test-a .fbl-card, .fbl-surface-test-a .fbl-bento__item, .fbl-surface-test-a .fbl-evidence__row {
  background: #ffffff; box-shadow: var(--pub-shadow-md);
}

/* --- B: blu polvere strutturato — superficie azzurro chiarissimo,
   gradiente blu-mint localizzato in un angolo, griglia tecnica sottile --- */
.fbl-surface-test-b {
  background-color: #eef3fb;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(109, 198, 179, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 6% 92%, rgba(29, 78, 216, 0.10) 0%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(13, 58, 128, 0.05) 0px, rgba(13, 58, 128, 0.05) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(13, 58, 128, 0.05) 0px, rgba(13, 58, 128, 0.05) 1px, transparent 1px, transparent 40px);
}
.fbl-surface-test-b .fbl-card, .fbl-surface-test-b .fbl-bento__item, .fbl-surface-test-b .fbl-evidence__row {
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(2px); box-shadow: var(--pub-shadow-md); border-color: #cfe0fb;
}

/* --- C: mint professionale — mint fortemente desaturato, pannelli
   bianco/azzurro, bordi blu traslucidi, accenti navy circoscritti --- */
.fbl-surface-test-c {
  background-color: #f3f8f6;
  background-image: linear-gradient(160deg, #f3f8f6 0%, #eef6f3 55%, #eaf3f7 100%);
}
.fbl-surface-test-c .fbl-card, .fbl-surface-test-c .fbl-bento__item, .fbl-surface-test-c .fbl-evidence__row {
  background: #ffffff; border-color: rgba(29, 78, 216, 0.18); box-shadow: var(--pub-shadow-md);
}
.fbl-surface-test-c .fbl-section__eyebrow { color: var(--pub-panel-navy-bg); }

/* =============================================================
   EDITORIALE — testo + visuale a due colonne, mai un lungo paragrafo
   centrato sospeso nello spazio. "--reverse" alterna il lato della
   visuale per dare ritmo compositivo fra sezioni/pagine diverse.
   ============================================================= */
.fbl-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: var(--fbl-p-space-4); }
.fbl-editorial--reverse { direction: rtl; }
.fbl-editorial--reverse > * { direction: ltr; }
.fbl-editorial__narrative { max-width: 56ch; }
.fbl-editorial__narrative h3 { font-size: var(--pub-fs-h2); }
.fbl-editorial__narrative p { font-size: var(--pub-fs-body-lg); color: var(--pub-text-secondary); }
.fbl-editorial__visual { min-width: 0; }

/* --- superfici stratificate: composizione editoriale CSS-only,
   rappresenta profondita'/livelli senza essere un altro diagramma a
   nodi. --- */
.fbl-layered { position: relative; aspect-ratio: 4/3; border-radius: var(--fbl-s-radius-container); overflow: hidden; box-shadow: var(--pub-shadow-lg); background: var(--pub-bg-alt); }
.fbl-layered__plane {
  position: absolute; border-radius: 18px; border: 1px solid var(--pub-line-strong);
  background: var(--pub-gradient-soft); box-shadow: var(--pub-shadow-md);
}
.fbl-layered__plane--1 { inset: 14% 8% 44% 30%; background: var(--pub-tint-blue); z-index: 3; }
.fbl-layered__plane--2 { inset: 34% 26% 24% 10%; background: var(--pub-tint-mint); z-index: 2; }
.fbl-layered__plane--3 { inset: 52% 40% 10% 4%; background: var(--pub-bg); z-index: 1; }
.fbl-layered__tag {
  position: absolute; font-family: var(--fbl-p-font-mono); font-size: 0.7rem; padding: 4px 10px; border-radius: var(--fbl-s-radius-pill);
  background: var(--pub-bg); border: 1px solid var(--pub-line-strong); color: var(--pub-text-secondary); z-index: 4;
}
.fbl-layered__tag--a { top: 10%; right: 10%; }
.fbl-layered__tag--b { bottom: 14%; left: 8%; }

/* =============================================================
   SEQUENZA DI STATI — Stato iniziale → Regola → Evento → Nuovo stato.
   Linguaggio visivo distinto dal diagramma a nodi: tessere rettangolari
   collegate da frecce, lette in ordine.
   ============================================================= */
/* Lista ordinata semantica (<ol>/<li>, FRONTEND-PUBLIC-UI-CONSISTENCY-009
   Attivita' 3): niente elementi-freccia come "li" separati, cosi' un
   lettore di schermo annuncia esattamente 4 elementi. Il connettore e'
   uno <span aria-hidden> DENTRO l'ultima/le altre "li", non tra di
   esse. */
.fbl-sequence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; margin-top: var(--fbl-p-space-4); list-style: none; padding: 0; }
.fbl-sequence__stage {
  position: relative; border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card); background: var(--pub-bg);
  padding: 18px 16px; box-shadow: var(--pub-shadow-sm); text-align: center;
}
.fbl-sequence__stage--accent { background: var(--pub-panel-navy-bg); color: var(--fbl-s-text-primary-dark); border-color: transparent; }
.fbl-sequence__stage--accent .fbl-sequence__label { color: var(--fbl-s-operative); }
.fbl-sequence__label { display: block; font-family: var(--fbl-p-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pub-text-muted); margin-bottom: 6px; }
.fbl-sequence__value { font-weight: 700; font-size: 0.98rem; }
/* Connettore puramente illustrativo: non e' un elemento cliccabile,
   non ha cursor:pointer, non si muove come una CTA. */
.fbl-sequence__connector {
  position: absolute; right: -13px; top: 50%; z-index: 1; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; background: var(--pub-bg); border: 1px solid var(--pub-line-strong);
  color: var(--pub-line-strong); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1;
}

/* =============================================================
   CONFRONTO — regole implicite / regole progettate (prima/dopo)
   ============================================================= */
.fbl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fbl-p-space-3); margin-top: var(--fbl-p-space-4); }
.fbl-compare__col { border-radius: var(--fbl-s-radius-container); padding: 22px 24px; border: 1px solid var(--pub-line); }
.fbl-compare__col--before { background: var(--pub-bg-alt); }
.fbl-compare__col--after { background: var(--pub-tint-mint-soft); border-color: #cdeee2; }
.fbl-compare__heading { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.fbl-compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.92rem; color: var(--pub-text-secondary); }
.fbl-compare__list li { padding-left: 16px; position: relative; }
/* "?" non "×" (FABLE-PUBLIC-PROTOCOL-COPY-INTEGRATION-019): la colonna
   sinistra ora elenca domande da risolvere, non errori — un indicatore
   neutro evita la cornice "sbagliato/corretto" fra le due colonne.
   Selettore esclusivo di Protocollo (.fbl-compare__col--before esiste
   solo in questa pagina): nessun'altra pagina che riusa
   .fbl-compare__list e' influenzata da questa modifica. */
.fbl-compare__col--before .fbl-compare__list li::before { content: "?"; position: absolute; left: 0; color: var(--pub-text-muted); font-weight: 700; }
.fbl-compare__col--after .fbl-compare__list li::before { content: "✓"; position: absolute; left: 0; color: var(--fbl-public-interactive); font-weight: 700; }

/* =============================================================
   PANNELLO PRODOTTO — mockup dimostrativo simile a un'interfaccia
   reale del Lab, senza dati economici reali (solo illustrativi).
   ============================================================= */
.fbl-product-panel {
  border-radius: var(--fbl-s-radius-container); border: 1px solid var(--pub-line-strong); background: var(--pub-bg);
  box-shadow: var(--pub-shadow-lg); overflow: hidden; margin-top: var(--fbl-p-space-4);
}
.fbl-product-panel__bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--pub-line); background: var(--pub-bg-alt); }
.fbl-product-panel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pub-line-strong); }
.fbl-product-panel__title { font-family: var(--fbl-p-font-mono); font-size: 0.75rem; color: var(--pub-text-muted); margin-left: 8px; }
.fbl-product-panel__body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1px; background: var(--pub-line); }
.fbl-product-panel__cell { background: var(--pub-bg); padding: 20px 22px; }
.fbl-product-panel__metric-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--pub-line); font-family: var(--fbl-p-font-mono); font-size: 0.88rem; }
.fbl-product-panel__metric-row:last-child { border-bottom: none; }
.fbl-product-panel__metric-value { font-weight: 700; color: var(--pub-text-primary); }
.fbl-product-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fbl-product-panel__list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--pub-text-secondary); }
.fbl-product-panel__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fbl-public-interactive); flex-shrink: 0; }
.fbl-product-panel__foot { padding: 10px 18px; border-top: 1px solid var(--pub-line); font-size: 0.75rem; color: var(--pub-text-muted); background: var(--pub-bg-alt); }
@media (max-width: 768px) { .fbl-product-panel__body { grid-template-columns: 1fr; } }

/* =============================================================
   HERO NETWORK — visuale editoriale proprietaria per la home: rete
   economica viva (nodi di peso diverso, traiettorie curve, campi
   stratificati), non lo schema a quattro cerchi collegati.
   ============================================================= */
.fbl-network { position: relative; border-radius: var(--fbl-s-radius-container); overflow: hidden; aspect-ratio: 4/3.2; background: var(--pub-gradient-soft); box-shadow: var(--pub-shadow-lg); border: 1px solid var(--pub-line-strong); }
.fbl-network__field { position: absolute; border-radius: 50%; filter: blur(50px); }
.fbl-network__field--a { width: 55%; height: 55%; background: var(--fbl-p-mint-500); opacity: 0.18; top: -10%; right: -8%; }
.fbl-network__field--b { width: 45%; height: 45%; background: #bcd6ff; opacity: 0.45; bottom: -10%; left: -6%; }
.fbl-network__svg { position: relative; width: 100%; height: 100%; z-index: 1; }
.fbl-network__path { fill: none; stroke: var(--fbl-public-interactive); stroke-width: 1.3; opacity: 0.5; }
.fbl-network__node { fill: var(--pub-bg); stroke: var(--fbl-public-interactive); stroke-width: 1.6; }
.fbl-network__node--hub { fill: var(--pub-panel-navy-bg); stroke: var(--fbl-p-mint-500); }
.fbl-network__tag { font-family: var(--fbl-p-font-mono); font-size: 9px; fill: var(--pub-text-muted); }

/* =============================================================
   HOME HERO — full-bleed, ispirata alla Hero del Visual Lab
   (FRONTEND-PUBLIC-HOME-SURGICAL-CORRECTIONS-007). Solo per la Home:
   non e' la macro page_hero() condivisa dalle altre 7 pagine, che
   resta invariata. Nessun riquadro separato intorno all'immagine:
   l'immagine e' a piena larghezza, il testo e' sovrapposto a sinistra.
   ============================================================= */
/* Risale sotto l'header sticky trasparente (stessa altezza approssimata
   della barra, 62px, gia' usata come fallback altrove in questo foglio):
   l'header resta sticky/invariato nella sua posizione, ma essendo
   trasparente lascia vedere l'immagine della hero anche nella fascia
   dove la barra si sovrappone, invece di lasciare uno spazio bianco.
   Il margine negativo si applica al CONTENITORE (media/scrim inclusi,
   che restano inset:0 sull'intera sezione); il contenuto testuale
   riceve un padding-top aggiuntivo separato, cosi' il testo non finisce
   mai sotto la barra. */
/* -88px (non piu' -62px): altezza reale della navbar "Floating
   Contrast" a riposo (FRONTEND-PUBLIC-INTERACTION-AND-NAVBAR-FREEZE-
   016), misurata via bounding box — la vecchia fascia unica trasparente
   era piu' bassa (~62px). Il valore resta un compromesso deliberato fra
   desktop/mobile: sotto i 560px la barra e' leggermente piu' bassa, ma
   la differenza (qualche px) non produce una fascia visibile grazie al
   min-height ampio della hero. */
.fbl-home-hero { position: relative; overflow: hidden; min-height: clamp(502px, calc(52vw + 88px), 682px); display: flex; align-items: center; margin-top: -88px; }
.fbl-home-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fbl-home-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
  transform: scale(1.02); transition: transform 650ms var(--fbl-p-easing-standard, ease), opacity 650ms var(--fbl-p-easing-standard, ease);
}
/* scale-in leggerissimo, ripetibile (categoria B): l'immagine parte
   appena piu' zoomata/opaca e si assesta quando la hero entra nel
   viewport; puo' ripetersi se la sezione esce e rientra chiaramente. */
html.fbl-reveal-armed .fbl-home-hero .fbl-home-hero__media img { transform: scale(1.06); opacity: 0.88; }
html.fbl-reveal-armed .fbl-home-hero.is-visible .fbl-home-hero__media img { transform: scale(1.02); opacity: 1; }
.fbl-home-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(var(--pub-scrim-rgb), 0.66) 0%, rgba(11, 26, 46, 0.42) 34%, rgba(29, 78, 216, 0.14) 58%, transparent 78%);
}
/* livello di profondita' traslucido, deriva lentissima (>=12s), mai legata allo scroll */
.fbl-home-hero__layer {
  position: absolute; z-index: 1; border-radius: 50%; filter: blur(60px); pointer-events: none;
  width: 34%; height: 46%; top: -8%; right: 8%; background: var(--fbl-p-mint-500); opacity: 0.16;
}
.fbl-home-hero__content { position: relative; z-index: 2; width: 100%; padding-block: clamp(32px, 6vw, 56px); padding-top: calc(88px + clamp(32px, 6vw, 56px)); }
.fbl-home-hero__content .fbl-hero__eyebrow { color: #eafbf6; }
.fbl-home-hero__content h1 {
  font-size: var(--pub-fs-hero-display); color: #ffffff; max-width: 15ch; margin-bottom: var(--fbl-p-space-2);
  text-shadow: 0 1px 24px rgba(2, 6, 14, 0.35);
}
.fbl-home-hero__content > p.fbl-hero__lede { color: rgba(244, 248, 255, 0.9); max-width: 46ch; margin-left: 0; }
.fbl-home-hero__content .fbl-hero__status { color: rgba(244, 248, 255, 0.78); justify-content: flex-start; }
.fbl-home-hero__content .fbl-hero__status .fbl-hero__status-dot { background: rgba(244, 248, 255, 0.5); }

@media (prefers-reduced-motion: no-preference) {
  .fbl-home-hero__layer { animation: fbl-home-hero-drift 16s ease-in-out infinite; }
}
@keyframes fbl-home-hero-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-14px, 10px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .fbl-home-hero__layer { animation: none; } }

@media (max-width: 1024px) {
  .fbl-home-hero__scrim { background: linear-gradient(105deg, rgba(var(--pub-scrim-rgb), 0.74) 0%, rgba(11, 26, 46, 0.56) 46%, rgba(29, 78, 216, 0.2) 68%, transparent 86%); }
}
@media (max-width: 560px) {
  .fbl-home-hero { min-height: 542px; }
  .fbl-home-hero__scrim { background: linear-gradient(180deg, rgba(var(--pub-scrim-rgb), 0.78) 0%, rgba(var(--pub-scrim-rgb), 0.62) 55%, rgba(var(--pub-scrim-rgb), 0.42) 100%); }
  .fbl-home-hero__content h1 { max-width: 100%; }
  .fbl-home-hero__content .fbl-hero__cta-row { flex-direction: column; align-items: stretch; }
}

/* =============================================================
   MOVIMENTO — varianti di reveal aggiuntive (vedi anche
   public-motion.css per le regole complete e reduced-motion).
   ============================================================= */
/* FRONTEND-PUBLIC-NAVBAR-AND-MOTION-LAB-013: passo di stagger 70ms -> 110ms (fascia 90-140ms). */
.fbl-stagger > * { transition-delay: calc(var(--fbl-stagger-i, 0) * 110ms); }

/* =============================================================
   PRODUCT THEATRE CIRCOSCRITTO
   (FRONTEND-PUBLIC-HOME-SYNTHESIS-006, alleggerito in
   FRONTEND-PUBLIC-HOME-SURGICAL-CORRECTIONS-007: la grande fascia
   navy non era approvata. Sezione ora chiara, coerente con la Hero;
   il navy resta solo nel piccolo tag di fase, circoscritto.
   Tre cornici sovrapposte sempre percepibili: posteriore blu/grigio
   traslucida, intermedia mint/azzurra traslucida, anteriore il
   pannello chiaro. Vedi FABLE_PUBLIC_VISUAL_GRAMMAR.md. -- */
.fbl-theatre {
  background: linear-gradient(135deg, var(--pub-bg) 0%, var(--pub-tint-dust) 55%, var(--pub-tint-mint-soft) 100%);
  color: var(--pub-text-primary); overflow: hidden; padding-block: clamp(56px, 8vw, 96px);
}
.fbl-theatre__eyebrow { font-family: var(--fbl-p-font-mono); font-size: var(--pub-fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--fbl-public-interactive); text-align: center; margin-bottom: 8px; }
.fbl-theatre__title { font-size: var(--pub-fs-h2); text-align: center; color: var(--pub-text-primary); }
.fbl-theatre__lede { font-size: var(--pub-fs-body-lg); text-align: center; max-width: 62ch; margin: 0 auto; color: var(--pub-text-secondary); }

.fbl-theatre__stage { position: relative; margin-top: clamp(44px, 6vw, 76px); padding: 20px; }
.fbl-theatre__layer {
  position: absolute; border-radius: var(--fbl-s-radius-container); pointer-events: none;
  transition: transform 240ms ease, opacity 240ms ease;
}
.fbl-theatre__layer--back {
  inset: 9% 11% 15% 5%; transform: rotate(-2.2deg); background: rgba(29, 78, 216, 0.07);
  border: 1px solid rgba(29, 78, 216, 0.22); box-shadow: var(--pub-shadow-md);
}
.fbl-theatre__layer--mid {
  inset: 3% 5% 8% 1%; transform: rotate(1.4deg); background: rgba(109, 198, 179, 0.12);
  border: 1px solid rgba(109, 198, 179, 0.38); box-shadow: var(--pub-shadow-md);
}
.fbl-theatre__stage.is-switching .fbl-theatre__layer--back,
.fbl-theatre__stage.is-switching .fbl-theatre__layer--mid {
  transition: transform 220ms ease !important; /* vince sempre sulla transizione 650ms del reveal iniziale */
}
.fbl-theatre__stage.is-switching .fbl-theatre__layer--back { transform: rotate(-2.2deg) translate(-5px, 5px); }
.fbl-theatre__stage.is-switching .fbl-theatre__layer--mid { transform: rotate(1.4deg) translate(4px, -4px); }

.fbl-theatre__panel {
  position: relative; z-index: 2; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--pub-bg); border: 1px solid var(--pub-line-strong); border-radius: var(--fbl-s-radius-container);
  box-shadow: var(--pub-shadow-lg); transition: transform 240ms ease, box-shadow 240ms ease;
}
.fbl-theatre__stage.is-switching .fbl-theatre__panel { transform: scale(1.008); box-shadow: 0 26px 56px rgba(16, 21, 31, 0.16); }
.fbl-theatre__panel-media { position: relative; border-radius: var(--fbl-s-radius-container) 0 0 var(--fbl-s-radius-container); overflow: hidden; min-height: 280px; }
.fbl-theatre__panel-media picture, .fbl-theatre__panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 280ms ease; }
.fbl-theatre__stage.is-switching .fbl-theatre__panel-media img { transform: scale(1.03); }
/* Immagine dinamica per fase (FRONTEND-PUBLIC-NAVBAR-AND-MOTION-LAB-013,
   Blocco 2): quattro <picture> impilate nello stesso spazio (dimensioni
   stabili, nessun CLS), crossfade in opacita' fra 480 e 600ms. */
.fbl-theatre__panel-media picture[data-switch-panel] { opacity: 0; transition: opacity 550ms ease; }
.fbl-theatre__panel-media picture[data-switch-panel].is-active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .fbl-theatre__panel-media picture[data-switch-panel] { transition: none; }
}
.fbl-theatre__phase-tag {
  position: absolute; left: 14px; top: 14px; font-family: var(--fbl-p-font-mono); font-size: 0.7rem; font-weight: 700;
  color: #eafbf6; background: var(--pub-panel-navy-bg); border: 1px solid rgba(109, 198, 179, 0.5);
  border-radius: var(--fbl-s-radius-pill); padding: 5px 12px; transition: opacity 220ms ease;
}
.fbl-theatre__panel-body { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.fbl-theatre__panel-content { display: none; }
.fbl-theatre__panel-content.is-active { display: block; }
/* FRONTEND-PUBLIC-NAVBAR-AND-MOTION-LAB-013: portato a 550ms (fascia
   320-600ms) per restare in sincrono con il crossfade dell'immagine
   dinamica associata (vedi .fbl-theatre__panel-media picture, Blocco 2).
   Correzione specifica di questo componente: il crossfade di
   Context+Product/stepper (righe successive) resta a 320ms. */
html.fbl-js .fbl-theatre__panel-content.is-active { animation: fbl-theatre-crossfade 550ms ease; }
@keyframes fbl-theatre-crossfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fbl-theatre__panel-body h3 { font-size: var(--pub-fs-h3); color: var(--pub-text-primary); margin-bottom: 4px; }
.fbl-theatre__panel-body p { color: var(--pub-text-secondary); font-size: 0.95rem; margin: 0; }
.fbl-theatre__status-row { margin-bottom: 8px; }

.fbl-theatre__selector { position: relative; z-index: 2; max-width: 980px; margin: 20px auto 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fbl-theatre__tab {
  font-family: var(--fbl-p-font-body); font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--pub-text-secondary);
  background: var(--pub-bg); border: 1px solid var(--pub-line-strong); border-radius: var(--fbl-s-radius-pill);
  padding: 10px 20px; cursor: pointer; min-height: 44px; opacity: 1; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.fbl-theatre__tab:hover { border-color: var(--fbl-public-interactive); color: var(--fbl-public-interactive); }
.fbl-theatre__tab:focus-visible { box-shadow: var(--fbl-s-focus-ring-light); outline: none; }
.fbl-theatre__tab[aria-selected="true"] { background: var(--pub-cta-mint); border-color: transparent; color: var(--pub-cta-text); }

/* Movimento: ingresso sfalsato dei livelli (categoria B, puo' ripetersi
   quando la sezione esce/rientra chiaramente dal viewport). */
html.fbl-reveal-armed .fbl-theatre__layer { transition: opacity 650ms ease, transform 650ms ease; opacity: 0; transform: translateY(18px); }
html.fbl-reveal-armed .fbl-theatre__layer.is-visible { opacity: 1; transform: none; }
html.fbl-reveal-armed .fbl-theatre__layer--mid.is-visible { transition-delay: 110ms; }
html.fbl-reveal-armed [data-reveal].fbl-theatre__panel { transform: translateY(26px); transition-duration: 620ms; transition-delay: 160ms; }
html.fbl-reveal-armed [data-reveal].fbl-theatre__panel.is-visible { transform: none; }

/* =============================================================
   EDITORIAL MOSAIC — Home (permanente). Vedi anche il pattern
   temporaneo nel Visual Lab (visual-lab.css), qui adattato con un
   pannello navy circoscritto aggiuntivo e contenuti Home reali.
   ============================================================= */
.fbl-mosaic { background-color: var(--pub-bg-alt); background-image: radial-gradient(ellipse at 85% 0%, rgba(109, 198, 179, 0.10) 0%, transparent 55%); }
.fbl-mosaic__grid {
  margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(120px, auto);
  grid-template-areas: "image image mint navy" "image image blue blue" "text text text text";
  gap: var(--fbl-p-space-3);
  /* overflow-x: clip contiene lo scostamento translateX(40px) delle tre
     card prima dell'ingresso (Attivita' 4, FRONTEND-PUBLIC-INTERACTION-
     AND-NAVBAR-FREEZE-016): senza, le celle sporgono oltre il viewport
     a schermi stretti causando overflow orizzontale di pagina. clip
     (non hidden) per non introdurre un nuovo contesto di scroll. */
  overflow-x: clip;
}
/* Le celle mint/blue/navy/lead sono informative (categoria C,
   FRONTEND-PUBLIC-UI-CONSISTENCY-009): nessuna e' un link, quindi
   niente sollevamento all'hover (imiterebbe l'affordance di navigazione
   di .fbl-media-card, che invece e' un <a> reale). */
.fbl-mosaic__cell { border-radius: 6px; transition: box-shadow 220ms ease, border-color 220ms ease; position: relative; }
.fbl-mosaic__cell:hover, .fbl-mosaic__cell:focus-within { box-shadow: var(--pub-shadow-md); }
.fbl-mosaic__cell--image { grid-area: image; position: relative; overflow: hidden; min-height: 280px; box-shadow: var(--pub-shadow-lg); }
.fbl-mosaic__cell--image picture, .fbl-mosaic__cell--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fbl-mosaic__cell--mint { grid-area: mint; background: var(--pub-tint-mint-soft); border: 1px solid #cdeee2; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.fbl-mosaic__cell--blue { grid-area: blue; background: var(--pub-tint-blue); border: 1px solid #d6e6ff; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.fbl-mosaic__cell--navy { grid-area: navy; background: var(--pub-panel-navy-bg); color: var(--fbl-s-text-primary-dark); border: 1px solid var(--pub-panel-navy-border); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.fbl-mosaic__cell--navy p { color: var(--fbl-s-text-secondary-dark); font-size: 0.85rem; margin: 0; }
.fbl-mosaic__cell--text { grid-area: text; background: transparent; padding: 8px 4px 0; }
.fbl-mosaic__cell--text h3 { font-size: var(--pub-fs-h2); max-width: 26ch; }
.fbl-mosaic__cell--text p { max-width: 68ch; color: var(--pub-text-secondary); }
.fbl-mosaic__cell-eyebrow { font-family: var(--fbl-p-font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pub-text-muted); margin-bottom: 6px; }
.fbl-mosaic__cell-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }

html.fbl-reveal-armed [data-reveal-side].fbl-mosaic__cell--from-left { transform: translateX(-26px); }
html.fbl-reveal-armed [data-reveal-side].fbl-mosaic__cell--from-left.is-visible { transform: none; }
html.fbl-reveal-armed [data-reveal].fbl-mosaic__cell { transform: translateY(22px); transition-duration: 550ms; }
html.fbl-reveal-armed [data-reveal].fbl-mosaic__cell.is-visible { transform: none; }

/* Entrata progressiva delle tre card (FRONTEND-PUBLIC-INTERACTION-AND-
   NAVBAR-FREEZE-016, Attivita' 4): mint (prima, superiore) → navy
   (seconda, superiore) → blue (orizzontale, inferiore), da destra,
   fade+translateX, nessun rimbalzo/rotazione. Il movimento parte
   quando il gruppo (.fbl-mosaic__grid[data-reveal-group]) entra
   davvero nel viewport — stesso meccanismo one-shot gia' usato altrove
   (IntersectionObserver, vedi public-interactions.js). L'immagine
   editoriale (.fbl-mosaic__cell--image) NON e' inclusa: resta col
   reveal generico esistente, separata da questa animazione. */
html.fbl-reveal-armed .fbl-mosaic__grid[data-reveal-group] .fbl-mosaic__cell--mint,
html.fbl-reveal-armed .fbl-mosaic__grid[data-reveal-group] .fbl-mosaic__cell--navy,
html.fbl-reveal-armed .fbl-mosaic__grid[data-reveal-group] .fbl-mosaic__cell--blue {
  opacity: 0; transform: translateX(40px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.fbl-reveal-armed .fbl-mosaic__grid[data-reveal-group].is-visible .fbl-mosaic__cell--mint { opacity: 1; transform: none; transition-delay: 0ms; }
html.fbl-reveal-armed .fbl-mosaic__grid[data-reveal-group].is-visible .fbl-mosaic__cell--navy { opacity: 1; transform: none; transition-delay: 160ms; }
html.fbl-reveal-armed .fbl-mosaic__grid[data-reveal-group].is-visible .fbl-mosaic__cell--blue { opacity: 1; transform: none; transition-delay: 320ms; }

/* =============================================================
   CONTEXT + PRODUCT — nuovo componente condiviso: immagine
   contestuale a piena sezione + pannello prodotto sovrapposto +
   selettore laterale Configura/Esegui/Osserva/Verifica.
   ============================================================= */
.fbl-context-product { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 96px); }
.fbl-context-product__backdrop { position: absolute; inset: 0; z-index: 0; }
.fbl-context-product__backdrop picture, .fbl-context-product__backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.fbl-context-product__scrim { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(var(--pub-scrim-rgb), 0.86) 0%, rgba(11, 26, 46, 0.7) 48%, rgba(11, 26, 46, 0.42) 100%); }
.fbl-context-product__inner { position: relative; z-index: 1; }
.fbl-context-product__eyebrow { font-family: var(--fbl-p-font-mono); font-size: var(--pub-fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #eafbf6; text-align: center; margin-bottom: 8px; }
.fbl-context-product__title { font-size: var(--pub-fs-h2); text-align: center; color: #ffffff; }
.fbl-context-product__lede { font-size: var(--pub-fs-body-lg); text-align: center; max-width: 62ch; margin: 0 auto; color: rgba(244, 248, 255, 0.82); }

.fbl-context-product__layout { margin-top: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 220px 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.fbl-context-product__selector { display: flex; flex-direction: column; gap: 8px; }
/* Causa reale della sfocatura percepita (FRONTEND-PUBLIC-UI-CONSISTENCY-009,
   diagnosi via computed styles): nessun filter/backdrop-filter/transform
   era applicato al testo — il difetto era di contrasto/opacita': testo
   bianco al 75% di alpha su uno sfondo al 4% di alpha, a 15.2px, sopra
   un fondo fotografico dettagliato con scrim. Il blur del contenitore
   (.fbl-context-product__scrim) resta sul fondo; qui il livello figlio
   riceve uno sfondo realmente piu' opaco cosi' il testo non "galleggia"
   piu' direttamente sulla foto. */
.fbl-context-product__tab {
  text-align: left; font-family: var(--fbl-p-font-body); font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: normal;
  color: rgba(244, 248, 255, 0.94);
  background: rgba(var(--pub-scrim-rgb), 0.46); border: 1px solid rgba(255, 255, 255, 0.18); border-left: 3px solid transparent;
  border-radius: var(--fbl-s-radius-control); padding: 12px 16px; cursor: pointer; min-height: 44px; opacity: 1;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.fbl-context-product__tab:hover { color: #ffffff; background: rgba(var(--pub-scrim-rgb), 0.6); border-color: rgba(109, 198, 179, 0.4); }
.fbl-context-product__tab:focus-visible { box-shadow: var(--fbl-s-focus-ring-dark); outline: none; }
.fbl-context-product__tab[aria-selected="true"] { background: rgba(11, 26, 46, 0.8); border-left-color: var(--fbl-p-mint-500); color: #ffffff; }

.fbl-context-product__panel {
  background: var(--pub-bg); border-radius: var(--fbl-s-radius-container); box-shadow: var(--pub-shadow-lg);
  padding: clamp(20px, 3vw, 30px); min-width: 0;
}
.fbl-context-product__panel-content { display: none; }
.fbl-context-product__panel-content.is-active { display: block; }
html.fbl-js .fbl-context-product__panel-content.is-active { animation: fbl-theatre-crossfade 320ms ease; }
.fbl-context-product__panel-content h3 { font-size: var(--pub-fs-h3); margin-bottom: 10px; }
.fbl-context-product__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--pub-line); font-size: 0.92rem; }
.fbl-context-product__row:last-of-type { border-bottom: none; }
.fbl-context-product__row span:first-child { color: var(--pub-text-muted); }
.fbl-context-product__row span:last-child { font-weight: 600; color: var(--pub-text-primary); font-family: var(--fbl-p-font-mono); }
.fbl-context-product__note { font-size: 0.82rem; color: var(--pub-text-muted); margin-top: 14px; }

html.fbl-reveal-armed [data-reveal-scale].fbl-context-product__panel { transform: scale(0.975); transition-duration: 600ms; }
html.fbl-reveal-armed [data-reveal-scale].fbl-context-product__panel.is-visible { transform: none; }

/* =============================================================
   DATA LANDSCAPE — nuova superficie (il cobalt pieno del Visual Lab
   NON e' approvato): immagine ampia + overlay traslucido + due
   superfici "glass" con blur differenziato + pannello chiaro sopra.
   ============================================================= */
.fbl-landscape { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 96px); }
.fbl-landscape__backdrop { position: absolute; inset: 0; z-index: 0; }
.fbl-landscape__backdrop picture, .fbl-landscape__backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.fbl-landscape__overlay { position: absolute; inset: 0; background: linear-gradient(150deg, rgba(var(--pub-scrim-rgb), 0.82) 0%, rgba(20, 41, 67, 0.66) 55%, rgba(29, 78, 216, 0.38) 100%); }
.fbl-landscape__glass { position: absolute; border-radius: var(--fbl-s-radius-container); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); pointer-events: none; }
.fbl-landscape__glass--a { width: 30%; height: 42%; top: -6%; right: 6%; transform: rotate(-5deg); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.fbl-landscape__glass--b { width: 22%; height: 30%; bottom: -8%; left: 8%; transform: rotate(7deg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fbl-landscape__inner { position: relative; z-index: 1; }
.fbl-landscape__eyebrow { font-family: var(--fbl-p-font-mono); font-size: var(--pub-fs-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #eafbf6; text-align: center; margin-bottom: 8px; }
.fbl-landscape__title { font-size: var(--pub-fs-h2); text-align: center; color: #ffffff; }
.fbl-landscape__lede { font-size: var(--pub-fs-body-lg); text-align: center; max-width: 62ch; margin: 0 auto; color: rgba(244, 248, 255, 0.82); }
.fbl-landscape__panel {
  position: relative; z-index: 2; margin-top: clamp(32px, 5vw, 56px); background: var(--pub-bg);
  border-radius: var(--fbl-s-radius-container); box-shadow: var(--pub-shadow-lg); padding: clamp(20px, 3vw, 36px);
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(20px, 3vw, 36px); align-items: start;
}
.fbl-landscape__media { position: relative; border-radius: var(--fbl-s-radius-card); overflow: hidden; aspect-ratio: 4/3.2; box-shadow: var(--pub-shadow-md); }
.fbl-landscape__media picture, .fbl-landscape__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fbl-landscape__body { min-width: 0; }
.fbl-landscape__status-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fbl-landscape__note { font-size: 0.85rem; color: var(--pub-text-muted); margin-top: 10px; }

/* =============================================================
   STATO ATTUALE / PROSSIMO EVENTO — tab reali (FRONTEND-PUBLIC-
   INTERACTION-AND-NAVBAR-FREEZE-016, Attivita' 5). Sostituisce le
   precedenti tab CSS-only .fbl-tabs SOLO in questo pannello: le altre
   pagine che riusano .fbl-tabs (Come funziona §modelli) restano
   invariate, classe diversa (.fbl-landscape-state), nessun impatto.
   ============================================================= */
.fbl-landscape-state { margin-top: var(--fbl-p-space-4); }
.fbl-landscape-state__tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.fbl-landscape-state__tab {
  font-family: var(--fbl-p-font-body); font-weight: 600; font-size: 0.92rem; line-height: 1.25; opacity: 1;
  padding: 9px 16px; min-height: 40px; border-radius: var(--fbl-s-radius-pill); border: 1px solid var(--pub-line-strong);
  background: var(--pub-bg); color: var(--pub-text-secondary); cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.fbl-landscape-state__tab:hover { border-color: var(--fbl-public-interactive); color: var(--fbl-public-interactive); }
.fbl-landscape-state__tab:focus-visible { outline: none; box-shadow: var(--fbl-s-focus-ring-light); }
.fbl-landscape-state__tab[aria-selected="true"] { background: var(--pub-cta-mint); border-color: transparent; color: var(--pub-cta-text); }
.fbl-landscape-state__panel { display: none; }
.fbl-landscape-state__panel.is-active { display: block; }
.fbl-landscape-state__block { padding: 10px 0; border-bottom: 1px dashed var(--pub-line); }
.fbl-landscape-state__block:last-child { border-bottom: none; }
.fbl-landscape-state__block h4 { font-size: 0.98rem; margin-bottom: 4px; }
html.fbl-js .fbl-landscape-state__panel.is-active { animation: fbl-theatre-crossfade 320ms ease; }

/* --- transizione fra dataset del grafico dedicato: SOLO
   .fbl-chart--interactive (mai .fbl-chart standard, congelato altrove)
   anima "d"/"cx"/"cy" quando public-interactions.js li riscrive.
   Convive con l'animazione di formazione iniziale (stroke-dashoffset/
   opacity, proprieta' diverse, gia' definita in public-motion.css). --- */
.fbl-chart--interactive .fbl-chart__line,
.fbl-chart--interactive .fbl-chart__area-fill { transition: d 780ms cubic-bezier(0.65, 0, 0.35, 1); }
.fbl-chart--interactive .fbl-chart__point { transition: cx 780ms cubic-bezier(0.65, 0, 0.35, 1), cy 780ms cubic-bezier(0.65, 0, 0.35, 1); }
@media (prefers-reduced-motion: reduce) {
  .fbl-chart--interactive .fbl-chart__line,
  .fbl-chart--interactive .fbl-chart__area-fill,
  .fbl-chart--interactive .fbl-chart__point { transition: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .fbl-landscape__glass--b { animation: fbl-landscape-drift 15s ease-in-out infinite; }
}
@keyframes fbl-landscape-drift {
  0%, 100% { transform: rotate(7deg) translate(0, 0); }
  50% { transform: rotate(7deg) translate(8px, -10px); }
}
@media (prefers-reduced-motion: reduce) { .fbl-landscape__glass--b { animation: none; } }

/* =============================================================
   EDITORIAL MEDIA CARDS — 3 card con immagine, dimensioni non
   uniformi, intera card cliccabile, hover con leggero movimento
   dell'immagine.
   ============================================================= */
.fbl-media-cards { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: var(--fbl-p-space-4); margin-top: var(--fbl-p-space-4); align-items: stretch; }
.fbl-media-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: var(--fbl-s-radius-container);
  overflow: hidden; border: 1px solid var(--pub-line); background: var(--pub-bg); box-shadow: var(--pub-shadow-sm);
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.fbl-media-card:hover, .fbl-media-card:focus-visible { box-shadow: var(--pub-shadow-md); transform: translateY(-3px); border-color: var(--pub-line-strong); outline: none; }
.fbl-media-card__media { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.fbl-media-card--wide .fbl-media-card__media { aspect-ratio: 16/10; }
.fbl-media-card__media picture, .fbl-media-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
.fbl-media-card:hover .fbl-media-card__media img, .fbl-media-card:focus-visible .fbl-media-card__media img { transform: scale(1.045); }
.fbl-media-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fbl-media-card__eyebrow { font-family: var(--fbl-p-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pub-text-muted); }
.fbl-media-card__title { font-size: var(--pub-fs-card-title); font-weight: 700; color: var(--pub-text-primary); }
.fbl-media-card__text { color: var(--pub-text-secondary); margin: 0; flex: 1; }
.fbl-media-card__arrow { align-self: flex-end; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--pub-line-strong); display: flex; align-items: center; justify-content: center; color: var(--fbl-public-interactive); transition: transform 200ms ease, background-color 200ms ease; }
.fbl-media-card:hover .fbl-media-card__arrow, .fbl-media-card:focus-visible .fbl-media-card__arrow { transform: translateX(3px); background: var(--pub-tint-blue); }

/* =============================================================
   CTA FINALE ARRICCHITA — gradiente Fable + forma laterale, non un
   blocco centrato isolato; footer collegato visivamente (nessun
   margine/bordo che li separi visivamente).
   ============================================================= */
.fbl-final-cta { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 56px); background: linear-gradient(120deg, var(--pub-tint-blue) 0%, var(--pub-tint-mint) 100%); }
.fbl-final-cta__layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.fbl-final-cta__title { font-size: var(--pub-fs-h2); color: var(--pub-text-primary); }
.fbl-final-cta__lede { font-size: var(--pub-fs-body-lg); color: var(--pub-text-secondary); max-width: 52ch; }
/* Correzione (FRONTEND-PUBLIC-HOME-SURGICAL-CORRECTIONS-007): i cerchi
   concentrici non erano approvati ("generici e dozzinali"). Sostituiti
   con un piccolo crop editoriale di fable-card-observable-states,
   contenuto, con maschera a bordo sfumato: bilancia la CTA senza
   competere con il testo. */
.fbl-final-cta__shape {
  position: relative; aspect-ratio: 1/1; max-width: 300px; margin: 0 auto; border-radius: 50%;
  overflow: hidden; box-shadow: var(--pub-shadow-lg); border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-mask-image: radial-gradient(circle, #000 68%, transparent 100%);
  mask-image: radial-gradient(circle, #000 68%, transparent 100%);
}
.fbl-final-cta__shape img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 55%; }

/* =============================================================
   Responsive — Home Synthesis (segue i breakpoint gia' in uso:
   1220/1024/900/768/560)
   ============================================================= */
@media (max-width: 1024px) {
  .fbl-mosaic__grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "image image" "mint blue" "navy navy" "text text"; }
  .fbl-theatre__panel { grid-template-columns: 1fr; }
  .fbl-theatre__panel-media { min-height: 220px; border-radius: var(--fbl-s-radius-container) var(--fbl-s-radius-container) 0 0; }
  .fbl-context-product__layout { grid-template-columns: 1fr; }
  .fbl-context-product__selector { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .fbl-context-product__tab { flex-shrink: 0; border-left: none; border-bottom: 3px solid transparent; }
  .fbl-context-product__tab[aria-selected="true"] { border-bottom-color: var(--fbl-p-mint-500); }
  .fbl-landscape__panel { grid-template-columns: 1fr; }
  .fbl-media-cards { grid-template-columns: 1fr 1fr; }
  .fbl-media-cards .fbl-media-card:last-child { grid-column: span 2; }
  .fbl-final-cta__layout { grid-template-columns: 1fr; text-align: center; }
  .fbl-final-cta__shape { order: 1; max-width: 220px; margin-top: 8px; }
}

@media (max-width: 768px) {
  .fbl-mosaic__grid { grid-template-columns: 1fr; grid-template-areas: "image" "mint" "blue" "navy" "text"; }
  .fbl-media-cards { grid-template-columns: 1fr; }
  .fbl-media-cards .fbl-media-card:last-child { grid-column: span 1; }
  .fbl-final-cta__shape { max-width: 160px; }
}

/* =============================================================
   NAVIGAZIONE SECONDARIA AD ANCORA (FRONTEND-PUBLIC-PAGE-SYSTEM-008)
   Compatta, sticky solo se non copre troppo spazio, active state
   aggiornato durante lo scroll (vedi public-interactions.js).
   ============================================================= */
.fbl-page-nav { position: sticky; top: var(--fbl-header-h, 62px); z-index: calc(var(--fbl-s-z-header) - 1); background: rgba(var(--pub-header-surface-rgb), 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--pub-line); }
.fbl-page-nav__list { display: flex; gap: 4px; overflow-x: auto; list-style: none; margin: 0; padding: 8px var(--pub-container-pad); max-width: var(--pub-container-std); margin-inline: auto; scrollbar-width: thin; }
.fbl-page-nav__list a {
  flex-shrink: 0; font-size: 0.85rem; font-weight: 600; color: var(--pub-text-secondary); text-decoration: none;
  padding: 7px 12px; border-radius: var(--fbl-s-radius-pill); transition: background-color 180ms ease, color 180ms ease;
  white-space: nowrap;
}
.fbl-page-nav__list a:hover { background: var(--pub-tint-blue); color: var(--fbl-public-interactive); }
.fbl-page-nav__list a.is-active { background: var(--pub-cta-mint); color: var(--pub-cta-text); }
.fbl-page-nav__list a:focus-visible { box-shadow: var(--fbl-s-focus-ring-light); outline: none; }
[id][data-nav-section] { scroll-margin-top: calc(var(--fbl-header-h, 62px) + 54px); }

/* =============================================================
   DIAGRAMMA RELAZIONALE (Protocollo) — Creatore ↔ Motore ↔
   Utilizzatore. Distinto dal diagramma standard a quattro cerchi:
   unico diagramma nodi-e-archi ammesso in questa pagina. Interattivo
   su hover/focus via :focus-within, senza JavaScript.
   ============================================================= */
/* Categoria C (informativa, FRONTEND-PUBLIC-UI-CONSISTENCY-009): il nodo
   non naviga e non esegue alcuna azione al click, quindi niente
   cursor:pointer (che promette un'azione inesistente) e niente
   role="button" nel markup — resta focalizzabile via tastiera solo per
   rivelare la relazione (etichetta), come farebbe un tooltip. */
.fbl-relational-diagram { margin: var(--fbl-p-space-5) auto 0; max-width: 1080px; }
.fbl-relational-diagram__svg { width: 100%; height: auto; }
.fbl-relational-diagram__pair:focus { outline: none; }
.fbl-relational-diagram__link { stroke: var(--pub-line-strong); stroke-width: 2.2; transition: stroke 200ms ease, stroke-width 200ms ease, filter 200ms ease; }
.fbl-relational-diagram__pair:hover .fbl-relational-diagram__link,
.fbl-relational-diagram__pair:focus-visible .fbl-relational-diagram__link { stroke: var(--fbl-public-interactive); stroke-width: 4; filter: drop-shadow(0 0 7px rgba(37, 86, 216, 0.28)); }
.fbl-relational-diagram__pair:focus-visible .fbl-relational-diagram__link { filter: drop-shadow(0 0 0 var(--fbl-public-interactive)); }
.fbl-relational-diagram__node { fill: var(--pub-bg); stroke: var(--pub-line-strong); stroke-width: 2.2; transition: stroke 200ms ease, transform 200ms ease, filter 200ms ease; transform-box: fill-box; transform-origin: center; }
.fbl-relational-diagram__node--mint { fill: var(--pub-tint-mint); }
.fbl-relational-diagram__node--blue { fill: var(--pub-tint-blue); }
.fbl-relational-diagram__node--hub { fill: var(--pub-panel-navy-bg); stroke: var(--fbl-p-mint-500); }
.fbl-relational-diagram__pair:hover .fbl-relational-diagram__node,
.fbl-relational-diagram__pair:focus-visible .fbl-relational-diagram__node { stroke: var(--fbl-public-interactive); transform: scale(1.07); filter: drop-shadow(0 10px 18px rgba(var(--pub-scrim-rgb-alt), 0.12)); }
.fbl-relational-diagram__hub-pair:focus { outline: none; }
.fbl-relational-diagram__hub-pair:hover .fbl-relational-diagram__node,
.fbl-relational-diagram__hub-pair:focus-visible .fbl-relational-diagram__node { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(73, 227, 194, 0.32)); }
.fbl-relational-diagram__label { font-family: var(--fbl-p-font-body); font-size: 19px; font-weight: 700; fill: var(--pub-text-primary); pointer-events: none; }
.fbl-relational-diagram__label--small { font-size: 15px; font-weight: 600; }
.fbl-relational-diagram__tag { font-family: var(--fbl-p-font-mono); font-size: 14px; font-weight: 700; fill: var(--fbl-public-interactive); opacity: 0; transition: opacity 200ms ease, transform 200ms ease; pointer-events: none; }
.fbl-relational-diagram__pair:hover .fbl-relational-diagram__tag,
.fbl-relational-diagram__pair:focus-visible .fbl-relational-diagram__tag,
.fbl-relational-diagram__hub-pair:hover .fbl-relational-diagram__tag,
.fbl-relational-diagram__hub-pair:focus-visible .fbl-relational-diagram__tag { opacity: 1; }
.fbl-relational-diagram__tag--hub { fill: var(--pub-text-primary); }
.fbl-relational-diagram__caption { text-align: center; font-size: 0.85rem; color: var(--pub-text-muted); margin-top: var(--fbl-s-inset-sm); }
.fbl-relational-diagram__svg:has(.fbl-relational-diagram__hub-pair:hover) .fbl-relational-diagram__link,
.fbl-relational-diagram__svg:has(.fbl-relational-diagram__hub-pair:focus-visible) .fbl-relational-diagram__link {
  stroke: var(--fbl-public-interactive);
  stroke-width: 4;
  filter: drop-shadow(0 0 7px rgba(37, 86, 216, 0.3));
}
.fbl-relational-diagram__svg:has(.fbl-relational-diagram__hub-pair:hover) .fbl-relational-diagram__pair .fbl-relational-diagram__node,
.fbl-relational-diagram__svg:has(.fbl-relational-diagram__hub-pair:focus-visible) .fbl-relational-diagram__pair .fbl-relational-diagram__node {
  stroke: var(--fbl-public-interactive);
  filter: drop-shadow(0 8px 15px rgba(37, 86, 216, 0.12));
}

/* --- variante mosaic senza cella immagine (Protocollo "La risposta
   Fable"): stesse classi cella di .fbl-mosaic, disposizione diversa
   (nessuna immagine, tre colonne di testo asimmetriche) --- */
.fbl-mosaic-text__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(120px, auto);
  grid-template-areas: "lead mint blue" "lead navy navy"; gap: var(--fbl-p-space-3); margin-top: var(--fbl-p-space-4);
}
.fbl-mosaic-text__grid .fbl-mosaic__cell--lead { grid-area: lead; background: var(--pub-bg); border: 1px solid var(--pub-line-strong); box-shadow: var(--pub-shadow-md); padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.fbl-mosaic-text__grid .fbl-mosaic__cell--mint { grid-area: mint; }
.fbl-mosaic-text__grid .fbl-mosaic__cell--blue { grid-area: blue; }
.fbl-mosaic-text__grid .fbl-mosaic__cell--navy { grid-area: navy; flex-direction: row; align-items: center; gap: 14px; }
.fbl-mosaic-text__grid .fbl-mosaic__cell--navy ul { margin: 0; padding-left: 18px; }

/* =============================================================
   STEPPER (Come funziona) — skin dedicata del selettore generico
   data-fbl-switcher: marcatori numerati, non gli stessi pill di
   Product Theatre/Context+Product.
   ============================================================= */
.fbl-stepper__list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--fbl-p-space-4); }
.fbl-stepper__tab {
  display: flex; align-items: center; gap: 8px; font-family: var(--fbl-p-font-body); font-size: 1rem; font-weight: 600; line-height: 1.25;
  color: var(--pub-text-secondary); background: var(--pub-bg); border: 1px solid var(--pub-line-strong);
  border-radius: var(--fbl-s-radius-pill); padding: 8px 16px 8px 8px; cursor: pointer; min-height: 44px; opacity: 1;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.fbl-stepper__tab-index {
  width: 24px; height: 24px; border-radius: 50%; background: var(--pub-bg-alt); border: 1px solid var(--pub-line-strong);
  display: flex; align-items: center; justify-content: center; font-family: var(--fbl-p-font-mono); font-size: 0.75rem; flex-shrink: 0;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.fbl-stepper__tab:hover { border-color: var(--fbl-public-interactive); color: var(--fbl-public-interactive); }
.fbl-stepper__tab:focus-visible { box-shadow: var(--fbl-s-focus-ring-light); outline: none; }
.fbl-stepper__tab[aria-selected="true"] { background: var(--pub-panel-navy-bg); border-color: transparent; color: #ffffff; }
.fbl-stepper__tab[aria-selected="true"] .fbl-stepper__tab-index { background: var(--pub-cta-mint); border-color: transparent; color: var(--pub-cta-text); }
.fbl-stepper__panel { border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); background: var(--pub-bg); padding: clamp(20px, 3vw, 30px); box-shadow: var(--pub-shadow-sm); }
.fbl-stepper__panel-content { display: none; }
.fbl-stepper__panel-content.is-active { display: block; }
html.fbl-js .fbl-stepper__panel-content.is-active { animation: fbl-theatre-crossfade 320ms ease; }
.fbl-stepper__panel-content h3 { font-size: var(--pub-fs-h3); margin-bottom: 8px; }

/* --- ciclo in cinque card (Come funziona "Ogni tokenomics attraversa
   lo stesso ciclo", FRONTEND-PUBLIC-UI-CONSISTENCY-009 Attivita' 4):
   estende .fbl-steps trasformando ogni .fbl-steps__item in una card
   reale (superficie, bordo, ombra) con numero, icona lineare, titolo,
   descrizione e riga "Risultato" distinta, collegate da una linea di
   avanzamento. Le card sono informative: nessun href, nessun
   cursor:pointer, nessun hover che promette navigazione — vedi
   Attivita' 2/nota su .fbl-card. --- */
.fbl-steps--five {
  grid-template-columns: repeat(5, 1fr); counter-reset: fbl-step; position: relative;
  padding-top: 6px; margin-top: var(--fbl-p-space-5);
}
.fbl-steps--five::before {
  content: ""; position: absolute; top: 33px; left: 6%; right: 6%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--pub-line-strong) 0%, var(--pub-line-strong) 72%, var(--fbl-p-mint-500) 100%);
}
.fbl-steps--five .fbl-steps__item {
  position: relative; z-index: 1; padding: 58px 16px 16px; display: flex; flex-direction: column; gap: 6px;
  background: var(--pub-bg); border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card);
  box-shadow: var(--pub-shadow-sm); transition: box-shadow 200ms ease, border-color 200ms ease;
}
.fbl-steps--five .fbl-steps__item:hover { box-shadow: var(--pub-shadow-md); border-color: var(--pub-line-strong); }
/* Leggera alternanza verticale desktop, non uno slider: tutti e cinque
   i passaggi restano visibili e leggibili contemporaneamente. */
.fbl-steps--five .fbl-steps__item:nth-child(even) { transform: translateY(16px); }
.fbl-steps--five .fbl-steps__item::before {
  top: 16px; left: 16px; width: 32px; height: 32px; font-size: 0.85rem;
}
/* Stato visivo progressivo: l'ultimo passo (Verifica) appare "raggiunto",
   coerente con la linea di avanzamento che termina in mint. */
.fbl-steps--five .fbl-steps__item:last-child::before { background: var(--pub-cta-mint); border-color: transparent; color: var(--pub-cta-text); }
.fbl-steps--five .fbl-steps__icon {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  color: var(--fbl-public-interactive); margin-bottom: 2px;
}
.fbl-steps--five .fbl-steps__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fbl-steps__result { display: block; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--pub-line); font-size: 0.85rem; color: var(--pub-text-muted); }
.fbl-steps__result strong { color: var(--pub-text-secondary); font-weight: 600; }

/* --- pannello di stato compatto (Come funziona "Stato economico"):
   NON l'intero Data Landscape, solo righe metriche etichettate. --- */
.fbl-state-panel { border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); background: var(--pub-bg); box-shadow: var(--pub-shadow-sm); padding: clamp(18px, 2.5vw, 28px); margin-top: var(--fbl-p-space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 24px; }
.fbl-state-panel__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--pub-line); font-size: 0.92rem; }
.fbl-state-panel__row span:first-child { color: var(--pub-text-muted); }
.fbl-state-panel__row span:last-child { font-weight: 600; color: var(--pub-text-primary); font-family: var(--fbl-p-font-mono); }
.fbl-state-panel__note { grid-column: 1 / -1; font-size: 0.85rem; color: var(--pub-text-muted); margin-top: 6px; }

/* --- Context+Product, variante B (Come funziona "Ciclo di
   un'operazione"): stesso principio (immagine di contesto + pannello
   + selettore) ma selettore orizzontale in alto e proporzioni diverse,
   per non essere una copia pixel-per-pixel della Home. --- */
.fbl-context-product--variant-b .fbl-context-product__layout { grid-template-columns: 1fr; }
.fbl-context-product--variant-b .fbl-context-product__selector { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: var(--fbl-p-space-3); }
.fbl-context-product--variant-b .fbl-context-product__tab { border-left: none; border-bottom: 3px solid transparent; border-radius: var(--fbl-s-radius-card) var(--fbl-s-radius-card) 0 0; text-align: center; }
.fbl-context-product--variant-b .fbl-context-product__tab[aria-selected="true"] { border-bottom-color: var(--fbl-p-mint-500); }
.fbl-context-product--variant-b .fbl-context-product__panel { max-width: 720px; margin: 0 auto; }

/* =============================================================
   SISTEMA DI CONTROLLI CONSOLIDATO (FRONTEND-PUBLIC-CONTROLS-AND-
   FINAL-PAGES-011) — varianti B (mint/blue), C, D approvate nel
   laboratorio /visual-lab/controls. La variante A ("solid") NON e'
   stata approvata per il sito pubblico e resta solo nel laboratorio.

   Ogni .fbl-control--* e' una SKIN (colore/bordo/stato), non un
   layout: si applica ACCANTO alla classe del componente esistente
   (es. class="fbl-stepper__tab fbl-control fbl-control--d"), che
   resta responsabile di spaziatura/orientamento/icone. Applicata
   selettivamente pagina per pagina — vedi la tabella "Assegnazione
   controlli" in FABLE_PUBLIC_PAGE_VISUAL_ASSIGNMENT_MATRIX.md — non
   e' stata sovrascritta la skin di nessun controllo su una pagina
   congelata (Home/Tecnologia e verifica), per non alterarne il
   rendering approvato: solo Come funziona (esplicitamente autorizzata
   "salvo applicazione dei controlli approvati") e il nuovo Protocol
   Lab ricevono le classi .fbl-control--*.
   ============================================================= */
.fbl-control {
  font-family: var(--fbl-p-font-body); font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: normal;
  border-radius: var(--fbl-s-radius-card); opacity: 1; cursor: pointer; min-height: 44px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
@media (prefers-reduced-motion: reduce) { .fbl-control { transition: none; } }

/* --- B-mint: superficie chiara professionale, selezionato mint +
   testo navy (gia' applicata in Home/Product Theatre, congelata: qui
   solo documentata/riservata, nessuna nuova classe aggiunta a Home). --- */
.fbl-control--b-mint { background: var(--pub-bg); color: var(--pub-text-secondary); border: 1px solid var(--pub-line-strong); }
.fbl-control--b-mint:hover { border-color: var(--fbl-public-interactive); color: var(--fbl-public-interactive); }
.fbl-control--b-mint:focus-visible { box-shadow: var(--fbl-s-focus-ring-light); outline: none; }
.fbl-control--b-mint[aria-selected="true"] { background: var(--pub-cta-mint); border-color: transparent; color: var(--pub-cta-text); }

/* --- B-blue: superficie chiara, selezionato blu Fable + testo
   bianco pieno (contrasto verificato, vedi output del ticket). Prima
   applicazione reale: percorso "Entra/Configura/Esegui/Osserva" di
   Protocol Lab — distingue l'identita' del Lab dal mint di Home. --- */
.fbl-control--b-blue { background: var(--pub-bg); color: var(--pub-text-secondary); border: 1px solid var(--pub-line-strong); }
.fbl-control--b-blue:hover { border-color: var(--fbl-public-interactive); color: var(--fbl-public-interactive); }
.fbl-control--b-blue:focus-visible { box-shadow: var(--fbl-s-focus-ring-light); outline: none; }
.fbl-control--b-blue[aria-selected="true"] { background: var(--fbl-public-interactive); border-color: transparent; color: #ffffff; }

/* --- C: outline luminoso sopra fotografia. Corretto rispetto al
   laboratorio: l'hover ora aumenta REALMENTE l'opacita' del fondo (non
   solo l'alpha del bordo) e aggiunge una lieve illuminazione interna
   (box-shadow inset + glow), cosi' resta percepibile anche sopra
   un'immagine chiara. Applicata al ciclo di un'operazione di Come
   funziona (gia' su fondo fotografico). --- */
.fbl-control--c { position: relative; background: rgba(var(--pub-scrim-rgb), 0.55); color: rgba(244, 248, 255, 0.98); border: 2px solid rgba(109, 198, 179, 0.5); }
.fbl-control--c:hover {
  background: rgba(var(--pub-scrim-rgb), 0.76); border-color: var(--fbl-p-mint-500);
  box-shadow: inset 0 0 0 1px rgba(109, 198, 179, 0.3), 0 0 18px rgba(73, 227, 194, 0.22);
}
.fbl-control--c:focus-visible { box-shadow: var(--fbl-s-focus-ring-dark); outline: none; }
.fbl-control--c[aria-selected="true"] { background: rgba(11, 26, 46, 0.88); border-color: var(--fbl-p-mint-500); color: #ffffff; }
.fbl-control--c[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--fbl-p-mint-500);
}

/* --- D: editorial tabs. Correzione obbligatoria rispetto al
   laboratorio: il testo inattivo NON usa piu' bianco attenuato
   (rgba(...,0.92) su fondo scuro-vetro, poco nitido). Confrontate due
   soluzioni (vedi output del ticket): (1) bianco/off-white
   completamente opaco su fondo scuro pieno; (2) testo navy pieno su
   superficie chiara. Scelta la (2): contrasto garantito (>15:1, non
   solo AA) senza alcun trucco di opacita', e coerente con il contesto
   reale in cui D viene applicata (sezioni su fondo chiaro, mai
   fotografico). --- */
.fbl-control--d { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--pub-bg-alt); color: var(--pub-text-primary); border: 1px solid var(--pub-line-strong); padding-block: 14px; }
.fbl-control--d:hover { border-color: var(--fbl-public-interactive); background: var(--pub-bg); }
.fbl-control--d:focus-visible { box-shadow: var(--fbl-s-focus-ring-light); outline: none; }
.fbl-control--d[aria-selected="true"] { background: var(--pub-cta-mint); color: var(--pub-cta-text); border-color: transparent; }

/* =============================================================
   EVIDENCE STACK (Tecnologia e verifica, FRONTEND-PUBLIC-UI-
   CONSISTENCY-NEXT-PAGES-010) — sezione a livelli Motore/Stato/
   Ledger e verifica/Integrazione. Ogni riga leggermente piu'
   rientrata della precedente (stratificazione), l'ultima su
   pannello navy circoscritto: linguaggio distinto sia dal Product
   Theatre (Home) sia dal diagramma relazionale (Protocollo).
   Puramente informativa: nessun href, nessun cursor:pointer.
   ============================================================= */
.fbl-evidence-stack { display: flex; flex-direction: column; gap: 14px; margin-top: var(--fbl-p-space-5); counter-reset: fbl-layer; }
.fbl-evidence-stack__row {
  position: relative; counter-increment: fbl-layer; display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 20px; align-items: center;
  background: var(--pub-bg); border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-card);
  padding: 20px 24px; box-shadow: var(--pub-shadow-sm);
}
.fbl-evidence-stack__row::before {
  content: "0" counter(fbl-layer); position: absolute; top: -10px; left: 20px; font-family: var(--fbl-p-font-mono);
  font-size: 0.7rem; color: var(--pub-text-muted); background: var(--pub-bg-alt); border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-pill); padding: 2px 8px;
}
.fbl-evidence-stack__row:nth-child(2) { margin-inline-start: 16px; }
.fbl-evidence-stack__row:nth-child(3) { margin-inline-start: 32px; }
.fbl-evidence-stack__row:nth-child(4) { margin-inline-start: 48px; background: var(--pub-panel-navy-bg); color: var(--fbl-s-text-primary-dark); border-color: transparent; }
.fbl-evidence-stack__row:nth-child(4)::before { background: rgba(255, 255, 255, 0.08); border-color: var(--pub-panel-navy-border); color: var(--fbl-s-text-secondary-dark); }
.fbl-evidence-stack__label { font-family: var(--fbl-p-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pub-text-muted); }
.fbl-evidence-stack__row:nth-child(4) .fbl-evidence-stack__label { color: var(--fbl-s-operative); }
.fbl-evidence-stack__title { font-weight: 700; font-size: 1.05rem; margin: 2px 0 4px; }
.fbl-evidence-stack__text { color: var(--pub-text-secondary); margin: 0; }
.fbl-evidence-stack__row:nth-child(4) .fbl-evidence-stack__text { color: var(--fbl-s-text-secondary-dark); }

html.fbl-reveal-armed [data-reveal-group] .fbl-evidence-stack__row { transition: opacity 500ms ease, transform 500ms ease; opacity: 0; transform: translateY(16px); }
html.fbl-reveal-armed [data-reveal-group] .fbl-evidence-stack__row.is-visible { opacity: 1; transform: none; }
html.fbl-reveal-armed [data-reveal-group] .fbl-evidence-stack__row.is-visible:nth-child(2) { transition-delay: 110ms; }
html.fbl-reveal-armed [data-reveal-group] .fbl-evidence-stack__row.is-visible:nth-child(3) { transition-delay: 220ms; }
html.fbl-reveal-armed [data-reveal-group] .fbl-evidence-stack__row.is-visible:nth-child(4) { transition-delay: 330ms; }

/* --- selettore "livello tecnico" (Tecnologia e verifica): riusa la
   skin stepper gia' introdotta per Come funziona, senza duplicarne il
   contenuto o la posizione in pagina. --- */
.fbl-tech-panel { border: 1px solid var(--pub-line); border-radius: var(--fbl-s-radius-container); background: var(--pub-bg); padding: clamp(20px, 3vw, 30px); box-shadow: var(--pub-shadow-sm); margin-top: var(--fbl-p-space-4); }

/* --- banda tecnica compatta (Protocol Lab, FRONTEND-PUBLIC-CONTROLS-
   AND-FINAL-PAGES-011): fascia bassa, non una sezione Data Landscape
   completa — solo un accento fotografico circoscritto. --- */
.fbl-tech-banner { position: relative; overflow: hidden; min-height: 140px; display: flex; align-items: center; }
.fbl-tech-banner__media { position: absolute; inset: 0; z-index: 0; }
.fbl-tech-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fbl-tech-banner__scrim { position: absolute; inset: 0; background: rgba(var(--pub-scrim-rgb), 0.66); }
.fbl-tech-banner__inner { position: relative; z-index: 1; padding-block: 22px; }
.fbl-tech-banner__text { color: #ffffff; font-size: var(--pub-fs-body-lg); text-align: center; max-width: 60ch; margin: 0 auto; }
.fbl-tech-banner .fbl-section__title, .fbl-tech-banner .fbl-section__eyebrow { margin-bottom: 8px; }

/* --- coppia di immagini sovrapposte con offset (Contatti): variante
   compositiva distinta da singolo fotogramma/backdrop/card, in linea
   con le tecniche gia' usate altrove nel sito pubblico. --- */
.fbl-offset-duo { position: relative; max-width: 520px; margin: 40px auto 8px; aspect-ratio: 4/3; }
.fbl-offset-duo__base, .fbl-offset-duo__accent {
  position: absolute; border-radius: var(--fbl-s-radius-container); overflow: hidden;
  box-shadow: var(--pub-shadow-lg); border: 1px solid var(--pub-line-strong); background: var(--pub-bg-alt);
}
.fbl-offset-duo__base { inset: 0 12% 12% 0; z-index: 0; }
.fbl-offset-duo__accent { width: 46%; aspect-ratio: 4/3; right: -6%; bottom: -10%; z-index: 1; }
.fbl-offset-duo__base img, .fbl-offset-duo__accent img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) {
  .fbl-offset-duo { max-width: 320px; }
}

/* --- card fotografica grande + card secondarie (Applicazioni,
   FRONTEND-PUBLIC-UI-CONSISTENCY-NEXT-PAGES-010, Parte C):
   estensione del bento generico con una cella fotografica e icone
   lineari per le card informative. --- */
.fbl-bento__item--photo { position: relative; overflow: hidden; padding: 0; justify-content: flex-end; min-height: 260px; }
.fbl-bento__item--photo picture, .fbl-bento__item--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fbl-bento__item--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--pub-scrim-rgb), 0.82) 0%, rgba(var(--pub-scrim-rgb), 0.28) 55%, transparent 85%); }
.fbl-bento__item--photo__body { position: relative; z-index: 1; padding: clamp(20px, 3vw, 28px); }
.fbl-bento__item--photo .fbl-card__title, .fbl-bento__item--photo .fbl-card__text { color: #ffffff; }
.fbl-bento__item--photo .fbl-card__text { color: rgba(244, 248, 255, 0.86); }
.fbl-bento__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--fbl-public-interactive); margin-bottom: 10px; }
.fbl-bento__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================
   AUTENTICAZIONE (Accedi/Registrati) — stessa grammatica visiva del
   sito pubblico: sfondo fotografico velato a piena larghezza (stesso
   pattern di Context+Product/Data Landscape) con una card chiara in
   primo piano che contiene form, alert e link. Navbar/footer
   pubblici, non lo shell v2 usato dal resto dell'applicazione.
   ============================================================= */
.fbl-auth-hero { position: relative; overflow: hidden; min-height: clamp(560px, 82vh, 900px); display: flex; align-items: center; margin-top: -88px; padding-block: calc(88px + clamp(40px, 6vw, 72px)) clamp(40px, 6vw, 72px); }
.fbl-auth-hero__media { position: absolute; inset: 0; z-index: 0; }
.fbl-auth-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fbl-auth-hero__scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(var(--pub-scrim-rgb), 0.82) 0%, rgba(11, 26, 46, 0.62) 46%, rgba(29, 78, 216, 0.3) 100%); }
.fbl-auth-hero__content { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
.fbl-auth-card {
  width: 100%; max-width: 480px; background: var(--pub-bg); border-radius: var(--fbl-s-radius-container);
  border: 1px solid var(--pub-line); box-shadow: var(--pub-shadow-lg); padding: clamp(28px, 4vw, 44px);
}
.fbl-auth-card .fbl-hero__eyebrow { text-align: center; margin-bottom: 6px; }
.fbl-auth-card h1 { font-size: var(--pub-fs-h2); text-align: center; color: var(--pub-text-primary); margin-bottom: 10px; }
.fbl-auth-card__intro { text-align: center; color: var(--pub-text-secondary); font-size: 0.96rem; margin: 0 auto var(--fbl-p-space-4); }
.fbl-form { display: flex; flex-direction: column; gap: var(--fbl-p-space-3); margin-top: var(--fbl-p-space-2); }
.fbl-field { display: flex; flex-direction: column; gap: 6px; }
.fbl-field label { font-size: 0.85rem; font-weight: 600; color: var(--pub-text-primary); }
.fbl-field input {
  font: inherit; font-size: 0.98rem; padding: 11px 14px; border-radius: var(--fbl-s-radius-card);
  border: 1px solid var(--pub-line-strong); background: var(--pub-bg); color: var(--pub-text-primary);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.fbl-field input:focus-visible { outline: none; border-color: var(--fbl-public-interactive); box-shadow: var(--fbl-s-focus-ring-light); }
.fbl-field--checkbox label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.9rem; font-weight: 400; color: var(--pub-text-secondary); cursor: pointer;
}
.fbl-field--checkbox input[type="checkbox"] { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.fbl-field--checkbox a { color: var(--pub-text-primary); }
.fbl-auth-card__cookie-note { font-size: 0.82rem; color: var(--pub-text-muted); margin: -4px 0 0; }
.fbl-btn--block { display: flex; width: 100%; justify-content: center; margin-top: 4px; }
.fbl-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.fbl-auth-card__link { text-align: center; margin-top: var(--fbl-p-space-4); font-size: 0.92rem; color: var(--pub-text-secondary); }
.fbl-auth-card__link a { color: var(--fbl-public-interactive); font-weight: 600; text-decoration: none; }
.fbl-auth-card__link a:hover { text-decoration: underline; }
.fbl-form-alert { border-radius: var(--fbl-s-radius-card); padding: 10px 14px; font-size: 0.9rem; margin-bottom: var(--fbl-p-space-3); }
.fbl-form-alert--error { background: var(--fbl-s-error-bg-light); color: var(--fbl-s-error-text-on-light); border: 1px solid var(--fbl-s-error-border-light); }
.fbl-form-alert--success { background: var(--fbl-s-success-bg-light); color: var(--fbl-s-success-text-on-light); border: 1px solid var(--fbl-s-success-border-light); }
@media (max-width: 560px) {
  .fbl-auth-hero { min-height: 100vh; padding-block: calc(88px + clamp(24px, 8vw, 48px)) clamp(24px, 8vw, 48px); }
  .fbl-auth-card { padding: 24px 20px; }
}

/* =============================================================
   FOOTER — chiaro, non quasi-nero
   ============================================================= */
.fbl-footer { background: var(--pub-footer-bg); color: var(--pub-text-secondary); padding: var(--fbl-p-space-6) 0 var(--fbl-p-space-4); border-top: 1px solid var(--pub-footer-border); }
/* Fascia superiore a tutta larghezza (PLATFORM-IDENTITY-002): la
   descrizione istituzionale non e' piu' una quinta colonna nella stessa
   griglia dei link (causa reale del wrapping segnalato: 5 elementi su
   grid-template-columns a 4 colonne finivano su due righe disallineate).
   Riga autonoma, larghezza di lettura equilibrata ma non compressa.
   PLATFORM-IDENTITY-002A: il max-width/margin/padding-inline ora arriva
   dalla regola condivisa dei contenitori full-bleed (vedi sopra, stessa
   riga di .fbl-footer__grid/.fbl-footer__legal) — prima .fbl-footer__intro
   non ne faceva parte ed era percio' ancorato al bordo sinistro del
   <footer>, disallineato dalla griglia sottostante (causa reale del
   disallineamento segnalato). Qui si centra solo il CONTENUTO interno
   (logo+nome su una riga, descrizione su una seconda, entrambi centrati)
   dentro quello stesso contenitore, mai una quinta colonna della griglia. */
.fbl-footer__intro {
  margin-bottom: var(--fbl-p-space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fbl-footer__brand { display: flex; align-items: center; gap: 8px; color: var(--pub-text-primary); font-weight: 600; margin-bottom: 8px; }
.fbl-footer__mark { height: 22px; width: auto; }
/* max-width singolo (non clamp con minimo in px): un minimo fisso
   forzerebbe la stessa larghezza anche sotto i 900px di viewport,
   producendo overflow su tablet/mobile. Un solo tetto massimo si
   restringe naturalmente con il contenitore su schermi piu' stretti. */
.fbl-footer__desc { font-size: 0.95rem; margin: 0; max-width: 860px; }
/* Fascia inferiore: solo le colonne di link (Esplora/Tecnologia/
   Organizzazione/Legale), 4 colonne uniformi — nessuna colonna piu'
   larga a competere con le altre. */
.fbl-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fbl-p-space-4); }
.fbl-footer__status { font-size: 0.8rem; font-family: var(--fbl-p-font-mono); color: var(--pub-text-muted); }
.fbl-footer__heading { font-family: var(--fbl-p-font-body); font-size: 0.9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pub-text-muted); margin-bottom: var(--fbl-s-inset-sm); }
.fbl-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fbl-footer__list a { color: var(--pub-text-secondary); text-decoration: none; font-size: 0.95rem; }
.fbl-footer__list a:hover { color: var(--fbl-public-interactive); }
.fbl-footer__list a[aria-disabled="true"] { color: var(--pub-text-muted); pointer-events: none; }
.fbl-footer__legal { margin-top: var(--fbl-p-space-5); padding-top: var(--fbl-p-space-3); border-top: 1px solid var(--pub-footer-border); font-size: 0.8rem; color: var(--pub-text-muted); }

/* =============================================================
   Responsive reale — 375 / 560 / 768 / 900 / 1024 / 1220 / 1440 / 1920
   ============================================================= */
@media (max-width: 1220px) {
  /* La navbar passa al menu mobile PRIMA di andare a capo: questa e'
     la soglia scelta perche' logo + 7 link + 2 CTA non entrano in
     una riga sola sotto questa larghezza senza compressione illeggibile. */
  .fbl-header__bar { flex-wrap: nowrap; }
  .fbl-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .fbl-nav__list { flex-direction: column; gap: 4px; align-items: flex-start; white-space: normal; }

  html.fbl-js .fbl-nav-toggle { display: inline-flex; }
  html.fbl-js .fbl-nav__list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--pub-bg); border-bottom: 1px solid var(--pub-line);
    padding: var(--fbl-s-inset-md) var(--pub-container-pad); box-shadow: var(--pub-shadow-md);
  }
  html.fbl-js .fbl-nav-toggle[aria-expanded="true"] + .fbl-nav__list { display: flex; }
  html.fbl-js .fbl-header__bar { flex-wrap: wrap; }
}

@media (max-width: 1024px) {
  .fbl-bento { grid-template-columns: repeat(2, 1fr); }
  .fbl-steps { grid-template-columns: repeat(2, 1fr); }
  .fbl-lead-cards { grid-template-columns: 1fr; }
  .fbl-scenario__body { grid-template-columns: 1fr; }
  .fbl-scenario__arrow { transform: rotate(90deg); padding: 4px 0; }
  .fbl-sequence { grid-template-columns: 1fr; gap: 20px 0; }
  .fbl-sequence__connector { right: 50%; top: auto; bottom: -22px; transform: translateX(50%) rotate(90deg); }
}

@media (max-width: 900px) {
  .fbl-cards, .fbl-cards--4 { grid-template-columns: 1fr 1fr; }
  .fbl-cards--2 { grid-template-columns: 1fr; }
  .fbl-card--featured { grid-column: span 2; }
  .fbl-related { grid-template-columns: 1fr; }
  .fbl-footer__grid { grid-template-columns: 1fr 1fr; }
  .fbl-hero--split .fbl-hero__content { grid-template-columns: 1fr; text-align: center; }
  .fbl-hero--split .fbl-hero__narrative { text-align: left; }
  .fbl-hero--split .fbl-hero__lede { margin-left: 0; }
  .fbl-hero--split .fbl-hero__cta-row,
  .fbl-hero--split .fbl-hero__status { justify-content: flex-start; }
  .fbl-hero__visual { max-width: 480px; margin: 0 auto; }
  .fbl-editorial, .fbl-editorial--reverse { grid-template-columns: 1fr; direction: ltr; }
  .fbl-editorial__visual { max-width: 480px; margin: 0 auto; }
  .fbl-compare { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .fbl-cards, .fbl-cards--4, .fbl-bento, .fbl-steps, .fbl-timeline { grid-template-columns: 1fr 1fr; }
  .fbl-bento__item--wide { grid-column: span 2; }
  .fbl-timeline__divider { grid-column: span 2; }
}

@media (max-width: 560px) {
  .fbl-hero__title { font-size: var(--pub-fs-hero-page); }
  .fbl-cards, .fbl-cards--4, .fbl-bento, .fbl-steps, .fbl-timeline { grid-template-columns: 1fr; }
  .fbl-card--featured, .fbl-bento__item--wide { grid-column: span 1; }
  .fbl-timeline__divider { grid-column: span 1; }
  .fbl-footer__grid { grid-template-columns: 1fr; }
  .fbl-tabs__list { gap: 2px; }
}

/* =============================================================
   Responsive — Page System 008 (Protocollo/Come funziona). Collocato
   qui, in fondo al foglio, cosi' da vincere sempre sulle regole base
   dei componenti definiti piu' sopra (stesso peso di specificita':
   in CSS vince l'ordine di sorgente, non solo la media query).
   ============================================================= */
@media (max-width: 1024px) {
  .fbl-mosaic-text__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "lead lead" "mint blue" "navy navy"; }
  /* Ciclo in cinque card: griglia 2+2+1, l'ultima card (Verifica) occupa
     l'intera riga cosi' da non lasciare una cella vuota. Niente linea di
     avanzamento orizzontale ne' alternanza verticale a questa larghezza
     (il layout non e' piu' una sola riga). */
  .fbl-steps--five { grid-template-columns: repeat(2, 1fr); gap: var(--fbl-p-space-3); }
  .fbl-steps--five::before { display: none; }
  .fbl-steps--five .fbl-steps__item { transform: none; }
  .fbl-steps--five .fbl-steps__item:last-child { grid-column: span 2; }
}

@media (max-width: 768px) {
  .fbl-mosaic-text__grid { grid-template-columns: 1fr; grid-template-areas: "lead" "mint" "blue" "navy"; }
  .fbl-mosaic-text__grid .fbl-mosaic__cell--navy { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  /* Ciclo in cinque card: colonna verticale con una linea verticale che
     collega le card (connettore puramente illustrativo, aria-hidden via
     ::after senza testo, mai un elemento cliccabile). */
  .fbl-steps--five { grid-template-columns: 1fr; gap: 28px; }
  .fbl-steps--five .fbl-steps__item:last-child { grid-column: span 1; }
  .fbl-steps--five .fbl-steps__item:not(:last-child)::after {
    content: ""; position: absolute; left: 32px; top: 100%; width: 2px; height: 28px; background: var(--pub-line-strong);
  }
  .fbl-page-nav__list { padding-inline: 12px; }
  .fbl-relational-diagram__label { font-size: 11px; }
}

/* =============================================================
   Responsive — Next Pages 010 (Tecnologia e verifica/Applicazioni).
   In fondo al foglio per lo stesso motivo del blocco precedente:
   l'ordine di sorgente decide la cascata a parita' di specificita'.
   ============================================================= */
@media (max-width: 768px) {
  .fbl-evidence-stack__row { grid-template-columns: 1fr; }
  .fbl-evidence-stack__row:nth-child(2), .fbl-evidence-stack__row:nth-child(3), .fbl-evidence-stack__row:nth-child(4) { margin-inline-start: 0; }
}

/* =============================================================
   PROTOCOL LAB — componenti editoriali della pagina pubblica.
   Classi isolate dal frontend applicativo tramite prefisso fbl-lab-.
   ============================================================= */
.fbl-lab-intro__statement {
  max-width: 860px;
  margin: 30px auto 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(109, 198, 179, 0.5);
  border-radius: var(--fbl-s-radius-container);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(234, 251, 246, 0.92));
  box-shadow: var(--pub-shadow-md);
  color: var(--pub-text-primary);
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem);
  font-weight: 650;
  line-height: 1.45;
}

.fbl-lab-audiences {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.fbl-lab-audience {
  position: relative;
  grid-column: span 2;
  min-height: 220px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-sm);
}
.fbl-lab-audience--featured {
  grid-column: span 3;
  background: linear-gradient(145deg, var(--pub-tint-mint) 0%, var(--pub-bg) 78%);
  border-color: rgba(109, 198, 179, 0.5);
}
.fbl-lab-audience:nth-child(2) {
  grid-column: span 3;
  background: linear-gradient(145deg, var(--pub-tint-blue) 0%, var(--pub-bg) 78%);
}
.fbl-lab-audience::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -58px;
  width: 132px;
  height: 132px;
  border: 1px solid var(--fbl-public-interactive);
  border-radius: 50%;
  opacity: 0.08;
}
.fbl-lab-audience__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--pub-panel-navy-bg);
  color: var(--fbl-s-operative);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.75rem;
}
.fbl-lab-audience h3 { margin-bottom: 10px; font-size: var(--pub-fs-card-title); }
.fbl-lab-audience p { margin: 0; color: var(--pub-text-secondary); line-height: 1.55; }

.fbl-lab-capability {
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.fbl-lab-capability::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--pub-cta-mint), var(--fbl-public-interactive));
  opacity: 0.72;
}
.fbl-lab-capability:hover {
  transform: translateY(-3px);
  border-color: var(--pub-line-strong);
  box-shadow: var(--pub-shadow-md);
}

.fbl-lab-observation {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  overflow: hidden;
  border: 1px solid var(--pub-panel-navy-border);
  border-radius: var(--fbl-s-radius-container);
  background: var(--pub-panel-navy-bg);
  box-shadow: var(--pub-shadow-lg);
}
.fbl-lab-observation__intro {
  padding: clamp(30px, 5vw, 58px);
  color: var(--fbl-s-text-primary-dark);
}
.fbl-lab-observation__intro h2 {
  margin-bottom: 18px;
  color: #ffffff;
  font-size: clamp(1.8rem, 1.25rem + 1.55vw, 2.75rem);
}
.fbl-lab-observation__intro p { color: var(--fbl-s-text-secondary-dark); line-height: 1.65; }
.fbl-lab-observation__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.fbl-lab-observation__checks article {
  min-height: 142px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.96);
}
.fbl-lab-observation__checks span {
  display: block;
  margin-bottom: 18px;
  color: var(--fbl-s-interactive-on-light);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.fbl-lab-observation__checks p {
  margin: 0;
  color: var(--pub-on-light-primary);
  font-weight: 650;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .fbl-lab-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbl-lab-audience,
  .fbl-lab-audience--featured,
  .fbl-lab-audience:nth-child(2) { grid-column: span 1; }
  .fbl-lab-audience:last-child { grid-column: span 2; }
  .fbl-lab-observation { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fbl-header--floating-contrast + main > .fbl-hero:first-child {
    margin-top: -76px;
    padding-top: calc(76px + clamp(48px, 7vw, 88px));
  }
  .fbl-lab-audiences,
  .fbl-lab-observation__checks { grid-template-columns: 1fr; }
  .fbl-lab-audience:last-child { grid-column: span 1; }
  .fbl-lab-audience { min-height: 0; }
}

/* =============================================================
   DOCUMENTAZIONE — hub, stato fotografico e livelli di accesso.
   ============================================================= */
.fbl-doc-status {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
}
.fbl-doc-status__media,
.fbl-doc-status__scrim {
  position: absolute;
  inset: 0;
}
.fbl-doc-status__media picture,
.fbl-doc-status__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.fbl-doc-status__media img { object-fit: cover; object-position: center; }
.fbl-doc-status__scrim {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--pub-scrim-rgb-alt), 0.94) 0%, rgba(var(--pub-scrim-rgb-alt), 0.82) 50%, rgba(var(--pub-scrim-rgb-alt), 0.58) 100%),
    linear-gradient(180deg, rgba(var(--pub-scrim-rgb-alt), 0.08), rgba(var(--pub-scrim-rgb-alt), 0.38));
}
.fbl-doc-status__inner {
  position: relative;
  z-index: 2;
}
.fbl-doc-status .fbl-section__eyebrow { color: var(--fbl-s-operative); }
.fbl-doc-status .fbl-section__title {
  max-width: 820px;
  color: #ffffff;
}
.fbl-doc-status__lede {
  max-width: 760px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--pub-fs-body-lg);
  line-height: 1.6;
}
.fbl-doc-status__evidence {
  max-width: 980px;
  border-radius: var(--fbl-s-radius-container);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--pub-shadow-lg);
  backdrop-filter: blur(12px);
}
.fbl-doc-status__evidence .fbl-evidence__row {
  background: rgba(255, 255, 255, 0.94);
}
.fbl-doc-status__evidence .fbl-evidence__label { color: var(--pub-on-light-primary); }
.fbl-doc-status__evidence .fbl-evidence__text { color: var(--pub-on-light-secondary); }

.fbl-doc-hub-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  margin: 34px 0 38px;
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-container);
  background: linear-gradient(135deg, var(--pub-bg) 0%, var(--pub-tint-mint) 100%);
  box-shadow: var(--pub-shadow-md);
}
.fbl-doc-hub-card__media .fbl-editorial-image,
.fbl-doc-hub-card__media picture,
.fbl-doc-hub-card__media img {
  width: 100%;
  height: 100%;
}
.fbl-doc-hub-card__media img { object-fit: cover; }
.fbl-doc-hub-card__body {
  align-self: center;
  padding: clamp(28px, 5vw, 58px);
}
.fbl-doc-hub-card__body h3 {
  margin: 0 0 16px;
  color: var(--pub-text-primary);
  font-size: clamp(1.7rem, 1.25rem + 1.1vw, 2.5rem);
  line-height: 1.16;
}
.fbl-doc-hub-card__body p:not(.fbl-section__eyebrow) {
  margin: 0 0 24px;
  color: var(--pub-text-secondary);
  font-size: var(--pub-fs-body-lg);
  line-height: 1.6;
}
.fbl-doc-accordion { margin-top: 0; }
.fbl-doc-cta-row { justify-content: flex-start; margin-top: 6px; }

.fbl-doc-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.fbl-doc-meta-grid article {
  min-height: 190px;
  padding: 26px;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-sm);
}
.fbl-doc-meta-grid span {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.fbl-doc-meta-grid h3 { margin: 0 0 10px; font-size: var(--pub-fs-card-title); }
.fbl-doc-meta-grid p { margin: 0; color: var(--pub-text-secondary); line-height: 1.55; }

.fbl-doc-access {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.fbl-doc-access article {
  min-height: 250px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-sm);
}
.fbl-doc-access--mint {
  background: linear-gradient(145deg, var(--pub-tint-mint), var(--pub-bg) 84%) !important;
  border-color: rgba(109, 198, 179, 0.5) !important;
}
.fbl-doc-access--navy {
  background: var(--pub-panel-navy-bg) !important;
  border-color: var(--pub-panel-navy-border) !important;
}
.fbl-doc-access__tag {
  display: inline-flex;
  margin-bottom: 44px;
  color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fbl-doc-access h3 { margin: 0 0 12px; font-size: var(--pub-fs-card-title); }
.fbl-doc-access p { margin: 0; color: var(--pub-text-secondary); line-height: 1.6; }
.fbl-doc-access--navy .fbl-doc-access__tag { color: var(--fbl-s-operative); }
.fbl-doc-access--navy h3 { color: #ffffff; }
.fbl-doc-access--navy p { color: var(--fbl-s-text-secondary-dark); }

@media (max-width: 900px) {
  .fbl-doc-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbl-doc-access { grid-template-columns: 1fr; }
  .fbl-doc-access article { min-height: 0; }
  .fbl-doc-access__tag { margin-bottom: 26px; }
}

@media (max-width: 680px) {
  .fbl-doc-hub-card { grid-template-columns: 1fr; }
  .fbl-doc-hub-card__media { min-height: 260px; }
  .fbl-doc-meta-grid { grid-template-columns: 1fr; }
  .fbl-doc-meta-grid article { min-height: 0; }
}

/* =============================================================
   CONTATTI — percorsi, demo, brief e processo.
   ============================================================= */
.fbl-contact-paths {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.fbl-contact-path {
  position: relative;
  display: block;
  grid-column: span 2;
  min-height: 290px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.fbl-contact-path--featured {
  grid-column: span 3;
  background: linear-gradient(145deg, var(--pub-tint-mint), var(--pub-bg) 82%);
  border-color: rgba(109, 198, 179, 0.52);
}
.fbl-contact-path:nth-child(2) {
  grid-column: span 3;
  background: linear-gradient(145deg, var(--pub-tint-blue), var(--pub-bg) 82%);
}
.fbl-contact-path::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -64px;
  width: 150px;
  height: 150px;
  border: 1px solid var(--fbl-public-interactive);
  border-radius: 50%;
  opacity: 0.09;
}
.fbl-contact-path:hover,
.fbl-contact-path:focus-visible {
  transform: translateY(-4px);
  border-color: var(--pub-line-strong);
  box-shadow: var(--pub-shadow-md);
}
.fbl-contact-path:focus-visible {
  outline: 3px solid rgba(37, 86, 216, 0.28);
  outline-offset: 3px;
}
.fbl-contact-path--navy {
  grid-column: 1 / -1;
  min-height: 250px;
  background: var(--pub-panel-navy-bg);
  border-color: var(--pub-panel-navy-border);
}
.fbl-contact-path__index {
  display: inline-flex;
  margin-bottom: 42px;
  color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.fbl-contact-path h3 { margin: 0 0 12px; font-size: var(--pub-fs-card-title); }
.fbl-contact-path p:not(.fbl-card__eyebrow) { margin: 0; color: var(--pub-text-secondary); line-height: 1.6; }
.fbl-contact-path__link {
  display: inline-flex;
  gap: 10px;
  margin-top: 22px;
  color: var(--fbl-public-interactive);
  font-weight: 700;
  text-decoration: none;
}
.fbl-contact-path__wide-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: end;
}
.fbl-contact-path__wide-copy h3 {
  max-width: 620px;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.35rem);
  line-height: 1.18;
}
.fbl-contact-path__wide-copy > div:last-child { max-width: 680px; }
.fbl-contact-path__detail { margin-top: 12px !important; }
.fbl-contact-path--navy .fbl-contact-path__index,
.fbl-contact-path--navy .fbl-card__eyebrow { color: var(--fbl-s-operative); }
.fbl-contact-path--navy h3 { color: #ffffff; }
.fbl-contact-path--navy p:not(.fbl-card__eyebrow) { color: var(--fbl-s-text-secondary-dark); }
.fbl-contact-path--navy .fbl-contact-path__link { color: var(--fbl-s-operative); }

.fbl-contact-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-container);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-lg);
}
.fbl-contact-demo__media .fbl-editorial-image,
.fbl-contact-demo__media picture,
.fbl-contact-demo__media img { width: 100%; height: 100%; }
.fbl-contact-demo__media img { object-fit: cover; }
.fbl-contact-demo__body { padding: clamp(30px, 5vw, 60px); }
.fbl-contact-demo__body h2 {
  margin: 0 0 18px;
  color: var(--pub-text-primary);
  font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.85rem);
  line-height: 1.14;
}
.fbl-contact-demo__body > p:not(.fbl-section__eyebrow) {
  color: var(--pub-text-secondary);
  font-size: var(--pub-fs-body-lg);
  line-height: 1.6;
}
.fbl-contact-demo__options {
  display: grid;
  gap: 1px;
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-line);
}
.fbl-contact-demo__options div { padding: 18px 20px; background: var(--pub-tint-blue); }
.fbl-contact-demo__options div:first-child { background: var(--pub-tint-mint); }
.fbl-contact-demo__options span {
  display: block;
  margin-bottom: 6px;
  color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
}
.fbl-contact-demo__options strong { color: var(--pub-text-primary); line-height: 1.45; }

.fbl-contact-brief {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.fbl-contact-brief article {
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-sm);
}
.fbl-contact-brief span {
  display: block;
  margin-bottom: 34px;
  color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.fbl-contact-brief h3 { margin: 0 0 10px; font-size: var(--pub-fs-card-title); }
.fbl-contact-brief p { margin: 0; color: var(--pub-text-secondary); line-height: 1.55; }
.fbl-contact-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(109, 198, 179, 0.5);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-tint-mint);
}
.fbl-contact-note span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pub-panel-navy-bg);
  color: var(--fbl-s-operative);
  font-family: var(--fbl-p-font-mono);
  font-weight: 700;
}
.fbl-contact-note p { margin: 0; color: var(--pub-text-secondary); line-height: 1.55; }
.fbl-contact-section-cta { justify-content: center; margin-top: 28px; }
.fbl-contact-process .fbl-contact-section-cta { justify-content: flex-start; margin-top: 28px; }
.fbl-contact-process .fbl-btn--secondary {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.92);
}

.fbl-contact-process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
}
.fbl-contact-process__media,
.fbl-contact-process__scrim { position: absolute; inset: 0; }
.fbl-contact-process__media picture,
.fbl-contact-process__media img { display: block; width: 100%; height: 100%; }
.fbl-contact-process__media img { object-fit: cover; object-position: center; }
.fbl-contact-process__scrim {
  z-index: 1;
  background: linear-gradient(115deg, rgba(var(--pub-scrim-rgb-alt), 0.96), rgba(var(--pub-scrim-rgb-alt), 0.72));
}
.fbl-contact-process__inner { position: relative; z-index: 2; }
.fbl-contact-process .fbl-section__eyebrow { color: var(--fbl-s-operative); }
.fbl-contact-process .fbl-section__title { color: #ffffff; }
.fbl-contact-process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.fbl-contact-process__steps article {
  min-height: 210px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--fbl-s-radius-card);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}
.fbl-contact-process__steps span {
  display: block;
  margin-bottom: 36px;
  color: var(--fbl-s-operative);
  font-family: var(--fbl-p-font-mono);
  font-weight: 700;
}
.fbl-contact-process__steps h3 { margin: 0 0 10px; color: #ffffff; }
.fbl-contact-process__steps p { margin: 0; color: rgba(255, 255, 255, 0.76); line-height: 1.5; }

.fbl-contact-readiness {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-container);
  background: linear-gradient(135deg, var(--pub-bg), var(--pub-tint-blue));
  box-shadow: var(--pub-shadow-md);
}
.fbl-contact-readiness h2 {
  margin: 0 0 14px;
  color: var(--pub-text-primary);
  font-size: clamp(1.8rem, 1.3rem + 1.35vw, 2.7rem);
  line-height: 1.15;
}
.fbl-contact-readiness p:not(.fbl-section__eyebrow) { margin: 0; color: var(--pub-text-secondary); line-height: 1.6; }
.fbl-contact-readiness__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fbl-contact-final { min-height: 390px; }
.fbl-contact-final .fbl-tech-banner__inner { text-align: left; }
.fbl-contact-final .fbl-section__eyebrow { color: var(--fbl-s-operative); }
.fbl-contact-final .fbl-section__title { max-width: 800px; color: #ffffff; }
.fbl-contact-final__lede {
  max-width: 680px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--pub-fs-body-lg);
  line-height: 1.6;
}

@media (max-width: 980px) {
  .fbl-contact-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbl-contact-path,
  .fbl-contact-path--featured,
  .fbl-contact-path:nth-child(2) { grid-column: span 1; }
  .fbl-contact-path--navy { grid-column: 1 / -1; }
  .fbl-contact-brief,
  .fbl-contact-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .fbl-contact-demo,
  .fbl-contact-readiness { grid-template-columns: 1fr; }
  .fbl-contact-demo__media { min-height: 280px; }
  .fbl-contact-path__wide-copy { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fbl-contact-paths,
  .fbl-contact-brief,
  .fbl-contact-process__steps { grid-template-columns: 1fr; }
  .fbl-contact-path { min-height: 0; }
  .fbl-contact-path--navy { grid-column: span 1; }
  .fbl-contact-path__index { margin-bottom: 28px; }
  .fbl-contact-brief article,
  .fbl-contact-process__steps article { min-height: 0; }
}

/* =============================================================
   PROTOCOLLO — fiducia fotografica, rete economica e reference card.
   ============================================================= */
.fbl-protocol-trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
}
.fbl-protocol-trust__media,
.fbl-protocol-trust__scrim {
  position: absolute;
  inset: 0;
}
.fbl-protocol-trust__media picture,
.fbl-protocol-trust__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.fbl-protocol-trust__media img {
  object-fit: cover;
  object-position: center 42%;
}
.fbl-protocol-trust__scrim {
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(var(--pub-scrim-rgb-alt), 0.95) 0%, rgba(var(--pub-scrim-rgb-alt), 0.82) 55%, rgba(var(--pub-scrim-rgb-alt), 0.66) 100%),
    linear-gradient(180deg, rgba(var(--pub-scrim-rgb-alt), 0.06), rgba(var(--pub-scrim-rgb-alt), 0.38));
}
.fbl-protocol-trust__inner {
  position: relative;
  z-index: 2;
}
.fbl-protocol-trust .fbl-section__eyebrow { color: var(--fbl-s-operative); }
.fbl-protocol-trust .fbl-section__title { color: #ffffff; }
.fbl-protocol-trust .fbl-section__lede { color: rgba(255, 255, 255, 0.82); }
.fbl-protocol-trust .fbl-compare {
  padding: 1px;
  border-radius: var(--fbl-s-radius-container);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: var(--pub-shadow-lg);
  backdrop-filter: blur(12px);
}
.fbl-protocol-trust .fbl-compare__col {
  background: rgba(255, 255, 255, 0.94);
}
.fbl-protocol-trust .fbl-compare__col--after {
  background: rgba(234, 251, 246, 0.95);
}
.fbl-protocol-trust .fbl-compare__heading {
  color: var(--pub-on-light-primary);
  text-shadow: none;
}
.fbl-protocol-trust .fbl-compare__list { color: var(--pub-on-light-secondary); }

.fbl-protocol-hero-visual,
.fbl-protocol-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
}
.fbl-protocol-hero-visual {
  overflow: hidden;
  border-radius: inherit;
}
.fbl-protocol-hero-visual img {
  object-fit: cover;
  object-position: 52% center;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fbl-hero:hover .fbl-protocol-hero-visual img { transform: scale(1.025); }

.fbl-protocol-properties {
  min-height: 100vh;
  padding: clamp(28px, 4vw, 64px);
  background:
    radial-gradient(circle at 8% 14%, rgba(109, 198, 179, 0.22), transparent 28%),
    radial-gradient(circle at 92% 82%, rgba(37, 86, 216, 0.12), transparent 30%),
    var(--pub-bg-alt);
}
.fbl-protocol-properties__card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  width: 100%;
  max-width: 1740px;
  min-height: calc(100vh - clamp(56px, 8vw, 128px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(181, 198, 221, 0.82);
  border-radius: clamp(20px, 2vw, 34px);
  background: var(--pub-bg);
  box-shadow: 0 30px 80px rgba(var(--pub-scrim-rgb-alt), 0.14);
}
.fbl-protocol-properties__media {
  position: relative;
  min-height: 720px;
  overflow: hidden;
}
.fbl-protocol-properties__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(var(--pub-scrim-rgb-alt), 0.72));
  pointer-events: none;
}
.fbl-protocol-properties__media picture,
.fbl-protocol-properties__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.fbl-protocol-properties__media img {
  object-fit: cover;
  object-position: 56% center;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fbl-protocol-properties__card:hover .fbl-protocol-properties__media img { transform: scale(1.035); }
.fbl-protocol-properties__media-label {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 4vw, 54px);
  bottom: clamp(24px, 4vw, 54px);
  left: clamp(24px, 4vw, 54px);
  color: #ffffff;
}
.fbl-protocol-properties__media-label span {
  display: block;
  margin-bottom: 8px;
  color: var(--fbl-s-operative);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fbl-protocol-properties__media-label strong {
  display: block;
  max-width: 18ch;
  font-size: clamp(1.5rem, 2.2vw, 2.65rem);
  line-height: 1.08;
}
.fbl-protocol-properties__body {
  align-self: center;
  padding: clamp(34px, 5vw, 76px);
}
.fbl-protocol-properties__body > h2 {
  max-width: 16ch;
  margin: 0 0 18px;
  color: var(--pub-text-primary);
  font-size: clamp(2.1rem, 1.4rem + 2vw, 3.8rem);
  line-height: 1.08;
}
.fbl-protocol-properties__intro {
  max-width: 62ch;
  margin: 0;
  color: var(--pub-text-secondary);
  font-size: var(--pub-fs-body-lg);
  line-height: 1.6;
}
.fbl-protocol-properties__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0;
}
.fbl-protocol-properties__grid > div {
  position: relative;
  min-height: 160px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg-alt);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.fbl-protocol-properties__grid > div:hover {
  transform: translateY(-3px);
  border-color: rgba(109, 198, 179, 0.72);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-md);
}
.fbl-protocol-properties__grid span {
  display: block;
  margin-bottom: 18px;
  color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.fbl-protocol-properties__grid strong {
  display: block;
  margin-bottom: 7px;
  color: var(--pub-text-primary);
}
.fbl-protocol-properties__grid p {
  margin: 0;
  color: var(--pub-text-secondary);
  font-size: 0.92rem;
  line-height: 1.48;
}
.fbl-protocol-properties__wide { grid-column: 1 / -1; }

.fbl-protocol-reference {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-container);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-lg);
}
.fbl-protocol-reference__media {
  position: relative;
  min-height: 680px;
  overflow: hidden;
}
.fbl-protocol-reference__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(var(--pub-scrim-rgb-alt), 0.22));
  pointer-events: none;
}
.fbl-protocol-reference__media picture,
.fbl-protocol-reference__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.fbl-protocol-reference__media img {
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fbl-protocol-reference:hover .fbl-protocol-reference__media img { transform: scale(1.035); }
.fbl-protocol-reference__body {
  align-self: center;
  padding: clamp(30px, 5vw, 64px);
}
.fbl-protocol-reference__body h2 {
  margin: 0 0 18px;
  color: var(--pub-text-primary);
  font-size: clamp(2rem, 1.3rem + 1.7vw, 3.2rem);
  line-height: 1.12;
}
.fbl-protocol-reference__body > p:not(.fbl-section__eyebrow):not(.fbl-protocol-reference__note) {
  color: var(--pub-text-secondary);
  font-size: var(--pub-fs-body-lg);
  line-height: 1.6;
}
.fbl-protocol-reference__status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.fbl-protocol-reference__status-grid > div {
  display: flex;
  min-height: 96px;
  padding: 18px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg-alt);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.fbl-protocol-reference__status-grid > div:hover {
  transform: translateY(-3px);
  border-color: rgba(109, 198, 179, 0.58);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-md);
}
.fbl-protocol-reference__status-grid strong {
  color: var(--pub-text-primary);
  font-size: 0.95rem;
}
.fbl-protocol-reference__status-wide { grid-column: 1 / -1; }
.fbl-protocol-reference__scope {
  margin: 0 0 24px;
  padding-left: 18px;
  border-left: 3px solid var(--fbl-p-mint-500);
}
.fbl-protocol-reference__note {
  margin: 18px 0 0;
  color: var(--pub-text-muted);
  font-size: 0.82rem;
}

@media (max-width: 980px) {
  .fbl-protocol-reference { grid-template-columns: 1fr; }
  .fbl-protocol-reference__media { min-height: 460px; }
  .fbl-protocol-properties__card { grid-template-columns: 1fr; }
  .fbl-protocol-properties__media { min-height: 520px; }
}

@media (max-width: 680px) {
  .fbl-relational-diagram {
    max-width: none;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }
  .fbl-relational-diagram__svg { min-width: 760px; }
  .fbl-protocol-reference__media { min-height: 320px; }
  .fbl-protocol-reference__status-grid { grid-template-columns: 1fr; }
  .fbl-protocol-reference__status-wide { grid-column: span 1; }
  .fbl-protocol-properties { min-height: 0; padding: 18px; }
  .fbl-protocol-properties__card { min-height: 0; }
  .fbl-protocol-properties__media { min-height: 380px; }
  .fbl-protocol-properties__body { padding: 30px 22px 34px; }
  .fbl-protocol-properties__grid { grid-template-columns: 1fr; }
  .fbl-protocol-properties__wide { grid-column: span 1; }
}

/* =============================================================
   COME FUNZIONA — REFINEMENT 01
   Configuratore, percorso editoriale, stato, modelli e scenario.
   ============================================================= */
.fbl-how-configurator {
  --fbl-how-config-accent: var(--fbl-p-mint-500);
  margin-top: var(--fbl-p-space-4);
}
.fbl-how-configurator[data-active-step="condizioni"] { --fbl-how-config-accent: #78a7e8; }
.fbl-how-configurator[data-active-step="regole"] { --fbl-how-config-accent: #2556d8; }
.fbl-how-configurator[data-active-step="strumenti"] { --fbl-how-config-accent: #8f79d9; }
.fbl-how-configurator[data-active-step="partecipanti"] { --fbl-how-config-accent: #50bca5; }
.fbl-how-configurator .fbl-stepper__tab {
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.fbl-how-configurator .fbl-stepper__tab:hover {
  transform: translateX(6px);
  border-color: var(--fbl-how-config-accent);
  box-shadow: 0 8px 22px rgba(var(--pub-scrim-rgb-alt), 0.07);
}
.fbl-how-configurator .fbl-stepper__tab[aria-selected="true"] {
  border-color: var(--fbl-how-config-accent);
  background: var(--fbl-how-config-accent);
}
.fbl-how-configurator .fbl-stepper__panel {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border: 1px solid color-mix(in srgb, var(--fbl-how-config-accent) 48%, var(--pub-line));
  border-left: 6px solid var(--fbl-how-config-accent);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--fbl-how-config-accent) 9%, var(--pub-bg)), var(--pub-bg) 68%);
  box-shadow: 0 18px 44px rgba(var(--pub-scrim-rgb-alt), 0.09);
  transition: border-color 260ms ease, background 260ms ease, transform 260ms ease;
  scroll-margin-top: 110px;
}
.fbl-how-configurator .fbl-stepper__panel::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -72px;
  width: 190px;
  height: 190px;
  border: 1px solid color-mix(in srgb, var(--fbl-how-config-accent) 35%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.fbl-how-configurator .fbl-stepper__panel.is-changing {
  animation: fbl-how-panel-pulse 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fbl-how-configurator__kicker {
  margin: 0 0 8px;
  color: var(--fbl-how-config-accent);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
@keyframes fbl-how-panel-pulse {
  0% { opacity: 0.72; transform: translateY(10px) scale(0.992); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.fbl-how-journey-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pub-bg-alt);
}
.fbl-how-journey-section__media,
.fbl-how-journey-section__wash {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.fbl-how-journey-section__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.88);
  transform: scale(1.08);
}
.fbl-how-journey-section__wash {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(241, 247, 255, 0.84), rgba(234, 244, 255, 0.9)),
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.22), transparent 58%);
}
.fbl-how-journey-section__inner > .fbl-section__title {
  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.9);
}
.fbl-how-journey.fbl-steps--five {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.fbl-how-journey.fbl-steps--five::before { display: none; }
.fbl-how-journey.fbl-steps--five .fbl-steps__item {
  grid-column: span 2;
  min-height: 310px;
  padding: 76px 26px 26px;
  border-color: rgba(181, 198, 221, 0.72);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(var(--pub-scrim-rgb-alt), 0.06);
  transform: none;
  transition: transform 230ms ease, box-shadow 230ms ease, border-color 230ms ease, background-color 230ms ease;
}
.fbl-how-journey.fbl-steps--five .fbl-steps__item:nth-child(4),
.fbl-how-journey.fbl-steps--five .fbl-steps__item:nth-child(5) { grid-column: span 3; }
.fbl-how-journey.fbl-steps--five .fbl-steps__item:hover {
  transform: translateY(-7px);
  border-color: rgba(80, 188, 165, 0.72);
  background: var(--pub-bg);
  box-shadow: 0 24px 54px rgba(var(--pub-scrim-rgb-alt), 0.11);
}
.fbl-how-journey.fbl-steps--five .fbl-steps__item:last-child {
  color: #ffffff;
  border-color: #142338;
  background: #0d1929;
}
.fbl-how-journey .fbl-steps__title { font-size: 1.55rem; }
.fbl-how-journey .fbl-steps__text { font-size: 1rem; line-height: 1.58; }
.fbl-how-journey .fbl-steps__item:last-child .fbl-steps__title,
.fbl-how-journey .fbl-steps__item:last-child .fbl-steps__text,
.fbl-how-journey .fbl-steps__item:last-child .fbl-steps__result,
.fbl-how-journey .fbl-steps__item:last-child .fbl-steps__result strong { color: #ffffff; }

.fbl-how-state__card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  margin-top: var(--fbl-p-space-5);
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-container);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-lg);
}
.fbl-how-state__chart {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding: clamp(24px, 4vw, 52px);
  background:
    radial-gradient(circle at 20% 15%, rgba(109, 198, 179, 0.22), transparent 30%),
    linear-gradient(145deg, #f4f9ff, #eafbf6);
}
.fbl-how-state__chart img { display: block; width: min(100%, 720px); height: auto; }
.fbl-how-state__chart > span {
  position: absolute;
  left: 28px;
  bottom: 22px;
  color: var(--pub-text-muted);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.72rem;
}
.fbl-how-state__content { align-self: center; padding: clamp(32px, 5vw, 68px); }
.fbl-how-state__content h3 {
  margin: 0 0 24px;
  color: var(--pub-text-primary);
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 3rem);
  line-height: 1.12;
}
.fbl-how-state__facts { display: grid; gap: 10px; }
.fbl-how-state__facts > div {
  padding: 17px 18px;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg-alt);
}
.fbl-how-state__facts strong { color: var(--pub-text-primary); }
.fbl-how-state__facts p { margin: 4px 0 0; color: var(--pub-text-secondary); font-size: 0.92rem; }
.fbl-how-state__note { margin: 20px 0 0; color: var(--pub-text-muted); font-size: 0.82rem; }

.fbl-how-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: var(--fbl-p-space-5);
}
.fbl-how-models__card {
  position: relative;
  min-height: 360px;
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: 24px;
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-md);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.fbl-how-models__card::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -96px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(37, 86, 216, 0.14);
  border-radius: 50%;
}
.fbl-how-models__card--constant { background: linear-gradient(145deg, var(--pub-bg), var(--pub-tint-mint-soft)); }
.fbl-how-models__card--growing { background: linear-gradient(145deg, var(--pub-bg), var(--pub-tint-blue)); }
.fbl-how-models__card:hover { transform: translateY(-6px); box-shadow: var(--pub-shadow-lg); }
.fbl-how-models__index {
  color: var(--fbl-public-interactive);
  font-family: var(--fbl-p-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fbl-how-models__card h3 {
  margin: 28px 0 14px;
  color: var(--pub-text-primary);
  font-size: clamp(2rem, 1.5rem + 1vw, 3rem);
}
.fbl-how-models__card p { max-width: 48ch; color: var(--pub-text-secondary); line-height: 1.62; }
.fbl-how-models__signal {
  position: absolute;
  right: 42px;
  bottom: 34px;
  left: 42px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 54px;
}
.fbl-how-models__signal span { flex: 1; border-radius: 5px 5px 0 0; background: rgba(37, 86, 216, 0.2); }
.fbl-how-models__card--constant .fbl-how-models__signal span { height: 42%; background: rgba(80, 188, 165, 0.38); }
.fbl-how-models__card--growing .fbl-how-models__signal span:nth-child(1) { height: 20%; }
.fbl-how-models__card--growing .fbl-how-models__signal span:nth-child(2) { height: 36%; }
.fbl-how-models__card--growing .fbl-how-models__signal span:nth-child(3) { height: 52%; }
.fbl-how-models__card--growing .fbl-how-models__signal span:nth-child(4) { height: 72%; }
.fbl-how-models__card--growing .fbl-how-models__signal span:nth-child(5) { height: 96%; }
.fbl-how-models__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-card);
  background: var(--pub-bg-alt);
}
.fbl-how-models__footer p { margin: 0; color: var(--pub-text-secondary); }

.fbl-how-tools-photo {
  position: relative;
  isolation: isolate;
  min-height: 780px;
  overflow: hidden;
}
.fbl-how-tools-photo__media,
.fbl-how-tools-photo__wash {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.fbl-how-tools-photo__media picture,
.fbl-how-tools-photo__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.fbl-how-tools-photo__media img {
  object-fit: cover;
  object-position: center;
}
.fbl-how-tools-photo__wash {
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--pub-wash-rgb), 0.99) 0%, rgba(var(--pub-wash-rgb), 0.97) 47%, rgba(var(--pub-wash-rgb), 0.42) 68%, rgba(var(--pub-wash-rgb), 0.08) 100%);
}
.fbl-how-tools-photo__inner {
  display: flex;
  min-height: 620px;
  flex-direction: column;
  justify-content: center;
}
.fbl-how-tools-photo__inner > .fbl-section__eyebrow,
.fbl-how-tools-photo__inner > .fbl-section__title {
  width: min(58%, 760px);
  margin-right: auto;
  text-align: left;
}
.fbl-how-tools-photo .fbl-accordion {
  width: min(58%, 760px);
  margin-right: auto;
}
.fbl-how-tools-photo .fbl-accordion__item {
  border-color: rgba(181, 198, 221, 0.86);
  background: rgba(var(--pub-glass-rgb), 0.92);
  box-shadow: 0 12px 30px rgba(var(--pub-scrim-rgb-alt), 0.07);
  backdrop-filter: blur(10px);
}

.fbl-how-scenario {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fbl-how-scenario__media,
.fbl-how-scenario__scrim { position: absolute; z-index: -2; inset: 0; }
.fbl-how-scenario__media picture,
.fbl-how-scenario__media img { display: block; width: 100%; height: 100%; }
.fbl-how-scenario__media img { object-fit: cover; object-position: center 55%; }
.fbl-how-scenario__scrim {
  z-index: -1;
  background: linear-gradient(100deg, rgba(var(--pub-scrim-rgb-alt), 0.93), rgba(var(--pub-scrim-rgb-alt), 0.72));
}
.fbl-how-scenario__inner > .fbl-section__eyebrow { color: var(--fbl-s-operative); }
.fbl-how-scenario__inner > .fbl-section__title { color: #ffffff; }
.fbl-how-scenario__inner > .fbl-section__lede { color: rgba(255, 255, 255, 0.82); }
.fbl-how-scenario .fbl-scenario {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}
/* Come .fbl-lab-scenario: pannello sempre chiaro sopra uno sfondo
   fotografico gia' scuro, il testo interno resta scuro in entrambi i
   temi. */
.fbl-how-scenario .fbl-scenario__label,
.fbl-how-scenario .fbl-scenario__note,
.fbl-how-scenario .fbl-scenario__col h4,
.fbl-how-scenario .fbl-scenario__events li { color: var(--pub-on-light-secondary); }
.fbl-how-scenario .fbl-scenario__metric-value { color: var(--pub-on-light-primary); }

@media (max-width: 980px) {
  .fbl-how-journey.fbl-steps--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbl-how-journey.fbl-steps--five .fbl-steps__item,
  .fbl-how-journey.fbl-steps--five .fbl-steps__item:nth-child(4),
  .fbl-how-journey.fbl-steps--five .fbl-steps__item:nth-child(5) { grid-column: span 1; }
  .fbl-how-journey.fbl-steps--five .fbl-steps__item:last-child { grid-column: 1 / -1; }
  .fbl-how-state__card { grid-template-columns: 1fr; }
  .fbl-how-state__chart { min-height: 420px; }
  .fbl-how-tools-photo__wash {
    background: linear-gradient(90deg, rgba(241, 247, 255, 0.99), rgba(241, 247, 255, 0.86));
  }
  .fbl-how-tools-photo__inner > .fbl-section__eyebrow,
  .fbl-how-tools-photo__inner > .fbl-section__title,
  .fbl-how-tools-photo .fbl-accordion { width: min(76%, 760px); }
}

@media (max-width: 680px) {
  .fbl-how-configurator .fbl-stepper__tab:hover { transform: none; }
  .fbl-how-journey.fbl-steps--five,
  .fbl-how-models { grid-template-columns: 1fr; }
  .fbl-how-journey.fbl-steps--five .fbl-steps__item,
  .fbl-how-journey.fbl-steps--five .fbl-steps__item:last-child { grid-column: span 1; min-height: 260px; }
  .fbl-how-state__chart { min-height: 300px; padding: 22px 14px 48px; }
  .fbl-how-models__footer { align-items: stretch; flex-direction: column; }
  .fbl-how-models__footer .fbl-btn { width: 100%; }
  .fbl-how-tools-photo { min-height: auto; }
  .fbl-how-tools-photo__media img { object-position: 70% center; }
  .fbl-how-tools-photo__wash { background: rgba(var(--pub-wash-rgb), 0.9); }
  .fbl-how-tools-photo__inner { min-height: 0; }
  .fbl-how-tools-photo__inner > .fbl-section__eyebrow,
  .fbl-how-tools-photo__inner > .fbl-section__title,
  .fbl-how-tools-photo .fbl-accordion { width: 100%; }
}

/* ================================================================
   TECNOLOGIA E VERIFICA — revisione editoriale e visuale 2026-07-25
   Regole cumulative: non sostituire con versioni CSS precedenti.
   ================================================================ */

.fbl-tech-hero-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(590px, 68vw, 720px);
  background: var(--pub-bg-alt);
}

.fbl-tech-hero-photo__media,
.fbl-tech-hero-photo__wash {
  position: absolute;
  inset: 0;
}

.fbl-tech-hero-photo__media picture,
.fbl-tech-hero-photo__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.fbl-tech-hero-photo__media img {
  object-fit: cover;
  object-position: center;
}

.fbl-tech-hero-photo__wash {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--pub-wash-rgb), 0.99) 0%, rgba(var(--pub-wash-rgb), 0.95) 35%, rgba(var(--pub-wash-rgb), 0.55) 58%, rgba(var(--pub-wash-rgb), 0.04) 78%),
    linear-gradient(180deg, rgba(var(--pub-wash-rgb), 0.35), rgba(var(--pub-wash-rgb), 0.12));
}

.fbl-tech-hero-photo .fbl-hero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(590px, 68vw, 720px);
  background: transparent;
}

.fbl-tech-hero-photo .fbl-hero__ambient { display: none; }

.fbl-tech-hero-photo .fbl-hero__content {
  width: 100%;
  max-width: var(--pub-container-wide);
  text-align: left;
}

.fbl-tech-hero-photo .fbl-hero__narrative {
  width: min(55%, 760px);
  margin: 0;
}

.fbl-tech-hero-photo .fbl-hero__eyebrow,
.fbl-tech-hero-photo .fbl-hero__title,
.fbl-tech-hero-photo .fbl-hero__lede {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.fbl-tech-hero-photo .fbl-hero__cta-row { justify-content: flex-start; }

.fbl-tech-roles-banner {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(29, 78, 216, 0.14);
  border-radius: calc(var(--fbl-s-radius-container) + 4px);
  background: rgba(var(--pub-glass-rgb), 0.92);
  box-shadow: 0 20px 54px rgba(35, 61, 91, 0.12);
}

.fbl-tech-roles-banner__media {
  min-height: 310px;
  overflow: hidden;
}

.fbl-tech-roles-banner__media picture,
.fbl-tech-roles-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.fbl-tech-roles-banner__media img {
  object-fit: cover;
  transition: transform 650ms cubic-bezier(.2, .7, .2, 1), filter 650ms ease;
}

.fbl-tech-roles-banner__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 5vw, 68px);
}

.fbl-tech-roles-banner__body h2 {
  max-width: 18ch;
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
}

.fbl-tech-roles-banner__body > p:last-child {
  max-width: 52ch;
  margin: 0;
  color: var(--pub-text-secondary);
  font-size: var(--pub-fs-body-lg);
}

.fbl-tech-roles-banner:hover .fbl-tech-roles-banner__media img {
  transform: scale(1.035);
  filter: saturate(1.06);
}

.fbl-tech-roles-stack .fbl-evidence-stack__row,
.fbl-tech-status__stack .fbl-evidence-stack__row {
  transition:
    opacity 500ms ease,
    transform 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    background-color 260ms ease;
}

.fbl-tech-roles-stack .fbl-evidence-stack__row:hover,
.fbl-tech-status__stack .fbl-evidence-stack__row:hover {
  transform: translateY(-5px);
  border-color: rgba(36, 197, 168, 0.48);
  box-shadow: 0 18px 40px rgba(35, 61, 91, 0.13);
}

.fbl-tech-roles-stack .fbl-evidence-stack__row:nth-child(4):hover,
.fbl-tech-status__stack .fbl-evidence-stack__row:nth-child(4):hover {
  border-color: rgba(45, 226, 194, 0.55);
  box-shadow: 0 20px 46px rgba(var(--pub-scrim-rgb), 0.28);
}

.fbl-tech-properties {
  background:
    radial-gradient(circle at 12% 20%, rgba(111, 207, 193, 0.15), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(74, 129, 221, 0.12), transparent 33%),
    var(--pub-bg-alt);
}

.fbl-tech-properties__table {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fbl-tech-properties__table .fbl-table {
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}

.fbl-tech-properties__table caption {
  margin-bottom: 8px;
  padding: 20px 24px;
  border: 1px solid rgba(29, 78, 216, 0.13);
  border-radius: var(--fbl-s-radius-container);
  background: rgba(var(--pub-glass-rgb), 0.72);
  box-shadow: 0 12px 30px rgba(35, 61, 91, 0.07);
}

.fbl-tech-properties__table thead th {
  border: 0;
  background: transparent;
}

.fbl-tech-properties__table tbody tr {
  filter: drop-shadow(0 9px 18px rgba(35, 61, 91, 0.07));
  transition: transform 220ms ease, filter 220ms ease;
}

.fbl-tech-properties__table tbody tr:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 14px 24px rgba(35, 61, 91, 0.13));
}

.fbl-tech-properties__table tbody td {
  border: 0;
  background: rgba(var(--pub-glass-rgb), 0.9);
}

.fbl-tech-properties__table tbody tr:nth-child(even) td {
  background: rgba(var(--pub-glass-rgb), 0.94);
}

.fbl-tech-properties__table tbody td:first-child {
  border-left: 3px solid rgba(36, 197, 168, 0.7);
  border-radius: 13px 0 0 13px;
}

.fbl-tech-properties__table tbody td:last-child {
  border-radius: 0 13px 13px 0;
}

.fbl-tech-switcher .fbl-stepper__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.fbl-tech-switcher .fbl-stepper__tab {
  width: 100%;
  min-height: 62px;
  justify-content: center;
  border-color: rgba(29, 78, 216, 0.22);
  color: var(--pub-on-light-primary);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

.fbl-tech-switcher .fbl-stepper__tab:hover,
.fbl-tech-switcher .fbl-stepper__tab:focus-visible {
  color: var(--pub-on-light-primary);
  border-color: var(--fbl-s-operative);
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(35, 61, 91, 0.11);
  transform: translateY(-2px);
}

.fbl-tech-switcher .fbl-stepper__tab[aria-selected="true"] {
  color: #07111f;
  border-color: var(--fbl-s-operative);
  background: var(--fbl-s-operative);
  box-shadow: 0 12px 28px rgba(36, 197, 168, 0.23);
}

.fbl-tech-panel {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border-width: 1px 1px 1px 6px;
  border-color: rgba(36, 197, 168, 0.42);
  background: linear-gradient(135deg, #ffffff 0%, #edf9f6 100%);
  box-shadow: 0 20px 48px rgba(35, 61, 91, 0.12);
  transition: border-color 280ms ease, background 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.fbl-tech-switcher[data-active-level="dati"] .fbl-tech-panel {
  border-color: rgba(37, 99, 235, 0.5);
  background: linear-gradient(135deg, #ffffff 0%, #eaf2ff 100%);
  box-shadow: 0 20px 48px rgba(37, 99, 235, 0.14);
}

.fbl-tech-switcher[data-active-level="rete"] .fbl-tech-panel {
  border-color: rgba(111, 85, 190, 0.48);
  background: linear-gradient(135deg, #ffffff 0%, #f1edff 100%);
  box-shadow: 0 20px 48px rgba(76, 57, 140, 0.14);
}

.fbl-tech-panel.is-changing { animation: fbl-tech-panel-shift 420ms cubic-bezier(.2, .7, .2, 1); }

@keyframes fbl-tech-panel-shift {
  0% { opacity: 0.62; transform: translateY(8px) scale(0.992); }
  100% { opacity: 1; transform: none; }
}

.fbl-tech-disclosure {
  max-width: 72ch;
  margin: 24px auto 0;
  padding: 14px 18px;
  border-left: 3px solid rgba(36, 197, 168, 0.7);
  border-radius: 0 10px 10px 0;
  background: rgba(239, 247, 252, 0.75);
  color: var(--pub-on-light-secondary);
  font-size: 0.92rem;
}

@media (max-width: 980px) {
  .fbl-tech-hero-photo__wash {
    background: linear-gradient(90deg, rgba(var(--pub-wash-rgb), 0.99) 0%, rgba(var(--pub-wash-rgb), 0.94) 54%, rgba(var(--pub-wash-rgb), 0.45) 100%);
  }
  .fbl-tech-hero-photo .fbl-hero__narrative { width: min(70%, 700px); }
  .fbl-tech-roles-banner { grid-template-columns: 1fr; }
  .fbl-tech-roles-banner__media { min-height: 300px; }
}

@media (max-width: 760px) {
  .fbl-tech-hero-photo,
  .fbl-tech-hero-photo .fbl-hero { min-height: 680px; }
  .fbl-tech-hero-photo__media img { object-position: 68% center; }
  .fbl-tech-hero-photo__wash { background: rgba(var(--pub-wash-rgb), 0.9); }
  .fbl-tech-hero-photo .fbl-hero__narrative { width: 100%; }
  .fbl-tech-hero-photo .fbl-hero__content,
  .fbl-tech-hero-photo .fbl-hero__eyebrow,
  .fbl-tech-hero-photo .fbl-hero__title,
  .fbl-tech-hero-photo .fbl-hero__lede { text-align: left; }
  .fbl-tech-hero-photo .fbl-hero__cta-row { align-items: stretch; }
  .fbl-tech-hero-photo .fbl-btn { width: 100%; }
  .fbl-tech-roles-banner__media { min-height: 230px; }
  .fbl-tech-roles-banner__body { padding: 28px 24px 32px; }
  .fbl-tech-switcher .fbl-stepper__list { grid-template-columns: 1fr; }
  .fbl-tech-switcher .fbl-stepper__tab:hover { transform: none; }
  .fbl-tech-properties__table .fbl-table { border-spacing: 0 14px; }
  .fbl-tech-properties__table tbody tr {
    display: block;
    overflow: hidden;
    border-left: 3px solid rgba(36, 197, 168, 0.7);
    border-radius: 13px;
    background: rgba(var(--pub-glass-rgb), 0.92);
  }
  .fbl-tech-properties__table tbody td,
  .fbl-tech-properties__table tbody tr:nth-child(even) td {
    border-radius: 0;
    background: transparent;
  }
  .fbl-tech-properties__table tbody td:first-child { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fbl-tech-roles-banner__media img,
  .fbl-tech-roles-stack .fbl-evidence-stack__row,
  .fbl-tech-status__stack .fbl-evidence-stack__row,
  .fbl-tech-properties__table tbody tr,
  .fbl-tech-panel { transition: none; }
  .fbl-tech-panel.is-changing { animation: none; }
}

/* =============================================================
   APPLICAZIONI — hero fotografica, card interattive e percorso pilot
   ============================================================= */
.fbl-app-hero {
  position: relative;
  min-height: clamp(620px, 66vw, 820px);
  margin-top: -88px;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.fbl-app-hero__media,
.fbl-app-hero__wash {
  position: absolute;
  inset: 0;
}

.fbl-app-hero__media {
  z-index: -2;
  overflow: hidden;
  background: #dfeaf2;
}

.fbl-app-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.015);
}

.fbl-app-hero__wash {
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(var(--pub-wash-rgb), 0.98) 0%,
      rgba(var(--pub-wash-rgb), 0.92) 28%,
      rgba(var(--pub-wash-rgb), 0.68) 48%,
      rgba(var(--pub-wash-rgb), 0.18) 72%,
      rgba(var(--pub-wash-rgb), 0.04) 100%),
    linear-gradient(180deg, rgba(var(--pub-wash-rgb), 0.12), rgba(var(--pub-scrim-rgb), 0.08));
}

.fbl-app-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: calc(88px + clamp(54px, 8vw, 112px));
  padding-bottom: clamp(64px, 9vw, 112px);
}

.fbl-app-hero__narrative {
  width: min(52%, 720px);
  text-align: left;
}

.fbl-app-hero__narrative h1 {
  max-width: 15ch;
  margin-bottom: 18px;
  color: var(--pub-text-primary);
  font-size: var(--pub-fs-hero-page);
  line-height: 1.08;
}

.fbl-app-hero__narrative .fbl-hero__eyebrow,
.fbl-app-hero__narrative .fbl-hero__lede {
  text-align: left;
  margin-left: 0;
}

.fbl-app-hero__narrative .fbl-hero__lede {
  max-width: 54ch;
  color: var(--fbl-s-text-secondary-light);
}

.fbl-app-hero__narrative .fbl-hero__cta-row {
  justify-content: flex-start;
}

/* Card stato applicazioni */
.fbl-app-status-card {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.fbl-app-status-card:hover {
  transform: translateY(-4px);
  border-color: rgba(29, 78, 216, 0.28);
  box-shadow: 0 18px 38px rgba(31, 52, 78, 0.13);
}

/* Card pubblico della sezione "Il primo campo di applicazione" */
.fbl-app-audience {
  box-shadow: var(--pub-shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.fbl-app-audience:hover {
  transform: translateY(-5px);
  border-color: rgba(36, 197, 168, 0.48);
  box-shadow: 0 18px 40px rgba(35, 61, 91, 0.13);
}

/* Sfondo fotografico per il percorso da idea a caso verificabile */
.fbl-app-pilot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pub-bg-alt);
}

.fbl-app-pilot::before,
.fbl-app-pilot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fbl-app-pilot::before {
  z-index: -2;
  background-image: url("../media/fable-economic-collaboration.webp");
  background-size: cover;
  background-position: center 46%;
  transform: scale(1.03);
}

.fbl-app-pilot::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--pub-wash-rgb), 0.93) 0%, rgba(var(--pub-wash-rgb), 0.86) 46%, rgba(var(--pub-wash-rgb), 0.94) 100%),
    linear-gradient(90deg, rgba(var(--pub-glass-rgb), 0.48), rgba(var(--pub-glass-rgb), 0.16));
}

.fbl-app-pilot .fbl-steps--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.fbl-app-pilot .fbl-steps__item {
  min-height: 100%;
  padding: 64px 20px 20px;
  border: 1px solid rgba(199, 210, 227, 0.95);
  border-radius: var(--fbl-s-radius-card);
  background: rgba(var(--pub-glass-rgb), 0.9);
  box-shadow: 0 12px 30px rgba(35, 61, 91, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.fbl-app-pilot .fbl-steps__item:hover {
  transform: translateY(-6px);
  border-color: rgba(29, 78, 216, 0.36);
  background: rgba(var(--pub-glass-rgb), 0.98);
  box-shadow: 0 20px 44px rgba(35, 61, 91, 0.15);
}

.fbl-app-pilot .fbl-steps__item::before {
  top: 18px;
  left: 20px;
}

.fbl-app-pilot .fbl-steps__icon {
  position: absolute;
  top: 27px;
  left: 66px;
  font-family: var(--fbl-p-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--fbl-public-interactive);
}

.fbl-app-pilot .fbl-steps__text {
  margin-bottom: 18px;
}

.fbl-app-pilot .fbl-steps__result {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--pub-line-strong);
  color: var(--pub-text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .fbl-app-hero__narrative { width: min(62%, 700px); }
  .fbl-app-pilot .fbl-steps--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbl-app-pilot .fbl-steps__item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .fbl-app-hero {
    min-height: 700px;
    margin-top: -78px;
  }

  .fbl-app-hero__content {
    padding-top: calc(78px + 54px);
    padding-bottom: 54px;
  }

  .fbl-app-hero__media img {
    object-position: 66% center;
  }

  .fbl-app-hero__wash {
    background: linear-gradient(180deg, rgba(var(--pub-wash-rgb), 0.88) 0%, rgba(var(--pub-wash-rgb), 0.94) 58%, rgba(var(--pub-wash-rgb), 0.98) 100%);
  }

  .fbl-app-hero__narrative { width: 100%; }
  .fbl-app-hero__narrative h1 { max-width: 18ch; }
  .fbl-app-hero__narrative .fbl-hero__cta-row { align-items: stretch; }
  .fbl-app-hero__narrative .fbl-btn { width: 100%; }

  .fbl-app-pilot .fbl-steps--five { grid-template-columns: 1fr; }
  .fbl-app-pilot .fbl-steps__item:last-child { grid-column: auto; }
  .fbl-app-pilot::before { background-position: 58% center; }
}

@media (hover: none) {
  .fbl-app-status-card:hover,
  .fbl-app-audience:hover,
  .fbl-app-pilot .fbl-steps__item:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fbl-app-status-card,
  .fbl-app-audience,
  .fbl-app-pilot .fbl-steps__item {
    transition: none;
  }
}

/* =============================================================
   PROTOCOL LAB — rifiniture pagina 2026-07
   Incollare questo blocco in fondo a public.css.
   ============================================================= */

/* Hero full-bleed con immagine sotto la navbar flottante. */
.fbl-lab-hero {
  position: relative;
  min-height: clamp(620px, 70vw, 820px);
  margin-top: -88px;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.fbl-lab-hero__media,
.fbl-lab-hero__wash { position: absolute; inset: 0; }
.fbl-lab-hero__media { z-index: -2; }
.fbl-lab-hero__media picture,
.fbl-lab-hero__media img { width: 100%; height: 100%; }
.fbl-lab-hero__media img { object-fit: cover; object-position: 68% center; transform: scale(1.015); }
.fbl-lab-hero__wash {
  z-index: -1;
  background: linear-gradient(90deg, rgba(244,249,252,.96) 0%, rgba(244,249,252,.90) 36%, rgba(244,249,252,.46) 60%, rgba(244,249,252,.08) 82%);
}
.fbl-lab-hero__content { width: 100%; padding-top: calc(88px + clamp(64px, 8vw, 110px)); padding-bottom: clamp(64px, 8vw, 110px); }
.fbl-lab-hero__narrative { width: min(54%, 720px); }
.fbl-lab-hero__narrative h1 { font-size: var(--pub-fs-hero-page); max-width: 16ch; color: var(--fbl-s-text-primary-light); }
.fbl-lab-hero__narrative .fbl-hero__lede { margin-left: 0; max-width: 54ch; }
.fbl-lab-hero__narrative .fbl-hero__cta-row { justify-content: flex-start; }

/* Mouseover delle card destinatari. */
#sec-destinatari .fbl-lab-audience {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
#sec-destinatari .fbl-lab-audience:hover {
  transform: translateY(-5px);
  border-color: rgba(29,78,216,.34);
  box-shadow: 0 18px 42px rgba(23,50,82,.14);
  background: var(--pub-bg);
}

/* Esplora il protocollo: nuova superficie e CTA. */
.fbl-lab-explore {
  background:
    radial-gradient(circle at 12% 14%, rgba(109,198,179,.22), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(29,78,216,.12), transparent 36%),
    var(--pub-bg-alt);
}
.fbl-lab-explore .fbl-lab-capability { background: rgba(var(--pub-glass-rgb),.88); backdrop-filter: blur(6px); }

/* Card editoriale del motore. */
.fbl-lab-engine-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  overflow: hidden;
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--fbl-s-radius-container);
  background: var(--pub-bg);
  box-shadow: var(--pub-shadow-lg);
}
.fbl-lab-engine-card__media { min-height: 520px; overflow: hidden; }
.fbl-lab-engine-card__media picture,
.fbl-lab-engine-card__media img { width: 100%; height: 100%; }
.fbl-lab-engine-card__media img { object-fit: cover; object-position: 68% center; transition: transform 500ms ease; }
.fbl-lab-engine-card:hover .fbl-lab-engine-card__media img { transform: scale(1.025); }
.fbl-lab-engine-card__body { padding: clamp(30px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.fbl-lab-engine-card__body h2 { font-size: var(--pub-fs-h2); color: var(--pub-text-primary); }
.fbl-lab-engine-card__body p { color: var(--pub-text-secondary); line-height: 1.65; }
.fbl-lab-engine-card__body .fbl-btn { align-self: flex-start; margin-top: 8px; }

/* Scenario: sfondo più deciso e pannelli bianchi ben staccati. */
.fbl-lab-scenario {
  background:
    linear-gradient(rgba(14,24,38,.78), rgba(14,24,38,.78)),
    url("../media/fable-applicazioni-hero.png") center/cover no-repeat;
}
.fbl-lab-scenario .fbl-section__eyebrow { color: #8fe0cd; }
.fbl-lab-scenario .fbl-section__title { color: #fff; }
.fbl-lab-scenario .fbl-section__lede { color: rgba(244,248,255,.84); }
.fbl-lab-scenario .fbl-scenario,
.fbl-lab-scenario .fbl-chart,
.fbl-how-scenario .fbl-scenario,
.fbl-how-scenario .fbl-chart { background: rgba(255,255,255,.97); border-color: rgba(255,255,255,.42); box-shadow: 0 24px 60px rgba(2,9,18,.24); }
.fbl-lab-scenario .fbl-scenario__head,
.fbl-how-scenario .fbl-scenario__head { background: #eef4fb; }
/* Il pannello scenario/grafico resta SEMPRE chiaro qui (galleggia sopra
   uno sfondo fotografico gia' scuro di suo, sia in Protocol Lab che in
   Come funziona — .fbl-how-scenario ha lo stesso pattern): il testo al
   suo interno deve restare scuro in entrambi i temi, non seguire il
   redirect adattivo usato altrove per le stesse classi su sfondi
   chiari. */
.fbl-lab-scenario .fbl-scenario__label,
.fbl-lab-scenario .fbl-scenario__note,
.fbl-lab-scenario .fbl-scenario__col h4,
.fbl-lab-scenario .fbl-scenario__events li,
.fbl-lab-scenario .fbl-chart__title,
.fbl-lab-scenario .fbl-chart__legend,
.fbl-how-scenario .fbl-scenario__label,
.fbl-how-scenario .fbl-scenario__note,
.fbl-how-scenario .fbl-scenario__col h4,
.fbl-how-scenario .fbl-scenario__events li,
.fbl-how-scenario .fbl-chart__title,
.fbl-how-scenario .fbl-chart__legend { color: var(--pub-on-light-secondary); }
.fbl-lab-scenario .fbl-scenario__metric-value,
.fbl-lab-scenario .fbl-chart__title,
.fbl-how-scenario .fbl-scenario__metric-value,
.fbl-how-scenario .fbl-chart__title { color: var(--pub-on-light-primary); }

/* CTA Tecnologia e verifica: contrasto esplicito, niente testo bianco su bianco. */
.fbl-lab-observation__cta {
  background: var(--pub-cta-mint);
  color: var(--pub-cta-text) !important;
  border: 1px solid transparent;
  box-shadow: 0 8px 20px rgba(4,16,28,.22);
}
.fbl-lab-observation__cta:hover { background: var(--pub-cta-mint-hover); color: var(--pub-cta-text) !important; }

/* Stato del Lab integrato nel banner fotografico. */
.fbl-lab-status-banner {
  overflow: hidden;
  border-radius: var(--fbl-s-radius-container);
  border: 1px solid var(--pub-line-strong);
  box-shadow: var(--pub-shadow-lg);
  background: var(--pub-bg);
}
.fbl-lab-status-banner__media { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fbl-lab-status-banner__media picture,
.fbl-lab-status-banner__media img,
.fbl-lab-status-banner__scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.fbl-lab-status-banner__media img { object-fit: cover; object-position: center; }
.fbl-lab-status-banner__scrim { background: linear-gradient(90deg, rgba(8,22,41,.86), rgba(17,63,74,.64)); }
.fbl-lab-status-banner__media p { position: relative; z-index: 1; max-width: 68ch; margin: 0; padding: 36px; text-align: center; color: #fff; font-weight: 700; line-height: 1.55; }
.fbl-lab-status-banner__content { padding: clamp(30px, 5vw, 54px); text-align: center; background: linear-gradient(135deg, var(--pub-bg-alt), var(--pub-bg)); }
.fbl-lab-status-banner__badges { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 18px 0; }
.fbl-lab-status-banner__content > p:last-child { max-width: 64ch; margin: 0 auto; }

@media (max-width: 900px) {
  .fbl-lab-hero__narrative { width: min(66%, 700px); }
  .fbl-lab-engine-card { grid-template-columns: 1fr; }
  .fbl-lab-engine-card__media { min-height: 380px; }
}

@media (max-width: 680px) {
  .fbl-lab-hero { min-height: 720px; margin-top: -78px; }
  .fbl-lab-hero__content { padding-top: calc(78px + 54px); padding-bottom: 54px; }
  .fbl-lab-hero__media img { object-position: 72% center; }
  .fbl-lab-hero__wash { background: linear-gradient(180deg, rgba(244,249,252,.88) 0%, rgba(244,249,252,.94) 58%, rgba(244,249,252,.99) 100%); }
  .fbl-lab-hero__narrative { width: 100%; align-self: flex-end; }
  .fbl-lab-hero__narrative .fbl-btn { width: 100%; }
  .fbl-lab-engine-card__media { min-height: 300px; }
  .fbl-lab-status-banner__media { min-height: 260px; }
}

@media (hover: none) {
  #sec-destinatari .fbl-lab-audience:hover { transform: none; }
  .fbl-lab-engine-card:hover .fbl-lab-engine-card__media img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #sec-destinatari .fbl-lab-audience,
  .fbl-lab-engine-card__media img { transition: none; }
}


/* =============================================================
   PROTOCOL LAB — correzione hero + Stato del Lab full-width
   Aggiungere DOPO il blocco precedente.
   ============================================================= */

/* Protocol Lab hero: trattamento chiaro di default. L'immagine originale
   resta luminosa; il velo serve solo a garantire la leggibilita' del testo
   sul lato sinistro, senza oscurare il soggetto sulla destra. */
.fbl-lab-hero__media img {
  object-position: 72% center;
  filter: none;
  opacity: 1;
}
.fbl-lab-hero__wash {
  background:
    linear-gradient(90deg,
      rgba(244, 249, 252, .96) 0%,
      rgba(244, 249, 252, .88) 31%,
      rgba(244, 249, 252, .42) 53%,
      rgba(244, 249, 252, .08) 72%,
      transparent 88%);
}
.fbl-lab-hero__narrative h1 {
  color: var(--fbl-s-text-primary-light);
  text-shadow: none;
}
.fbl-lab-hero__narrative .fbl-hero__eyebrow { color: var(--fbl-public-interactive); }
.fbl-lab-hero__narrative .fbl-hero__lede { color: var(--fbl-s-text-secondary-light); }
.fbl-lab-hero__narrative .fbl-btn--secondary {
  background: rgba(255,255,255,.72);
  color: var(--fbl-s-interactive-hover-on-light);
  border-color: var(--fbl-public-interactive);
}
.fbl-lab-hero__narrative .fbl-btn--secondary:hover {
  background: var(--pub-tint-blue);
  border-color: var(--fbl-s-interactive-hover-on-light);
}

/* La variante scura resta confinata esclusivamente al tema dark. */
html[data-theme="dark"] .fbl-lab-hero__wash {
  background:
    linear-gradient(90deg,
      rgba(5, 17, 35, .96) 0%,
      rgba(7, 23, 46, .90) 34%,
      rgba(9, 28, 53, .56) 57%,
      rgba(9, 28, 53, .10) 82%);
}
html[data-theme="dark"] .fbl-lab-hero__narrative h1 {
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
html[data-theme="dark"] .fbl-lab-hero__narrative .fbl-hero__eyebrow { color: #8fe0cd; }
html[data-theme="dark"] .fbl-lab-hero__narrative .fbl-hero__lede { color: rgba(245,249,255,.88); }
html[data-theme="dark"] .fbl-lab-hero__narrative .fbl-btn--secondary {
  background: rgba(255,255,255,.08);
  color: #ffffff;
  border-color: rgba(255,255,255,.58);
}
html[data-theme="dark"] .fbl-lab-hero__narrative .fbl-btn--secondary:hover {
  background: rgba(255,255,255,.16);
  border-color: #ffffff;
}

/* Stato del Lab: vera fascia di sezione, non card. */
.fbl-lab-status-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 470px;
  display: flex;
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
  background: #0b1b31;
}
.fbl-lab-status-strip__media,
.fbl-lab-status-strip__scrim {
  position: absolute;
  inset: 0;
}
.fbl-lab-status-strip__media { z-index: -2; }
.fbl-lab-status-strip__media picture,
.fbl-lab-status-strip__media img {
  width: 100%;
  height: 100%;
}
.fbl-lab-status-strip__media img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}
.fbl-lab-status-strip__scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5,18,36,.90), rgba(8,43,59,.70)),
    linear-gradient(180deg, rgba(4,14,29,.18), rgba(4,14,29,.42));
}
.fbl-lab-status-strip__content {
  text-align: center;
  color: #ffffff;
}
.fbl-lab-status-strip .fbl-section__eyebrow { color: #8fe0cd; }
.fbl-lab-status-strip__title {
  font-size: var(--pub-fs-h2);
  color: #ffffff;
  max-width: 22ch;
  margin: 0 auto 16px;
}
.fbl-lab-status-strip__lead,
.fbl-lab-status-strip__note {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
  color: rgba(246,250,255,.88);
  line-height: 1.65;
}
.fbl-lab-status-strip__lead { font-weight: 600; margin-bottom: 24px; }
.fbl-lab-status-strip__note { margin-bottom: 0; }
.fbl-lab-status-strip__badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 24px;
}
.fbl-lab-status-strip__badges .fbl-badge {
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 26px rgba(1,8,18,.18);
}

@media (max-width: 680px) {
  .fbl-lab-hero__media img { object-position: 74% center; }
  .fbl-lab-hero__wash {
    background: linear-gradient(180deg, rgba(5,17,35,.56) 0%, rgba(5,17,35,.84) 54%, rgba(5,17,35,.96) 100%);
  }
  .fbl-lab-status-strip { min-height: 560px; }
  .fbl-lab-status-strip__badges { flex-direction: column; align-items: center; }
}

/* =============================================================
   PROTOCOL LAB — CHI PUO' UTILIZZARLO
   Sfondo fotografico leggero, integrato nella sezione senza ridurre
   la leggibilita' di titoli, testi e card.
   Asset richiesto:
   app/static/public/media/fable-business-system-design.png
   ============================================================= */
#sec-destinatari.fbl-lab-audience-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pub-bg-alt);
}

#sec-destinatari.fbl-lab-audience-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../media/fable-business-system-design.png");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

#sec-destinatari.fbl-lab-audience-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--pub-wash-rgb), 0.97) 0%, rgba(var(--pub-wash-rgb), 0.93) 46%, rgba(var(--pub-wash-rgb), 0.88) 100%),
    linear-gradient(180deg, rgba(var(--pub-glass-rgb), 0.10), rgba(var(--pub-wash-rgb), 0.22));
}

#sec-destinatari.fbl-lab-audience-section .fbl-section__inner {
  position: relative;
  z-index: 1;
}

#sec-destinatari.fbl-lab-audience-section .fbl-lab-audience {
  background: rgba(var(--pub-glass-rgb), 0.90);
  border-color: rgba(173, 193, 216, 0.72);
  box-shadow: 0 10px 30px rgba(16, 33, 54, 0.08);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
}

#sec-destinatari.fbl-lab-audience-section .fbl-lab-audience--featured {
  background: linear-gradient(145deg, var(--pub-audience-featured-tint, rgba(234, 251, 246, 0.95)), rgba(var(--pub-glass-rgb), 0.92));
}

#sec-destinatari.fbl-lab-audience-section .fbl-lab-audience:hover {
  background: rgba(var(--pub-glass-rgb), 0.98);
  border-color: rgba(29, 78, 216, 0.42);
  box-shadow: 0 18px 42px rgba(16, 33, 54, 0.14);
}

@media (max-width: 900px) {
  #sec-destinatari.fbl-lab-audience-section::before {
    background-position: 62% center;
  }
  #sec-destinatari.fbl-lab-audience-section::after {
    background: rgba(var(--pub-wash-rgb), 0.93);
  }
}

@media (max-width: 600px) {
  #sec-destinatari.fbl-lab-audience-section::before {
    background-position: 70% center;
    transform: none;
  }
  #sec-destinatari.fbl-lab-audience-section::after {
    background: rgba(var(--pub-wash-rgb), 0.95);
  }
  #sec-destinatari.fbl-lab-audience-section .fbl-lab-audience {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #sec-destinatari.fbl-lab-audience-section::before {
    transform: none;
  }
}
/* =============================================================
   DOCUMENTAZIONE — revisione visuale dedicata
   Aggiungere in fondo a public.css
   ============================================================= */

/* Hero: visuale più ampia e presente, senza cambiare la macro condivisa. */
.fbl-doc-page > .fbl-hero:first-child {
  background: linear-gradient(135deg, #f7faff 0%, #eef5ff 45%, #eefbf7 100%);
}
.fbl-doc-page > .fbl-hero:first-child .fbl-hero__visual .fbl-edimg {
  aspect-ratio: 16 / 10 !important;
  min-height: clamp(320px, 34vw, 520px);
  margin-right: clamp(16px, 3vw, 40px);
}
.fbl-doc-page > .fbl-hero:first-child .fbl-hero__visual img {
  object-position: center;
}

/* Gradienti leggeri sulle sezioni prima a tinta unita. */
.fbl-doc-gradient-a {
  background: linear-gradient(150deg, var(--pub-bg) 0%, var(--pub-tint-dust) 52%, var(--pub-tint-mint-soft) 100%);
}
.fbl-doc-gradient-b {
  background: linear-gradient(135deg, var(--pub-tint-dust) 0%, var(--pub-bg) 46%, var(--pub-tint-mint-soft) 100%);
}
.fbl-doc-gradient-c {
  background: linear-gradient(145deg, var(--pub-bg-alt) 0%, var(--pub-tint-blue) 48%, var(--pub-tint-mint-soft) 100%);
}

/* Chiavi di lettura: immagine di sfondo con velo chiaro. */
.fbl-doc-reading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pub-bg-alt);
}
.fbl-doc-reading__media,
.fbl-doc-reading__scrim {
  position: absolute;
  inset: 0;
}
.fbl-doc-reading__media { z-index: -2; }
.fbl-doc-reading__media picture,
.fbl-doc-reading__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.fbl-doc-reading__scrim {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--pub-wash-rgb), .88), rgba(var(--pub-wash-rgb), .94)),
    linear-gradient(110deg, rgba(var(--pub-glass-rgb),.48), rgba(223,241,238,.28));
}
.fbl-doc-reading__inner { position: relative; z-index: 1; }
.fbl-doc-reading .fbl-doc-meta-grid article {
  background: rgba(var(--pub-glass-rgb), .88);
  border: 1px solid rgba(199, 210, 227, .88);
  box-shadow: 0 8px 24px rgba(16, 35, 58, .08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease, background-color 190ms ease;
}
@media (hover:hover) and (pointer:fine) {
  .fbl-doc-reading .fbl-doc-meta-grid article:hover {
    transform: translateY(-5px);
    border-color: rgba(29, 78, 216, .34);
    background: rgba(var(--pub-glass-rgb), .96);
    box-shadow: 0 18px 40px rgba(16, 35, 58, .15);
  }
}

/* Livelli di accesso: tre card editoriali complete, immagine + testo. */
.fbl-doc-access--media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(30px, 4vw, 48px);
}
.fbl-doc-access-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pub-line);
  border-radius: var(--fbl-s-radius-container);
  background: rgba(var(--pub-glass-rgb),.96);
  box-shadow: var(--pub-shadow-md);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.fbl-doc-access-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pub-tint-dust);
}
.fbl-doc-access-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(8, 22, 40, .18) 100%);
  pointer-events: none;
}
.fbl-doc-access-card__media picture,
.fbl-doc-access-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.fbl-doc-access-card:nth-child(1) .fbl-doc-access-card__media img { object-position: center 48%; }
.fbl-doc-access-card:nth-child(2) .fbl-doc-access-card__media img { object-position: center; }
.fbl-doc-access-card:nth-child(3) .fbl-doc-access-card__media img { object-position: center; }
.fbl-doc-access-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.5vw, 30px);
}
.fbl-doc-access-card__body h3 { margin: 16px 0 10px; }
.fbl-doc-access-card__body p { margin: 0; color: var(--pub-text-secondary); }
.fbl-doc-access-card--mint .fbl-doc-access-card__body {
  background: linear-gradient(145deg, #f4fcf9 0%, #ffffff 100%);
}
/* Card intenzionalmente sempre chiara (contrappunto visivo alla card
   --navy, sempre scura, per varieta' nella griglia): il testo resta
   scuro in entrambi i temi. */
.fbl-doc-access-card--mint .fbl-doc-access-card__body h3 { color: var(--pub-on-light-primary); }
.fbl-doc-access-card--mint .fbl-doc-access-card__body p { color: var(--pub-on-light-secondary); }
.fbl-doc-access-card--navy .fbl-doc-access-card__body {
  background: linear-gradient(145deg, #111d2d 0%, #172a40 100%);
  color: var(--fbl-s-text-primary-dark);
}
.fbl-doc-access-card--navy h3 { color: #ffffff; }
.fbl-doc-access-card--navy p { color: rgba(235, 242, 250, .82); }
.fbl-doc-access-card--navy .fbl-doc-access__tag {
  color: #eafbf6;
  border-color: rgba(109, 198, 179, .46);
  background: rgba(109, 198, 179, .12);
}
@media (hover:hover) and (pointer:fine) {
  .fbl-doc-access-card:hover {
    transform: translateY(-6px);
    border-color: rgba(29, 78, 216, .34);
    box-shadow: 0 22px 48px rgba(16, 35, 58, .16);
  }
  .fbl-doc-access-card:hover .fbl-doc-access-card__media img { transform: scale(1.045); }
}

@media (max-width: 900px) {
  .fbl-doc-access--media { grid-template-columns: 1fr; }
  .fbl-doc-access-card { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); }
  .fbl-doc-access-card__media { aspect-ratio: auto; min-height: 250px; }
}
@media (max-width: 600px) {
  .fbl-doc-access-card { display: flex; }
  .fbl-doc-access-card__media { aspect-ratio: 16 / 10; min-height: 0; }
  .fbl-doc-reading__scrim { background: rgba(var(--pub-wash-rgb), .94); }
}
@media (prefers-reduced-motion: reduce) {
  .fbl-doc-reading .fbl-doc-meta-grid article,
  .fbl-doc-access-card,
  .fbl-doc-access-card__media img { transition: none !important; }
}
/* Documentazione: mantiene un margine reale tra la visuale hero e il
   bordo destro del viewport. Il padding appartiene alla colonna della
   visuale, quindi non aumenta la larghezza della figura e non genera
   overflow come il precedente margin-right. */
.fbl-doc-page > .fbl-hero:first-child .fbl-hero__visual {
  padding-right: clamp(20px, 3vw, 48px);
}
.fbl-doc-page > .fbl-hero:first-child .fbl-hero__visual .fbl-edimg {
  width: 100%;
  min-width: 0;
  margin-right: 0;
}

/* Contatti — "Come possiamo aiutarti": rende la fotografia realmente
   percepibile mantenendo contrasto e leggibilita' delle card. */
#sec-percorsi-contatto.fbl-doc-reading {
  background: var(--pub-bg-alt);
}
#sec-percorsi-contatto .fbl-doc-reading__media img {
  object-position: 72% center;
  opacity: .88;
  filter: saturate(.9) contrast(1.04);
}
#sec-percorsi-contatto .fbl-doc-reading__scrim {
  background:
    linear-gradient(90deg,
      rgba(var(--pub-wash-rgb), .90) 0%,
      rgba(var(--pub-wash-rgb), .82) 42%,
      rgba(var(--pub-wash-rgb), .66) 72%,
      rgba(var(--pub-wash-rgb), .52) 100%),
    linear-gradient(180deg,
      rgba(var(--pub-glass-rgb), .10) 0%,
      rgba(var(--pub-wash-rgb), .20) 100%);
}

@media (max-width: 900px) {
  .fbl-doc-page > .fbl-hero:first-child .fbl-hero__visual {
    padding-right: 0;
  }
  #sec-percorsi-contatto .fbl-doc-reading__scrim {
    background: rgba(var(--pub-wash-rgb), .82);
  }
}

@media (max-width: 600px) {
  #sec-percorsi-contatto .fbl-doc-reading__media img {
    object-position: 68% center;
    opacity: .68;
  }
  #sec-percorsi-contatto .fbl-doc-reading__scrim {
    background: rgba(var(--pub-wash-rgb), .88);
  }
}