/* ==========================================================================
   WineFor VERSIONE 2 — CASO STUDIO A 3 FASI, VERSIONE 2 (06/10/2026)
   Copia di case-study-fasi.css (la prova 2595 del 05/10, che resta online con il
   suo file) con le modifiche chieste da Simone il 06/10: la colonna fissa a destra
   non e' piu' "I risultati dopo 60 giorni" ma il RIQUADRO DELLA FASE CORRENTE
   (sezione 6). Si carica DOPO home3h.css e case-study.css (?v=10), che restano
   com'erano: questo file aggiunge i componenti nuovi (panoramica "Le 3 fasi",
   blocco-fase Prima/Dopo, infografiche, colonna con il riquadro della fase) senza
   toccare le pagine online che usano case-study.css. Quando la linea sara'
   approvata si potra' fondere in case-study.css (con cambio ?v=).

   Fonti di progetto: analisi UX/UI del 05/10/2026. Scelte in breve:
   - token del sito (teal, teal scuro al posto del nero di Simone, ottone solo
     come filetto), solo Inter;
   - Prima = bianco con bordo tratteggiato, Dopo = teal pieno (stesso linguaggio
     del Prima/Dopo della home); la Fase 3 ("primi segnali") ha la variante chiara;
   - il significato non passa mai dal solo colore: tratteggio, tag, forma dei
     marcatori, ordine e frecce;
   - tutto in rem e breakpoint in em (seguono il testo ingrandito); nessun testo
     sotto i 14px; nessun SVG con testo dentro.
   ========================================================================== */

:root {
  --cs-avorio: #F7F3EA;          /* stesso avorio delle infografiche del blog */
  --cs-spento: #5B6676;          /* testo/icone di "prima" e "prossimo": 5,8:1 su bianco */
  --cs-spento-linea: #7C8798;    /* solo tratteggi e anelli (3,6:1), mai testo */
}

/* ==========================================================================
   1. STATI (forma + testo, non solo colore): fatto / primi segnali / prossimo
   ========================================================================== */
.cs-stato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--testo);
}

.cs-stato::before {
  content: '';
  flex: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.cs-stato--fatto::before {
  background: var(--blu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.cs-stato--segnali::before {
  border: 2px solid var(--blu);
  background: conic-gradient(var(--blu) 0 50%, transparent 0);
}

.cs-stato--prossimo {
  color: var(--cs-spento);
}

.cs-stato--prossimo::before {
  border: 2px dashed var(--cs-spento-linea);
}

/* ==========================================================================
   2. PANORAMICA "LE 3 FASI" (grafica di Simone adattata)
   Titoli e frasi sono quelli di Simone; il nero diventa teal scuro; le icone
   sono a linea, senza schermi ne' telefoni. Sta FUORI dal wrapper .cs-storia.
   Spazio sopra e sotto uguale (48px, a tutte le larghezze): fino al 06/10/2026 sotto era
   0 e il pannello restava attaccato alla fascia beige di "Il contesto" (segnalazione
   dell'utente: era l'unico passaggio della pagina senza respiro, tutti gli altri hanno
   almeno 64px).
   ========================================================================== */
.cs-3fasi {
  padding: 48px 0;
}

.cs-3fasi-pannello {
  padding: 30px 16px 24px;
  background: var(--cs-avorio);
  border: 1px solid rgba(18, 58, 56, 0.14);
  border-radius: var(--radius-lg);
}

.cs-3fasi-filetto {
  display: block;
  width: 48px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 2px;
  background: var(--ottone);
}

.cs-3fasi-titolo {
  max-width: 24em;
  margin: 0 auto 36px;
  font-size: clamp(1.5rem, 3.6vw, 2.125rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--blu-dark);
}

.cs-3fasi-lista {
  display: grid;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-3fase {
  position: relative;
  display: flex;
  flex-direction: column;
}

.cs-3fase-box {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 34px 14px 18px;
  background: var(--bianco);
  border: 1.5px solid var(--blu-dark);
  border-radius: 6px;
}

/* cerchietto numerato sul bordo alto sinistro, come nella grafica di Simone */
.cs-3fase-num {
  position: absolute;
  top: -20px;
  left: -8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blu);
  color: var(--bianco);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--cs-avorio);
}

/* etichetta piena col titolo (il "riquadro nero" di Simone): bianco su teal scuro 12,4:1 */
.cs-3fase-nome {
  margin: 0;
  padding: 10px 12px;
  background: var(--blu-dark);
  border-radius: 4px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--bianco);
}

/* il titolo e' l'unico link: ::after lo estende a tutto il riquadro (un solo punto
   di tabulazione, nome del link breve) */
html .cs-3fase-nome a {
  color: var(--bianco);
  text-decoration: none;
}

.cs-3fase-nome a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

html .cs-3fase-nome a:focus-visible {
  outline: none;
}

.cs-3fase-nome a:focus-visible::after {
  outline: 3px solid var(--blu);
  outline-offset: 3px;
}

.cs-3fase-testo {
  font-size: var(--cs-t-supporto);
  line-height: 1.5;
  text-align: center;
  color: var(--testo);
}

.cs-3fase-testo b {
  font-weight: 800;
}

.cs-3fase-icone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 8px;
  margin-top: auto;
  padding-top: 4px;
}

.cs-3fase-icone li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--cs-t-micro);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--testo-muted);
}

.cs-3fase-icone .cs-ico {
  width: 32px;
  height: 32px;
  color: var(--blu);
  stroke-width: 1.75;
}

/* striscia di stato di Palui sotto ogni riquadro */
.cs-3fase-stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 12px;
  font-size: var(--cs-t-micro);
  color: var(--testo-muted);
}

@media (min-width: 48em) {
  .cs-3fasi-pannello {
    padding: 34px 28px 28px;
  }

  .cs-3fasi-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  /* tre colonne strette: "Contrada Palui" sopra, lo stato sotto, uguale per tutte e tre
     (altrimenti "Primi segnali", piu' lungo, andrebbe a capo da solo) */
  .cs-3fase-stato {
    flex-direction: column;
    gap: 4px;
  }
}

/* Tablet in verticale (768-899px): "Degustazioni" (89px a 14px) deve stare intera nella sua
   colonna dell'icona; si recuperano pochi pixel da margini e spazi, senza scendere sotto i 14px. */
@media (min-width: 48em) and (max-width: 56.1875em) {
  .cs-3fasi-pannello {
    padding-right: 16px;
    padding-left: 16px;
  }

  .cs-3fasi-lista {
    gap: 16px;
  }

  .cs-3fase-box {
    padding-right: 8px;
    padding-left: 8px;
  }

  .cs-3fase-icone {
    column-gap: 2px;
  }
}

/* ==========================================================================
   3. WRAPPER DELLA COLONNA: contiene SOLO la colonna e la sezione delle tre fasi
   ("Il contesto" sta fuori, sopra): il binario dello sticky dura quanto le fasi.
   --cs-rail-top: il riquadro parte a 116px dall'alto del wrapper = 96px di padding
   della sezione + 20px di cerchio che sporge sopra il riquadro, cosi' il cerchio
   col numero si allinea all'intestazione della Fase 1 (cerchio "1" + "Fase 1 di 3").
   --cs-rail-sticky: distanza dal bordo alto dello schermo quando si aggancia (44px
   = 24px di respiro sopra il cerchio, che sporge di 20px).
   ========================================================================== */
.cs-storia {
  --cs-rail-top: 116px;
  --cs-rail-sticky: 44px;
}

/* ==========================================================================
   4. BLOCCO-FASE (identico per le 3 fasi)
   ========================================================================== */
.cs-fb {
  max-width: 760px;
  scroll-margin-top: 24px;
}

.cs-fb + .cs-fb {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--bordo);
}

.cs-fb-testa {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.cs-fb-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blu);
}

.cs-fb-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blu);
  color: var(--bianco);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.cs-fb-titolo {
  font-size: clamp(1.625rem, 4.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---- coppia Prima -> Dopo (telefono: una colonna con freccia verticale) ---- */
.cs-pd {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.cs-prima,
.cs-dopo {
  padding: 16px;
  border-radius: var(--radius-lg);
}

.cs-prima {
  display: flex;
  flex-direction: column;
  background: var(--bianco);
  border: 2px dashed var(--cs-spento-linea);
}

.cs-dopo {
  background: var(--blu);
  color: var(--bianco);
}

/* tag: titolo (h3) a pillola, leggibile anche da screen reader */
.cs-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 14px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.cs-tag--prima {
  background: var(--cs-spento);
  color: var(--bianco);
}

.cs-tag--dopo {
  background: var(--bianco);
  color: var(--blu);
}

.cs-dopo-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
}

.cs-dopo-tags .cs-tag {
  margin: 0;
}

/* margin auto: quando il Dopo e' piu' alto, le voci stanno al centro del riquadro */
.cs-prima-lista {
  display: grid;
  gap: 12px;
  margin: auto 0;
}

.cs-prima-lista li {
  position: relative;
  padding-left: 28px;
  font-size: var(--cs-t-lettura);
  line-height: 1.5;
  color: var(--testo-muted);
}

.cs-prima-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px dashed var(--cs-spento-linea);
  border-radius: 50%;
}

/* freccia Prima -> Dopo: verticale su telefono, orizzontale da 600px */
.cs-pd-freccia {
  position: relative;
  display: block;
  height: 36px;
}

.cs-pd-freccia::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 10px;
  width: 2px;
  margin-left: -1px;
  background: var(--blu);
}

.cs-pd-freccia::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -7px;
  border-style: solid;
  border-width: 10px 7px 0 7px;
  border-color: var(--blu) transparent transparent transparent;
}

/* da 600px: Prima | freccia | Dopo affiancati, stessa altezza */
@media (min-width: 37.5em) {
  .cs-pd {
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.2fr);
    gap: 0;
    align-items: stretch;
  }

  .cs-prima,
  .cs-dopo {
    padding: 20px;
  }

  .cs-pd-freccia {
    align-self: center;
    height: 16px;
  }

  .cs-pd-freccia::before {
    left: 6px;
    right: 8px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
    margin: -1px 0 0;
  }

  .cs-pd-freccia::after {
    left: auto;
    right: 6px;
    top: 50%;
    bottom: auto;
    margin: -7px 0 0;
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent var(--blu);
  }
}

/* ---- numeri grandi del Dopo ---- */
.cs-numeri {
  display: grid;
  gap: 18px;
}

.cs-numero {
  display: grid;
  gap: 4px;
}

.cs-numero + .cs-numero {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.cs-numero-v {
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.cs-numero-t {
  font-size: var(--cs-t-lettura);
  line-height: 1.45;
}

/* Dopo della Fase 3 ("primi segnali"): variante CHIARA, per non far credere che
   siano risultati di vendita; tinta + bordo teal pieno, testo scuro (12,6:1) */
.cs-dopo--chiaro {
  background: var(--blu-tint);
  border: 2px solid var(--blu);
  color: var(--testo);
}

.cs-dopo--chiaro .cs-numero-v {
  color: var(--blu-dark);
}

.cs-dopo--chiaro .cs-numero + .cs-numero {
  border-top-color: rgba(18, 58, 56, 0.22);
}

.cs-dopo--chiaro .cs-tag--dopo {
  background: var(--blu);
  color: var(--bianco);
}

.cs-dopo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 12px 0 8px;
  background: var(--bianco);
  border: 2px solid var(--blu);
  border-radius: 999px;
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--blu-dark);
}

.cs-dopo-chip::before {
  content: '';
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--blu);
  border-radius: 50%;
  background: conic-gradient(var(--blu) 0 50%, transparent 0);
}

/* ---- testo del Dopo: cosa abbiamo fatto + risultati (parole di Simone) ---- */
.cs-fb-testo {
  max-width: 760px;
  margin-bottom: 28px;
}

.cs-fb-testo > p {
  font-size: var(--cs-t-lettura);
  line-height: 1.7;
  color: var(--testo-muted);
}

.cs-fb-testo .cs-check {
  margin-top: 18px;
  gap: 16px;
}

.cs-fb-testo > .cs-check:first-child {
  margin-top: 0;
}

.cs-fb-testo .cs-check li {
  line-height: 1.6;
}

/* la fonte del confronto: parole di Simone, qui in piccolo */
.cs-fonte {
  font-size: var(--cs-t-micro);
  color: var(--testo-muted);
}

/* ---- link tra le fasi e CTA di fine Fase 3 ---- */
.cs-fb-next {
  margin-top: 22px;
}

html .cs-fb-next a,
html .cs-fb-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--cs-t-supporto);
  font-weight: 600;
  color: var(--blu);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

html .cs-fb-next a:hover,
html .cs-fb-cta a:hover {
  color: var(--blu-dark);
}

html .cs-fb-next a:focus-visible,
html .cs-fb-cta a:focus-visible,
html .cs-tl-link:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 3px;
  border-radius: 4px;
}

.cs-fb-cta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bordo);
  font-size: var(--cs-t-lettura);
  line-height: 1.5;
  color: var(--testo);
}

/* ==========================================================================
   5. RIQUADRO INFOGRAFICA (avorio, filetto ottone: come le infografiche del blog)
   ========================================================================== */
.cs-info {
  margin: 0 0 28px;
  padding: 20px 16px 22px;
  background: var(--cs-avorio);
  border: 1px solid rgba(18, 58, 56, 0.14);
  border-radius: var(--radius-lg);
}

.cs-info-testa {
  margin-bottom: 18px;
}

.cs-info-testa::before {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 12px;
  border-radius: 2px;
  background: var(--ottone);
}

.cs-info-titolo {
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blu-dark);
}

.cs-info-nota {
  margin-top: 16px;
  font-size: var(--cs-t-supporto);
  line-height: 1.5;
  color: var(--testo-muted);
}

@media (min-width: 37.5em) {
  .cs-info {
    padding: 24px 24px 26px;
  }
}

/* ---- Fase 1: strade -> guida -> community (riusa i componenti .cs-schema-*) ---- */
.cs-schema-ingressi li.cs-ingresso--motore {
  background: var(--blu-tint);
  border: 2px solid var(--blu);
  box-shadow: none;
}

.cs-schema-ingressi .cs-schema-nota {
  margin-top: 2px;
  font-size: var(--cs-t-micro);
  color: var(--blu-dark);
}

/* il flusso a 5 colonne va dichiarato DOPO la regola a 7 colonne di case-study.css */
@media (min-width: 52.5em) {
  .cs-schema-flusso--f1 {
    grid-template-columns: minmax(0, 1.3fr) 22px minmax(0, 0.75fr) 22px minmax(0, 1.1fr);
    align-items: center;
  }
}

/* "Instagram" intera chiede un riquadro di circa 130px (parola 75px + icona + spazi):
   a due colonne non ci sta sotto i 380px di schermo ne' con il testo ingrandito
   dal lettore (150-200%). La soglia e' in rem, cosi' cresce con il testo: a grandezza
   normale restano due colonne da 390px in su, altrimenti si passa a una riga per voce.
   Sopra i 52.5em la colonna con la graffa e' della regola di case-study.css. */
@media (max-width: 52.4375em) {
  .cs-schema-flusso--f1 .cs-schema-ingressi {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr));
  }
}

/* ---- Fase 2: due griglie da 100 puntini ---- */
.cs-dots-coppia {
  display: grid;
  gap: 24px;
}

/* griglia sopra, numero e parole sotto: regge anche a 320px e con il testo ingrandito */
.cs-dots {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 0;
}

.cs-dots-svg {
  width: 120px;
  height: 120px;
}

.cs-dots figcaption {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cs-dots-num {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--blu);
}

.cs-dots-testo {
  font-size: var(--cs-t-lettura);
  line-height: 1.4;
  color: var(--testo);
}

@media (min-width: 37.5em) {
  .cs-dots-coppia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .cs-dots-svg {
    width: 136px;
    height: 136px;
  }
}

/* ---- Fase 3: linea del tempo con tre stati ---- */
.cs-tl {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-tl-passo {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
}

/* il filo che collega un passo al successivo (pieno, poi tratteggiato) */
.cs-tl-passo::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: -22px;
  width: 0;
  border-left: 2px solid var(--blu);
}

.cs-tl-passo--segnali::after {
  border-left-style: dotted;
}

.cs-tl-passo:last-child::after {
  display: none;
}

.cs-tl-marker {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
}

.cs-tl-marker--fatto {
  background: var(--blu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.cs-tl-marker--segnali {
  border: 2px solid var(--blu);
  background: conic-gradient(var(--blu) 0 50%, var(--bianco) 0);
}

.cs-tl-marker--prossimo {
  border: 2px dashed var(--cs-spento-linea);
  background: var(--bianco);
}

.cs-tl-corpo {
  min-width: 0;
}

.cs-tl-stato {
  margin: 2px 0 8px;
  font-size: var(--cs-t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blu-dark);
}

.cs-tl-passo--prossimo .cs-tl-stato {
  color: var(--cs-spento);
}

.cs-tl-testo {
  font-size: var(--cs-t-lettura);
  line-height: 1.5;
  color: var(--testo);
}

.cs-tl-testo + .cs-tl-testo {
  margin-top: 12px;
}

/* quattro buste: tre "solo contenuti" (piene), la quarta senza etichetta */
.cs-buste {
  display: flex;
  gap: 10px;
  margin: 12px 0 14px;
}

.cs-buste li {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--blu-tint);
  border-radius: 50%;
  background: var(--bianco);
  color: var(--blu);
}

.cs-buste li.cs-busta--pieno {
  background: var(--blu-tint);
  border-color: var(--blu-tint);
}

.cs-buste .cs-ico {
  width: 22px;
  height: 22px;
}

/* richieste e fatti: pillole con icona */
.cs-pillole {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.cs-pillole li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: var(--cs-t-supporto);
  font-weight: 600;
  line-height: 1.3;
  color: var(--testo);
}

.cs-pillole .cs-schema-icona {
  width: 30px;
  height: 30px;
}

.cs-pillole .cs-schema-icona .cs-ico {
  width: 17px;
  height: 17px;
}

/* fatti dell'HoReCa: frasi intere, una per riga */
.cs-fatti {
  display: grid;
  gap: 12px;
}

.cs-fatti li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--cs-t-lettura);
  line-height: 1.5;
  color: var(--testo);
}

.cs-fatti .cs-schema-icona {
  margin-top: 1px;
}

/* prossimi obiettivi: tratteggio + testo grigio spento (non sono risultati) */
.cs-pillole--prossimo li {
  background: transparent;
  border: 2px dashed var(--cs-spento-linea);
  box-shadow: none;
  color: var(--cs-spento);
}

.cs-pillole--prossimo .cs-schema-icona {
  background: var(--bianco);
  color: var(--cs-spento);
}

.cs-tl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 8px;
  font-size: var(--cs-t-supporto);
  font-weight: 600;
}

html .cs-tl-link {
  color: var(--blu);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ==========================================================================
   6. COLONNA FISSA = RIQUADRO DELLA FASE CORRENTE (richiesta di Simone, 06/10/2026)
   Il guscio e' .cs-rail di case-study.css: da 1340px sta a destra del testo
   (assoluto, 260-300px, alto quanto il wrapper) e il suo contenuto si aggancia
   (sticky) a 44px dal bordo alto. Dentro ci sono i tre riquadri della panoramica
   (copie, stesse classi .cs-3fase*) impilati nella stessa cella: se ne vede uno
   solo, quello della fase che si sta leggendo (classe .is-attiva, messa dal JS in
   fondo alla pagina). Sotto 1340px NON compare (su telefono e tablet l'indice e'
   la panoramica) e senza JS nemmeno (resterebbe sempre il riquadro 1).
   ========================================================================== */
@media (max-width: 83.6875em) {
  .cs-storia .cs-rail {
    display: none;
  }
}

html:not(.js) .cs-storia .cs-rail {
  display: none;
}

.cs-rail-sticky {
  position: sticky;
  top: var(--cs-rail-sticky);
  pointer-events: auto;           /* il binario (.cs-rail) non intercetta i click, il link si' */
}

/* i tre riquadri nella stessa cella: l'altezza e' quella del piu' alto, nessun salto al cambio */
.cs-rail-corrente {
  display: grid;
}

.cs-rail-box {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.cs-rail-box.is-attiva {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* nella panoramica l'alone del cerchio e' avorio (sfondo del pannello): qui lo sfondo e' bianco */
.cs-rail-box .cs-3fase-num {
  box-shadow: 0 0 0 4px var(--bianco);
}

/* link alla demo sotto il riquadro (scelta dell'utente): senza il filetto della vecchia card,
   centrato; selettore alzato per battere le regole di case-study.css (".cs-rail-link" a 1340px) */
html .cs-rail .cs-rail-sticky .cs-rail-link {
  margin-top: 6px;
  padding: 10px 0;
  border-top: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .cs-rail-box {
    transition: none;
  }
}

/* ==========================================================================
   7. MOVIMENTO RIDOTTO E ALTO CONTRASTO
   (case-study.css / home3h.css non li gestiscono: .reveal e lo scroll morbido
   restano com'erano nelle altre pagine)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .cs-dopo,
  .cs-3fase-box {
    border: 2px solid CanvasText;
  }

  .cs-tag,
  .cs-dopo-chip {
    border: 1px solid CanvasText;
  }

  .cs-info,
  .cs-3fasi-pannello {
    border-color: CanvasText;
  }
}