/** Shopify CDN: Minification failed

Line 6077:0 Unexpected "}"

**/
/* =============================================================================
   Speedy Food — production overlay
   Ported from the inline <style> block of the Claude Design navigable prototype.
   Loaded AFTER system.css so these rules win.

   Covers what system.css (the design system file) intentionally doesn't:
     · header logo PNG render (overrides the Times New Roman "SF" placeholder)
     · footer logo white via CSS mask
     · mobile nav burger visibility
     · accessibility skip link
     · sticky header behavior
     · scroll progress bar
     · grain texture
     · custom cursor
     · reveal-on-scroll
     · kinetic hero animation
     · card hover micro-interactions
     · button shimmer
     · section red filament dividers
     · prefers-reduced-motion opt-out
   ============================================================================= */

/* ============================================================ Global [hidden] override
   system.css applica `display: flex` a `.fm-step`, `.grazie__variant` ecc.
   che sovrascrivono il default `[hidden] { display: none }` del browser.
   Forziamo l'override globale per tutti i form/grazie/altri data-driven sections. */
[hidden] { display: none !important; }

/* ============================================================ Mega menu hover desktop (chat7 §B6)
   Hover su "Catalogo" → mega menu 4-col. Desktop only (>960px).
   Hover bridge: ::before invisibile sotto la voce di menu copre il gap fino al menu. */
.hdr__nav-item--mega { position: static; }
.hdr__nav-item--mega > a { position: relative; padding-right: 20px; }
/* Chevron disegnato col bordo, non il carattere "▾".
   Il glifo a 9px rendeva una macchia di due pixel che sembrava un difetto di
   rendering a fine parola, e nessuno capiva che la voce si espande. Un chevron
   costruito con due bordi resta nitido a qualsiasi densità, non dipende dal font
   e può ruotare davvero. Sovrascrive il sottolineato generico di .hdr__nav a::after. */
.hdr__nav .hdr__nav-item--mega > a::after {
  content: "" !important;
  /* Statico e nel flusso, non assoluto: ancorato a destra finiva sopra l'ultima
     lettera, perche' il padding-right su questa <a> non passa. Cosi' si colloca da
     solo dopo la parola. Tutta la geometria e' marcata perche' la regola generica
     .hdr__nav a::after (il sottolineato) sta PIU' IN BASSO in questo file e a
     parita' di specificita' vincerebbe lei. */
  position: static !important;
  display: inline-block !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 0 2px 8px !important;
  border: 0 !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  background: transparent !important;
  color: var(--sf-stone-600);
  vertical-align: middle;
  transform: rotate(45deg) !important;
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(.2,0,0,1), color 0.2s;
  pointer-events: none;
}
/* Aperto: il chevron punta in su. È il segnale che mancava. */
.hdr__nav .hdr__nav-item--mega:hover > a::after,
.hdr__nav .hdr__nav-item--mega:focus-within > a::after,
.hdr__nav .hdr__nav-item--mega.is-open > a::after {
  /* Ruotando di -135° il baricentro ottico sale: il margine compensa. */
  transform: rotate(-135deg) !important;
  margin-bottom: -2px !important;
  color: var(--sf-red);
}
@media (prefers-reduced-motion: reduce) {
  .hdr__nav .hdr__nav-item--mega > a::after { transition: color 0.2s; }
}
/* No underline for Catalogo — il ▾ indicator è sufficiente per il dropdown signal */
.hdr__nav .hdr__nav-item--mega > a:hover { color: var(--sf-red); }
/* Hover bridge invisibile sopra il menu — copre il gap tra link e mega menu.
   pointer-events:auto sempre, così l'hover si propaga al parent <a> attraversando il gap. */
.hdr__nav-item--mega > a::before {
  content: "";
  position: absolute;
  bottom: -28px;
  left: -24px; right: -24px;
  height: 28px;
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--sf-white);
  border-top: 1px solid var(--sf-stone-300);
  border-bottom: 1px solid var(--sf-stone-300);
  box-shadow: 0 24px 60px -16px rgba(14, 14, 14, 0.18);
  padding: 36px 48px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
/* Quando il menu è hover/focus → resta aperto */
.hdr__nav-item--mega:hover .mega-menu,
.hdr__nav-item--mega:focus-within .mega-menu,
.mega-menu:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.mega-menu__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* ═══════════ MEGA MENU V2 — near full-width con icone + featured ═══════════ */
.mega-menu--v2 {
  padding: 40px 36px 44px;
}
.mega-menu--v2 .mega-menu__inner {
  max-width: 1480px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.4fr;
  gap: 36px;
}
.mega-menu--v2 .mega-menu__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-menu--v2 .mega-menu__h {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--sf-red);
  margin: 0 0 18px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sf-stone-300);
}
/* Item: icon + label + sub */
.mega-menu--v2 .mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 8px 10px 0;
  margin: 0 -8px 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition:
    background 180ms cubic-bezier(0.2, 0, 0, 1),
    color 180ms cubic-bezier(0.2, 0, 0, 1);
}
.mega-menu--v2 .mega-menu__item:hover {
  background: var(--sf-off-white);
}
.mega-menu--v2 .mega-menu__ic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--sf-stone-300);
  color: var(--sf-red);
  transition:
    background 200ms cubic-bezier(0.2, 0, 0, 1),
    border-color 200ms cubic-bezier(0.2, 0, 0, 1),
    color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mega-menu--v2 .mega-menu__item:hover .mega-menu__ic {
  background: var(--sf-red);
  border-color: var(--sf-red);
  color: #FFFFFF;
}
.mega-menu--v2 .mega-menu__label,
.mega-menu--v2 .mega-menu__label-only {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--sf-black);
  line-height: 1.25;
}
.mega-menu--v2 .mega-menu__label small,
.mega-menu--v2 .mega-menu__label-only small {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--sf-stone-600);
  letter-spacing: 0;
  line-height: 1.3;
  margin-top: 2px;
}
.mega-menu--v2 .mega-menu__label-only {
  padding-left: 44px;
}

/* "Vedi tutto il catalogo" item: special accent */
.mega-menu--v2 .mega-menu__item--all {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--sf-stone-300);
  border-radius: 0;
  align-items: center;
  justify-content: space-between;
}
.mega-menu--v2 .mega-menu__item--all .mega-menu__label {
  color: var(--sf-red);
  font-weight: 600;
}
.mega-menu--v2 .mega-menu__item--all:hover {
  background: transparent;
}
.mega-menu--v2 .mega-menu__item--all:hover .mega-menu__label {
  color: var(--sf-black);
}
.mega-menu--v2 .mega-menu__arrow {
  color: var(--sf-red);
  font-size: 16px;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mega-menu--v2 .mega-menu__item--all:hover .mega-menu__arrow {
  transform: translateX(4px);
  color: var(--sf-black);
}

/* ─── FEATURED CARD (col 5): Esclusiva Pizzella ─── */
.mega-menu--v2 .mega-menu__featured {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--sf-off-white);
  border: 1px solid var(--sf-stone-300);
  transition:
    transform 240ms cubic-bezier(0.2, 0, 0, 1),
    border-color 240ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 240ms cubic-bezier(0.2, 0, 0, 1);
}
.mega-menu--v2 .mega-menu__featured:hover {
  transform: translateY(-2px);
  border-color: var(--sf-black);
  box-shadow: 0 16px 32px -20px rgba(14, 14, 14, 0.18);
}
.mega-menu--v2 .mega-menu__featured-media {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--sf-stone-300);
}
/* La card promo aveva il titolo su una riga sola (nowrap ereditato dalle voci di
   menu, che invece devono restare su una riga) e quindi tagliato dall'overflow
   della card: 416px di testo in 262 di spazio. Qui il testo deve andare a capo. */
.mega-menu--v2 .mega-menu__featured-eyebrow,
.mega-menu--v2 .mega-menu__featured-title,
.mega-menu--v2 .mega-menu__featured-sub {
  white-space: normal;
  overflow-wrap: anywhere;
}
.mega-menu--v2 .mega-menu__featured-title { text-wrap: balance; }
.mega-menu--v2 .mega-menu__featured-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mega-menu--v2 .mega-menu__featured-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-red);
}
.mega-menu--v2 .mega-menu__featured-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--sf-black);
}
.mega-menu--v2 .mega-menu__featured-sub {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sf-stone-600);
  margin: 0;
}
.mega-menu--v2 .mega-menu__featured-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sf-red);
  transition: gap 180ms cubic-bezier(0.2, 0, 0, 1);
}
.mega-menu--v2 .mega-menu__featured:hover .mega-menu__featured-cta {
  gap: 12px;
}

/* Desktop narrow (≤1400px): tighter eyebrow per evitare wrap */
@media (max-width: 1400px) {
  .mega-menu--v2 .mega-menu__featured-eyebrow {
    letter-spacing: 0.1em;
    font-size: 9.5px;
  }
}

/* Tablet landscape (961–1280): 4-col cat + featured row sotto */
@media (max-width: 1280px) and (min-width: 961px) {
  .mega-menu--v2 {
    padding: 32px 28px 36px;
  }
  .mega-menu--v2 .mega-menu__inner {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 28px 24px;
  }
  .mega-menu--v2 .mega-menu__featured {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .mega-menu--v2 .mega-menu__featured-media {
    width: 38%;
    aspect-ratio: auto;
    min-height: 160px;
    flex-shrink: 0;
  }
  .mega-menu--v2 .mega-menu__featured-body {
    flex: 1;
    padding: 24px 28px;
    justify-content: center;
  }
  .mega-menu--v2 .mega-menu__featured-eyebrow {
    letter-spacing: 0.12em;
    font-size: 10px;
  }
}

/* Legacy v1 fallback (for non-v2 mega menus) */
.mega-menu:not(.mega-menu--v2) .mega-menu__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-menu:not(.mega-menu--v2) .mega-menu__h {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sf-red);
  margin-bottom: 14px;
  font-weight: 500;
}
.mega-menu:not(.mega-menu--v2) .mega-menu__col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--sf-stone-600);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.12s;
}
.mega-menu:not(.mega-menu--v2) .mega-menu__col a:hover { color: var(--sf-black); }

@media (max-width: 960px) {
  .mega-menu { display: none; }
  .hdr__nav-item--mega > a::after { display: none; }
}

/* ============================================================ Search modal globale
   Triggered by .hdr__search-btn or Cmd/Ctrl+K. Client-side fuzzy search sui 112 SKU. */
.hdr__search-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--sf-black);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  margin-right: 2px;
}
.hdr__search-btn:hover {
  background: var(--sf-off-white);
  color: var(--sf-red);
}
.hdr__search-btn:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 2px;
}
.hdr__search-btn svg { width: 22px; height: 22px; }
/* ============================================================ Search overlay full-screen
   Consumer-ecommerce style: hero search input on top, live product grid below.
   Apre full screen, opacità soft, niente kbd hints, niente code-style.
   Triggered by .hdr__search-btn (data-search-open). */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--sf-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: search-fade-in 220ms var(--ease-standard);
}
.search-overlay[hidden] { display: none; }
@keyframes search-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-overlay__hero {
  padding: 32px 32px 18px;
  background: var(--sf-off-white);
  border-bottom: 1px solid var(--sf-stone-300);
}
.search-overlay__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.search-overlay__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-red);
  width: 40px;
  height: 40px;
}
.search-overlay__input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  color: var(--sf-black);
}
.search-overlay__input::placeholder {
  color: var(--sf-stone-400);
  font-weight: 400;
}
.search-overlay__close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sf-stone-300);
  background: var(--sf-white);
  color: var(--sf-black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.search-overlay__close:hover {
  background: var(--sf-black);
  color: var(--sf-white);
  border-color: var(--sf-black);
}
.search-overlay__close:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 2px;
}
.search-overlay__hint {
  max-width: 980px;
  margin: 14px auto 0;
  padding-left: 56px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--sf-stone-600);
}
.search-overlay__hint strong { color: var(--sf-black); font-weight: 600; }

.search-overlay__content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px 32px 80px;
}
.search-overlay__quick {
  max-width: 980px;
  margin: 0 auto 32px;
}
.search-overlay__quick-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
  margin-bottom: 14px;
}
.search-overlay__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.search-overlay__chip {
  background: var(--sf-off-white);
  border: 1px solid var(--sf-stone-300);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--sf-black);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.search-overlay__chip:hover {
  background: var(--sf-red);
  border-color: var(--sf-red);
  color: var(--sf-white);
  transform: translateY(-1px);
}

.search-overlay__results {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.search-overlay__result {
  display: flex;
  flex-direction: column;
  background: var(--sf-white);
  border: 1px solid var(--sf-stone-300);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  animation: search-card-in 240ms var(--ease-standard) both;
}
@keyframes search-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-overlay__result:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(14, 14, 14, 0.18);
  border-color: var(--sf-black);
}
.search-overlay__result-img {
  aspect-ratio: 4 / 3;
  background-color: var(--sf-stone-300);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--sf-stone-300);
}
.search-overlay__result-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-overlay__result-cat {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-red);
}
.search-overlay__result-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--sf-black);
  line-height: 1.3;
}
.search-overlay__result-linea {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--sf-stone-600);
  margin-top: 2px;
}

.search-overlay__empty {
  max-width: 980px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
}
.search-overlay__empty-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--sf-black);
  margin: 0 0 8px;
}
.search-overlay__empty-body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--sf-stone-600);
  margin: 0 0 22px;
}
.search-overlay__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sf-red);
  color: var(--sf-white);
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--dur-fast) var(--ease-standard);
}
.search-overlay__empty-cta:hover { background: var(--sf-red-hover); }

@media (max-width: 768px) {
  .search-overlay__hero { padding: 20px 16px 14px; }
  .search-overlay__bar { gap: 10px; }
  .search-overlay__icon { width: 32px; height: 32px; }
  .search-overlay__icon svg { width: 22px; height: 22px; }
  .search-overlay__input { font-size: 22px; }
  .search-overlay__close { width: 38px; height: 38px; }
  .search-overlay__hint {
    padding-left: 0;
    font-size: 13px;
    margin-top: 10px;
  }
  .search-overlay__content { padding: 20px 16px 60px; }
  .search-overlay__results { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .search-overlay__result-title { font-size: 14px; }
  .search-overlay__result-body { padding: 10px 12px 12px; }
}

/* ============================================================ Skeleton loader (collection grid)
   Mostra shimmer su .collection-grid__card finché immagini non hanno completato il loading.
   Auto-disable post-load via JS o IntersectionObserver. */
.skel { position: relative; overflow: hidden; }
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  animation: skel-shimmer 1.4s infinite;
  pointer-events: none;
}
@keyframes skel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.collection-grid__card.is-loading {
  background: var(--sf-stone-300) !important;
}
.collection-grid__card.is-loading > * {
  visibility: hidden;
}
.collection-grid__card.is-loading::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--sf-stone-300) 8%, var(--sf-off-white) 18%, var(--sf-stone-300) 33%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skel::after, .collection-grid__card.is-loading::before { animation: none; }
}

/* ============================================================ Print stylesheet (PDP procurement)
   Buyer B2B stampa la scheda: hide nav/CTA, ottimizza layout per A4 portrait.
   Link visibili come URL · scheda + allergeni + packaging + cottura in full. */
@media print {
  /* Hide chrome */
  .hdr, .ftr-main, .pdp-sticky-cta, .sp-banner-cta,
  .pdp-hero-v2 a[href*="richiedi-consulenza"],
  .pdp-hero-v2 a[href*="wa.me"],
  .pdp-hero__thumbs,
  #grain, .scroll-progress, .custom-cursor,
  .home-header, .home-hero,
  script, noscript { display: none !important; }
  /* Page setup */
  @page {
    size: A4;
    margin: 18mm 14mm 16mm;
  }
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
    line-height: 1.4;
    padding: 0 !important;
  }
  /* PDP hero: image left, content right keeps but smaller */
  .pdp-hero-v2 {
    padding: 0 !important;
  }
  .pdp-hero__grid {
    grid-template-columns: 1fr 1.5fr !important;
    gap: 16mm !important;
  }
  .pdp-hero-v2 h1 {
    font-size: 22pt !important;
    margin-bottom: 6mm !important;
  }
  .pdp-hero-v2 .pdp-hero__big {
    aspect-ratio: 1/1 !important;
    max-height: 80mm;
  }
  /* Force light backgrounds */
  section.sp-section, section.sp-section--cream {
    background: white !important;
    color: black !important;
    padding: 6mm 0 !important;
    page-break-inside: avoid;
  }
  /* Show link URLs after anchor text */
  a[href^="http"]:after,
  a[href^="/"]:after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: var(--sf-stone-600);
    word-break: break-all;
  }
  /* Color overrides */
  .overline, [class*="overline"] { color: black !important; }
  /* Page break utility */
  section { page-break-inside: avoid; }
  h2 { page-break-after: avoid; }
  table { page-break-inside: avoid; }
  /* Breadcrumb compact */
  .pdp-breadcrumb { padding: 0 !important; font-size: 9pt !important; margin-bottom: 4mm; }
  /* Print header brand */
  body::before {
    content: "Speedy Food · Scheda tecnica prodotto · " attr(data-print-date);
    display: block;
    font-size: 9pt;
    color: var(--sf-stone-600);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 2mm;
    margin-bottom: 6mm;
  }
}

/* ============================================================ Form bigcards mobile stack */
@media (max-width: 720px) {
  .fm-step__bigcards { grid-template-columns: 1fr !important; }
  .fm-grid-2 { grid-template-columns: 1fr !important; }
}

/* ============================================================ Home hero h1 color
   system.css ha rule per .hero-split__l h2 (off-white) ma il markup ora usa h1. */
.hero-split__l h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--sf-off-white);
  margin: 0;
}

/* ============================================================ Footer responsive
   system.css ha grid 4-col senza breakpoint. Su mobile collassa in 2 col + brand full-width. */
@media (max-width: 720px) {
  .ftr-main {
    padding: 40px 20px 20px !important;
  }
  .ftr-main__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
  }
  .ftr-main__brand {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .ftr-main__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }
}

/* ============================================================ Global focus + interactive polish
   Accessibility: visible focus rings su tutti gli interattivi.
   Hover: micro-interazioni coerenti su card, button, link. */
*:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 2px;
}
button, a {
  -webkit-tap-highlight-color: rgba(215, 38, 30, 0.15);
}
/* Smooth scroll site-wide */
html { scroll-behavior: smooth; }
/* Select arrow personalizzata coerente */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235A5447' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

/* ============================================================ Form Richiedi consulenza — layout
   system.css ha definito `.fm-body` con grid 240/1fr ma il markup usa `.fm-shell` direttamente.
   Patch: applicare il grid alla shell + spacing top + actions bar finale. */
.fm-shell {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 56px var(--container-pad-desktop) 96px;
  align-items: start;
}

/* Mobile progress bar: nascosto su desktop (la sidebar fa già da indicatore step) */
@media (min-width: 881px) {
  .fm-pbar { display: none; }
}
.fm-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
}
.fm-sidebar__brand .overline {
  color: var(--sf-red);
  margin-bottom: 12px;
  display: block;
}
.fm-sidebar__note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sf-stone-600);
  margin: 0 0 28px;
}
.fm-sidebar__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--sf-stone-300);
  padding-top: 8px;
}
.fm-sidebar__step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--sf-stone-600);
  position: relative;
}
.fm-sidebar__step + .fm-sidebar__step {
  border-top: 1px dashed var(--sf-stone-300);
}
.fm-sidebar__n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sf-stone-600);
  min-width: 24px;
}
.fm-sidebar__step.is-current .fm-sidebar__n,
.fm-sidebar__step.is-active .fm-sidebar__n {
  color: var(--sf-red);
}
.fm-sidebar__step.is-current .fm-sidebar__a,
.fm-sidebar__step.is-active .fm-sidebar__a {
  color: var(--sf-black);
  font-weight: 500;
}
.fm-sidebar__step.is-done .fm-sidebar__n,
.fm-sidebar__step.is-done .fm-sidebar__a {
  color: var(--sf-stone-400);
  text-decoration: line-through;
}

/* Step transitions: il form.js mostra/nasconde gli step via .is-active + hidden.
   La reveal-on-scroll IntersectionObserver fa fire una volta sola, quindi quando
   uno step nuovo diventa visibile (post-click Avanti) rimane opacity:0.
   Forziamo .is-active a essere sempre visibile indipendentemente da .in-view. */
.fm-step.reveal.is-active {
  opacity: 1 !important;
  transform: none !important;
}

.fm-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  margin-top: 12px;
  border-top: 1px solid var(--sf-stone-300);
  flex-wrap: wrap;
}
.fm-form__nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.fm-form__nav .btn-ghost {
  background: transparent;
  border: none;
  color: var(--sf-stone-600);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 8px;
  cursor: pointer;
  transition: color 0.18s;
}
.fm-form__nav .btn-ghost:hover:not(:disabled) {
  color: var(--sf-black);
}
.fm-form__nav .btn-ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.fm-form__nav .btn,
.fm-form__nav .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--sf-red);
  color: var(--sf-white);
  border: 1px solid var(--sf-red);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.fm-form__nav .btn:hover:not(:disabled),
.fm-form__nav .btn-primary:hover:not(:disabled) {
  background: var(--sf-red-hover);
  border-color: var(--sf-red-hover);
  transform: translateY(-1px);
}
.fm-form__nav .btn:disabled,
.fm-form__nav .btn-primary:disabled {
  background: var(--sf-stone-300);
  border-color: var(--sf-stone-300);
  color: var(--sf-stone-600);
  cursor: not-allowed;
  transform: none;
}
.fm-form__nav .btn svg,
.fm-form__nav .btn-primary svg {
  width: 14px;
  height: 14px;
}

/* mobile responsive: collassa sidebar in cima al main */
@media (max-width: 880px) {
  .fm-shell {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px var(--container-pad-mobile) 64px;
  }
  .fm-sidebar {
    position: static;
    border-bottom: 1px solid var(--sf-stone-300);
    padding-bottom: 24px;
  }
  .fm-sidebar__steps {
    display: none;
  }
}

/* ============================================================ Accessibility */
/* Nascosto alla vista, non agli screen reader. Nel tema esisteva solo la
   variante -focusable, quindi ogni label marcata .visually-hidden restava
   visibile: succedeva sul campo di ricerca del catalogo. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.visually-hidden-focusable {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 12px 18px;
  background: var(--sf-black);
  color: var(--sf-off-white);
  clip: auto;
  z-index: 10000;
  font: 600 13px/1 var(--font-body);
  text-decoration: none;
  border-radius: var(--radius-md);
}

/* ============================================================ Mobile overflow safety net
   Prevent horizontal scroll on body + force sections to respect viewport. */
html, body { overflow-x: clip; max-width: 100vw; }
section, .section { max-width: 100vw; }
@media (max-width: 768px) {
  /* Fork: forziamo minmax(0, 1fr) per evitare che il content del card spinga la track oltre il viewport */
  .home-fork {
    padding: 32px 16px !important;
    gap: 16px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .home-fork > * { min-width: 0; }
  .fork-card {
    padding: 28px !important;
    min-width: 0;
  }
  .community-banner__txt {
    padding: 36px 20px !important;
  }
  .community-banner__media {
    min-width: 0 !important;
    width: 100%;
  }
}

/* ============================================================ Body sizing fix for sticky header
   system.css line 27 sets `html, body { height: 100% }` which traps `position: sticky` inside
   the 100vh body, preventing the header from staying pinned when scrolling past 1vh. Fix: let
   body grow with content. */
html { height: 100%; }
body { min-height: 100%; height: auto; }

/* ============================================================ Topbar — dark strip cross-site info
   Anchored at the very top, non-sticky (scrolls away with content). Header still sticks below it. */
.topbar {
  background: var(--sf-black);
  color: var(--sf-off-white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 9px 32px;
  max-width: 1600px;
  margin: 0 auto;
}
.topbar__info,
.topbar__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topbar__contact { gap: 18px; }
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.topbar__item svg { flex-shrink: 0; opacity: 0.7; }
.topbar__item--link { cursor: pointer; }
.topbar__item--link:hover { color: var(--sf-white); }
.topbar__item--link:hover svg { opacity: 1; }
.topbar__sep {
  color: rgba(255, 255, 255, 0.28);
  font-weight: 400;
}
.topbar__social-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
/* Language switcher (visibile solo con >1 lingua pubblicata) */
.topbar__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.topbar__lang-item {
  background: none;
  border: 0;
  padding: 2px 2px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.topbar__lang-item:hover { color: var(--sf-white); }
.topbar__lang-item.is-on { color: var(--sf-white); font-weight: 600; cursor: default; }
.topbar__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.topbar__social:hover {
  background: var(--sf-red);
  color: var(--sf-white);
}
.topbar__social:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .topbar__inner {
    padding: 8px 12px;
    gap: 0;
    /* Single distributed row: pin · hours hidden · phone · email · IG · FB */
    justify-content: space-between;
  }
  .topbar__info,
  .topbar__contact {
    gap: 0;
  }
  /* Hide only hours on mobile (orari poco utili a mobile, address+map link è la priorità) */
  .topbar__info .topbar__sep,
  .topbar__info .topbar__item:not(.topbar__item--link) { display: none; }
  /* Address shown as icon-only circle button → tap = apri Maps */
  .topbar__contact-text { display: none; }
  .topbar__item--link {
    width: 30px;
    height: 30px;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 2px;
  }
  .topbar__item--link:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  .topbar__item--link svg { opacity: 1; }
  .topbar__social-row {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 8px;
    margin-left: 4px;
    gap: 0;
  }
  .topbar__social { width: 28px; height: 28px; }
}
@media (max-width: 360px) {
  /* Drop email on very narrow screens to keep spacing comfortable */
  .topbar__email { display: none; }
}

/* ============================================================ Header — 3-col grid + sticky scroll hide
   Desktop:  [ logo (start) ] [ nav (center) ] [ cta (end) ]
   Mobile:   [ burger (start) ] [ logo (center) ] [ search (end) ]
   Scroll behavior: header trasla in alto su scroll-down, ritorna su scroll-up.
*/
.hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  position: relative;
  padding: 16px 32px;
}
.hdr__brand {
  display: flex;
  align-items: center;
  grid-column: 1;
  justify-self: start;
}
.hdr__nav {
  grid-column: 2;
  justify-self: center;
}
.hdr__cta {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hdr__logo-link {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}
.hdr__logo {
  /* PNG sorgente è 2000x2000 (quadrato) — il box DEVE essere 1:1 per non sembrare decentrato.
     Text "SF" rimane come fallback semantico ma è invisibile. */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  display: inline-block;
  width: 108px;
  height: 108px;
  background: url("speedy-food-primary.png") center center / contain no-repeat;
  transition: width var(--dur-base) var(--ease-standard),
              height var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  transform-origin: center center;
}
html.is-scrolled .hdr__logo {
  width: 84px;
  height: 84px;
}

/* Sticky + scroll-direction hide */
.hdr.is-sticky {
  position: sticky;
  top: 0;
  z-index: 80;
  /* Explicit default transform so the transition has a clean target when .is-hidden is removed */
  transform: translateY(0);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid transparent;
  transition: transform 280ms var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              padding var(--dur-base) var(--ease-standard);
  will-change: transform;
}
html.is-scrolled .hdr.is-sticky {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--sf-stone-300);
  padding-top: 10px;
  padding-bottom: 10px;
}
.hdr.is-sticky.is-hidden {
  transform: translateY(-100%);
}

/* Desktop nav links */
.hdr__nav {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.hdr__nav a {
  position: relative;
  padding: 6px 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--sf-black);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
  white-space: nowrap;
}
/* Tablet narrow (≤1100px): nav gap + font ridotti per evitare wrap */
@media (max-width: 1100px) and (min-width: 961px) {
  .hdr__nav { gap: 18px; }
  .hdr__nav a { font-size: 13px; }
}
.hdr__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--sf-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-standard);
}
.hdr__nav a:hover { color: var(--sf-red); }
.hdr__nav a:hover::after { transform: scaleX(1); }

/* Burger button — hidden on desktop, no border for clean look */
.hdr__burger {
  display: none;
  grid-column: 1;
  justify-self: start;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--sf-black);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.hdr__burger:hover { background: var(--sf-off-white); color: var(--sf-red); }
.hdr__burger:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 2px; }
.hdr__burger svg { width: 22px; height: 22px; }

@media (max-width: 960px) {
  .hdr {
    padding: 12px 16px;
    gap: 12px;
    grid-template-columns: auto 1fr auto;
  }
  .hdr__burger { display: inline-flex; }
  .hdr__brand {
    grid-column: 2;
    justify-self: center;
  }
  .hdr__nav { display: none; }
  .hdr__cta {
    grid-column: 3;
    gap: 6px;
  }
  /* Mobile: only search btn visible in right cluster */
  .hdr__login,
  .hdr__cta .btn-primary { display: none; }
  .hdr__logo {
    width: 78px;
    height: 78px;
  }
  html.is-scrolled .hdr__logo {
    width: 66px;
    height: 66px;
  }
}

/* ============================================================ Mobile sidebar drawer
   Slide-in da sx con backdrop. Contiene: menu items + social + CTA.
   Trigger: [data-nav-toggle] (.hdr__burger) — close: [data-nav-close] + ESC + backdrop click. */
.hdr-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 340ms;
}
.hdr-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.hdr-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.48);
  opacity: 0;
  transition: opacity 320ms var(--ease-standard);
}
.hdr-drawer.is-open .hdr-drawer__backdrop { opacity: 1; }
.hdr-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 88%;
  max-width: 360px;
  background: var(--sf-white);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 320ms var(--ease-standard);
  box-shadow: 0 0 60px -16px rgba(14, 14, 14, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hdr-drawer.is-open .hdr-drawer__panel { transform: translateX(0); }

.hdr-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--sf-stone-300);
}
.hdr-drawer__brand { display: inline-flex; align-items: center; line-height: 0; }
.hdr-drawer__brand .hdr__logo {
  width: 48px;
  height: 48px;
}
.hdr-drawer__close {
  background: transparent;
  border: 1px solid var(--sf-stone-300);
  border-radius: var(--radius-md);
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sf-black);
}
.hdr-drawer__close:hover { background: var(--sf-black); color: var(--sf-off-white); border-color: var(--sf-black); }
.hdr-drawer__close:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 2px; }

.hdr-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 0;
  flex-grow: 1;
}
.hdr-drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  color: var(--sf-black);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.hdr-drawer__nav a:hover,
.hdr-drawer__nav a:focus-visible {
  background: var(--sf-off-white);
  color: var(--sf-red);
  outline: none;
}
.hdr-drawer__arrow {
  opacity: 0.4;
  font-size: 18px;
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.hdr-drawer__nav a:hover .hdr-drawer__arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--sf-red);
}

/* Drawer contact block: phone · email · address · hours */
.hdr-drawer__contact {
  padding: 16px 20px;
  border-top: 1px solid var(--sf-stone-300);
}
.hdr-drawer__contact-label,
.hdr-drawer__social-label,
.hdr-drawer__cta-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
  margin-bottom: 10px;
}
.hdr-drawer__contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--sf-black);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  transition: color var(--dur-fast) var(--ease-standard);
}
.hdr-drawer__contact-row:last-child { border-bottom: none; }
.hdr-drawer__contact-row svg { color: var(--sf-red); flex-shrink: 0; }
.hdr-drawer__contact-row:hover { color: var(--sf-red); }
.hdr-drawer__contact-row--static { cursor: default; }
.hdr-drawer__contact-row--static:hover { color: var(--sf-black); }

.hdr-drawer__social {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--sf-stone-300);
}
.hdr-drawer__social-row {
  display: flex;
  gap: 8px;
}
.hdr-drawer__social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--sf-stone-300);
  border-radius: 50%;
  color: var(--sf-black);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.hdr-drawer__social-row a:hover {
  background: var(--sf-red);
  color: var(--sf-white);
  border-color: var(--sf-red);
}

/* Prominent CTA block at drawer bottom */
.hdr-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 24px;
  background: var(--sf-off-white);
  border-top: 1px solid var(--sf-stone-300);
}
.hdr-drawer__cta-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 22px !important;
  background: var(--sf-red) !important;
  color: var(--sf-white) !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--radius-md);
  text-align: center;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  box-shadow: 0 8px 20px -10px rgba(215, 38, 30, 0.55);
}
.hdr-drawer__cta-primary:hover {
  background: var(--sf-red-hover) !important;
  transform: translateY(-1px);
}
.hdr-drawer__cta-primary span {
  font-size: 18px;
  line-height: 1;
  margin-left: 4px;
}
.hdr-drawer__cta-sub {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--sf-stone-600);
}
.hdr-drawer__cta-ghost-link {
  display: block;
  text-align: center;
  margin-top: 6px;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--sf-stone-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hdr-drawer__cta-ghost-link:hover { color: var(--sf-black); }

body.is-nav-locked,
body.is-search-locked { overflow: hidden; }

@media (min-width: 961px) {
  /* Drawer non visibile da desktop */
  .hdr-drawer { display: none; }
}

/* ============================================================ Footer logo white (CSS mask) */
.ftr-main__brand .sf-logo--white {
  display: inline-block;
  /* PNG sorgente quadrato 2000x2000 → box 1:1 per evitare decentramento */
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  background-color: var(--sf-white);
  -webkit-mask: url("speedy-food-primary.png") left center / contain no-repeat;
          mask: url("speedy-food-primary.png") left center / contain no-repeat;
  /* Hide any literal text */
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.ftr-main__claim {
  color: var(--sf-off-white);
  font-size: 16px;
  line-height: 1.55;
  max-width: 280px;
  margin: 0 0 18px;
}

/* ============================================================ Scroll progress bar */
.site-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, var(--sf-red) 0%, var(--sf-red-hover) 100%);
  z-index: 9998;
  pointer-events: none;
  transition: opacity 200ms;
}

/* ============================================================ Grain texture */
.site-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45MicgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwICAwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMC42IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknIG9wYWNpdHk9JzEnLz48L3N2Zz4=");
  background-size: 220px 220px;
}

/* ============================================================ Custom cursor */
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor [role="button"] { cursor: none; }
/* Custom cursor — design pensato per audience 40-55 (B2B HORECA).
   Cursor sempre visibile, alta visibilità, niente effetti "clever" tipo mix-blend.
   Default: dot rosso solido + halo bianco con bordo dark.
   Hover su link/button: cursor diventa pill con etichetta ("Apri" / "Vai") in rosso. */
.site-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: width 200ms var(--ease-standard),
              height 200ms var(--ease-standard),
              background-color 200ms var(--ease-standard),
              border-color 200ms var(--ease-standard),
              opacity 180ms;
}
/* Discreto: un solo dot piccolo e sobrio che segue preciso il mouse (niente ring che insegue) */
.site-cursor--dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--sf-red);
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(14,14,14,0.28);
}
/* Hover su elemento interattivo: il dot si allarga leggermente, resta sobrio */
html.cursor-hover .site-cursor--dot {
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: rgba(215, 38, 30, 0.9);
}
/* Disable su touch + reduced motion */
@media (pointer: coarse) { .site-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html.has-custom-cursor, html.has-custom-cursor body,
  html.has-custom-cursor a, html.has-custom-cursor button,
  html.has-custom-cursor [role="button"] { cursor: auto !important; }
  .site-cursor { display: none !important; }
}

/* ============================================================ Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0, 0, 1) var(--reveal-delay, 0ms),
    transform 700ms cubic-bezier(0.2, 0, 0, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.home-hero.reveal { transform: translateY(0); }
.home-hero.reveal .hero-split__r { opacity: 0; transform: translateX(28px); transition: opacity 800ms 240ms cubic-bezier(0.2,0,0,1), transform 800ms 240ms cubic-bezier(0.2,0,0,1); }
.home-hero.in-view .hero-split__r { opacity: 1; transform: translateX(0); }

.fork-card.reveal,
.card-solution.reveal,
.mini-cluster.reveal,
.home-mag__grid .card-mag.reveal {
  transform: translateY(28px) scale(0.985);
}
.fork-card.reveal.in-view,
.card-solution.reveal.in-view,
.mini-cluster.reveal.in-view,
.home-mag__grid .card-mag.reveal.in-view {
  transform: translateY(0) scale(1);
}

/* ============================================================ Kinetic hero h2 */
.kin-line { display: inline; }
.kin-word { display: inline-block; white-space: nowrap; }
.kin-ch {
  display: inline-block;
  opacity: 1;
  transform: none;
  animation: kin-in 700ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes kin-in {
  from { opacity: 0; transform: translateY(0.5em) rotate(2.5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ============================================================ Solution card reverse (image right) */
.card-solution--reverse {
  grid-template-areas: "body media";
  grid-template-columns: 1fr 1fr;
}
.card-solution--reverse .card-solution__media { grid-area: media; }
.card-solution--reverse .card-solution__body  { grid-area: body; }

/* ============================================================ Card hover micro-interactions */
.fork-card, .card-solution, .mini-cluster, .home-mag__grid .card-mag {
  transition: transform 420ms cubic-bezier(0.2,0,0,1),
              box-shadow 420ms cubic-bezier(0.2,0,0,1),
              border-color 420ms cubic-bezier(0.2,0,0,1);
}
.fork-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px -28px rgba(14, 14, 14, 0.32);
}
.card-solution:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(14, 14, 14, 0.25);
}
.mini-cluster:hover { transform: translateY(-4px); }
.home-mag__grid .card-mag:hover { transform: translateY(-3px); }

.fork-card__hero,
.card-solution__media,
.mini-cluster__hero,
.card-mag__cover {
  transition: transform 900ms cubic-bezier(0.2,0,0,1), filter 600ms;
}
.fork-card:hover .fork-card__hero,
.card-solution:hover .card-solution__media,
.mini-cluster:hover .mini-cluster__hero,
.card-mag:hover .card-mag__cover { transform: scale(1.045); }

/* ============================================================ Button shimmer + glow */
.btn-primary, .btn.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.btn-primary::before, .btn.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms cubic-bezier(0.2,0,0,1);
  pointer-events: none;
}
.btn-primary:hover::before, .btn.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover, .btn.btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 28px -10px rgba(215, 38, 30, 0.55);
}

/* ============================================================ Red filament section dividers */
.home-fork, .home-manifesto, .home-case, .home-solutions,
.home-clusters, .home-trust, .home-community, .home-mag, .home-stepper {
  position: relative;
}
.home-fork::before, .home-manifesto::before, .home-case::before,
.home-solutions::before, .home-clusters::before, .home-community::before,
.home-mag::before, .home-stepper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--sf-red) 50%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0.55;
}

/* ============================================================ PDP sticky CTA mobile
   Il contenitore non ha piu' un aspetto suo. Prima era un riquadro bianco con
   bordo, ombra e sfocatura attorno a un bottone rosso pieno largo quanto lui:
   due forme sovrapposte per dire una cosa sola, e il bordo si vedeva a un paio
   di pixel dal bottone. Qui resta solo il posizionamento e l'entrata in scena;
   il distacco dal contenuto che scorre sotto lo fa l'ombra, che ora sta sul
   bottone perche' e' lui l'oggetto. */
.pdp-sticky-cta {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 70;
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
  pointer-events: none;
}
.pdp-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pdp-sticky-cta__btn {
  width: 100%;
  justify-content: center;
  box-shadow: 0 14px 34px -12px rgba(14, 14, 14, 0.45);
}
/* Mobile only — show below 860px (consistent with mobile nav drawer breakpoint) */
@media (max-width: 860px) {
  .pdp-sticky-cta { display: block; }
}

/* ============================================================ PDP pricing dots — price chip */
.pdp-pdots__price {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-pdots__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--sf-black);
  letter-spacing: -0.01em;
  line-height: 1;
}
.pdp-pdots__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.pdp-pdots__cap {
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.price-dots__amount {
  margin-left: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--sf-black);
}

/* ============================================================ Grazie page (post-form) */
.grazie { background: var(--bg-page); }
.grazie__hero {
  padding: var(--space-9) var(--container-pad-desktop);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.grazie__hero--horeca { background: var(--sf-cream-100); color: var(--sf-black); }
.grazie__hero--distributore { background: var(--sf-red); color: var(--sf-white); }
.grazie__check {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.grazie__check--horeca {
  background: var(--sf-white);
  color: var(--sf-red);
  box-shadow: 0 4px 16px -4px rgba(215,38,30,0.25);
}
.grazie__check--distributore {
  background: transparent;
  color: var(--sf-white);
  border: 2px solid var(--sf-white);
}
.grazie__h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  max-width: 22ch;
}
.grazie__sub {
  font-size: var(--fs-body-l);
  line-height: 1.5;
  max-width: 56ch;
  color: inherit;
  opacity: 0.86;
  margin: var(--space-3) 0 0;
}
.grazie__hero--horeca .grazie__sub { color: var(--fg-secondary); opacity: 1; }
.grazie__hero--distributore .grazie__sub { color: var(--sf-white); }

.grazie__steps {
  padding: var(--space-8) var(--container-pad-desktop);
  background: var(--bg-page);
}
.grazie__steps-head {
  text-align: center;
  margin-bottom: var(--space-7);
}
.grazie__steps-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.018em;
  margin: var(--space-2) 0 0;
}
.grazie__steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
}
.grazie__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--sf-stone-300);
}
.grazie__step-n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--sf-red);
  letter-spacing: 0.08em;
}
.grazie__step-t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.grazie__step-d {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 36ch;
}

.grazie__cards {
  padding: var(--space-8) var(--container-pad-desktop);
  background: var(--sf-off-white);
}
.grazie__cards-head {
  text-align: center;
  margin-bottom: var(--space-7);
}
.grazie__cards-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.018em;
  margin: var(--space-2) 0 0;
}
.grazie__cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: var(--container-max);
  margin: 0 auto;
}
.grazie__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5);
  background: var(--sf-white);
  border: 1px solid var(--sf-stone-300);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--sf-black);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.grazie__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(14,14,14,0.25);
}
.grazie__card-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-red);
}
.grazie__card-t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  margin: 0;
}
.grazie__card-d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0;
  flex: 1;
}
.grazie__closing {
  padding: var(--space-8) var(--container-pad-desktop);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.grazie__closing-t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  margin: 0;
}
@media (max-width: 720px) {
  .grazie__steps-grid,
  .grazie__cards-grid { grid-template-columns: 1fr; }
  .grazie__hero,
  .grazie__steps,
  .grazie__cards,
  /* __closing era rimasta fuori e seguiva il clamp: sulla stessa pagina, a
     700px, 35px contro i 20 delle sorelle (misurato l'08/09) */
  .grazie__closing { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }
}

/* ============================================================ Error pages (404 / 500)
   templates/404.liquid + sections/error-500.liquid usano una palette .site-err__*
   non presente in system.css. Layout editoriale: codice grande trasparente dietro h1,
   variante --red per 500. */
.site-err {
  padding: clamp(80px, 14vh, 180px) var(--container-pad-desktop) clamp(80px, 12vh, 140px);
  background: var(--sf-off-white);
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.site-err__inner {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: left;
}
.site-err__big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(140px, 28vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--sf-black);
  opacity: 0.07;
  position: absolute;
  top: -0.15em;
  left: -0.05em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.site-err__big--red {
  color: var(--sf-red);
  opacity: 0.12;
}
.site-err__overline {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sf-red);
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
.site-err__h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--sf-black);
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
  max-width: 22ch;
}
.site-err__sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--sf-stone-600);
  max-width: 48ch;
  margin: 0 0 32px;
  position: relative;
  z-index: 1;
}
.site-err__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.site-err__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--sf-white);
  color: var(--sf-black);
  font: 500 13px/1 var(--font-body);
  text-decoration: none;
  transition: all 0.18s ease;
}
.site-err__chip:hover {
  border-color: var(--sf-black);
  transform: translateY(-1px);
}
.site-err__chip--primary {
  background: var(--sf-red);
  border-color: var(--sf-red);
  color: var(--sf-white);
}
.site-err__chip--primary:hover {
  background: var(--sf-red-hover);
  border-color: var(--sf-red-hover);
}
.site-err__chip svg {
  width: 14px;
  height: 14px;
}
.site-err__path {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--sf-stone-600);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.site-err__path code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: var(--sf-white);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}
@media (max-width: 720px) {
  .site-err { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }
  .site-err__big { font-size: clamp(120px, 36vw, 200px); }
  .site-err__h1 { font-size: clamp(26px, 7vw, 36px); }
  .site-err__sub { font-size: 15px; }
}

/* ============================================================ Reduced motion opt-out */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================ Home · Agenti — Pillar 3
   "Entriamo nella tua cucina". 3 schede agente con foto + nome + zona + WhatsApp.
   Out-of-the-box: hover tilt 3D subtle (max 3°) + reveal CTA WhatsApp.
*/
.home-agenti {
  padding: var(--space-9) var(--container-pad-desktop);
  background: var(--bg-page);
}
.home-agenti__head {
  max-width: 760px;
  margin: 0 auto var(--space-8);
  text-align: center;
}
.home-agenti__head .eyebrow {
  color: var(--sf-red);
  margin-bottom: 12px;
}
.home-agenti__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 16px;
  text-wrap: balance;
}
.home-agenti__head .sub {
  color: var(--sf-stone-600);
  font-size: 17px;
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto;
}
.home-agenti__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1200px;
}
.agente-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sf-white);
  border: 1px solid var(--sf-stone-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 360ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 360ms cubic-bezier(0.2, 0, 0, 1),
              border-color 360ms cubic-bezier(0.2, 0, 0, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.agente-card:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 28px 50px -24px rgba(14, 14, 14, 0.28),
              0 12px 24px -12px rgba(14, 14, 14, 0.18);
  border-color: var(--sf-black);
}
.agente-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sf-off-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agente-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0, 0, 1);
}
.agente-card:hover .agente-card__media img {
  transform: scale(1.05);
}
.agente-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--sf-stone-400);
}
.agente-card__placeholder-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.agente-card__body {
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agente-card__zone {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-red);
  margin-bottom: 4px;
}
.agente-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--sf-black);
  margin: 0;
}
.agente-card__role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--sf-stone-600);
  margin: 0 0 12px;
}
.agente-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sf-stone-800);
  margin: 4px 0 0;
}
.agente-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  background: var(--sf-off-white);
  color: var(--sf-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border-top: 1px solid var(--sf-stone-300);
  transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard);
}
.agente-card__cta svg { color: #25D366; /* verde WhatsApp: colore del servizio, volutamente fuori palette */ flex-shrink: 0; }
.agente-card__cta-arrow {
  font-size: 16px;
  margin-left: auto;
  transition: transform 220ms var(--ease-standard);
}
.agente-card:hover .agente-card__cta {
  background: var(--sf-black);
  color: var(--sf-white);
}
.agente-card:hover .agente-card__cta svg { color: #25D366; }
.agente-card:hover .agente-card__cta-arrow {
  transform: translateX(4px);
}
.home-agenti__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: var(--space-7);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--sf-stone-600);
}

@media (max-width: 960px) {
  .home-agenti { padding: var(--space-7) var(--container-pad-mobile); }
  .home-agenti__grid { gap: 16px; perspective: none; }
  .agente-card:hover {
    /* Disable 3D tilt on touch devices for performance + UX */
    transform: translateY(-3px);
  }
  .agente-card__body { padding: 18px 18px 12px; }
  .agente-card__name { font-size: 20px; }
}
@media (pointer: coarse) {
  .agente-card:hover {
    transform: none;
    box-shadow: 0 8px 18px -10px rgba(14, 14, 14, 0.18);
  }
}

/* ============================================================ Home · Solutions — narrate come personaggi
   Aggiunta scheda meta: indice 01/06 + origine produttore + anno fondazione. */
.card-solution__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--sf-stone-300);
}
.card-solution__index {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--sf-red);
  letter-spacing: 0.04em;
}
.card-solution__meta-item {
  position: relative;
  padding-left: 12px;
}
.card-solution__meta-item::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--sf-stone-400);
}
.card-solution__meta-item:first-child:not(.card-solution__index)::before { display: none; }

/* ============================================================ Home · Cluster — hover reveal "top in catalogo"
   On hover/focus della card cluster, slide-up un overlay dark con i 3 prodotti top di quel cluster. */
.mini-cluster {
  position: relative;
  overflow: hidden;
}
.mini-cluster__hero {
  position: relative;
  overflow: hidden;
}
.mini-cluster__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg,
    rgba(14, 14, 14, 0) 0%,
    rgba(14, 14, 14, 0.82) 30%,
    rgba(14, 14, 14, 0.94) 100%);
  color: var(--sf-white);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.2, 0, 0, 1),
              opacity 220ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}
.mini-cluster:hover .mini-cluster__overlay,
.mini-cluster:focus-visible .mini-cluster__overlay {
  transform: translateY(0);
  opacity: 1;
}
.mini-cluster__overlay-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-red);
  margin-bottom: 6px;
}
.mini-cluster__examples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-cluster__examples li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.94);
  position: relative;
  padding-left: 14px;
}
.mini-cluster__examples li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--sf-red);
}
@media (pointer: coarse) {
  /* Su mobile/touch: mostra sempre l'overlay in forma compatta */
  .mini-cluster__overlay {
    transform: translateY(0);
    opacity: 0.96;
    padding: 10px 14px 12px;
  }
  .mini-cluster__examples li { font-size: 12px; }
}

/* ============================================================ Home · Recensioni Google
   Strip con rating overall + 3 review card + CTA Google Maps.
   Out-of-the-box: stelle dorate, avatar iniziale, hover lift sulle card, count-up sul rating. */
.home-reviews {
  padding: var(--space-8) var(--container-pad-desktop);
  background: var(--bg-page);
}
.home-reviews__head {
  max-width: 800px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.home-reviews__rating {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.home-reviews__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--sf-warning);
}
.home-reviews__rating-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--sf-stone-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-reviews__rating-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--sf-black);
}
.home-reviews__rating-sep { opacity: 0.5; }
.home-reviews__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 8px 0 0;
  color: var(--sf-black);
  text-wrap: balance;
}
.home-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.review-card {
  background: var(--sf-white);
  border: 1px solid var(--sf-stone-300);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 280ms cubic-bezier(0.2, 0, 0, 1),
              border-color 280ms cubic-bezier(0.2, 0, 0, 1);
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(14, 14, 14, 0.18);
  border-color: var(--sf-black);
}
.review-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--sf-warning);
}
.review-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sf-black);
  margin: 0;
  flex: 1;
}
.review-card__attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--sf-stone-300);
  padding-top: 14px;
  margin: 0;
}
.review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sf-red);
  color: var(--sf-white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
.review-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--sf-black);
}
.review-card__locale {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--sf-stone-600);
}
.home-reviews__foot {
  text-align: center;
  margin-top: var(--space-7);
}
.home-reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--sf-white);
  border: 1px solid var(--sf-stone-300);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--sf-black);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.home-reviews__cta:hover {
  background: var(--sf-black);
  color: var(--sf-white);
  border-color: var(--sf-black);
}
.home-reviews__cta svg { color: var(--sf-red); }
.home-reviews__cta:hover svg { color: var(--sf-warning); }

@media (max-width: 960px) {
  .home-reviews__grid { grid-template-columns: 1fr; gap: 14px; }
  .home-reviews { padding: var(--space-7) var(--container-pad-mobile); }
}
@media (max-width: 768px) {
  .review-card { padding: 20px 18px; }
}

/* ============================================================ Home · Stepper — line drawing animation
   La linea che connette i 4 step si "disegna" quando la sezione entra in viewport. */
.home-stepper__steps {
  position: relative;
}
.home-stepper__steps::before {
  /* Override system.css base */
  background: linear-gradient(to right,
    var(--sf-red) 0%,
    var(--sf-red) 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  height: 2px !important;
  top: 28px;
  transition: background-size 1400ms cubic-bezier(0.2, 0, 0, 1) 200ms;
}
.home-stepper.in-view .home-stepper__steps::before,
.home-stepper .home-stepper__steps.is-drawn::before {
  background-size: 100% 100%;
}
/* Number badges pulse subtle when entering view.
   z-index + background-clip + box-shadow ring estendono l'area opaca del cerchio
   così la linea rossa di collegamento NON appare a tagliare il numero. */
.process-step__n {
  position: relative;
  z-index: 3;
  background: var(--bg-page) !important;
  background-clip: padding-box;
  box-shadow: 0 0 0 4px var(--bg-page);
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.home-stepper.in-view .process-step__n {
  animation: stepper-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.home-stepper.in-view .process-step:nth-child(1) .process-step__n { animation-delay: 320ms; }
.home-stepper.in-view .process-step:nth-child(2) .process-step__n { animation-delay: 560ms; }
.home-stepper.in-view .process-step:nth-child(3) .process-step__n { animation-delay: 800ms; }
.home-stepper.in-view .process-step:nth-child(4) .process-step__n { animation-delay: 1040ms; }
@keyframes stepper-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home-stepper__steps::before { background-size: 100% 100%; transition: none; }
  .home-stepper.in-view .process-step__n { animation: none; }
}

/* ============================================================ Home · CTA banner — glow + arrow expand
   Subtle red glow dietro CTA primaria + expand arrow on hover. */
.pdp-banner .btn-primary {
  position: relative;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1), background var(--dur-fast) var(--ease-standard);
}
.pdp-banner .btn-primary::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(closest-side, rgba(215, 38, 30, 0.45) 0%, rgba(215, 38, 30, 0) 70%);
  filter: blur(12px);
  z-index: -1;
  opacity: 0;
  transition: opacity 420ms var(--ease-standard);
  pointer-events: none;
}
.pdp-banner .btn-primary:hover {
  transform: translateY(-2px);
}
.pdp-banner .btn-primary:hover::before {
  opacity: 1;
}

/* ============================================================ Trust strip mobile — 2×2 grid invece di 1×4 flex
   I 4 nodi non entrano in 375px viewport con padding generoso. Su mobile diventano 2×2. */
@media (max-width: 768px) {
  .home-trust .trust {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .home-trust .trust__node {
    padding: 16px 18px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .home-trust.in-view .trust__node,
  .home-trust .trust__node {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .home-trust .trust__node:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .home-trust .trust__node:nth-child(1),
  .home-trust .trust__node:nth-child(2) {
    border-top: none;
  }
  .trust__num { font-size: 22px !important; }
  .trust__lab { font-size: 10px !important; line-height: 1.3; }
}

/* ============================================================ MOBILE comprehensive fixes (≤ 768px)
   Audit visivo round 1 — risolve issues critici di layout su 375px viewport.
*/
@media (max-width: 768px) {
  /* ─── Hero subtitle smaller, padding ridotto ─── */
  .home-hero .hero-split { min-height: auto; }
  .home-hero .hero-split__l { padding: 36px 20px 28px !important; }
  .home-hero .hero-split__r { aspect-ratio: 16/10; min-height: 0; }
  .home-hero h1, .home-hero h2 { font-size: clamp(34px, 7.5vw, 42px) !important; line-height: 1.06 !important; }
  .home-hero .hero-split__l .sub { font-size: 15px; max-width: none; }
  .home-hero .row-cta { flex-wrap: wrap; gap: 10px; }
  .home-hero .row-cta .btn, .home-hero .row-cta .btn-primary { width: 100%; justify-content: center; }
  /* Fix double-arrow su CTA hero primary */
  .home-hero .row-cta .btn .icon-arrow + .icon-arrow,
  .home-hero .row-cta .btn span + svg.icon-arrow + svg.icon-arrow { display: none; }

  /* ─── Manifesto: headline più piccola, body più compact ─── */
  .home-manifesto { padding: 56px 20px !important; }
  .home-manifesto h2 {
    font-size: clamp(26px, 6.4vw, 34px) !important;
    line-height: 1.1 !important;
    max-width: none;
  }
  .home-manifesto p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    max-width: 540px;
    margin: 16px auto 0 !important;
  }
  .home-manifesto__wrap { padding: 0 !important; max-width: none !important; gap: 12px !important; }

  /* ─── Fork: heading più piccolo ─── */
  .fork-card__h3 { font-size: 22px !important; line-height: 1.18 !important; }

  /* ─── Agenti card: placeholder image più compatto (4:3 invece di 4:5) ─── */
  .agente-card__media { aspect-ratio: 4 / 3 !important; }
  .home-agenti__grid { gap: 16px !important; }

  /* ─── 🔴 Case St.Ermins: stack 2-col verticalmente ─── */
  .home-case { padding: 0 !important; }
  .home-case .hero-data {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .home-case .hero-data__num {
    padding: 40px 20px 24px !important;
    gap: 12px !important;
  }
  .home-case .hero-data__num > div:first-child {
    font-size: clamp(48px, 12vw, 72px) !important;
    line-height: 1 !important;
    word-break: break-word;
  }
  .home-case .hero-data__num .caption {
    font-size: 12px;
  }
  .home-case .hero-data__side {
    padding: 0 20px 40px !important;
    gap: 14px !important;
  }
  .home-case .hero-data__side .quote {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .home-case .row-cta { flex-wrap: wrap; gap: 10px; width: 100%; }
  .home-case .row-cta .btn, .home-case .row-cta .btn-primary { width: 100%; justify-content: center; }

  /* ─── 🔴 Solutions card: stack media + body verticalmente con aspect-ratio ─── */
  .card-solution {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .card-solution__media {
    aspect-ratio: 16 / 10 !important;
    min-height: 0;
    grid-row: 1;
  }
  .card-solution--reverse {
    grid-template-areas: none; /* fix: le aree "body media" a 2 colonne collassavano la foto in colonna implicita */
    grid-template-columns: 1fr;
  }
  .card-solution--reverse .card-solution__media {
    grid-area: auto;
    grid-row: 1; /* anche reverse: image sempre sopra su mobile */
  }
  .card-solution--reverse .card-solution__body { grid-area: auto; }
  .card-solution__body {
    grid-row: 2 !important;
    padding: 24px 20px !important;
    gap: 14px !important;
  }
  .card-solution__claim {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  .card-solution__sub {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .card-solution__meta {
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 10px;
  }
  .card-solution__meta-item { padding-left: 0; }
  .card-solution__meta-item::before { display: none; }
  /* Solutions head padding mobile */
  .home-solutions { padding: 60px 16px !important; }
  .home-solutions__head { margin-bottom: 28px !important; }
  .home-solutions__head h2 { font-size: clamp(26px, 6vw, 36px) !important; }

  /* ─── Stepper: vertical line connecting steps ─── */
  .home-stepper { padding: 56px 20px !important; }
  .home-stepper__head { margin-bottom: 28px !important; }
  .home-stepper__head h2 {
    font-size: clamp(24px, 5.6vw, 32px) !important;
    line-height: 1.12 !important;
  }
  .home-stepper__steps {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    position: relative;
  }
  /* Disable horizontal line, add vertical (override system.css line 1907 display: none) */
  .home-stepper__steps::before {
    display: block !important;
    background: linear-gradient(to bottom, var(--sf-red) 0%, var(--sf-red) 100%) !important;
    background-size: 100% 0% !important;
    background-repeat: no-repeat !important;
    transition: background-size 1400ms cubic-bezier(0.2, 0, 0, 1) 200ms !important;
    width: 2px !important;
    height: calc(100% - 90px) !important;
    top: 56px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  .home-stepper.in-view .home-stepper__steps::before {
    background-size: 100% 100% !important;
  }
  /* Each step has solid bg → la linea verticale è coperta dietro il testo descrizione,
     visibile solo nei gap tra step (clean connector look) */
  .process-step {
    padding: 0 20px !important;
    background: var(--bg-page);
    position: relative;
    z-index: 2;
    border-radius: var(--radius-md);
  }
  /* Extra ring sul numero per mascherare il bordo della linea */
  .process-step__n {
    box-shadow: 0 0 0 8px var(--bg-page) !important;
    z-index: 3 !important;
  }

  /* ─── Clusters mobile: padding compact + cards più dense ─── */
  .home-clusters {
    padding: 48px 16px !important;
  }
  .home-clusters__head {
    margin-bottom: 24px !important;
  }
  .home-clusters__head h2 {
    font-size: clamp(24px, 5.6vw, 32px) !important;
  }
  .home-clusters__head .sub {
    font-size: 14px !important;
  }
  .minicluster-row {
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mini-cluster {
    min-height: 0 !important;
  }
  .mini-cluster__hero {
    aspect-ratio: 4 / 3 !important;
  }
  .mini-cluster__body {
    padding: 12px 12px 14px !important;
    gap: 6px !important;
  }
  .mini-cluster__name {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .mini-cluster__benefit {
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mini-cluster__arrow {
    font-size: 11px !important;
    margin-top: 8px !important;
  }
  /* Cluster overlay (hover examples) — smaller on mobile */
  .mini-cluster__overlay {
    padding: 8px 10px 10px !important;
  }
  .mini-cluster__overlay-label {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  .mini-cluster__examples li {
    font-size: 11px !important;
    padding-left: 10px;
    line-height: 1.3 !important;
  }

  /* ─── Community: stack CTA + link verticalmente ─── */
  .community-banner__txt .row-cta {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }
  .community-banner__txt .row-cta .btn,
  .community-banner__txt .row-cta .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .community-banner__txt .row-cta .btn-ghost,
  .community-banner__txt .row-cta a:not(.btn-primary) {
    text-align: center;
  }

  /* ─── Reviews mobile padding ─── */
  .home-reviews__title { font-size: clamp(22px, 5vw, 28px) !important; }

  /* ─── CTA banner mobile padding ─── */
  .pdp-banner { padding: 56px 20px !important; }
  .pdp-banner h2 { font-size: clamp(28px, 6vw, 36px) !important; }
  .pdp-banner .row-cta { flex-wrap: wrap; gap: 10px; }
  .pdp-banner .row-cta .btn, .pdp-banner .row-cta .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* ─── Solutions stack reduces height — fix gap between cards ─── */
  .home-solutions__stack { gap: 24px !important; }
}

@media (max-width: 380px) {
  /* Very narrow screens: tighter typography */
  .home-hero h1, .home-hero h2 { font-size: 30px !important; }
  .home-case .hero-data__num > div:first-child { font-size: 44px !important; }
  .card-solution__claim { font-size: 22px !important; }
}

/* ============================================================ Home · Hero Showcase
   "Tavola che ruota" slideshow of esclusive top.
   Camera fissa, piatti scorrono dall'alto verso il basso (desktop) o destra→sinistra (mobile).
   Senior-level motion: slide+rotate combined, with spring-like easing, deferred ingredient animation.
   Transparent PNG food images with radial glow background.
*/
.hero-showcase {
  --hero-bg: var(--bg-page, #f6f2ec);
  --hero-stage-size: clamp(380px, 44vw, 600px);
  --hero-main-size: clamp(300px, 36vw, 480px);
  --hero-satellite-size: clamp(78px, 8.5vw, 116px);
  --hero-transition: 1100ms;
  --hero-ease: cubic-bezier(0.83, 0, 0.17, 1);  /* expo-out: starts slow, accelerates, decelerates smoothly */
  --hero-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* slight bounce on settle */
  position: relative;
  background: var(--hero-bg);
  padding: 32px var(--sf-edge, clamp(20px, 5vw, 88px)) 60px;
  overflow: hidden;
}

/* ─── Top bar ─── */
.hero-showcase__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-showcase__topleft {
  display: flex;
  align-items: center;
}
.hero-showcase__topright {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--sf-stone-600);
}
.hero-showcase__counter {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sf-black);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}

/* ─── Grid ─── */
.hero-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--container-max, 1560px);
  margin: 0 auto;
  min-height: 540px;
}

/* ─── Text column ─── */
.hero-showcase__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.hero-showcase__eyebrow,
.hero-showcase__headline,
.hero-showcase__quote {
  position: relative;
}
.hero-slot-item {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  /* Faster sync: matches slide's exit timing; new text enters as new slide arrives */
  transition: opacity 400ms var(--hero-ease), transform 500ms var(--hero-ease);
  pointer-events: none;
}
.hero-slot-item.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Delay enter to land mid-slide animation */
  transition: opacity 480ms var(--hero-ease) 300ms, transform 600ms var(--hero-ease-spring) 300ms;
}
.hero-showcase__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-red-ink);
  min-height: 16px;
}
.hero-showcase__headline {
  min-height: 120px;
}
.hero-showcase__headline .hero-slot-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--sf-black);
  text-wrap: balance;
  margin: 0;
}
.hero-showcase__quote {
  min-height: 50px;
}
.hero-showcase__quote .hero-slot-item {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--sf-stone-600);
  margin: 0;
  max-width: 520px;
}
.hero-showcase__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
  max-width: 420px;
}
.hero-showcase__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 26px;
  background: var(--sf-red);
  color: var(--sf-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: var(--radius-md, 6px);
  border: 1.5px solid var(--sf-red);
  transition: transform var(--dur-base, 220ms) var(--ease-standard, ease),
              box-shadow var(--dur-base, 220ms) var(--ease-standard, ease);
}
.hero-showcase__cta-primary svg {
  width: 16px;
  height: 16px;
  transition: transform 280ms var(--ease-standard, ease);
}
.hero-showcase__cta-primary:hover svg {
  transform: translateX(4px);
}
.hero-showcase__cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 26px;
  background: transparent;
  color: var(--sf-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: var(--radius-md, 6px);
  border: 1.5px solid var(--sf-black);
  transition: background var(--dur-base, 220ms) var(--ease-standard, ease),
              color var(--dur-base, 220ms) var(--ease-standard, ease),
              transform var(--dur-base, 220ms) var(--ease-standard, ease);
}
.hero-showcase__cta-secondary:hover {
  background: var(--sf-black);
  color: var(--sf-white);
  transform: translateY(-1.5px);
}
/* Dots — now in topleft of section header */
.hero-showcase__dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 24px hit area (WCAG 2.5.8) with the visual 8px dot drawn via ::after */
.hero-dot {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.hero-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sf-stone-400);
  transition: background 220ms var(--hero-ease), transform 220ms var(--hero-ease), width 320ms var(--hero-ease), border-radius 220ms var(--hero-ease);
}
.hero-dot.is-active::after {
  background: var(--sf-red);
  width: 28px;
  border-radius: 4px;
}
.hero-dot:hover::after { transform: scale(1.2); }
.hero-dot:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 2px; border-radius: 6px; }

/* ─── Visual stage (right column) ─── */
.hero-showcase__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: var(--hero-stage-size);
  margin: 0 auto;
  --parallax-x: 0px;
  --parallax-y: 0px;
}

/* Radial glow background per "spotlight on food" */
.hero-showcase__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center,
    rgba(215, 38, 30, 0.06) 0%,
    rgba(215, 38, 30, 0.02) 30%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: hero-glow-pulse 6s ease-in-out infinite;
}
@keyframes hero-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.85; }
}

/* Main stage: "ruota orbitale" — i piatti percorrono un cerchio 3D reale.
   Perspective fa sì che il piatto al fronte appaia più grande di quello al back. */
.hero-showcase__main {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--hero-main-size);
  height: var(--hero-main-size);
  transform: translate(-50%, -50%) translate(var(--parallax-x), var(--parallax-y));
  transition: transform 380ms var(--hero-ease);
  z-index: 2;
  perspective: 1400px;
  perspective-origin: center center;
  transform-style: preserve-3d;
}

/* V6 S-CURVE ORBITAL PATH.
   Le slide percorrono un arco curvo: dal top-right (back) → center (active, front) → bottom-right (back).
   Path orbital è la proiezione 2D di un cerchio 3D che gira sull'asse verticale a destra del centro.
   JS calcola separatamente translateXRatio = (1 - cos), translateYRatio = sin, depthRatio = cos.
   Risultato: il piatto attivo è grande al centro, i due satelliti sono PICCOLI in alto-destra
   e basso-destra (non sopra/sotto ma in arco). Movimento fluido tra le tre posizioni. */
.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  /* Orbit radii: how far the orbit reaches on each axis */
  --orbit-x-radius: 32%;       /* desktop: X radius (orizzontale, satelliti spostati a destra) */
  --orbit-y-radius: 38%;       /* desktop: Y radius (verticale, separa top-right e bottom-right) */
  --orbit-depth-radius: 220px; /* depth (Z) radius — feels like real depth */
  /* Default values, set by JS each frame */
  --orbit-translate-x-ratio: 0;
  --orbit-translate-y-ratio: 0;
  --orbit-depth-ratio: 1;
  --orbit-scale: 1;
  --orbit-opacity: 1;
  --orbit-z-index: 100;
  /* Build the 3D transform:
     translateX: orbit-translate-x-ratio * x-radius  (positive → push right; 0 at active, +1.5 at satellites)
     translateY: orbit-translate-y-ratio * y-radius  (positive → push down; -1 top, +1 bottom)
     translateZ: orbit-depth-ratio * depth-radius   (+1 front to user, -1 back)
     scale: orbit-scale (combined with perspective foreshortening) */
  transform:
    translate3d(
      calc(var(--orbit-translate-x-ratio) * var(--orbit-x-radius)),
      calc(var(--orbit-translate-y-ratio) * var(--orbit-y-radius)),
      calc(var(--orbit-depth-ratio) * var(--orbit-depth-radius))
    )
    scale(var(--orbit-scale));
  opacity: var(--orbit-opacity);
  z-index: var(--orbit-z-index);
  cursor: pointer;
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.hero-slide__img,
.hero-satellite__img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* PNG img dentro slide */
.hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 38px rgba(14, 14, 14, 0.22)) drop-shadow(0 8px 12px rgba(14, 14, 14, 0.15));
}

/* Idle float — subtle vertical bob */
@keyframes hero-float {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  50% { transform: translateY(-8px) scale(1) rotate(0.5deg); }
}

/* Satellite badges — v4 architecture: i satellite NON sono più necessari come elementi separati,
   le slide stesse servono come orbital satellites (visibili in trasparenza off-center).
   Hide separate satellite elements. */
.hero-showcase__satellites {
  display: none !important;
}
.hero-showcase__satellites--legacy {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero-satellite {
  position: absolute;
  width: var(--hero-satellite-size);
  height: var(--hero-satellite-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 700ms var(--hero-ease), opacity 500ms var(--hero-ease);
  overflow: visible;
}
.hero-satellite__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(14, 14, 14, 0.2));
  transition: transform 360ms var(--hero-ease);
}
.hero-satellite__label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
  white-space: nowrap;
  opacity: 0.75;
  background: rgba(246, 242, 236, 0.7);
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-satellite:hover .hero-satellite__img {
  transform: scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 16px 22px rgba(215, 38, 30, 0.35));
}
.hero-satellite:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 4px;
  border-radius: 50%;
}
/* Active satellite is hidden (it's the main slide). Non-active satellites stand on TOP and BOTTOM of main */
.hero-satellite.is-active {
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
/* Position by orbit attribute relative to main circle.
   Orbit 1 = above main (next slide preview)
   Orbit 2 = below main (just-exited preview)
   Orbit 0 = active (hidden, was at center) */
.hero-satellite[data-orbit="1"] {
  top: -6%;
  right: 4%;
  transform: scale(0.85);
  animation: hero-satellite-bob 4s ease-in-out infinite;
}
.hero-satellite[data-orbit="2"] {
  bottom: -2%;
  left: 4%;
  transform: scale(0.75);
  animation: hero-satellite-bob 4.5s ease-in-out infinite 1.2s;
}
.hero-satellite[data-orbit="0"] {
  /* Hidden when active */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
}
@keyframes hero-satellite-bob {
  0%, 100% { transform: scale(var(--sat-scale, 0.85)) translateY(0); }
  50% { transform: scale(var(--sat-scale, 0.85)) translateY(-6px); }
}
.hero-satellite[data-orbit="1"] { --sat-scale: 0.85; }
.hero-satellite[data-orbit="2"] { --sat-scale: 0.75; }

/* Floating ingredients */
.hero-showcase__ingredients {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-ingredient-set {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms var(--hero-ease);
}
.hero-ingredient-set.is-active {
  opacity: 1;
}
.hero-ingredient {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: clamp(36px, 5vw, 56px);
  height: clamp(36px, 5vw, 56px);
  transform: translate(-50%, -50%) translate(var(--parallax-x, 0), var(--parallax-y, 0));
  animation: hero-bob 4.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 6px 12px rgba(14, 14, 14, 0.18));
  opacity: 0;
  transition: opacity 320ms var(--hero-ease);
}
.hero-ingredient-set.is-active .hero-ingredient {
  opacity: 1;
  transition-delay: var(--delay, 0s);
}
@keyframes hero-bob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0); }
  50% { transform: translate(-50%, -50%) translateY(-8px) rotate(3deg); }
}

/* ─── Reduced motion: simplify ─── */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slot-item {
    transition: opacity 200ms ease !important;
    transform: none !important;
  }
  .hero-ingredient { animation: none; }
}

/* ─── Mobile ≤ 960px ─── Orbital wheel orizzontale + polish typography ─── */
@media (max-width: 960px) {
  .hero-showcase {
    padding: 20px 18px 44px;
  }
  .hero-showcase__top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
  }
  .hero-showcase__topleft,
  .hero-showcase__topright {
    width: auto;
  }
  .hero-showcase__counter {
    font-size: 11px;
    padding: 4px 10px;
  }
  .hero-showcase__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
  }
  .hero-showcase__stage {
    --hero-stage-size: min(360px, 88vw);
    --hero-main-size: min(260px, 62vw);
    --hero-satellite-size: 78px;
    order: -1;
    margin: 0 auto;
  }
  .hero-showcase__text {
    text-align: center;
    align-items: center;
    gap: 10px;
  }
  .hero-showcase__eyebrow {
    min-height: 14px;
    margin-bottom: 0;
  }
  .hero-showcase__headline {
    min-height: 78px;
    margin: 0;
  }
  .hero-showcase__headline .hero-slot-item {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.12;
  }
  .hero-showcase__quote {
    min-height: 44px;
    margin: 0;
  }
  .hero-showcase__quote .hero-slot-item {
    font-size: 14px;
    line-height: 1.45;
    max-width: 360px;
    margin: 0 auto;
  }
  .hero-showcase__ctas {
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 8px;
    max-width: 100%;
  }
  .hero-showcase__ctas > * {
    width: 100%;
    justify-content: center;
  }
  .hero-showcase__cta-primary {
    padding: 17px 24px;
    font-size: 15px;
  }
  .hero-showcase__cta-secondary {
    padding: 15px 24px;
    font-size: 14px;
  }
  .hero-showcase__dots {
    gap: 8px;
  }

  /* ── Mobile: traiettoria LINEARE orizzontale destra→sinistra ──
     Le slide entrano da destra, attraversano il centro, escono a sinistra.
     Nessuna componente verticale, nessuna curva. translateX = sin(v) direttamente.
     sin(0)=0 → active al centro. sin(+120°)=+0.87 → satellite destra. sin(-120°)=-0.87 → satellite sinistra. */
  .hero-slide {
    --orbit-x-radius: 58%;
    --orbit-depth-radius: 100px;
    transform:
      translate3d(
        calc(var(--orbit-sin) * var(--orbit-x-radius)),
        0,
        calc(var(--orbit-cos) * var(--orbit-depth-radius))
      )
      scale(var(--orbit-scale));
  }

  /* Satellites mobile: posizionati sui lati (sx-sotto, dx-sopra) */
  .hero-satellite[data-orbit="1"] {
    top: auto;
    bottom: 8%;
    right: -2%;
    transform: scale(0.85);
  }
  .hero-satellite[data-orbit="2"] {
    bottom: 8%;
    left: -2%;
    transform: scale(0.75);
  }
  .hero-satellite__label { font-size: 9px; bottom: -16px; }

  /* Simplify floating ingredients: only first 2 visible on mobile */
  .hero-ingredient:nth-child(n+3) { display: none; }

}

@media (max-width: 480px) {
  .hero-showcase__stage {
    --hero-main-size: min(260px, 76vw);
    --hero-satellite-size: 66px;
  }
}


/* ============================================================
   TRUST STRIP v2.1 — Editorial pure (Monocle/Kinfolk direction).
   No icons — numbers are protagonists, display typography huge.
   Frontend-design discipline applied:
   • Dark wrapper with vignette radial + subtle grain (no flat #000)
   • Numbers display 60-80px, label uppercase 10px tracked
   • Hover: red filament underline draw + label color shift
   • Asymmetric divider: red filament 1px (subtle, no vertical bar)
============================================================ */

.home-trust {
  position: relative;
  /* Fondo scuro editoriale con vignettatura e grana.
     ATTENZIONE: il colore pieno in fondo alla pila NON e' decorativo. Prima
     qui la vignettatura era un gradiente opaco #1a1614→#0E0E0E che faceva
     anche da fondo. Sostituendolo con una velatura trasparente, per unificare
     i tre neri, la sezione e' rimasta senza fondo e i numeri sono diventati
     chiari su chiaro. La velatura sta sopra, il nero pieno sotto. */
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 72%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--sf-black);
  background-blend-mode: overlay, normal;
  color: var(--sf-off-white);
  padding: 56px clamp(20px, 4vw, 64px);
  overflow: hidden;
}
/* Subtle red glow line at top + bottom (editorial divider) */
.home-trust::before,
.home-trust::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(215, 38, 30, 0.4) 50%, transparent 100%);
  pointer-events: none;
}
.home-trust::before { top: 0; }
.home-trust::after { bottom: 0; }

.trust-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--container-max, 1560px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.trust-v2__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 0;
  position: relative;
  cursor: default;
  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.trust-v2__node:hover {
  transform: translateY(-2px);
}

/* MEGA number — protagonist */
.trust-v2__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 5.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--sf-off-white);
  white-space: nowrap;
  position: relative;
  transition: color 280ms ease;
  display: inline-block;
}
/* Red filament underline that DRAWS on hover */
.trust-v2__num::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--sf-red, #D7261E);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.2, 0, 0, 1);
}
.trust-v2__node:hover .trust-v2__num::after {
  transform: scaleX(1);
}
.trust-v2__node:hover .trust-v2__num {
  color: #FFFFFF;
}

.trust-v2__lab {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 247, 242, 0.55);
  line-height: 1.35;
  transition: color 280ms ease;
  max-width: 22ch;
}
.trust-v2__node:hover .trust-v2__lab {
  color: rgba(251, 247, 242, 0.9);
}

/* Divider: red filament fading top/bottom (asymmetric, not vertical bar) */
.trust-v2__divider {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent 0%, rgba(215, 38, 30, 0.4) 50%, transparent 100%);
  flex-shrink: 0;
}

/* Scroll reveal: nodes cascade in */
.home-trust .trust-v2__node {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.2, 0, 0, 1),
              transform 700ms cubic-bezier(0.2, 0, 0, 1);
}
.home-trust.in-view .trust-v2__node {
  opacity: 1;
  transform: translateY(0);
}
.home-trust.in-view .trust-v2__node:nth-child(1) { transition-delay: 0ms; }
.home-trust.in-view .trust-v2__node:nth-child(3) { transition-delay: 140ms; }
.home-trust.in-view .trust-v2__node:nth-child(5) { transition-delay: 280ms; }
.home-trust.in-view .trust-v2__node:nth-child(7) { transition-delay: 420ms; }
.home-trust .trust-v2__divider {
  opacity: 0;
  transition: opacity 700ms ease 520ms;
}
.home-trust.in-view .trust-v2__divider {
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .trust-v2__node,
  .trust-v2__num::after,
  .trust-v2__divider { transition: opacity 200ms ease !important; transform: none !important; }
}

/* Mobile: 2×2 grid stacked */
@media (max-width: 960px) {
  .home-trust { padding: 40px 18px; }
  .trust-v2 {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .trust-v2__divider { display: none; }
  .trust-v2__num { font-size: clamp(38px, 11vw, 48px); }
  .trust-v2__lab { font-size: 10px; max-width: 16ch; }
}

/* Very small mobile */
@media (max-width: 480px) {
  .trust-v2__num { font-size: 36px; }
}

/* ============================================================
   REVIEWS v2 — Testimonial editorial + stelle gradient gold + Google G.
============================================================ */

.home-reviews-v2 {
  background: var(--sf-off-white, #F6F2EC);
  padding: var(--space-9) var(--space-7);  /* 96px 48px — allineato a sp-section canonico */
}

.reviews-v2__head {
  max-width: var(--container-max, 1560px);
  margin: 0 auto clamp(40px, 5vw, 56px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.reviews-v2__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.reviews-v2__google { flex-shrink: 0; }
.reviews-v2__brand-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
}
.reviews-v2__rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.reviews-v2__stars { display: inline-flex; gap: 2px; }
.reviews-v2__rating-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--sf-black);
}
.reviews-v2__rating-sep { color: var(--sf-stone-400); }
.reviews-v2__rating-count {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--sf-stone-600);
}
.reviews-v2__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--sf-black);
  margin: 0;
  max-width: 28ch;
  text-align: right;
  flex: 1;
  min-width: 280px;
}

/* Reviews grid */
.reviews-v2__grid {
  max-width: var(--container-max, 1560px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

.review-v2 {
  position: relative;
  background: #FFFFFF;
  border-radius: 4px;
  padding: clamp(24px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  border: 1px solid var(--sf-stone-300);
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 380ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Filamento rosso verticale editoriale a sinistra (signature) */
.review-v2::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 2px;
  background: var(--sf-stone-300);
  transition: background 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.review-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(14, 14, 14, 0.14);
  border-color: var(--sf-stone-400);
}
.review-v2:hover::before { background: var(--sf-red); }
.review-v2__stars { display: inline-flex; gap: 2px; }
.review-v2__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sf-black);
  margin: 0;
  flex: 1;
}
.review-v2__attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(14, 14, 14, 0.08);
}
.review-v2__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sf-red), var(--sf-red-hover));
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.review-v2__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.review-v2__name {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sf-black);
}
.review-v2__locale {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sf-stone-600);
  text-transform: uppercase;
}

/* Foot CTA */
.reviews-v2__foot {
  max-width: var(--container-max, 1560px);
  margin: clamp(32px, 4vw, 48px) auto 0;
  display: flex;
  justify-content: center;
}
.reviews-v2__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sf-black);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: color 280ms ease;
}
.reviews-v2__cta svg { transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1); }
.reviews-v2__cta:hover { color: var(--sf-red); }
.reviews-v2__cta:hover svg { transform: translateX(3px); }

/* Scroll reveal cascading */
.home-reviews-v2 .review-v2 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.home-reviews-v2.in-view .review-v2 { opacity: 1; transform: translateY(0); }
.home-reviews-v2.in-view .review-v2:nth-child(1) { transition-delay: 0ms; }
.home-reviews-v2.in-view .review-v2:nth-child(2) { transition-delay: 120ms; }
.home-reviews-v2.in-view .review-v2:nth-child(3) { transition-delay: 240ms; }

/* Mobile */
@media (max-width: 860px) {
  .reviews-v2__grid { grid-template-columns: 1fr; gap: 12px; }
  .reviews-v2__head { flex-direction: column; align-items: flex-start; }
  .reviews-v2__title { text-align: left; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .review-v2,
  .review-v2__stars,
  .reviews-v2__cta,
  .reviews-v2__cta svg {
    animation: none !important;
    transition: none !important;
  }
  .home-reviews-v2 .review-v2 {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   HOME V1 SOBER — Pattern allineati a /distribuzione + /about.
   Sostituisce 8 sezioni v2 esagerate. Editorial italiano sobrio.
============================================================ */

/* ── Home Fork ──────────────────────────────────── */
.home-fork-grid {
  max-width: var(--container-max, 1560px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sp-fork-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page, #FFFFFF);
  border: 1px solid var(--sf-stone-300);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-primary);
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1),
              border-color 280ms cubic-bezier(0.2, 0, 0, 1);
}
.sp-fork-card:hover { transform: translateY(-3px); border-color: var(--sf-black); }
.sp-fork-card--ink { background: var(--sf-black); color: var(--sf-off-white); border-color: transparent; }
.sp-fork-card--ink:hover { border-color: var(--sf-off-white); }
.sp-fork-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sf-cream-100);
  overflow: hidden;
}
.sp-fork-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 92%, rgba(215, 38, 30, 0.07), transparent 70%);
}
.sp-fork-card--ink .sp-fork-card__media {
  background: var(--sf-black);
}
.sp-fork-card--ink .sp-fork-card__media::before {
  background: radial-gradient(60% 55% at 50% 92%, rgba(242, 61, 51, 0.14), transparent 70%);
}
/* Bivio, modalita' SCENA (UAT-01, 02/09): il cliente ha bocciato i prodotti
   scontornati che galleggiano e ha chiesto immagini che facciano percepire
   l'attivita' di riferimento. La foto riempie il riquadro 16:9 invece di
   appoggiarsi sul fondo come un cutout. */
.sp-fork-card__media--scena .sp-fork-card__cut {
  position: absolute;
  inset: 0;
  left: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.sp-fork-card__media--scena::before { background: none; }
.sp-fork-card:hover .sp-fork-card__media--scena .sp-fork-card__cut {
  transform: scale(1.035);
}

.sp-fork-card__cut {
  position: absolute;
  left: 50%;
  bottom: -7%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 82%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 22px 26px rgba(14, 14, 14, 0.22));
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.sp-fork-card:hover .sp-fork-card__cut {
  transform: translateX(-50%) translateY(-5px);
}
.sp-fork-card__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.sp-fork-card__h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
}
.sp-fork-card--ink .sp-fork-card__h3 { color: var(--sf-off-white); }
.sp-fork-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
}
.sp-fork-card--ink .sp-fork-card__bullets { color: var(--sf-stone-300); }
.sp-fork-card__bullets li {
  padding-left: 16px;
  position: relative;
}
.sp-fork-card__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-red);
}
.sp-fork-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sf-red);
}
.sp-fork-card--ink .sp-fork-card__cta { color: var(--sf-off-white); }
@media (max-width: 768px) {
  .home-fork-grid { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; }
  .sp-fork-card__body { padding: 24px; }
}

/* ── Home Agenti (sober grid 6-col) ─────────────── */
.sp-agenti { max-width: var(--container-max, 1560px); }
.sp-agenti__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.sp-agenti__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 22ch;
}
.sp-agenti__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 56ch;
  margin: 0;
}
/* Agenti home v4 — card verticali con ritratto tondo.
   Cinque persone, quindi cinque colonne piene sul desktop: niente buco di fine riga. */
.sp-agenti__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) { .sp-agenti__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .sp-agenti__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 460px)  { .sp-agenti__grid { grid-template-columns: 1fr; gap: 10px; } }
.sp-agente {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 28px 18px 22px;
  background: var(--sf-white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    border-color 220ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 220ms cubic-bezier(0.2, 0, 0, 1);
}
.sp-agente:hover {
  transform: translateY(-2px);
  border-color: var(--sf-black);
  box-shadow: 0 14px 28px -18px rgba(14, 14, 14, 0.16);
}
.sp-agente__zone {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(215, 38, 30, 0.07);
  border: 1px solid rgba(215, 38, 30, 0.14);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sf-red-ink, #C01A13);
}
.sp-agente__avatar {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sf-off-white);
  box-shadow: 0 0 0 1px var(--border-soft) inset;
  transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}
.sp-agente:hover .sp-agente__avatar { transform: scale(1.03); }
.sp-agente__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin-top: 16px;
}
.sp-agente__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sf-black);
}
.sp-agente__role {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--fg-secondary);
  text-wrap: balance;
}
.sp-agente__arrow {
  margin-top: 12px;
  font-size: 15px;
  color: var(--sf-stone-600);
  transition: transform 220ms ease, color 220ms ease;
}
.sp-agente:hover .sp-agente__arrow {
  transform: translateX(3px);
  color: var(--sf-red-ink, #C01A13);
}
@media (prefers-reduced-motion: reduce) {
  .sp-agente__avatar, .sp-agente__arrow { transition: none; }
  .sp-agente:hover .sp-agente__avatar { transform: none; }
}

.sp-agenti__foot {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--fg-secondary);
}

/* ── Home Case (sober hero + 3 preview) ─────────── */
.sp-case { max-width: var(--container-max, 1560px); }
.sp-case__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
  max-width: 720px;
}
.sp-case__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
}
.sp-case__sub { font-size: 17px; line-height: 1.55; color: var(--fg-secondary); margin: 0; }
/* Layout della card caso. Il fondo chiaro che stava qui era codice morto dal
   giorno in cui la card e' passata a dark: la regola piu' sotto (blocco "case:
   concept card DARK") lo sovrascriveva sempre, e le sue due creme risultavano
   fra i colori fuori palette pur non comparendo mai in pagina. Ora le due
   regole dicono la stessa cosa. */
.sp-case__hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  background: var(--sf-black);
  color: var(--sf-black);
  border: 1px solid var(--sf-stone-300);
  border-radius: 4px;
  padding: 64px 56px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Filamento rosso vertical column-rule + grana editoriale */
/* Variante senza numero: quando il caso non ha una cifra documentata la card
   diventa una colonna sola. Altrimenti restano il pillar centrale a dividere
   il nulla e il glow rosso di .sp-case__hero-num::before. */
.sp-case__hero--senza-numero { grid-template-columns: 1fr; }
.sp-case__hero--senza-numero::after { display: none; }
.sp-case__hero--senza-numero .sp-case__hero-body {
  padding-left: 0;
  /* A colonna piena la citazione correrebbe su 1200px, il doppio della
     misura leggibile: nella variante col numero stava in mezza card. */
  max-width: 68ch;
}
.sp-case__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
  opacity: 0.6;
  z-index: 0;
}
.sp-case__hero > * { position: relative; z-index: 1; }
/* Pillar verticale tra numero e racconto */
.sp-case__hero::after {
  content: "";
  position: absolute;
  top: 64px;
  bottom: 64px;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(180deg, transparent 0%, var(--sf-stone-400) 12%, var(--sf-stone-400) 88%, transparent 100%);
  z-index: 1;
}
.sp-case__hero-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.028em;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums oldstyle-nums;
}
.sp-case__from { color: var(--sf-stone-400); font-size: 0.42em; font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
.sp-case__arrow { color: var(--sf-stone-600); font-size: 0.5em; font-weight: 300; padding: 0 4px; }
.sp-case__to {
  color: var(--sf-red);
  white-space: nowrap;
  font-weight: 600;
  position: relative;
}
/* Growth arrow ↗ accent editoriale dopo €10.000 */
.sp-case__to::after {
  content: "↗";
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.5em;
  color: var(--sf-red);
  margin-left: 8px;
  display: inline-block;
  vertical-align: 0.18em;
  transform: rotate(-2deg);
}
.sp-case__hero-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 8px;
}
/* Period = label editoriale, niente più pill rossa */
.sp-case__period {
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  color: var(--sf-red);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding-left: 28px;
  align-self: flex-start;
}
.sp-case__period::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--sf-red);
}
.sp-case__caption {
  font-size: 12px;
  color: var(--sf-stone-600);
  margin: -8px 0 4px;
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0.005em;
}
.sp-case__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.32;
  margin: 4px 0 0;
  color: var(--sf-black);
  letter-spacing: -0.012em;
}
.sp-case__attribution {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--sf-stone-300);
}
/* Verified pin editoriale top-right dell'attribution */
.sp-case__attribution::after {
  content: "✓ verificato 2024";
  position: absolute;
  top: 14px;
  right: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--sf-stone-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sp-case__client-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--sf-black);
  letter-spacing: -0.005em;
}
.sp-case__client-zone {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
}
.sp-case__hero-cta { margin-top: 18px; }

/* CTA: solid bordeaux invece di rosso saturo dentro card paper */
.sp-case__hero-cta .btn-primary {
  background: var(--sf-red);
  border-color: var(--sf-red);
}
.sp-case__hero-cta .btn-primary:hover {
  background: var(--sf-black);
  border-color: var(--sf-black);
}

@media (max-width: 880px) {
  .sp-case__hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 28px;
  }
  .sp-case__hero::after { display: none; }
  .sp-case__hero-body { padding-left: 0; border-top: 1px solid var(--sf-stone-300); padding-top: 28px; }
  .sp-case__attribution { border-top: 0; padding-top: 0; }
}

/* Preview cards: paper minimal con filamento rosso left */
.sp-case__previews {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 860px) { .sp-case__previews { grid-template-columns: 1fr; } }
.sp-case-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 24px;
  background: #FFFFFF;
  border: 1px solid var(--sf-stone-300);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1),
              border-color 240ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 240ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}
.sp-case-preview::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 2px;
  background: var(--sf-stone-300);
  transition: background 240ms cubic-bezier(0.2, 0, 0, 1);
}
.sp-case-preview:hover {
  transform: translateY(-3px);
  border-color: var(--sf-stone-400);
  box-shadow: 0 8px 24px -12px rgba(14, 14, 14, 0.12);
}
.sp-case-preview:hover::before { background: var(--sf-red); }
.sp-case-preview__head { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; }
.sp-case-preview__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--sf-black);
}
.sp-case-preview__zone {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
}
.sp-case-preview__delta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.018em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 12px;
  font-variant-numeric: tabular-nums;
}
.sp-case-preview__from { color: var(--sf-stone-400); font-size: 0.62em; font-weight: 400; text-decoration: line-through; text-decoration-thickness: 0.8px; }
.sp-case-preview__arrow { color: var(--sf-stone-600); font-size: 0.65em; font-weight: 300; }
.sp-case-preview__to { color: var(--sf-red); white-space: nowrap; font-weight: 600; }
.sp-case-preview__period {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.005em;
  color: var(--sf-stone-600);
  padding-left: 12px;
  margin-top: -4px;
}
.sp-case__cta-all { margin-top: 32px; display: flex; justify-content: flex-start; }

/* ── Home Clusters head (riusa sp-cluster-card system.css) ─── */
.sp-clusters-head {
  max-width: var(--container-max, 1560px);
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-clusters-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 24ch;
}
.sp-clusters-sub { font-size: 17px; line-height: 1.55; color: var(--fg-secondary); max-width: 60ch; margin: 0; }

/* ── Home Community (sober 2-col + event list) ──── */
.sp-community {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  max-width: 1280px;
  align-items: start;
}
@media (max-width: 860px) { .sp-community { grid-template-columns: 1fr; gap: 32px; } }
.sp-community__content { display: flex; flex-direction: column; gap: 16px; }
.sp-community__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 18ch;
}
.sp-community__body { font-size: 17px; line-height: 1.55; color: var(--fg-secondary); max-width: 50ch; }
.sp-community__body p { color: var(--fg-secondary); font-size: 17px; line-height: 1.55; }
.sp-community__body p { margin: 0 0 12px; }
.sp-community__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.sp-community__events { list-style: none; padding: 0; margin: 0; }
.sp-community__events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 12px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--sf-stone-300);
}
.sp-community__events-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--sf-red);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 999px;
}
.sp-event {
  display: grid;
  /* la colonna data era fissa a 64px, tarata su "In arrivo": una finestra vera
     ("Entro dicembre", "Prima dell'estate") non ci entrava. Ora si adatta. */
  grid-template-columns: minmax(64px, max-content) 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--sf-stone-300);
}
.sp-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  background: var(--bg-page);
  border-radius: 8px;
  border: 1px solid var(--sf-stone-300);
}
.sp-event__day {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--sf-black);
  letter-spacing: -0.015em;
}
.sp-event__month {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sf-red);
  text-transform: uppercase;
  margin-top: 4px;
}
.sp-event__date--soon { min-width: 56px; padding-inline: 9px; }
.sp-event__soon {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--sf-red);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  /* il badge nasce per "In arrivo": con una finestra vera ("Prima dell'estate")
     48px non bastano e la parola sborda. Si adatta al contenuto, con un tetto. */
  max-width: 104px;
  hyphens: none;
}
.sp-event__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-event__type {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.sp-event__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--sf-black);
  margin: 0;
  letter-spacing: -0.005em;
}
.sp-event__loc { font-family: var(--font-body); font-size: 12px; color: var(--fg-secondary); }
.sp-event__link {
  color: var(--fg-secondary);
  transition: color 240ms ease, transform 240ms cubic-bezier(0.2, 0, 0, 1);
}
.sp-event:hover .sp-event__link { color: var(--sf-red); transform: translateX(2px); }

/* ── Banner CTA --ink fix h2 color (legacy h2 reset override) ─── */
.sp-banner-cta--ink h2 { color: var(--sf-off-white); }
.sp-banner-cta--red h2 { color: var(--sf-white); }
/* h2 weight 500 ovunque per coerenza (canone system.css usa 400) */
.sp-banner-cta h2 { font-weight: 500; }

/* ── Touch target compliance — Apple HIG 44pt minimum ─── */
.btn,
.btn-primary,
.btn-ghost {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ============================================================
   3 ATTI POLISH — Identità · Umanità+Prova · Azione
   Italian editorial classic + leader-section per atto.
============================================================ */

/* ── Manifesto leader atto I: DARK editorial — warm ink, non tombale ─── */
.home-manifesto-v4,
#manifesto.sp-section--tight {
  position: relative;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(215, 38, 30, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(0, 0, 0, 0.55) 0%, transparent 65%),
    var(--sf-black);
  isolation: isolate;
  overflow: hidden;
}
/* Grana editoriale impercettibile (newsprint dark) */
#manifesto.sp-section--tight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  z-index: 0;
}
/* Filamento rosso editoriale tra eyebrow e h2 */
#manifesto.sp-section--tight .sp-manifesto {
  position: relative;
  z-index: 1;
}
#manifesto.sp-section--tight h2 {
  color: #F6F2EC;
  letter-spacing: -0.022em;
}
/* Body più caldo e leggibile (non grigio anonimo) */
#manifesto.sp-section--tight p {
  color: rgba(247, 240, 228, 0.88);
}
#manifesto.sp-section--tight p em,
#manifesto.sp-section--tight p i {
  font-family: var(--font-display);
  font-style: italic;
  color: #FFFFFF;
  font-weight: 400;
}
#manifesto.sp-section--tight .link-arrow {
  color: #F6F2EC;
  border-bottom-color: rgba(247, 240, 228, 0.35);
}
#manifesto.sp-section--tight .link-arrow:hover {
  color: #FFFFFF;
  border-bottom-color: var(--sf-red);
}
/* Signature editoriale bottom-right: piccolo segno di firma */
#manifesto.sp-section--tight .sp-manifesto::after {
  content: "SALENTO · MMI →";
  position: absolute;
  right: 0;
  bottom: -18px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(247, 240, 228, 0.32);
}
@media (max-width: 768px) {
  #manifesto.sp-section--tight .sp-manifesto::after {
    bottom: -14px;
    font-size: 10px;
  }
}

/* ── Palette senior — dominante W+D, cream 1 solo respiro ─── */
/* Pattern: Hero W → Trust D → Fork W → Manifesto D → Agenti W → Case W
            → Food cost W → Solutions W → Cluster W → Community C (UNICO respiro)
            → Processo W → CTA D-image */
/* Cream usato solo in Community (community editoriale respira). Tutto il resto
   bianco/nero per look più professionale e senior. */

/* Fork → bianco (era cream — più pulito) */
#fork.sp-section,
#fork.sp-section--cream { background: var(--sf-white, #FFFFFF) !important; }
/* Solutions → bianco (no cream) */
#soluzioni.home-solutions { background: var(--sf-white, #FFFFFF); }
/* Case → bianco */
#case.sp-section { background: var(--sf-white, #FFFFFF); }
/* Cluster → bianco */
#cluster.sp-section { background: var(--sf-white, #FFFFFF); }
/* Anti-prezzo → bianco */
#anti-prezzo.sp-section--paper { background: var(--sf-white, #FFFFFF) !important; }
/* Community → cream UNICO RESPIRO */
#community.sp-section--cream { background: var(--sf-cream-100) !important; }
/* Processo → bianco */
#processo.sp-section { background: var(--sf-white, #FFFFFF); }
/* Reviews → bianco */
.home-reviews-v2 { background: var(--sf-white, #FFFFFF) !important; }

/* ── CTA banner final: cinematic food image + overlay (no solid red) ─── */
.home-cta-banner.sp-banner-cta--ink,
.sp-banner-cta.sp-banner-cta--ink {
  position: relative;
  background:
    linear-gradient(180deg, rgba(14, 14, 14, 0.78) 0%, rgba(14, 14, 14, 0.86) 50%, rgba(14, 14, 14, 0.92) 100%),
    url("venue-pizzeria.webp") center/cover no-repeat;
  isolation: isolate;
  overflow: hidden;
}
/* Il banner della HOME ha una sua immagine, generata apposta: prima riusava
   venue-pizzeria.webp, gia' impiegata sulle pagine cluster, ed era una delle
   ripetizioni che facevano sembrare il sito tutto uguale. Scoped su #cta-final:
   i banner delle pagine cluster restano sulla foto d'ambiente, dove ha senso. */
#cta-final.sp-banner-cta--ink {
  background:
    linear-gradient(180deg, rgba(14, 14, 14, 0.72) 0%, rgba(14, 14, 14, 0.82) 50%, rgba(14, 14, 14, 0.90) 100%),
    url("cta-cucina.webp") center/cover no-repeat;
}

.home-cta-banner.sp-banner-cta--ink::before,
.sp-banner-cta.sp-banner-cta--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.94  0 0 0 0 0.85  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.home-cta-banner.sp-banner-cta--ink > *,
.sp-banner-cta.sp-banner-cta--ink > * {
  position: relative;
  z-index: 1;
}
/* Filamento rosso editoriale top */
.home-cta-banner.sp-banner-cta--ink::after,
.sp-banner-cta.sp-banner-cta--ink::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--sf-red);
  z-index: 2;
}

/* ── Polish micro tipografici ─── */
/* Tabular numerals ovunque per numeri editorial (Italian classic) */
.trust-v2__num,
.sp-case__hero-num,
.sp-case-preview__delta,
.cluster-card-v2__count-num,
.case-v2__countup,
.case-v2__from,
.case-v2__to,
.reviews-v2__rating-num,
.sp-event__day {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Italic Bricolage sulle bullet Fork Pausa Spuntino (sub-brand signal) */
.sp-fork-card--ink .sp-fork-card__bullets li {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* ── Home Stepper: pattern canonico Claude Design + polish/animation ── */
#processo .gz-stepper {
  background: transparent;
  padding: 0;
}
#processo .gz-stepper__head { margin-bottom: var(--space-7); }

@media (min-width: 1000px) {
  /* Vale per ogni stepper, non solo per quello della home: il numero di
     colonne arriva da --gz-steps, che la sezione calcola sui suoi blocchi. */
  .gz-stepper__list { grid-template-columns: repeat(var(--gz-steps, 3), 1fr); }
}

/* ── Stepper · estensione della linea di collegamento (corretta 08/09/2026) ──
   In system.css la linea e' `left: 8%; right: 8%`: una percentuale scritta per
   il layout a 3 colonne e mai riadattata. Con 4 step partiva 72px DOPO la prima
   icona e proseguiva 160px oltre l'ultima, finendo nel vuoto — misurato su
   /pages/azienda: linea 175,7→1264,3 contro centri icona 104 e 1104.

   La geometria vera: icona 64px, `.gz-stepper__step` con `padding: 0 28px` e
   il primo senza padding a sinistra, l'ultimo senza a destra. Quindi il centro
   della prima icona sta a 32px dal bordo sinistro, e quello dell'ultima a
   (100%/n − 60px) da quello destro. Con --gz-steps vale per qualunque n.

   ⚠️ Questa regola NON va scoped: la prima stesura era finita dentro
   `#processo ...` e funzionava solo in home, lasciando azienda e distribuzione
   com'erano. Un prefisso di id sfugge a un grep che parte dal punto della classe.
   ─────────────────────────────────────────────────────────────────────────── */
.gz-stepper__list::before {
  left: 32px;
  right: calc(100% / var(--gz-steps, 3) - 60px);
}

/* Linea connettore canonica: draws su in-view (animazione) */
#processo .gz-stepper__list { position: relative; }
/* La GEOMETRIA della linea sta nella regola non scoped qui sopra: metterla qui
   la faceva valere solo dove esiste #processo, cioe' la sola home. Qui resta
   solo cio' che riguarda l'animazione. */
#processo .gz-stepper__list::before {
  background: var(--border-soft);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
}
#processo.in-view .gz-stepper__list::before {
  transform: scaleX(1);
}

/* Step: reveal sequenziale */
#processo .gz-stepper__step {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 580ms cubic-bezier(0.2, 0, 0, 1),
    transform 580ms cubic-bezier(0.2, 0, 0, 1);
}
#processo.in-view .gz-stepper__step { opacity: 1; transform: translateY(0); }
#processo.in-view .gz-stepper__step:nth-child(1) { transition-delay: 380ms; }
#processo.in-view .gz-stepper__step:nth-child(2) { transition-delay: 520ms; }
#processo.in-view .gz-stepper__step:nth-child(3) { transition-delay: 660ms; }
#processo.in-view .gz-stepper__step:nth-child(4) { transition-delay: 800ms; }

/* Icona canonica (64x64 white + sf-red icon) con polish hover */
#processo .gz-stepper__ic {
  transition:
    background 320ms cubic-bezier(0.2, 0, 0, 1),
    color 320ms cubic-bezier(0.2, 0, 0, 1),
    border-color 320ms cubic-bezier(0.2, 0, 0, 1),
    transform 320ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 320ms cubic-bezier(0.2, 0, 0, 1);
}
#processo .gz-stepper__step:hover .gz-stepper__ic {
  background: var(--sf-red);
  color: #FFFFFF;
  border-color: var(--sf-red);
  transform: scale(1.06);
  box-shadow: 0 10px 24px -10px rgba(215, 38, 30, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  #processo .gz-stepper__step,
  #processo .gz-stepper__list::before {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ── Padding uniforme 96/48 desktop, 56/20 mobile — coerenza totale ─── */
.home-manifesto-v4,
.home-stepper,
.home-reviews-v2,
.home-cta-banner,
.home-fork,
.home-solutions,
.home-agenti,
.home-case,
.home-clusters,
.home-community,
.sp-section,
.sp-section--tight,
.sp-banner-cta {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
  padding-left: var(--sf-edge, clamp(20px, 5vw, 88px)) !important;
  padding-right: var(--sf-edge, clamp(20px, 5vw, 88px)) !important;
}
@media (max-width: 768px) {
  .home-manifesto-v4,
  .home-stepper,
  .home-reviews-v2,
  .home-cta-banner,
  .home-fork,
  .home-solutions,
  .home-agenti,
  .home-case,
  .home-clusters,
  .home-community,
  .sp-section,
  .sp-section--tight,
  .sp-banner-cta {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    /* orizzontale: governa il clamp fluido del tier desktop (min 20px) */
  }
  /* Coherent mobile horizontal gutters (20px) for sections outside the list above
     — fixes home-reviews-mini (was 80px), hero/trust (18px) and the catalog
     template sections, without touching their vertical rhythm. */
  /* .pdp-hero-v2 e .pdp-breadcrumb erano in questa lista, ma le ALTRE sezioni
     della scheda prodotto no: sotto i 768px la hero stava a 20 e il resto della
     pagina a 22-38. Tolte: seguono --sf-edge come tutto il resto (08/09). */
  .hero-showcase,
  .home-trust,
  .home-reviews-mini,
  .collection-grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   HOME · Cluster v3 — pattern catalog-hub canonico (5 cards)
   ════════════════════════════════════════════════════════════════ */
.home-clusters-v3__head {
  max-width: var(--container-max, 1280px);
  margin: 0 auto var(--space-7, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-clusters-v3__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
}
.home-clusters-v3__sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--sf-stone-600);
  max-width: 64ch;
  margin: 0;
}
.home-clusters-v3__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
}
@media (max-width: 999px) {
  .home-clusters-v3__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .home-clusters-v3__grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Toppa storica per la card orfana, scritta il 02/09 quando la griglia era a
   TRE colonne fisse e la settima card restava sola: l'ultima card si allargava
   su tutta la riga e diventava orizzontale.
   Dal 04/09 le colonne le decide il numero di card (gz-grid), quindi con sette
   card la griglia fa 4+3 e l'orfana non nasce piu'. La toppa pero' continuava a
   scattare — `:nth-child(3n+1)` e' vero anche per la settima di quattro colonne —
   e riportava il difetto in una forma nuova: 4+2+1. Resta valida solo dove la
   griglia non usa gz-grid. */
@media (min-width: 1000px) {
  .home-clusters-v3__grid:not(.gz-grid) > .home-clusters-v3__card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .home-clusters-v3__grid:not(.gz-grid) > .home-clusters-v3__card:last-child:nth-child(3n + 1)
    .home-clusters-v3__media {
    aspect-ratio: auto;
    flex: 0 0 42%;
  }
  .home-clusters-v3__grid:not(.gz-grid) > .home-clusters-v3__card:last-child:nth-child(3n + 1)
    .home-clusters-v3__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (min-width: 600px) and (max-width: 999px) {
  /* a due colonne l'orfana e' la settima: stessa cura */
  .home-clusters-v3__grid:not(.gz-grid) > .home-clusters-v3__card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
  }
}
.home-clusters-v3__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--sf-white);
  text-decoration: none;
  color: inherit;
  transition:
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    border-color 220ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 220ms cubic-bezier(0.2, 0, 0, 1);
}
.home-clusters-v3__card:hover {
  transform: translateY(-3px);
  border-color: var(--sf-black);
  box-shadow: 0 16px 32px -18px rgba(14, 14, 14, 0.18);
}
.home-clusters-v3__media {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--sf-cream-100);
  transition: transform 600ms cubic-bezier(0.2, 0, 0, 1);
}
.home-clusters-v3__card:hover .home-clusters-v3__media { transform: scale(1.04); }
.home-clusters-v3__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.home-clusters-v3__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--sf-black);
}
.home-clusters-v3__line {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sf-stone-600);
  margin: 0;
  flex: 1;
}
.home-clusters-v3__preview {
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--sf-stone-600);
}
.home-clusters-v3__cta {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sf-red-ink, #C01A13);
}


/* ════════════════════════════════════════════════════════════════
   HOME · Numeri food cost — editorial paper section
   Pattern senior: 3 mini-card paper + tabular nums bordeaux + ↗ arrow
   ════════════════════════════════════════════════════════════════ */
.home-food-cost {
  background: var(--sf-white);
}
.sp-food-cost__head {
  max-width: none;
  margin: 0 0 48px;
  text-align: left;
}
.sp-food-cost__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 14px 0 14px 0;
}
.sp-food-cost__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--sf-stone-600);
  margin: 0;
  max-width: 56ch;
  margin-left: 0;
  margin-right: 0;
}

.sp-food-cost__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
}
@media (max-width: 900px) {
  .sp-food-cost__grid { grid-template-columns: 1fr; gap: 16px; }
}

.sp-food-cost__card {
  position: relative;
  background: var(--sf-white);
  border: 1px solid var(--sf-stone-300);
  border-radius: 4px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    border-color 280ms cubic-bezier(0.2, 0, 0, 1),
    transform 280ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 280ms cubic-bezier(0.2, 0, 0, 1);
}
.sp-food-cost__card:hover {
  transform: translateY(-2px);
  border-color: var(--sf-stone-400);
  box-shadow: 0 8px 24px -12px rgba(14, 14, 14, 0.1);
}

.sp-food-cost__caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sf-stone-300);
}

.sp-food-cost__number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.022em;
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.sp-food-cost__from {
  color: var(--sf-stone-600);
  font-size: 0.55em;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.sp-food-cost__arrow {
  color: var(--sf-stone-600);
  font-size: 0.55em;
  font-weight: 300;
}
.sp-food-cost__to {
  color: var(--sf-red);
  font-weight: 600;
  white-space: nowrap;
}
.sp-food-cost__growth {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sf-red);
  font-size: 0.5em;
  margin-left: 4px;
  display: inline-block;
  transform: rotate(-3deg);
  vertical-align: 0.15em;
}

.sp-food-cost__label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.005em;
  color: var(--sf-black);
  margin-top: 4px;
}

.sp-food-cost__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sf-stone-600);
  margin: 0;
}

.sp-food-cost__source {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--sf-stone-300);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
}

.sp-food-cost__foot {
  margin-top: 40px;
  text-align: left;
}

/* ════════════════════════════════════════════════════════════════
   MARCHIO HUB — schede esclusive (Salomon · Top Taste Burger · Pizzella · Sistema Gusto)
   ════════════════════════════════════════════════════════════════ */
.marchio-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
}
.marchio-hero__inner {
  position: relative;
  z-index: 2;
  padding: 96px 64px 96px var(--container-pad-desktop, 80px);
  max-width: 720px;
}
.marchio-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-red-glow);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.marchio-hero__sep {
  color: rgba(255,255,255,0.4);
}
.marchio-hero__country {
  color: rgba(255,255,255,0.85);
}
.marchio-hero__year {
  color: rgba(255,255,255,0.85);
}
.marchio-hero__exclusive {
  color: var(--sf-red-glow);
  font-weight: 700;
}
.marchio-hero__h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
  color: inherit;
}
.marchio-hero__claim {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  margin: 0 0 36px;
  max-width: 30ch;
}
.marchio-hero__ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.marchio-hero__ghost {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
  transition: border-color 280ms cubic-bezier(0.2, 0, 0, 1), color 280ms;
}
.marchio-hero__ghost:hover {
  color: var(--sf-white);
  border-bottom-color: var(--sf-red);
}
.marchio-hero__media {
  height: 100%;
  min-height: 520px;
  background-size: cover;
  background-position: center;
  background-color: var(--sf-stone-300);
}
@media (max-width: 900px) {
  .marchio-hero { grid-template-columns: 1fr; }
  .marchio-hero__inner { padding: 64px 24px; max-width: none; }
  .marchio-hero__media { min-height: 320px; }
}

.marchio-story__wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.marchio-story__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 14px 0 28px;
}
.marchio-story__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--sf-stone-600);
  max-width: 62ch;
  margin: 0 auto;
}
.marchio-story__body p {
  margin: 0 0 18px;
}

.marchio-pilastri__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 14px 0 48px;
  max-width: 24ch;
}
.marchio-pilastri__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container-max, 1280px);
}
@media (max-width: 900px) {
  .marchio-pilastri__grid { grid-template-columns: 1fr; gap: 24px; }
}
.marchio-pilastro {
  padding: 32px 0 0;
  border-top: 1px solid var(--sf-stone-400);
}
.marchio-pilastro__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--sf-red);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.marchio-pilastro__h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  color: var(--sf-black);
}
.marchio-pilastro__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sf-stone-600);
  margin: 0;
}

.marchio-use__wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.marchio-use__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.018em;
  margin: 14px 0 24px;
}
.marchio-use__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sf-stone-600);
  max-width: 60ch;
  margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════════
   HOME · Reviews mini-block trust signal pre-footer
   ════════════════════════════════════════════════════════════════ */
.home-reviews-mini {
  background: var(--sf-white);
  border-top: 1px solid var(--sf-stone-300);
  border-bottom: 1px solid var(--sf-stone-300);
  padding: 24px var(--container-pad-desktop, 80px);
}
.home-reviews-mini__wrap {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.home-reviews-mini__left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.home-reviews-mini__google {
  flex-shrink: 0;
}
.home-reviews-mini__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-reviews-mini__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-stone-600);
}
.home-reviews-mini__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-reviews-mini__rating {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.008em;
  color: var(--sf-black);
  font-variant-numeric: tabular-nums;
}
.home-reviews-mini__stars {
  display: inline-flex;
  gap: 1px;
}
.home-reviews-mini__count {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--sf-stone-600);
}
.home-reviews-mini__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--sf-black);
  text-decoration: none;
  border-bottom: 1px solid var(--sf-stone-400);
  padding-bottom: 2px;
  transition: color 280ms cubic-bezier(0.2, 0, 0, 1), border-color 280ms;
}
.home-reviews-mini__cta:hover {
  color: var(--sf-red);
  border-bottom-color: var(--sf-red);
}
@media (max-width: 720px) {
  .home-reviews-mini__wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSISTENT SECTION RHYTHM — one responsive scale, every section, every page.
   clamp(24px, 5vw, 64px) → 24px on mobile (≤~480px), ~64px on desktop (≥1280px),
   smooth between. Replaces the old 64–96px desktop / proto-only-mobile mix that was
   excessive + inconsistent. !important to beat base rules AND inline padding (about/
   catalog/community used inline padding:80px). Horizontal padding is left untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-section, .sp-section--tight, .sp-banner-cta,
.home-solutions, .home-mag,
.lc-manifesto, .lc-pains, .lc-solutions, .lc-moments, .lc-season, .lc-others, .lc-banner,
.marchio-story, .marchio-pilastri, .marchio-use,
.pdp-hero-v2, .pdp-banner, .pdp-cluster, .pdp-correlati, .pdp-momenti, .pdp-pairing, .pdp-perche, .pdp-scheda,
.collection-grid, .cluster-featured, .sp-mag-body,
.grazie__cards, .grazie__steps, .grazie__closing, .site-err {
  padding-top: clamp(24px, 5vw, 64px) !important;
  padding-bottom: clamp(24px, 5vw, 64px) !important;
}
.lc-case__txt { padding-top: clamp(24px, 5vw, 56px) !important; padding-bottom: clamp(24px, 5vw, 56px) !important; }

/* Hero tier — consistent + far less excessive (some hub heroes were 97px on mobile) */
.lc-hero, .catalog-hub-hero, .sp-about-hero, .sp-community-hero,
.sp-magazine-hero, .grazie__hero, .home-hero {
  padding-top: clamp(40px, 7vw, 88px) !important;
  padding-bottom: clamp(40px, 7vw, 88px) !important;
}

/* ═══ Breadcrumb — always ONE minimal line (never wraps) ═══ */
.pdp-breadcrumb ol, .lc-crumb {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pdp-breadcrumb ol::-webkit-scrollbar, .lc-crumb::-webkit-scrollbar { display: none; }
.pdp-breadcrumb li, .lc-crumb > * { flex: none; }

/* ═══ Primary CTAs full-width on mobile (incl. PDP "Richiedi consulenza") ═══ */
@media (max-width: 768px) {
  .pm-cta-row, .hero-showcase__ctas, .sp-hero__cta, .sp-banner-cta__row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pm-cta-row > a, .pm-cta-row > button,
  .hero-showcase__ctas > a, .hero-showcase__ctas .btn-primary,
  .sp-hero__cta > a, .sp-hero__cta .btn,
  .sp-banner-cta__row > a, .sp-banner-cta__row .btn,
  .cf-cta--bottom {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
  }
}


/* ============================================================ LP PORT — device dalla landing v7
   sf-pill (eyebrow) · case concept-card dark · cascade stagger grid · clusters duotone · cta glow.
   Namespace sf-*. Testo rosso piccolo: red-ink su chiaro, red2-txt/red-glow su --sf-ink. */

/* ── sf-pill: eyebrow su pill con dot ── */
.sf-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-red-ink);
  background: rgba(215, 38, 30, 0.07);
  border: 1px solid rgba(215, 38, 30, 0.22);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}
.sf-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-red);
  flex: none;
}
.sf-pill--dark {
  color: var(--sf-red2-txt, #FF5A4E);
  background: rgba(242, 61, 51, 0.1);
  border-color: rgba(242, 61, 51, 0.28);
}
.sf-pill--dark::before { background: var(--sf-red-glow); }

/* ── case: concept card DARK (rompe la corsa dei 5 chiari a metà scroll) ── */
.sp-case__hero {
  background: var(--sf-black);
  color: var(--sf-white);
  border-color: rgba(255, 255, 255, 0.09);
}
.sp-case__hero::before { mix-blend-mode: screen; opacity: 0.22; }
.sp-case__hero::after {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.16) 12%, rgba(255, 255, 255, 0.16) 88%, transparent 100%);
}
.sp-case__to,
.sp-case__to::after { color: var(--sf-red-glow); }
.sp-case__from { color: var(--sf-stone-600); }
.sp-case__arrow { color: var(--sf-stone-400); }
.sp-case__period { color: var(--sf-red2-txt, #FF5A4E); }
.sp-case__caption { color: var(--sf-stone-300); }
.sp-case__quote { color: var(--sf-white); }
.sp-case__attribution { color: var(--sf-stone-400); }
.sp-case__client-name { color: var(--sf-white); }
.sp-case__client-zone { color: var(--sf-stone-400); }
/* glow morbido dietro il numero */
.sp-case__hero-num { position: relative; }
.sp-case__hero-num::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -45%;
  width: 75%;
  height: 190%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 61, 51, 0.16), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ── cascade stagger sulle grid (pattern trust v2.1 esteso) ──
   Scoped a .reveal: senza JS niente .reveal → contenuto visibile. */
.reveal .sp-fork-card,
.reveal .sp-agente,
.reveal .sp-food-cost__card,
.reveal .home-clusters-v3__card,
.reveal .sp-event {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);
}
.reveal.in-view .sp-fork-card,
.reveal.in-view .sp-agente,
.reveal.in-view .sp-food-cost__card,
.reveal.in-view .home-clusters-v3__card,
.reveal.in-view .sp-event {
  opacity: 1;
  transform: none;
}
.reveal.in-view .sp-fork-card:nth-child(2) { transition-delay: 0.1s; }
.reveal.in-view .sp-food-cost__card:nth-child(2) { transition-delay: 0.08s; }
.reveal.in-view .sp-food-cost__card:nth-child(3) { transition-delay: 0.16s; }
.reveal.in-view .sp-agente:nth-child(2),
.reveal.in-view .home-clusters-v3__card:nth-child(2),
.reveal.in-view .sp-event:nth-child(2) { transition-delay: 0.07s; }
.reveal.in-view .sp-agente:nth-child(3),
.reveal.in-view .home-clusters-v3__card:nth-child(3),
.reveal.in-view .sp-event:nth-child(3) { transition-delay: 0.14s; }
.reveal.in-view .sp-agente:nth-child(4),
.reveal.in-view .home-clusters-v3__card:nth-child(4),
.reveal.in-view .sp-event:nth-child(4) { transition-delay: 0.21s; }
.reveal.in-view .sp-agente:nth-child(5),
.reveal.in-view .home-clusters-v3__card:nth-child(5) { transition-delay: 0.28s; }
.reveal.in-view .sp-agente:nth-child(6),
.reveal.in-view .home-clusters-v3__card:nth-child(6) { transition-delay: 0.35s; }

/* ── cta banner: glow rosso dietro il titolo ── */
.sp-banner-cta--ink h2 { text-shadow: 0 0 90px rgba(242, 61, 51, 0.38), 0 0 30px rgba(242, 61, 51, 0.14); }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal .sp-fork-card,
  .reveal .sp-agente,
  .reveal .sp-food-cost__card,
  .reveal .home-clusters-v3__card,
  .reveal .sp-event { opacity: 1; transform: none; transition: none; }
  .home-clusters-v3__media { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAUSA SPUNTINO — redesign 2026-07-16 · full-bleed editoriale · FLAT (B.I. v1.1)
   Palette 70/20/8/2 · Bricolage + Geist · niente ombre/gradient/glow · filetti 1px
   Scoped tutto sotto .ps per non toccare il resto del tema.
   ═══════════════════════════════════════════════════════════════════════════ */
.ps {
  --ps-edge: clamp(20px, 5vw, 88px);
  --ps-wide: 1560px;
  --ps-ink: var(--sf-black, #0E0E0E);
  --ps-off: var(--sf-off-white, #F6F2EC);
  /* UAT-31 (02/09): off #F6F2EC e cream-100 #EFE8DC distano 7-16 punti per canale.
     A tutta larghezza si leggono come lo stesso beige, ed e' la monotonia che il
     cliente ha contestato. cream-200 e' gia' in palette e da' uno scalino vero. */
  --ps-cream: var(--sf-cream-200, #E4DBCB);
  --ps-warm-ink: var(--sf-stone-800, #2E2A24);
  --ps-line: var(--sf-stone-300, #C9C2B6);
  --ps-mut: var(--sf-stone-600, #5A5447);
  --ps-red: var(--sf-red, #D7261E);
  font-family: var(--font-body);
  color: var(--ps-ink);
  background: var(--ps-off);
}
.ps * { box-sizing: border-box; }

.ps-inner {
  width: 100%;
  max-width: var(--ps-wide);
  margin-inline: auto;
  padding-inline: var(--ps-edge);
}

/* full-bleed color bands */
.ps-band { width: 100%; padding-block: clamp(72px, 11vh, 148px); }
.ps-band--off   { background: var(--ps-off); }
.ps-band--cream { background: var(--ps-cream); }
/* Si usa INSIEME a .ps-band--ink, non al suo posto: tutte le regole di testo
   chiaro sono agganciate a --ink. Qui si cambia solo il fondo. */
.ps-band--ink.ps-band--warmink { background: var(--ps-warm-ink); }

/* La crema piu' profonda (UAT-31) ha portato la pill rossa da 5,07:1 a 4,50:1,
   cioe' esattamente sul minimo AA. Sulle bande cream la pill prende un fondo
   quasi bianco invece del velo rosso al 7%: lo scalino di colore fra le bande
   resta, e il margine di contrasto torna. */
.ps-band--cream .sf-pill {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(215, 38, 30, 0.28);
}
.ps-band--ink   { background: var(--ps-ink); color: var(--sf-off-white, #F6F2EC); }

/* ---- typography primitives ---- */
.ps-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.ps-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.ps-lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
  color: var(--ps-mut);
  margin: 0;
  max-width: 56ch;
}
.ps-band--ink .ps-lead { color: rgba(246, 242, 236, 0.72); }

.ps-eyebrow, .ps-meta, .ps-index, .ps-fil-card__num, .ps-proc__item-num, .ps-fam-card__idx, .ps-lockup__by {
  font-family: var(--font-mono);
}
.ps-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sf-red-ink, #C01A13);
}
.ps-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-mut);
}
.ps-meta__dot { color: var(--ps-line); }
.ps-index {
  font-size: 13px; letter-spacing: 0.1em; color: var(--ps-mut);
}

/* eyebrow pill on dark bands — usa var confermate (no --sf-red2-txt) */
.ps-band--ink .sf-pill {
  color: var(--sf-red-glow, #F23D33);
  background: rgba(242, 61, 51, 0.10);
  border-color: rgba(242, 61, 51, 0.28);
}

/* ---- buttons (flat) ---- */
.ps-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  background: var(--ps-red); color: var(--sf-white);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border-radius: 6px;
  transition: background .2s ease, transform .2s cubic-bezier(.34,1.4,.64,1);
}
.ps-btn:hover { background: var(--sf-red-hover, #B81E17); transform: translateY(-2px); }
.ps-btn svg { width: 15px; height: 15px; }
.ps-btn--lg { padding: 18px 34px; font-size: 14px; }
.ps-btn--ghost {
  background: transparent; color: var(--ps-ink);
  padding: 15px 4px; border-radius: 0;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 15px;
  border-bottom: 1.5px solid var(--ps-ink);
}
.ps-btn--ghost:hover { background: transparent; transform: none; opacity: 0.62; }

/* ══════════ S1 · HERO ══════════ */
/* Hero Pausa Spuntino — rifatto il 04/09.
   Il cliente l'aveva chiamato povero rispetto a quello della home. Misurato:
   l'hero era alto 930px su un viewport da 900, e il titolo da solo ne occupava
   361 a 92px. Il risultato e' che su un portatile non si vedevano mai il
   pulsante ne' la riga con i dati di produzione: restavano sotto la piega.
   Non si aggiunge ornamento, si rimette dentro lo schermo quello che c'era
   gia'. La brand identity di Pausa Spuntino e' FLAT: niente ombre, gradienti
   o bagliori. L'unica cosa aggiunta e' l'entrata in scena, che e' movimento
   di transform e opacita', ed e' il principio 4 del progetto. */
.ps-hero { width: 100%; background: var(--ps-off); padding-block: clamp(32px, 5vh, 72px); overflow: hidden; }
.ps-hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: clamp(32px, 5vw, 80px);
}
.ps-hero__col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ps-hero__logo { height: clamp(56px, 5vw, 84px); width: auto; margin-bottom: 8px; }
.ps-hero__h1 { font-size: clamp(36px, 4.6vw, 68px); }
.ps-hero__sub { font-size: clamp(16px, 1.35vw, 20px); max-width: 46ch; }
.ps-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
/* La riga dei dati chiude l'hero su tutta la larghezza, sotto le due colonne,
   non solo sotto il testo: e' il piede della sezione, non una nota della colonna. */
.ps-hero__meta {
  grid-column: 1 / -1; margin-top: clamp(24px, 3vh, 40px);
  padding-top: 18px; border-top: 1px solid var(--ps-line); width: 100%;
}
.ps-hero__media { justify-self: end; width: 100%; }

/* ── Scena della gamma, con la profondita' ──────────────────────────────
   Quattro immagini con alfa vera, un'ancora dominante e tre satelliti a circa
   un terzo: il rapporto 3:1 viene dalle reference (Slice Town su Framer, e la
   nostra stessa hero della home), dove la forza sta in UN soggetto grande e non
   in una costellazione di oggetti pari.

   ⚠️ L'OMBRA E' UN'ECCEZIONE DICHIARATA. La brand identity di Pausa Spuntino
   vieta ombre, gradienti e glow, e resta valida su tutto il resto della pagina.
   Qui no: senza, gli oggetti ritagliati galleggiano su un fondo piatto e il
   cliente li ha chiamati «buttati nel vuoto», tre volte. Scelta dell'utente il
   04/09, limitata a questa hero.

   E' una cast shadow, non un'ombra di contatto: gli oggetti sono sospesi
   apposta, non appoggiati, quindi l'ombra dice a che distanza stanno invece di
   fingere un piano che non c'e'. Direzione unica, da sinistra in alto, la
   stessa luce delle fotografie della pagina. Tinta calda, non nera, perche' il
   fondo e' crema. `drop-shadow` e non `box-shadow`: segue la sagoma. */
.ps-scena {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin-left: auto;
  aspect-ratio: 4 / 3;
}
/* Il nome come texture, dietro ai prodotti. Non e' un titolo: non si legge
   tutto, e' tagliato dal bordo apposta. Il colore e' il crema piu' scuro della
   palette, quindi resta dentro la regola dei token e non introduce un grigio
   nuovo. z-index 0: tutto il resto della scena gli sta sopra. */
.ps-scena__parola {
  position: absolute;
  left: -6%;
  top: 46%;
  transform: translateY(-50%);
  z-index: 0;
  /* Due righe, PAUSA sopra e SPUNTINO sotto (scelta dell'utente il 04/09).
     Interlinea sotto l'unita' perche' le due parole devono leggersi come un
     blocco unico, non come due righe di testo. Corpo ridotto rispetto alla
     versione a riga sola: due righe raddoppiano la massa visiva e a 210px
     uscivano dalla scena. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(76px, 10.5vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--sf-cream-200);
  pointer-events: none;
  user-select: none;
}
.ps-scena img { position: absolute; height: auto; display: block; }
.ps-scena__ancora {
  width: 88%; right: -4%; top: 8%;
  transform: translateX(clamp(0px, 2vw, 40px)) rotate(-2deg);
  filter: drop-shadow(20px 30px 34px rgba(74, 58, 44, 0.22));
  z-index: 2;
}
.ps-scena__sat { z-index: 1; }
.ps-scena__sat--1 { width: 29%; left: 0;   top: 2%;     transform: rotate(-7deg); filter: drop-shadow(11px 16px 18px rgba(74, 58, 44, 0.20)); }
.ps-scena__sat--2 { width: 23%; left: 5%;  bottom: 10%; transform: rotate(4deg);  filter: drop-shadow(9px 13px 15px rgba(74, 58, 44, 0.20)); }
.ps-scena__sat--3 { width: 21%; right: 2%; bottom: 2%;  transform: rotate(-3deg); filter: drop-shadow(9px 13px 15px rgba(74, 58, 44, 0.20)); z-index: 3; }

/* Movimento continuo, lento e sfasato: la hero della home si muove, questa no,
   ed era parte del «ci siamo sprecati». Ampiezze piccole: deve respirare. */
@media (prefers-reduced-motion: no-preference) {
  .ps-scena { animation: ps-entra 760ms var(--ease-standard) 150ms both; }
  .ps-scena__ancora { animation: ps-fluttua 9s ease-in-out infinite; }
  .ps-scena__sat--1 { animation: ps-fluttua-1 7.5s ease-in-out 0.4s infinite; }
  .ps-scena__sat--2 { animation: ps-fluttua-2 8.5s ease-in-out 0.9s infinite; }
  .ps-scena__sat--3 { animation: ps-fluttua-3 8s ease-in-out 0.2s infinite; }
}
@keyframes ps-fluttua {
  0%, 100% { transform: translateX(clamp(0px, 2vw, 40px)) rotate(-2deg) translateY(0); }
  50%      { transform: translateX(clamp(0px, 2vw, 40px)) rotate(-2deg) translateY(-10px); }
}
@keyframes ps-fluttua-1 {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(-13px); }
}
@keyframes ps-fluttua-2 {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-8px); }
}
@keyframes ps-fluttua-3 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-11px); }
}

@media (max-width: 860px) {
  .ps-scena { max-width: 460px; margin: 0 auto; aspect-ratio: 5 / 4; }
  .ps-scena__ancora { width: 94%; right: 0; top: 6%; }
  .ps-scena__sat--1 { width: 30%; }
  .ps-scena__sat--2, .ps-scena__sat--3 { display: none; }
  .ps-scena__parola { font-size: clamp(56px, 17vw, 100px); left: -8%; top: 44%; }
}

}

}

/* Entrata in scena, orchestrata. Solo transform e opacita', durate dai token.
   Con prefers-reduced-motion non c'e' "meno animazione": c'e' lo stato di
   riposo completo, cioe' nessuna animazione affatto. */
@media (prefers-reduced-motion: no-preference) {
  .ps-hero__col > * { animation: ps-entra 620ms var(--ease-standard) both; }
  .ps-hero__col > *:nth-child(1) { animation-delay: 40ms; }
  .ps-hero__col > *:nth-child(2) { animation-delay: 110ms; }
  .ps-hero__col > *:nth-child(3) { animation-delay: 180ms; }
  .ps-hero__col > *:nth-child(4) { animation-delay: 260ms; }
  .ps-hero__col > *:nth-child(5) { animation-delay: 340ms; }
  .ps-hero__meta { animation: ps-entra 620ms var(--ease-standard) 420ms both; }
}
@keyframes ps-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* La foto ha gia' una sua trasformazione di posa: l'animazione deve finire
   esattamente li', altrimenti a fine corsa il panino si raddrizza di scatto. */
@keyframes ps-entra-media {
  from { opacity: 0; transform: translateX(clamp(0px, 2vw, 40px)) rotate(-2deg) translateY(20px); }
  to   { opacity: 1; transform: translateX(clamp(0px, 2vw, 40px)) rotate(-2deg); }
}

/* ══════════ S2 · Architettura di marca ══════════ */
.ps-arch { padding-block: clamp(44px, 6vh, 84px); border-top: 1px solid var(--ps-line); border-bottom: 1px solid var(--ps-line); }
.ps-arch__grid { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ps-arch__txt {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.015em;
  margin: 0; max-width: 34ch;
}

/* ══════════ S3 · Manifesto documentale ══════════ */
.ps-manifesto .ps-inner { display: flex; flex-direction: column; gap: 26px; }
.ps-manifesto__h2 { font-size: clamp(32px, 5.4vw, 82px); max-width: 16ch; }
.ps-manifesto__p { font-size: clamp(18px, 1.6vw, 23px); max-width: 52ch; }

/* ══════════ S4 · Filiera ══════════ */
.ps-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vh, 64px); }
.ps-head__sub { font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ps-mut); margin: 0; max-width: 54ch; }
.ps-filiera__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ps-line); border: 1px solid var(--ps-line); }
.ps-fil-card { background: var(--ps-off); padding: clamp(24px, 2.4vw, 38px); display: flex; flex-direction: column; gap: 14px; min-height: 210px; }
.ps-fil-card__num { font-size: 12px; letter-spacing: 0.1em; color: var(--ps-red); }
.ps-fil-card__k { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -0.01em; margin: 0; }
.ps-fil-card__v { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ps-mut); margin: 0; }
.ps-filiera__note { margin: clamp(28px, 4vh, 44px) 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ps-mut); max-width: 60ch; padding-left: 18px; border-left: 2px solid var(--ps-red); }

/* ══════════ S5 · Processo (dark) ══════════ */
.ps-proc__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 88px); align-items: center; }
.ps-proc__col { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ps-proc__h2 { color: var(--sf-off-white, #F6F2EC); font-size: clamp(30px, 4.2vw, 62px); }
.ps-proc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ps-proc__item { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(246, 242, 236, 0.16); }
.ps-proc__item:last-child { border-bottom: 1px solid rgba(246, 242, 236, 0.16); }
/* Il fondo di .ps-proc e' --sf-stone-800 (#2E2A24), SCURO: l'avevo dato per
   chiaro senza misurarlo e con --sf-red-ink il rapporto e' sceso da 3,73 a 2,31,
   peggio di prima. Su questo fondo serve il rosso piu' chiaro della palette,
   --sf-red2-txt (#FF5A4E), che da' 4,75:1.
   La regola generale: --sf-red-ink su chiaro, --sf-red-glow su --sf-black,
   --sf-red2-txt sui grigi scuri caldi. E il fondo si misura, non si assume. */
.ps-proc__item-num { font-size: 13px; letter-spacing: 0.1em; color: var(--sf-red2-txt); }
.ps-proc__item-txt { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -0.01em; color: var(--sf-off-white, #F6F2EC); }

/* ══════════ S6 · Famiglie ══════════ */
.ps-fam__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 28px); }
.ps-fam-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--ps-off); border: 1px solid var(--ps-line); border-radius: 8px; overflow: hidden; transition: border-color .25s ease; }
.ps-fam-card:hover { border-color: var(--ps-ink); }
.ps-fam-card__media { aspect-ratio: 4 / 3; background: var(--sf-white); overflow: hidden; }
.ps-fam-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ps-fam-card:hover .ps-fam-card__media img { transform: scale(1.03); }
.ps-fam-card__body { padding: clamp(20px, 1.8vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.ps-fam-card__idx { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-red-ink, #C01A13); }
.ps-fam-card__t { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.015em; margin: 0; }
.ps-fam-card__d { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--ps-mut); margin: 0; }
.ps-fam-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--sf-red-ink, #C01A13); }
.ps-fam-card__cta svg { width: 14px; height: 14px; }

/* ══════════ S7 · Caso ══════════ */
.ps-case__grid { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.ps-case__aside { display: flex; flex-direction: column; gap: 22px; }
.ps-case__attr { display: flex; flex-direction: column; gap: 3px; }
.ps-case__attr-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.ps-case__attr-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ps-mut); }
.ps-case__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.ps-case__quote::before { content: "“"; color: var(--ps-red); margin-right: 2px; }

/* ══════════ S8 · CTA ══════════ */
.ps-cta__wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 780px; margin-inline: auto; }
.ps-cta__wrap .sf-pill { align-self: center; }
.ps-cta__h2 { color: var(--sf-off-white, #F6F2EC); font-size: clamp(32px, 4.6vw, 68px); }
.ps-cta__p { text-align: center; max-width: 48ch; }
.ps-cta .ps-btn { margin-top: 6px; }
.ps-lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(32px, 5vh, 56px); padding-top: 28px; border-top: 1px solid rgba(246, 242, 236, 0.16); width: 100%; }
.ps-lockup img { height: 46px; width: auto; opacity: 0.96; }
.ps-lockup__by { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246, 242, 236, 0.5); }

/* ---- reveal stagger su card (parent .ps-band riceve .reveal/.in-view dal theme.js) ---- */
.ps-band .ps-fil-card, .ps-band .ps-fam-card, .ps-band .ps-proc__item {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.ps-band.in-view .ps-fil-card, .ps-band.in-view .ps-fam-card, .ps-band.in-view .ps-proc__item { opacity: 1; transform: none; }
.ps-band.in-view .ps-fil-card:nth-child(2), .ps-band.in-view .ps-fam-card:nth-child(2), .ps-band.in-view .ps-proc__item:nth-child(2) { transition-delay: .08s; }
.ps-band.in-view .ps-fil-card:nth-child(3), .ps-band.in-view .ps-fam-card:nth-child(3), .ps-band.in-view .ps-proc__item:nth-child(3) { transition-delay: .16s; }
.ps-band.in-view .ps-fil-card:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .ps-band .ps-fil-card, .ps-band .ps-fam-card, .ps-band .ps-proc__item { opacity: 1; transform: none; transition: none; }
  .ps-hero__media img { transform: none; }
}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 1024px) {
  .ps-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .ps-hero__media { justify-self: center; order: -1; max-width: 460px; }
  .ps-hero__media img { transform: none; max-width: 100%; }
  .ps-proc__grid { grid-template-columns: 1fr; gap: 40px; }
  .ps-case__grid { grid-template-columns: 1fr; gap: 24px; }
  .ps-filiera__grid { grid-template-columns: repeat(2, 1fr); }
  .ps-fam__grid { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 560px) {
  .ps-hero__h1 { font-size: clamp(34px, 11vw, 52px); }
  .ps-filiera__grid { grid-template-columns: 1fr; }
  .ps-fil-card { min-height: 0; }
  .ps-arch__grid { grid-template-columns: 1fr; gap: 14px; }
  .ps-btn, .ps-btn--ghost { width: 100%; justify-content: center; }
  .ps-hero__cta { width: 100%; }
}
/* PAUSA SPUNTINO redesign — end */

/* ═══ COHERENCE PASS 2026-07-16 · sezione centrata=tutto centrato / sinistra=tutto sinistra + bug fix ═══ */
/* Banner CTA (base centrata): la sf-pill non deve restare flex-start */
.sp-banner-cta .sf-pill { align-self: center; }
/* Manifesto home su fondo ink: pill in variante dark (vars confermate in tokens.css) */
#manifesto .sf-pill { color: var(--sf-red-glow, #F23D33); background: rgba(242, 61, 51, 0.10); border-color: rgba(242, 61, 51, 0.28); }
/* Magazine: stato attivo filtri — il JS toggla .is-on ma esisteva solo .is-selected */
.chip.is-on { background: var(--fg-primary); color: var(--bg-page); border-color: var(--fg-primary); }
/* Stepper a 4 step (agenti): 4 colonne come #processo home */
@media (min-width: 1000px) {
  .gz-stepper--4 .gz-stepper__list { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ BATCH 2 · rail unico full-bleed — lc sections a edge fluido + mobile port (era solo proto-frame) ═══ */
.lc-hero, .lc-manifesto, .lc-solutions, .lc-others, .lc-banner, .lc-season {
  padding-left: var(--sf-edge, clamp(20px, 5vw, 88px)) !important;
  padding-right: var(--sf-edge, clamp(20px, 5vw, 88px)) !important;
}
.lc-pains__head, .lc-pains__grid, .lc-moments__head, .lc-moments__grid {
  padding-left: var(--sf-edge, clamp(20px, 5vw, 88px)) !important;
  padding-right: var(--sf-edge, clamp(20px, 5vw, 88px)) !important;
}
@media (max-width: 768px) {
  .lc-hero__ctas { flex-direction: column; width: 100%; }
  .lc-hero__ctas a { width: 100%; justify-content: center; }
  .lc-banner__cta { display: inline-flex; width: 100%; justify-content: center; }
}

/* pill su banda rossa (Fest card, lc-banner) — leggibile su --sf-red */
.sf-pill--onred { color: var(--sf-white); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.34); }
.sf-pill--onred::before { background: var(--sf-white); }

/* crumb scroller: fade sul bordo destro invece del taglio netto (mobile) */
@media (max-width: 768px) {
  .pdp-breadcrumb ol, .lc-crumb {
    /* #000 qui e' il canale alfa della maschera, non un colore di palette */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

/* ═══════════ LANGUAGE SWITCHER (visibile solo con >1 lingua pubblicata) ═══════════ */
.hdr__lang{ display:flex; align-items:center; gap:6px; margin-right:14px; }
.hdr__lang-btn{ background:none; border:0; padding:2px 1px; cursor:pointer; font-family:var(--font-body); font-size:11.5px; font-weight:500; letter-spacing:0.09em; color:var(--sf-stone-600); transition:color 140ms cubic-bezier(0.2,0,0,1); }
.hdr__lang-btn:hover{ color:var(--sf-black); }
.hdr__lang-btn.is-on{ color:var(--sf-black); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; text-decoration-color:var(--sf-red); }
.hdr__lang-sep{ color:var(--sf-stone-300); font-size:11px; }
.hdr-drawer__lang{ display:flex; align-items:center; gap:8px; padding:14px 0 2px; border-top:1px solid var(--sf-stone-300); margin-top:14px; }
@media (max-width: 900px){ .hdr__lang{ display:none; } }

/* ── Pagina Azienda · le persone ──────────────────────────────────────────── */
/* Nessun tetto: il blocco usa tutta la larghezza del contenitore, come ogni
   altra sezione. Il tetto a 1120px lasciava 440px vuoti a destra e il filetto
   fra un agente e l'altro finiva prima del bordo della pagina (segnalato il
   09/09). La misura di lettura la da' gia' la colonna del testo, che divide
   lo spazio col ritratto. */
.az-agenti { max-width: none; margin: 0; }
.az-agenti__head { margin-bottom: 44px; }
.az-agenti__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 18px 0 14px;
}
/* niente tetto: il sommario di sezione usa la larghezza del contenitore, come
   il filetto e le righe agente sotto di lui. Con 60ch si fermava 782px prima
   del bordo e la sezione sembrava rientrata (segnalato il 09/09). */
.az-agenti__sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--sf-stone-600);
  margin: 0;
}
.az-agenti__list { list-style: none; margin: 0; padding: 0; }
/* Ritratti: da cerchietto 132px a quadrato grande (08/09/2026).
   Il difetto non era il bianco e nero — quella e' una scelta registrata in
   SESSION-HANDOFF ed e' cio' che unifica cinque scatti fatti col telefono in
   giorni e luci diverse. Il difetto era la SCALA: accanto a quattro paragrafi
   un tondo da 132px legge come decorazione invece che come persona.
   Quadrato e non 4:5 perche' la sorgente e' 480x480 gia' stretta sul volto:
   un ritaglio ulteriore rischiava di tagliare orecchie e capelli. */
.az-agente {
  display: grid;
  grid-template-columns: clamp(168px,19vw,232px) minmax(0,1fr);
  grid-template-areas: "ph id" "ph body";
  align-items: start;
  gap: 10px clamp(26px,3.4vw,52px);
  padding: clamp(34px,4vw,52px) 0;
  border-top: 1px solid var(--border-soft);
}
.az-agente__ph   { grid-area: ph; }
.az-agente__id   { grid-area: id; }
.az-agente__body { grid-area: body; }
.az-agente:last-child { border-bottom: 1px solid var(--border-soft); }
.az-agente__ph {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  object-fit: cover;
  background: var(--sf-off-white);
  box-shadow: 0 0 0 1px var(--border-soft) inset;
}
.az-agente__body { min-width: 0; }
.az-agente__id { min-width: 0; padding-top: 4px; }
.az-agente__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px,2vw,28px);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.az-agente__role {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--sf-red-ink);
  margin: -4px 0 12px;
}
.az-agente__bio {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sf-stone-600);
  margin: 0 0 12px;
}
.az-agente__bio:last-child { margin-bottom: 0; }
@media (max-width: 680px) {
  /* La foto affianca NOME e RUOLO, e la bio passa sotto a piena larghezza.
     Prima il ritratto stava da solo sopra al testo con un tetto di 200px:
     lasciava una fascia vuota alla sua destra che sembrava un margine sbagliato
     (segnalato l'08/09 su un provino a 433px). */
  .az-agente {
    grid-template-columns: clamp(104px,30vw,136px) minmax(0,1fr);
    grid-template-areas: "ph id" "body body";
    gap: 14px 18px;
    align-items: center;
  }
  .az-agente__ph { max-width: none; }
  .az-agente__id { padding-top: 0; }
  .az-agente__name { font-size: clamp(19px,5.2vw,23px); }
}

/* ════════════════════════════════════════════════════════════════════
   HOME · SOLUZIONI ESCLUSIVE — griglia schede marchio (04/08)
   Ha sostituito le sei card full-width alternate (.card-solution-v2, rimossa il 04/08).
   ════════════════════════════════════════════════════════════════════ */
.sp-esc__head { max-width: 74ch; margin-bottom: clamp(28px, 3.4vw, 46px); }
.sp-esc__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.5vw, 50px); letter-spacing: -0.025em; line-height: 1.04;
  margin: 18px 0 14px; color: var(--sf-black);
}
.sp-esc__sub {
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.6;
  color: var(--sf-stone-600); max-width: 62ch; margin: 0;
}

.sp-esc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .sp-esc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .sp-esc__grid { grid-template-columns: 1fr; gap: 16px; } }

.sp-esc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: var(--sf-cream-100);
  border: 1px solid rgba(14, 14, 14, 0.07);
  text-decoration: none; color: inherit;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease;
}
.sp-esc:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -30px rgba(14, 14, 14, 0.45); }
.sp-esc:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 3px; }

/* palco: il prodotto appoggia su un piano, non galleggia */
.sp-esc__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; }
.sp-esc__stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 14, 14, 0.055), transparent);
}
.sp-esc__visual { position: absolute; inset: 0; display: grid; place-items: center; }
.sp-esc__shadow {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%) scaleX(1);
  width: 56%; height: 9%; z-index: 0; filter: blur(4px);
  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 0.32), rgba(14, 14, 14, 0) 70%);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
/* l'allargamento va in scaleX, non in width: animare width paga layout a ogni frame */
.sp-esc:hover .sp-esc__shadow { transform: translateX(-50%) scaleX(1.13); opacity: 0.82; }

.sp-esc.is-cutout .sp-esc__img {
  position: relative; z-index: 1; width: var(--iw, 62%); height: auto; object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(14, 14, 14, 0.18));
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sp-esc.is-cutout:hover .sp-esc__img { transform: translateY(-5px) scale(1.03); }

/* foto editoriale: incorniciata, non scontornata — lo styling è il valore */
.sp-esc.is-photo .sp-esc__visual { inset: 16px 16px 0; }
.sp-esc.is-photo .sp-esc__img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sp-esc.is-photo:hover .sp-esc__img { transform: scale(1.035); }
.sp-esc.is-photo .sp-esc__stage::after { display: none; }
/* Il numero nasce grigio su crema (rgba 0.13): sulle foto servite del 02/09
   spariva. In modalita' foto diventa chiaro, con un velo sotto che lo tiene
   leggibile anche sulle immagini piu' chiare. */
.sp-esc.is-photo .sp-esc__num {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 12px rgba(14, 14, 14, 0.55);
}

.sp-esc__num {
  position: absolute; top: 14px; left: 18px; z-index: 2;
  font-family: var(--font-display); font-weight: 300; font-size: 46px; line-height: 1;
  letter-spacing: -0.04em; color: rgba(14, 14, 14, 0.13); font-variant-numeric: tabular-nums;
}
.sp-esc__brand {
  position: absolute; top: 15px; right: 15px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(14, 14, 14, 0.08);
  font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--sf-stone-600);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.sp-esc__body { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sp-esc__line {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--sf-red-ink);
}
.sp-esc__claim {
  font-family: var(--font-display); font-weight: 400; font-size: 21px;
  line-height: 1.18; letter-spacing: -0.015em; color: var(--sf-black);
}
.sp-esc__text {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--sf-stone-600);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-esc__meta { font-family: var(--font-body); font-size: 12.5px; color: var(--sf-stone-600); }
.sp-esc__cta {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--sf-black);
}
.sp-esc__cta svg { transition: transform 0.22s ease; }
.sp-esc:hover .sp-esc__cta svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .sp-esc, .sp-esc__img, .sp-esc__shadow, .sp-esc__cta svg { transition: none; }
  .sp-esc:hover { transform: none; }
  .sp-esc:hover .sp-esc__img { transform: none; }
}

/* Card soluzione, modalita' SCENA (UAT-08, 02/09). La regola base in system.css
   e' tarata sugli scontorni: contain + multiply su crema serve a far sparire il
   bianco del packshot. Una foto di scena passata li' dentro esce fangosa e
   incorniciata. Qui riempie il riquadro e il blend torna normale. */
.card-solution__media--scena {
  background-size: cover !important;
  background-blend-mode: normal !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CATALOGO · esploratore a faccette          (04/09/2026)
   Barra laterale persistente su desktop, livello a se' su mobile.
   Colori solo da token: qui non entra nessun hex nuovo.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-hero__h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 64px); line-height: 1.03;
  letter-spacing: -0.025em; margin: 0 0 22px; max-width: 20ch;
}
.cx-hero__sub {
  font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55; color: var(--sf-stone-600); max-width: 62ch; margin: 0;
}

.cx__wrap {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px); align-items: start;
}
.cx__opener { display: none; }

/* ── barra laterale ── */
.cx__side { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 4px; }
.cx__side-head, .cx__side-foot { display: none; }

.cx__search { position: relative; margin-bottom: 22px; }
.cx__search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--sf-stone-400); display: inline-flex; pointer-events: none; }
.cx__search input {
  width: 100%; padding: 11px 14px 11px 38px; font-family: var(--font-body); font-size: 14px;
  color: var(--sf-black); background: var(--sf-white);
  border: 1px solid var(--border-soft); border-radius: var(--radius-pill);
}
.cx__search input::placeholder { color: var(--sf-stone-400); }
.cx__search input:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 1px; border-color: transparent; }

.cx-f { border: 0; padding: 0; margin: 0 0 26px; }
.cx-f__lab {
  font-family: var(--font-body); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--sf-stone-600); font-weight: 600;
  padding: 0 0 10px; margin: 0; border-bottom: 1px solid var(--border-soft); width: 100%;
}
.cx-f__o {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  font-family: var(--font-body); font-size: 14px; color: var(--sf-black); cursor: pointer;
}
.cx-f__o input { accent-color: var(--sf-red); width: 15px; height: 15px; flex: none; cursor: pointer; margin: 0; }
.cx-f__o:hover .cx-f__t { color: var(--sf-red-ink); }
.cx-f__t { flex: 1; min-width: 0; }
.cx-f__n { font-size: 12px; color: var(--sf-stone-600); font-variant-numeric: tabular-nums; }
.cx-f__o.is-off { color: var(--sf-stone-400); cursor: default; }
.cx-f__o.is-off:hover .cx-f__t { color: var(--sf-stone-400); }
.cx-f__o input:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 2px; }
.cx-f__nota { font-family: var(--font-body); font-size: 11.5px; line-height: 1.5; color: var(--sf-stone-600); margin: 8px 0 0; }

/* ── barra risultati ── */
.cx__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 18px;
}
.cx__count { font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.01em; color: var(--sf-black); margin: 0; }
.cx__sort { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 13px; color: var(--sf-stone-600); }
.cx__sort select {
  font-family: var(--font-body); font-size: 13px; color: var(--sf-black);
  background: var(--sf-white); border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); padding: 7px 12px; cursor: pointer;
}
.cx__sort select:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 1px; }

/* ── chip dei filtri attivi ── */
.cx__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cx-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-family: var(--font-body); font-size: 13px; color: var(--sf-black);
  background: var(--sf-off-white); border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.cx-chip:hover { border-color: var(--sf-black); }
.cx-chip:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 2px; }
.cx-chip__g { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--sf-stone-600); }
.cx-chip__x { font-size: 15px; line-height: 1; color: var(--sf-stone-600); }
.cx-chip--all { background: transparent; border-color: transparent; color: var(--sf-red-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cx-chip--all:hover { border-color: transparent; color: var(--sf-red-hover); }

/* ── griglia ── */
.cx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.cx-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--sf-white); border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.cx-card:hover { transform: translateY(-3px); border-color: var(--sf-stone-400); box-shadow: 0 18px 34px -24px rgba(14, 14, 14, .3); }
.cx-card:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 2px; }
/* Due famiglie di foto, un solo fondo.
   Misurate il 04/09: 199 scontorni su bianco e 113 scene fotografiche.
   Lo scontorno si vede INTERO sul bianco da cui nasce, con un po' di respiro:
   il `cover` gli tagliava i bordi, e sul Giant Burger Bun si vedeva. La scena
   riempie il riquadro, perche' e' una fotografia.
   Il fondo resta il BIANCO che le foto hanno gia' dentro, non una crema
   aggiunta: cosi' fra scontorno e scena non c'e' uno stacco di colore. */
.cx-card__media { aspect-ratio: 4 / 3; background: var(--sf-white); overflow: hidden; }
.cx-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-card__media--scontorno img { object-fit: contain; padding: 8%; }
.cx-card__ph { display: block; width: 100%; height: 100%; background: var(--sf-cream-100); }
.cx-card__body { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 4px; }
.cx-card__line { font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--sf-stone-600); }
.cx-card__t { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; line-height: 1.25; color: var(--sf-black); }

/* Il pulsante "mostra altri" non riceveva gli stili base di .btn: qualcosa
   nella cascata li vinceva e usciva come testo nudo. Qui e' scritto esplicito,
   e questo blocco e' l'ultimo del foglio. */
.cx__more { display: flex; justify-content: center; margin-top: 34px; }
.cx__more .btn {
  padding: 13px 26px; border: 1px solid var(--sf-black); border-radius: var(--radius-md);
  background: transparent; color: var(--sf-black);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.cx__more .btn:hover { background: var(--sf-black); color: var(--sf-off-white); }
.cx__more .btn:focus-visible { outline: 2px solid var(--sf-red); outline-offset: 2px; }

/* ── zero risultati: si esce col contatto, non con una griglia vuota ── */
.cx__empty { padding: 56px 0 24px; max-width: 46ch; }
.cx__empty-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.015em; margin: 0 0 10px; color: var(--sf-black); }
.cx__empty-p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--sf-stone-600); margin: 0 0 22px; }
.cx__empty-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.cx__scrim { display: none; }

/* ── mobile: il pannello e' un livello a se' ── */
@media (max-width: 900px) {
  /* il margine orizzontale NON si tocca qui: fissarlo a --container-pad-mobile
     (20px) teneva l'esploratore a 20 fino a 900px mentre ogni altra sezione
     seguiva clamp(20px, 5vw, 88px) — a 900px erano 25px di scarto, visibili.
     Questa media query serve al pannello dei filtri, non al margine. */
  .cx__wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Il pillolo dei filtri: `justify-self: start` perche' un elemento di griglia
     per difetto si stira su tutta la colonna, e in cima alla griglia diventava
     una fascia nera larga quanto lo schermo che copriva una card intera.
     L'ombra serve a farlo leggere come sospeso sopra il contenuto che scorre. */
  .cx__opener {
    display: inline-flex; align-items: center; gap: 9px; justify-self: start;
    position: sticky; top: 74px; z-index: 6;
    padding: 11px 18px; margin-bottom: 16px; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--sf-white);
    background: var(--sf-black); border: 0; border-radius: var(--radius-pill);
    box-shadow: 0 10px 24px -12px rgba(14, 14, 14, .55);
  }
  .cx__opener-n { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--sf-red); font-size: 11.5px; }
  .cx__side {
    position: fixed; inset: auto 0 0 0; top: 0; z-index: 60;
    display: flex; flex-direction: column; max-height: none; height: 100dvh;
    background: var(--sf-white); padding: 0; overflow: hidden;
    transform: translateY(100%); transition: transform var(--dur-slow) var(--ease-standard);
  }
  .cx.is-open .cx__side { transform: translateY(0); }
  .cx__side-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--container-pad-mobile); border-bottom: 1px solid var(--border-soft); flex: none; }
  .cx__side-title { font-family: var(--font-display); font-weight: 500; font-size: 19px; }
  .cx__side-close { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--sf-black); display: inline-flex; }
  .cx__search { margin: 18px var(--container-pad-mobile); }
  .cx__side [data-cx-facets] { flex: 1; overflow-y: auto; padding: 0 var(--container-pad-mobile) 12px; -webkit-overflow-scrolling: touch; }
  .cx__side-foot { display: block; flex: none; padding: 14px var(--container-pad-mobile) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-soft); }
  .cx__apply { width: 100%; justify-content: center; }
  .cx__scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(14, 14, 14, .45); }
  .cx__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cx__bar { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-card, .cx-chip, .cx__side { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GRIGLIA SENZA ORFANI                                        (04/09/2026)
   Le colonne arrivano da --gz-cols, calcolato dal numero di elementi con
   snippets/griglia-colonne.liquid, non da auto-fill sulla larghezza.
   auto-fill non sa quanti elementi ci sono: con sei card in cinque colonne
   la sesta restava sola su una riga vuota.
   ═══════════════════════════════════════════════════════════════════════ */
.gz-grid {
  display: grid;
  gap: var(--gz-gap, 20px);
  grid-template-columns: repeat(var(--gz-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1180px) { .gz-grid { grid-template-columns: repeat(var(--gz-cols-md, 3), minmax(0, 1fr)); } }
@media (max-width: 860px)  { .gz-grid { grid-template-columns: repeat(var(--gz-cols-sm, 2), minmax(0, 1fr)); } }
@media (max-width: 560px)  { .gz-grid { grid-template-columns: repeat(var(--gz-cols-xs, 1), minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════════════
   MAGAZINE · articolo                                        (04/09/2026)
   Il cliente ha bocciato l'articolo il 03/09. L'impianto vecchio era il
   predefinito: foto muta a tutta pagina, titolo centrato sotto, corpo a
   bandiera — tre allineamenti diversi in mezza schermata, e in mezzo al pezzo
   una fascia crema con quattro numeri grandi che lo trasformava in una landing.

   Il nuovo impianto viene dall'ordine che usano davvero Il Post e
   Internazionale, letto sulle loro pagine: occhiello, titolo, firma, poi la
   foto con didascalia. Un asse solo, a sinistra. Le figure escono dalla misura
   del testo, il testo no.

   Misura: 66 caratteri e' l'ottimo di leggibilita' (WCAG 1.4.8 mette il tetto
   a 80). Qui `ch` e' calcolato su Geist, quindi il valore e' tarato a occhio
   sul font vero e non copiato da una tabella.
   ═══════════════════════════════════════════════════════════════════════ */
.mag {
  --mag-misura: 66ch;
  --mag-larga: 1080px;
  max-width: var(--mag-misura);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-mobile);
  padding-right: var(--container-pad-mobile);
}
.mag__apertura { padding-top: clamp(48px, 7vh, 88px); }
.mag__occhiello {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--sf-red-ink); margin: 0 0 18px;
}
.mag__titolo {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.025em;
  color: var(--sf-black); margin: 0 0 20px; text-wrap: balance;
}
/* Catenaccio: la riga che dice di cosa si parla, fra titolo e firma.
   Piu' grande del corpo e in grigio, come in Substack e Obvious. */
.mag__sommario {
  font-family: var(--font-body); font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5; color: var(--sf-stone-600); margin: 0 0 20px; max-width: 58ch;
}
/* La firma chiude la testata con un filetto, che la separa dal corpo senza
   aggiungere decorazione. */
.mag__firma {
  font-family: var(--font-body); font-size: 13.5px; color: var(--sf-stone-600);
  margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft);
}

/* Figure — escono dalla colonna di testo, restano dentro la pagina */
.mag__figura { margin: 34px 0 0; }
.mag__figura--larga { margin-top: 30px; }
.mag__foto {
  aspect-ratio: 16 / 9; background-size: cover; background-position: center;
  background-color: var(--sf-cream-100); border-radius: 3px;
}
.mag__figura--larga .mag__foto { aspect-ratio: 3 / 2; }
.mag__didascalia {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  color: var(--sf-stone-600); margin: 10px 0 0;
  padding-top: 9px; border-top: 1px solid var(--border-soft);
}

/* Corpo */
.mag__corpo { padding-top: 38px; padding-bottom: 8px; }
/* Lo stacco sta QUI, sulla regola dei paragrafi, non su un `> * + *`.
   `.mag__corpo p` vale (0,1,1) e `.mag__corpo > * + *` vale (0,1,0): la prima
   vince sempre, e spostarla nel file non serve a niente perche' l'ordine decide
   solo a parita' di peso. Riscrivere il selettore come `> * + p` arriva a un
   pareggio, non a una vittoria: combinatori e `*` non pesano. Risultato: i
   paragrafi restavano a margine zero e si leggevano come un blocco unico.
   34px supera l'interlinea (17px x 1.68 = 28,5px), quindi lo stacco si vede. */
.mag__corpo p {
  font-family: var(--font-body); font-size: 17px; line-height: 1.68;
  color: var(--sf-black); margin: 34px 0 0; text-wrap: pretty;
}
.mag__corpo > p:first-child { margin-top: 0; }
.mag__corpo h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; letter-spacing: -.018em;
  margin: 44px 0 0; color: var(--sf-black);
}
/* Per gli altri blocchi: citazione, figura e nota hanno gia' un margine proprio,
   questa e' solo la rete di sicurezza. */
.mag__corpo > * + * { margin-top: 34px; }

/* Citazione — filetto rosso a sinistra, non un virgolettone disegnato.
   Il glifo grande in rosso era la decorazione piu' vistosa della pagina. */
.mag__citazione {
  margin: 38px 0 0; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--sf-red);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.3vw, 26px); line-height: 1.3; letter-spacing: -.015em;
  color: var(--sf-black);
}

/* Nota a margine */
/* Nota a margine: chiusa da due filetti, altrimenti il testo che segue le
   si attacca sotto e la nota sembra l'inizio di un capitolo nuovo. */
.mag__nota {
  margin: 38px 0 0; padding: 20px 0 22px;
  border-top: 1px solid var(--sf-black);
  border-bottom: 1px solid var(--border-soft);
}
.mag__nota-k {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--sf-stone-600); margin: 0 0 8px;
}
.mag__nota-t {
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.6;
  color: var(--sf-black); margin: 0;
}

/* Dati — tabellina, non fascia marketing */
.mag__dati {
  margin: 44px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--sf-black);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px;
}
.mag__dato { display: flex; flex-direction: column; gap: 6px; }
.mag__dato-l {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1.4;
  color: var(--sf-stone-600); margin: 0;
}
.mag__dato-v {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2vw, 25px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--sf-black); margin: 0;
}

/* La voce dell'agente */
/* Il padding in fondo NON e' decorativo: senza, l'attribuzione dell'agente
   toccava il banner CTA a tutta larghezza. Stacco misurato: 0px. */
.mag__voce { margin: 52px 0 0; padding: 26px 0 clamp(48px, 6vh, 80px); border-top: 1px solid var(--border-soft); }
.mag__voce-occhiello {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--sf-red-ink); margin: 0 0 14px;
}
.mag__voce-q {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.35; letter-spacing: -.015em;
  color: var(--sf-black); margin: 0 0 14px;
}
.mag__voce-attrib { font-family: var(--font-body); font-size: 13px; color: var(--sf-stone-600); margin: 0; }

@media (min-width: 1024px) {
  .mag { padding-left: 0; padding-right: 0; }
  /* UN SOLO ASSE nel corpo dell'articolo.
     Le figure inline seguono la colonna di testo. Prima uscivano a 1080px
     mentre il testo stava a 700: due bordi sinistri diversi a 190px l'uno
     dall'altro, e la didascalia allineata alla foto finiva staccata dal testo
     a cui si riferisce. Il fuori-misura resta solo alla figura d'APERTURA,
     che sta prima del corpo e quindi non compete con nessun altro asse.
     E' anche quello che fanno le reference lette: in Substack e nel Post
     l'immagine dentro il pezzo e' larga quanto la colonna. */
  .mag__figura--larga {
    width: min(var(--mag-larga), calc(100vw - 2 * var(--sf-edge)));
    margin-left: calc(50% - min(var(--mag-larga), calc(100vw - 2 * var(--sf-edge))) / 2);
  }
  .mag__dati { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La testata dei correlati sta sull'asse dell'articolo, non centrata:
   il resto della pagina e' tutto allineato a sinistra. */
.mag ~ .home-mag .home-mag__head,
.magazine-article-section .home-mag__head {
  text-align: left;
  align-items: flex-start;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   CITAZIONE DI CHIUSURA · accensione allo scroll            (04/09/2026)
   Richiesta del cliente: la sezione finale della home era «solo un
   mappazzone di testo». Ora le parole si accendono mentre la sezione sale.

   L'unica proprieta' animata e' l'opacita', e non c'e' nessuna transizione:
   il valore e' calcolato, quindi segue lo scroll invece di inseguirlo.
   --p (avanzamento 0→1) lo scrive il JS della sezione; --i e --n vengono dal
   markup. Il fronte di accensione e' largo circa quattro parole.

   Stato di riposo: `var(--p, 1)` vale 1 se nessuno scrive la variabile, quindi
   senza JS e con prefers-reduced-motion il testo e' interamente leggibile.
   ═══════════════════════════════════════════════════════════════════════ */
.sp-cita__w {
  opacity: clamp(0.22, calc((var(--p, 1) * (var(--n) + 6) - var(--i)) / 4), 1);
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .sp-cita__w { opacity: 1; will-change: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTRASTO · correzioni del 04/09                    (qa_difetti_visibili)
   --sf-stone-400 (#A29B8E) da' 2,76:1 su bianco: sotto la soglia AA di 4,5
   per il testo piccolo. Il token stesso lo dice, e' "placeholder, icone
   disabled", non un colore da testo. Dove porta informazione va --sf-stone-600.
   I separatori puramente decorativi (il "/" fra IT ed EN, il "›" delle
   briciole, i punti mediani) restano dove sono: non portano contenuto, e
   alzarli li farebbe leggere come testo.
   ═══════════════════════════════════════════════════════════════════════ */
.lc-season__month { color: var(--sf-stone-600); }
.lc-season__val { color: var(--sf-stone-600); }
.lc-season__col--peak .lc-season__val { color: var(--sf-red-ink); }
.pm-alg__fonte { color: var(--sf-stone-600); }
/* Stessa sezione, stesso fondo scuro caldo: la pill usava --sf-red-glow,
   tarato su --sf-black, e su #2E2A24 scendeva a 3,73. */
.ps-band--warmink .sf-pill { color: var(--sf-red2-txt); }
/* Il grafico di stagionalita' ha una seconda struttura per mobile
   (`__row-month` / `__row-val`) che la correzione sulla variante desktop non
   toccava: stesso difetto, stesso colore, altro selettore. Trovato solo
   misurando a 390px, perche' a 1440 quel markup non e' a schermo. */
.lc-season__row-month { color: var(--sf-stone-600); }
.lc-season__row-val { color: var(--sf-stone-600); }
.lc-season__row--peak .lc-season__row-val,
.lc-season__col--peak .lc-season__row-val { color: var(--sf-red-ink); }
/* 4,50 su 4,5 e' un pareggio che dipende dall'arrotondamento: --sf-red-ink lo
   porta a 5,9 e toglie il dubbio. */
.ps-fil-card__num { color: var(--sf-red-ink); }

/* La pill dentro i due blocchi centrati delle pagine cluster.
   La regola base `.sf-pill` porta `align-self: flex-start`, che e' giusta per
   le testate di sezione a bandiera (la stragrande maggioranza) ma dentro un
   flex column con `align-items: center` incolla la pill al bordo sinistro
   mentre titolo, testo e bottoni restano centrati. Sul manifesto lo scarto
   era di 276px. Vale su tutte e sette le pagine cluster. */
.lc-banner__wrap .sf-pill,
.lc-manifesto__wrap .sf-pill { align-self: center; }

/* ══════════════════════════════════════════════════════════════════════════
   AZIENDA — impianto editoriale (08/09/2026)

   Perche': la pagina era un muro di testo con la meta' destra vuota, e la
   timeline era la verticale con linea e pallini — lo stesso impianto di Wise,
   PayPal e Apollo, cioe' il default. Riferimento scelto con l'utente: Buro
   (mobbin.com/sites/sections/bcad6cf8-5eb5-4590-bb1f-b8f4d4ecfb88), dove la
   cronologia e' una SPINA orizzontale e gli anni sono il grafismo, non una
   didascalia. Non serve fotografia: e' l'unica direzione praticabile, perche'
   dell'azienda non esiste una sola foto (censito su Drive l'08/09: solo video
   sopra il limite di scarico, e i ritratti agenti).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: masthead asimmetrico ─────────────────────────────────────────── */
/* il ritmo verticale NON si scrive qui: lo impone il tier del tema
   (.sp-about-hero → clamp(40px,7vw,88px) con !important, blocco "Hero tier").
   Scrivendolo a mano questa hero usciva a 140px mentre tutte le altre stanno
   a 88, ed e' cosi' che la pagina si e' scomposta. Qui resta solo l'orizzontale
   e il fondo. */
.az-hero { padding-left: var(--container-pad-desktop); padding-right: var(--container-pad-desktop); background: var(--sf-off-white); }
.az-hero__in { max-width: var(--container-max); margin: 0 auto; }
/* 84px con misura a 17ch mandava il titolo a CINQUE righe e lasciava 300px di
   vuoto sotto la colonna destra: il titolo schiacciava tutto il resto. La misura
   la da' gia' la colonna, quindi niente max-width, e il corpo torna vicino
   all'originale (era 72px) — il rapporto con gli h2 di sezione (44px) resta
   di circa 1,5. */
.az-hero__h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px,4.9vw,68px);
  line-height: 1.02; letter-spacing: -0.028em;
  color: var(--sf-black);
  margin: 16px 0 0;
}
/* il sottotitolo scende a destra sotto un filetto: riempie la meta' che prima
   restava vuota e da' alla testata due assi invece di uno */
.az-hero__split { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(28px,4vw,80px); align-items: start; }
.az-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(16px,1.25vw,18px); line-height: 1.6;
  color: var(--sf-stone-600);
  border-top: 1px solid var(--sf-stone-300);
  padding-top: 20px; margin: 0;
}
@media (max-width: 860px) {
  .az-hero__split { grid-template-columns: 1fr; gap: 26px; }
  .az-hero__h1 { max-width: none; }
}

/* ── In cifre: cifra e parola su due righe ──────────────────────────────── */
/* il valore era una stringa sola ("312 referenze") e a 4 colonne andava a capo
   solo quello: le etichette sotto finivano a quote diverse e la riga usciva a
   bandiera. Separando cifra e parola le quattro voci hanno la stessa forma. */
.az-cifra__n {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px,4.6vw,64px); line-height: 0.9;
  letter-spacing: -0.03em; color: var(--sf-black);
  font-variant-numeric: lining-nums tabular-nums;
}
.az-cifra__u {
  display: block;
  font-family: var(--font-body); font-size: clamp(14px,1.05vw,16px);
  line-height: 1.3; color: var(--sf-black);
  margin-top: 6px;
}
/* la didascalia riempie la sua cella: con 24ch si fermava 134px prima e le
   quattro colonne uscivano a bandiera */
.az-cifra__l {
  font-family: var(--font-body); font-size: 13px; line-height: 1.45;
  color: var(--sf-stone-600); margin: 10px 0 0;
}
@media (max-width: 560px) {
  /* a due colonne strette il numero va rimpicciolito, altrimenti "312" e
     "divisioni" arrivano al bordo della cella */
  .az-cifra__n { font-size: 36px; }
  .az-cifra__u { font-size: 14px; }
  .az-cifra__l { font-size: 12.5px; max-width: none; }
}

/* ── La storia: spina orizzontale ───────────────────────────────────────── */
/* nessun padding: lo porta .sp-section (verticale clamp(24px,5vw,64px) e
   orizzontale var(--sf-edge), entrambi !important). Prima qui c'erano 116px
   contro i 64 di ogni altra sezione. */
/* lo stacco fra testata e spina non e' decorativo: sotto ci sono gli anni in
   corpo grande, e senza respiro l'occhio legge h2 e anno come un blocco solo */
.az-storia__head { max-width: var(--container-max); margin: 0 auto clamp(34px,4.4vw,58px); }
.az-storia__h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px,3.4vw,44px); letter-spacing: -0.02em;
  margin: 8px 0 0; color: var(--sf-black);
}
.az-spina { max-width: var(--container-max); margin: 0 auto; }
.az-spina__track {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--az-tappe,4), minmax(0,1fr));
}
/* lo stacco fra colonne e' un padding sulla tappa, ma il filetto deve
   attraversarlo: senza il margine negativo la spina esce spezzata in quattro
   segmenti e smette di leggersi come un asse unico (visto in provino l'08/09) */
.az-tappa { --az-gap: clamp(20px,2.4vw,40px); padding-right: var(--az-gap); }
.az-tappa:last-child { padding-right: 0; }
.az-tappa__anno {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  /* 92px erano piu' dell'H1 della pagina (68px): un dato dentro una sezione
     non puo' sovrastare il titolo della pagina. Ora la scala e' h1 68 >
     anno 64 > h2 di sezione 44. */
  font-size: clamp(40px,4.6vw,64px); line-height: 0.86;
  letter-spacing: -0.035em; color: var(--sf-black);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 clamp(14px,1.6vw,22px);
}
/* il filetto e' un bordo della riga, non un elemento assoluto: cosi' scorre
   insieme alle tappe quando su mobile la spina diventa scorrevole */
.az-tappa__rail {
  display: block; position: relative;
  border-top: 1px solid var(--sf-stone-300);
  margin-right: calc(-1 * var(--az-gap));
  margin-bottom: clamp(16px,1.8vw,24px);
}
.az-tappa:last-child .az-tappa__rail { margin-right: 0; }
.az-tappa__rail::before {
  content: ""; position: absolute; left: 0; top: -4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sf-red);
}
.az-tappa__t {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px,1.35vw,20px); line-height: 1.25;
  letter-spacing: -0.012em; color: var(--sf-black); margin: 0 0 8px;
}
.az-tappa__b {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--sf-stone-600); margin: 0;
}
/* accensione a cascata da sinistra: la spina si scrive nel verso della lettura */
.reveal .az-tappa { opacity: 0; transform: translateY(16px); transition: opacity 620ms cubic-bezier(.2,0,0,1), transform 620ms cubic-bezier(.2,0,0,1); }
.reveal.in-view .az-tappa { opacity: 1; transform: none; }
.reveal.in-view .az-tappa:nth-child(1) { transition-delay: 60ms; }
.reveal.in-view .az-tappa:nth-child(2) { transition-delay: 160ms; }
.reveal.in-view .az-tappa:nth-child(3) { transition-delay: 260ms; }
.reveal.in-view .az-tappa:nth-child(4) { transition-delay: 360ms; }
.reveal.in-view .az-tappa:nth-child(5) { transition-delay: 460ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal .az-tappa, .reveal.in-view .az-tappa { opacity: 1; transform: none; transition: none; }
}
/* sotto i 900px quattro colonne non stanno: la spina diventa scorrevole e
   l'ultima tappa resta parzialmente visibile, cosi' si vede che continua */
@media (max-width: 900px) {
  /* la spina esce dal bordo destro per far vedere che continua: annulla il
     padding della sezione solo a destra */
  .az-spina { margin-right: calc(-1 * var(--sf-edge, clamp(20px,5vw,88px))); }
  .az-spina__track {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 10px;
  }
  .az-spina__track::-webkit-scrollbar { display: none; }
  .az-tappa { --az-gap: 22px; flex: 0 0 74%; scroll-snap-align: start; padding-right: var(--az-gap); }
  .az-tappa:last-child { --az-gap: var(--sf-edge, clamp(20px,5vw,88px)); padding-right: var(--az-gap); }
  .az-tappa:last-child .az-tappa__rail { margin-right: 0; }
  .az-tappa__anno { font-size: clamp(48px,13vw,72px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ASSE UNICO — normalizzazione dei contenitori (08/09/2026)

   Il difetto: --container-max vale 1560px, e sotto i ~1736px e' piu' largo
   dello schermo, quindi il suo `margin: 0 auto` non ha spazio da distribuire e
   tutto sembra allineato. Sopra, ogni blocco con una sua max-width si centra
   sulla PROPRIA misura e apre un asse sinistro diverso: misurato a 1920px, la
   home aveva assi a 180, 320 e 600, marchio-pizzella a 88, 180 e 520.

   La regola: un blocco piu' stretto del contenitore si allinea all'ASSE del
   contenitore, non al centro dello schermo. E' la stessa cosa che i documenti
   del progetto dicono gia' per gli articoli — «un asse solo, a sinistra».

   `max(0px, (100% - 1560px) / 2)` vale 0 finche' lo spazio e' minore del
   contenitore (e allora conta il padding della sezione) e cresce solo dopo.

   ⚠️ ESCLUSE per scelta: `.ps-scena` (hero Pausa Spuntino, decisione
   dell'utente l'08/09: la scena e' costruita su quella misura e non si tocca),
   l'overlay di ricerca (e' una finestra modale, il centraggio e' corretto) e
   `.sp-banner-cta` (centrato per progetto su tutto il sito).
   ══════════════════════════════════════════════════════════════════════════ */

/* manifesto home e distribuzione: era 720px centrato → x=600 contro 180 */
.sp-manifesto {
  /* niente tetto: il manifesto usa la larghezza del contenitore. A 720px si
     fermava 1024px prima del bordo (09/09). NB: e' un contenitore flex, non un
     paragrafo, e per questo era sfuggito al primo giro di misure. */
  max-width: none;
  margin-left: max(0px, (100% - var(--container-max, 1560px)) / 2);
  margin-right: 0;
}
/* schede marchio: 880px centrato → x=520 contro 180 */
.marchio-story__wrap,
.marchio-use__wrap {
  margin-left: max(0px, (100% - var(--container-max, 1560px)) / 2);
  margin-right: 0;
}
/* community in home: aveva una max-width di 1280 scritta a mano accanto a
   `.sp-wrap`, che invece usa il token. Due contenitori sullo stesso blocco. */
.sp-community { max-width: var(--container-max, 1560px); }

/* Hero delle pagine marchio: e' a tutta pagina e il testo restava a 88 mentre
   il resto della pagina va a 180.

   Qui la percentuale NON funziona: `.marchio-hero` e' `display: grid` con due
   colonne da 960px, quindi il blocco contenitore del figlio e' la TRACCIA, non
   i 1920px, e `(100% - 1560px)/2` esce negativo e viene azzerato (verificato in
   pagina l'08/09). Mettere il padding sul contenitore di griglia allineerebbe
   il testo ma restringerebbe anche la fotografia da 960 a 870: cambierebbe la
   composizione di una hero gia' approvata. Quindi si misura sul viewport.

   ⚠️ Limite noto: `vw` comprende la barra di scorrimento. Dove la barra occupa
   spazio (Windows con barre classiche) questo asse cade ~8px a sinistra di
   quello delle altre sezioni. Su barre in sovrimpressione e' esatto. E' un
   compromesso accettato: il disallineamento che sostituisce era di 92px. */
.marchio-hero__inner {
  padding-left: max(var(--container-pad-desktop, 80px),
                    calc(50vw - var(--container-max, 1560px) / 2));
}
/* testata "pains" delle pagine cluster: aveva un proprio padding orizzontale
   IN PIU' a quello della sezione, quindi rientrava di 88px */
/* Pagine cluster. La sezione .lc-pains non ha padding proprio: lo mettono la
   testata e la griglia, con !important. Ma quelle hanno ANCHE max-width +
   margin auto, quindi a 1920 sommavano centraggio (92) e padding (88) e
   uscivano a 268, mentre .lc-moments — che il padding ce l'ha ma il
   contenitore no — restava a 88. Il resto della pagina sta a 180.

   Pattern "contenitore con margini esterni": la max-width comprende i due
   margini, cosi' la scatola si centra e il padding resta dentro. A 1920 da'
   (1920-1736)/2 + 88 = 180; a 1440 la scatola e' piu' larga dello schermo,
   il margine e' 0 e resta il solo padding. Serve !important per battere la
   regola del BATCH 2 qui sopra, che ce l'ha. */
.lc-pains__head, .lc-pains__grid, .lc-moments__head, .lc-moments__grid {
  max-width: calc(var(--container-max, 1560px) + 2 * var(--sf-edge, 88px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* .home-mag (articoli correlati in coda al magazine) usava la scala di
   spaziatura per il margine orizzontale — var(--space-7) = 48px fissi — invece
   del margine di sezione. Sulla pagina articolo stava a 48 mentre il resto
   seguiva clamp(20px, 5vw, 88px): a 390px erano 28px di scarto, a 1920 quaranta
   in meno. Il margine orizzontale ha una fonte sola: --sf-edge. (08/09/2026) */
.home-mag {
  padding-left: var(--sf-edge, clamp(20px, 5vw, 88px));
  padding-right: var(--sf-edge, clamp(20px, 5vw, 88px));
}

/* ══════════════════════════════════════════════════════════════════════════
   TESTI A TUTTA MISURA (09/09/2026)

   Richiesta esplicita dell'utente: i testi devono occupare lo spazio della
   pagina, al netto di margini destra e sinistra uguali. Molti corpi e sommari
   avevano un tetto in `ch` che li fermava anche 780px prima del bordo, mentre
   il filetto o la griglia accanto arrivavano in fondo: la sezione sembrava
   rientrata senza motivo.

   Tolto SOLO dai corpi di testo e dai sommari. NON dai titoli display, dove il
   tetto in `ch` decide dove va a capo ed e' una scelta tipografica, non una
   misura di lettura.

   ⚠️ Esclusi: `.ps-*` (Pausa Spuntino, la pagina non si tocca per decisione
   dell'utente) e `.mag*` (l'articolo del magazine ha una colonna a 66ch che e'
   un pattern validato e scritto nei documenti del progetto: una testata non
   manda un articolo lungo a tutta pagina).
   ══════════════════════════════════════════════════════════════════════════ */
.sp-agenti__sub,
.sp-food-cost__sub,
.home-clusters-v3__sub,
.sp-hero__sub,
.cx-hero__sub,
.lc-hero__sub,
.lc-banner__sub,
.sp-esc__sub,
.grazie__sub,
.grazie__step-d,
.marchio-story__body,
.marchio-use__body,
.sp-community__body,
.sp-case__hero-body,
/* la citazione del caso ha un tetto a 68ch su un selettore a due classi, che
   vince su uno solo: va ripetuto con la stessa specificita' */
.sp-case__hero--senza-numero .sp-case__hero-body,
/* teste di sezione e schede marchio: erano ferme a 720-880px mentre la griglia
   accanto arrivava al bordo (misurato il 09/09 a 1920px) */
.sp-case__head,
.sp-esc__head,
.marchio-story__wrap,
.marchio-use__wrap { max-width: none; }