/* ==========================================================================
   home-scroll-layers.css — "Tre layer. Una sola decisione." ferma mentre si scorre:
   a sinistra le tre card vere della home (una aperta alla volta), a destra la scena.
   Tutte le regole sono sotto #how.hs-how (classe messa da 04-layers.js): senza JS la sezione resta identica alla home.
   ========================================================================== */
#how.hs-how{overflow:visible;padding:0;min-height:0;display:block}
#how.hs-how .dl-pin{position:relative;height:460vh}
#how.hs-how .dl-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:84px 0 92px}
/* lo spot che segue il mouse sulle card della home qui è spento: resta un bordo pulito, acceso solo sulla card attiva */
#how.hs-how .layer-row::before,#how.hs-how .layer-row::after{display:none}
#how.hs-how .dl-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
/* desktop: la scena poggia sulla stessa linea di fondo delle card, non è centrata sul titolo */
@media (min-width:1021px){#how.hs-how .dl-right{align-self:end}}
#how.hs-how .mid-cta{padding:0 0 120px;margin-top:0!important}

/* ---------- colonna sinistra: i nodi veri della home, più compatti ---------- */
#how.hs-how .dl-head .display{font-size:clamp(36px,4vw,60px);line-height:1}
#how.hs-how .dl-head .lead{margin-top:18px!important;font-size:clamp(15px,1.25vw,18px)}
#how.hs-how .layer-stack{margin-top:26px;gap:12px}
/* niente giro di luce automatico (is-touch-sweep): qui il bordo acceso indica solo il passo attivo */
#how.hs-how .layer-row{transition:background .4s;animation:none!important;background:rgba(148,163,184,.14)!important}
#how.hs-how .layer-row-inner{padding:20px 24px;grid-template-columns:54px 1fr;gap:18px;align-items:start;
  opacity:.5;transition:opacity .45s ease}
#how.hs-how .layer-num{font-size:34px}
#how.hs-how .layer-content h3{font-size:20px;margin:6px 0 0}
#how.hs-how .layer-content p,
#how.hs-how .layer-tags{max-height:0;opacity:0;margin:0;overflow:hidden;transition:max-height .5s ease,opacity .35s ease,margin .5s ease}
#how.hs-how .layer-content p{font-size:15px;line-height:1.55}
#how.hs-how .layer-row.dl-on{background:rgba(249,115,22,.55)!important}
#how.hs-how .layer-row.dl-on .layer-row-inner{opacity:1}
#how.hs-how .layer-row.dl-on .layer-content p{max-height:230px;opacity:1;margin:10px 0 12px}
#how.hs-how .layer-row.dl-on .layer-tags{max-height:120px;opacity:1}

/* ---------- colonna destra: la scena ---------- */
.dl-stage{position:relative;width:100%;max-width:540px;aspect-ratio:1;margin:0 auto;border-radius:28px;
  background:radial-gradient(70% 70% at 50% 45%,rgba(167,139,250,.08),rgba(0,0,0,0) 70%),#07070b;
  border:1px solid rgba(255,255,255,.07)}
.dl-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dl-pill,.dl-msg,.dl-chip{position:absolute;transform:translate(-50%,-50%);opacity:0;white-space:nowrap}

.dl-pill{width:30%;padding:8px 12px;border-radius:10px;font-size:12.5px;font-weight:600;color:#d9d9e3;overflow:hidden;
  background:rgba(18,18,26,.92);border:1px solid rgba(167,139,250,.28);transition:border-color .3s,color .3s}
.dl-pill .dl-bar{position:absolute;inset:0 auto 0 0;width:var(--w,50%);background:rgba(167,139,250,.22)}
.dl-pill .dl-name{position:relative}
.dl-pill.dl-win{border-color:#a78bfa;color:#fff;box-shadow:0 0 22px -4px rgba(167,139,250,.7)}
.dl-pill.dl-win .dl-bar{background:rgba(167,139,250,.45)}

.dl-msg{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;width:34%;padding:12px 14px;border-radius:14px;
  background:#0b0f0d;border:1px solid #34d399;box-shadow:0 0 30px -6px rgba(52,211,153,.6)}
.dl-msg .material-icons-outlined{font-size:18px;color:#34d399}
.dl-msg .dl-msg-angle{font-size:12.5px;font-weight:700;color:#fff}
.dl-msg i{grid-column:1/-1;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.dl-msg i:last-child{width:62%}

.dl-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:#cfcfd6;background:rgba(14,14,18,.95);border:1px solid rgba(255,255,255,.14);transition:border-color .3s,color .3s,box-shadow .3s}
.dl-chip .material-icons-outlined{font-size:15px}
.dl-chip.dl-live{border-color:#34d399;color:#fff;box-shadow:0 0 20px -6px rgba(52,211,153,.7)}
.dl-chip.dl-live .material-icons-outlined{color:#34d399}

/* ---------- schermi bassi ---------- */
@media (min-width:1021px) and (max-height:1100px){
  #how.hs-how .dl-head .lead{display:none}
  #how.hs-how .dl-sticky{padding:72px 0 84px}
  #how.hs-how .dl-head .display{font-size:clamp(30px,3.2vw,40px)}
  #how.hs-how .layer-stack{margin-top:18px;gap:10px}
  #how.hs-how .layer-row-inner{padding:13px 20px}
  #how.hs-how .layer-num{font-size:28px}
  #how.hs-how .layer-content h3{font-size:18px;margin-top:4px}
  #how.hs-how .layer-content p{font-size:14px;line-height:1.5}
  #how.hs-how .layer-row.dl-on .layer-content p{margin:8px 0 10px}
  .dl-stage{max-width:min(540px,60vh)}
}

/* ---------- telefono: titolo, scena, card attiva ---------- */
@media (max-width:1020px){
  #how.hs-how .dl-pin{height:430vh}
  #how.hs-how .dl-sticky{align-items:flex-start;padding:76px 0 96px}
  #how.hs-how .dl-grid{grid-template-columns:1fr;gap:14px}
  #how.hs-how .dl-left{display:contents}
  #how.hs-how .dl-head{order:1}
  #how.hs-how .dl-right{order:2}
  #how.hs-how .layer-stack{order:3;margin-top:0}
  #how.hs-how .dl-head > div:first-child{display:none}
  #how.hs-how .dl-head .display{font-size:clamp(26px,7.4vw,36px);margin-top:0}
  #how.hs-how .dl-head .lead{display:none}
  .dl-stage{border-radius:20px}
  #how.hs-how .layer-row{display:none}
  #how.hs-how .layer-row.dl-on{display:block}
  #how.hs-how .layer-row-inner{grid-template-columns:auto 1fr;gap:2px 12px;padding:14px 16px}
  #how.hs-how .layer-num{font-size:26px;grid-row:1}
  #how.hs-how .layer-content{display:contents}
  #how.hs-how .layer-content h3{font-size:19px;margin:0;align-self:center}
  #how.hs-how .layer-content p,#how.hs-how .layer-tags{grid-column:1/-1}
  #how.hs-how .layer-row.dl-on .layer-content p{font-size:13.5px;line-height:1.45;margin:6px 0 8px;max-height:260px}
  .dl-pill,.dl-chip{font-size:10.5px;padding:6px 9px}
  .dl-chip .material-icons-outlined{font-size:13px}
  .dl-msg{width:40%;padding:9px 10px}
  .dl-msg .dl-msg-angle{font-size:11px}
  #how.hs-how .mid-cta{padding-bottom:80px}
}

/* telefono: titolo in alto, card in basso, e la scena si prende TUTTO lo spazio che resta in mezzo
   (quadrata, larga quanto lo schermo consente). Le tre card stanno nella stessa cella, così l'altezza
   non cambia da un passo all'altro e la scena non si ridimensiona. */
@media (max-width:1020px){
  #how.hs-how .dl-sticky{align-items:stretch}
  #how.hs-how .dl-grid{grid-template-rows:auto minmax(0,1fr) auto;height:100%;align-items:stretch;gap:12px}
  #how.hs-how .dl-right{min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
  .dl-stage{width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:none;aspect-ratio:auto;margin:0}
  #how.hs-how .layer-stack{display:grid}
  #how.hs-how .layer-row,#how.hs-how .layer-row.dl-on{display:grid;grid-area:1/1}   /* grid: il fondo della card riempie tutta la cella */
  #how.hs-how .layer-row-inner{align-content:start}
  #how.hs-how .layer-row{visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s .35s}
  #how.hs-how .layer-row.dl-on{visibility:visible;opacity:1;transition:opacity .35s ease}
  #how.hs-how .layer-content p{max-height:none!important;opacity:1;margin:8px 0 0!important;font-size:14px;line-height:1.5}
  #how.hs-how .layer-tags{display:none}
  .dl-pill,.dl-chip{font-size:12px;padding:7px 11px}
  .dl-chip .material-icons-outlined{font-size:15px}
  .dl-msg{width:44%;padding:11px 12px}
  .dl-msg .dl-msg-angle{font-size:12.5px}
}
@media (max-width:1020px) and (max-height:640px){
  #how.hs-how .layer-content p{font-size:13px;line-height:1.42}
  .dl-pill,.dl-chip{font-size:10px;padding:5px 8px}
}

@media (prefers-reduced-motion:reduce){
  #how.hs-how .dl-pin{height:auto}
  #how.hs-how .dl-sticky{position:relative;height:auto}
  #how.hs-how .layer-row-inner{opacity:1}
  #how.hs-how .layer-content p{max-height:none;opacity:1;margin:10px 0 12px}
  #how.hs-how .layer-tags{max-height:none;opacity:1}
  #how.hs-how .layer-row{display:block}
}