/* ============================================================
   ellebig ReadyChat — stylesheet
   Nessun build step. Token in cima: cambia lì per ribrandare.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------ */
:root {
  /* Colore — derivato dal logo */
  --ink:         #101614;
  --ink-soft:    #56655E;
  --surface:     #F4F7F4;
  --card:        #FFFFFF;
  --line:        #DDE5DE;
  --pine:        #123D2E;
  --pine-deep:   #0C2A20;
  --action:      #2BA84A;
  --action-dark: #1E8038;
  --action-lite: #45C25E;
  --grad-brand:  linear-gradient(135deg, #1E5B4A 0%, #45C25E 100%);

  /* Superfici WhatsApp */
  --wa-header:   #075E54;
  --wa-bg:       #E5DDD5;
  --wa-out:      #DCF8C6;

  /* Stato "fuori dai criteri" — la coppia era già dentro .wanote,
     ora è un token perché la usa anche il pannello dell'esito */
  --warn-bg:     #FFF6D6;
  --warn-ink:    #6B5B23;
  --warn-dot:    #E0A400;

  /* Tipografia */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --fs-eyebrow: 0.78rem;
  --fs-small:   clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --fs-lead:    clamp(1.08rem, 1rem + 0.45vw, 1.28rem);
  --fs-h3:      clamp(1.14rem, 1.05rem + 0.4vw, 1.34rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 2.2vw, 2.9rem);
  --fs-h1:      clamp(2.2rem, 1.45rem + 3.5vw, 3.9rem);

  /* Spazio fluido */
  --sp-1: 0.35rem;
  --sp-2: clamp(0.5rem, 0.45rem + 0.2vw, 0.65rem);
  --sp-3: clamp(0.8rem, 0.7rem + 0.4vw, 1.1rem);
  --sp-4: clamp(1.2rem, 1rem + 0.8vw, 1.8rem);
  --sp-5: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  --sp-6: clamp(2.8rem, 2rem + 3vw, 4.5rem);
  --sp-7: clamp(4rem, 2.8rem + 5vw, 7rem);

  --wrap: 1140px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-panel: 0 20px 55px -24px rgba(16,22,20,.45);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }
p  { margin: 0; text-wrap: pretty; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sp-7); }

/* L'header è sticky: le ancore della nav non devono finirci sotto. */
section[id] { scroll-margin-top: 5.5rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--action-dark);
  margin: 0 0 var(--sp-3);
}
.lead { font-size: var(--fs-lead); color: var(--ink-soft); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--pine); }
.btn--on-dark { color: #fff; border-color: rgba(255,255,255,.35); }
.btn--on-dark:hover { border-color: #fff; }

/* ------------------------------------------------------------
   3. HEADER + NAVIGAZIONE
   Mobile-first: il menu è chiuso e si apre col toggle.
   Da 900px il toggle sparisce e la nav torna in linea.
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3); padding-block: 0.75rem;
}
.site-header__brand { display: block; flex-shrink: 0; }
.site-header__logo { height: 34px; width: auto; }

/* --- Toggle hamburger (solo mobile) --- */
.navtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0; margin-inline-start: auto;
  background: transparent; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.navtoggle:hover { border-color: var(--ink); }
.navtoggle__box {
  display: block; position: relative; width: 20px; height: 14px;
}
.navtoggle__box span {
  position: absolute; left: 0; width: 100%; height: 2px;
  border-radius: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.navtoggle__box span:nth-child(1) { top: 0; }
.navtoggle__box span:nth-child(2) { top: 6px; }
.navtoggle__box span:nth-child(3) { top: 12px; }
.site-header.is-open .navtoggle__box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-header.is-open .navtoggle__box span:nth-child(2) { opacity: 0; }
.site-header.is-open .navtoggle__box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* --- Pannello nav su mobile --- */
.sitenav {
  display: none;
  flex-basis: 100%;
  padding-block: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}
.site-header.is-open .sitenav { display: block; }

.sitenav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.sitenav__list a {
  display: block; padding: 0.7rem 0.2rem;
  text-decoration: none; font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color .15s ease;
}
.sitenav__list li:last-child a { border-bottom: 0; }
.sitenav__list a:hover { color: var(--action-dark); }
/* La pagina in cui sei: colore, non solo peso, così si vede anche su mobile */
.sitenav__list a[aria-current="page"] { color: var(--action-dark); font-weight: 600; }
.sitenav__cta { margin-top: var(--sp-3); width: 100%; }

@media (min-width: 900px) {
  .site-header__inner { flex-wrap: nowrap; }
  .navtoggle { display: none; }
  .sitenav {
    display: flex; align-items: center; gap: var(--sp-4);
    flex-basis: auto; margin-inline-start: auto;
    padding-block: 0; border-top: 0;
  }
  .sitenav__list { flex-direction: row; align-items: center; gap: var(--sp-4); }
  .sitenav__list a {
    padding: 0.25rem 0; font-size: var(--fs-small);
    border-bottom: 2px solid transparent;
  }
  .sitenav__list li:last-child a { border-bottom: 2px solid transparent; }
  .sitenav__list a:hover { border-bottom-color: var(--action); }
  .sitenav__list a[aria-current="page"] { border-bottom-color: var(--action-dark); }
  .sitenav__cta { margin-top: 0; width: auto; white-space: nowrap; }
}

/* ------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------ */
.hero { padding-block: var(--sp-6) var(--sp-6); }
.hero__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-5); }
}
.hero h1 em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .lead { margin-top: var(--sp-4); max-width: 47ch; }
.hero__actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__note {
  margin-top: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--ink-soft);
}

/* ------------------------------------------------------------
   5. ELEMENTO FIRMA — dal form al tuo telefono, nei due esiti
   Non più sulla Hub: è l'hero della landing professionisti (markup in
   parcheggio/sim-filtro.html, JS in js/anim-filtro.js). .sim, .panel,
   .wabar, .simnote e .handoff__replay li riusa anche la sezione 5bis.
   Il blocco mostra due percorsi sulla stessa struttura: la richiesta
   che passa il filtro arriva fino alla tua chat, l'altra si ferma sul
   sito. Ogni scena è un pannello sovrapposto, così il percorso più
   lungo non aggiunge altezza.
   ------------------------------------------------------------ */
.handoff {
  position: relative;
  max-width: 380px; width: 100%; margin-inline: auto;
  aspect-ratio: 380 / 620;
  perspective: 1600px;
}
.panel {
  position: absolute; inset: 0;
  border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-panel);
  background: var(--card);
  display: flex; flex-direction: column;
  transition: opacity .5s ease, transform .55s cubic-bezier(.4,0,.2,1);
  backface-visibility: hidden;
}
.panel--wa { opacity: 0; transform: translateX(14%) scale(.94); pointer-events: none; }
.handoff.is-sent .panel--form { opacity: 0; transform: translateX(-12%) scale(.94); }
.handoff.is-sent .panel--wa   { opacity: 1; transform: none; }

/* --- Pannello 1: il form a step sul sito --- */
.panel--form,
.panel--esito {
  background-color: #E4F1E7;
  background-image:
    linear-gradient(rgba(43,168,74,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,168,74,.07) 1px, transparent 1px);
  background-size: 26px 26px;
}

.formbar {
  /* Non var(--grad-brand): sull'estremo chiaro il bianco starebbe a 2.3:1.
     Questa variante scurita tiene il bianco sopra il 5:1. */
  background: linear-gradient(135deg, var(--pine) 0%, var(--action-dark) 100%);
  color: #fff;
  padding: 0.7rem 0.9rem;
  display: flex; align-items: center; gap: 0.55rem;
  flex-shrink: 0;
}
.formbar__dot { width: 8px; height: 8px; border-radius: 50%; background: #7DF29B; flex-shrink: 0; }
.formbar__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .06em; }
.formbar__url { margin-left: auto; font-family: var(--font-mono); font-size: 0.64rem; }

.formbody {
  flex: 1; display: grid; place-items: center;
  padding: var(--sp-4) var(--sp-3);
}

.stepcard {
  width: 100%; background: #fff;
  border-radius: 16px; padding: 1.1rem 1rem 1rem;
  box-shadow: 0 8px 26px -14px rgba(16,22,20,.35);
}

.progress {
  height: 3px; border-radius: 999px;
  background: #E3E9E4; overflow: hidden; margin-bottom: 0.9rem;
}
.progress i {
  display: block; height: 100%; width: 25%;
  background: var(--action-dark); border-radius: 999px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

.stepcount {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); display: block; text-align: center;
  margin-bottom: 0.45rem;
}

.slides { position: relative; min-height: 176px; }
.slide {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.slide.is-active { opacity: 1; transform: none; }

.slide__q {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; text-align: center; line-height: 1.25;
  margin-bottom: 0.85rem;
}

.field {
  border: 1.5px solid var(--action-dark); border-radius: 10px;
  padding: 0.7rem 0.85rem; font-size: 0.88rem;
  color: var(--ink); min-height: 42px;
}
.field--empty { color: var(--ink-soft); border-color: var(--line); }
.field .caret {
  display: inline-block; width: 1.5px; height: 1em;
  background: var(--action-dark); vertical-align: -0.15em;
  margin-left: 1px; animation: caret 1s step-end infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.opts { display: flex; flex-direction: column; gap: 0.4rem; }
.opts span {
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.85rem; font-size: 0.85rem; font-weight: 500;
  text-align: center; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.opts span.is-picked {
  /* --action-dark, non --action: il bianco su #2BA84A sta a 3.09:1 */
  background: var(--action-dark); border-color: var(--action-dark); color: #fff;
}
/* Scelta che non passa il filtro: si vede subito, prima ancora
   dell'esito. Ambra piena, non un verde sbiadito. */
.opts span.is-blocked {
  background: var(--warn-bg); border-color: var(--warn-dot); color: var(--warn-ink);
}

.nextbtn {
  width: 100%; margin-top: 0.9rem;
  border: 0; cursor: default;
  /* A riposo NON si sbiadisce con opacity (era 1.25:1): cambia colore. */
  background: #E3E9E4; color: var(--ink-soft);
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem;
  padding: 0.8rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  transition: color .3s ease, background-color .3s ease;
}
.nextbtn.is-ready { background: var(--action-dark); color: #fff; }
.nextbtn.is-final { background: var(--action-dark); animation: pulse 1.5s ease-in-out 2; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,128,56,.45); }
  50%      { box-shadow: 0 0 0 11px rgba(30,128,56,0); }
}

/* --- Pannello 2: la chat WhatsApp Business ---
   Tre stati sul contenitore .handoff:
   .is-sent      il pannello WhatsApp entra, messaggio precompilato
   .is-delivered il cliente ha premuto invio: spunte + campo normale
   .is-replied   arriva il messaggio di benvenuto automatico
   ---------------------------------------------------------------- */
.wabar {
  background: var(--wa-header); color: #fff;
  padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.65rem;
}
.wabar__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: 0.9rem;
}
.wabar__id { min-width: 0; }
.wabar__name { font-weight: 600; font-size: 0.88rem; line-height: 1.2; display: block; }
.wabar__sub {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  opacity: .8; letter-spacing: .01em;
}

.wabody {
  flex: 1; background: var(--wa-bg);
  padding: var(--sp-3); display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.4rem;
  /* Come in una chat vera: se lo spazio non basta, e la parte alta a
     uscire dall'inquadratura, non la più recente. */
  min-height: 0; overflow: hidden;
}

/* La pillola di sistema che WhatsApp mostra in cima alle chat aziendali */
.wanote {
  align-self: center; margin-bottom: 0.2rem;
  background: var(--warn-bg); color: var(--warn-ink);
  border-radius: 8px; padding: 0.3rem 0.6rem;
  font-size: 0.63rem; line-height: 1.35; text-align: center;
  box-shadow: 0 1px 1px rgba(0,0,0,.07);
}
.wamsg {
  align-self: flex-end; max-width: 90%;
  background: var(--wa-out);
  border-radius: 12px; border-top-right-radius: 4px;
  padding: 0.6rem 0.75rem 0.4rem;
  font-size: 0.79rem; line-height: 1.55;
  white-space: pre-line;
  box-shadow: 0 1px 1px rgba(0,0,0,.09);
}
.wamsg b { font-weight: 700; }

/* In uscita: la richiesta precompilata dal form */
.wamsg--out { align-self: flex-end; }
.wamsg--out .ticks {
  margin-left: 0.3rem; font-style: normal; letter-spacing: -0.18em;
  color: #34B7F1; opacity: 0; transition: opacity .3s ease;
}
.handoff.is-delivered .wamsg--out .ticks { opacity: 1; }

/* In entrata: il messaggio di benvenuto automatico dell'app Business */
.panel--wa .wamsg--in {
  align-self: flex-start; max-width: 90%;
  background: var(--card);
  border-radius: 12px; border-top-right-radius: 12px; border-top-left-radius: 4px;
  white-space: normal;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.handoff.is-replied .panel--wa .wamsg--in { opacity: 1; transform: none; }
.wamsg__auto {
  display: block; margin-bottom: 0.25rem;
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: .04em; text-transform: uppercase;
  /* --action-dark sulla bolla verde sta a 4.35:1, --pine a 10.5:1 */
  color: var(--pine);
}
.wamsg .meta {
  display: block; text-align: right;
  font-family: var(--font-mono); font-size: 0.62rem;
  color: rgba(16,22,20,.65); margin-top: 0.2rem;
}
.wafoot {
  background: #F0F0F0; padding: 0.55rem 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.wafoot__field {
  flex: 1; min-width: 0; background: #fff; border-radius: 999px;
  padding: 0.5rem 0.85rem; font-size: 0.78rem; color: var(--ink-soft);
}
.wafoot__hint--sent { display: none; }
.handoff.is-delivered .wafoot__hint { display: none; }
.handoff.is-delivered .wafoot__hint--sent { display: inline; }
.wafoot__send {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--wa-header); color: #fff;
  display: grid; place-items: center; font-size: 0.95rem;
}

.handoff__replay {
  position: absolute; bottom: -2.4rem; left: 50%; transform: translateX(-50%);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft);
  padding: 0.3rem 0.6rem;
}
.handoff__replay:hover { color: var(--action-dark); }

/* --- Toggle dei due rami + indicatore di scena ---------------------
   .sim è il contenitore: porta la classe branch-ok / branch-ko, da cui
   dipende quale pannello può entrare e come si leggono gli step.
   ------------------------------------------------------------------ */
/* position: il pulsante "rivedi" sta fuori da .handoff (un role="img"
   non annuncia i controlli) e si ancora al fondo di .sim */
.sim { position: relative; max-width: 380px; width: 100%; margin-inline: auto; }

.sim__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem;
  background: #E7EDE8; border-radius: 12px; padding: 0.28rem;
}
.sim__tab {
  border: 0; cursor: pointer; border-radius: 9px;
  background: transparent; color: var(--ink-soft);
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
  line-height: 1.25; text-align: left;
  padding: 0.5rem 0.55rem;
  display: flex; align-items: flex-start; gap: 0.35rem;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.sim__tab:hover { color: var(--ink); }
.sim__tab.is-on {
  background: var(--card); color: var(--ink);
  box-shadow: 0 2px 8px -4px rgba(16,22,20,.35);
}
.sim__tabDot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  margin-top: 0.32em; background: var(--line);
  transition: background-color .25s ease;
}
.sim__tab[data-branch="ok"].is-on .sim__tabDot { background: var(--action-dark); }
.sim__tab[data-branch="ko"].is-on .sim__tabDot { background: var(--warn-dot); }

.scenes {
  list-style: none; margin: 0.7rem 0 0.55rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem;
}
.scene {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 0.58rem; line-height: 1.2;
  letter-spacing: .02em; text-align: center; color: var(--ink-soft);
}
/* La barretta è lo stato: spenta grigia, accesa verde. Niente opacity
   sul testo, che sotto il 3:1 non si legge più (vedi nota su .nextbtn). */
.scene i {
  display: block; width: 100%; height: 3px; border-radius: 999px;
  background: #D3DCD5;
  transition: background-color .35s ease;
}
.scene.is-on { color: var(--ink); }
.scene.is-on i { background: var(--action-dark); }
.scene.is-off i {
  background: repeating-linear-gradient(90deg, #C9D2CB 0 4px, transparent 4px 8px);
}
.scene__ok, .scene__ko { display: none; }
.branch-ok .scene__ok, .branch-ko .scene__ko { display: block; }


/* --- Quale pannello può entrare, e in che ordine --------------------
   Ogni scena è un pannello sovrapposto agli altri: la sequenza in più
   non aggiunge altezza, che su mobile è la risorsa scarsa.
   Stati sul contenitore .handoff, in ordine di comparsa:
   ramo in target  .is-sent → .is-delivered → .is-replied
                   → .is-notified → .is-opened → .is-labeled
   ramo fuori target  .is-stopped
   -------------------------------------------------------------------- */
.panel--form  { z-index: 1; }
.panel--wa,
.panel--esito { z-index: 2; }
.panel--phone { z-index: 3; }

.branch-ok .panel--esito { display: none; }
.branch-ko .panel--wa,
.branch-ko .panel--phone { display: none; }

.panel--esito,
.panel--phone { opacity: 0; transform: translateX(14%) scale(.94); pointer-events: none; }

.handoff.is-stopped  .panel--form  { opacity: 0; transform: translateX(-12%) scale(.94); }
.handoff.is-stopped  .panel--esito { opacity: 1; transform: none; }
.handoff.is-notified .panel--wa    { opacity: 0; transform: translateX(-12%) scale(.94); }
.handoff.is-notified .panel--phone { opacity: 1; transform: none; }

/* --- Pannello 2b: l'esito fuori criteri -----------------------------
   Stessa cornice del sito, non di WhatsApp: la richiesta non è mai
   diventata un messaggio, ed è esattamente il punto della scena.
   -------------------------------------------------------------------- */
.formbar__dot--stop { background: var(--warn-dot); }

.esitocard { text-align: center; }
.esitocard__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0 auto 0.6rem;
  border-radius: 50%; background: var(--warn-bg); color: var(--warn-ink);
  font-size: 0.95rem; line-height: 1;
}
.esitocard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; line-height: 1.25; margin-bottom: 0.5rem;
}
.esitocard__text { font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); }
.esitocard__text b { color: var(--ink); font-weight: 700; }
.esitocard__rule {
  margin-top: 0.85rem; padding: 0.6rem 0.7rem;
  border: 1px dashed var(--line); border-radius: 10px;
  background: var(--surface); text-align: left;
}
.esitocard__ruleLabel {
  display: block; font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.esitocard__ruleValue { display: block; font-size: 0.78rem; color: var(--ink); }

/* Nota a piè di pannello: è la voce che spiega, non interfaccia.
   Per questo sta fuori dalla card, in mono, su fondo pieno. */
.simnote {
  flex-shrink: 0; margin: 0; padding: 0.6rem 0.9rem;
  background: var(--warn-bg); color: var(--warn-ink);
  font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.45;
  text-align: center;
}
.simnote--ok { background: #DFF3E4; color: var(--pine); }
.simnote b { font-weight: 700; }

/* --- Pannello 3: il tuo telefono ------------------------------------
   Due schermate nello stesso pannello: prima la notifica sulla schermata
   di blocco, poi la chat vista dal tuo lato. La seconda entra con
   .is-opened, l'etichetta con .is-labeled.
   -------------------------------------------------------------------- */
.panel--phone { display: block; background: var(--pine-deep); }
.lock, .prochat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  transition: opacity .45s ease, transform .45s cubic-bezier(.4,0,.2,1);
}

.lock {
  background: linear-gradient(165deg, var(--pine) 0%, var(--pine-deep) 70%);
  color: #fff; align-items: center;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  /* Come su un telefono vero: orologio in alto, la notifica subito
     sotto. Il resto resta buio, non c'è niente da riempire. */
  justify-content: flex-start;
}
.handoff.is-opened .lock { opacity: 0; transform: scale(1.05); }

.lock__time {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.8rem; line-height: 1;
}
.lock__date {
  font-family: var(--font-mono); font-size: 0.66rem;
  color: rgba(255,255,255,.78); margin-top: 0.35rem;
}

.push {
  width: 100%; margin-top: var(--sp-4);
  background: rgba(255,255,255,.95); color: var(--ink);
  border-radius: 14px; padding: 0.7rem 0.8rem;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.8);
  display: flex; flex-direction: column; gap: 0.2rem;
  animation: push-in .5s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes push-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.push__app {
  display: flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
.push__app em { margin-left: auto; font-style: normal; }
.push__icon { font-size: 0.72rem; }
.push__from { font-weight: 700; font-size: 0.84rem; }
.push__body {
  font-size: 0.72rem; line-height: 1.4; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.prochat { opacity: 0; transform: translateY(12px); }
.handoff.is-opened .prochat { opacity: 1; transform: none; }

/* Dal tuo lato i ruoli si invertono: la richiesta è in entrata,
   il benvenuto automatico è un messaggio tuo, con le sue spunte. */
.wamsg--from {
  align-self: flex-start; background: var(--card);
  border-top-left-radius: 4px; border-top-right-radius: 12px;
}
.wamsg--mine .ticks {
  margin-left: 0.3rem; font-style: normal; letter-spacing: -0.18em;
  color: #34B7F1;
}

/* L'etichetta: funzione vera dell'app Business, si applica alla chat
   e resta accanto al nome del contatto. */
.tag {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 0.28rem;
  background: #DFF3E4; color: var(--pine);
  border-radius: 999px; padding: 0.22rem 0.5rem;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: .02em;
  opacity: 0; transform: scale(.7);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.5);
}
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--action-dark); }
.handoff.is-labeled .tag { opacity: 1; transform: none; }

.prochat .simnote {
  opacity: 0; transition: opacity .35s ease;
}
.handoff.is-labeled .prochat .simnote { opacity: 1; }

/* Su schermo piccolo il blocco guadagna toggle e indicatore in cima:
   il pannello si accorcia un po' per non allungare troppo l'hero. */
@media (max-width: 560px) {
  .handoff { aspect-ratio: 380 / 560; }
  .lock { padding-top: var(--sp-4); }
  .lock__time { font-size: 2.2rem; }
}


/* ------------------------------------------------------------
   5bis. PRIMA/DOPO — l'hero della Hub
   La stessa app WhatsApp Business due volte: cinque chat che non
   dicono niente, poi due richieste complete. Riusa la cornice della
   sezione 5 (.sim, .sim__tab, .panel, .wabar, .simnote) e aggiunge
   solo la lista chat.
   Stati: .is-after su .inbox passa alla seconda vista; .is-in su
   .chat la fa arrivare; .is-shown sulla nota. .is-js lo mette il JS:
   senza, tutto resta visibile e fermo sul "prima".
   ------------------------------------------------------------ */
.compare { position: relative; }

.inbox {
  position: relative;
  width: 100%; margin-top: 0.7rem;
  aspect-ratio: 380 / 500;
}
.inbox .panel { background: var(--card); }

.panel--dopo { opacity: 0; transform: translateX(14%) scale(.94); pointer-events: none; z-index: 2; }
.inbox.is-after .panel--prima { opacity: 0; transform: translateX(-12%) scale(.94); }
.inbox.is-after .panel--dopo  { opacity: 1; transform: none; }

.sim__tab[data-view="prima"].is-on .sim__tabDot { background: var(--warn-dot); }
.sim__tab[data-view="dopo"].is-on  .sim__tabDot { background: var(--action-dark); }

.chats {
  list-style: none; margin: 0; padding: 0;
  flex: 1; min-height: 0; overflow: hidden;
}
.chat {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 0.65rem; align-items: center;
  padding: 0.62rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
/* Le chat arrivano in cima, come in WhatsApp: display e non opacity,
   così la nuova spinge giù le altre invece di lasciare un buco. */
.inbox.is-js .chat { display: none; }
.inbox.is-js .chat.is-in { display: grid; animation: chat-in .4s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes chat-in {
  from { opacity: 0; transform: translateY(-10px); background: #EAF6ED; }
  to   { opacity: 1; transform: none; background: transparent; }
}

.chat__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #E7EDE8; color: var(--pine);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.chat__main { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.chat__name { font-weight: 600; font-size: 0.86rem; line-height: 1.25; }
.chat__text {
  font-size: 0.78rem; line-height: 1.4; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Nel "dopo" l'anteprima è la richiesta intera: si legge senza aprirla */
.chat--full { align-items: start; }
.chat--full .chat__text { white-space: pre-line; color: var(--ink); }
.chat--full .chat__text b { font-weight: 700; }

.chat__side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem;
  align-self: start; padding-top: 0.1rem;
}
/* --action-dark sul bianco sta a 5:1; --action non passerebbe */
.chat__time { font-family: var(--font-mono); font-size: 0.62rem; color: var(--action-dark); }
.chat__unread {
  min-width: 19px; height: 19px; padding-inline: 0.3rem;
  border-radius: 999px; background: var(--action-dark); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
}

.inbox.is-js .simnote { opacity: 0; transition: opacity .35s ease; }
.inbox.is-js .simnote.is-shown { opacity: 1; }

/* Il pulsante sta fuori da .inbox: ancorato al fondo di .compare */
.compare .handoff__replay { bottom: -2.2rem; }

@media (max-width: 560px) {
  .inbox { aspect-ratio: 380 / 510; }
  .chat { padding-block: 0.55rem; }
}


/* ------------------------------------------------------------
   5ter. ORDINE — l'hero della landing ristorazione
   Stessa cornice della sezione 5 (.sim, .handoff, .panel--form,
   --wa, --phone e i loro stati), due rami diversi: .branch-asporto
   e .branch-tavolo su .sim. Qui si aggiungono solo il menù con le
   quantità, il contatore dei coperti e i contenuti per ramo.
   JS in js/anim-ordine.js.
   ------------------------------------------------------------ */
.sim__tab[data-branch="asporto"].is-on .sim__tabDot,
.sim__tab[data-branch="tavolo"].is-on  .sim__tabDot { background: var(--action-dark); }

/* Cosa appartiene a un ramo solo: messaggio, notifica, etichetta */
.branch-asporto .only-tavolo,
.branch-tavolo  .only-asporto { display: none; }

/* Il menù con il totale è più alto di una domanda a scelta */
.slides--tall { min-height: 206px; }
.menu { display: flex; flex-direction: column; gap: 0.3rem; }
.menu__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0.42rem 0.6rem; font-size: 0.8rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.menu__row.is-on { border-color: var(--action-dark); background: #EFF8F1; }
.menu__name { font-weight: 600; }
.menu__price { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-soft); }
.menu__step {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-mono); font-size: 0.72rem;
}
.menu__step i {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); color: var(--ink-soft); line-height: 1;
}
.menu__step i + .menu__qty + i { border-color: var(--action-dark); color: var(--action-dark); }
.menu__qty { min-width: 1ch; text-align: center; font-weight: 500; }
.menu__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.35rem; padding-top: 0.4rem; border-top: 1px dashed var(--line);
  font-size: 0.8rem; font-weight: 600;
}
.menu__total b { font-family: var(--font-mono); font-size: 0.86rem; color: var(--pine); }

.counter {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  margin-top: 0.4rem;
}
.counter i {
  font-style: normal; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  border: 1.5px solid var(--line); color: var(--ink-soft);
}
.counter i:last-child { border-color: var(--action-dark); color: var(--action-dark); }
.counter__n {
  font-family: var(--font-display); font-weight: 700; font-size: 2.2rem;
  min-width: 2ch; text-align: center; line-height: 1;
}
.counter__unit {
  display: block; text-align: center; margin-top: 0.4rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}


/* ------------------------------------------------------------
   6. STRISCIA "SENZA API"
   ------------------------------------------------------------ */
.strip { border-block: 1px solid var(--line); background: var(--card); }
.strip__inner {
  padding-block: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
  text-align: center;
}
.strip__inner b { color: var(--action-dark); font-weight: 500; }

/* ------------------------------------------------------------
   7. INTESTAZIONI DI SEZIONE CENTRATE
   ------------------------------------------------------------ */
.section-head { text-align: center; margin-bottom: var(--sp-5); }
.section-head .lead { margin: var(--sp-3) auto 0; max-width: 52ch; }

/* ------------------------------------------------------------
   7bis. PIPELINE 16/9 — il flusso si biforca dopo l'invio
   Ramo alto: messaggio precompilato -> chat WhatsApp Business
   Ramo basso: automazione -> archivio
   Sotto i 860px il 16/9 diventa illeggibile: la scena si impila.
   ------------------------------------------------------------ */
.pipeline {
  position: relative;
  max-width: 1000px; margin-inline: auto;
  background: var(--ink);
  border: 1px solid rgba(244,247,244,.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--surface);
  padding: clamp(1rem, 2.4vw, 1.7rem);
}
@media (min-width: 860px) { .pipeline { aspect-ratio: 16 / 9; } }

.pipeline::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(127,217,164,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,217,164,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.pipeline__inner {
  position: relative; height: 100%;
  display: grid; grid-template-rows: 1fr auto;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}

.pipeline__stages {
  display: grid; gap: clamp(0.45rem, 1.2vw, 0.85rem);
  grid-template-columns: 1fr;
  align-content: center;
}
@media (min-width: 860px) {
  /* dove -> link -> domande+filtro -> link -> chat, una riga sola */
  .pipeline__stages {
    grid-template-columns: 1fr 0.3fr 1.05fr 0.3fr 1.05fr;
    grid-template-rows: 1fr;
    align-items: stretch;
  }
}

.stage { min-width: 0; display: flex; flex-direction: column; }
.stage__label {
  font-family: var(--font-mono); font-size: 0.61rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #7FD9A4; margin-bottom: 0.4rem; display: block;
}
.stage__box {
  background: rgba(244,247,244,.05);
  border: 1px solid rgba(244,247,244,.14);
  border-radius: 11px; padding: 0.6rem;
  flex: 1;
  transition: border-color .4s ease, background-color .4s ease;
}
.stage.is-live .stage__box {
  border-color: rgba(69,194,94,.55);
  background: rgba(69,194,94,.08);
}

/* --- Stadio 1: una pagina web qualsiasi ---
   Il punto della sezione: non serve un sito complesso, serve un
   riquadro dentro qualcosa che hai già online. */
.pagetabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.45rem; }
.pagetabs span {
  font-family: var(--font-mono); font-size: 0.55rem;
  padding: 0.15rem 0.4rem; border-radius: 5px;
  background: rgba(244,247,244,.08); color: rgba(244,247,244,.68);
  transition: background-color .3s ease, color .3s ease;
}
.pagetabs span.is-on { background: rgba(69,194,94,.2); color: #9BEBB8; }

.pagemock {
  border: 1px solid rgba(244,247,244,.16);
  border-radius: 8px; overflow: hidden;
  background: rgba(244,247,244,.04);
}
.pagemock__bar {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid rgba(244,247,244,.12);
  font-family: var(--font-mono); font-size: 0.54rem;
  color: rgba(244,247,244,.62);
}
.pagemock__dots { display: flex; gap: 2px; flex-shrink: 0; }
.pagemock__dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(244,247,244,.25); }
.pagemock__body { padding: 0.45rem; display: flex; flex-direction: column; gap: 0.28rem; }
.pagemock__line { height: 4px; border-radius: 2px; background: rgba(244,247,244,.13); }
.pagemock__line--title { height: 7px; width: 62%; background: rgba(244,247,244,.22); }
.pagemock__line--short { width: 45%; }
.pagemock__slot {
  margin-top: 0.35rem; border-radius: 6px;
  border: 1px dashed rgba(69,194,94,.45);
  background: rgba(69,194,94,.08);
  padding: 0.4rem 0.3rem;
  font-family: var(--font-mono); font-size: 0.55rem;
  color: #9BEBB8; text-align: center;
  transition: background-color .35s ease, border-color .35s ease;
}
.stage--where.is-live .pagemock__slot {
  border-style: solid; border-color: var(--action-lite);
  background: rgba(69,194,94,.2);
}

/* --- Stadio sorgente: il form a step --- */
.mini__bar {
  height: 3px; border-radius: 999px; background: rgba(244,247,244,.16);
  overflow: hidden; margin-bottom: 0.5rem;
}
.mini__bar i {
  display: block; height: 100%; width: 25%;
  background: var(--action-lite); transition: width .5s ease;
}
.mini__q { font-size: 0.78rem; font-weight: 600; margin-bottom: 0.4rem; }
.mini__field {
  border: 1px solid rgba(244,247,244,.22); border-radius: 7px;
  padding: 0.35rem 0.5rem; font-size: 0.73rem;
  color: rgba(244,247,244,.9); min-height: 27px;
}
.mini__cta {
  /* Come .nextbtn: lo stato "non pronto" è un colore, non una opacity.
     Con opacity .4 il testo stava a 1.92:1. */
  margin-top: 0.5rem;
  background: rgba(244,247,244,.12); color: rgba(244,247,244,.85);
  border-radius: 7px; padding: 0.38rem; text-align: center;
  font-size: 0.72rem; font-weight: 600;
  transition: background-color .35s ease, color .35s ease;
}
.mini__cta.is-ready { background: var(--action-dark); color: #fff; }

/* --- Lo stadio filtro: i criteri applicati alle risposte --- */
.filtro {
  margin-top: 0.5rem;
  border: 1px dashed rgba(244,247,244,.22);
  border-radius: 11px;
  padding: 0.5rem 0.6rem;
  transition: border-color .4s ease, background-color .4s ease;
}
.filtro.is-live {
  border-style: solid;
  border-color: rgba(69,194,94,.5);
  background: rgba(69,194,94,.07);
}
.filtro__label {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #7FD9A4;
}
.filtro__chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.filtro__chips li {
  font-family: var(--font-mono); font-size: 0.6rem;
  padding: 0.2rem 0.45rem; border-radius: 999px;
  border: 1px solid rgba(244,247,244,.2);
  color: rgba(244,247,244,.55);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.filtro__chips li.is-on {
  color: #EAFBF0;
  border-color: rgba(69,194,94,.6);
  background: rgba(69,194,94,.18);
}
.filtro__chips li.is-on::before { content: "\2713 "; }
.filtro__verdict {
  margin-top: 0.45rem;
  font-family: var(--font-mono); font-size: 0.6rem;
  color: rgba(244,247,244,.62);
  transition: color .3s ease;
}
.filtro__verdict.is-pass { color: var(--action-lite); }

/* --- Da qui in giù: componenti NON usati dalla Hub ---
   La biforcazione, il telefono del cliente, l'automazione Make e
   l'archivio sono usciti da #flusso (il ramo automazione lo
   raccontiamo altrove). Regole tenute: servono a quel contesto e
   alle due landing, che partono da questo stesso stylesheet.
   ------------------------------------------------------------ */

/* --- La biforcazione --- */
.fork { position: relative; display: grid; place-items: center; }
.fork__svg { width: 100%; height: 100%; overflow: visible; }
.fork__path {
  fill: none; stroke: rgba(244,247,244,.3);
  stroke-width: 1.2; stroke-dasharray: 5 5;
}
.fork__pulse {
  fill: none; stroke: var(--action-lite); stroke-width: 1.8;
  stroke-dasharray: 220; stroke-dashoffset: 220;
}
.fork.is-running .fork__pulse { animation: draw 1s ease-in-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.fork__badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink); border: 1px solid rgba(127,217,164,.4);
  color: #7FD9A4; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: .07em; padding: 0.18rem 0.45rem;
  white-space: nowrap;
}
@media (max-width: 859px) {
  .fork { min-height: 46px; }
  .fork__svg { display: none; }
  .fork__badge { position: static; transform: none; justify-self: center; }
}

/* --- Connettori dritti --- */
.link { position: relative; display: grid; place-items: center; min-height: 40px; }
.link__line {
  width: 100%; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(244,247,244,.3) 0 5px, transparent 5px 10px);
}
.link__dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--action-lite);
  box-shadow: 0 0 0 5px rgba(69,194,94,.18);
  opacity: 0; left: 2%;
}
.link.is-running .link__dot { animation: travel .9s ease-in-out forwards; }
@keyframes travel {
  0%   { opacity: 0; left: 2%; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; left: 92%; }
}
@media (max-width: 859px) {
  .link__line {
    width: 1px; height: 34px;
    background: repeating-linear-gradient(180deg, rgba(244,247,244,.3) 0 5px, transparent 5px 10px);
  }
  .link.is-running .link__dot { animation: travel-v .9s ease-in-out forwards; }
  @keyframes travel-v {
    0%   { opacity: 0; top: 0; left: 50%; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; top: 84%; left: 50%; }
  }
}

/* --- Ramo alto: telefono del cliente --- */
.phonebox { display: flex; flex-direction: column; gap: 0.4rem; }
.wabubble {
  background: var(--wa-out); color: #10160F;
  border-radius: 10px; border-top-right-radius: 3px;
  padding: 0.45rem 0.55rem; font-size: 0.63rem; line-height: 1.5;
  white-space: pre-line; align-self: flex-end; max-width: 96%;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.wabubble.is-shown { opacity: 1; transform: none; }
.wabubble b { font-weight: 700; }

.tapsend {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.58rem;
  color: rgba(244,247,244,.55);
  opacity: 0; transition: opacity .35s ease;
}
.tapsend.is-shown { opacity: 1; }
.tapsend em {
  font-style: normal;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--wa-header); color: #fff;
  display: grid; place-items: center; font-size: 0.6rem;
  animation: pulse 1.5s ease-in-out infinite;
}

/* --- Ramo alto: la tua chat WhatsApp Business --- */
.chatbox { display: flex; flex-direction: column; gap: 0.35rem; }
.chatbox__head {
  display: flex; align-items: center; gap: 0.4rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid rgba(244,247,244,.12);
  font-size: 0.68rem; font-weight: 600;
}
.chatbox__badge {
  margin-left: auto; background: var(--action-dark);
  color: #fff; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.55rem;
  padding: 0.1rem 0.35rem;
  opacity: 0; transform: scale(.6);
  transition: opacity .3s ease, transform .3s ease;
}
.chatbox__badge.is-shown { opacity: 1; transform: none; }
.chat-in {
  background: rgba(244,247,244,.9); color: #10160F;
  border-radius: 10px; border-top-left-radius: 3px;
  padding: 0.42rem 0.55rem; font-size: 0.61rem; line-height: 1.45;
  white-space: pre-line; align-self: flex-start; max-width: 96%;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.chat-in.is-shown { opacity: 1; transform: none; }
.chat-in b { font-weight: 700; }

.chatbox__sub {
  display: block; font-family: var(--font-mono); font-size: 0.5rem;
  font-weight: 400; color: rgba(244,247,244,.62);
  letter-spacing: .04em; margin-top: 0.05rem;
}

/* Il benvenuto automatico: esce dal tuo numero senza che tu tocchi niente */
.chat-auto {
  background: var(--wa-out); color: #10160F;
  border-radius: 10px; border-top-right-radius: 3px;
  padding: 0.42rem 0.55rem; font-size: 0.6rem; line-height: 1.45;
  align-self: flex-end; max-width: 96%;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.chat-auto.is-shown { opacity: 1; transform: none; }
.chat-auto__label {
  display: block; margin-bottom: 0.15rem;
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--pine);   /* --action-dark starebbe a 4.35:1 sul verde bolla */
}

/* --- Ramo basso: automazione --- */
.autobox { text-align: center; display: grid; place-content: center; height: 100%; }
.autobox__ring {
  width: 40px; height: 40px; margin: 0 auto 0.4rem;
  border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(244,247,244,.2); font-size: 0.95rem;
  transition: border-color .4s ease;
}
.stage--auto.is-live .autobox__ring {
  border-color: var(--action-lite);
  animation: spin 1.3s linear 1;
}
@keyframes spin { to { transform: rotate(360deg); } }
.autobox__name { font-size: 0.74rem; font-weight: 600; }
.autobox__meta {
  font-family: var(--font-mono); font-size: 0.58rem;
  color: rgba(244,247,244,.62); margin-top: 0.15rem;
}
.stage--auto.is-live .autobox__meta { color: #7FD9A4; }

/* --- Ramo basso: archivio --- */
.sheet { font-size: 0.63rem; }
.sheet__tabs { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; }
.sheet__tabs span {
  font-family: var(--font-mono); font-size: 0.55rem;
  padding: 0.15rem 0.4rem; border-radius: 5px;
  background: rgba(244,247,244,.08); color: rgba(244,247,244,.68);
}
.sheet__tabs span.is-on { background: rgba(69,194,94,.2); color: #9BEBB8; }

.sheet__row {
  display: grid; grid-template-columns: 1.9fr 2.2fr 1fr;
  gap: 0.35rem; padding: 0.28rem 0.3rem;
  border-bottom: 1px solid rgba(244,247,244,.09);
  align-items: center;
}
.sheet__row--head {
  font-family: var(--font-mono); font-size: 0.53rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(244,247,244,.62);
}
.sheet__row--old { color: rgba(244,247,244,.62); }
.sheet__row--new {
  opacity: 0; transform: translateY(-6px);
  background: rgba(69,194,94,.16); border-radius: 6px;
  transition: opacity .4s ease, transform .4s ease;
}
.sheet__row--new.is-shown { opacity: 1; transform: none; }
.sheet__tag {
  justify-self: start;
  font-family: var(--font-mono); font-size: 0.53rem;
  padding: 0.1rem 0.35rem; border-radius: 999px;
  background: rgba(244,247,244,.12); color: rgba(244,247,244,.8);
}
.sheet__tag--new { background: var(--action-dark); color: #fff; }

/* --- Esiti --- */
.outcomes {
  display: grid; gap: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid rgba(244,247,244,.14);
  padding-top: clamp(0.6rem, 1.4vw, 0.9rem);
}
.outcome {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.68rem; line-height: 1.3;
  color: rgba(244,247,244,.62);
  transition: color .4s ease;
}
.outcome em {
  font-style: normal; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; font-size: 0.75rem;
  background: rgba(244,247,244,.07);
  transition: background-color .4s ease, transform .35s ease;
}
.outcome.is-on { color: var(--surface); }
.outcome.is-on em { background: var(--action); transform: scale(1.08); }

.pipeline__replay {
  position: absolute; top: 0.65rem; right: 0.75rem; z-index: 2;
  background: rgba(244,247,244,.08); border: 0; cursor: pointer;
  color: rgba(244,247,244,.6); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6rem;
  padding: 0.28rem 0.55rem;
}
.pipeline__replay:hover { color: var(--surface); background: rgba(244,247,244,.16); }

@media (prefers-reduced-motion: reduce) {
  .link.is-running .link__dot { animation: none; opacity: 1; left: 46%; }
  .fork.is-running .fork__pulse { animation: none; stroke-dashoffset: 0; }
  .stage--auto.is-live .autobox__ring { animation: none; }
  .tapsend em { animation: none; }
}

/* ------------------------------------------------------------
   8. LA FORMULA — il funnel in quattro passaggi
   Su mobile è una colonna con la linea di continuità a sinistra,
   da 860px diventa una banda orizzontale.
   ------------------------------------------------------------ */
.formula {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
  counter-reset: none;
}
@media (min-width: 860px) {
  .formula { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
}

.formula__step {
  position: relative;
  padding-left: calc(var(--sp-4) + 1.6rem);
}
@media (min-width: 860px) {
  .formula__step { padding-left: 0; padding-top: calc(var(--sp-4) + 0.4rem); }
}

.formula__num {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--action);
  color: var(--action-dark);
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500;
  z-index: 1;
}

/* La linea che tiene insieme i quattro passaggi */
.formula__step::before {
  content: ""; position: absolute;
  left: calc(1.05rem - 1px); top: 2.1rem; bottom: calc(var(--sp-4) * -1);
  width: 2px; background: var(--line);
}
.formula__step:last-child::before { display: none; }
@media (min-width: 860px) {
  .formula__step::before {
    left: 2.1rem; right: calc(var(--sp-3) * -1);
    top: calc(1.05rem - 1px); bottom: auto;
    width: auto; height: 2px;
  }
}

.formula__step h3 { margin-bottom: var(--sp-2); }
.formula__step p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ------------------------------------------------------------
   8bis. VANTAGGI
   NON usata dalla Hub (che si ferma al bivio): tenuta qui perché
   le due landing verticali partono da questo stesso stylesheet.
   ------------------------------------------------------------ */
.benefits__head { max-width: 46ch; margin-bottom: var(--sp-6); }
.benefits__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.benefit {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
}
/* Sei card: su tre colonne tornano pari, su quattro ne restano due orfane */
.benefits__grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.benefit h3 { margin-bottom: var(--sp-2); }
.benefit p { color: var(--ink-soft); font-size: var(--fs-small); }
.benefit__mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--action) 12%, transparent);
  color: var(--action-dark); font-size: 1rem;
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------
   8ter. PER CHI È — i mestieri, nella landing professionisti
   Ogni card: il messaggio vago di oggi (bolla come in chat), le
   domande del form, cosa si ferma (con i token dello stato "fuori
   dai criteri", gli stessi dell'animazione).
   ------------------------------------------------------------ */
.fit__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.fit {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
  display: flex; flex-direction: column;
}
.fit__mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: #E4F1E7; font-size: 1.1rem;
  margin-bottom: var(--sp-3);
}
.fit__who { margin-top: 0.2rem; font-size: var(--fs-small); color: var(--ink-soft); }
.fit__label {
  margin-top: var(--sp-4); margin-bottom: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .07em; color: var(--action-dark);
}
/* La bolla in entrata, come la vedresti su WhatsApp Business */
.fit__msg {
  align-self: flex-start; max-width: 95%;
  background: var(--wa-bg); color: var(--ink);
  border-radius: 12px; border-top-left-radius: 4px;
  padding: 0.55rem 0.8rem; font-size: 0.9rem; line-height: 1.45;
}
.fit__asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.fit__asks li {
  position: relative; padding-left: 1.4rem;
  font-size: var(--fs-small);
}
.fit__asks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--action-dark); font-weight: 700;
}
/* margin-top auto: le tre note si allineano in fondo anche se le
   card hanno testi di lunghezza diversa */
.fit__stop {
  margin-top: auto; padding-top: var(--sp-4);
  font-size: var(--fs-small); line-height: 1.5;
}
.fit__stop b { color: var(--warn-ink); }
.fit__stop::before {
  content: ""; display: block; height: 0; margin-bottom: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.fit__more {
  margin: var(--sp-5) auto 0; max-width: 60ch; text-align: center;
  font-size: var(--fs-small); color: var(--ink-soft);
}


/* ------------------------------------------------------------
   9. COME FUNZIONA
   ------------------------------------------------------------ */
.how { background: var(--ink); color: var(--surface); }
.how .eyebrow { color: #7FD9A4; }
.how h2 { max-width: 22ch; }
.how__head { margin-bottom: var(--sp-6); }
.how__steps { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 820px) { .how__steps { grid-template-columns: repeat(3, 1fr); } }

.step { padding-top: var(--sp-4); border-top: 1px solid rgba(244,247,244,.18); }
.step__num {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  color: #7FD9A4; letter-spacing: .08em;
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { color: rgba(244,247,244,.68); font-size: var(--fs-small); }
.step__note {
  margin-top: var(--sp-4); padding: 0.7rem 0.85rem;
  background: rgba(244,247,244,.06); border-left: 2px solid var(--action-lite);
  border-radius: 10px; font-family: var(--font-mono);
  font-size: 0.78rem; color: rgba(244,247,244,.85);
}

/* ------------------------------------------------------------
   10. BIVIO — le due landing verticali
   ------------------------------------------------------------ */
.split__head { text-align: center; max-width: 54ch; margin: 0 auto var(--sp-5); }
.split__head .lead { margin-top: var(--sp-3); }

.split__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .split__grid { grid-template-columns: 1fr 1fr; } }

.split__card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.split__card:hover {
  transform: translateY(-3px);
  border-color: var(--action);
  box-shadow: 0 18px 40px -26px rgba(16,22,20,.55);
}
.split__tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--action-dark);
  background: color-mix(in srgb, var(--action) 12%, transparent);
  border-radius: 999px; padding: 0.3rem 0.75rem;
  margin-bottom: var(--sp-3);
}
/* L'h3 qui è una domanda, non un'etichetta: sta sotto la misura di un h2. */
.split__card h3 {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem);
  margin-bottom: var(--sp-3);
}
.split__lead { color: var(--ink-soft); font-size: var(--fs-small); }

.split__list {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.split__list li {
  position: relative; padding-left: 1.35rem;
  font-size: var(--fs-small); font-weight: 500;
}
.split__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--action);
}

.split__cta {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-weight: 600; font-size: var(--fs-small);
  color: var(--action-dark);
  display: flex; align-items: center; gap: 0.45em;
}
.split__cta em { font-style: normal; transition: transform .18s ease; }
.split__card:hover .split__cta em { transform: translateX(4px); }

/* ------------------------------------------------------------
   11. DEMO
   Non usata dalla Hub (che non ospita un form): tenuta qui perché
   le due landing verticali partono da questo stesso stylesheet.
   ------------------------------------------------------------ */
.demo__head { text-align: center; max-width: 54ch; margin: 0 auto var(--sp-5); }
.demo__head .lead { margin-top: var(--sp-3); }
.demo__stage {
  background: var(--surface); border: 2px solid var(--wa-header);
  border-radius: var(--radius-lg);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  max-width: 460px; margin-inline: auto;
  min-height: auto; display: grid;
  place-items: center;
  box-shadow: var(--shadow-panel);
  position: relative;
}
.demo__brand {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 100%;
  pointer-events: none;
}
.demo__brand img {
  max-width: 180px;
  width: 100%;
  height: auto;
  opacity: 0.9;
}
.demo__label {
  position: absolute;
  top: 4.2rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.demo__stage [data-wa-form] {
  width: 100%;
  margin-top: 7rem;
}
/* Variante senza logo: l'etichetta sale e il form non deve più lasciargli spazio */
.demo__stage--plain .demo__label { top: 1.2rem; white-space: nowrap; }
.demo__stage--plain [data-wa-form] { margin-top: 3.2rem; }
.demo__stage iframe { width: 100%; min-height: 640px; border: 0; border-radius: var(--radius); }
.demo__fine { margin-top: var(--sp-4); text-align: center; font-size: 0.8rem; color: var(--ink-soft); }

.legal-page {
  padding-block: var(--sp-7);
}
.legal-shell {
  width: min(100% - 2rem, 980px);
  margin-inline: auto;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.legal-header {
  padding: clamp(1.5rem, 2vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(18,61,46,.03), rgba(69,194,94,.08));
}
.legal-header .eyebrow { margin-bottom: 0.8rem; }
.legal-header h1 {
  font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
  margin-bottom: 0.65rem;
}
.legal-header .lead {
  max-width: 62ch;
  margin: 0;
}
.legal-content {
  padding: clamp(1.3rem, 2vw, 2rem);
}
.legal-content > * + * {
  margin-top: 1.4rem;
}
.legal-section {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.legal-section:first-child {
  border-top: none;
  padding-top: 0;
}
.legal-section h2 {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  margin-bottom: 0.7rem;
}
.legal-content p,
.legal-content li,
.legal-content dd,
.legal-content dt {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}
.legal-content ul,
.legal-content ol {
  padding-left: 1.15rem;
  margin: 0.8rem 0 0;
}
.legal-content dl {
  margin: 0.8rem 0 0;
}
.legal-content dt {
  font-weight: 700;
  color: var(--ink);
}
.legal-content dd {
  margin: 0.2rem 0 0.8rem 1rem;
}
.legal-content a {
  color: var(--pine);
  text-decoration: underline;
}
.legal-content .note {
  background: rgba(69,194,94,.07);
  border: 1px solid rgba(69,194,94,.2);
  border-radius: 14px;
  padding: 0.9rem 1rem;
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(16,22,20,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 45px -24px rgba(16,22,20,.5);
  backdrop-filter: blur(12px);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ink);
}
.cookie-banner__content p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.cookie-banner__content a {
  color: var(--pine);
  font-weight: 600;
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cookie-banner .btn {
  min-width: 110px;
}

@media (max-width: 640px) {
  .cookie-banner {
   flex-direction: column;
   align-items: stretch;
   left: 0.75rem;
   right: 0.75rem;
   bottom: 0.75rem;
  }
  .cookie-banner__actions {
   width: 100%;
  }
  .cookie-banner .btn {
   flex: 1 1 0;
  }
}

/* ------------------------------------------------------------
   12bis. INFO E CONTATTI — pagina /contatti/
   Bio con foto, poi lo spazio per il form Tally. Finché la foto e
   il form non ci sono, i due riquadri tratteggiati dicono cosa va
   dove: si vedono, così non si pubblica un buco per sbaglio.
   ------------------------------------------------------------ */
.about { padding-top: var(--sp-6); }
.about__grid { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 820px) {
  .about__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-6); }
  .about__photo { max-width: 420px; }
}
/* Su mobile la foto sta sopra il testo: piccola, per non spingere
   il "Ciao, sono Laura" sotto la piega */
.about__photo {
  width: 100%; max-width: 220px; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); object-fit: cover;
  box-shadow: var(--shadow-panel);
}
.about__photo--empty {
  display: grid; place-items: center;
  background: var(--card); border: 2px dashed var(--line); box-shadow: none;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
}
.about__text h1 { margin-top: var(--sp-2); }
.about__text .lead { margin-top: var(--sp-4); max-width: 52ch; }
.about__bio { margin-top: var(--sp-4); max-width: 60ch; }
.about__bio p + p { margin-top: var(--sp-3); }
.about__facts {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-2);
  border-top: 1px solid var(--line); padding-top: var(--sp-4);
}
.about__facts b {
  display: inline-block; min-width: 9ch; margin-right: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; color: var(--action-dark);
}

.tally-wrap {
  max-width: 640px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  box-shadow: var(--shadow-panel);
}
/* L'iframe di Tally si adatta in altezza da solo (dynamicHeight):
   qui basta che occupi tutta la larghezza */
.tally-wrap iframe { display: block; width: 100%; border: 0; }
.tally-slot {
  min-height: 320px; display: grid; place-content: center; gap: var(--sp-2);
  border: 2px dashed var(--line); border-radius: var(--radius);
  text-align: center; padding: var(--sp-4);
}
.tally-slot__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); }
.tally-slot__text { font-size: var(--fs-small); color: var(--ink-soft); max-width: 40ch; }
.contact-alt {
  margin-top: var(--sp-4); text-align: center;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.contact-alt a { color: var(--pine); font-weight: 600; }


/* ------------------------------------------------------------
   12. CONTATTO
   ------------------------------------------------------------ */
.contact { background: var(--pine); color: #fff; }
.contact__inner { display: grid; gap: var(--sp-5); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) { .contact__inner { grid-template-columns: 1.3fr auto; } }
.contact .eyebrow { color: #8FE3B4; }
.contact p { color: rgba(255,255,255,.75); margin-top: var(--sp-3); max-width: 48ch; }
.contact__about {
  margin-top: var(--sp-3);
  max-width: 38ch;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
}
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--sp-5); font-size: var(--fs-small); color: var(--ink-soft); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center; }
.site-footer__logo { height: 26px; width: auto; opacity: .7; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   14. MOTION RIDOTTO
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .slide.is-active { opacity: 1 !important; transform: none !important; }
  .nextbtn { opacity: 1 !important; }
  .field .caret { display: none; }
  .split__card:hover { transform: none; }
  .wamsg--in { opacity: 1 !important; transform: none !important; }
  .prochat, .tag, .prochat .simnote { opacity: 1 !important; transform: none !important; }
  .push { animation: none; }
  .inbox.is-js .chat.is-in { animation: none; }
  .inbox.is-js .simnote { opacity: 1; }
}