/*==============================================================================
  TRAINERSERRAMENTI - Sezioni della landing
  ---------------------------------------------------------------------------
  Stili specifici delle sezioni della pagina di vendita, nell'ordine in cui
  compaiono. Dipende dai token definiti in app.css.

    Comparsa progressiva
    02  Hero
    03  Barra dei dati
    04  Il problema
    05  Per chi e
    06  La promessa
    07  Il metodo
    08  L uomo preventivo
    09  La trasformazione
    10  Il formato
    11  Chi sono
    12  Esperienza nel settore
    13  I percorsi
    14  Focus Silver e Gold
    16  Garanzia
    17  Disponibilita
    18  Come funziona
    19  Modulo di contatto
    20  FAQ
    21  CTA finale
        Elementi condivisi
==============================================================================*/

/*------------------------------------------------------------------------------
  COMPARSA PROGRESSIVA
  Applicata agli elementi con data-reveal. Il JavaScript aggiunge is-visible
  quando entrano nello schermo; senza JavaScript, o con animazioni ridotte, il
  fallback qui sotto li mostra comunque.
------------------------------------------------------------------------------*/
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

[data-reveal].is-visible { opacity: 1; transform: none; }

.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/*------------------------------------------------------------------------------
  02 - HERO
------------------------------------------------------------------------------*/
.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: var(--sp-16);
  background:
    radial-gradient(ellipse at 75% 40%, var(--c-navy-900) 0%, transparent 65%),
    var(--c-black);
  color: var(--c-white);
  overflow: hidden;
}

/* Messaggio a sinistra, fotografia a destra. Su schermo stretto si impilano,
   con il testo sempre per primo: e quello che deve essere letto. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-10);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-12); }
}

.hero__content { max-width: 44rem; }

/*------------------------------------------------------------------------------
  FOTOGRAFIA DELL HERO
  Bianco e nero applicato via CSS e non inciso nel file: se il cliente rivuole
  il colore basta togliere la riga del filtro, senza rilavorare l immagine.
------------------------------------------------------------------------------*/
.hero__figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero__figure img {
  display: block;
  width: 100%;
  height: auto;

  /* Bianco e nero con un filo di contrasto in piu: senza, la scala di grigi
     risulta piatta e sembra una foto sbiadita invece che una scelta. */
  filter: grayscale(1) contrast(1.08) brightness(1.02);
}

/*
  Sfumatura sui bordi verso il nero della sezione.
  Serve a non lasciare la foto come un rettangolo incollato sul fondo: cosi
  sfuma nello sfondo e i due lati della pagina sembrano un pezzo unico.
*/
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgb(10 11 13 / 55%) 0%, transparent 28%),
    linear-gradient(to bottom, transparent 70%, rgb(10 11 13 / 45%) 100%);
}

@media (max-width: 899px) {
  /* Impilata, la foto non deve rubare mezza schermata */
  .hero__figure img { max-height: 44vh; object-fit: cover; }
}

/*
  Un gradino sotto la scala tipografica standard.

  Il titolo e lungo cinque righe e sta accanto alla fotografia: alla misura
  piena la colonna di testo diventava molto piu alta dell immagine e le due
  meta risultavano sbilanciate.
*/
/*
  Il titolo e passato da 76 a 91 caratteri (settembre 2026): alla dimensione
  precedente occupava sette righe e spingeva il pulsante fuori dalla prima
  schermata. Il massimo scende da 3,1 a 2,7rem.
*/
.hero__title {
  font-size: clamp(1.75rem, 2.1vw + 1.05rem, 2.7rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: var(--sp-6);
  color: var(--c-white);
}

/* La seconda frase comincia sempre da capo: in linea, 'TELAI. TUTTI' finiva
   sulla stessa riga e le due affermazioni si impastavano */
.hero__title .text-orange { display: block; }

.hero__text { font-size: var(--fs-lg); color: var(--c-text-light); max-width: 34rem; }
.hero__text--strong,
.hero__text--strong strong { color: var(--c-white); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-8) var(--sp-6);
}

/* Riga di microcopy con i pallini separatori */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.hero__meta li { position: relative; margin: 0; }

.hero__meta li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) / -2);
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--c-orange);
  transform: translate(-50%, -50%);
}

/*------------------------------------------------------------------------------
  03 - BARRA DEI DATI
------------------------------------------------------------------------------*/
/* Anche questa banda spariva sul nero dell hero: superficie piu chiara e filo
   arancione sopra e sotto, cosi i quattro dati si leggono come un blocco */
.stats-bar {
  background-color: var(--c-surface-dark);
  border-block: 1px solid var(--c-border-strong);
  box-shadow: inset 0 3px 0 var(--c-orange);
}

.stats-bar__list {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

@media (min-width: 560px) { .stats-bar__list { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 900px) {
  .stats-bar__list { grid-template-columns: repeat(4, 1fr); text-align: left; }

  /* Riga verticale arancione fra le voci */
  .stats-bar__item + .stats-bar__item {
    padding-left: var(--sp-6);
    border-left: 2px solid var(--c-orange);
  }
}

/*
  Le quattro voci hanno lunghezze diverse e una non ha sottotitolo: senza
  accorgimenti finirebbero disallineate fra loro.

  La griglia allunga tutte le colonne alla stessa altezza (stretch), i valori
  partono dall'alto e le descrizioni vengono spinte in fondo da margin-top:auto.
  Risultato: tutti i titoli iniziano sulla stessa riga e tutte le descrizioni
  finiscono sulla stessa riga, quale che sia la lunghezza del testo.
*/
.stats-bar__list { align-items: stretch; }

/* Icona a sinistra, testo a destra: come nel render approvato dal cliente */
.stats-bar__item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.stats-bar__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--c-orange);
  /* Allinea otticamente l icona alla prima riga del titolo */
  margin-top: 2px;
}

.stats-bar__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.stats-bar__label { margin-top: auto; }

/* Su schermo stretto le voci sono centrate: lo diventa anche la coppia
   icona + testo, altrimenti resterebbe appiccicata a sinistra */
@media (max-width: 899px) {
  .stats-bar__item { justify-content: center; }
}

.stats-bar__value {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-white);
  line-height: 1.15;
}

/* Valori lunghi ("Oltre 3 milioni €", "Gestione Cantieri e ShowRoom") scendono
   di un gradino e stringono la spaziatura: restano su due righe invece di tre,
   accanto a quelli brevi */
.stats-bar__value--long {
  font-size: var(--fs-base);
  letter-spacing: 0;
  line-height: 1.25;
}

.stats-bar__label { font-size: var(--fs-sm); color: var(--c-text-muted); }

/*------------------------------------------------------------------------------
  04 - IL PROBLEMA
------------------------------------------------------------------------------*/

/*
  Testo affiancato al titolo, in nero pieno invece del grigio dei paragrafi.

  Qui non e un sottotitolo di servizio: e il ragionamento che deve arrivare, e
  il grigio lo faceva sembrare secondario. Peso 500 invece di 400: si legge piu
  deciso senza diventare grassetto, che griderebbe troppo su tre paragrafi
  interi.
*/
.lead--impact {
  color: var(--c-text-dark);
  font-weight: 500;
}

.lead--impact strong { font-weight: 800; }

/* Su fondo scuro il nero non serve: torna il bianco */
.section--dark .lead--impact,
.section--navy .lead--impact { color: var(--c-white); }

/* Titolo un po' piu largo della colonna di testo affiancata */
@media (min-width: 900px) {
  .split--wide-text { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/*
  Il flusso e diviso in TRE gruppi, non quattro riquadri uguali:

    [ Cataloghi | Listini ]  →  [ Schede tecniche ]  →  [ Cliente ]

  Cataloghi e listini sono due facce della stessa cosa, quindi si toccano e
  non hanno freccia in mezzo. Le frecce compaiono solo fra i gruppi, dove c'e
  un passaggio vero.
*/
.flow-steps {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
  margin: var(--sp-12) 0 0;
  padding: 0;
}

@media (min-width: 860px) {
  .flow-steps {
    /* Il primo gruppo contiene due riquadri: pesa il doppio */
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--sp-8);
    align-items: stretch;
  }
}

.flow-steps__group {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: 0;

  /* Tutti i gruppi hanno la stessa scatola: solo la coppia mostra il bordo.
     Cosi le tre colonne restano allineate senza correzioni a mano. */
  padding: var(--sp-3);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
}

.flow-steps__group--single { grid-template-columns: 1fr; }

/*
  Cataloghi e listini: due cose distinte che appartengono allo stesso mondo.
  Il rettangolo arancione li tiene insieme senza fonderli — restano due
  riquadri separati, ma si legge a colpo d occhio che vanno considerati
  come un blocco unico.
*/
.flow-steps__group--pair {
  border-color: var(--c-orange);
  background-color: rgb(240 116 33 / 6%);
}

/* Freccia fra un gruppo e il successivo */
@media (min-width: 860px) {
  .flow-steps__group + .flow-steps__group::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-8) / -2);
    top: 50%;
    width: var(--sp-4);
    height: 2px;
    background-color: var(--c-orange);
    transform: translate(-50%, -50%);
  }
}

/*------------------------------------------------------------------------------
  RIQUADRI DEL FLUSSO
------------------------------------------------------------------------------*/
.flow-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
  background-color: var(--c-white);
  text-align: center;
}

/* Dentro il rettangolo arancione i due riquadri restano separati e completi:
   e il contenitore a raggrupparli, non serve unirli anche graficamente */

.flow-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;

  /* Il mondo della carta e grigio: bianco e nero sui primi tre riquadri */
  filter: grayscale(1) contrast(1.06);
}

.flow-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 auto;
  justify-content: center;
  padding: var(--sp-4) var(--sp-3);
}

.flow-card__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}

.flow-card__note { font-size: var(--fs-xs); color: var(--c-text-muted); }

/*
  L'ultimo riquadro e il momento della verita: fondo scuro e — soprattutto —
  l'unica immagine a colori. Il contrasto col grigio dei tre precedenti dice
  da solo che qui si passa dalla carta alla persona.
*/
.flow-card--accent {
  border-color: transparent;
  background-color: var(--c-navy-900);
  color: var(--c-white);
}

.flow-card--accent .flow-card__img { filter: none; }
.flow-card--accent .flow-card__note { color: var(--c-text-light); }

/*------------------------------------------------------------------------------
  05 - PER CHI E
------------------------------------------------------------------------------*/
.audience { display: flex; flex-direction: column; }

.audience__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius);
  background-color: var(--c-navy-900);
  color: var(--c-orange);
}

/*------------------------------------------------------------------------------
  06 - LA PROMESSA
------------------------------------------------------------------------------*/
.statement__title {
  font-size: var(--fs-3xl);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 0;
}

/*------------------------------------------------------------------------------
  06 - QUANTO COSTA NON AGIRE

  Il titolo e il comando: cliccandolo scendono le due strade.

  L apertura non usa l attributo hidden, e non e una svista: in questo foglio
  [hidden] vale display:none !important, che spegne qualsiasi transizione. Qui
  si anima grid-template-rows da 0fr a 1fr, che e il modo pulito di far
  scendere un pannello di altezza non nota. Chiuso, il pannello prende
  l attributo inert (lo mette lo script): resta nel documento ma esce dal giro
  della tastiera, altrimenti si potrebbe entrare con il tab in due link
  invisibili.

  Stato di partenza APERTO: senza JavaScript le due scelte si vedono e si
  cliccano lo stesso. E lo script che chiude, non che apre.
------------------------------------------------------------------------------*/
.cost-heading { margin: 0; text-align: center; }

.cost-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.cost-trigger__text {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-text-dark);
}

/* L arancione da testo, non quello del marchio: su fondo bianco l altro
   starebbe a 2,9:1 */
.cost-trigger__accent { display: block; color: var(--c-orange-text); }

.cost-trigger:hover .cost-trigger__text {
  text-decoration: underline;
  text-decoration-color: var(--c-orange);
  text-underline-offset: 8px;
  text-decoration-thickness: 3px;
}

.cost-trigger:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 8px;
  border-radius: var(--radius);
}

/* La freccia del set punta a destra: ruotata di 90 gradi indica "scendi" */
.cost-trigger__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--c-orange);
  border-radius: 999px;
  color: var(--c-orange-text);
  transform: rotate(90deg);
  transition: transform var(--transition), background-color var(--transition),
              color var(--transition);
}

.cost-trigger:hover .cost-trigger__chevron,
.cost-trigger[aria-expanded="true"] .cost-trigger__chevron {
  background-color: var(--c-orange);
  color: var(--c-navy-900);
}

/* Aperto: la freccia si gira verso l alto, "richiudi" */
.cost-trigger[aria-expanded="true"] .cost-trigger__chevron { transform: rotate(-90deg); }

/* --- Il pannello che scende --- */
.cost-choice {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cost-choice.is-closed { grid-template-rows: 0fr; }

.cost-choice__inner {
  overflow: hidden;
  /* Spazio perche le ombre delle due schede non vengano tagliate dal ritaglio */
  padding: var(--sp-8) 4px 4px;
}

.cost-choice__pair {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 620px) {
  .cost-choice__pair { grid-template-columns: 1fr 1fr; }
}

/* --- Le due scelte --- */
.cost-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border: 2px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  background-color: var(--c-white);
  box-shadow: 0 8px 22px rgb(15 24 38 / 7%);
  text-align: center;
  text-decoration: none;
  color: inherit;
  /* Punto di partenza dell entrata: simmetrico, una da sinistra e una da
     destra, tutte e due dall alto verso il basso */
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms ease,
              border-color var(--transition),
              box-shadow var(--transition);
}

.cost-option--left  { transform: translate(-20px, -16px); }
.cost-option--right { transform: translate(20px, -16px); }

.cost-choice:not(.is-closed) .cost-option {
  transform: none;
  opacity: 1;
  transition-delay: 60ms;
}

.cost-choice:not(.is-closed) .cost-option:hover {
  transform: translateY(-4px);
  border-color: var(--c-orange);
  box-shadow: 0 18px 34px rgb(15 24 38 / 14%);
}

.cost-option:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 4px;
}

.cost-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background-color: rgb(240 116 33 / 12%);
  color: var(--c-orange-text);
}

.cost-option__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--c-text-dark);
}

.cost-option__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-orange-text);
}

/* --- Il video dentro il pannello ---

   Rapporto 4:3 perche il video e caricato cosi (960x720 al massimo, non e un
   16:9): in un riquadro panoramico prenderebbe due bande nere ai lati.

   La larghezza si ferma a 720px anche se il contenitore arriva a 820: oltre i
   960px del filmato non c e altra definizione da mostrare, si ingrandirebbero
   solo i pixel.

   La copertina e un <button>, non un div con un onclick: e la tastiera a
   dovercelo poter arrivare, e il focus visibile ce l ha gia gratis. Sotto
   chiuso il pannello prende "inert" (lo mette lo script), quindi non si finisce
   col tab su un pulsante invisibile. */
.cost-video {
  max-width: 720px;
  margin: var(--sp-8) auto 0;
}

.cost-video__cover,
.cost-video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  background-color: var(--c-navy-900);
  box-shadow: 0 8px 22px rgb(15 24 38 / 7%);
}

.cost-video__cover {
  padding: 0;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.cost-video__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cost-video__cover:hover {
  border-color: var(--c-orange);
  box-shadow: 0 18px 34px rgb(15 24 38 / 14%);
}

.cost-video__cover:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 4px;
}

/* Il pulsante di riproduzione.

   NON al centro, ed e voluto: la copertina e il fotogramma di apertura del
   video, cioe il logo TRAINERSERRAMENTI su una striscia bianca in mezzo a due
   bande nere. Un pulsante centrato ci cade esattamente sopra e copre il nome.
   All 84% dell altezza sta al centro della banda nera inferiore, dove non
   nasconde niente e si legge meglio.

   Se un giorno si cambia la copertina, questa e la riga da ricontrollare.

   Fondo arancione pieno: sopra ci va testo SCURO, il bianco sull arancione
   sta a 2,91:1 (vedi la nota sui colori in CLAUDE.md). */
.cost-video__play {
  position: absolute;
  top: 84%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-radius: 999px;
  background-color: var(--c-orange);
  color: var(--c-navy-900);
  box-shadow: 0 10px 26px rgb(15 24 38 / 35%);
  transition: transform var(--transition), background-color var(--transition);
}

.cost-video__play-label {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cost-video__cover:hover .cost-video__play {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Il riquadro che prende il posto della copertina dopo il clic */
.cost-video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.cost-video__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
  text-align: center;
}

/* Chi ha chiesto meno animazioni vede il pannello aprirsi e basta */
@media (prefers-reduced-motion: reduce) {
  .cost-choice,
  .cost-option,
  .cost-video__cover,
  .cost-video__play,
  .cost-trigger__chevron { transition: none; }

  .cost-option--left,
  .cost-option--right { transform: none; }

  .cost-choice:not(.is-closed) .cost-option:hover { transform: none; }

  .cost-video__cover:hover .cost-video__play { transform: translate(-50%, -50%); }
}

/*------------------------------------------------------------------------------
  06a - LA POSTA IN GIOCO

  Il ragionamento che precede la tabella, dentro l intestazione scura delle
  pagine /quanto-ti-costa.

  I due finali sono perdite, non risultati: portano il rosso, non l arancione
  del marchio. L arancione qui direbbe la cosa sbagliata, perche su tutto il
  resto del sito segna quello che va bene.
------------------------------------------------------------------------------*/
.stakes { margin-top: var(--sp-8); max-width: 46rem; }

.stakes__setup {
  font-size: var(--fs-lg);
  color: var(--c-text-light);
  margin-bottom: var(--sp-5);
}

/* La frase forte sta su una riga sua: dentro il paragrafo si perdeva */
.stakes__punch {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-orange);
  margin-bottom: var(--sp-6);
}

.stakes__endings {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.stakes__ending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-loss);
  border-radius: var(--radius);
  /* Velo rosso appena accennato: basta a staccare il blocco dal nero senza
     trasformare la pagina in un allarme */
  background-color: rgb(224 92 92 / 8%);
}

.stakes__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--c-loss);
  color: var(--c-loss);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1;
}

.stakes__what {
  flex: 1 1 14rem;
  color: var(--c-white);
}

.stakes__what strong { color: var(--c-loss); }

.stakes__tag {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-loss);
  white-space: nowrap;
}

/* Ponte verso la tabella: chiude il ragionamento e indica sotto */
.stakes__bridge {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-white);
  margin: 0;
}

/* La frase di passaggio annuncia la tabella che sta appena sotto: con lo
   stacco pieno fra sezioni finiva lontana da quello che annunciava */
.section--to-table { padding-bottom: clamp(2rem, 4vw, 3rem); }

/*------------------------------------------------------------------------------
  06b - LA TABELLA DEL CALCOLO

  Usata dalle pagine /quanto-ti-costa/{profilo}. Il titolare la usa gia; per il
  candidato bastera riempire il template con le stesse classi.

  Non e un <table>: non sono dati a righe e colonne, sono due premesse e un
  confronto. Un <table> qui direbbe una cosa falsa a chi legge con lo screen
  reader, e sarebbe anche il modo piu scomodo di tenere insieme la graffa.
------------------------------------------------------------------------------*/
.calc {
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  background-color: var(--c-white);
  box-shadow: 0 10px 30px rgb(15 24 38 / 6%);
}

@media (min-width: 700px) {
  .calc { padding: var(--sp-10); }
}

.calc__title {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  color: var(--c-text-dark);
  margin-bottom: var(--sp-6);
}

/* Le fonti stanno sotto il titolo, in tono minore ma leggibili: sono la
   ragione per cui i numeri qui sotto si possono scrivere */
.calc__sources {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text-muted);
}

/* --- Le premesse --- */
.calc__premises {
  list-style: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
  border-top: 1px solid var(--c-border-light);
}

.calc__premises li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border-light);
}

.calc__premise-label {
  flex: 1 1 16rem;
  font-size: var(--fs-sm);
  color: var(--c-text-body);
}

.calc__premise-label em { font-style: normal; color: var(--c-text-muted); }

.calc__premise-value {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-text-dark);
  white-space: nowrap;
}

.calc__premise-value em {
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-muted);
}

/* --- Il confronto ---
   Tre colonne: le due righe, la graffa, la conclusione. Sotto i 780px la
   graffa sparisce e i due blocchi si impilano: una graffa alta due centimetri
   su un telefono non terrebbe insieme niente. */
.calc__compare {
  display: grid;
  gap: var(--sp-5);
}

.calc__rows { display: grid; gap: var(--sp-4); align-content: center; }

.calc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-border-light);
  border-left: 4px solid var(--c-border-light);
  border-radius: var(--radius);
  background-color: var(--c-light);
}

/* La riga con il percorso e l unica marcata: e il confronto, si deve vedere
   quale delle due e la differenza */
.calc__row--after {
  border-color: var(--c-border-light);
  border-left-color: var(--c-orange);
  background-color: #fff6ef;
}

/* La riga in perdita. Rosso e non arancione: nella pagina del candidato la
   cifra evidenziata e quello che si sta lasciando sul tavolo, non un
   risultato. Usare l arancione direbbe il contrario. */
.calc__row--loss {
  border-color: var(--c-border-light);
  border-left-color: var(--c-loss-text);
  background-color: #fcf0f0;
}

.calc__row--loss .calc__ratio,
.calc__row--loss .calc__math { color: var(--c-loss-text); }

.calc__row--loss .calc__who {
  font-weight: 700;
  color: var(--c-loss-text);
}

/* Cerniera fra due gruppi di premesse: la domanda che tiene insieme il fisso
   e la parte variabile */
.calc__aside {
  margin: var(--sp-5) 0 var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--c-orange);
  font-size: var(--fs-lg);
  color: var(--c-text-body);
}

.calc__aside strong {
  font-family: var(--font-heading);
  color: var(--c-text-dark);
}

.calc__ratio {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--c-text-dark);
}

.calc__row--after .calc__ratio { color: var(--c-orange-text); }

.calc__math {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text-dark);
}

.calc__who {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* --- La graffa --- */
.calc__brace { display: none; }

.calc__brace svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- La conclusione --- */
.calc__outcome {
  align-self: center;
  padding: var(--sp-5);
  border-radius: var(--radius);
  background-color: var(--c-navy-900);
  color: var(--c-text-light);
}

.calc__delta {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: var(--sp-1);
}

.calc__delta strong { color: var(--c-orange); }

.calc__delta-label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--sp-4);
}

.calc__payback { font-size: var(--fs-sm); margin: 0; }

.calc__disclaimer {
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border-light);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.calc__cta { margin-top: var(--sp-8); text-align: center; }

@media (min-width: 780px) {
  .calc__compare {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: stretch;
  }

  /* La graffa compare solo qui, dove ha due righe vere da abbracciare */
  .calc__brace {
    display: block;
    align-self: stretch;
    color: var(--c-orange);
  }
}

/*------------------------------------------------------------------------------
  07 - IL METODO — il percorso

  Il cliente non si riconosceva in sei riquadri allineati, e aveva ragione: il
  titolo promette un tragitto ("dal catalogo alla conversazione") e la griglia
  non lo raccontava.

  Qui la sezione e una strada. La linea tratteggiata e il tracciato, i pallini
  numerati sono le tappe, le schede stanno in rilievo sopra la linea, e i due
  estremi sono le parole del titolo: si parte dal catalogo, si arriva alla
  conversazione.

  Mobile-first: in verticale la strada scende fra una scheda e l altra; da
  760px in su diventa orizzontale su tre colonne.
------------------------------------------------------------------------------*/
.journey { margin-top: var(--sp-8); }

/* --- I due estremi del tragitto --- */
.journey__end {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-light);
}

.journey__end-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 999px;
}

/* Partenza: tratteggiata e spenta, e il punto da cui ci si muove */
.journey__end--start .journey__end-mark {
  border: 2px dashed var(--c-border-strong);
  color: var(--c-text-light);
}

/* Arrivo: pieno, e la destinazione. Icona scura sull arancione, come i bottoni */
.journey__end--finish { justify-content: flex-end; text-align: right; }

.journey__end--finish .journey__end-mark {
  order: 2;                  /* prima la scritta, poi il traguardo */
  background-color: var(--c-orange);
  color: var(--c-navy-900);
  box-shadow: 0 8px 20px rgb(240 116 33 / 30%);
}

/* --- Il tracciato --- */
.journey__path {
  display: grid;
  gap: var(--sp-10) var(--sp-6);
  list-style: none;
  margin: var(--sp-6) 0;
  padding: 0;
}

.journey__stop {
  position: relative;
  /* Il pallino sta sopra la scheda, non sopra il suo bordo: cosi la strada
     corre nel vuoto e si vede per intero invece di sparire dietro le schede */
  padding-top: 68px;
}

/* Il trattino che appende la scheda alla sua fermata */
.journey__stop::after {
  content: "";
  position: absolute;
  top: 52px;
  left: 50%;
  width: 2px;
  height: 16px;
  transform: translateX(-50%);
  background-color: var(--c-road);
}

/* Su schermo stretto la strada scende nel vuoto sopra ogni tappa */
.journey__stop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--sp-10));
  width: 2px;
  height: var(--sp-10);
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    180deg, var(--c-road) 0 8px, transparent 8px 16px
  );
}

.journey__stop:first-child::before { display: none; }

/* --- Il pallino della tappa --- */
.journey__node {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  /* Il bordo del colore della sezione ritaglia il pallino dentro la linea,
     cosi il tratteggio sembra passargli sotto invece che toccarlo */
  border: 4px solid var(--c-black);
  background-color: var(--c-orange);
  color: var(--c-navy-900);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 18px rgb(0 0 0 / 55%);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* --- La scheda in rilievo --- */
.journey__card {
  height: 100%;
  padding: calc(var(--sp-6) + 14px) var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-lg);
  /* La sfumatura da sola non basta: il filo chiaro in cima (inset) simula la
     luce che batte sul bordo superiore, ed e quello che da il rilievo */
  background-image: linear-gradient(180deg, #23395a 0%, #16253a 100%);
  box-shadow:
    0 18px 34px rgb(0 0 0 / 55%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.journey__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-sm);
  background-color: rgb(240 116 33 / 16%);
  color: var(--c-orange);
}

.journey__title {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
}

.journey__text { font-size: var(--fs-sm); color: var(--c-text-light); margin: 0; }

/* Al passaggio la tappa si solleva: ombra piu lunga, luce piu forte in cima */
.journey__stop:hover .journey__card {
  transform: translateY(-6px);
  border-color: var(--c-orange);
  box-shadow:
    0 26px 46px rgb(0 0 0 / 65%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
}

.journey__stop:hover .journey__node {
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 10px 26px rgb(240 116 33 / 45%);
}

@media (min-width: 760px) {
  .journey__path { grid-template-columns: repeat(3, 1fr); }

  /*
    I due estremi si agganciano al tracciato con un trattino verticale,
    altrimenti restano due bollini appesi nel vuoto invece che l inizio e
    la fine della stessa strada.

    Solo da 760px in su: sotto, la strada e verticale e centrata, quindi i
    trattini non troverebbero nulla da agganciare.
  */
  .journey__end { position: relative; }

  .journey__end::after {
    content: "";
    position: absolute;
    width: 2px;
    background-image: repeating-linear-gradient(
      180deg, var(--c-road) 0 8px, transparent 8px 16px
    );
  }

  /* Dalla partenza giu fino alla linea della prima fila */
  .journey__end--start::after {
    top: 100%;
    left: 22px;
    height: calc(var(--sp-6) + 26px);
  }

  /* Dall ultima scheda giu fino al traguardo */
  .journey__end--finish::after {
    bottom: 100%;
    right: 22px;
    height: var(--sp-6);
  }

  /* Da qui il tracciato e orizzontale: passa dietro le schede e riemerge nei
     vuoti fra una tappa e l altra, all altezza dei pallini */
  .journey__stop::before {
    top: 26px;
    left: calc(-1 * var(--sp-6));
    right: calc(-1 * var(--sp-6));
    width: auto;
    height: 2px;
    transform: none;
    background-image: repeating-linear-gradient(
      90deg, var(--c-road) 0 8px, transparent 8px 16px
    );
  }

  .journey__stop:first-child::before { display: block; }
}

/* Chi ha chiesto meno animazioni non vede sollevarsi niente */
@media (prefers-reduced-motion: reduce) {
  .journey__stop:hover .journey__card { transform: none; }
  .journey__stop:hover .journey__node { transform: translateX(-50%); }
}
/*------------------------------------------------------------------------------
  08 - L UOMO PREVENTIVO
------------------------------------------------------------------------------*/
.sequence {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) { .sequence { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .sequence { grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); } }

.sequence__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-5) var(--sp-3);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius);
  text-align: center;
}

.sequence__icon { color: var(--c-text-muted); }

.sequence__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-light);
  line-height: 1.35;
}

/* Il silenzio del cliente e il punto d'arrivo: si accende in arancione */
.sequence__item--end { border-color: var(--c-orange); background-color: rgb(240 116 33 / 8%); }
.sequence__item--end .sequence__icon { color: var(--c-orange); }
.sequence__item--end .sequence__label { color: var(--c-white); }

.callout {
  padding: var(--sp-8);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--radius);
  background-color: var(--c-navy-800);
  text-align: center;
}

.callout__title {
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}

.callout__text { font-size: var(--fs-lg); color: var(--c-text-light); }

/*------------------------------------------------------------------------------
  09 - LA TRASFORMAZIONE
------------------------------------------------------------------------------*/
.transformation__col {
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--radius);
  border: 1px solid var(--c-border-light);
  background-color: var(--c-light);
}

.transformation__col--after {
  border-color: var(--c-orange);
  background-color: var(--c-white);
  box-shadow: var(--shadow);
}

.transformation__heading {
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
}

.transformation__col--after .transformation__heading { color: var(--c-orange); }

.transformation__quote {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text-dark);
  margin-bottom: var(--sp-6);
}

/* Catena verticale con connettori fra un anello e il successivo */
.transformation__chain { list-style: none; margin: 0; padding: 0; }

.transformation__chain li {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-body);
}

.transformation__chain li:last-child { margin-bottom: 0; }

.transformation__chain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-text-muted);
}

.transformation__chain li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(0.45em + 10px);
  width: 2px;
  height: calc(100% + var(--sp-6) - 14px);
  background-color: var(--c-border-light);
}

.transformation__col--after .transformation__chain li { color: var(--c-text-dark); }
.transformation__col--after .transformation__chain li::before { background-color: var(--c-orange); }
.transformation__col--after .transformation__chain li:not(:last-child)::after { background-color: rgb(240 116 33 / 35%); }

/*------------------------------------------------------------------------------
  10 - IL FORMATO
------------------------------------------------------------------------------*/
.format-card {
  padding: var(--sp-6);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius);
  text-align: center;
}

.format-card__icon { display: inline-flex; color: var(--c-orange); margin-bottom: var(--sp-4); }

.format-card__title {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-1);
}

.format-card__text { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

/*------------------------------------------------------------------------------
  11 - CHI SONO
------------------------------------------------------------------------------*/
.portrait {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/*
  Ritratto verticale ricavato da uno scatto piu largo.
  object-position tiene il volto nel terzo superiore invece di centrarlo:
  centrandolo, il taglio verticale lascerebbe troppo spazio sopra la testa.
*/
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}

/*------------------------------------------------------------------------------
  12 - ESPERIENZA NEL SETTORE
------------------------------------------------------------------------------*/
/*
  Ritratto, testo e marchi in fila, come nel render del cliente.

  Tre colonne solo da 1180px in su: sotto, i loghi non starebbero in quattro per
  riga senza diventare illeggibili, quindi passano sotto a tutta larghezza.
*/
.about { display: grid; gap: var(--sp-8); }

@media (min-width: 760px) {
  .about { grid-template-columns: 0.9fr 1.1fr; align-items: start; }

  /* Finche le colonne sono due, i marchi occupano una riga intera */
  .about__brands { grid-column: 1 / -1; }
}

@media (min-width: 1180px) {
  .about { grid-template-columns: 0.62fr 0.95fr 1.43fr; gap: var(--sp-6); }
  .about__brands { grid-column: auto; }
}

/* --- I marchi --- */
.brands__title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text-dark);
  margin-bottom: var(--sp-5);
}

.brands__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 520px) {
  .brands__grid { grid-template-columns: repeat(3, 1fr); }
}

/*
  Ogni logo sta su una piastrella bianca. Non e decorazione: i file sono JPEG
  con il fondo bianco, e su questa sezione grigia si vedrebbero come rettangoli
  bianchi appoggiati a caso. Dentro una piastrella diventano una scelta.
*/
.brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
  background-color: var(--c-white);
}

/*
  24px e il tetto: oltre, il logo piu piccolo (Gibus, 33px di altezza reale)
  comincia a sgranarsi sugli schermi a doppia densita. width:auto serve perche
  gli attributi width/height nel markup, messi per non far ballare la pagina in
  caricamento, altrimenti vincerebbero sul ridimensionamento.
*/
.brands__item img {
  width: auto;
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
}

.brands__more {
  display: flex;
  align-items: center;
  padding-left: var(--sp-2);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--c-text-muted);
}

/* Occupa quello che resta della riga, qualunque sia il numero di colonne */
@media (min-width: 520px) {
  .brands__more { grid-column: 2 / -1; }
}

/*------------------------------------------------------------------------------
  13 - I PERCORSI
------------------------------------------------------------------------------*/
.pricing {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  align-items: start;
}

@media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, 1fr); } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius-lg);
  background-color: var(--c-navy-800);
}

/* La scheda in evidenza si stacca dalle altre: bordo arancione e, su desktop,
   leggermente piu grande, come nel render */
.plan--featured {
  border-color: var(--c-orange);
  border-width: 2px;
  background-color: var(--c-navy-950);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 900px) {
  .plan--featured { transform: scale(1.04); z-index: 1; }
}

.plan__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--sp-1) var(--sp-4);
  border-radius: 999px;
  background-color: var(--c-orange);
  color: var(--c-navy-900);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan__header {
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-border-dark);
  text-align: center;
}

.plan__tier {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}

.plan__name {
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}

.plan--featured .plan__name { color: var(--c-orange); }

.plan__price { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); }

.plan__amount {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-white);
}

.plan__vat { font-size: var(--fs-xs); color: var(--c-text-muted); }

.plan__meta { font-size: var(--fs-sm); color: var(--c-text-light); margin-bottom: var(--sp-2); }

.plan__tagline { font-size: var(--fs-sm); color: var(--c-text-muted); font-style: italic; margin: 0; }

/* L'elenco cresce, il piede resta ancorato in basso: cosi i tre pulsanti sono
   allineati anche se i percorsi hanno un numero diverso di voci */
.plan__features { flex: 1 1 auto; color: var(--c-text-light); margin-bottom: var(--sp-6); }

.plan__footer { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }

.plan__details {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.plan__details:hover { color: var(--c-orange); }

/* --- 14 - Guida alla scelta --- */
.choice-guide {
  padding: var(--sp-8);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius);
}

.choice-guide__title {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-6);
  text-align: center;
}

.choice-guide__list { display: grid; gap: var(--sp-4); margin: 0; }

@media (min-width: 800px) { .choice-guide__list { grid-template-columns: repeat(3, 1fr); } }

.choice-guide__list > div {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--c-orange);
}

.choice-guide__list dt {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--sp-1);
}

.choice-guide__list dd { margin: 0; font-size: var(--fs-sm); color: var(--c-text-light); }

/*------------------------------------------------------------------------------
  14-15 - FOCUS SILVER E GOLD
------------------------------------------------------------------------------*/
.reassurance {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--radius);
  background-color: var(--c-light);
}

.reassurance__icon { color: var(--c-orange); flex-shrink: 0; }

.reassurance__title {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.reassurance__text { font-size: var(--fs-sm); color: var(--c-text-body); }

.mini-card {
  padding: var(--sp-5);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
  background-color: var(--c-white);
}

.mini-card__icon { display: block; color: var(--c-orange); margin-bottom: var(--sp-3); }

.mini-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

.mini-card__text { font-size: var(--fs-sm); color: var(--c-text-body); margin: 0; }

/*------------------------------------------------------------------------------
  16 - GARANZIA E DISPONIBILITA

  Una fascia sola, dallo screen del cliente: garanzia scura a sinistra, il
  perche del limite a destra, il cartellino "max 5" in fondo.

  Sostituisce i vecchi blocchi .guarantee* e .reason-list*, che stavano in due
  sezioni separate e ora non servono piu a nessuno.
------------------------------------------------------------------------------*/
.pledge { display: grid; gap: var(--sp-6); }

@media (min-width: 1000px) {
  .pledge {
    grid-template-columns: 1fr 1.15fr 215px;
    gap: var(--sp-8);
    align-items: stretch;
  }
}

/* --- Sinistra: la garanzia --- */
.pledge__guarantee {
  /*
    La scheda porta il suo fondo scuro dentro una sezione chiara. Le sezioni
    chiare ridefiniscono --c-text-muted per il bianco: qui dentro quel valore
    sarebbe troppo scuro e la nota a piede sparirebbe. Si riportano i colori da
    fondo scuro, che e quello che la scheda ha davvero.
  */
  --c-text-muted: #8a94a3;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  background-color: var(--c-navy-950);
  color: var(--c-text-light);
}

.pledge__head { display: flex; align-items: flex-start; gap: var(--sp-5); }

.pledge__shield { display: flex; flex-shrink: 0; color: var(--c-orange); }

.pledge__title {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}

.pledge__title-accent { color: var(--c-orange); }

.pledge__text { font-size: var(--fs-sm); margin: 0; }

.pledge__refund {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--c-orange);
  margin: 0;
}

.pledge__note {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border-dark);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.pledge__note a { color: var(--c-orange); }

/* --- Destra: perche solo cinque --- */
.pledge__availability {
  display: grid;
  gap: var(--sp-6);
  align-content: center;
}

/* La domanda regge la colonna centrale: alla dimensione precedente
   (--fs-lg) si perdeva accanto al titolo della garanzia, che e piu grande */
.pledge__ask {
  margin: 0;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--c-text-dark);
}

.pledge__reasons {
  list-style: none;
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
}

.pledge__reason {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-body);
}

.pledge__reason-icon { display: flex; color: var(--c-text-dark); }

.pledge__overflow { margin: 0; font-size: var(--fs-sm); color: var(--c-text-body); }

@media (min-width: 560px) {
  .pledge__reasons { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .pledge__reasons { grid-template-columns: repeat(4, 1fr); gap: 0; }

  /* I filetti verticali fra una ragione e l altra, come nel riferimento.
     Solo qui: impilate, un bordo a sinistra non separerebbe niente. */
  .pledge__reason { padding-inline: var(--sp-3); }
  .pledge__reason + .pledge__reason { border-left: 1px solid var(--c-border-light); }
}

/* --- Il cartellino --- */
.pledge__cap {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-5);
  border-radius: var(--radius-lg);
  background-color: var(--c-navy-950);
  text-align: center;
}

.pledge__cap-text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--c-white);
}

.pledge__cap-icon { display: flex; color: var(--c-orange); }

/*------------------------------------------------------------------------------
  18 - COME FUNZIONA
------------------------------------------------------------------------------*/
.process {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: process;
}

@media (min-width: 640px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .process { grid-template-columns: repeat(4, 1fr); } }

.process__step {
  position: relative;
  margin: 0;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--c-border-dark);
}

.process__number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.process__title {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
}

.process__text { font-size: var(--fs-sm); color: var(--c-text-light); margin: 0; }

/*------------------------------------------------------------------------------
  19 - MODULO DI CONTATTO
------------------------------------------------------------------------------*/
.form { display: flex; flex-direction: column; gap: var(--sp-5); }

/*
  Honeypot. Nascosto in modo che nemmeno gli screen reader lo annuncino, ma
  senza display:none, che alcuni bot riconoscono ed evitano.
*/
.form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__row { display: grid; gap: var(--sp-5); }

@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }

.field__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-dark);
  padding: 0;
}

.field__input {
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
  background-color: var(--c-white);
  font-family: var(--font-body);
  /* 16px pieni: sotto questa soglia iOS ingrandisce la pagina al focus */
  font-size: 1rem;
  color: var(--c-text-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field__input:focus {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgb(240 116 33 / 18%);
  outline: none;
}

.field__input--area { resize: vertical; min-height: 7rem; }

.field__input--error { border-color: var(--c-error); }

.field__error { font-size: var(--fs-sm); color: var(--c-error); margin: 0; font-weight: 500; }

.field__hint { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; }

/* --- Scelta del profilo --- */
.choice-group { display: grid; gap: var(--sp-3); }

@media (min-width: 700px) { .choice-group { grid-template-columns: repeat(3, 1fr); } }

.choice { display: block; cursor: pointer; }

/* Il radio nativo resta raggiungibile da tastiera ma invisibile: lo stile e
   sul riquadro, che e molto piu facile da toccare su telefono */
.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choice__box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--c-border-light);
  border-radius: var(--radius-sm);
  background-color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  transition: border-color var(--transition), background-color var(--transition);
}

.choice input:checked + .choice__box {
  border-color: var(--c-orange);
  background-color: rgb(240 116 33 / 8%);
  font-weight: 600;
}

.choice input:focus-visible + .choice__box {
  outline: 3px solid var(--c-orange);
  outline-offset: 2px;
}

/* --- Consenso privacy --- */
.consent { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }

.consent input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--c-orange);
}

.consent span { font-size: var(--fs-sm); color: var(--c-text-body); line-height: 1.5; }
/* Il consenso sta sempre su fondo chiaro: arancione da testo, non da marchio */
.consent a { color: var(--c-orange-text); }

.form__alert {
  padding: var(--sp-4);
  border-left: 4px solid var(--c-error);
  border-radius: var(--radius-sm);
  background-color: #fdeaea;
  color: #7f1d1d;
  font-size: var(--fs-sm);
  margin: 0;
}

.form__note {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-align: center;
  margin: 0;
}

/*------------------------------------------------------------------------------
  20 - FAQ
------------------------------------------------------------------------------*/
.faq { border-top: 1px solid var(--c-border-light); }

.faq__item { border-bottom: 1px solid var(--c-border-light); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text-dark);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

/* Toglie il triangolino nativo, sostituito dal segno + qui sotto */
.faq__question::-webkit-details-marker { display: none; }

.faq__question:hover { color: var(--c-orange); }

/* Segno + che ruota diventando - all'apertura */
.faq__marker {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.faq__marker::before,
.faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--c-orange);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}

.faq__marker::before { width: 14px; height: 2px; }
.faq__marker::after  { width: 2px; height: 14px; }

.faq__item[open] .faq__marker::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__answer {
  padding-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text-body);
  max-width: 65ch;
}

/*------------------------------------------------------------------------------
  21 - CTA FINALE
------------------------------------------------------------------------------*/
.final-cta__title {
  font-size: var(--fs-3xl);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-white);
  margin-bottom: var(--sp-8);
}

/* --- Le due opzioni ---------------------------------------------------------
   Sono un aut aut, e si devono leggere come tale: due blocchi affiancati,
   distinti dal colore del filo a sinistra. Rosso quello da evitare, arancione
   quello da scegliere. Su schermo stretto si impilano, e l ordine conta:
   prima il problema, poi la soluzione. */
.final-cta__options {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  text-align: left;
}

@media (min-width: 820px) {
  .final-cta__options { grid-template-columns: 1fr 1fr; }
}

.final-cta__option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-5);
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: var(--fs-sm);
  color: var(--c-text-light);
}

/* Il velo di colore e appena accennato: deve distinguere i due blocchi, non
   trasformare la chiusura della pagina in un semaforo */
.final-cta__option--a {
  border-left-color: var(--c-loss);
  background-color: rgb(224 92 92 / 8%);
}

.final-cta__option--b {
  border-left-color: var(--c-orange);
  background-color: rgb(240 116 33 / 10%);
}

.final-cta__option strong { color: var(--c-white); }

.final-cta__mark { flex-shrink: 0; font-size: 1.05rem; line-height: 1.5; }

.final-cta__note {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
}


/*------------------------------------------------------------------------------
  ELEMENTI CONDIVISI
------------------------------------------------------------------------------*/

/* Riga di chiusura di una sezione, con barra arancione a sinistra */
.quote-line {
  padding-left: var(--sp-5);
  border-left: 3px solid var(--c-orange);
  font-size: var(--fs-lg);
  color: var(--c-text-body);
}

.section--dark .quote-line,
.section--navy .quote-line { color: var(--c-text-light); }

.quote-line strong { color: var(--c-text-dark); }
.section--dark .quote-line strong,
.section--navy .quote-line strong { color: var(--c-white); }

.icon { flex-shrink: 0; }

/* --- Pagine legali --- */
.legal__notice {
  padding: var(--sp-5);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--radius-sm);
  background-color: #fff3e8;
  color: #7c3a06;
}

.legal h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
.legal h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }

.legal ul { margin-bottom: var(--sp-5); }
.legal li { margin-bottom: var(--sp-2); }

.legal code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background-color: var(--c-light-alt);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.legal__nowrap { white-space: nowrap; }

/*
  Le tabelle delle informative hanno colonne di testo lungo: su schermo stretto
  non si possono comprimere oltre un certo punto senza renderle illeggibili,
  quindi scorrono dentro il loro contenitore invece di sfondare la pagina.
*/
.legal__table-wrap {
  overflow-x: auto;
  margin-bottom: var(--sp-6);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
}

.legal__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.legal__table th,
.legal__table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border-light);
}

.legal__table thead th {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dark);
  background-color: var(--c-light);
}

.legal__table tbody tr:last-child :is(th, td) { border-bottom: 0; }

.legal__table td { color: var(--c-text-body); }

/*------------------------------------------------------------------------------
  BANNER COOKIE
  Il sito usa solo cookie tecnici, quindi il banner informa e non blocca nulla.
------------------------------------------------------------------------------*/
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  padding: var(--sp-4) var(--container-pad);
  background-color: var(--c-navy-950);
  border-top: 2px solid var(--c-orange);
  transform: translateY(100%);
  transition: transform 260ms ease-out;
}

.cookie-banner.is-visible { transform: none; }

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  max-width: var(--container-max);
  margin-inline: auto;
}

@media (min-width: 800px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; gap: var(--sp-8); }
}

.cookie-banner__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-light);
  line-height: 1.55;
}

.cookie-banner__text a { color: var(--c-orange); }

.cookie-banner__button { flex-shrink: 0; }

@media (max-width: 520px) { .cookie-banner__button { width: 100%; } }

/*------------------------------------------------------------------------------
  PAGINA DI RINGRAZIAMENTO
------------------------------------------------------------------------------*/
.thanks__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--sp-6);
  border-radius: 50%;
  background-color: rgb(240 116 33 / 12%);
  color: var(--c-orange);
}

.thanks__next {
  margin-top: var(--sp-10);
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  background-color: var(--c-light);
  text-align: left;
}

.thanks__next-title {
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
}

.thanks__steps {
  margin: 0;
  padding-left: var(--sp-5);
  counter-reset: none;
}

.thanks__steps li { font-size: var(--fs-base); color: var(--c-text-body); }
.thanks__steps li::marker { color: var(--c-orange); font-weight: 700; }

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/*------------------------------------------------------------------------------
  PAGINA DEL PERCORSO
------------------------------------------------------------------------------*/
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-orange); }
.breadcrumb [aria-current] { color: var(--c-white); }

.package-hero__inner { align-items: start; }

.package-hero__title {
  font-size: var(--fs-4xl);
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}

.package-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
}

.package-hero__facts li { display: flex; flex-direction: column; margin: 0; }

.package-hero__fact-value {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1;
}

.package-hero__fact-label { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* --- Riquadro prezzo --- */
.price-box {
  padding: var(--sp-8) var(--sp-6);
  border: 2px solid var(--c-orange);
  border-radius: var(--radius-lg);
  background-color: var(--c-navy-800);
  text-align: center;
}

/* Su desktop resta visibile mentre si scorre la pagina */
@media (min-width: 900px) {
  .price-box { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}

.price-box__amount {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-white);
  margin-bottom: var(--sp-1);
}

.price-box__vat { font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: var(--sp-6); }

.price-box__features {
  text-align: left;
  color: var(--c-text-light);
  margin-bottom: var(--sp-6);
}

.price-box__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* --- Elenco delle voci incluse --- */
.feature-grid {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
}

@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }

.feature-grid__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--radius);
  background-color: var(--c-light);
  font-size: var(--fs-sm);
}

.feature-grid__icon { color: var(--c-orange); flex-shrink: 0; display: flex; margin-top: 2px; }

/* --- Schede degli altri percorsi --- */
.other-plan { display: flex; flex-direction: column; align-items: flex-start; }

.other-plan__tier {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}

.other-plan__price {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1;
  margin-bottom: var(--sp-3);
}