/* ============================================================
   PAGE — Da Lead a Cash
   Pipeline narrativa guidata dallo scroll + comparazione prima/dopo.
   Solo token del design system. Nessuna immagine raster.
   ============================================================ */

/* ─────────────────────────────────────────────
   1. SEZIONE
   ───────────────────────────────────────────── */
.lc-story{
  position:relative;
  overflow:clip;                 /* clip, non hidden: non rompe il position:sticky */
  background:
    radial-gradient(120% 60% at 78% 42%, rgba(92,243,164,.055), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 38%, var(--bg-2) 72%, var(--bg) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.lc-story .lc-head{max-width:820px}

.lc-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,3.6vw,58px);
  align-items:start;
}

/* Il palco resta agganciato mentre i passi scorrono */
.lc-story .story-sticky{
  align-self:start;
  height:100svh;
  display:flex;
  align-items:center;
  overflow:visible;
}
.lc-stage-in{width:100%}

/* ─────────────────────────────────────────────
   2. PALCO — testata, canvas, binario
   ───────────────────────────────────────────── */
.lc-scene{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.008) 46%, rgba(255,255,255,0));
  padding:clamp(16px,1.6vw,24px);
  box-shadow:0 30px 90px -50px rgba(0,0,0,.95);
}
.lc-scene::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 12% 50%, #000, transparent 72%);
  mask-image:radial-gradient(120% 90% at 12% 50%, #000, transparent 72%);
  opacity:.35;
}

/* Testata: fase corrente a sinistra, valore corrente a destra */
.lc-hud{
  position:relative;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding-bottom:14px;margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.lc-hud-l{display:flex;flex-direction:column;gap:7px;min-width:0}
.lc-phase{
  font-family:var(--font-ui);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.lc-phase b{color:var(--green);font-weight:700}
.lc-phase-static{display:none}

/* Nome dello stato: 5 righe sovrapposte, si mostra solo l'attiva */
.lc-names{position:relative;height:1.34em}
.lc-name{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.4rem);letter-spacing:-.03em;line-height:1.34;
  color:var(--text);
  opacity:0;transform:translateY(9px);filter:blur(5px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);
}

/* Valore corrente: 5 valori sovrapposti */
.lc-vals{display:grid;text-align:right;flex-shrink:0;min-width:min(48%,236px)}
.lc-val{
  grid-area:1/1;align-self:end;justify-self:end;
  opacity:0;transform:translateY(10px);filter:blur(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease);
}
.lc-val b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.5vw,2.3rem);letter-spacing:-.045em;line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums;
  text-shadow:0 0 34px rgba(92,243,164,.35);
}
.lc-val.is-tag b{font-size:clamp(1.05rem,1.6vw,1.45rem);letter-spacing:-.02em}
.lc-val span{
  display:block;margin-top:5px;font-size:.76rem;line-height:1.4;
  letter-spacing:.01em;color:var(--text-faint);max-width:230px;margin-left:auto;
}

/* Corpo del palco: la discesa a sinistra, il binario delle tappe a destra.
   L'imbuto e' verticale: si entra dalla bocca in alto, si esce dal collo in basso. */
.lc-body{
  display:flex;align-items:stretch;
  gap:clamp(12px,1.5vw,24px);
  margin:12px 0 4px;
}

/* Canvas: imbuto + particelle */
.lc-canvas{
  position:relative;flex:1 1 auto;min-width:0;
  height:clamp(280px,calc(100svh - 340px),440px);
}
.lc-funnel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc-wall{fill:none;stroke:var(--line-2);stroke-width:1.3;stroke-linecap:round}
.lc-fill{fill:url(#lcFill);opacity:.35;transition:opacity .8s var(--ease)}
.lc-gate{stroke:var(--line);stroke-width:1.2;opacity:.45;transition:stroke .6s var(--ease),opacity .6s var(--ease),stroke-width .6s var(--ease)}
.lc-neck{fill:none;stroke:var(--green);stroke-width:1.6;opacity:.22;transition:opacity .7s var(--ease)}
.lc-spark{fill:url(#lcSpark);opacity:0;transition:opacity .8s var(--ease)}

/* Il livello raggiunto: sale e scende fino al cancello attivo.
   E' quello che lega uno stadio al successivo mentre si scorre. */
.lc-fluid{
  fill:url(#lcFluid);
  transform-box:fill-box;transform-origin:top center;
  transform:scaleY(var(--fl,.14));
  transition:transform 1.15s var(--ease);
}
.lc-level{
  position:absolute;left:0;right:0;top:var(--lvl,8.5%);height:1px;z-index:2;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,
    transparent, rgba(92,243,164,.5) 24%,
    rgba(92,243,164,.9) 50%, rgba(92,243,164,.5) 76%, transparent);
  box-shadow:0 0 24px rgba(92,243,164,.5);
  transition:top .9s var(--ease),opacity .6s var(--ease);
}

/* Linee di flusso: il movimento del sistema, discreto */
.lc-flow{
  fill:none;stroke:var(--green);stroke-width:1;opacity:.12;
  stroke-dasharray:3 17;
  animation:lcFlow 11s linear infinite;
}
@keyframes lcFlow{to{stroke-dashoffset:-200}}

/* Particelle */
.lc-dots{position:absolute;inset:0;z-index:2}
.lc-dot{
  position:absolute;display:block;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  left:calc(var(--x) + (var(--tx) - var(--x)) * var(--p,0));
  top:calc(var(--y) + (var(--ty) - var(--y)) * var(--p,0));
  background:var(--dotc,#565b6a);
  transform:scale(var(--s,1));
  box-shadow:0 0 calc(14px * var(--glow,0)) rgba(92,243,164,calc(.8 * var(--glow,0)));
  transition:
    left 1.15s var(--ease) var(--d,0s),
    top 1.15s var(--ease) var(--d,0s),
    background .7s var(--ease),
    opacity .6s var(--ease),
    box-shadow .7s var(--ease),
    transform .8s var(--ease);
}
.lc-dot[data-tier="0"]{--cap:0}
.lc-dot[data-tier="1"]{--cap:.25}
.lc-dot[data-tier="2"]{--cap:.5}
.lc-dot[data-tier="3"]{--cap:.75}
.lc-dot[data-tier="4"]{--cap:1}

/* Binario delle 5 tappe: verticale, accanto alla discesa */
.lc-rail{
  position:relative;z-index:3;
  list-style:none;margin:0;padding:0 0 0 17px;
  display:grid;grid-template-rows:repeat(5,1fr);gap:0;
  border-left:1px solid var(--line);
  flex:0 0 clamp(104px,11vw,142px);
}
.lc-rail li{
  position:relative;display:flex;align-items:center;
  font-size:.76rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);line-height:1.22;
  transition:color .55s var(--ease);
}
.lc-rail li::before{
  content:"";position:absolute;left:-17px;top:50%;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--line-2);
  transition:background .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease),transform .55s var(--ease);
}

/* Nota metodologica sotto al palco */
.lc-note{
  margin:16px 2px 0;font-size:.76rem;line-height:1.5;color:var(--text-faint);
  display:flex;gap:8px;align-items:flex-start;
}
.lc-note i{color:var(--green);font-size:.9rem;line-height:1.35;flex-shrink:0}

/* ─────────────────────────────────────────────
   3. PASSI NARRATIVI
   ───────────────────────────────────────────── */
.lc-story .story-step{min-height:100svh;display:flex;align-items:center;opacity:.3}
.lc-story .story-step.on{opacity:1}
.lc-step-in{
  position:relative;width:100%;
  padding:26px 0 26px 28px;
  border-left:1px solid var(--line);
  transition:border-color .6s var(--ease);
}
.lc-step-in::before{
  content:"";position:absolute;left:-1px;top:26px;bottom:26px;width:2px;
  background:linear-gradient(180deg, transparent, var(--green), transparent);
  opacity:0;transition:opacity .6s var(--ease);
}
.lc-story .story-step.on .lc-step-in::before{opacity:.9}

.lc-step-n{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:16px;
  transition:color .5s var(--ease);
}
.lc-step-n em{
  font-style:normal;font-family:var(--font-display);font-size:.9rem;
  letter-spacing:0;color:var(--text-faint);font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.lc-story .story-step.on .lc-step-n{color:var(--green)}
.lc-story .story-step.on .lc-step-n em{color:var(--green)}

.lc-step-in h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  letter-spacing:-.04em;line-height:1.06;margin:0 0 14px;
  text-wrap:balance;
}
.lc-step-in > p{
  color:var(--text-dim);font-size:1.02rem;line-height:1.62;
  max-width:46ch;margin:0;text-wrap:pretty;
}

.lc-metric{
  margin-top:24px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg, rgba(255,255,255,.038), rgba(255,255,255,.006));
  display:flex;flex-direction:column;gap:5px;max-width:400px;
  transition:border-color .6s var(--ease),background .6s var(--ease);
}
.lc-story .story-step.on .lc-metric{border-color:var(--green-line)}
.lc-metric b{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.045em;line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums;
}
.lc-metric span{font-size:.82rem;color:var(--text-faint);line-height:1.45}
.lc-metric.is-tag b{font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.03em}

/* Chiusura della sezione */
.lc-close{
  margin-top:clamp(28px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:26px 30px;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(92,243,164,.07), rgba(255,255,255,.014) 58%);
}
.lc-close p{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.035em;line-height:1.14;text-wrap:balance}
.lc-close small{display:block;margin-top:7px;font-family:var(--font-ui);font-weight:400;
  font-size:.86rem;letter-spacing:0;color:var(--text-dim)}

/* ─────────────────────────────────────────────
   4. STATI — la macchina guidata da data-active (solo desktop)
   ───────────────────────────────────────────── */
@media(min-width:1081px){
  /* --sp: quanto e' scesa la colonna · --fl: quanto e' pieno l'imbuto
     --lvl: la quota del cancello attivo (y del gate / 520 dello viewBox) */
  .lc-stage{--sp:0;--dotc:#565b6a;--glow:0;--fl:.15;--lvl:8.5%}
  .lc-stage[data-active="1"]{--sp:.25;--dotc:#6f7789;--glow:.18;--fl:.31;--lvl:24.6%}
  .lc-stage[data-active="2"]{--sp:.5;--dotc:#86a89b;--glow:.4;--fl:.48;--lvl:41.5%}
  .lc-stage[data-active="3"]{--sp:.75;--dotc:#79d6ab;--glow:.72;--fl:.66;--lvl:58.8%}
  .lc-stage[data-active="4"]{--sp:1;--dotc:var(--green);--glow:1;--fl:1;--lvl:78.8%}

  .lc-dot{--p:min(var(--sp,0),var(--cap,0))}
  .lc-level{opacity:.85}

  /* Le particelle che non superano il filtro restano indietro e si spengono */
  .lc-stage[data-active="1"] .lc-dot[data-tier="0"],
  .lc-stage[data-active="2"] :is(.lc-dot[data-tier="0"],.lc-dot[data-tier="1"]),
  .lc-stage[data-active="3"] :is(.lc-dot[data-tier="0"],.lc-dot[data-tier="1"],.lc-dot[data-tier="2"]),
  .lc-stage[data-active="4"] :is(.lc-dot[data-tier="0"],.lc-dot[data-tier="1"],.lc-dot[data-tier="2"],.lc-dot[data-tier="3"]){
    opacity:.26;background:#585d6b;box-shadow:none;transform:scale(.44);
  }

  /* Il condotto si accende man mano che ci si avvicina al fatturato */
  .lc-stage[data-active="1"] .lc-fill{opacity:.5}
  .lc-stage[data-active="2"] .lc-fill{opacity:.68}
  .lc-stage[data-active="3"] .lc-fill{opacity:.85}
  .lc-stage[data-active="4"] .lc-fill{opacity:1}
  .lc-stage[data-active="2"] .lc-flow{opacity:.2}
  .lc-stage[data-active="3"] .lc-flow{opacity:.28}
  .lc-stage[data-active="4"] .lc-flow{opacity:.4}

  /* Cancello attivo */
  .lc-stage[data-active="0"] .lc-gate[data-g="0"],
  .lc-stage[data-active="1"] .lc-gate[data-g="1"],
  .lc-stage[data-active="2"] .lc-gate[data-g="2"],
  .lc-stage[data-active="3"] .lc-gate[data-g="3"],
  .lc-stage[data-active="4"] .lc-gate[data-g="4"]{
    stroke:var(--green);opacity:.95;stroke-width:1.7;
  }

  /* Nome + valore dello stato attivo */
  .lc-stage[data-active="0"] .lc-name[data-s="0"],
  .lc-stage[data-active="1"] .lc-name[data-s="1"],
  .lc-stage[data-active="2"] .lc-name[data-s="2"],
  .lc-stage[data-active="3"] .lc-name[data-s="3"],
  .lc-stage[data-active="4"] .lc-name[data-s="4"],
  .lc-stage[data-active="0"] .lc-val[data-s="0"],
  .lc-stage[data-active="1"] .lc-val[data-s="1"],
  .lc-stage[data-active="2"] .lc-val[data-s="2"],
  .lc-stage[data-active="3"] .lc-val[data-s="3"],
  .lc-stage[data-active="4"] .lc-val[data-s="4"]{
    opacity:1;transform:none;filter:none;
  }

  /* Contatore di fase */
  .lc-stage[data-active="0"] .lc-phase b::after{content:"1"}
  .lc-stage[data-active="1"] .lc-phase b::after{content:"2"}
  .lc-stage[data-active="2"] .lc-phase b::after{content:"3"}
  .lc-stage[data-active="3"] .lc-phase b::after{content:"4"}
  .lc-stage[data-active="4"] .lc-phase b::after{content:"5"}

  /* Binario: tappe già superate + tappa corrente */
  .lc-stage[data-active="0"] .lc-rail li:nth-child(-n+1),
  .lc-stage[data-active="1"] .lc-rail li:nth-child(-n+2),
  .lc-stage[data-active="2"] .lc-rail li:nth-child(-n+3),
  .lc-stage[data-active="3"] .lc-rail li:nth-child(-n+4),
  .lc-stage[data-active="4"] .lc-rail li:nth-child(-n+5){
    color:var(--text-dim);
  }
  .lc-stage[data-active="0"] .lc-rail li:nth-child(-n+1)::before,
  .lc-stage[data-active="1"] .lc-rail li:nth-child(-n+2)::before,
  .lc-stage[data-active="2"] .lc-rail li:nth-child(-n+3)::before,
  .lc-stage[data-active="3"] .lc-rail li:nth-child(-n+4)::before,
  .lc-stage[data-active="4"] .lc-rail li:nth-child(-n+5)::before{
    background:var(--green);border-color:var(--green);
  }
  .lc-stage[data-active="0"] .lc-rail li:nth-child(1),
  .lc-stage[data-active="1"] .lc-rail li:nth-child(2),
  .lc-stage[data-active="2"] .lc-rail li:nth-child(3),
  .lc-stage[data-active="3"] .lc-rail li:nth-child(4),
  .lc-stage[data-active="4"] .lc-rail li:nth-child(5){
    color:var(--green);
  }
  .lc-stage[data-active="0"] .lc-rail li:nth-child(1)::before,
  .lc-stage[data-active="1"] .lc-rail li:nth-child(2)::before,
  .lc-stage[data-active="2"] .lc-rail li:nth-child(3)::before,
  .lc-stage[data-active="3"] .lc-rail li:nth-child(4)::before,
  .lc-stage[data-active="4"] .lc-rail li:nth-child(5)::before{
    transform:translate(-50%,-50%) scale(1.5);
    box-shadow:0 0 0 5px rgba(92,243,164,.14),0 0 18px rgba(92,243,164,.55);
  }

  /* Collo dell'imbuto: si accende alla fine */
  .lc-stage[data-active="2"] .lc-neck{opacity:.42}
  .lc-stage[data-active="3"] .lc-neck{opacity:.7}
  .lc-stage[data-active="4"] .lc-neck{opacity:1}
  .lc-stage[data-active="4"] .lc-spark{opacity:1}
}

/* ─────────────────────────────────────────────
   5. RESPONSIVE
   ───────────────────────────────────────────── */
@media(min-width:1081px) and (max-width:1260px){
  .lc-grid{gap:clamp(20px,2.6vw,38px)}
  .lc-step-in{padding-left:22px}
}

/* Sotto 980px: il palco esce dallo sticky e diventa uno schema statico,
   i passi scorrono sotto in flusso verticale. */
@media(max-width:1080px){
  .lc-grid{grid-template-columns:1fr;gap:4px}
  .lc-story .story-sticky{position:relative;top:auto;height:auto;display:block}
  .lc-stage{align-self:auto}
  .lc-stage-in,.lc-story .story-steps{width:100%;max-width:760px;justify-self:center;margin-left:auto;margin-right:auto}
  .lc-story .lc-close{max-width:760px;margin-left:auto;margin-right:auto}

  /* Diagramma completo: ogni particella si ferma dove il suo filtro la lascia */
  .lc-stage{--fl:1}
  .lc-level{display:none}
  .lc-canvas{height:clamp(300px,54vw,430px)}
  .lc-dot{--p:var(--cap,0);opacity:1}
  .lc-dot[data-tier="0"]{--dotc:#4c5160;opacity:.5;transform:scale(calc(var(--s,1) * .72))}
  .lc-dot[data-tier="1"]{--dotc:#636b7d;opacity:.62;transform:scale(calc(var(--s,1) * .8))}
  .lc-dot[data-tier="2"]{--dotc:#7d9c92;opacity:.78}
  .lc-dot[data-tier="3"]{--dotc:#6fcda2;--glow:.45}
  .lc-dot[data-tier="4"]{--dotc:var(--green);--glow:1}
  .lc-gate{stroke:var(--green);opacity:.4}
  .lc-neck{opacity:.8}
  .lc-spark{opacity:.45}

  /* Testata: mostra la sintesi, non lo stato corrente */
  .lc-names{display:none}
  .lc-hud{align-items:center}
  .lc-vals{display:block;text-align:right;min-width:0}
  .lc-val{display:none}
  .lc-val[data-s="4"]{display:block;opacity:1;transform:none;filter:none}
  .lc-val[data-s="4"] span{max-width:200px}
  .lc-phase{display:none}
  .lc-phase-static{display:block}

  .lc-rail li{letter-spacing:.04em}
  .lc-rail li:last-child{color:var(--green)}
  .lc-rail li::before{background:var(--green);border-color:var(--green);opacity:.55}
  .lc-rail li:last-child::before{opacity:1;box-shadow:0 0 14px rgba(92,243,164,.5)}

  .lc-story .story-step{min-height:auto;padding:26px 0;opacity:1}
  .lc-step-in{padding:2px 0 2px 20px}
  .lc-step-in::before{opacity:.9}
  .lc-step-n{color:var(--green)}
  .lc-step-n em{color:var(--green)}
  .lc-metric{border-color:var(--green-line)}

}

@media(max-width:640px){
  /* Mobile: ombre leggere, CTA a piena larghezza. La trama a punti
     resta — e' il fondale su cui si legge il flusso, e costa un
     background-image ripetuto, non un filtro. */
  .lc-scene{padding:15px;border-radius:var(--r);box-shadow:none}
  .lc-scene::before{display:block;background-size:20px 20px;opacity:.3}
  .lc-body{gap:11px}
  .lc-canvas{height:clamp(300px,84vw,400px)}
  .lc-flow{animation:none;opacity:.16}
  .lc-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-shadow:none}
  .lc-dot[data-tier="4"]{box-shadow:0 0 10px rgba(92,243,164,.7)}
  .lc-hud{flex-direction:column;align-items:flex-start;gap:10px}
  .lc-vals{text-align:left}
  .lc-val[data-s="4"] span{margin-left:0;max-width:none}
  .lc-rail{flex-basis:clamp(98px,27vw,124px);padding-left:14px}
  .lc-rail li{font-size:.76rem;letter-spacing:.02em}
  .lc-rail li::before{left:-14px}
  .lc-step-in h3{font-size:clamp(1.35rem,6.4vw,1.75rem)}
  .lc-step-in > p{font-size:.97rem}
  .lc-metric{max-width:none;padding:15px 17px}
  .lc-close{flex-direction:column;align-items:stretch;text-align:left;padding:22px;box-shadow:none}
  .lc-close .btn{width:100%;justify-content:center}
}

@media(max-width:400px){
  .lc-rail{flex-basis:96px}
}

/* Nessun hover: via i glow che seguono il cursore su queste card */
@media(hover:none){
  .lc-metric::after{display:none}
}

/* Risparmio movimento: lo schema resta leggibile, il moto sparisce */
@media(prefers-reduced-motion:reduce){
  .lc-stage{--fl:1}
  .lc-fluid{transition:none}
  .lc-level{display:none}
  .lc-dot{--p:var(--cap,0);transition:none;opacity:1}
  .lc-dot[data-tier="0"]{opacity:.45}
  .lc-dot[data-tier="1"]{opacity:.6}
  .lc-dot[data-tier="4"]{--dotc:var(--green);--glow:1}
  .lc-name,.lc-val{transition:none}
  .lc-flow{animation:none;opacity:.2}
  .lc-fill{opacity:1}
  .lc-neck{opacity:1}
  .lc-spark{opacity:1}
  .lc-story .lc-scene .lc-canvas .lc-gate{stroke:var(--green);opacity:.4;stroke-width:1.2}
  /* Binario: tutte le tappe segnate, l'ultima in evidenza */
  .lc-stage .lc-scene .lc-rail li:nth-child(n){color:var(--text-dim)}
  .lc-stage .lc-scene .lc-rail li:nth-child(n)::before{
    background:var(--green);border-color:var(--green);
    transform:translate(-50%,-50%);box-shadow:none;
  }
  .lc-stage .lc-scene .lc-rail li:nth-last-child(1){color:var(--green)}
  .lc-stage .lc-scene .lc-rail li:nth-last-child(1)::before{
    transform:translate(-50%,-50%) scale(1.5);box-shadow:0 0 0 5px rgba(92,243,164,.14);
  }
  /* Testata in modalità sintesi: lo schema mostra tutto il percorso in una volta */
  .lc-phase{display:none}
  .lc-phase-static{display:block}
  .lc-names{display:none}
  .lc-vals{display:block;text-align:right}
  .lc-val{display:none}
  .lc-val[data-s="4"]{display:block;opacity:1;transform:none;filter:none}
  .lc-story .story-sticky{position:relative;height:auto}
  .lc-story .story-step{min-height:auto;opacity:1;padding:34px 0}
  .lc-story .lc-step-in::before{opacity:.9}
}


/* ============================================================
   PAGE — Da Lead a Cash · CASO STUDIO POSA PAVIMENTI
   Imbuto tridimensionale reale (perspective + preserve-3d + rotateX)
   letto dall'alto, che si riempie mentre si scende.
   Fascia chiara: il caso studio e' una prova, non spettacolo.
   Geometria: --box e' l'unica misura. Tutto il resto e' un suo
   multiplo, cosi' la scena resta identica a ogni larghezza.
     rotateX 64deg  ·  passo di profondita' .22*box  ·  fuga 3.125*box
   Le --k e --ef nell'HTML sono i risultati gia' proiettati di quella
   geometria: se cambi rx, zs o persp vanno ricalcolate.
   ============================================================ */

.pav{position:relative;overflow-x:clip}
.pav .pav-head{max-width:820px}
.pav .pav-head h2{text-wrap:balance}

/* ─────────────────────────────────────────────
   1. PALCO
   ───────────────────────────────────────────── */
.pav-scene{
  --box:clamp(360px,33vw,480px);
  --zs:calc(var(--box) * .22);       /* passo di profondita' fra i piani */
  --ys:calc(var(--box) * .2083);     /* passo verticale proiettato       */
  --persp:calc(var(--box) * 3.125);  /* fuga proporzionale               */
  --rx:64deg;
  --lit:5;                           /* fallback senza JS: tutto acceso  */
  position:relative;
  height:calc(var(--box) * 1.25 + 40px);
  margin:clamp(6px,1.4vw,20px) auto 0;
  max-width:1080px;
}

/* Il volume: perspective sul contenitore, preserve-3d sul mondo */
.pav-3d{
  position:absolute;left:50%;top:50%;
  width:var(--box);aspect-ratio:1;
  transform:translate(-50%,-50%);
  perspective:var(--persp);
  perspective-origin:50% 50%;
}
.pav-world{
  --tx:0deg;--tz:0deg;
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx) + var(--tx))) rotateZ(var(--tz));
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

/* Asse verticale: controruota per stare in piedi dentro la scena */
.pav-axis{
  position:absolute;left:50%;top:50%;
  width:1px;height:calc(var(--box) * .74);
  transform:
    translate(-50%,-50%)
    rotateZ(calc(var(--tz) * -1))
    rotateX(calc((var(--rx) + var(--tx)) * -1));
  background:linear-gradient(180deg,
    rgba(12,12,16,0) 0%,
    rgba(12,12,16,.22) 14%,
    rgba(10,111,69,.55) 84%,
    rgba(10,111,69,0) 100%);
}

/* ─────────────────────────────────────────────
   2. I PIANI
   ───────────────────────────────────────────── */
.pav-plate{
  --on:clamp(0, calc(var(--lit) - var(--i)), 1);
  position:absolute;left:50%;top:50%;
  width:var(--w);aspect-ratio:1;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateZ(calc((2 - var(--i)) * var(--zs)));
  border-radius:50%;
  border:1px solid rgba(12,12,16, calc(.20 + .34 * var(--on)));
  /* Anello, non disco: il centro resta vuoto, cosi' i piani sovrapposti
     restano leggibili uno dentro l'altro invece di impastarsi. */
  background:
    radial-gradient(closest-side,
      rgba(255,255,255,0) 56%,
      rgba(255,255,255,.42) 82%,
      rgba(255,255,255,.72) 95%,
      rgba(255,255,255,.30) 100%);
  box-shadow:
    0 0 0 1px rgba(10,111,69, calc(.30 * var(--on))),
    0 24px 40px -34px rgba(12,12,16,.55);
  transition:box-shadow .8s var(--ease),border-color .8s var(--ease);
}
/* Spessore del piano: stesso anello, arretrato sull'asse Z */
.pav-plate::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(12,12,16,.13);
  transform:translateZ(-14px);
}
/* Il riempimento: cresce quando lo stadio si accende */
.pav-plate::after{
  content:"";position:absolute;inset:2%;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(10,111,69, calc(.05 * var(--on))) 0%,
    rgba(10,111,69, calc(.11 * var(--on))) 72%,
    rgba(10,111,69, calc(.34 * var(--on))) 94%,
    rgba(10,111,69,0) 100%);
  opacity:var(--on);
  transform:scale(calc(.80 + .20 * var(--on)));
  transition:opacity .85s var(--ease),transform .95s var(--ease);
}
/* L'ultimo piano non e' un passaggio: e' la vasca che raccoglie */
.pav-plate.is-basin{
  border-color:rgba(10,111,69, calc(.30 + .45 * var(--on)));
  background:radial-gradient(closest-side,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.80) 74%,
    rgba(255,255,255,.42) 100%);
  box-shadow:
    0 0 0 1px rgba(10,111,69, calc(.34 * var(--on))),
    0 30px 44px -30px rgba(12,12,16,.5),
    0 26px 50px -28px rgba(10,111,69, calc(.55 * var(--on)));
}
.pav-plate.is-basin::after{
  inset:5%;
  background:radial-gradient(closest-side,
    rgba(10,111,69, calc(.40 * var(--on))) 0%,
    rgba(10,111,69, calc(.30 * var(--on))) 72%,
    rgba(10,111,69, calc(.16 * var(--on))) 100%);
  transform:scale(calc(.68 + .32 * var(--on)));
}

/* ─────────────────────────────────────────────
   3. ANNOTAZIONI — stadi a sinistra, passaggi a destra
   ───────────────────────────────────────────── */
.pav-annot{position:absolute;inset:0;z-index:3}
.pav-annot > [data-i="0"]{--i:0}
.pav-annot > [data-i="1"]{--i:1}
.pav-annot > [data-i="2"]{--i:2}
.pav-annot > [data-i="3"]{--i:3}
.pav-annot > [data-i="4"]{--i:4}

.pav-node,.pav-rate{
  --on:clamp(0, calc(var(--lit) - var(--i)), 1);
  position:absolute;
  top:calc(50% + var(--k) * var(--ys));
  transform:translateY(-50%);
  opacity:calc(.22 + .78 * var(--on));
  transition:opacity .7s var(--ease);
}

.pav-node{
  right:calc(50% + var(--box) * var(--ef) + 26px);
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  text-align:right;width:max-content;max-width:min(30vw,290px);
}
.pav-node::after{
  content:"";position:absolute;right:-22px;top:50%;
  width:16px;height:1px;background:rgba(12,12,16,.28);
}
.pav-num b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,2.9vw,2.75rem);letter-spacing:-.048em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.pav-node.is-cash .pav-num b{color:var(--green)}
.pav-lab{
  font-size:.9rem;font-weight:600;color:var(--text);
  letter-spacing:-.01em;line-height:1.3;
}
.pav-sub{font-size:.76rem;color:var(--text-faint);line-height:1.4;text-wrap:pretty}

.pav-rate{
  left:calc(50% + var(--box) * var(--ef) + 26px);
  display:flex;flex-direction:column;gap:1px;
  padding:9px 14px;border-radius:var(--r-sm,12px);
  border:1px solid var(--green-line);
  background:rgba(10,111,69,.055);
  max-width:min(26vw,220px);
}
.pav-rate::before{
  content:"";position:absolute;left:-22px;top:50%;
  width:16px;height:1px;background:rgba(10,111,69,.4);
}
.pav-rate b{
  font-family:var(--font-display);font-weight:600;
  font-size:1.06rem;letter-spacing:-.03em;color:var(--green);
  font-variant-numeric:tabular-nums;
}
.pav-rate span{font-size:.73rem;line-height:1.35;color:var(--text-dim)}

/* Nota metodologica */
.pav-note{
  margin:clamp(22px,3vw,38px) auto 0;max-width:820px;
  display:flex;gap:9px;align-items:flex-start;
  font-size:.8rem;line-height:1.55;color:var(--text-faint);
}
.pav-note i{color:var(--green);font-size:.95rem;line-height:1.4;flex-shrink:0}

/* ─────────────────────────────────────────────
   4. GRAFICO — speso contro incassato, stessa scala
   ───────────────────────────────────────────── */
.pav-chart{
  margin:clamp(40px,5.5vw,76px) 0 0;
  padding:clamp(24px,3vw,40px) clamp(20px,3vw,42px) clamp(22px,2.6vw,34px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-2);
  box-shadow:0 30px 60px -50px rgba(12,12,16,.5);
}
.pav-chart-head{margin-bottom:clamp(24px,3vw,38px)}
.pav-chart-eyebrow{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:12px;
}
.pav-chart-head h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.042em;line-height:1.04;
  margin:0;text-wrap:balance;
}
.pav-chart-head h3 b{color:var(--green);font-weight:600;font-variant-numeric:tabular-nums}

.pav-plot{position:relative}
.pav-row + .pav-row{margin-top:clamp(22px,2.6vw,34px)}
.pav-row-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:9px;
}
.pav-row-lab{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);
}
.pav-row-val{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.55rem);letter-spacing:-.04em;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.pav-row-val.is-green{color:var(--green)}

.pav-svg{display:block;width:100%}
.pav-svg-spend{height:clamp(20px,2.2vw,28px)}
.pav-svg-earn{height:clamp(40px,4.6vw,58px)}
.pav-bar{
  transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.5s var(--ease);
}
.pav-chart.in .pav-bar{transform:scaleX(1)}
.pav-bar-spend{fill:rgba(12,12,16,.34)}
.pav-bar-earn{fill:var(--green)}
.pav-ticks line{stroke:rgba(255,255,255,.62)}
.pav-ticks{opacity:0;transition:opacity .7s var(--ease) 1.05s}
.pav-chart.in .pav-ticks{opacity:1}

/* Filo che lega la fine della spesa alla prima tacca dell'incassato */
.pav-guide{
  position:absolute;left:6.3272%;top:22px;bottom:26px;width:0;
  border-left:1px dashed rgba(12,12,16,.3);
  opacity:0;transition:opacity .6s var(--ease) 1.5s;
}
.pav-chart.in .pav-guide{opacity:1}

.pav-unitmark{
  position:relative;width:6.3272%;height:7px;margin-top:7px;
  border:1px solid var(--line-2);border-top:0;
  opacity:0;transition:opacity .6s var(--ease) 1.5s;
}
.pav-chart.in .pav-unitmark{opacity:1}
.pav-unitmark span{
  position:absolute;left:calc(100% + 11px);top:50%;transform:translateY(-45%);
  white-space:nowrap;font-size:.72rem;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}

.pav-chart figcaption{
  margin-top:clamp(26px,3vw,38px);padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.84rem;line-height:1.6;color:var(--text-faint);
  max-width:820px;text-wrap:pretty;
}

/* ─────────────────────────────────────────────
   5. VALORI DERIVATI
   ───────────────────────────────────────────── */
.pav-derived{
  list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
}
.pav-derived li{
  padding:18px 20px;border-radius:var(--r,16px);
  border:1px solid var(--line);background:rgba(12,12,16,.022);
  display:flex;flex-direction:column;gap:6px;
}
.pav-derived b{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.2rem,2.1vw,1.7rem);letter-spacing:-.04em;line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums;
}
.pav-derived span{font-size:.8rem;line-height:1.4;color:var(--text-dim);text-wrap:pretty}

/* ─────────────────────────────────────────────
   6. UN SOLO COMMERCIALE
   ───────────────────────────────────────────── */
.pav-solo{
  margin-top:clamp(36px,5vw,68px);
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(24px,4vw,58px);align-items:center;
  padding:clamp(28px,3.6vw,52px);
  border-radius:var(--r-lg);
  border:1px solid var(--green-line);
  background:linear-gradient(120deg, rgba(10,111,69,.07), rgba(255,255,255,.5) 62%);
}
.pav-solo-fig{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
}
.pav-solo-n{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(6rem,11vw,10.5rem);line-height:.82;letter-spacing:-.07em;
  color:var(--green);
}
.pav-solo-word{
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);
}
.pav-solo-txt h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.3rem);letter-spacing:-.042em;line-height:1.05;
  margin:0 0 16px;text-wrap:balance;
}
.pav-solo-txt h3 em{font-style:italic;color:var(--green)}
.pav-solo-txt p{margin:0 0 14px;font-size:1rem;line-height:1.62;text-wrap:pretty;max-width:62ch}
.pav-solo-punch{color:var(--text) !important;font-weight:520}
.pav-solo-txt ul{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.pav-solo-txt li{
  display:flex;align-items:center;gap:9px;
  font-size:.86rem;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.pav-solo-txt li i{color:var(--green);font-size:1.05rem}

/* ─────────────────────────────────────────────
   7. RESPONSIVE
   ───────────────────────────────────────────── */
/* Sotto i 1340px le corsie laterali si stringono: via la riga di dettaglio,
   altrimenti i blocchi degli stadi si toccano fra loro. */
@media(max-width:1339px){
  .pav-node{max-width:min(26vw,250px)}
  .pav-rate{max-width:min(24vw,195px)}
  .pav-sub{display:none}
}

/* Sotto 1180px: il 3D si semplifica (piu' piatto, piu' piccolo) e le
   annotazioni escono dalla scena, diventando una lista al suo fianco.
   Le corsie laterali non hanno piu' l'aria per stare accanto ai piani. */
@media(max-width:1179px){
  .pav-scene{
    --box:clamp(240px,30vw,350px);
    --rx:54deg;
    height:auto;max-width:880px;margin-left:auto;margin-right:auto;
    display:grid;
    grid-template-columns:minmax(0,var(--box)) minmax(0,1fr);
    gap:clamp(18px,3vw,40px);
    align-items:center;
  }
  .pav-3d{
    position:relative;left:auto;top:auto;transform:none;
    width:100%;aspect-ratio:auto;height:calc(var(--box) * 1.16);
  }
  /* Un filo piu' piccolo del contenitore: cosi' il piano piu' largo,
     ingrandito dalla prospettiva, non sborda dalla colonna. */
  .pav-world{transform:rotateX(var(--rx)) scale(.85)}
  .pav-axis{transform:translate(-50%,-50%) rotateX(calc(var(--rx) * -1));height:calc(var(--box) * .72)}
  .pav-plate{box-shadow:0 0 0 1px rgba(10,111,69, calc(.34 * var(--on))),0 20px 34px -28px rgba(12,12,16,.55)}
  .pav-plate::before{transform:translateZ(-9px)}

  /* Un solo binario continuo: gli stadi scendono, i passaggi si appoggiano */
  .pav-annot{
    position:static;display:flex;flex-direction:column;
    padding-left:20px;border-left:2px solid var(--green-line);
  }
  .pav-node,.pav-rate{
    position:relative;top:auto;left:auto;right:auto;transform:none;
    max-width:none;width:auto;
  }
  .pav-node{align-items:flex-start;text-align:left;padding:14px 0 9px}
  .pav-sub{display:block}
  .pav-node::after{display:none}
  .pav-num b{font-size:clamp(1.5rem,4.4vw,2.1rem)}
  .pav-rate{
    align-self:flex-start;flex-direction:row;align-items:baseline;gap:9px;
    margin:0 0 6px;padding:6px 13px;
  }
  .pav-rate::before{display:none}
  .pav-rate span{max-width:none}

  .pav-derived{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pav-solo{grid-template-columns:1fr;gap:20px;text-align:left}
  .pav-solo-fig{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:14px}
  .pav-solo-n{font-size:clamp(4.2rem,12vw,6rem)}
}

/* Sotto 700px: colonna unica. L'imbuto resta, ma piatto e piccolo. */
@media(max-width:700px){
  .pav-scene{
    --box:min(280px,62vw);
    --rx:40deg;
    grid-template-columns:1fr;gap:14px;
  }
  .pav-3d{width:var(--box);margin:0 auto;height:calc(var(--box) * .92)}
  .pav-plate{box-shadow:0 0 0 1px rgba(10,111,69, calc(.3 * var(--on)))}
  .pav-plate::before{display:none}
  .pav-axis{height:calc(var(--box) * .58)}
}

@media(max-width:640px){
  .pav-chart{padding:22px 18px 20px;box-shadow:none;border-radius:var(--r,16px)}
  .pav-row-top{flex-direction:column;align-items:flex-start;gap:3px}
  .pav-unitmark span{font-size:.66rem;left:calc(100% + 8px)}
  .pav-derived{grid-template-columns:1fr;gap:9px}
  .pav-derived li{flex-direction:row;align-items:baseline;gap:12px;padding:14px 16px}
  .pav-derived b{flex-shrink:0;min-width:5.4em}
  .pav-solo{padding:24px 20px;border-radius:var(--r,16px)}
  .pav-solo-txt ul{flex-direction:column;gap:10px}
  .pav-annot{padding-left:16px}
  .pav-node{padding:12px 0 8px}
}

/* Niente hover: niente inclinazione, il volume resta com'e' */
@media(hover:none){
  .pav-world{transition:none}
}

/* Risparmio movimento: la scena e' gia' tutta accesa e ferma */
@media(prefers-reduced-motion:reduce){
  .pav-scene{--lit:5}
  .pav-world,.pav-plate,.pav-plate::after,.pav-node,.pav-rate{transition:none}
  .pav-bar{transform:scaleX(1);transition:none}
  .pav-ticks,.pav-guide,.pav-unitmark{opacity:1;transition:none}
}


/* ============================================================
   PAGE — Da Lead a Cash · CASO STUDIO BERTUOLA RISTRUTTURAZIONI
   Stesso linguaggio del caso pavimenti — imbuto in volume, fascia
   chiara, numeri in font display — ma composizione ribaltata:
   l'imbuto sta in colonna a sinistra e la lettura degli stadi
   scende a destra come un registro, con i passaggi a rientro.
     rotateX 62deg  ·  passo di profondita' .26*box  ·  fuga 3.2*box
   Quattro piani (non cinque): il quarto e' la vasca.
   ============================================================ */

.ber{position:relative;overflow-x:clip}
.ber .ber-head{max-width:880px}
.ber .ber-head h2{text-wrap:balance}

/* ─────────────────────────────────────────────
   1. PALCO — imbuto a sinistra, registro a destra
   ───────────────────────────────────────────── */
.ber-stage{
  --box:clamp(250px,23vw,350px);
  --zs:calc(var(--box) * .29);
  --persp:calc(var(--box) * 3.2);
  --rx:62deg;
  --lit:4;                          /* fallback senza JS: tutto acceso */
  display:grid;
  grid-template-columns:minmax(0,var(--box)) minmax(0,1fr);
  gap:clamp(26px,4.2vw,70px);
  align-items:center;
  max-width:1080px;
  margin:clamp(10px,2vw,28px) auto 0;
}

.ber-3d{
  position:relative;width:100%;
  height:calc(var(--box) * 1.32);
  perspective:var(--persp);perspective-origin:50% 50%;
}
.ber-world{
  --tx:0deg;--tz:0deg;
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx) + var(--tx))) rotateZ(var(--tz)) scale(.9);
  transition:transform .5s var(--ease);
  will-change:transform;
}
/* La colonna che scende: qui l'asse e' il soggetto, non un dettaglio */
.ber-axis{
  position:absolute;left:50%;top:50%;
  width:2px;height:calc(var(--box) * .82);
  transform:
    translate(-50%,-50%)
    rotateZ(calc(var(--tz) * -1))
    rotateX(calc((var(--rx) + var(--tx)) * -1));
  background:linear-gradient(180deg,
    rgba(12,12,16,0) 0%,
    rgba(12,12,16,.16) 12%,
    rgba(10,111,69,.5) 72%,
    rgba(10,111,69,.9) 92%,
    rgba(10,111,69,0) 100%);
  border-radius:2px;
}

/* I piani: anelli, cosi' restano leggibili uno dentro l'altro */
.ber-plate{
  --on:clamp(0, calc(var(--lit) - var(--i)), 1);
  position:absolute;left:50%;top:50%;
  width:var(--w);aspect-ratio:1;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateZ(calc((1.5 - var(--i)) * var(--zs)));
  border-radius:50%;
  border:1px solid rgba(12,12,16, calc(.18 + .36 * var(--on)));
  background:
    radial-gradient(closest-side,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,.44) 84%,
      rgba(255,255,255,.74) 96%,
      rgba(255,255,255,.28) 100%);
  box-shadow:
    0 0 0 1px rgba(10,111,69, calc(.28 * var(--on))),
    0 22px 38px -32px rgba(12,12,16,.55);
  transition:box-shadow .8s var(--ease),border-color .8s var(--ease);
}
.ber-plate::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(12,12,16,.12);
  transform:translateZ(-12px);
}
.ber-plate::after{
  content:"";position:absolute;inset:2%;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(10,111,69, calc(.05 * var(--on))) 0%,
    rgba(10,111,69, calc(.12 * var(--on))) 74%,
    rgba(10,111,69, calc(.32 * var(--on))) 94%,
    rgba(10,111,69,0) 100%);
  opacity:var(--on);
  transform:scale(calc(.8 + .2 * var(--on)));
  transition:opacity .85s var(--ease),transform .95s var(--ease);
}
/* L'ultimo piano raccoglie: e' la cassa. Sta piu' in basso degli altri,
   staccata dall'imbuto: non e' un passaggio, e' dove finiscono i soldi. */
.ber-plate.is-basin{
  transform:translate(-50%,-50%)
    translateZ(calc((1.5 - var(--i)) * var(--zs) - var(--box) * .1));
  border-color:rgba(10,111,69, calc(.32 + .45 * var(--on)));
  background:radial-gradient(closest-side,
    rgba(255,255,255,.74) 0%,
    rgba(255,255,255,.82) 74%,
    rgba(255,255,255,.44) 100%);
  box-shadow:
    0 0 0 1px rgba(10,111,69, calc(.34 * var(--on))),
    0 28px 42px -28px rgba(12,12,16,.5),
    0 24px 48px -26px rgba(10,111,69, calc(.55 * var(--on)));
}
.ber-plate.is-basin::after{
  inset:5%;
  background:radial-gradient(closest-side,
    rgba(10,111,69, calc(.4 * var(--on))) 0%,
    rgba(10,111,69, calc(.3 * var(--on))) 72%,
    rgba(10,111,69, calc(.16 * var(--on))) 100%);
  transform:scale(calc(.68 + .32 * var(--on)));
}

/* ─────────────────────────────────────────────
   2. REGISTRO — stadi in riga, passaggi a rientro
   ───────────────────────────────────────────── */
.ber-read{display:flex;flex-direction:column}

.ber-node,.ber-pass{
  --on:clamp(0, calc(var(--lit) - var(--i)), 1);
  opacity:calc(.28 + .72 * var(--on));
  transition:opacity .7s var(--ease);
}

.ber-node{
  display:grid;
  /* prima colonna a misura fissa: cosi' le etichette restano incolonnate
     anche se i numeri hanno lunghezze diverse */
  grid-template-columns:minmax(0,clamp(148px,15.5vw,212px)) minmax(0,1fr);
  column-gap:clamp(14px,1.6vw,24px);row-gap:3px;
  padding:clamp(14px,1.7vw,20px) 0;
  border-top:1px solid var(--line);
}
.ber-node:first-child{border-top:0;padding-top:0}
.ber-num{grid-column:1;grid-row:1 / span 2;align-self:center}
.ber-num b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.35vw,2.2rem);letter-spacing:-.048em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ber-node.is-cash .ber-num b{color:var(--green)}
.ber-lab{
  grid-column:2;grid-row:1;align-self:end;
  font-size:.95rem;font-weight:600;color:var(--text);
  letter-spacing:-.01em;line-height:1.3;
}
.ber-sub{
  grid-column:2;grid-row:2;
  font-size:.8rem;color:var(--text-faint);line-height:1.45;text-wrap:pretty;
}

/* Il passaggio da uno stadio all'altro: chip a destra, sulla linea */
.ber-pass{
  align-self:flex-end;position:relative;z-index:2;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:-13px 0;padding:7px 14px;
  border:1px solid var(--green-line);border-radius:var(--r-sm,12px);
  background:#eef5f1;
}
.ber-pass b{
  font-family:var(--font-display);font-weight:600;
  font-size:1rem;letter-spacing:-.03em;color:var(--green);
  font-variant-numeric:tabular-nums;
}
.ber-pass span{font-size:.78rem;line-height:1.35;color:var(--text-dim)}

/* Nota metodologica */
.ber-note{
  margin:clamp(22px,3vw,38px) auto 0;max-width:860px;
  display:flex;gap:9px;align-items:flex-start;
  font-size:.82rem;line-height:1.55;color:var(--text-faint);
}
.ber-note i{color:var(--green);font-size:.95rem;line-height:1.4;flex-shrink:0}

/* ─────────────────────────────────────────────
   3. SPESO CONTRO FATTURATO — una barra sola, stessa scala
   ───────────────────────────────────────────── */
.ber-ratio{
  margin:clamp(38px,5vw,72px) 0 0;
  padding:clamp(24px,3vw,40px) clamp(20px,3vw,42px) clamp(22px,2.6vw,34px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-2);
  box-shadow:0 30px 60px -50px rgba(12,12,16,.5);
}
.ber-ratio-head{margin-bottom:clamp(22px,2.8vw,34px)}
.ber-ratio-eyebrow{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:12px;
}
.ber-ratio-head h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.45rem,2.9vw,2.3rem);letter-spacing:-.042em;line-height:1.05;
  margin:0;text-wrap:balance;
}
.ber-ratio-head h3 b{color:var(--green);font-weight:600;font-variant-numeric:tabular-nums}

.ber-plot{position:relative}
.ber-mark{position:relative;height:38px}
.ber-mark span{
  position:absolute;left:0;bottom:20px;white-space:nowrap;
  font-size:.78rem;color:var(--text-dim);font-variant-numeric:tabular-nums;
}
/* Il filo che indica la lastra scura: parte dall'etichetta e tocca la barra */
.ber-mark::after{
  content:"";position:absolute;left:.44%;bottom:0;width:1px;height:19px;
  background:rgba(12,12,16,.45);
}
.ber-svg{display:block;width:100%;height:clamp(46px,5.2vw,70px);border-radius:5px}
.ber-bar{
  transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0);transition:transform 1.6s var(--ease);
}
.ber-ratio.in .ber-bar{transform:scaleX(1)}
.ber-bar-earn{fill:var(--green)}
.ber-bar-spend{fill:#0c0c11;opacity:0;transition:opacity .5s var(--ease) 1.15s}
.ber-ratio.in .ber-bar-spend{opacity:1}

.ber-plot-foot{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-top:12px;
}
.ber-leg{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;color:var(--text-dim);font-variant-numeric:tabular-nums;
}
.ber-leg::before{content:"";width:10px;height:10px;border-radius:3px;flex-shrink:0}
.ber-leg.is-spend::before{background:#0c0c11}
.ber-leg.is-earn::before{background:var(--green)}
.ber-ratio figcaption{
  margin-top:clamp(24px,3vw,36px);padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.84rem;line-height:1.6;color:var(--text-faint);
  max-width:860px;text-wrap:pretty;
}

/* ─────────────────────────────────────────────
   4. LE TRE MOSSE
   ───────────────────────────────────────────── */
.ber-moves{margin:clamp(32px,4.4vw,60px) 0 0}
.ber-moves-h{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,2.3vw,1.85rem);letter-spacing:-.04em;line-height:1.1;
  margin:0 0 clamp(16px,2vw,26px);
}
.ber-moves-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(12px,1.6vw,22px);
}
.ber-move{
  display:flex;flex-direction:column;gap:11px;
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:var(--r,16px);
  background:var(--bg-2);
}
.ber-move-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--green-line);color:var(--green);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
}
.ber-move h4,.ber-move h3{font-size:1.05rem;line-height:1.25;margin:0}
.ber-move p{margin:0;font-size:.92rem;line-height:1.56;color:var(--text-dim);text-wrap:pretty}
.ber-delta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.ber-delta i{
  font-style:normal;font-size:.88rem;color:var(--text-faint);
  text-decoration:line-through;font-variant-numeric:tabular-nums;
}
.ber-delta em{font-style:normal;color:var(--green);font-size:.9rem}
.ber-delta b{
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  letter-spacing:-.035em;color:var(--green);font-variant-numeric:tabular-nums;
}
.ber-delta small{flex-basis:100%;font-size:.78rem;color:var(--text-faint)}

/* ─────────────────────────────────────────────
   5. IL SALTO — 22% → 51%, stesso venditore
   ───────────────────────────────────────────── */
.ber-shift{
  margin-top:clamp(34px,4.6vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(24px,4vw,58px);align-items:center;
  padding:clamp(28px,3.6vw,52px);
  border-radius:var(--r-lg);
  border:1px solid var(--green-line);
  background:var(--bg-2);
  box-shadow:0 30px 60px -50px rgba(12,12,16,.45);
}
.ber-shift-fig{order:2}
.ber-shift-txt{order:1}
.ber-gauge{--u:2.5px;display:flex;align-items:stretch;gap:clamp(16px,2.2vw,30px)}
.ber-col{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:9px;
}
.ber-col-v{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.95rem);letter-spacing:-.045em;line-height:1;
  color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.ber-col.is-after .ber-col-v{color:var(--green)}
.ber-col-bar{
  align-self:end;width:100%;
  height:calc(var(--h) * var(--u));
  border-radius:8px 8px 0 0;
  background:rgba(12,12,16,.13);
}
.ber-col.is-after .ber-col-bar{
  background:linear-gradient(180deg, var(--green), rgba(10,111,69,.72));
  box-shadow:0 14px 30px -18px rgba(10,111,69,.7);
}
.ber-col-lab{
  padding-top:9px;border-top:1px solid var(--line);width:100%;text-align:center;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.ber-shift-txt h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.3rem);letter-spacing:-.042em;line-height:1.05;
  margin:0 0 16px;text-wrap:balance;
}
.ber-shift-txt h3 em{font-style:italic;color:var(--green)}
.ber-shift-txt p{margin:0 0 14px;font-size:1rem;line-height:1.62;text-wrap:pretty;max-width:62ch}
.ber-shift-punch{color:var(--text) !important;font-weight:520}
.ber-shift-txt ul{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.ber-shift-txt li{
  display:flex;align-items:center;gap:9px;
  font-size:.86rem;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ber-shift-txt li i{color:var(--green);font-size:1.05rem}

/* ─────────────────────────────────────────────
   6. RESPONSIVE
   ───────────────────────────────────────────── */
@media(max-width:1179px){
  .ber-stage{--box:clamp(240px,30vw,320px);--rx:56deg;gap:clamp(20px,3vw,40px)}
  .ber-node{column-gap:18px}
  .ber-num b{font-size:clamp(1.45rem,3.6vw,2.05rem)}
}

/* Sotto 980px: colonna unica. L'imbuto resta, piu' piatto e centrato. */
@media(max-width:979px){
  .ber-stage{
    --box:min(300px,62vw);--rx:46deg;
    grid-template-columns:1fr;gap:clamp(16px,3vw,26px);
  }
  .ber-3d{width:var(--box);margin:0 auto;height:calc(var(--box) * 1.02)}
  .ber-plate::before{display:none}
  .ber-axis{height:calc(var(--box) * .66)}
  .ber-moves-grid{grid-template-columns:1fr}
  .ber-shift{grid-template-columns:1fr;gap:26px}
  .ber-shift-fig{order:1;max-width:340px}
  .ber-shift-txt{order:2}
  .ber-gauge{--u:2px}
}

@media(max-width:640px){
  .ber-ratio{padding:22px 18px 20px;box-shadow:none;border-radius:var(--r,16px)}
  .ber-node{grid-template-columns:1fr;row-gap:2px}
  .ber-num{grid-column:1;grid-row:1}
  .ber-lab{grid-column:1;grid-row:2;align-self:auto;margin-top:6px}
  .ber-sub{grid-column:1;grid-row:3}
  .ber-pass{align-self:stretch;margin:-11px 0;padding:9px 13px}
  .ber-mark span{font-size:.76rem}
  .ber-move{padding:20px 18px}
  .ber-shift{padding:24px 20px;border-radius:var(--r,16px);box-shadow:none}
  .ber-shift-txt ul{flex-direction:column;gap:10px}
  .ber-gauge{--u:1.8px}
}

/* Niente hover: niente inclinazione, il volume resta com'e' */
@media(hover:none){
  .ber-world{transition:none}
}

/* Risparmio movimento: la scena e' gia' tutta accesa e ferma */
@media(prefers-reduced-motion:reduce){
  .ber-stage{--lit:4}
  .ber-world,.ber-plate,.ber-plate::after,.ber-node,.ber-pass{transition:none}
  .ber-bar{transform:scaleX(1);transition:none}
  .ber-bar-spend{opacity:1;transition:none}
}

/* ═════════════════════════════════════════════════════════════
   PASSATA MOBILE — 390px · IMBUTI IN VOLUME, RICOSTRUITI
   Prima passata: il 3D era spento e restava un pettine di barre.
   Leggibile, ma piatto: non era piu' un imbuto, era un istogramma.

   Riacceso com'era diventava una macchia — perche' con una fuga corta
   (--persp = 3.1*box, cioe' ~900px) il translateZ del piano piu' largo
   lo ingrandisce del 14% e lo spinge fuori dal riquadro, e i piani
   restano appiccicati fra loro.

   La ricetta qui: FUGA LUNGA (1400px fissi) e PROFONDITA' CONTENUTA
   (translateZ effettivi entro ~90px). L'ingrandimento prospettico
   scende al 3%: il volume si legge, l'ingombro non si muove.
   Poi tre correzioni da schermo stretto:
     · passo di profondita' piu' generoso in rapporto al box, cosi' i
       bordi dei piani non si toccano piu' (era il problema originale);
     · vasca staccata in fondo, sotto l'ultimo passaggio, non dentro;
     · pittura netta — anello a bordo verde pieno, filo bianco interno,
       ombra corta e definita. Niente aloni sfumati: sulla fascia
       chiara la sfocatura e' proprio cio' che impastava i livelli.
   ═════════════════════════════════════════════════════════════ */
@media(max-width:700px){

  /* ── Caso Bertuola — 4 piani, il quarto e' la cassa ────────── */
  .ber-stage{
    --box:min(292px,76vw);
    --persp:1400px;              /* fuga lunga: poco ingrandimento   */
    --zs:calc(var(--box) * .20); /* passo di profondita' fra i piani */
    --rx:60deg;
  }
  .ber-3d{height:calc(var(--box) * 1.14)}
  /* Nessun mouse da seguire: la scena sta ferma nella sua posa.
     Lo .86 tiene il piano piu' largo dentro il riquadro anche dopo
     l'ingrandimento prospettico. */
  .ber-world{
    --tx:0deg;--tz:0deg;
    transform:rotateX(var(--rx)) scale(.86);
    transition:none;
  }
  .ber-axis{height:calc(var(--box) * .86)}

  .ber-plate{
    border:1.5px solid rgba(10,111,69, calc(.34 + .46 * var(--on)));
    background:radial-gradient(closest-side,
      rgba(255,255,255,0) 72%,
      rgba(12,12,16,.04) 93%,
      rgba(12,12,16,.10) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.92),
      0 9px 12px -11px rgba(12,12,16,.75);
  }
  /* Spessore del piano: stessa circonferenza arretrata di poco */
  .ber-plate::before{
    display:block;
    border-color:rgba(12,12,16,.22);
    transform:translateZ(-8px);
  }
  .ber-plate::after{
    background:radial-gradient(closest-side,
      rgba(10,111,69, calc(.06 * var(--on))) 0%,
      rgba(10,111,69, calc(.16 * var(--on))) 74%,
      rgba(10,111,69, calc(.42 * var(--on))) 95%,
      rgba(10,111,69,0) 100%);
  }
  /* La cassa scende sotto l'imbuto, staccata: non e' un passaggio */
  .ber-plate.is-basin{
    transform:translate(-50%,-50%)
      translateZ(calc((1.5 - var(--i)) * var(--zs) - var(--box) * .20));
    border-width:2px;
    border-color:rgba(10,111,69, calc(.46 + .44 * var(--on)));
    background:radial-gradient(closest-side,
      rgba(10,111,69, calc(.05 + .10 * var(--on))) 0%,
      rgba(10,111,69, calc(.08 + .16 * var(--on))) 88%,
      rgba(10,111,69, calc(.14 + .22 * var(--on))) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.85),
      0 12px 16px -12px rgba(10,111,69, calc(.28 + .5 * var(--on)));
  }
  .ber-plate.is-basin::before{display:none}

  /* ── Caso posa pavimenti — 5 piani, il quinto e' la vasca ──── */
  .pav-scene{
    --box:min(286px,74vw);
    --persp:1400px;
    --zs:calc(var(--box) * .175);
    --rx:60deg;
    grid-template-columns:1fr;gap:14px;height:auto;
  }
  .pav-3d{
    width:var(--box);margin:0 auto;
    height:calc(var(--box) * 1.12);aspect-ratio:auto;
  }
  .pav-world{
    --tx:0deg;--tz:0deg;
    transform:rotateX(var(--rx)) scale(.86);
    transition:none;
  }
  .pav-axis{height:calc(var(--box) * .80);width:2px}

  .pav-plate{
    border:1.5px solid rgba(10,111,69, calc(.34 + .46 * var(--on)));
    background:radial-gradient(closest-side,
      rgba(255,255,255,0) 72%,
      rgba(12,12,16,.04) 93%,
      rgba(12,12,16,.10) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.92),
      0 9px 12px -11px rgba(12,12,16,.75);
  }
  .pav-plate::before{
    display:block;
    border-color:rgba(12,12,16,.22);
    transform:translateZ(-8px);
  }
  .pav-plate::after{
    background:radial-gradient(closest-side,
      rgba(10,111,69, calc(.06 * var(--on))) 0%,
      rgba(10,111,69, calc(.16 * var(--on))) 74%,
      rgba(10,111,69, calc(.42 * var(--on))) 95%,
      rgba(10,111,69,0) 100%);
  }
  .pav-plate.is-basin{
    transform:translate(-50%,-50%)
      translateZ(calc((2 - var(--i)) * var(--zs) - var(--box) * .17));
    border-width:2px;
    border-color:rgba(10,111,69, calc(.46 + .44 * var(--on)));
    background:radial-gradient(closest-side,
      rgba(10,111,69, calc(.05 + .10 * var(--on))) 0%,
      rgba(10,111,69, calc(.08 + .16 * var(--on))) 88%,
      rgba(10,111,69, calc(.14 + .22 * var(--on))) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.85),
      0 12px 16px -12px rgba(10,111,69, calc(.28 + .5 * var(--on)));
  }
  .pav-plate.is-basin::before{display:none}

  /* Le etichette non ci stanno accanto ai piani: restano nel binario
     sotto la scena. I trattini di collegamento tornano, ma agganciati
     al binario verde invece che al piano. */
  .pav-node::after{
    display:block;right:auto;left:-20px;top:1.55rem;
    width:12px;height:1px;background:rgba(12,12,16,.30);
  }
  .pav-rate::before{
    display:block;left:-20px;top:50%;
    width:12px;height:1px;background:rgba(10,111,69,.45);
  }
}