/* ============================================================
   styles.css — layout + componenti.
   Legge SOLO i token (tokens.css). Nessun colore/spazio magico.
   Mobile-first, responsive. Contrasto AA. Niente rosso/verde:
   gli stati portano sempre testo o forma oltre al colore.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
}

img { max-width: 100%; display: block; }

/* i titoli hanno UN peso (700) a prescindere dal tag/default del browser:
   la gerarchia la fa la scala tipografica, non il grassetto applicato a caso */
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-bold); }
p { margin: 0; }

button { font-family: inherit; cursor: pointer; }

#app { display: block; }

/* ---------- micro-etichetta ricorrente ---------- */
.kicker {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-soft);
  margin-bottom: var(--sp-2);
}

/* ---------- titoli di sezione "a calendario" (sticky) ----------
   Il titolo resta fisso in alto mentre si scorre; arrivando alla sezione
   successiva il nuovo titolo spinge via il precedente (position: sticky
   nativo). Fanno da guida "in che paragrafo sono" e sostituiscono i
   vecchi divisori grigi. Font più grande del kicker micro. */
:root { --topbar-h: 70px; }
.section-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  margin: 0;
  padding: var(--sp-3) 0;
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: var(--lh-tight);
}
/* label d'area: scavalca la topbar sticky e copre l'intera area (razionale +
   stage), allineata all'asse dei contenuti (maxw) */
.section-sticky--area {
  top: var(--topbar-h);
  z-index: 4;
}
/* DESKTOP: stesso banner ORO del blocco video (--gold-soft), da bordo a bordo
   dello schermo. Il full-bleed (50% - 50vw) porta la fascia fuori dal contenitore
   centrato fino ai lati del viewport, qualunque sia la larghezza; il padding
   speculare (50vw - 50%) riporta il testo sull'asse dei contenuti.
   Sotto i 700px ci pensa il blocco mobile, che fa già lo stesso. */
@media (min-width: 701px) {
  .section-sticky {
    background: var(--gold-soft);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: var(--sp-3) calc(50vw - 50%);
  }
}

/* ---------- barra superiore / footer ---------- */
/* ============================================================
   GATE D'ACCESSO: prima schermata, riservata ai professionisti sanitari.
   Fondo navy (il logo è per fondo scuro), card centrata, due scelte.
   ============================================================ */
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-5);
}
.gate__card {
  max-width: 34rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.gate__logo { height: 52px; width: auto; margin-bottom: var(--sp-2); }
.gate__title { font-size: var(--fs-h1); color: var(--on-navy); }
.gate__intro { color: var(--on-navy-soft); max-width: 46ch; line-height: var(--lh-body); }
.gate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 26rem;
  margin-top: var(--sp-2);
}
.gate__actions .btn { width: 100%; text-align: center; cursor: pointer; }
/* specificità (0,2,0): batte la base .btn a prescindere dall'ordine, così il
   bordo dell'outline non viene azzerato dallo shorthand `border` di .btn */
.gate__actions .gate__btn--outline {
  background: transparent;
  border: 2px solid var(--on-navy-soft);
  color: var(--on-navy);
}
.gate__actions .gate__btn--outline:hover { background: var(--navy-700); border-color: var(--on-navy); }

.topbar {
  background: var(--navy);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* logo Fisiosport (bianco + falce oro, fondo trasparente): vive direttamente
   sul banner navy, senza chip. È un logo per fondo scuro. */
.topbar__logo {
  height: 38px; width: auto;
}
.topbar--inner { position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm); }

/* pastiglia oro: l'uscita verso gli altri percorsi dev'essere evidente, così
   non si finisce per premere "Ricomincia" per sbaglio */
.link-back {
  background: var(--gold); border: none;
  color: var(--navy-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  transition: background var(--transition), color var(--transition);
}
.link-back:hover { background: var(--gold-700); color: #fff; }

.pagefoot {
  background: var(--navy);
  color: var(--on-navy-soft);
  padding: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small);
  margin-top: var(--sp-8);
}
.pagefoot__logo {
  height: 30px; width: auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
/* asse condiviso con .testimonianza: contenuto centrato a maxw-wide,
   il fondo navy resta full-bleed */
.hero__axis {
  max-width: var(--maxw-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
/* il prodotto è scontornato (PNG con alpha): poggia direttamente sul navy,
   niente card grigia, niente cornice né ombra rettangolare */
.hero__media img {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}
/* wordmark prodotto (bianco) sopra il kicker, su fondo navy. Piccolo: la
   gerarchia la tiene il titolo, e l'occhiello oro dice già cos'è. */
.hero__wordmark {
  display: block; height: 22px; width: auto;
  margin-bottom: var(--sp-3);
  opacity: 0.9;
}
/* indicatore di scroll: tre chevron a cascata che si illuminano in sequenza,
   come una corrente che scende. È un bottone vero: il click porta alla
   testimonianza. */
.hero__scroll {
  display: none;
  margin-top: var(--sp-7);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
}
.hero__scroll-chev {
  width: 15px; height: 15px;
  border-right: 2px solid var(--on-navy-soft);
  border-bottom: 2px solid var(--on-navy-soft);
  border-radius: 1.5px;
  transform: rotate(45deg);
  opacity: 0.2;
  animation: heroChev 1.8s ease-in-out infinite;
}
.hero__scroll-chev + .hero__scroll-chev { margin-top: -8px; }   /* cascata compatta */
.hero__scroll-chev:nth-child(2) { animation-delay: 180ms; }
.hero__scroll-chev:nth-child(3) { animation-delay: 360ms; }
@keyframes heroChev {
  0%, 55%, 100% { opacity: 0.2; }
  25%           { opacity: 1; }
}
.hero__scroll:hover .hero__scroll-chev { border-color: #fff; }
/* con le animazioni disattivate i chevron restano visibili, statici */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-chev { opacity: 0.65; }
}
.hero__headline {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}
.hero__sub {
  color: var(--on-navy-soft);
  max-width: 52ch;
}
.hero .kicker { color: var(--gold-soft); }

/* ---- HERO DESKTOP: un solo soggetto, grande, tagliato ----
   Il prodotto esce dal margine destro e dal fondo: un soggetto solo crea la
   diagonale e la gerarchia (due fuochi la dividerebbero). Dietro, un alone
   freddo appena percettibile: è un laser, la luce è semanticamente giusta e
   dà la profondità che mancava — deve leggersi come luce d'ambiente, non
   come effetto. L'oro dell'occhiello resta l'unico accento. */
@media (min-width: 820px) {
  .hero {
    position: relative;
    overflow: hidden;                       /* il taglio del prodotto avviene qui */
    min-height: min(88vh, 820px);
    display: flex;
    align-items: center;
    padding: var(--sp-8) var(--sp-7);
  }
  /* alone: dietro al prodotto, sotto al testo */
  .hero::before {
    content: "";
    position: absolute;
    right: -4%; bottom: -12%;
    width: 60%; height: 108%;
    background: radial-gradient(ellipse at 52% 48%,
                rgba(198, 211, 226, 0.24) 0%,
                rgba(198, 211, 226, 0.10) 42%,
                rgba(198, 211, 226, 0) 70%);
    pointer-events: none;
  }
  /* NIENTE position sull'axis: la media assoluta deve ancorarsi alla HERO
     (altrimenti il suo 113% si risolve sull'altezza del solo testo) */
  .hero__axis {
    width: 100%;
    grid-template-columns: 1fr;             /* il media esce dal flusso: resta il testo */
    gap: 0;
  }
  .hero__body { position: relative; z-index: 1; max-width: 30rem; }
  .hero__scroll { display: inline-flex; }
  /* il soggetto: grande, ancorato in basso a destra, debordante su due lati */
  /* dimensionata per ALTEZZA: la macchina e' un oggetto alto e stretto.
     113% con base a -13% = testa del manipolo esattamente al bordo alto,
     base tagliata sotto il fondo (il taglio deliberato del design). */
  .hero__media {
    position: absolute;
    right: 3%;
    bottom: -13%;
    height: 113%;
    margin: 0;
    pointer-events: none;
  }
  .hero__media img { height: 100%; width: auto; display: block; }
}
@media (min-width: 1240px) {
  .hero__media { right: 5%; }
  .hero__body { max-width: 34rem; }
}

/* ============================================================
   AUTO-IDENTIFICAZIONE
   ============================================================ */
/* ============================================================
   SCHEDA TECNICA: sezione trasversale, prima della scelta del caso.
   Pochi dati; enfasi su potenza di picco e assenza di calore.
   ============================================================ */
.techsheet {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
}
.techsheet__head { margin-bottom: var(--sp-5); }
.techsheet__title { font-size: var(--fs-h2); color: var(--navy); margin: var(--sp-1) 0 var(--sp-2); }
.techsheet__intro { color: var(--text-soft); max-width: 60ch; text-wrap: pretty; }   /* rag piu' pulito, niente parole orfane a fine riga */

.techsheet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
}
.techsheet__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.techsheet__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.techsheet__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
/* mobile: 1 colonna. Altrimenti i valori (white-space:nowrap) non entrano nei
   box stretti a 2 colonne e mandano in overflow orizzontale tutta la pagina. */
@media (max-width: 759px) {
  .techsheet__specs { grid-template-columns: 1fr; }
}
.tech-spec {
  background: var(--surface-alt);   /* secondario: rientrante, senza ombra */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.tech-spec__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-soft);
}
.tech-spec__value { font-size: 1.15rem; font-weight: var(--fw-bold); color: var(--navy); white-space: nowrap; }
.tech-spec__note { font-size: var(--fs-small); color: var(--text-soft); }

/* riquadro d'enfasi: potenza di picco + niente calore, su navy ad alto contrasto */
.tech-highlight {
  margin-top: var(--sp-5);
  background: var(--navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
.tech-highlight__media { background: var(--media-bg); }
.tech-highlight__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tech-highlight__body { padding: var(--sp-6) var(--sp-5); }
.tech-highlight__title { font-size: var(--fs-h3); color: var(--gold); margin-bottom: var(--sp-3); }
.tech-highlight__text { color: var(--on-navy-soft); max-width: 54ch; }

@media (min-width: 760px) {
  .techsheet__grid { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .tech-highlight { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
  .tech-highlight__media { order: -1; min-height: 260px; }
  .tech-highlight__body { display: flex; flex-direction: column; justify-content: center; }
}

/* ============================================================
   BENEFICI: i quattro effetti in griglia, con accento oro del brand.
   ============================================================ */
.benefits {
  max-width: var(--maxw);
  margin: var(--sp-7) auto;
  padding: 0 var(--sp-5);
}
.benefits__head { margin-bottom: var(--sp-5); }
.benefits__title { font-size: var(--fs-h2); color: var(--navy); margin: var(--sp-1) 0 var(--sp-2); }
.benefits__intro { color: var(--text-soft); max-width: 60ch; }
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.benefits__intro--sub { color: var(--text-soft); font-size: var(--fs-small); margin-top: var(--sp-1); }
.benefit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--sp-5);
  overflow: hidden;
}
.benefit--video { padding: 0; }
.benefit__media { aspect-ratio: 16 / 9; background: var(--media-bg); line-height: 0; }
.benefit__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.benefit--video .benefit__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.benefit__label { font-size: var(--fs-h3); color: var(--navy); margin-bottom: var(--sp-2); }
.benefit__text { color: var(--text-soft); line-height: var(--lh-body); }
@media (min-width: 680px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

/* video del riquadro scheda tecnica (alta potenza): aspetto naturale */
.tech-highlight__media--video { background: var(--media-bg); }
.tech-highlight__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* video nella card testimonial (HOWE): stesso riquadro dell'immagine */
.tst-card__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* primer video acuto/cronico prima della scelta del caso */
.cases-intro {
  max-width: var(--maxw);
  margin: var(--sp-7) auto 0;
  padding: 0 var(--sp-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
}
.cases-intro__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--media-bg); line-height: 0; box-shadow: var(--shadow-sm); }
.cases-intro__video { width: 100%; height: auto; display: block; }
.cases-intro__title { font-size: var(--fs-h2); color: var(--navy); margin-top: var(--sp-1); }
@media (min-width: 760px) {
  .cases-intro { grid-template-columns: minmax(0, 26rem) 1fr; gap: var(--sp-6); }
}

/* ============================================================
   IL METODO: sezione centrale. Manifesto + stepper interattivo
   (tecnologia / clinica / gestione) + payoff. Cura grafica alta.
   ============================================================ */
.method {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
}
.method__head { margin-bottom: var(--sp-6); max-width: 72ch; }
.method__title {
  font-size: var(--fs-h2);
  color: var(--navy);
  line-height: var(--lh-tight);
  margin: var(--sp-2) 0 var(--sp-3);
}
.method__intro { color: var(--text-soft); line-height: var(--lh-body); }
/* hook: sottotitolo grassetto che introduce i tre pilastri */
.method__hook {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--navy);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
}

/* stepper: tab numerate connesse = la sequenza cognitiva */
.method__stepper {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
/* numero ancorato a sinistra, etichetta centrata nel rettangolo: il numero è
   fuori flusso così non sposta il centro del testo */
.method__tab {
  flex: 1 1 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 2.6rem);
  min-height: 4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
}
.method__tab:hover { border-color: var(--navy-500); }
.method__tab.is-active { background: var(--navy); border-color: var(--navy); }
.method__num {
  position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
  width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--paper); color: var(--navy);
  font-weight: var(--fw-bold); font-size: var(--fs-body);
}
.method__tab.is-active .method__num { background: var(--gold); color: var(--navy-ink); }
.method__tablabel { font-weight: var(--fw-bold); color: var(--navy); font-size: var(--fs-h3); }
.method__tab.is-active .method__tablabel { color: var(--on-navy); }
.method__connector { flex: 0 0 var(--sp-4); align-self: center; height: 2px; background: var(--line); }

/* pannello attivo: card navy premium con icona oro */
.method__panel { display: none; }
.method__panel.is-active {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
}
.method__icon { color: var(--gold); line-height: 0; }
.method__icon svg { width: 56px; height: 56px; }
/* Animazioni icone metodo: eleganti e sobrie, in loop. Solo se l'utente non
   ha chiesto meno movimento; altrimenti icone statiche e complete. */
@media (prefers-reduced-motion: no-preference) {
  /* Sole (Tecnologia): raggi che ruotano lentissimi + nucleo che "respira" */
  .method-sun__rays { transform-box: fill-box; transform-origin: center; animation: method-sun-spin 20s linear infinite; }
  .method-sun__core { animation: method-sun-glow 3s ease-in-out infinite; }
  @keyframes method-sun-spin { to { transform: rotate(360deg); } }
  @keyframes method-sun-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

  /* Freccia (Gestione): si disegna salendo, la punta compare in cima, tiene,
     sfuma e ricomincia — "il centro può crescere" */
  .method-arrow { animation: method-arrow-cycle 3.6s ease-in-out infinite; }
  .method-arrow__line { stroke-dasharray: 100; animation: method-arrow-draw 3.6s ease-in-out infinite; }
  .method-arrow__head { animation: method-arrow-head 3.6s ease-in-out infinite; }
  @keyframes method-arrow-cycle { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 96%, 100% { opacity: 0; } }
  @keyframes method-arrow-draw { 0% { stroke-dashoffset: 100; } 42%, 100% { stroke-dashoffset: 0; } }
  @keyframes method-arrow-head { 0%, 44% { opacity: 0; } 54%, 100% { opacity: 1; } }
}
/* video del pilastro (dosologia): al posto dell'icona, ritagliato agli angoli */
.method__video { border-radius: var(--radius); overflow: hidden; background: var(--media-bg); line-height: 0; }
.method__video-el { width: 100%; height: auto; display: block; max-height: 60vh; }
.method__paneltag { display: block; color: var(--on-navy); font-weight: var(--fw-bold); font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.method__paneltext { color: var(--on-navy-soft); line-height: var(--lh-body); max-width: 68ch; }
.method__points { list-style: none; margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.method__point { color: var(--on-navy-soft); padding-left: var(--sp-4); border-left: 2px solid var(--gold); }
.method__point-label { display: block; color: var(--on-navy); font-weight: var(--fw-bold); }

/* payoff: chiusura in oro tenue, testo navy. Stacco forte. */
.method__payoff {
  margin-top: var(--sp-5);
  background: var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
}
.method__payoff-title { font-size: var(--fs-h2); color: var(--navy); margin-bottom: var(--sp-2); }
.method__payoff-text { color: var(--navy-ink); line-height: var(--lh-body); max-width: 72ch; }

/* animazione payoff: tre parti (cerchio/quadrato/triangolo, coi nomi dei
   pilastri) convergono al centro e vengono racchiuse da un anello; l'oro
   (--gold-700, oro da superfici chiare) appare SOLO nel lampo dell'unione.
   Il markup e' gia' nella posizione finale: e' .pfx:not(.is-in) a separare le
   parti, che l'osservatore ricompone aggiungendo .is-in una volta sola.
   Con reduced-motion il JS mette .is-in subito e il blocco globale azzera le
   transizioni: si vede lo stato finale, statico. */
.method__payoff-body {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4); margin-top: var(--sp-3);
}
.pfx { width: 240px; max-width: 70vw; height: auto; flex: 0 0 auto; }

/* NOTA REPLAY: tutte le transizioni vivono SOLO dentro .is-in. Cosi' quando
   la classe viene tolta (elemento fuori dal viewport, anche di poco) lo stato
   torna all'inizio ISTANTANEAMENTE — niente animazioni al contrario che, se
   si rientrava subito, lasciavano il bersaglio a meta' ("buggato"). Stesso
   principio della freccia NRS, che infatti si resetta sempre. */

/* i tre punti: svaniscono nell'istante in cui il nucleo unico prende il loro posto */
.pfx__node { fill: var(--navy); opacity: 0; }
.pfx.is-in .pfx__node { transition: opacity 320ms ease 1380ms; }
.pfx:not(.is-in) .pfx__node { opacity: 1; }

/* LA SPIRALE: interpolando `rotate() translate()` l'angolo svolge un giro
   intero mentre il raggio va a zero -> il punto rientra a spirale. Tutti e tre
   fanno LO STESSO movimento in sincrono (nessuno sfasamento), sfalsati solo
   di 120° in fase, e collassano nello stesso istante in un unico punto. */
.pfx__part { transform-box: view-box; transform-origin: 150px 110px; }
.pfx.is-in .pfx__part { transition: transform 1500ms cubic-bezier(0.62, 0, 0.24, 1); }
.pfx__part--a { transform: rotate(0deg)   translate(0, 0); }
.pfx__part--b { transform: rotate(120deg) translate(0, 0); }
.pfx__part--c { transform: rotate(240deg) translate(0, 0); }
.pfx:not(.is-in) .pfx__part--a { transform: rotate(360deg) translate(0, -76px); }
.pfx:not(.is-in) .pfx__part--b { transform: rotate(480deg) translate(0, -76px); }
.pfx:not(.is-in) .pfx__part--c { transform: rotate(600deg) translate(0, -76px); }

/* il risultato: BERSAGLIO. Centro che nasce dalla fusione, due anelli
   concentrici che si disegnano attorno (2*pi*r: 132 e 214), poi il centro
   continua a pulsare con un'eco -> "obiettivo centrato". */
.pfx__core { fill: var(--navy); transform-box: fill-box; transform-origin: center; }
.pfx:not(.is-in) .pfx__core { transform: scale(0); opacity: 0; }
.pfx.is-in .pfx__core {
  transition: transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 1440ms,
              opacity 260ms ease 1440ms;
  animation: pfxCoreBeat 2s ease-in-out 2400ms infinite;
}
.pfx__tring {
  fill: none; stroke: var(--navy); stroke-width: 2.5;
  transform-box: view-box; transform-origin: 150px 110px; transform: rotate(-90deg);
}
.pfx__tring--mid { stroke-dasharray: 132; stroke-dashoffset: 0; }
.pfx__tring--out { stroke-dasharray: 214; stroke-dashoffset: 0; opacity: 0.55; }
.pfx.is-in .pfx__tring--mid { transition: stroke-dashoffset 640ms ease 1560ms; }
.pfx.is-in .pfx__tring--out { transition: stroke-dashoffset 700ms ease 1720ms; }
.pfx:not(.is-in) .pfx__tring--mid { stroke-dashoffset: 132; }
.pfx:not(.is-in) .pfx__tring--out { stroke-dashoffset: 214; }
/* eco del battito: un anello che si espande e svanisce, in loop col centro */
.pfx__halo {
  fill: none; stroke: var(--navy); stroke-width: 2;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.pfx.is-in .pfx__halo { animation: pfxHalo 2s ease-out 2400ms infinite; }
/* l'oro appare SOLO qui: il lampo della fusione */
.pfx__flash {
  fill: none; stroke: var(--gold-700); stroke-width: 3;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.pfx.is-in .pfx__flash { animation: pfxFlash 760ms ease-out 1500ms forwards; }
@keyframes pfxFlash {
  0%   { opacity: 0; transform: scale(0.7); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes pfxCoreBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}
@keyframes pfxHalo {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(2.4); }
  100% { opacity: 0;   transform: scale(2.4); }
}
/* reduced-motion: stato finale statico anche senza JS (il lampo non parte:
   le animazioni sono azzerate dalla regola globale) */
@media (prefers-reduced-motion: reduce) {
  .pfx:not(.is-in) .pfx__part--a { transform: rotate(0deg)   translate(0, 0); }
  .pfx:not(.is-in) .pfx__part--b { transform: rotate(120deg) translate(0, 0); }
  .pfx:not(.is-in) .pfx__part--c { transform: rotate(240deg) translate(0, 0); }
  .pfx:not(.is-in) .pfx__node { opacity: 0; }
  .pfx:not(.is-in) .pfx__core { transform: none; opacity: 1; }
  .pfx:not(.is-in) .pfx__tring--mid,
  .pfx:not(.is-in) .pfx__tring--out { stroke-dashoffset: 0; }
}
@media (min-width: 760px) {
  .method__payoff-body { flex-direction: row; gap: var(--sp-6); }
}

@media (min-width: 760px) {
  .method__panel.is-active { grid-template-columns: 72px 1fr; align-items: start; gap: var(--sp-6); }
  .method__panel--video.is-active { grid-template-columns: minmax(0, 22rem) 1fr; align-items: center; }
  .method__icon svg { width: 72px; height: 72px; }
}
@media (max-width: 620px) {
  .method__stepper { flex-direction: column; align-items: stretch; }
  .method__connector { display: none; }
}

/* card "Evidenza scientifica" dentro la scheda: indicatore credibile
   (sostituisce il vecchio misuratore a segmenti). Accento oro del brand. */
.study {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.study__badge {
  display: inline-block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--fw-bold);
  color: var(--text-soft);
  margin-bottom: var(--sp-1);
}
.study__title { color: var(--navy); font-weight: var(--fw-medium); font-size: var(--fs-small); line-height: var(--lh-body); }
.study__source { color: var(--text-soft); font-size: var(--fs-micro); margin-top: var(--sp-1); }

/* ============================================================
   EVIDENZE SCIENTIFICHE: sezione globale, letteratura a supporto.
   Griglia sobria; ogni voce ha area, titolo e fonte.
   ============================================================ */
.evidence-sec {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
}
.evidence-sec__head { margin-bottom: var(--sp-5); }
.evidence-sec__title { font-size: var(--fs-h2); color: var(--navy); margin: var(--sp-1) 0 var(--sp-2); }
.evidence-sec__intro { color: var(--text-soft); max-width: 60ch; }
.evidence-sec__grid {
  list-style: none;
  padding: 0;            /* azzera il rientro di default della <ul>: card allineate a sinistra col resto */
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.evref {
  background: var(--surface-alt);   /* secondario: rientrante, senza ombra */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.evref__area {
  display: inline-block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--fw-bold);
  color: var(--gold-ink);   /* titolo del box in oro (come i kicker): piu' evidente, separa le voci */
  margin-bottom: var(--sp-2);
}
.evref__title { color: var(--navy); font-weight: var(--fw-medium); font-size: var(--fs-small); line-height: var(--lh-tight); }
.evref__source { color: var(--text-soft); font-size: var(--fs-micro); margin-top: var(--sp-2); }
@media (min-width: 680px) {
  .evidence-sec__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SOCIAL: cluster fisso in basso a destra dell'esperienza.
   ============================================================ */
.social-fixed {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 40;
  display: flex;
  gap: var(--sp-2);
}
.social-fixed__link {
  width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.social-fixed__link:hover { background: var(--gold); color: var(--navy-ink); transform: translateY(-2px); }
.social-fixed__link svg { width: 20px; height: 20px; display: block; }

/* ============================================================
   TESTIMONIAL: carosello "chi usa Laserix Pro". Auto-scroll + manuale.
   ============================================================ */
.testimonials {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
}
.testimonials__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.testimonials__intro-wrap { flex: 1 1 30ch; }
.testimonials__title { font-size: var(--fs-h2); color: var(--navy); margin: var(--sp-1) 0; }
.testimonials__intro { color: var(--text-soft); }
.testimonials__nav { display: flex; gap: var(--sp-2); margin-left: auto; }
.tst-nav {
  width: 2.6rem; height: 2.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--navy); font-size: var(--fs-h2); line-height: 1; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.tst-nav:hover { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }

.testimonials__track {
  list-style: none;
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-3);
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.tst-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tst-card__media { aspect-ratio: 4 / 3; background: var(--navy); }
.tst-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tst-card__body { padding: var(--sp-4); }
.tst-card__name { font-weight: var(--fw-bold); color: var(--navy); font-size: var(--fs-h3); }
.tst-card__caption { color: var(--text-soft); font-size: var(--fs-small); margin-top: var(--sp-1); line-height: var(--lh-body); }
@media (min-width: 760px) {
  .tst-card { width: 330px; }
}

/* ============================================================
   FOOTER unico (megafooter navy): testimonial + contatto + brand.
   Chiusura consistente in fondo a ogni schermata.
   ============================================================ */
.sitefoot { background: var(--navy); color: var(--on-navy-soft); }
.sitefoot__inner {
  max-width: var(--maxw-wide); margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--section-gap);
}
/* testa testimonial ritematizzata su navy; le .tst-card restano bianche */
.sitefoot .kicker { color: var(--gold); }
.sitefoot .testimonials__title { color: var(--on-navy); }
.sitefoot .testimonials__intro { color: var(--on-navy-soft); }
.sitefoot .tst-nav { background: transparent; border-color: var(--navy-500); color: var(--on-navy); }
.sitefoot .tst-nav:hover { background: var(--gold); color: var(--navy-ink); border-color: var(--gold); }

/* contatto / prova — centrato in pagina */
.sitefoot__contact { max-width: 64ch; margin: 0 auto; text-align: center; }
.sitefoot__headline { font-size: var(--fs-h2); color: var(--on-navy); margin-bottom: var(--sp-2); }
.sitefoot__sub { color: var(--on-navy-soft); margin: 0 auto var(--sp-4); max-width: 60ch; }
.sitefoot__contactline { color: var(--on-navy); font-weight: var(--fw-medium); margin-bottom: var(--sp-4); }
.sitefoot__contactline .kicker { color: var(--gold); }

/* ============================================================
   CTA FINALE: fascia ORO piena a tutta larghezza, tra i testimonial
   e la barra brand. L'oro pieno e' il colore riservato all'azione:
   qui vive l'unica richiesta esplicita dell'esperienza.
   ============================================================ */
.cta-final { background: var(--gold); position: relative; overflow: hidden; }
/* fasci navy (immagine ricolorata in palette): entrano dal bordo destro e
   sfumano via mask prima delle scritte, per non toccarne la leggibilità.
   L'art tiene le proporzioni native (height 100% + width auto), così il
   pallino può agganciarsi al punto di fuga in percentuale dell'immagine. */
.cta-final__art {
  position: absolute; top: 0; right: 0;
  height: 100%; aspect-ratio: 1400 / 788;   /* = proporzioni di cta-consulenza.png */
  pointer-events: none;
}
/* mobile: il punto di fuga cadrebbe sotto i bottoni, quindi niente pallino
   (vedi sotto) e fasci tenuti a texture appena percettibile */
.cta-final__img {
  width: 100%; height: 100%; display: block; opacity: 0.38;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 96%);
          mask-image: linear-gradient(to left, #000 45%, transparent 96%);
}
/* punto di fuga dei fasci: sorgente laser con glow che respira (stesso rosso
   dell'impulso NRS). Non mascherato: resta nitido sopra i fasci. */
.cta-final__spark {
  /* su mobile la fascia è alta e stretta: il punto di fuga cade sotto i
     bottoni, dove il pallino sarebbe coperto. Compare da 900px, dove la
     composizione gli lascia aria a destra. */
  display: none;
  /* punto di fuga misurato sull'immagine (989,458 px su 1400x788) */
  position: absolute; left: 70.64%; top: 58.19%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  /* niente nucleo quasi-bianco e glow contenuto: la luce deve sembrare parte
     dei fasci, non appoggiata sopra */
  background: radial-gradient(circle, #ffd9c6 0%, #ff5a2e 52%, rgba(255, 61, 26, 0.85) 85%);
  opacity: 0.85;
  animation: ctaSpark 3.4s ease-in-out infinite;
}
@media (min-width: 900px) { .cta-final__spark { display: block; } }
@keyframes ctaSpark {
  0%, 100% { transform: scale(0.92); box-shadow: 0 0 4px 1px rgba(255, 90, 46, 0.25); }
  50%      { transform: scale(1.08); box-shadow: 0 0 11px 3px rgba(255, 90, 46, 0.45); }
}
.cta-final__inner {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center;
}
@media (min-width: 900px) {
  .cta-final__art { opacity: 1; }
}
.cta-final__title { font-size: var(--fs-h2); color: var(--navy-ink); line-height: var(--lh-tight); }
.cta-final__text { color: var(--navy); max-width: 52ch; }
.cta-final__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-2);
}
/* i modificatori .btn--navy / .btn--ghost-navy stanno con gli altri .btn
   (in fondo al file): lo shorthand `border` della base .btn azzererebbe
   un border-color dichiarato prima nel sorgente */
/* sull'oro l'outline di focus oro sparirebbe: qui diventa navy */
.cta-final a:focus-visible { outline-color: var(--navy); }
.cta-final__plain { color: var(--navy); font-size: var(--fs-small); font-weight: var(--fw-medium); }
@media (max-width: 599px) {
  .cta-final__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 24rem; }
  .cta-final__actions .btn { width: 100%; text-align: center; }
}

/* Ricomincia: chiusura del percorso, sotto il ritorno economico */
.restart {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
  text-align: center;
}

/* barra brand in fondo */
.sitefoot__brandbar { border-top: 1px solid var(--navy-500); }
.sitefoot__brand {
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--on-navy-soft); font-size: var(--fs-small);
}
.sitefoot__logo { height: 30px; width: auto; }

.identify {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
}
.identify__q {
  font-size: var(--fs-h2);
  color: var(--navy);
  margin-bottom: var(--sp-5);
}

.area-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 680px) {
  .area-grid { grid-template-columns: repeat(2, 1fr); }
}

.area-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.area-card:not(.is-soon):hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.area-card__label {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.area-card__blurb { color: var(--text-soft); font-size: var(--fs-small); }
.area-card__go {
  margin-top: var(--sp-3);
  align-self: flex-start;          /* pill che abbraccia il testo, non stirata */
  display: inline-block;
  background: var(--gold-soft);
  color: var(--navy);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
}
.area-card.is-soon { opacity: 0.7; cursor: not-allowed; background: var(--surface-alt); }

.tag {
  align-self: flex-start;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: 999px;
}
.tag--soon { background: var(--navy); color: var(--on-navy); }

/* ============================================================
   PERCORSO AREA
   ============================================================ */
.area-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
}
.area-head__intro { font-size: var(--fs-h3); color: var(--text); max-width: 60ch; }

/* razionale d'area (opzionale): testo disteso + immagine del meccanismo.
   Sobrio; stacco netto con un filo di bordo (niente colore che porti significato).
   Gerarchia per peso/tono: sintomo in primo piano, tessuti in secondo. */
.razionale {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.razionale__media img {
  display: block; width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
/* disegni a linea accanto al razionale (PNG con fondo trasparente: poggiano
   sullo sfondo della pagina, niente riquadro bianco). Nitidi, colore originale
   del tratto. SOLO desktop (da 760px, dove affiancano il testo): su mobile il
   razionale resta solo testo. */
.razionale__media--line { display: none; }
@media (min-width: 760px) { .razionale__media--line { display: block; } }
/* DOPO la regola base: stessa specificita', deve vincere l'ordine.
   Colonna larga e allineata in altezza al testo: l'immagine non e' piu' una
   miniatura schiacciata a lato ma uno sfondo che accompagna il razionale. */
@media (min-width: 760px) {
  .razionale { grid-template-columns: minmax(0, 34%) 1fr; align-items: stretch; }
  .razionale--text { grid-template-columns: 1fr; }   /* solo testo: piena larghezza */
  .razionale__media img {
    height: 100%;
    object-fit: cover;
    box-shadow: none;
    /* sbiadite: molto a sinistra, meno avvicinandosi al testo (mai piene) */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0.55));
            mask-image: linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0.55));
  }
  /* i disegni a linea NON si sbiadiscono (sono gia' leggeri e vanno nitidi; il
     fondo trasparente li fonde con la pagina) e NON si ritagliano: `contain`
     li mostra interi, coda compresa, centrati in altezza accanto al testo. */
  .razionale__media--line { display: flex; align-items: center; }
  .razionale__media--line img {
    object-fit: contain;
    -webkit-mask-image: none;
            mask-image: none;
    border-radius: 0;
  }
  /* la silhouette riempie la colonna, alta quanto il testo accanto */
  .razionale__sil { height: 100%; }
}
/* illustrazioni con fondo bianco: lo fondiamo col grigio della pagina
   (multiply) togliendo cornice e ombra, così non c'è più il riquadro bianco */
.razionale__media--blend img { mix-blend-mode: multiply; box-shadow: none; border-radius: 0; }
/* PNG con fondo trasparente (glow su nero rimosso): poggia sul fondo pagina,
   niente cornice/ombra rettangolare attorno alla sagoma */
.razionale__media--bare img { box-shadow: none; border-radius: 0; }
.razionale__body { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 62ch; }
/* blocchi uniformi: stessa dimensione e tono; la gerarchia la porta il
   grassetto navy sulle parole importanti, non un blocco "in evidenza" */
.razionale__sintomo,
.razionale__tessuti { color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.razionale__body strong { color: var(--navy); font-weight: var(--fw-bold); }

/* approfondimenti video del professionista, dentro il razionale dell'area */
.razionale__videos { margin-top: var(--sp-5); }
.razionale__videos-label {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track-label);
  font-weight: var(--fw-bold); color: var(--gold); margin-bottom: var(--sp-3);
}
.rvpanel-list { display: flex; flex-direction: column; gap: var(--sp-4); }
/* pannello blu Fisiosport: descrizione a sinistra, video a destra */
.rvpanel {
  background: var(--navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
.rvpanel__text { padding: var(--sp-5); display: flex; flex-direction: column; justify-content: center; }
.rvpanel__label { color: var(--on-navy); font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.rvpanel__desc { color: var(--on-navy-soft); line-height: var(--lh-body); max-width: 44ch; }
.rvpanel__sources { margin-top: var(--sp-3); }
.rvpanel__sources-label {
  display: block; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--track-label); font-weight: var(--fw-bold);
  color: var(--on-navy-soft); margin-bottom: var(--sp-1);
}
.rvpanel__source { display: block; color: var(--on-navy-soft); font-size: var(--fs-small); line-height: var(--lh-body); }
.rvpanel__source + .rvpanel__source { margin-top: 2px; }
.rvpanel__media { padding: var(--sp-4); display: flex; align-items: center; }
/* cornice: video arrotondato con respiro blu attorno, dentro il rettangolo */
.rvpanel__frame { width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--media-bg); line-height: 0; }
.rvpanel__video { width: 100%; height: auto; display: block; }
/* Evidenze cliniche (slide del webinar D'Arpe): griglia di figure con didascalia */
.evidence { margin-top: var(--sp-5); }
.evidence__label {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track-label);
  font-weight: var(--fw-bold); color: var(--gold); margin-bottom: var(--sp-3);
}
.evidence__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 620px) { .evidence__grid { grid-template-columns: repeat(2, 1fr); } }
/* una sola figura: centrata nel pannello, non stirata né incollata a sinistra */
@media (min-width: 620px) {
  .evidence__grid:has(> .evfig:only-child) { grid-template-columns: min(620px, 100%); justify-content: center; }
}
.evfig { margin: 0; }
.evfig__img {
  display: block; width: 100%;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.evfig__cap { font-size: var(--fs-small); color: var(--text-soft); line-height: var(--lh-tight); margin-top: var(--sp-2); }
.evfig__img { cursor: zoom-in; transition: box-shadow var(--transition), transform var(--transition); }
.evfig__img:hover { box-shadow: var(--shadow); }
.evfig__img:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Lightbox: ingrandimento al centro (parte centrale dello schermo, non full),
   transizione fade + scale. Chiusura con click ovunque / X / Esc. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: var(--sp-6);
  background: rgba(14, 33, 56, 0.72);
  opacity: 0; transition: opacity var(--transition);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__fig {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  transform: scale(0.94); transition: transform var(--transition);
}
.lightbox.is-open .lightbox__fig { transform: scale(1); }
.lightbox__img {
  display: block; width: auto; height: auto; max-width: 82vw; max-height: 74vh;
  border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--surface);
  cursor: zoom-out;
}
.lightbox__cap { margin: 0; color: var(--on-navy); font-size: var(--fs-small); text-align: center; max-width: 68ch; }
.lightbox__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 44px; height: 44px; border-radius: 999px; border: none;
  background: var(--surface); color: var(--navy); font-size: 1.7rem; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center;
}
body.has-lightbox { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__fig { transition: none; }
  .lightbox__fig { transform: none; }
}
/* mattoncino: descrizione a sinistra, video a destra (compatto) gia' da tablet */
@media (min-width: 620px) {
  .rvpanel { grid-template-columns: 1fr minmax(16rem, 22rem); align-items: center; }
}

.stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
}
.stage__head { margin-bottom: var(--sp-5); }
/* titolo di gruppo: deve leggersi come tale, sopra le schede cliniche */
.pillar-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  margin-bottom: var(--sp-3);
}
.stage__tagline { color: var(--text-soft); font-size: var(--fs-h3); }

/* ---------- schede come lista accordion ---------- */
.schede { display: flex; flex-direction: column; gap: var(--sp-5); }

/* PESO CARD — 3 livelli: (1) primario = schede cliniche, elevate (--shadow);
   (2) standard = card correnti (--shadow-sm); (3) secondario = riferimenti e
   specifiche, piatte e rientranti (--surface-alt, niente ombra). */
.scheda {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);   /* contenuto primario: più peso */
}
/* schede uniformi: la forza dell'evidenza (anche "incerta") e' segnalata
   dalla pastiglia nell'intestazione (meter + parola), non da un bordo. */

/* intestazione sempre visibile e cliccabile */
.accordion-head {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  text-align: left;
  background: var(--surface);
  border: none;
  padding: var(--sp-5);
  cursor: pointer;
}
.accordion-head__text {
  flex: 1 1 220px; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.accordion-head__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--navy); }
.accordion-head:hover .accordion-head__title { color: var(--gold-700); }
.accordion-head__teaser { font-size: var(--fs-small); color: var(--text-soft); }
/* riga "ambito" sotto il titolo, per il riconoscimento rapido a scheda chiusa */
.accordion-head__ambito { font-size: var(--fs-small); color: var(--text-soft); margin-top: 2px; }
.accordion-head__sig { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.accordion-chevron {
  color: var(--navy);
  font-size: var(--fs-h3);
  line-height: 1;
  transition: transform var(--transition);
}
/* stato aperto = chevron ruotato (oltre ad aria-expanded). Mai colore solo. */
.accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }

/* pastiglia evidenza compatta: visibile anche da chiusa, e' il segnale chiave */
.ev-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
}
/* min-width fissa: tutte le pastiglie hanno la stessa larghezza, cosi' i
   loro bordi sinistri si allineano (incerta non rientra rispetto a moderata). */
.ev-pill__word { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--navy); white-space: nowrap; min-width: 7rem; }
.meter--sm { gap: 2px; }
.meter--sm .meter__seg { width: 14px; height: 6px; }

/* corpo collassabile: animabile via grid-rows, contenuto SEMPRE nel DOM
   (i bottoni baseline restano interrogabili anche da chiuso). */
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms ease;
}
.accordion-item.is-open .accordion-body { grid-template-rows: 1fr; }
.accordion-body__inner { overflow: hidden; }

/* inner = la griglia media + corpo (era su .scheda) */
.scheda__inner { display: grid; grid-template-columns: 1fr; }
/* colonna media = pila verticale di 1..N foto d'uso coerenti, incorniciate sul
   fondo della card (niente piu stretch di una singola immagine su tutta l'altezza) */
.scheda__media { display: flex; flex-direction: column; gap: var(--sp-3); background: transparent; }
/* mobile: le foto sono in apertura sotto il titolo, basta la prima (niente pila) */
@media (max-width: 759px) { .scheda__media img:not(:first-child) { display: none; } }
.scheda__media img {
  width: 100%; height: auto; display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 760px) {
  .scheda__inner { grid-template-columns: 320px 1fr; align-items: stretch; }
  .scheda__inner--nomedia { grid-template-columns: 1fr; }  /* senza immagine: corpo a piena larghezza */
  /* la pila riempie l'altezza del ragionamento: ogni foto prende una quota
     uguale (cover), con un tetto per non diventare mai una fettina verticale */
  .scheda__media {
    height: 100%; justify-content: center;
    padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5);
  }
  .scheda__media img {
    flex: 1 1 0; min-height: 0;
    max-height: 320px;
    border-radius: var(--radius);
  }
}
.scheda__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

.field__label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-soft);
  margin-bottom: var(--sp-1);
}
.field p { color: var(--text); }
.field--accent {
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.field--accent p { color: var(--navy-ink); }
/* "La cura come orizzonte": nota quieta, separata dal resto, mai colore-solo
   (la distingue il bordo + l'etichetta, non il colore). */
.field--horizon {
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
}
.field--horizon p { color: var(--text-soft); }

/* ---------- nuovo modello di scheda: ambito / meccanismo / delta / guarigione / autorita ---------- */
/* ambito: riga asciutta dei quadri di lavoro, in cima, sobria */
.field--ambito p { color: var(--text-soft); font-size: var(--fs-small); }

/* ============================================================
   BLOCCO TRASVERSALE D'INGRESSO — testimonianza video
   Tra hero e quadri clinici. Sobrio: riga + video, nessun claim.
   ============================================================ */
/* banda a TUTTA LARGHEZZA, fondo oro del brand (variante tenue --gold-soft:
   meno "sparata" su area grande). Bordi netti, nessuna sfumatura. Alternanza
   sezioni: hero navy -> questa oro -> quadri clinici chiara. */
.testimonianza {
  background: var(--gold-soft);
  padding: var(--sp-8) var(--sp-5);   /* respiro sopra/sotto: il colore non strozza */
  text-align: center;
}
/* testo in BLU della palette su oro: contrasto alto (navy 10:1, navy-500 6:1) */
.testimonianza__text {
  color: var(--navy);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  max-width: 34ch;              /* misura corta: il testo riempie il rettangolo */
  margin: 0 auto var(--sp-3);   /* respiro tra le due righe */
}
/* mobile: la didascalia scende un po' sotto il video */
@media (max-width: 767px) { .testimonianza__text { margin-top: var(--sp-5); } }
.testimonianza__sub {
  color: var(--navy-500);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  max-width: 40ch;
  margin: 0 auto var(--sp-3);   /* seguito dalla spiegazione: gap ridotto */
}
/* spiegazione del perché il segno indica il punto del dolore: nota distesa,
   stesso blu tenue, sotto la riga del segno e accanto al video */
.testimonianza__note {
  color: var(--navy-500);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 46ch;
  margin: 0 auto var(--sp-5);   /* spazio prima del video (mobile) */
}
.testimonianza__note strong { color: var(--navy); font-weight: var(--fw-bold); }
/* asse condiviso con l'hero: contenuto centrato a maxw-wide (il fondo oro
   resta full-bleed). Su mobile è passthrough, contenuto impilato/centrato. */
.testimonianza__axis { max-width: var(--maxw-wide); margin-inline: auto; }
/* Riduzione del dolore su scala NRS (valori da content.js): marcatore sul
   "prima" in alto, sul "dopo" in basso, freccia verso il basso. Solo navy +
   accento oro sul valore, nessuna coppia rosso/verde, nessuno stile inline. */
.testimonianza__nrs {
  flex: 0 0 auto;
  width: 9rem;
  margin: var(--sp-5) auto 0;   /* mobile: sotto il testo, centrato */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.testimonianza__nrs svg { width: 100%; height: auto; display: block; max-width: 9rem; overflow: visible; }
/* #7 mobile: video a SINISTRA, NRS (freccia dolore 8->1) a DESTRA in riga;
   la didascalia va a tutta larghezza sotto. */
@media (max-width: 767px) {
  .testimonianza__axis {
    display: grid;
    grid-template-columns: 1fr 7rem;
    grid-template-areas:
      "media nrs"
      "body  body";
    gap: var(--sp-4);
    align-items: center;
  }
  .testimonianza__media { grid-area: media; }
  /* la freccia (SVG) sta in alto nel blocco NRS per via di didascalia/descrizione
     sotto: la abbasso un po' cosi' e' centrata accanto al video */
  .testimonianza__nrs   { grid-area: nrs; width: 100%; margin: 0; transform: translateY(36px); }
  .testimonianza__body  { grid-area: body; }
}
.nrs__tick  { stroke: var(--navy); stroke-width: 1.5; }
.nrs__scale { fill: var(--navy); font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-medium); text-anchor: end; opacity: 0.7; }
.nrs__dot   { fill: var(--gold); stroke: var(--navy); stroke-width: 2; }
.nrs__value { fill: var(--navy); font-family: var(--font-sans); font-size: 22px; font-weight: var(--fw-bold); text-anchor: start; }
.nrs__side  { fill: var(--navy); font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: var(--track-label); text-transform: uppercase; text-anchor: start; opacity: 0.75; }
.nrs__caption { color: var(--navy-500); font-size: var(--fs-micro); text-align: center; margin-top: var(--sp-2); max-width: 14ch; line-height: var(--lh-tight); }
/* descrizione rivelata su hover/focus/click di un marcatore; spazio riservato
   per non far saltare il layout quando compare */
.nrs__reveal {
  color: var(--navy); font-size: var(--fs-small); font-weight: var(--fw-medium);
  text-align: center; max-width: 20ch; margin-top: var(--sp-1);
  min-height: 2.6em; line-height: var(--lh-tight);
  opacity: 0; transition: opacity var(--transition);
}
.nrs__reveal.is-shown { opacity: 1; }
/* marcatore interattivo: hit-area larga, cursore pointer, alone oro su
   hover/focus (stato visibile). Numeri e prima/dopo sempre visibili. */
.nrs__marker { cursor: pointer; }
.nrs__marker:focus { outline: none; }
.nrs__hit  { fill: none; pointer-events: all; }
.nrs__ring { fill: none; stroke: transparent; stroke-width: 2.5; transition: stroke var(--transition); }
.nrs__marker:hover .nrs__ring,
.nrs__marker:focus .nrs__ring,
.nrs__marker:focus-visible .nrs__ring { stroke: var(--gold); }
/* Freccia: statica ed estesa di default (nessun JS / reduced-motion). Quando il
   JS "arma" l'elemento la nasconde, e all'ingresso nel viewport la disegna. */
.nrs__arrow-line, .nrs__arrow-head {
  fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
/* armata: linea nascosta (dash) e punta invisibile finché la linea non è completa */
.testimonianza__nrs.nrs--armed .nrs__arrow-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.testimonianza__nrs.nrs--armed .nrs__arrow-head { opacity: 0; }
/* in viewport: prima si disegna la linea (700ms), poi compare la punta */
.testimonianza__nrs.nrs--armed.nrs--in .nrs__arrow-line { animation: nrs-draw 700ms ease forwards; }
.testimonianza__nrs.nrs--armed.nrs--in .nrs__arrow-head { animation: nrs-head 200ms ease forwards; animation-delay: 560ms; }
@keyframes nrs-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes nrs-head { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* niente animazione: linea estesa e punta già visibili, statiche */
  .testimonianza__nrs.nrs--armed .nrs__arrow-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .testimonianza__nrs.nrs--armed .nrs__arrow-head { opacity: 1; animation: none; }
}

/* ---- Scarica "laser" da 8 a 1 lungo la freccia ----
   Parte SOLO a freccia completa (~760ms). Stato base: tutto spento, cosi il
   glow non appare mentre la freccia si disegna e si resetta a ogni ri-arma. */
.nrs__ignite, .nrs__land { fill: url(#nrsSpark); opacity: 0; transform-box: fill-box; transform-origin: center; }
.nrs__pulse { opacity: 0; }
.nrs__pulse-halo { fill: url(#nrsSpark); }
.nrs__pulse-core { fill: #fff4ec; }

/* in viewport, DOPO che la freccia e' completa: l'8 si accende, il pallino rosso
   percorre la freccia, l'1 divampa e resta con un lieve alone. */
.testimonianza__nrs.nrs--armed.nrs--in .nrs__ignite { animation: nrs-ignite 440ms ease-out forwards; animation-delay: 780ms; }
.testimonianza__nrs.nrs--armed.nrs--in .nrs__pulse  { animation: nrs-travel 780ms cubic-bezier(.45,0,.55,1) forwards; animation-delay: 980ms; }
.testimonianza__nrs.nrs--armed.nrs--in .nrs__land   { animation: nrs-land 900ms ease-out 1620ms forwards, nrs-land-pulse 1.9s ease-in-out 2520ms infinite; }

@keyframes nrs-ignite {
  0%   { opacity: 0; transform: scale(0.6); }
  45%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes nrs-travel {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 1; }
  86%  { opacity: 1; transform: translateY(var(--nrs-travel, 140px)); }
  100% { opacity: 0; transform: translateY(var(--nrs-travel, 140px)); }
}
@keyframes nrs-land {
  0%   { opacity: 0; transform: scale(0.6); }
  28%  { opacity: 1; transform: scale(1.4); }
  60%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0.5; transform: scale(1.08); }
}
/* dopo l'arrivo, l'1 continua a pulsare leggermente (respiro sobrio, in loop) */
@keyframes nrs-land-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1.08); }
  50%      { opacity: 0.82; transform: scale(1.24); }
}
@media (prefers-reduced-motion: reduce) { .nrs__laser { display: none; } }
/* DESKTOP (>=768px): affiancato sull'asse maxw-wide. space-between: il video si
   appoggia al bordo SINISTRO dell'asse, l'NRS al bordo DESTRO, il testo al centro.
   Così video-da-sinistra e immagine-hero-da-destra coincidono per costruzione.
   Mobile resta impilato (base mobile-first). */
@media (min-width: 768px) {
  .testimonianza { text-align: left; padding-inline: var(--sp-7); }
  .testimonianza__axis {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;          /* testo centrato in verticale sul video */
    gap: var(--sp-7);             /* respiro minimo: il testo non tocca il video */
  }
  .testimonianza__media { flex: 0 0 auto; }   /* video a sinistra (tetto 58vh) */
  .testimonianza__body { flex: 0 1 40ch; }
  .testimonianza__text, .testimonianza__sub, .testimonianza__note { margin-left: 0; margin-right: 0; }
  .testimonianza__note { margin-bottom: 0; }
  .testimonianza__nrs { margin: 0; }   /* al bordo destro dell'asse, senza auto-centraggio */
}
/* Video VERTICALE: tetto all'ALTEZZA in vh (~58%) così non sfora; larghezza
   proporzionale; centrato con lo spazio che avanza ai lati. */
/* contenitore che RITAGLIA poster + video agli stessi angoli tondi
   (il border-radius sul solo <video> non ritaglia il poster su tutti i
   browser: qui il clip vive sul wrapper con overflow:hidden). */
/* cornice navy attorno al video: sull'oro il player non resta più sospeso */
.testimonianza__media {
  display: inline-block;
  max-width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  padding: var(--sp-2);      /* bordo sottile: presente ma discreto */
  box-shadow: var(--shadow);
  line-height: 0;            /* niente spazio inline sotto il video */
  vertical-align: middle;
}
/* il border-radius sul <video> non ritaglia i frame (il video e' compositato a
   parte): gli angoli restavano quadrati e neri. Ci pensa questo wrapper, che
   clippa davvero grazie al proprio contesto di compositing. */
.testimonianza__frame {
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  transform: translateZ(0);
  isolation: isolate;
  background: var(--navy);
}
.testimonianza__video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  height: auto;
  /* <video> ha object-fit:contain di default: letterboxa il poster e
     lascia due filetti neri sui lati. Il box e' gia' l'aspect del video,
     quindi cover riempie senza ritaglio percepibile. */
  object-fit: cover;
}

/* guarigione (opzionale): blocco "lungo termine", separato e protetto */
.guarigione {
  padding-top: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.guarigione__longterm { color: var(--text-soft); }

/* autorita (opzionale): chiusura, prova sociale */
.autorita { padding-top: var(--sp-4); }
.autorita p { color: var(--text-soft); }

/* ---------- evidenza ---------- */
.evidence {
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
}
.evidence__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.meter { display: inline-flex; gap: 3px; }
.meter__seg {
  width: 22px; height: 8px; border-radius: 2px;
  background: transparent;
  border: 1.5px solid var(--signal-muted);
}
.meter__seg.is-on { background: var(--signal-strong); border-color: var(--signal-strong); }
.evidence__strength {
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--navy);
}
.evidence__ratio { font-size: var(--fs-small); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.evidence__statement { color: var(--text); margin-bottom: var(--sp-2); }
.evidence__note { font-size: var(--fs-small); color: var(--navy); font-weight: var(--fw-medium); }
.evidence__source { font-size: var(--fs-micro); color: var(--text-soft); margin-top: var(--sp-2); font-style: italic; }

/* ---------- delta (oggi -> con Laserix), proiettivo sulla baseline ---------- */
.delta { }
.delta__prompt {
  color: var(--text);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-3);
}
.baseline-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.baseline-btn {
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.baseline-btn:hover { border-color: var(--gold); }
/* Selezionato: bordo oro + riempimento + grassetto (oltre ad aria-pressed).
   Mai distinto dal solo colore. */
.baseline-btn.is-on {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--navy-ink);
  font-weight: var(--fw-bold);
}
.delta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: stretch;
}
@media (min-width: 600px) {
  .delta__grid { grid-template-columns: 1fr auto 1fr; align-items: center; }
}
.delta__col {
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  border: 1px solid var(--line);
}
.delta__col--oggi { background: var(--surface-alt); }
.delta__col--con  { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.delta__col--con p { color: var(--on-navy); }
/* limit = confine onesto: presente ma piu' quieto del gain.
   Distinto da etichetta + peso + posizione (bordo), mai dal solo colore. */
.delta__col--con .delta__limit {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--navy-500);
  color: var(--on-navy-soft);
  font-size: var(--fs-small);
}
.delta__limit-label {
  display: inline-block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--fw-bold);
  color: var(--gold-soft);
  margin-right: var(--sp-2);
}
.delta__tag {
  display: inline-block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
  color: var(--text-soft);
}
.delta__tag--con { color: var(--gold-soft); }
.delta__arrow { text-align: center; font-size: var(--fs-h1); color: var(--gold); font-weight: var(--fw-bold); }
/* mobile: i due blocchi si impilano in verticale -> la freccia punta in basso */
@media (max-width: 599px) { .delta__arrow { transform: rotate(90deg); } }

/* ---------- prova del valore ---------- */
.proof {
  border-top: 2px solid var(--gold);
  padding-top: var(--sp-4);
}
.proof__label {
  display: inline-block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: var(--fw-bold);
  color: var(--text-soft);
  margin-bottom: var(--sp-2);
}
.proof__text { color: var(--text); }
.proof__metric {
  margin-top: var(--sp-2);
  font-weight: var(--fw-bold);
  color: var(--navy);
  font-size: var(--fs-h3);
}

/* ============================================================
   ROI
   ============================================================ */
/* stage roi: solo wrapper di layout (la card e' il blocco richiudibile) */
.stage--roi {
  max-width: var(--maxw);
  margin: 0 auto;
}
/* TITOLO DI SEZIONE: annuncia il cambio di registro (schede -> ritorno
   economico). Gerarchia da sezione (h2), diverso dai titoli-scheda (h3). */
.roi-section__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: var(--sp-4);
}

/* Il ROI e' una SEZIONE a sé, di natura diversa dalle schede cliniche
   (bianche): contenitore NAVY ad alto contrasto. La distinzione la fanno
   contenitore + titolo (non il solo colore). Accordion e logica invariati. */
.roi-accordion {
  background: var(--navy);
  border: 1px solid var(--navy-500);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* testa e testi del blocco ROI ritematizzati sul fondo scuro */
.roi-accordion .accordion-head { background: var(--navy); }
.roi-accordion .accordion-head__title { color: var(--on-navy); }
.roi-accordion .accordion-head:hover .accordion-head__title { color: var(--gold-soft); }
.roi-accordion .accordion-head__ambito { color: var(--on-navy-soft); }
.roi-accordion .accordion-chevron { color: var(--on-navy-soft); }
/* corpo del calcolatore: stesso stacco head/corpo, ma su navy */
.roi-panel { padding: var(--sp-5); border-top: 1px solid var(--navy-500); }
/* stima nella riga chiusa: in oro sul navy, il numero risalta */
.roi-collapsed__result { font-weight: var(--fw-bold); color: var(--gold); }
.roi__intro { color: var(--on-navy-soft); margin-bottom: var(--sp-4); max-width: 60ch; }

.roi-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 760px) { .roi-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.roi-inputs { display: flex; flex-direction: column; gap: var(--sp-4); }
.roi-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.roi-field__label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--on-navy); }
.roi-input {
  display: flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.roi-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.roi-input__fix {
  padding: 0 var(--sp-3);
  color: var(--text-soft);
  font-size: var(--fs-small);
  background: var(--surface-alt);
  align-self: stretch; display: flex; align-items: center;
}
.roi-input input {
  flex: 1; border: none; outline: none;
  padding: var(--sp-3);
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--navy-ink);
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

/* box risultato: su contenitore navy, una superficie piu' chiara (navy-700)
   con bordo, cosi' resta un riquadro distinto e il numero oro risalta */
.roi-out {
  background: var(--navy-700);
  border: 1px solid var(--navy-500);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  align-self: center; /* centrato in verticale rispetto ai tre campi input */
}
.roi-result { display: flex; flex-direction: column; align-items: center; text-align: center; }
.roi-result__num {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.roi-result__num--sm { font-size: var(--fs-h1); color: var(--on-navy); }
.roi-result__unit { color: var(--on-navy-soft); font-size: var(--fs-small); margin-top: var(--sp-1); }

/* ============================================================
   CHIUSURA
   ============================================================ */
.closing {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-gap) var(--sp-5);
  text-align: center;
}
.closing h2 { font-size: var(--fs-h1); color: var(--navy); margin-bottom: var(--sp-3); }
.closing p { color: var(--text-soft); max-width: 54ch; margin: 0 auto var(--sp-4); }
.closing__sub { color: var(--text); font-weight: var(--fw-bold); }
.closing__contact { color: var(--text); font-weight: var(--fw-medium); }

/* ============================================================
   SEC-HEAD: titolo + descrizione di sezione dentro un box "a bandiera"
   (lato sinistro dritto, testa destra tondeggiante). Navy pieno: mette in
   mostra il testo e stacca nettamente dal contenuto chiaro che segue.
   Sta in fondo al file per battere i margini dei singoli __head.
   ============================================================ */
.sec-head {
  background: var(--navy);
  /* testa destra: semi-ellisse alta quanto il box, larga quanto il primo raggio */
  border-radius: 0 56px 56px 0 / 0 50% 50% 0;
  padding: var(--sp-5) 68px var(--sp-5) var(--sp-5);
  /* staccato dal banner sticky sopra: e' un margine sul BOX, non sul titolo,
     cosi' non tocca il posizionamento sticky del banner (che resta a top:0 e
     continua a farsi spingere via dal banner successivo). Non riguarda le
     etichette d'area: quelle non hanno un box navy sotto. */
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
  max-width: none;
}
.sec-head h2 { color: var(--on-navy); }
.sec-head p { color: var(--on-navy-soft); }
@media (min-width: 760px) {
  .sec-head {
    border-radius: 0 88px 88px 0 / 0 50% 50% 0;
    padding: var(--sp-6) 108px var(--sp-6) var(--sp-6);
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-6);
  }
}

/* ---------- bottoni ---------- */
.btn {
  display: inline-block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  padding: var(--sp-3) var(--sp-6);
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition);
}
a.btn { text-decoration: none; }   /* i CTA-link (mailto/tel) sono bottoni, non testo */
.btn--primary { background: var(--gold); color: var(--navy-ink); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }
/* fascia ORO (CTA finale): due azioni gemelle, bianche con testo navy;
   all'hover si invertono (navy con testo bianco) */
.btn--white { background: #fff; border-color: #fff; color: var(--navy); }
.btn--white:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--on-navy); }

/* ---------- focus visibile per tastiera (accessibilità) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ============================================================
   MOBILE-ONLY — wizard d'apertura (<= 700px).
   TUTTO qui dentro: il desktop non e' toccato.
   ============================================================ */
@media (max-width: 700px) {

  /* transizione d'ingresso elegante tra gli step */
  @keyframes mStepIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .m-step { animation: mStepIn 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

  .m-pad { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--sp-6) var(--sp-5); }

  /* STEP 0 — hero a tutta altezza, adattivo al telefono */
  .m-hero {
    min-height: 100svh;            /* viewport reale del telefono */
    min-height: 100dvh;
    background: var(--navy);
    color: var(--on-navy);
    display: flex;
    flex-direction: column;
    padding-bottom: var(--sp-6);
  }
  .m-hero .topbar { flex: 0 0 auto; }
  .m-hero .kicker { color: var(--gold-soft); }
  .m-hero__content {
    flex: 1 1 auto;
    min-height: 0;                 /* permette all'immagine di rimpicciolirsi */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
  }
  .m-hero__wordmark {
    align-self: flex-start;        /* no stretch nel flex column */
    height: 22px; width: auto; max-width: 70%;
    margin-bottom: var(--sp-1);
  }
  .m-hero__title {
    /* il carattere si adatta alla larghezza del telefono */
    font-size: clamp(1.35rem, 6.2vw, 2.1rem);
    line-height: 1.16;
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
  }
  .m-hero__media { flex: 1 1 auto; min-height: 120px; display: flex; align-items: center; }
  .m-hero__media img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius);
  }
  .m-hero__cta { flex: 0 0 auto; padding: 0 var(--sp-5); }
  .m-hero__cta .btn { width: 100%; text-align: center; }

  /* pulsazione leggera ed elegante della CTA (nessun colore nuovo) */
  @keyframes mPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
  }
  .btn--pulse { animation: mPulse 2.2s ease-in-out infinite; }

  /* navigazione a schermate: barra "Avanti" alla fine di ogni sezione */
  .m-screen__nav { padding: var(--sp-3) var(--sp-5) var(--sp-8); text-align: center; }
  .m-screen__nav .btn { width: 100%; max-width: 24rem; text-align: center; }

  /* schermata rugbista (testimonianza): TUTTA gialla, niente striscia bianca
     sotto per la barra "Avanti". Il min-height riempie il viewport di oro
     anche se il contenuto e' corto. */
  .m-step--gold {
    background: var(--gold-soft);
    min-height: calc(100dvh - var(--topbar-h));
  }
  /* "Avanti" invertito: blu con testo giallo -> stacca sul giallo e si
     distingue di proposito dagli altri "Avanti" (e' l'inverso del btn--primary) */
  .m-step--gold .m-screen__nav .btn--primary {
    background: var(--navy); border-color: var(--navy); color: var(--gold);
  }
  .m-step--gold .m-screen__nav .btn--primary:hover {
    background: var(--navy-700); border-color: var(--navy-700); color: var(--gold);
  }

  /* #8/#2: titoli di sezione (e domanda casi #9) in BANNER GIALLO a tutta
     larghezza, sticky in cima. Il full-bleed (50%-50vw) li porta da bordo a
     bordo indipendentemente dal padding della sezione; top:0 + fondo opaco
     coprono tutta la parte alta -> niente contenuto che sbircia sopra. */
  .section-sticky,
  .identify__q {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--gold-soft);
    color: var(--navy);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: var(--sp-3) var(--sp-5);
  }
  /* etichetta d'area: nella vista percorso la topbar E' sticky, quindi il banner
     resta SOTTO la topbar (che copre lei il bordo alto -> niente peek). */
  .section-sticky--area { top: var(--topbar-h); }

  /* #11 — "Carica il laser": la rivelazione progressiva e' un PULL elastico
     (stile Apple pull-to-refresh) a tema laser. Scorrendo a fondo pagina l'anello
     si carica e il nucleo si accende di rosso (lo stesso rosso dell'impulso NRS);
     superata la soglia il laser "spara" un impulso e il contenuto entra con una
     molla. Tap = fallback accessibile (carica veloce + sparo).
     Il fondo ampio stacca l'invito dalla barra social fissa (bottom-right). */
  html { overscroll-behavior-y: contain; }   /* tiene cancelable il touchmove a fine pagina (iOS) */
  .scroll-hint {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    width: 100%; border: none; background: transparent; cursor: pointer;
    padding: var(--sp-7) var(--sp-5) calc(var(--sp-8) + 3.4rem);
    color: var(--navy); font-family: inherit;
    touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  }
  .scroll-hint__dial { position: relative; width: 64px; height: 64px; will-change: transform; }
  .scroll-hint__ring-svg { width: 64px; height: 64px; display: block; transform: rotate(-90deg); }
  .scroll-hint__track { fill: none; stroke: var(--navy); opacity: 0.14; stroke-width: 4; }
  .scroll-hint:not(.is-firing) .scroll-hint__track { animation: hintTrack 2.4s ease-in-out infinite; }
  @keyframes hintTrack { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.24; } }
  .scroll-hint__ring { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
  /* nucleo laser: si accende (opacita'/scala/glow) al crescere di --charge (0..1) */
  .scroll-hint__core {
    position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle, #fff4ec 0%, #ff5a2e 42%, #ff3d1a 78%);
    opacity: calc(0.25 + 0.75 * var(--charge, 0));
    transform: scale(calc(0.7 + 0.55 * var(--charge, 0)));
    box-shadow: 0 0 calc(4px + 18px * var(--charge, 0)) calc(1px + 4px * var(--charge, 0)) rgba(255, 90, 46, calc(0.65 * var(--charge, 0)));
  }
  .scroll-hint__halo {
    position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid #ff5a2e; opacity: 0; pointer-events: none;
  }
  .scroll-hint__label { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
  .scroll-hint__sub {
    font-size: var(--fs-micro); color: var(--navy-500);
    letter-spacing: var(--track-label); text-transform: uppercase;
  }
  .scroll-hint:not(.is-firing) .scroll-hint__sub { animation: hintBob 2s ease-in-out infinite; }
  @keyframes hintBob { 0%, 100% { transform: translateY(0); opacity: 0.65; } 50% { transform: translateY(3px); opacity: 1; } }
  /* rilascio elastico (molla) di quadrante e anello */
  .scroll-hint.is-releasing .scroll-hint__dial,
  .scroll-hint.is-releasing .scroll-hint__ring {
    transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
                stroke-dashoffset 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  /* SPARO: impulso superpulsato (nucleo che flasha + onda che si espande) */
  .scroll-hint.is-firing .scroll-hint__core { animation: hintCore 520ms ease-out forwards; }
  .scroll-hint.is-firing .scroll-hint__halo { animation: hintHalo 560ms ease-out forwards; }
  .scroll-hint.is-firing .scroll-hint__ring { animation: hintRingOut 360ms ease-out forwards; }
  @keyframes hintCore {
    0%   { transform: scale(1);   opacity: 1; }
    30%  { transform: scale(2.6); opacity: 1; }
    100% { transform: scale(0.2); opacity: 0; }
  }
  @keyframes hintHalo { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(7); opacity: 0; } }
  @keyframes hintRingOut { to { opacity: 0; } }
  .roi-hidden { display: none; }
  /* i target dello scroll atterrano sotto la topbar sticky */
  .stage { scroll-margin-top: calc(var(--topbar-h) + var(--sp-3)); }
}