/* HELLOAI v1.2 in produzione: le poche regole aggiunte al pacchetto del design system.
 * Era lo <style> in linea dell'head (ora qui, per la CSP) + i pezzi che sostituiscono i segnaposto. */
html { scroll-behavior: auto !important; }
/* «Parliamone» sempre visibile a destra, anche sulla parte scura della storia (Sok 2026-09-11). */
.sx .story-header .header-cta,
.sx .story-header.is-light .header-cta { display: inline-flex; }
.sx .story-brand { margin-right: auto; }
.sx .story-header .header-cta {
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}
.sx .story-header .header-cta .icon { width: 18px; height: 18px; }

/* Sottotitoli delle scene scure e «Scorri la tua giornata» in bianco. Erano grigi perché la regola
 * globale `p { color: var(--body) }` di styles.css batte il bianco ereditato dalla scena. */
.sx .scene-copy[data-copy="0"] .scene-subtitle,
.sx .scene-copy[data-copy="1"] .scene-subtitle,
.sx .scene-copy[data-copy="5"] .scene-subtitle,
.sx .scene-copy[data-copy="6"] .scene-subtitle {
  color: #fff;
  opacity: 1;
  font-weight: 500;
  text-shadow: 0 1px 14px #061426d9;
}
.sx .intro-scroll p { color: #fff; }
.sx .intro-scroll small { opacity: .75; }

/* Freccia di «Scorri»: giù col mouse, su col dito (su mobile si spinge in su per scendere). */
.sx .intro-scroll .ico-up { display: none; }
@media (max-width: 760px) {
  .sx .intro-scroll .ico-down { display: none; }
  .sx .intro-scroll .ico-up { display: block; }
}

/* Loghi ufficiali (Simple Icons, CC0) dentro lo stesso cerchio da 60px degli altri canali. */
.logo-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px #0759eb14;
}
.logo-circle img {
  width: 30px;
  height: 30px;
}

/* Testimonianze di esempio: iniziali, nessuna foto finta. */
.testi-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--blue);
  font-weight: 800;
  font-size: 1.3rem;
}

/* «Provalo adesso»: il telefono della prova dal vivo sopra la barra dei comandi. */
.live-strip .v1-phone-demo {
  margin-block: 8px 28px;
}
/* Sok 2026-09-11: niente «Rivedi la chat / Leggi tutto». Il contenitore resta nel DOM perché
 * live.js e script.js lo mostrano/nascondono; qui non compare mai. */
.live-strip .v1-playback,
#come-funziona .v1-playback {
  display: none !important;
}

/* Header chiaro pieno: con la sfumatura trasparente il testo che scorre sotto si leggeva dietro
 * al logo e a «Parliamone», soprattutto su mobile. */
.sx .story-header.is-light {
  background: #f8faffF2;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 #e3eaf5;
}

/* Su mobile la nota «Prova a parlarci» con la freccia occupava mezzo schermo sopra il telefono. */
@media (max-width: 760px) {
  .live-strip .phone-scene-note { display: none; }
}

/* Le sezioni raggiunte dal menu prendono il focus (tastiera/lettori di schermo) senza bordo visibile. */
[tabindex="-1"]:focus { outline: none; }

/* Sok 2026-09-11: la foto della storia è larga il 76% e ancorata a destra; il suo bordo sinistro era un
 * taglio netto verticale sul fondo scuro. Dissolvenza sul lato sinistro (e un filo sul destro) verso il buio.
 * Solo desktop: su mobile la foto ha già la sua maschera verticale in story.css. */
@media (min-width: 761px) {
  .sx .work-photo {
    mask-image: linear-gradient(90deg, transparent 0%, #0006 14%, #000 34%, #000 96%, #000c 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #0006 14%, #000 34%, #000 96%, #000c 100%);
  }
}

/* Sok 2026-09-11 sera: sugli schermi lunghi «Ti suona familiare?» cadeva DENTRO la foto. Il titolo della
 * prima scena ha una posizione in pixel e cresce con la larghezza, la foto sta al 46% dell'altezza: con
 * 428-430px di larghezza e ~740px di altezza il sottotitolo finiva 50px dentro l'immagine. Sotto i 711px
 * story.css rimpicciolisce già il titolo e lì non tocca. Qui il sottotitolo va a destra di «squilla.»,
 * dove la riga è vuota, e il blocco sale di poco. */
@media (max-width: 760px) and (min-height: 711px) and (orientation: portrait) {
  .sx .scene-copy[data-copy="0"] { top: calc(106px + env(safe-area-inset-top, 0px)); }
  .sx .scene-copy[data-copy="0"] .scene-subtitle {
    position: absolute; right: 0; bottom: 8px;
    max-width: 44%; margin: 0; line-height: 1.3; text-align: right;
  }
}


/* ===== Note Sok 2026-09-11 (commenti su index.html) ===== */

/* 1. Meno aria fra le sezioni: 100px → 56px desktop, 40px mobile. */
.section { padding-block: 40px; }
@media (min-width: 600px) { .section { padding-block: 56px; } }
@media (min-width: 950px) { .section { padding-block: 56px; } .v1-faq { padding-block: 56px; } }
.v1-audience { padding-block: 24px 40px; }
/* «Questo è HELLOAI»: meno sopra, respiro uguale sotto. */
.sx .essential { min-height: 0; padding-top: 36px; padding-bottom: 36px; }
@media (min-width: 950px) { .sx .essential { padding-top: 48px; padding-bottom: 48px; } }
.sx .essential-inner { padding-top: 0; padding-bottom: 0; }

/* 2a. «Provalo adesso» in evidenza: riquadro blu come la CTA finale. */
.live-strip .live-controls {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 16px 40px #0759eb33;
}
.live-strip .live-title { color: #fff; font-size: 1.25rem; letter-spacing: -.02em; }
.live-strip .live-hint { color: #fff; opacity: .85; }
.live-strip .live-pick { border-color: #fff; }
.live-strip .live-call { background: #fff; color: var(--blue); border-color: #fff; }
.live-strip .live-call:hover { background: #eaf1ff; }
.live-strip .live-chat { background: transparent; color: #fff; border-color: #fff; }
.live-strip .live-chat:hover { background: #ffffff1f; }

/* 2b. «Come funziona» a due colonne: passaggi a sinistra, telefono + mascotte a destra.
 * Su mobile: passaggi sopra, telefono sotto, mascotte SEMPRE visibile sovrapposta al telefono. */
.how-grid { display: grid; gap: 40px; align-items: center; }
.how-steps > div > span[aria-hidden] { display: none; } /* frecce › fra i passaggi: solo in riga */
.how-grid .v1-phone-demo { margin: 0; justify-self: center; }
.how-grid .wa-channel { white-space: nowrap; margin-bottom: 10px; }
@media (min-width: 950px) {
  .how-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
  .how-grid .v1-phone-demo { padding-right: 48px; }
}
/* Mascotte: sempre in scena (le regole di styles.css la mostrano solo ≥1200). Fluttua ovunque. */
#come-funziona .phone-frame[data-phone-scene] > .phone-bot {
  display: block; position: absolute; left: 100%; margin-left: -34px; bottom: 90px;
  width: 104px; height: auto; z-index: 3; pointer-events: none;
  animation: bot-float 5.5s ease-in-out infinite;
}
@media (min-width: 600px) {
  #come-funziona .phone-frame[data-phone-scene] > .phone-bot { width: 130px; margin-left: -30px; bottom: 120px; }
}
@media (min-width: 1200px) {
  #come-funziona .phone-frame[data-phone-scene] > .phone-bot { width: 150px; margin-left: -28px; bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { #come-funziona .phone-frame[data-phone-scene] > .phone-bot { animation: none; } }
/* Spazio a destra del telefono per la mascotte sovrapposta, anche su mobile. */
#come-funziona .phone-stage { margin-right: 60px; }
@media (min-width: 950px) { #come-funziona .phone-stage { margin-right: 0; } }
/* Sok 2026-09-11 sera: sul tablet in verticale (761-949px) la colonna unica lasciava i passaggi a sinistra,
 * il telefono sotto e mezza pagina vuota. Due colonne anche qui: il telefono (290px) ha la sua colonna fissa
 * e la mascotte si stringe per non uscire dallo schermo a 768px. */
@media (min-width: 761px) and (max-width: 949px) {
  .how-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
  #come-funziona .phone-frame[data-phone-scene] > .phone-bot { width: 92px; margin-left: -46px; bottom: 110px; }
}
/* La nota «Prova a parlarci» resta solo ≥1200 (styles.css); il resto del tester sta sotto, nel riquadro blu. */
.live-strip { padding-block: 0 8px; }
#come-funziona { padding-bottom: 32px; }

/* 3. Settori: griglia sempre piena. 8 voci → 2 / 4 / 4 colonne (mai 3 o 6). */
.v1-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .v1-sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 950px) { .v1-sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; } }

/* 4a. FAQ: colonne bilanciate, titolo centrato verticalmente sull'accordion. */
@media (min-width: 950px) {
  .v1-faq { grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; }
  .v1-faq > div:first-child { position: sticky; top: 110px; }
}
/* 4b. CTA finale: titolo e bottoni in equilibrio. */
#inizia .cta-box { display: grid; gap: 28px; text-align: center; justify-items: center; }
@media (min-width: 950px) {
  #inizia .cta-box { grid-template-columns: 1.2fr auto; text-align: left; justify-items: stretch; align-items: center; padding: 48px 56px; }
  #inizia .cta-actions { justify-self: end; }
}
#inizia .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* 5. Loghi ufficiali nei passaggi di «Come funziona». */
.how-logos { display: flex; gap: 8px; margin-top: 10px; }
/* Icone dei passaggi: le <svg> inline non hanno la classe .icon, quindi il fill di default le riempiva. */
.how-steps svg { fill: none !important; stroke: currentColor; }
.how-steps > div > div:last-of-type { flex: 1; min-width: 0; }
.how-logos img { width: 22px; height: 22px; }