@font-face{font-family:"Syne";src:url('/assets/fonts/syne-800.woff2') format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Plex";src:url('/assets/fonts/ibm-plex-sans.woff2') format("woff2");font-weight:100 700;font-style:normal;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --ink:#3C3C3C;
  --mint:#00B894;
  --petrol:#2F4F4F;
  --white:#FFFFFF;
  --cream:#F7F7F5;
  --line:#E3E6E2;
  --muted:#6B7570;
  --on-dark:#EDF1EE;
  --on-dark-muted:#AEBAB4;
  --rail-w:104px;
  --pad:clamp(20px,5vw,40px);
  --col:min(64ch,100%);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px;
  /* i tre passi grandi scalano: 140px di aria sopra e sotto ogni sezione
     su un telefono sono mezzo schermo sprecato */
  --s5:clamp(40px,7vw,64px);
  --s6:clamp(56px,10vw,96px);
  --s7:clamp(72px,13vw,140px);
  --display:"Syne","Trebuchet MS","Franklin Gothic Medium",system-ui,sans-serif;
  --body:"Plex","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}

/* Mockup di brand: la palette è fissata dal manuale identitario,
   quindi la pagina resta committed al tema chiaro in entrambi i casi. */
:root[data-theme="dark"]{color-scheme:light;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px;}

/* Syne 800 è una font larga e l'italiano ha parole lunghe ("l'apprendimento",
   "all'indirizzo"). Il minimo delle clamp deve stare basso abbastanza da farle
   entrare in 320px di colonna, altrimenti su telefono la parola sfora e, con
   overflow-x nascosto, viene tagliata invece di andare a capo.
   overflow-wrap è la rete di sicurezza per i casi che non ho previsto. */
h1,h2,h3{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  text-wrap:balance;margin:0;line-height:1.06;
  /* "l'apprendimento" e larga 12.8em: sotto i 1020px circa non entra nella
     colonna a nessuna dimensione ragionevole del titolo. La sillabazione
     italiana la spezza al punto giusto e si attiva solo quando serve
     (richiede lang="it" sul tag html, che c'e). break-word e la rete sotto. */
  -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
  /* sillabazione prudente: spezza solo parole da 8 lettere in su e mai
     lasciando monconi di meno di 4 caratteri, cosi i tagli restano leggibili */
  -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;
  hyphenate-limit-chars:6 3 3;
}
h1{font-size:clamp(2.6rem,13vw,5.5rem);}
h2{font-size:clamp(1.9rem,8.6vw,3.1rem);}
h3{font-size:clamp(1.25rem,4.2vw,1.45rem);line-height:1.2;}
/* il punto del payoff e l'unico accento menta dell'apertura */
h1 i{font-style:normal;color:var(--mint);}
p{margin:0;}

.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--mint);flex:none;}
.on-dark .eyebrow{color:var(--on-dark-muted);}

.lead{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.5;color:var(--muted);}
.on-dark .lead{color:var(--on-dark-muted);}

/* Da 1024px in su la colonna e larga abbastanza per la parola piu lunga
   ("l'apprendimento", 941px a corpo pieno): li la sillabazione non serve e
   il browser la userebbe comunque per pareggiare le righe, riempiendo il
   titolo di trattini. Serve solo dove lo spazio non basta. */
@media (min-width:1024px){
  h1,h2,h3,.quote{-webkit-hyphens:manual;hyphens:manual;}
}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);}
/* sotto i 1400px la linea vive nel margine sinistro: il contenuto le fa posto */
@media (max-width:1399.98px){.wrap{padding-left:36px;}}
.sec{padding-block:var(--s7);position:relative;}
/* la barra di navigazione e appiccicata in alto: senza questo, saltando a
   un'ancora il titolo della sezione finisce sotto il menu */
section[id]{scroll-margin-top:76px;}
.sec-white{background:var(--white);}
.sec-cream{background:var(--cream);}
.sec-dark{background:var(--petrol);color:var(--on-dark);}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:var(--white);}
/* Senza questo, un elemento di griglia o flex non scende sotto la larghezza
   minima del suo contenuto: una parola lunga allarga la colonna invece di
   andare a capo, e la pagina sfora. E' il caso della citazione di EVE, che
   a 320px allargava la sezione Studiez di 41px. */
.split > *,.stack > *,.grid > *{min-width:0;}
.stack{display:flex;flex-direction:column;gap:var(--s3);}
.stack-lg{display:flex;flex-direction:column;gap:var(--s5);}
.measure{max-width:var(--col);}

/* ---------- linea metropolitana ----------
   E' l'elemento identitario del sito, quindi sta anche su telefono: nascosta
   sotto i 1400px la versione mobile diventava una colonna di testo qualsiasi.
   Parte sotto la barra di navigazione, che altrimenti le coprirebbe la testa. */
.rail{
  position:fixed;left:10px;top:72px;
  height:calc(100vh - 72px);height:calc(100dvh - 72px);
  width:2px;z-index:20;pointer-events:none;
}
/* su schermo largo si sposta nel margine esterno della colonna */
@media (min-width:1400px){
  .rail{left:max(26px,calc((100vw - 1240px)/2 - 46px));}
}
/* Sotto i 900px i pallini del binario sparirebbero comunque senza nome, e
   soprattutto stavano a percentuali di scroll, non dove sta il contenuto.
   Le fermate diventano le insegne di sezione, ancorate al testo vero. */
@media (max-width:899.98px){.stops{display:none;}}
.rail-track{position:absolute;inset:0;background:var(--line);}
.rail-fill{position:absolute;left:0;top:0;width:2px;height:0;background:var(--mint);transition:height .1s linear;}
.stops{position:absolute;inset:0;list-style:none;margin:0;padding:0;}

/* il pallino, non l'intera riga, deve stare centrato sulla linea: la linea e
   larga 2px, il pallino 9px, quindi -4.5px sull'asse x. Il nome della fermata
   e in posizione assoluta apposta: se stesse nel flusso sposterebbe il pallino. */
.stop{
  position:absolute;left:1px;transform:translate(-4.5px,-50%);pointer-events:auto;
}
.stop a{display:block;position:relative;width:9px;height:9px;text-decoration:none;}
/* il pallino e 9px, troppo piccolo per un dito: area di tocco allargata a 41px.
   Si ferma a 25px dal bordo, il contenuto parte da 36px, quindi non ruba tap. */
.stop a::before{content:"";position:absolute;left:-16px;top:-16px;right:-16px;bottom:-16px;}
.dot{
  display:block;width:9px;height:9px;border-radius:50%;background:var(--white);
  border:2px solid var(--line);
  transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.stop.done .dot{border-color:var(--mint);}
.stop.active .dot{background:var(--mint);border-color:var(--mint);transform:scale(1.35);box-shadow:0 0 0 5px rgba(0,184,148,.15);}

/* Su schermo stretto il nome corre in verticale nel margine: occupa 10px di
   larghezza invece di 80 e non ruba spazio al testo. Compare solo per la
   fermata attiva, altrimenti sarebbe un muro di parole di traverso. */
.stop .nome{
  position:absolute;white-space:nowrap;pointer-events:none;
  font-family:var(--body);font-size:.58rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:transparent;transition:color .3s ease;
  /* di fianco al binario, mai sopra: centrato sulla linea veniva attraversato
     dal tratto, lo stesso errore gia fatto col payoff di Studiez */
  left:calc(100% + 6px);top:50%;
  writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
}
.stop.active .nome{color:var(--muted);}
.rail.dark .stop.active .nome{color:var(--on-dark-muted);}

/* Da 1560px in su c'e spazio per i nomi in orizzontale, come prima.
   Le regole .dark stanno dopo e a specificita pari o maggiore, cosi vincono
   quando la sezione attiva e in blu petrolio. */
@media (min-width:1560px){
  .stop .nome{
    writing-mode:horizontal-tb;left:22px;top:50%;
    transform:translateY(-50%);font-size:.68rem;letter-spacing:.13em;
  }
  .rail:hover .nome{color:var(--muted);}
  .rail.dark:hover .nome{color:var(--on-dark-muted);}
  .rail .stop.active .nome{color:var(--ink);}
  .rail.dark .stop.active .nome{color:var(--white);}
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.nav.stuck{border-bottom-color:var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:68px;}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;}
.brand b{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;}
.brand span{font-size:.72rem;color:var(--muted);letter-spacing:.06em;}
@media (max-width:560px){.brand span{display:none;}}
.nav-links{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0;}
.nav-links a{
  text-decoration:none;font-size:.82rem;font-weight:500;color:var(--muted);
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.on{color:var(--ink);border-bottom-color:var(--mint);}

@media (max-width:760px){
  /* non nascondere la navigazione: comprimerla e, se serve, lasciarla scorrere */
  .nav-links{gap:var(--s2);overflow-x:auto;flex:1;justify-content:flex-end;
             scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .nav-links::-webkit-scrollbar{display:none;}
  .nav-links a{font-size:.78rem;white-space:nowrap;}
  .nav-in{gap:var(--s2);}
}
@media (max-width:400px){.nav-links a{font-size:.72rem;}.nav-links{gap:12px;}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(32px,7vh,150px) var(--s7);}
.hero h1{max-width:17ch;}
.hero .lead{max-width:52ch;}

.facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);padding-top:var(--s3);}
.facts li{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px;}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none;}

/* ---------- payoff: segmento di linea ----------
   la linea corre sopra le parole, mai attraverso: le fermate stanno sul binario
   e la parola è l'etichetta della fermata, appesa sotto. */
.payoff{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3) 0;}
.payoff li{
  position:relative;flex:1 1 190px;padding-top:30px;
  font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,5.6vw,1.7rem);
  letter-spacing:-.02em;color:var(--white);
}
.payoff li::after{
  content:"";position:absolute;left:5px;top:4px;width:calc(100% - 5px);height:2px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.payoff li:last-child::after{width:0;}
.payoff.go li::after{transform:scaleX(1);}
.payoff li::before{
  content:"";position:absolute;left:0;top:0;width:10px;height:10px;
  border-radius:50%;background:var(--petrol);border:2px solid var(--mint);z-index:1;
  transition:background .4s ease .3s;
}
.payoff.go li::before{background:var(--mint);}
.payoff li:nth-child(2)::after{transition-delay:.18s;}
.payoff li:nth-child(3)::after{transition-delay:.36s;}
.payoff li:nth-child(2)::before{transition-delay:.45s;}
.payoff li:nth-child(3)::before{transition-delay:.6s;}

/* ---------- griglie ---------- */
.grid{display:grid;gap:var(--s4);}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

.split{display:grid;gap:var(--s5);grid-template-columns:1fr;}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);}
  /* nelle sezioni lunghe il titolo accompagna la lettura invece di lasciare un vuoto */
  .pin{position:sticky;top:108px;align-self:start;}
}

.diffs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.diffs li{padding:var(--s3) 0;border-top:1px solid rgba(237,241,238,.18);display:grid;gap:6px;}
.diffs li:last-child{border-bottom:1px solid rgba(237,241,238,.18);}
.diffs strong{font-weight:600;color:var(--white);font-size:1rem;}
.diffs span{color:var(--on-dark-muted);font-size:.94rem;line-height:1.5;}

.nots{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;margin:0;padding:0;}
.nots li{
  font-size:.82rem;color:var(--on-dark-muted);border:1px solid rgba(237,241,238,.22);
  border-radius:999px;padding:5px 14px;display:flex;align-items:center;gap:8px;
}
.nots li::before{content:"";width:12px;height:1px;background:var(--mint);flex:none;}

.quote{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.4rem,6.6vw,2.05rem);line-height:1.15;color:var(--white);
  overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual;
  border-left:2px solid var(--mint);padding-left:var(--s3);margin:0;
}
.quote cite{display:block;font-family:var(--body);font-weight:500;font-style:normal;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:var(--s2);}

.status{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  border:1px solid var(--mint);border-radius:999px;padding:7px 16px;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--white);
}
.status i{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none;animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}

.linkout{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;align-self:flex-start;
  font-weight:600;font-size:.95rem;color:var(--white);
  border-bottom:2px solid var(--mint);padding-bottom:4px;transition:gap .25s ease;
}
.linkout:hover{gap:16px;}

/* ---------- card attività ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color .25s ease,transform .25s ease;
}
.card:hover{border-color:var(--mint);transform:translateY(-3px);}
/* stato reale dell'area, non una numerazione decorativa */
.card .state{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.card .state::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;
  border:2px solid var(--mint);background:var(--mint);
}
.card.todo .state::before{background:transparent;}
.card p{font-size:.95rem;color:var(--muted);line-height:1.55;}
.card.todo{border-style:dashed;background:transparent;}

/* ---------- visione ---------- */
.qa{display:grid;gap:var(--s5);}
@media (min-width:820px){.qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6);}}
.qa div{display:flex;flex-direction:column;gap:var(--s2);}
.qa h3{color:var(--white);}
.qa p{color:var(--on-dark-muted);font-size:1rem;line-height:1.6;}
.qa p b{color:var(--white);font-weight:600;}

/* ---------- tecnologie ---------- */
.tech{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;margin:0;padding:0;}
.tech li{
  font-size:.85rem;font-weight:500;background:var(--white);border:1px solid var(--line);
  border-radius:2px;padding:7px 14px;transition:border-color .2s ease;
}
.tech li:hover{border-color:var(--mint);}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s3) 44px var(--s3) 0;position:relative;
  font-family:var(--display);font-weight:800;letter-spacing:-.015em;
  font-size:clamp(1.08rem,4.2vw,1.22rem);line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:8px;top:50%;background:var(--mint);transition:transform .3s ease;
}
.faq summary::before{width:15px;height:2px;transform:translateY(-50%);}
.faq summary::after{width:2px;height:15px;transform:translate(-6.5px,-50%);}
.faq details[open] summary::after{transform:translate(-6.5px,-50%) scaleY(0);}
.faq .ans{padding:0 0 var(--s3) 0;color:var(--muted);max-width:68ch;}

/* ---------- contatti ---------- */
.mails{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.mailcard{
  background:var(--white);border:1px solid var(--line);border-radius:3px;padding:var(--s3);
  display:flex;flex-direction:column;gap:6px;text-decoration:none;transition:border-color .2s,transform .2s;
}
.mailcard:hover{border-color:var(--mint);transform:translateY(-2px);}
.mailcard b{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em;}
/* l'indirizzo sta nel font di testo, non in Syne: Syne 800 è larga e a schede
   strette spezzava l'indirizzo a metà parola. */
.mailcard .addr{
  font-family:var(--body);font-weight:500;font-size:.92rem;color:var(--ink);
  align-self:flex-start;border-bottom:1px solid var(--mint);padding-bottom:2px;
  overflow-wrap:anywhere;
}
.mailcard span{font-size:.85rem;color:var(--muted);}

/* ---------- footer ---------- */
.foot{background:var(--petrol);color:var(--on-dark-muted);padding-block:var(--s5);}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;font-size:.85rem;}
.foot a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid rgba(0,184,148,.6);padding-bottom:2px;}
.foot .note{width:100%;font-size:.76rem;color:rgba(174,186,180,.75);border-top:1px solid rgba(237,241,238,.15);padding-top:var(--s2);}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:none;}
  .payoff li::after{transform:none;transition:none;}
  .payoff li::before{background:var(--mint);}
  .status i{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ---------- pagine legali ---------- */
.legal{max-width:72ch;display:flex;flex-direction:column;gap:var(--s4);}
.legal h2{font-size:clamp(1.25rem,2.4vw,1.6rem);}
.legal section{display:flex;flex-direction:column;gap:var(--s2);}
.legal p,.legal li{color:var(--muted);}
.legal ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px;}
.legal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--mint);}
.legal .updated{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--s2);}
.tbd-inline{
  background:rgba(0,184,148,.16);border-radius:2px;padding:1px 6px;
  font-size:.86em;font-weight:600;color:var(--petrol);white-space:nowrap;
}
.backlink{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.85rem;
  font-weight:500;color:var(--muted);align-self:flex-start;
}
.backlink:hover{color:var(--ink);}

/* ---------- invito alle collaborazioni ---------- */
.join{
  background:var(--petrol);color:var(--on-dark);border-radius:3px;
  padding:clamp(28px,4.5vw,52px);display:grid;gap:var(--s3);
}
@media (min-width:860px){
  .join{grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center;}
}
.join h3{color:var(--white);}
.join .eyebrow{color:var(--on-dark-muted);}
.join p{color:var(--on-dark-muted);max-width:62ch;}
.join p a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--mint);}
.join .small{font-size:.88rem;color:rgba(174,186,180,.8);}
.join .linkout{white-space:nowrap;}

.legal h1{font-size:clamp(2rem,4.4vw,3rem);}

/* ================= VERSIONE TELEFONO =================
   Su schermo stretto il sito perdeva gerarchia e diventava una colonna di
   paragrafi tutti uguali. Qui l'occhiello di sezione smette di essere una
   riga di testo e diventa un'insegna di fermata: una targa che attraversa
   tutta la larghezza, agganciata alla linea nel margine. E' l'elemento che
   si ripete e che da ritmo alla lettura. */
@media (max-width:899.98px){

  /* l'insegna esce nel margine fino a toccare la linea */
  .eyebrow{
    position:relative;
    margin-left:-36px;
    padding:12px 0 12px 36px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    font-size:.7rem;letter-spacing:.18em;color:var(--ink);
    gap:0;
  }
  /* il trattino menta diventa il pallino della fermata, centrato sulla linea */
  .eyebrow::before{
    position:absolute;left:6.5px;top:50%;
    width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
    background:var(--mint);
  }
  .sec-dark .eyebrow,.on-dark .eyebrow{
    color:var(--white);
    border-top-color:rgba(237,241,238,.22);
    border-bottom-color:rgba(237,241,238,.22);
  }
  /* dentro il riquadro collaborazioni l'occhiello resta una riga normale:
     ha il suo fondo e la sua imbottitura, l'insegna lo spaccherebbe */
  .join .eyebrow{
    margin-left:0;padding:0;border:0;gap:10px;color:var(--on-dark-muted);
    font-size:.72rem;letter-spacing:.16em;
  }
  .join .eyebrow::before{
    position:static;width:22px;height:2px;margin:0;border-radius:0;
  }

  /* piu stacco fra insegna e titolo, meno vuoto morto fra i paragrafi */
  .stack{gap:var(--s2);}
  .stack .eyebrow{margin-bottom:var(--s1);}
  .stack-lg{gap:var(--s4);}
}

/* ---------- barra della linea, in basso ---------- */
.linebar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (min-width:900px){.linebar{display:none;}}
.linebar-prog{height:2px;background:var(--line);}
.linebar-prog i{display:block;height:100%;width:0;background:var(--mint);transition:width .1s linear;}
.linebar-in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  height:52px;padding-inline:16px;
}
.linebar-name{
  font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* la linea in miniatura: una fermata per sezione, toccabile */
.linebar-stops{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex:none;}
.linebar-stops li{position:relative;}
.linebar-stops li:not(:last-child){padding-right:14px;}
.linebar-stops li:not(:last-child)::after{
  content:"";position:absolute;left:7px;top:50%;width:14px;height:1px;
  margin-top:-.5px;background:var(--line);
}
.linebar-stops a{
  display:block;position:relative;z-index:1;
  width:7px;height:7px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--line);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
/* il pallino e 7px: l'area di tocco viene portata a 44px */
.linebar-stops a::before{content:"";position:absolute;left:-18px;right:-18px;top:-22px;bottom:-22px;}
.linebar-stops li.done a{border-color:var(--mint);}
.linebar-stops li.done::after{background:var(--mint);}
.linebar-stops li.active a{background:var(--mint);border-color:var(--mint);transform:scale(1.5);}

/* la barra non deve coprire il fondo del footer */
@media (max-width:899.98px){body{padding-bottom:54px;}}

/* Su telefono le tre fermate del payoff si impilano una sotto l'altra, quindi
   il tratto che le collega deve essere verticale. Restando orizzontale
   spariva: sotto "Padroneggia." restava il pallino senza linea. */
@media (max-width:640px){
  .payoff{flex-direction:column;gap:0;}
  .payoff li{flex:none;padding:0 0 var(--s3) 26px;}
  .payoff li:last-child{padding-bottom:0;}
  .payoff li::after{
    left:4px;top:12px;bottom:0;width:2px;height:auto;
    transform:scaleY(0);transform-origin:top;
  }
  .payoff.go li::after{transform:scaleY(1);}
}