/* ============================================================
 * Amaki B2B — stili del sito business.amaki.ai
 * ----------------------------------------------------------------
 * Il design system e' quello del prodotto: le pagine linkano
 * /amaki/styles.css, e questo file non ne ridichiara nessun token.
 * Tutto cio' che dichiara sta sotto il prefisso riservato --b2b-*,
 * che e' cio' che rende riconoscibile a vista da quale meta' del
 * repository viene un valore. Il gate npm run check:collisions
 * impone la regola nei due versi.
 *
 * ENTRAMBI i linter lo leggono, e questo file e' a zero su tutti e due.
 * `npm run lint:html` (ESLint col plugin css) lo copriva gia': dodici
 * errori al primo passaggio, sistemati. `npm run lint:css` (stylelint,
 * dove stanno amaki/token-allowlist e amaki/no-literal-themeable) NON
 * lo copriva -- le sue glob erano src/, projects/ e public/amaki/ -- e
 * la glob e' stata allargata a public/business/ nello stesso commit che
 * porta questo file. Senza, 258 rilievi sarebbero entrati dietro una CI
 * verde, visti solo dall'hook di pre-commit di chi scrive.
 *
 * I 258: 73 nomi --alias-* portati sui ruoli Mapped, 44 valori letterali
 * portati sui token esatti del design system, 13 colori allineati ai
 * ruoli del prodotto (decisione di Isacco, 2026-10-16), le dimensioni
 * dei glifi spostate da font-size a width/height dove erano geometria, e
 * il blocco .gs circoscritto. Il canarino: una violazione piantata
 * fuori da quel blocco fallisce ancora, dentro no.
 * ============================================================ */

/* ---------- scala tipografica del sito ----------
   Il DS nasce per il prodotto consumer (pochi testi, molto spazio). Per un sito
   B2B denso la scala è ridotta di circa un passo, mantenendo i rapporti:
   a 1280px → h3 56px, h4 40px, h5 29px, h6 22px, body-lg 19px
   (i concorrenti stanno a 48–64 / 36–40 / 18–20). */
:root {
  --b2b-fs-h2:      clamp(3rem,    2.6rem  + 1.9vw,  4.2rem);
  --b2b-fs-h3:      clamp(2.6rem,  2.2rem  + 1.6vw,  3.5rem);
  --b2b-fs-h4:      clamp(2rem,    1.8rem  + 0.9vw,  2.6rem);
  --b2b-fs-h5:      clamp(1.6rem,  1.5rem  + 0.5vw,  1.9rem);
  --b2b-fs-h6:      clamp(1.3rem,  1.25rem + 0.25vw, 1.45rem);
  --b2b-fs-body-lg: clamp(1.125rem, 1.1rem + 0.15vw, 1.25rem);
}

/* ---------- perche' qui non c'e' nessun token del design system ----------
   Questo file dichiarava 33 token: le undici meta' scure dei materiali vetro
   e la riconciliazione D1/D2/D3/D5 verso il DS del prodotto. Tutti e 33 sono
   stati rimossi il 2026-10-16, portando il sito dentro questo repository:
   le pagine linkano /amaki/styles.css, cioe' il DS del prodotto, quindi
   quei valori sono quelli giusti per costruzione e non per copia.

   Misurato prima di cancellare: tutti e 33 i nomi sono dichiarati da
   public/amaki/tokens/, 22 di essi due volte (tema chiaro e tema scuro).
   Anche i due @font-face di DM Sans se ne sono andati: tokens/fonts.css li
   dichiara, sugli stessi file woff2.

   Una seconda dichiarazione di un nome del DS e' esattamente l'incidente del
   6 agosto raccontato nel CLAUDE.md. Il gate check:collisions ora guarda
   anche questa cartella: vedi tools/ds-guardrails/check-token-collisions.mjs.
   ---------------------------------------------------------------- */

/* ---------- crenatura e due passi di corpo che il sito aggiunge ----------
   Il design system ha UN SOLO token di crenatura, --kerning-sm (0.12em), e
   questo sito ne usa otto passi: le sue micro-etichette maiuscole vivono di
   tracking, e la scala per esprimerlo a monte non c'e'. Questo e' un BUCO DEL
   DESIGN SYSTEM, non una sciatteria della pagina, e va chiesto a monte -- qui
   e' nominato sotto il prefisso del sito perche' il gate lo riconosca come roba
   del sito, non perche' sia la sua casa definitiva. --kerning-sm resta in cima
   alla stessa scala: 0.02 → 0.04 → 0.06 → 0.08 → 0.10 → 0.12.

   Stessa cosa per i due corpi piu' piccoli. Il DS si ferma a --fs-caption
   (11px); il sito scende a 10 e a 9. Il 9px e' segnalato: e' sotto quasi ogni
   soglia di leggibilita', e sono due usi soltanto -- vale la pena guardarlo
   invece di dargli un nome e considerarlo risolto.
   ---------------------------------------------------------------- */
:root {
  --b2b-tracking-xs:      0.02em;
  --b2b-tracking-sm:      0.04em;
  --b2b-tracking-md:      0.06em;
  --b2b-tracking-lg:      0.08em;
  --b2b-tracking-xl:      0.1em;
  --b2b-tracking-tight:   -0.01em;
  --b2b-tracking-tighter: -0.02em;
  /* La fila di stelle: stringe i caratteri ★ perche' il font li spazia come
     lettere. E' spaziatura di glifi, non tracking tipografico. */
  --b2b-tracking-stars:   -0.5px;

  --b2b-fs-micro:         10px;
  --b2b-fs-nano:          9px;   /* DA GUARDARE: sotto --fs-caption (11px) */
  --b2b-fs-hero:          clamp(2.4rem, 2.05rem + 1.5vw, 3.25rem);
}

/* ---------- icone ----------
   Le undici icone del sito sono SVG inline presi dal registro dell'app
   (projects/amaki/src/lib/icon/icons.ts, 108 icone su currentColor). Il font
   Hugeicons non attraversa: sono 9,6 MB di due OTF per undici glifi, e
   sarebbe un secondo meccanismo per lo stesso scopo, cioe' la cosa che la
   tabella del CLAUDE.md vieta. La corrispondenza e' stata decisa guardando i
   glifi affiancati, non i nomi.

   Queste due regole sono quanto resta di hugeicons.css: la <i> si comporta
   come si comportava, e il glifo si dimensiona in em, cosi' le due sole
   regole che gli danno un font-size (.prod__link, .prod__meta li.is-date, piu'
   sotto) continuano a funzionare come prima invece di non avere piu' effetto.
   ---------------------------------------------------------------- */
.hgi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.hgi > svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* ---------- reset minimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-comoda);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-headings);
  font-weight: var(--fw-regular);
  line-height: var(--lh-compatta);
  margin: 0;
}
p { margin: 0; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.section { padding-block: var(--space-30); }
.section--tight { padding-block: var(--space-20); }
.stores { padding-block: var(--space-12) var(--space-16); }
.eyebrow {
  font-size: var(--fs-body-sm);
  letter-spacing: var(--kerning-sm);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.lede {
  font-size: var(--b2b-fs-body-lg);
  line-height: var(--lh-comoda);
  color: var(--text-body);
  max-width: var(--measure-md);
}

/* ---------- bottoni (replica del Button del DS: pill a tutte le taglie) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--b2b-fs-body-lg);
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(124deg,
    var(--surface-action) 0%,
    var(--surface-action) 55%,
    var(--surface-low-visibility-action) 100%);
  color: var(--text-on-action);
}
.btn--primary:hover {
  background: linear-gradient(124deg, var(--surface-action-hover) 0%, var(--surface-action) 100%);
}
.btn--ghost {
  background: transparent;
  color: var(--text-headings);
  outline: 1px solid var(--border-primary);
  outline-offset: -1px;
}
.btn--ghost:hover { background: var(--surface-primary-hover); }
.btn--sm { padding: var(--space-3) var(--space-6); font-size: var(--fs-body-md); }
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: 2px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-glass);
  backdrop-filter: blur(var(--blur-lg)) saturate(1.8);
  border-bottom: 1px solid var(--border-primary);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 72px;
}
.nav__logo img { height: 26px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__spacer { margin-left: auto; }
.nav__mobile-cta { display: none; }   /* visibile solo nel pannello mobile */
.nav__link {
  font-size: var(--fs-body-md);
  color: var(--text-headings);
  padding-block: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* il trigger del dropdown è un <button>: va spogliato dello stile di sistema */
  appearance: none;
  background: none;
  border: none;
  padding-inline: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}
.nav__link:focus-visible {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
.nav__link:hover { color: var(--text-action); }

/* dropdown Services */
.nav__item { position: relative; }
.nav__caret {
  font-size: var(--fs-caption);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 0;
  min-width: 320px;
  padding: var(--space-3);
  margin: 0;
  list-style: none;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility var(--dur-base);
}
.nav__item[data-open="true"] .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.nav__menu a:hover { background: var(--surface-primary-hover); }
/* etichetta di gruppo: non è un link, raccoglie le voci che stanno sotto */
.nav__menu li.is-group {
  padding: var(--space-5) var(--space-4) var(--space-2);
  font-size: var(--fs-caption);
  letter-spacing: var(--kerning-sm);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* voci "superficie": stanno dentro l'offerta sopra, non sono acquistabili a sé */
.nav__menu li.is-sub a {
  padding-left: var(--space-10);
  position: relative;
}
.nav__menu li.is-sub a::before {
  content: "";
  position: absolute;
  left: var(--space-6);
  top: 50%;
  width: var(--space-3);
  height: 1px;
  background: var(--border-primary);
}
.nav__menu li.is-sub strong { font-family: var(--font-body); font-size: var(--fs-body-md); }
.nav__menu hr {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--space-3) var(--space-4);
}

.nav__menu strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--text-headings);
  margin-bottom: var(--space-05);
}
.nav__menu span { font-size: var(--fs-body-sm); color: var(--text-tertiary); }

/* ---------- barra annunci sotto la nav ---------- */
.ticker {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-bottom: 1px solid var(--border-inverse);
}
.ticker[hidden] { display: none; }
.ticker .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 42px;
}
.ticker__dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-action);
}
.ticker__items { position: relative; flex: 1; min-height: 1.5em; overflow: hidden; }
.ticker__item {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-body-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
  pointer-events: none;
}
.ticker__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ticker__item span { opacity: 0.85; }
.ticker__item a {
  color: var(--surface-action);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.ticker__item a:hover { color: var(--surface-low-visibility-action); }
.ticker .ph--inline { color: var(--text-action-lowviz); border-bottom-color: var(--border-secondary); }
.ticker__close {
  margin-left: auto;
  flex: none;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: var(--b2b-fs-body-lg);
  line-height: 1;
  padding: var(--space-2);
}
.ticker__close:hover { opacity: 1; }
.ticker__close:focus-visible { outline: var(--border-width-2) solid var(--border-secondary); outline-offset: 2px; border-radius: var(--radius-xs); }
@media (prefers-reduced-motion: reduce) {
  .ticker__item { transition: none; }
}

/* ---------- selettore lingua ---------- */
.lang { position: relative; flex: none; }
.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-headings);
  cursor: pointer;
  line-height: 1;
}
.lang__trigger:hover { background: var(--surface-primary-hover); }
.lang__trigger:focus-visible {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: 2px;
}
.lang__caret { font-size: var(--fs-caption); }
.lang[data-open="true"] .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  min-width: 190px;
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility var(--dur-base);
  z-index: 10;
}
.lang[data-open="true"] .lang__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang__menu li > * {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
}
.lang__menu a { color: var(--text-headings); }
.lang__menu a:hover { background: var(--surface-primary-hover); }
.lang__menu a[aria-current="true"] { font-weight: var(--fw-medium); }
/* lingue non ancora pubblicate: visibili ma non cliccabili */
.lang__menu .is-soon { color: var(--text-tertiary); cursor: default; }
.lang__menu .is-soon em {
  font-style: normal;
  font-size: var(--fs-caption);
  letter-spacing: var(--b2b-tracking-md);
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- toggle del menu mobile ---------- */
.nav__toggle {
  display: none;              /* compare solo sotto il breakpoint */
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-headings);
}
.nav__toggle:focus-visible {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: 2px;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.site-header.is-open .nav__toggle span { background: transparent; }
.site-header.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- striscia di loghi scorrevole ---------- */
.marquee {
  overflow: hidden;
  margin-top: var(--space-12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-12);
  padding-block: var(--space-2);
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: var(--b2b-fs-h6);
  line-height: 1;
  white-space: nowrap;
  color: var(--text-tertiary);
  transition: color var(--dur-base) var(--ease-standard);
}
.marquee__item:hover { color: var(--text-headings); }
@keyframes marquee-scroll {
  to { transform: translateX(calc(-50% - (var(--space-12) / 2))); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ---------- hero ---------- */
.hero { padding-block: var(--space-20) var(--space-16); }
.hero__title {
  font-size: var(--b2b-fs-h2);
  max-width: 16ch;
  margin-bottom: var(--space-8);
}
.hero__lede { margin-bottom: var(--space-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8) var(--space-16); align-items: center; }
.hero__proof { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-6) var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-primary); }
.hero__proof .trustbar { margin-top: 0; }
.hero__proof .nets { margin-top: 0; }
.hero__grid .hero__title { font-size: var(--b2b-fs-hero); max-width: none; }
.hero__title br { display: none; }
@media (min-width: 961px) { .hero__title br { display: inline; } }
.hero__micro { margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--text-tertiary); letter-spacing: var(--b2b-tracking-xs); }

/* visual del hero: tre schede Shopping "Di Amaki" sfalsate + callout */
.hero__visual { position: relative; min-height: 500px; background: transparent; font-family: arial, sans-serif; }
/* `rgb(` e' nell'elenco delle funzioni colore della regola, ma qui non c'e'
   nessun colore scritto a mano: i canali vengono da --shadow-tint, il token
   con cui il design system scrive tutte e venti le sue ombre. La regola
   riconosce il nome della funzione, non i suoi argomenti -- lo dice il suo
   stesso commento. color-mix() non e' un'alternativa: --shadow-tint e' una
   terna di canali, non un colore, e li' sarebbe CSS non valido. */
/* stylelint-disable-next-line amaki/no-literal-themeable */
.hero__visual .hero__card { position: absolute; width: 180px; box-shadow: 0 18px 50px -18px rgb(var(--shadow-tint) / 0.35); background: var(--surface-primary); }
.hero__visual .hero__card--1 { left: 0; top: 30px; transform: rotate(-3deg); }
.hero__visual .hero__card--2 { left: 50%; top: 90px; transform: translateX(-50%); z-index: 2; }
.hero__visual .hero__card--3 { right: 0; top: 10px; transform: rotate(3deg); }
/* `rgb(` e' nell'elenco delle funzioni colore della regola, ma qui non c'e'
   nessun colore scritto a mano: i canali vengono da --shadow-tint, il token
   con cui il design system scrive tutte e venti le sue ombre. La regola
   riconosce il nome della funzione, non i suoi argomenti -- lo dice il suo
   stesso commento. color-mix() non e' un'alternativa: --shadow-tint e' una
   terna di canali, non un colore, e li' sarebbe CSS non valido. */
/* stylelint-disable-next-line amaki/no-literal-themeable */
.hero__card.gs__card--ours { box-shadow: 0 0 0 var(--border-width-3) var(--border-secondary), 0 24px 60px -18px rgb(var(--shadow-tint) / 0.45); }
.hero__callout {
  position: absolute; z-index: 3; left: 50%; top: 36px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-inverse); color: var(--text-inverse);
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--b2b-tracking-xs);
  white-space: nowrap; box-shadow: var(--shadow-2);
}
.hero__callout .callout__dot { background: var(--surface-action); }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
}

/* barra badge sotto la CTA (stile Shoparize) */
.trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-body);
}
/* i marchi di terzi sono SVG con i colori originali: è l'eccezione prevista
   dal DS (loghi non soggetti a theming) */
/* network di affiliazione: nomi in testo, monocromi (loghi veri: chiedere i kit partner) */
.nets {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}
.nets__label { font-size: var(--fs-caption); color: var(--text-tertiary); letter-spacing: var(--b2b-tracking-sm); text-transform: uppercase; }
.nets__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.nets__item {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--b2b-fs-body-lg);
  letter-spacing: var(--b2b-tracking-tight);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.trustbar__logo { flex: none; width: 22px; height: 22px; display: block; }
.trustbar__text { display: flex; flex-direction: column; line-height: var(--lh-compatta); }
.trustbar__text span {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: var(--b2b-tracking-xs);
}
.trustbar__text strong {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-headings);
  margin-top: var(--space-05);
}

/* ---------- griglia canali ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-4 { grid-template-columns: 1fr; } }
.channel {
  padding: var(--space-8);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
}
.channel__num {
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-h5);
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}
.channel h3 { font-size: var(--b2b-fs-h6); margin-bottom: var(--space-3); }
.channel p { font-size: var(--fs-body-md); color: var(--text-body); }

/* ---------- prodotti (griglia stile "products") ---------- */
.prod {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.prod__card {
  --b2b-prod-bg: var(--surface-primary-hover);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: var(--space-8) var(--space-8) 0;
  border-radius: var(--radius-3xl);
  background: var(--b2b-prod-bg);
  color: var(--text-primary);
}
.prod__card--amaki      { --b2b-prod-bg: var(--surface-low-visibility-action); }
.prod__card--livinglocal{ --b2b-prod-bg: var(--surface-time-tint); }
.prod__card--performyze { --b2b-prod-bg: var(--surface-identity-tint); }
.prod__card--growzee    { --b2b-prod-bg: var(--surface-money-tint); }
.prod__card--instal     { --b2b-prod-bg: var(--surface-primary-hover); }

.prod__card--wide { grid-column: 1 / -1; flex-direction: row; gap: var(--space-10); min-height: 520px; }
.prod__card--wide .prod__body { flex: 0 0 44%; padding-bottom: var(--space-8); }
.prod__card--wide .prod__shot { flex: 1; margin-top: var(--space-4); }

.prod__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.prod__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--b2b-fs-h5);
  letter-spacing: var(--b2b-tracking-tighter);
  line-height: 1;
  color: var(--text-primary);
}
.prod__brand img { display: block; height: 26px; width: auto; }
.prod__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-primary) 60%, transparent);
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.prod__link:hover { background: var(--surface-primary); }
.prod__link .hgi > svg { width: 14px; height: 14px; }

.prod__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.prod__meta li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--text-body-highviz);
}
.prod__meta li::before {
  content: ""; position: absolute; left: 4px; top: 0.5em;
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  border: var(--border-width-2) solid var(--border-inverse);
}
.prod__meta li.is-date { color: var(--text-primary); font-weight: 500; }
.prod__meta li.is-date::before { content: none; }
.prod__meta li.is-date .hgi { position: absolute; left: 0; top: 0.15em; }
.prod__meta li.is-date .hgi > svg { width: 15px; height: 15px; }

.prod__shot {
  position: relative;
  flex: 1;
  margin: var(--space-8) calc(-1 * var(--space-10)) 0 var(--space-6);
  min-height: 260px;
}
.prod__frame {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  background: var(--surface-primary);
  /* `rgb(` e' nell'elenco delle funzioni colore della regola, ma qui non c'e'
     nessun colore scritto a mano: i canali vengono da --shadow-tint, il token
     con cui il design system scrive tutte e venti le sue ombre. La regola
     riconosce il nome della funzione, non i suoi argomenti -- lo dice il suo
     stesso commento. color-mix() non e' un'alternativa: --shadow-tint e' una
     terna di canali, non un colore, e li' sarebbe CSS non valido. */
  /* stylelint-disable-next-line amaki/no-literal-themeable */
  box-shadow: 0 24px 60px -20px rgb(var(--shadow-tint) / 0.35);
}
.prod__bar {
  display: flex; align-items: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-4);
  background: var(--surface-primary);
  border-bottom: 1px solid var(--surface-primary-hover);
  flex: none;
}
.prod__bar i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--surface-primary-hover); }
.prod__bar span {
  margin-left: var(--space-3);
  padding: var(--space-05) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: var(--fs-caption); color: var(--text-tertiary);
}
.prod__frame img { flex: 1; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

@media (max-width: 860px) {
  .gs__logo { display: none; }
  .gs__row { grid-auto-columns: 150px; }
  .prod { grid-template-columns: 1fr; }
  .prod__card, .prod__card--wide { flex-direction: column; min-height: 0; }
  .prod__card--wide .prod__body { flex: none; padding-bottom: 0; }
  .prod__shot, .prod__card--wide .prod__shot { min-height: 220px; margin-top: var(--space-6); margin-left: 0; }
  .prod__brand { font-size: var(--b2b-fs-h6); }
  .prod__brand img { height: 22px; }
}

/* ---------- numeri: striscia sotto i loghi ---------- */
/* `[hidden]` deve battere il display che la regola del componente dichiara, e qui
   non c'è Preflight a darglielo: senza la parola, un elemento nascosto che è anche
   un flex container resta visibile. È il caso per cui !important esiste. */
/* eslint-disable-next-line css/no-important */
[hidden] { display: none !important; }
.numstrip {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  background: var(--surface-page);
}
.numstrip__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
}
.numstrip__item { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.numstrip__num {
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-h4);
  line-height: 1;
  color: var(--text-headings);
  white-space: nowrap;
}
.numstrip__label { font-size: var(--fs-body-sm); color: var(--text-tertiary); }
@media (max-width: 860px) {
  .numstrip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .numstrip__num { font-size: var(--b2b-fs-h5); }
}

/* ---------- numeri ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.stat__num {
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-h3);
  line-height: 1;
  color: var(--text-headings);
  margin-bottom: var(--space-3);
}
.stat__label { font-size: var(--fs-body-sm); color: var(--text-tertiary); }

/* ---------- perché ---------- */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-10);
  margin-top: var(--space-12);
}
.reason h3 { font-size: var(--b2b-fs-h6); margin-bottom: var(--space-3); }

.ownbox {
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline;
  font-size: var(--fs-body-md);
}
.ownbox strong { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--text-action-lowviz); white-space: nowrap; }
.ownbox span { flex: 1 1 40ch; opacity: .9; }
.note-cpl { margin-top: var(--space-8); font-size: var(--fs-body-sm); color: var(--text-tertiary); }
.note-cpl a { color: var(--text-headings); text-decoration: underline; }
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.voices .quote { margin: 0; }
#come-si-inizia .nets { margin-top: var(--space-10); }

/* ---------- due modi di vendere: card offerta (home) ---------- */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.offer {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-8);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-3xl);
}
.offer__top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: var(--space-2); }
.offer__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-lg); }
.offer__icon > .hgi > svg { width: 28px; height: 28px; }
/* ogni card è monocromatica: Google CSS lime, AI Comparison Shopping rosa (regola di Giovanni: mai due colori nella stessa card) */
.offer__icon--1 { background: var(--surface-low-visibility-action); color: var(--text-on-low-visibility-action); }
.offer__icon--3 { background: var(--surface-identity-tint); color: var(--text-identity); }
.offer__n { font-family: var(--font-editorial); font-size: var(--b2b-fs-h6); color: var(--text-tertiary); }
.offer h3 { font-size: var(--b2b-fs-h5); max-width: 22ch; }
.offer > p { color: var(--text-body); }
.offer .ticklist { margin: var(--space-2) 0; }
.offer--2 .ticklist li::before { background: var(--surface-identity); }
.offer__more { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-headings); font-weight: var(--fw-medium); text-decoration: none; font-size: var(--fs-body-md); }
.offer__more:hover { text-decoration: underline; }
.offer__cta { margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--border-primary); width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.offer__micro { font-size: var(--fs-caption); color: var(--text-tertiary); }
@media (max-width: 860px) { .offers { grid-template-columns: 1fr; } .offer { padding: var(--space-6); } }

/* ---------- la prova ---------- */
.proof {
  padding: var(--space-16);
  border-radius: var(--radius-3xl);
  background: var(--surface-primary);
  box-shadow: var(--shadow-pillar-identity);
}
.proof h2 { font-size: var(--b2b-fs-h4); margin-bottom: var(--space-6); max-width: 20ch; }

/* ---------- CTA finale ---------- */
.cta-final {
  padding: var(--space-20) var(--space-16);
  border-radius: var(--radius-3xl);
  background: var(--surface-inverse);
  text-align: center;
}
.cta-final h2 {
  font-size: var(--b2b-fs-h4);
  color: var(--text-inverse);
  margin-bottom: var(--space-6);
  max-width: 24ch;
  margin-inline: auto;
}
.cta-final p { color: var(--text-inverse); opacity: 0.72; margin-bottom: var(--space-10); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-primary);
  padding-block: var(--space-16) var(--space-10);
  margin-top: var(--space-24);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.footer__col h4 {
  font-size: var(--fs-body-sm);
  letter-spacing: var(--kerning-sm);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: var(--space-3); font-size: var(--fs-body-md); }
.footer__col a:hover { color: var(--text-action); }
.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-primary);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}

.footer__grid--4 { grid-template-columns: 1.5fr 1fr 1.3fr 0.8fr; }
.footer__sub { padding-left: var(--space-4); font-size: var(--fs-body-sm); }
.footer__sub a::before { content: "— "; color: var(--text-tertiary); }
.footer__desc { display: block; font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: var(--space-05); }

/* ---------- segnaposto: contenuto da validare con i PM ---------- */
.ph {
  outline: 1px dashed var(--surface-identity);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
  position: relative;
}
/* variante inline: dentro un paragrafo l'etichetta flottante copre il testo,
   quindi resta solo la sottolineatura tratteggiata + tooltip nativo */
.ph--inline {
  outline: none;
  border-bottom: 1px dashed var(--surface-identity);
  color: var(--surface-identity);
  cursor: help;
}
.ph::after {
  content: attr(data-ph);
  position: absolute;
  top: -0.5em;
  right: -0.25em;
  transform: translateY(-100%);
  font-family: var(--font-body);
  font-size: var(--b2b-fs-micro);
  letter-spacing: var(--b2b-tracking-md);
  text-transform: uppercase;
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-identity);
  color: var(--text-on-identity);
  white-space: nowrap;
  pointer-events: none;
}
/* deve stare DOPO .ph::after: stessa specificità, vince l'ordine */
.ph--inline::after { content: none; }

/* ============================================================
 * Componenti di pagina interna (servizi)
 * ============================================================ */

/* ---------- hero di pagina (più contenuto di quello della home) ---------- */
.page-hero { padding-block: var(--space-24) var(--space-16); }
.page-hero__title {
  font-size: var(--b2b-fs-h3);
  max-width: 18ch;
  margin-bottom: var(--space-8);
}

/* ---------- blocco a due colonne ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
  margin-top: var(--space-12);
}
.split__aside {
  padding: var(--space-8);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
}
.split__aside h3 { font-size: var(--b2b-fs-h6); margin-bottom: var(--space-5); }

/* ---------- lista con segno di spunta ---------- */
.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--text-body);
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-action);
}

/* ---------- processo a step ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
  counter-reset: step;
}
.step { position: relative; padding-top: var(--space-8); }
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-primary);
}
.step__n {
  counter-increment: step;
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-h6);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--b2b-fs-body-lg); margin-bottom: var(--space-3); }
.step p { font-size: var(--fs-body-md); }

/* ---------- profili di cliente ---------- */
.profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.profile {
  padding: var(--space-10);
  border-radius: var(--radius-xxl);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
}
.profile__note { margin-top: var(--space-6); font-size: var(--fs-caption); color: var(--text-tertiary); }
.profile__tag {
  display: inline-block;
  padding: var(--space-15) var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--surface-low-visibility-action);
  color: var(--text-on-low-visibility-action);
  font-size: var(--fs-body-sm);
}
.profile h3 { font-size: var(--b2b-fs-h6); margin-bottom: var(--space-4); }

/* ============================================================
 * Home a tre prodotti (impianto stile Shoparize)
 * ============================================================ */

/* ---------- schema "come funziona": 3 canali → il tuo store ---------- */
.flow {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-12);
}
.flow__items { display: flex; flex-direction: column; gap: var(--space-4); }
.flow__items .nets { margin-top: var(--space-4); padding-left: var(--space-6); }
.flow__item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
}
.flow__dot {
  flex: none;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-body-lg);
  color: var(--text-headings);
}
.flow__dot--1 { background: var(--surface-low-visibility-action); }
.flow__dot--2 { background: var(--surface-time-tint); }
.flow__dot--3 { background: var(--surface-identity-tint); }
.flow__item h3 { font-size: var(--b2b-fs-body-lg); margin-bottom: var(--space-2); }
.flow__item p { font-size: var(--fs-body-sm); color: var(--text-body); }

.flow__store {
  padding: var(--space-10);
  border-radius: var(--radius-xxl);
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.flow__store .eyebrow { color: var(--text-inverse); opacity: 0.6; }
.flow__store h3 {
  font-size: var(--b2b-fs-h5);
  color: var(--text-inverse);
  margin-bottom: var(--space-5);
}
.flow__store p { color: var(--text-inverse); opacity: 0.78; }
.flow__own {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-inverse);
}
.flow__own strong {
  display: block;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--kerning-sm);
  text-transform: uppercase;
  color: var(--surface-action);
  margin-bottom: var(--space-3);
  font-weight: var(--fw-regular);
}
.flow__caption {
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--kerning-sm);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- blocco prodotto in dettaglio ---------- */
.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  padding-block: var(--space-16);
  border-top: 1px solid var(--border-primary);
  align-items: start;
}
.product__tag {
  display: inline-block;
  padding: var(--space-15) var(--space-4);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--b2b-tracking-md);
  text-transform: uppercase;
}
.product__tag--1 { background: var(--surface-low-visibility-action); color: var(--text-on-low-visibility-action); }
.product__tag--2 { background: var(--surface-time-tint);    color: var(--text-headings); }
.product__tag--3 { background: var(--surface-identity-tint); color: var(--text-headings); }
.product h3 { font-size: var(--b2b-fs-h5); margin-bottom: var(--space-5); max-width: 20ch; }
.product__lead { display: flex; flex-direction: column; align-items: flex-start; }
.product__lead .product__actions { margin-top: var(--space-4); }
.product__body > p { margin-bottom: var(--space-6); }
.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
}
.product__note {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}

/* ============================================================
 * Demo visive nei blocchi prodotto — "stage"
 * Interfacce simulate con dati verosimili, costruite sui token del DS.
 * Un solo accento per superficie (regola del brandbook): i prodotti sono
 * neutri, solo la scheda portata da Amaki prende il primary.
 * ============================================================ */

/* la demo scavalca le due colonne del blocco prodotto */
.product > .demo { grid-column: 1 / -1; margin-top: 0; }

.demo {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xxl);
  border: 1px solid var(--border-primary);
  background:
    radial-gradient(110% 90% at 0% 0%,
      color-mix(in srgb, var(--surface-low-visibility-action) 55%, transparent) 0%, transparent 60%),
    var(--surface-primary);
  overflow: hidden;
}
.demo--identity {
  background:
    radial-gradient(110% 90% at 100% 0%,
      color-mix(in srgb, var(--surface-identity-tint) 80%, transparent) 0%, transparent 60%),
    var(--surface-primary);
}
.demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.demo__label {
  font-size: var(--fs-caption);
  letter-spacing: var(--kerning-sm);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.demo__foot {
  margin-top: var(--space-5);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* etichette flottanti che spiegano cosa si sta guardando */
.callout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--fs-caption);
  letter-spacing: var(--b2b-tracking-xs);
  box-shadow: var(--shadow-3);
  white-space: nowrap;
}
.callout__dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-action);
}
.callout--light {
  background: var(--surface-primary);
  color: var(--text-headings);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-2);
}

/* ---------- superficie "finestra" riusata da entrambe le demo ---------- */
.app {
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-primary);
  background: var(--surface-page);
}
.app__dots { display: flex; gap: var(--space-15); }
.app__dots span {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
}
.app__url {
  margin-left: auto;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--space-05) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
.app__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* barra di ricerca simulata */
.search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill);
  background: var(--surface-primary);
  font-size: var(--fs-body-sm);
  color: var(--text-headings);
}
.search i { color: var(--text-tertiary); }
.search__hint { margin-left: auto; font-size: var(--fs-caption); color: var(--text-tertiary); white-space: nowrap; }

/* tile prodotto: neutro, con una luce diagonale per non sembrare "immagine mancante" */
.tile {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--surface-raised), var(--surface-primary-hover));
  color: var(--text-tertiary);
  overflow: hidden;
}
.tile::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--surface-primary) 70%, transparent) 0%, transparent 55%);
}
.tile i { position: relative; font-size: var(--size-icon-lg); }
.tile--ours {
  background: linear-gradient(160deg, var(--surface-low-visibility-action), var(--surface-low-visibility-action));
  color: var(--text-on-low-visibility-action);
}

/* ---------- demo 1: carosello Shopping ---------- */
.shop__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  color: var(--text-headings);
  margin-top: var(--space-1);
}
.shop__title small { font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-tertiary); }
.shop__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.spcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
}
.spcard .tile { aspect-ratio: 1; }
.spcard__badge {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  z-index: 2;
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--b2b-fs-nano);
  letter-spacing: var(--b2b-tracking-lg);
}
.spcard__title {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-stretta);
  color: var(--text-headings);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--fs-body-sm) * 1.25 * 2);
}
.spcard__prices { display: flex; align-items: baseline; gap: var(--space-2); }
.spcard__price { font-family: var(--font-display); font-size: var(--b2b-fs-body-lg); color: var(--text-headings); }
.spcard__old { font-size: var(--fs-caption); color: var(--text-tertiary); text-decoration: line-through; }
.spcard__store { font-size: var(--fs-caption); color: var(--text-body); }
.spcard__meta {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-caption); color: var(--text-tertiary);
}
.spcard__stars { color: var(--text-tertiary); letter-spacing: var(--b2b-tracking-stars); }
.spcard__by {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-primary);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
/* la scheda portata da noi: rialzata e col solo accento della pagina */
.spcard--ours {
  border-color: var(--surface-action);
  box-shadow: 0 0 0 var(--border-width-3) var(--surface-low-visibility-action), var(--shadow-3);
  transform: translateY(-6px);
}
.spcard--ours .spcard__by { color: var(--text-on-low-visibility-action); font-weight: var(--fw-medium); }
.spcard__flag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--b2b-fs-micro);
  letter-spacing: var(--b2b-tracking-md);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-2);
}

/* amaki/no-literal-themeable e' disabilitato per QUESTO BLOCCO e solo per questo.
   Il blocco riproduce la scheda di un annuncio Google Shopping: il carattere e'
   arial, i colori sono #1a0dab, #188038, #fbbc04, #70757a, le metriche sono
   quelle di Google. Non sono valori del nostro design system scritti a mano --
   sono la cromatura di un prodotto di terzi, come i loghi dei partner piu'
   sopra, e sostituirli con i nostri token renderebbe la replica una cosa che
   su Google non si vede. 74 rilievi, tutti qui dentro.

   Circoscritto e non per riga: 74 commenti di disabilitazione renderebbero il
   blocco illeggibile, e la ragione e' una sola per tutti e 74. Riabilitato
   subito dopo la chiusura, cosi' il resto del foglio resta sotto la regola --
   verificato che una violazione piantata fuori da qui fallisce ancora. */
/* stylelint-disable amaki/no-literal-themeable */
/* ---------- replica UI Google Shopping ----------
   Riproduce fedelmente la scheda di un annuncio Shopping. Palette e font
   sono quelli di Google (arial, #1a0dab, #188038, #fbbc04…): esadecimali
   ammessi qui come per i loghi di terze parti, perché il blocco È un logo
   d'ambiente, non UI nostra. Non usare queste classi altrove. */
.gs {
  font-family: arial, sans-serif;
  color: #1f1f1f;
  background: #fff;
  -webkit-font-smoothing: auto;
}
.gs__top {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #e8eaed;
}
.gs__logo { height: 26px; width: auto; flex: none; }
.gs__search {
  flex: 1; display: flex; align-items: center;
  height: 40px; padding: 0 8px 0 16px;
  border: 1px solid #dfe1e5; border-radius: 24px;
  font-size: 15px; color: #1f1f1f;
  box-shadow: 0 1px 4px rgba(32,33,36,.12);
}
.gs__q { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs__tools { display: flex; align-items: center; gap: 12px; }
.gs__tools svg { width: 20px; height: 20px; display: block; }
.gs__sep { width: 1px; height: 22px; background: #dadce0; }
.gs__body { padding: 14px 20px 18px; }
.gs__h {
  font-family: inherit; font-weight: 400; font-size: 17px; letter-spacing: 0;
  color: #1f1f1f; margin: 0 0 10px; padding-bottom: 10px;
  border-bottom: 1px solid #e8eaed;
}
.gs__row {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 8px;
  padding-top: 16px;           /* spazio per la flag "Portata da Amaki" */
  overflow-x: auto;
  /* Nasconde la barra di scorrimento della riga di schede, che nella replica
     dell'interfaccia Google non c'è. Puro abbellimento: dove non è supportata si
     vede la barra e la riga scorre lo stesso, quindi non c'è ricaduta. */
  /* eslint-disable-next-line css/use-baseline */
  scrollbar-width: none;
}
.gs__row::-webkit-scrollbar { display: none; }
.gs__card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid #dadce0; border-radius: 8px;
  background: #fff; overflow: visible;
  font-size: 12.5px; line-height: 1.35;
}
.gs__card > p { margin: 0; padding: 0 10px; }
.gs__img {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1.05;
  margin: 0; border-radius: 7px 7px 0 0;
  background: #f8f9fa;
  overflow: hidden;
}
.gs__shoe { width: 84%; height: auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,.12)); }
.gs__sale {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 7px; border-radius: 6px;
  background: #fff; color: #1f1f1f;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 1px 3px rgba(60,64,67,.3);
}
.gs__card > .gs__title {
  color: #1a0dab; margin-top: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(12.5px * 1.35 * 3);
}
.gs__card > .gs__price { font-weight: 700; margin-top: 6px; }
.gs__price--sale { color: #188038; }
.gs__price s { color: #70757a; font-weight: 400; margin-left: 4px; }
.gs__card > .gs__store { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs__card > .gs__ship { display: flex; align-items: center; gap: 4px; color: #70757a; margin-top: 8px; }
.gs__ship svg { width: 15px; height: 15px; flex: none; }
.gs__card > .gs__stars { display: flex; align-items: center; gap: 4px; color: #70757a; margin-top: 4px; }
.gs__starrow {
  --b2b-star-fill: 4.5;
  display: inline-block; width: 66px; height: 12px;
  background:
    linear-gradient(90deg, #fbbc04 calc(var(--b2b-star-fill) / 5 * 100%), #dadce0 0);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") 0 0 / 13.2px 12px repeat-x;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>") 0 0 / 13.2px 12px repeat-x;
}
.gs__card > .gs__by { color: #1a0dab; margin: 8px 0 10px; }
.gs__next {
  position: sticky; right: 0; align-self: center;
  width: 40px; height: 40px; margin-left: -20px;
  border: 1px solid #dadce0; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  display: grid; place-items: center; cursor: default; padding: 0;
}
.gs__next svg { width: 22px; height: 22px; }
/* la nostra scheda: identica alle altre, evidenziata solo dall'anello e dalla flag (layer nostro) */
.gs__card--ours { box-shadow: 0 0 0 3px var(--border-secondary); border-color: transparent; }
.gs__card--ours .gs__by { font-weight: 700; }

/* stylelint-enable amaki/no-literal-themeable */

/* ---------- demo 2: comparatore + assistente ---------- */
.duo {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.duo__bridge {
  position: absolute;
  left: 53.5%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.duo__head {
  font-size: var(--fs-caption);
  letter-spacing: var(--b2b-tracking-xl);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* comparatore: intestazione prodotto + lista offerte */
.cmp__product {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.cmp__product .tile { width: 56px; height: 56px; flex: none; }
.cmp__product .tile i { font-size: var(--size-icon-md); }
.cmp__name { font-family: var(--font-display); font-size: var(--fs-body-md); color: var(--text-headings); }
.cmp__sub { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: var(--space-05); }
.cmp__list { display: flex; flex-direction: column; }
.cmp__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-primary);
  font-size: var(--fs-body-sm);
  border-radius: var(--radius-sm);
}
.cmp__row:last-child { border-bottom: none; }
.cmp__row--best {
  background: var(--surface-low-visibility-action);
  border-bottom-color: transparent;
}
.cmp__seller { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cmp__mono {
  flex: none;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--surface-primary-hover);
  color: var(--text-headings);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
}
.cmp__row--best .cmp__mono { background: var(--surface-action); color: var(--text-on-action); }
.cmp__store { color: var(--text-headings); white-space: nowrap; }
.cmp__ship { display: block; font-size: var(--fs-caption); color: var(--text-tertiary); }
.cmp__tag {
  margin-left: var(--space-2);
  padding: var(--border-width-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-action);
  color: var(--text-on-action);
  font-size: var(--b2b-fs-nano);
  letter-spacing: var(--b2b-tracking-md);
  text-transform: uppercase;
  vertical-align: middle;
}
.cmp__price { font-family: var(--font-display); font-size: var(--fs-body-md); color: var(--text-headings); }
.cmp__go {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-primary);
  font-size: var(--fs-caption);
  color: var(--text-headings);
  white-space: nowrap;
}
.cmp__row--best .cmp__go { background: var(--text-headings); color: var(--text-inverse); border-color: transparent; }

/* assistente: bolle riprese dal componente Message del DS */
.chat { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.chat__msg { display: flex; gap: var(--space-3); align-items: flex-end; }
.chat__msg--user { flex-direction: row-reverse; }
.chat__av {
  flex: none;
  width: var(--space-8); height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--surface-action);
  color: var(--text-on-action);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
}
.chat__bubble {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normale);
  max-width: 86%;
}
.chat__msg--bot .chat__bubble {
  background: var(--surface-page);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  color: var(--text-headings);
}
.chat__msg--user .chat__bubble {
  background: var(--surface-low-visibility-action);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  color: var(--text-on-low-visibility-action);
}
/* scheda prodotto dentro la risposta: è il momento in cui il merchant compare */
.chat__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}
.chat__card .tile { width: 44px; height: 44px; flex: none; }
.chat__card .tile i { font-size: var(--size-icon-md); }
.chat__card-name { font-size: var(--fs-body-sm); color: var(--text-headings); }
.chat__card-meta { font-size: var(--fs-caption); color: var(--text-tertiary); }
.chat__card-price { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-body-md); color: var(--text-headings); white-space: nowrap; }
.chat__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-left: var(--space-10); }
.chat__chip {
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-1) solid var(--border-low-visibility-action);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  color: var(--text-on-low-visibility-action);
}
/* composer in fondo, eco della pill del ChatBox */
.chat__composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}
.chat__send {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--surface-action);
  color: var(--text-on-action);
  display: grid; place-items: center;
  font-size: var(--fs-caption);
}

/* ---------- "da dove partire": intenzioni del merchant ---------- */
.intents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.intent {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
}
.intent blockquote {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--b2b-fs-h6);
  line-height: var(--lh-stretta);
  color: var(--text-headings);
}
.intent p { font-size: var(--fs-body-sm); margin-bottom: var(--space-6); }
.intent a { margin-top: auto; align-self: flex-start; }

/* ---------- case study ---------- */
.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.case {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xxl);
}
.case__vertical {
  font-size: var(--fs-body-sm);
  letter-spacing: var(--kerning-sm);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.case h3 { font-size: var(--b2b-fs-h5); margin-bottom: var(--space-4); }
.case > p { font-size: var(--fs-body-md); margin-bottom: var(--space-8); }
.case__stats {
  display: flex;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-primary);
}
.case__stat { flex: 1; }
.case__val {
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-h4);
  line-height: 1;
  color: var(--text-headings);
  margin-bottom: var(--space-2);
}
.case__key { font-size: var(--fs-body-sm); color: var(--text-tertiary); }
.case__meta {
  margin-top: var(--space-6);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}

/* ---------- case study in evidenza (uno, grande: formato Shoparize) ---------- */
.study {
  padding: var(--space-12);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-2);
}
.study__head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-10); }
.study__logo {
  flex: none;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-family: var(--font-display);
  font-size: var(--b2b-fs-h6);
  color: var(--text-headings);
}
.study__name { font-family: var(--font-display); font-size: var(--b2b-fs-h5); color: var(--text-headings); }
.study__meta { font-size: var(--fs-body-sm); color: var(--text-tertiary); margin-top: var(--space-05); }
.study__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.study__stat {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--surface-page);
}
.study__val {
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-h3);
  line-height: 1;
  color: var(--text-headings);
  margin-bottom: var(--space-3);
}
.study__key { font-size: var(--fs-body-sm); color: var(--text-body); }
.study__quote {
  margin: 0;
  padding-left: var(--space-6);
  border-left: var(--border-width-3) solid var(--surface-action);
}
.study__quote p {
  font-family: var(--font-display);
  font-size: var(--b2b-fs-h6);
  line-height: var(--lh-stretta);
  color: var(--text-headings);
  margin-bottom: var(--space-3);
}
.study__quote footer { font-size: var(--fs-body-sm); color: var(--text-tertiary); }

/* ---------- persone: fondatori + funzioni + foto del team ---------- */
.people__intro { max-width: var(--measure-lg); margin-bottom: var(--space-12); }
.founders {
  margin: 0;
  border-radius: var(--radius-xxl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  background: var(--surface-primary-hover);
}
.founders img { width: 100%; height: auto; display: block; }
.roster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.roster__item { padding-top: var(--space-4); border-top: 1px solid var(--border-primary); }
.roster__name { font-family: var(--font-display); font-size: var(--b2b-fs-body-lg); color: var(--text-headings); }
.roster__role { font-size: var(--fs-body-sm); color: var(--text-tertiary); margin-top: var(--space-05); }

.functions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-primary);
}
.functions h3 { font-size: var(--b2b-fs-body-lg); margin-bottom: var(--space-2); }
.functions h3 span { color: var(--text-tertiary); font-family: var(--font-body); font-size: var(--fs-body-sm); margin-left: var(--space-2); }
.functions p { font-size: var(--fs-body-sm); }

.teamphoto {
  margin: var(--space-16) 0 0;
  border-radius: var(--radius-xxl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  background: var(--surface-primary-hover);
}
.teamphoto img { width: 100%; height: auto; display: block; }
.teamphoto__caption {
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}

/* ---------- timeline verticale (chi siamo) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border-primary);
}
.timeline li { position: relative; padding-left: var(--space-8); padding-bottom: var(--space-6); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 11px; height: 11px; border-radius: var(--radius-pill);
  background: var(--surface-primary); border: var(--border-width-2) solid var(--border-strong);
}
.timeline li.is-now::before { background: var(--surface-action); border-color: var(--border-secondary); }
.timeline__year {
  display: block;
  font-family: var(--font-editorial);
  font-size: var(--b2b-fs-h6);
  line-height: 1;
  color: var(--text-headings);
  margin-bottom: var(--space-1);
}
.timeline__text { font-size: var(--fs-body-sm); color: var(--text-body); }

/* ---------- schema "chi appare, cosa paghi" (pagina CSS) ---------- */
.duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.duel__case {
  padding: var(--space-6);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  background: var(--surface-page);
}
.duel__title {
  font-family: var(--font-display);
  font-size: var(--fs-body-md);
  color: var(--text-headings);
  margin-bottom: var(--space-2);
}
.duel__bar {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}
.duel__track {
  position: relative; display: block;
  height: 10px; border-radius: var(--radius-pill);
  background: var(--surface-primary-hover);
}
.duel__fill {
  --b2b-duel-width: 50%;
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--b2b-duel-width);
  border-radius: var(--radius-pill);
  background: var(--border-inverse);
}
.duel__fill--win  { background: var(--surface-action); }
.duel__fill--out  { background: transparent; border: var(--border-width-2) dashed var(--border-default); }
.duel__fill--none { background: transparent; border: var(--border-width-2) dashed var(--border-default); }
.duel__note { font-size: var(--fs-caption); color: var(--text-tertiary); white-space: nowrap; }
.duel__verdict {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-primary);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}
.ticklist--lg li { font-size: var(--fs-body-md); }
@media (max-width: 860px) {
  .duel { grid-template-columns: 1fr; }
  .duel__bar { grid-template-columns: 96px minmax(0, 1fr); }
  .duel__note { grid-column: 2; }
}

/* ---------- FAQ ---------- */
.faq { margin-top: var(--space-12); max-width: var(--measure-lg); }
.faq details {
  border-bottom: 1px solid var(--border-primary);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--b2b-fs-h6);
  color: var(--text-headings);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: var(--b2b-fs-h6);
  color: var(--text-tertiary);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}
.faq__body { padding-bottom: var(--space-6); max-width: var(--measure-md); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  /* il toggle prende il posto della barra di link */
  .nav__toggle { display: inline-flex; }
  .nav__spacer { display: none; }
  .nav > .btn { display: none; }        /* la CTA si sposta dentro il pannello */

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--space-6) var(--space-8);
    background: var(--surface-primary);
    border-bottom: 1px solid var(--border-primary);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard),
                visibility var(--dur-base);
  }
  .site-header.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__links > li { border-bottom: 1px solid var(--border-primary); }
  .nav__links > li:last-child { border-bottom: none; }
  .nav__link { width: 100%; padding-block: var(--space-4); justify-content: space-between; }

  /* il sottomenu resta sempre aperto: su mobile un dropdown dentro un
     dropdown è solo un ostacolo */
  .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 var(--space-4);
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .nav__caret { display: none; }
  .nav__mobile-cta { display: block; padding-top: var(--space-6); }

  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .page-hero { padding-block: var(--space-16) var(--space-12); }
  .page-hero__title { max-width: none; font-size: var(--b2b-fs-h5); }
  .hero__title { font-size: var(--b2b-fs-h4); max-width: none; }
  .marquee__item { font-size: var(--b2b-fs-body-lg); }
  .profile { padding: var(--space-8); border-radius: var(--radius-lg); }
  .flow { grid-template-columns: 1fr; gap: var(--space-8); }
  .flow__store { padding: var(--space-8); border-radius: var(--radius-lg); }
  .product { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-12); }
  .duo { grid-template-columns: 1fr; }
  .duo__bridge { display: none; }
  .demo { padding: var(--space-4); border-radius: var(--radius-lg); }
  .demo__head { align-items: flex-start; flex-direction: column; }
  .callout { white-space: normal; }
  .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop__grid .spcard:nth-child(n+5) { display: none; }
  .spcard--ours { transform: none; }
  .cmp__row { grid-template-columns: 1fr auto; }
  .cmp__go { display: none; }
  .cmp__tag { display: block; width: max-content; margin: var(--space-05) 0 0; }
  .study { padding: var(--space-6); border-radius: var(--radius-lg); }
  .roster, .functions { grid-template-columns: 1fr; }
  .founders, .teamphoto { border-radius: var(--radius-lg); }
  .ticker__item { font-size: var(--fs-caption); }
  .ticker__item span { display: none; }   /* su mobile resta solo il link */
  .study__stats { grid-template-columns: 1fr; }
  .hero { padding-block: var(--space-20) var(--space-16); }
  .hero__title { max-width: none; }
  .section { padding-block: var(--space-20); }
  .section--tight { padding-block: var(--space-12); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .proof, .cta-final { padding: var(--space-10); border-radius: var(--radius-xxl); }
}

@media (prefers-reduced-motion: reduce) {
  /* L'interruttore del moto ridotto deve vincere su QUALSIASI durata dichiarata
     altrove: è l'unico modo di onorare la preferenza di sistema senza elencare a
     mano ogni animazione del foglio, e dimenticarne una. */
  /* eslint-disable-next-line css/no-important */
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}


/* pay-off sotto il logo nel footer */
.footer__payoff { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--b2b-fs-body-lg); color: var(--text-headings); margin: calc(-1 * var(--space-3)) 0 var(--space-4); }

/* ---------- pagina contatti ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-16); align-items: start; }
.contact__label {
  font-size: var(--fs-caption); letter-spacing: var(--b2b-tracking-lg); text-transform: uppercase;
  color: var(--text-tertiary); margin: var(--space-10) 0 var(--space-4);
}
.contact__left > .contact__label:first-of-type { margin-top: 0; }
.paths { display: grid; gap: var(--space-3); }
.path {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  padding: var(--space-5); border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--surface-primary); color: inherit; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.path:hover { border-color: var(--text-tertiary); transform: translateY(-1px); }
.path__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--surface-low-visibility-action); color: var(--text-on-low-visibility-action);
}
.path__icon > .hgi > svg { width: 20px; height: 20px; }
.path--plain .path__icon { background: var(--surface-page); color: var(--text-headings); }
.path__text { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; }
.path__text strong { font-size: var(--fs-body-md); color: var(--text-headings); font-weight: var(--fw-medium); }
.path__text span { font-size: var(--fs-body-sm); color: var(--text-body); }
.path__arrow { color: var(--text-tertiary); }
.quote { margin: var(--space-10) 0 0; padding: var(--space-6); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); background: var(--surface-primary); }
.quote blockquote { margin: 0 0 var(--space-4); font-family: var(--font-editorial); font-size: var(--b2b-fs-h6); line-height: 1.3; color: var(--text-headings); }
.quote figcaption { display: flex; flex-direction: column; font-size: var(--fs-body-sm); color: var(--text-tertiary); }
.quote figcaption strong { color: var(--text-headings); font-weight: var(--fw-medium); }
.office p { font-size: var(--fs-body-sm); color: var(--text-body); line-height: 1.6; }
.office strong { color: var(--text-headings); }

.cform {
  position: sticky; top: calc(var(--space-6) + 72px);
  padding: var(--space-8); border-radius: var(--radius-3xl);
  background: var(--surface-primary); box-shadow: var(--shadow-3);
  display: grid; gap: var(--space-5);
}
.cform__head { display: flex; gap: var(--space-4); align-items: center; }
.cform__head h2 { font-size: var(--b2b-fs-h5); margin: 0 0 var(--space-05); }
.cform__head p { font-size: var(--fs-body-sm); color: var(--text-tertiary); margin: 0; }
.cform__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--surface-action); color: var(--text-on-action); flex: none; }
.cform__icon > .hgi > svg { width: 20px; height: 20px; }
.cform__toggle, .cform__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--text-body); cursor: pointer; }
.cform__toggle { padding: var(--space-4); border: 1px dashed var(--border-primary); border-radius: var(--radius-md); background: var(--surface-page); }
.cform__toggle span { display: flex; flex-direction: column; }
.cform__toggle strong { color: var(--text-headings); font-weight: var(--fw-medium); }
.cform__toggle small { font-size: var(--fs-caption); color: var(--text-tertiary); }
/* accent-color colora la spunta col colore del marchio. Dove non è supportata, la
   casella resta quella del sistema: cambia il colore, non il funzionamento. */
/* eslint-disable-next-line css/use-baseline */
.cform input[type="checkbox"] { width: 18px; height: 18px; margin-top: var(--space-05); accent-color: var(--text-on-low-visibility-action); flex: none; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--text-headings); font-weight: var(--fw-medium); }
.field input, .field select, .field textarea {
  font: inherit; font-weight: var(--fw-regular); font-size: var(--fs-body-md); color: var(--text-headings);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  background: var(--surface-primary); width: 100%; box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* resize: vertical impedisce il ridimensionamento ORIZZONTALE, che romperebbe la
   colonna del modulo. Dove non è supportata si torna al comportamento predefinito
   del browser, che è comunque ridimensionabile: si perde il vincolo, non il campo. */
/* eslint-disable-next-line css/use-baseline */
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23666' stroke-width='2' d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: var(--space-10); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-tertiary); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 var(--border-width-3) var(--surface-low-visibility-action); }
.cform__consent a { color: var(--text-headings); }
.cform__submit { width: 100%; justify-content: center; }
.cform__note { font-size: var(--fs-caption); color: var(--text-tertiary); text-align: center; margin: 0; }
@media (max-width: 960px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .cform { position: static; padding: var(--space-6); }
  .cform__row { grid-template-columns: 1fr; }
}