/* Pagine con sezioni (home, /loop, /breakout, Lab): una sola grammatica.
   Ogni sezione = intestazione impilata (etichetta, titolo a due toni, frase) + contenuto sotto, sempre alla stessa distanza.
   Catalogo chiuso dei contenuti: punti con la forma accanto, mattoni, percorso come scena, linea del tempo, confronto a tre colonne, due colonne. */

.p-kicker{font-size:clamp(1.25rem,1rem + .8vw,1.75rem);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--s-4)}

/* sezione */
.s{padding-top:var(--m-sec)}
.s.on-forest{margin-top:var(--m-sec);padding-block:var(--m-sec)}
main .s.on-forest::before,main .t3__col--us.on-forest::before{display:none}
.s-head{max-width:900px}
.s-head .m-two-tone{max-width:30ch}
.m-two-tone span{text-wrap:balance}
.s-lead{margin-top:var(--s-5);font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft);max-width:50ch;text-wrap:pretty}
.on-forest .s-lead{color:var(--sage)}
.s .s-body{margin-top:var(--s-8)}
.s-media{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7) clamp(32px,5vw,96px);align-items:center}
.s-media--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.s-media,.s-media--even{grid-template-columns:1fr}}
.s-aside{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--hairline);max-width:64ch;color:var(--ink-soft);text-wrap:pretty}
.s-aside strong{color:var(--ink);font-weight:500}

/* punti: indice, titolo, testo; filetto verticale con il tratto Lime in cima (come l'etichetta di sezione) */
.s-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-6) var(--gutter);counter-reset:pt}
.s-points li{position:relative;padding-top:var(--s-5);border-top:1px solid var(--hairline)}
.s-points h3{font-size:clamp(1.375rem,1.1rem + .6vw,1.75rem);line-height:1.15;letter-spacing:-.03em}
.s-points p{margin-top:var(--s-2);color:var(--ink-soft);line-height:1.5;max-width:40ch;text-wrap:pretty}
.s-points--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--s-6)}
.s-points--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--gutter)}
.s-points--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6) var(--gutter)}
@media (max-width:1000px){.s-points--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.s-points--three,.s-points--four{grid-template-columns:1fr}}
.s-points--list{gap:var(--s-6)}
.s-points--list li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);align-items:baseline;gap:var(--s-1) var(--s-5);padding-block:2px}
.s-points--list p{margin-top:0}
@media (max-width:640px){.s-points--two{grid-template-columns:1fr}.s-points--list li{grid-template-columns:1fr}}

/* /loop, il ciclo: l'anello al centro, un punto Lime gira e accende i quattro momenti */
.p-cycle__visual{position:relative;aspect-ratio:1;width:calc(100% - 112px);max-width:440px;justify-self:center;margin:40px 56px}
.p-cycle__orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-cycle__orbit circle{fill:none;stroke:var(--line);stroke-width:.35}
.p-cycle__dot{position:absolute;inset:0;animation:p-orbit 12s linear infinite}
.p-cycle__dot span{position:absolute;left:50%;top:4%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(200,242,90,.3)}
@keyframes p-orbit{to{transform:rotate(1turn)}}
.p-cycle__ring{position:absolute;left:17%;top:27%;width:66%;height:auto}
.p-cycle__step{position:absolute;translate:-50% -50%;display:inline-flex;align-items:center;gap:8px;padding:6px 4px;font-weight:500;font-size:var(--t-small);white-space:nowrap;color:var(--ink-soft);animation:p-step 12s linear infinite}
.p-cycle__step::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35}
.p-cycle__step--n{left:50%;top:4%}
.p-cycle__step--e{left:96%;top:50%;animation-delay:-9s}
.p-cycle__step--s{left:50%;top:96%;animation-delay:-6s}
.p-cycle__step--w{left:4%;top:50%;animation-delay:-3s}
@keyframes p-step{0%,9%{color:var(--ink)}16%,93%{color:var(--ink-soft)}100%{color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.p-cycle__dot,.p-cycle__step{animation:none}}
@media (max-width:900px){.p-cycle__visual{order:-1;width:calc(100% - 112px);max-width:360px}}

/* /breakout, un mattone alla volta: un muro di cinque mattoni, sempre più pieni da sinistra a destra, fino al trasferimento */
.s-bricks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;counter-reset:b}
.s-bricks li{--i:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-5);min-height:136px;padding:var(--s-5);border-radius:16px;font-weight:500;font-size:var(--t-lead);line-height:1.2;letter-spacing:-.01em}
.s-bricks li::before{counter-increment:b;content:"0" counter(b);font-size:var(--t-small);opacity:.7}
.s-bricks li:nth-child(1){--i:0;box-shadow:inset 0 0 0 1px var(--line)}
.s-bricks li:nth-child(2){--i:1;background:#E4E9DB}
.s-bricks li:nth-child(3){--i:2;background:#CDD7C6}
.s-bricks li:nth-child(4){--i:3;background:var(--pine);color:var(--mist)}
.s-bricks li:nth-child(5){--i:4;background:var(--forest);color:var(--mist)}
.s-bricks.pre li{opacity:0;transform:translateY(14px)}
.s-bricks.pre.in li{opacity:1;transform:none;transition:opacity .6s var(--ease-out) calc(var(--i) * 120ms),transform .8s var(--ease-reveal) calc(var(--i) * 120ms)}
@media (prefers-reduced-motion:reduce){.s-bricks.pre li{opacity:1;transform:none}}
@media (max-width:900px){.s-bricks{grid-template-columns:1fr}.s-bricks li{flex-direction:row;align-items:center;justify-content:flex-start;min-height:58px;padding:0 var(--s-5);font-size:var(--t-body)}}

/* forme del percorso come scena: l'arco che si chiude (/loop), i gradini che si accendono (/breakout) */
.p-meter{position:relative;width:min(100%,380px);aspect-ratio:1}
.p-meter__track{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.p-meter__base{fill:none;stroke:var(--line);stroke-width:.6}
.p-meter__arc{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--p,100) 100;transition:stroke-dasharray .9s var(--ease-reveal)}
.p-meter__ring{position:absolute;left:14%;top:26%;width:72%;height:auto;transition:filter .9s var(--ease-out)}
.p-meter.is-full .p-meter__ring{filter:drop-shadow(0 0 28px rgba(200,242,90,.55))}
.p-stairs{position:relative;width:min(100%,440px);aspect-ratio:1120/792}
.p-stairs__step{position:absolute;inset:0;width:100%;height:100%;transition:filter .6s var(--ease-out)}
.p-stairs__step.is-top{filter:drop-shadow(0 0 22px rgba(200,242,90,.6))}
@media (prefers-reduced-motion:reduce){.p-stairs__step,.p-meter__arc{transition:none}}

/* linea del tempo: etichette a sinistra, fasi in alto, ogni voce è una barra sulle fasi in cui vale */
.track{display:grid;gap:8px}
.track__head,.track__row{display:grid;grid-template-columns:minmax(150px,200px) var(--cols);gap:0 6px;align-items:center}
.track__head{margin-bottom:4px;align-items:end}
.track__head span{padding:0 var(--s-2) var(--s-3) 0;font-size:var(--t-small);font-weight:500;line-height:1.3;color:var(--ink-soft);border-bottom:1px solid var(--hairline);text-wrap:balance}
.track__head span:first-child{border-bottom:0}
.track__name{margin:0;padding-right:var(--s-4);font-weight:500;line-height:1.25}
.track__bar{display:flex;align-items:center;min-height:52px;padding:0 var(--s-4);border-radius:12px;font-size:var(--t-small);font-weight:500;white-space:nowrap;overflow:hidden}
.track__bar--forest{background:var(--forest);color:var(--mist)}
.track__bar--lime{background:var(--lime);color:var(--forest)}
.track__bar--soft{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft)}
.track__bar--end::after{content:"";flex:none;width:10px;height:10px;margin-left:auto;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(200,242,90,.25)}
.track__ticks{display:flex;justify-content:space-around;align-items:center;min-height:52px;border-radius:12px;background:rgba(200,242,90,.32)}
.track__tick{display:grid;justify-items:center;gap:3px;font-size:.8125rem;font-weight:500;line-height:1}
.track__tick i{width:8px;height:8px;border-radius:50%;background:var(--forest)}
.track.pre .track__bar,.track.pre .track__ticks{clip-path:inset(0 100% 0 0 round 12px)}
.track.pre .track__tick i{transform:scale(0)}
.track.in .track__bar,.track.in .track__ticks{animation:track-fill 1.1s var(--ease-reveal) both}
.track.in .track__row:nth-child(3) > *{animation-delay:.2s}
.track.in .track__row:nth-child(4) > *{animation-delay:.4s}
.track.in .track__bar--lime{animation-delay:.5s}
.track.in .track__tick i{animation:track-pop .5s var(--ease-reveal) both}
.track.in .track__tick:nth-child(1) i{animation-delay:.7s}.track.in .track__tick:nth-child(2) i{animation-delay:.85s}.track.in .track__tick:nth-child(3) i{animation-delay:1s}.track.in .track__tick:nth-child(4) i{animation-delay:1.15s}
@keyframes track-fill{from{clip-path:inset(0 100% 0 0 round 12px)}to{clip-path:inset(0 0 0 0 round 12px)}}
@keyframes track-pop{from{transform:scale(0)}60%{transform:scale(1.4)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.track.pre .track__bar,.track.pre .track__ticks{clip-path:none}.track.pre .track__tick i{transform:none}.track.in .track__bar,.track.in .track__ticks,.track.in .track__tick i{animation:none}}
@media (max-width:860px){
  .track{gap:6px}
  .track__head{display:none}
  .track__row{grid-template-columns:1fr!important;gap:6px}
  .track__row > *{grid-column:1!important}
  .track__row + .track__row{margin-top:var(--s-3)}
  .track__bar[data-span],.track__ticks[data-span]{position:relative;margin-top:22px}
  .track__bar[data-span]::before,.track__ticks[data-span]::before{content:attr(data-span);position:absolute;left:0;bottom:calc(100% + 4px);font-size:.8125rem;font-weight:500;color:var(--ink-soft);white-space:nowrap}
}

/* note sotto un diagramma e due colonne: filetto sottile con il tratto Lime, titolo, testo */
.track-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--gutter);margin-top:var(--s-8)}
.track-notes > div{padding-top:var(--s-5);border-top:1px solid var(--hairline)}
.p-duo > div{padding:var(--s-6);border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.track-notes h3{font-size:clamp(1.25rem,1rem + .6vw,1.5rem);letter-spacing:-.02em;margin-bottom:var(--s-2)}
.track-notes p{color:var(--ink-soft);text-wrap:pretty}
.p-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.p-duo h3{font-size:clamp(1.5rem,1.1rem + 1vw,2.25rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--s-3)}
.p-duo p{color:var(--ink-soft);max-width:44ch;font-size:var(--t-lead);line-height:1.5;text-wrap:pretty}
@media (max-width:860px){.track-notes{grid-template-columns:1fr}}
@media (max-width:760px){.p-duo{grid-template-columns:1fr}}

/* intestazione con la forma accanto (quando il contenuto sotto è a tutta larghezza) */
.s-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6) clamp(32px,5vw,96px);align-items:center}
.s-top > .f-tile{width:min(100%,480px);justify-self:end}
@media (max-width:900px){.s-top{grid-template-columns:1fr}.s-top > .f-tile{width:min(100%,420px);justify-self:center}}

/* /breakout, la terza via: tre strade confrontate riga per riga, stesse righe alla stessa altezza; la terza è Forest */
.t3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:0 var(--s-4)}
.t3__col{display:grid;grid-template-rows:subgrid;grid-row:1 / span 5;row-gap:var(--s-3);padding:var(--s-6) var(--s-5) var(--s-5);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}
.t3__col--us{background:var(--forest);box-shadow:none}
.t3__col--us h3{color:var(--mist)}
.t3__tag{font-size:var(--t-small);font-weight:500;color:var(--ink-soft)}
.t3__col h3{font-size:clamp(1.5rem,1.1rem + .9vw,2rem);letter-spacing:-.03em;line-height:1.1}
.t3__desc{color:var(--ink-soft);text-wrap:pretty;padding-bottom:var(--s-3)}
.t3__facts{display:contents}
.t3__facts div{display:grid;gap:4px;align-content:start;padding-top:var(--s-3);border-top:1px solid var(--hairline)}
.t3__facts dt{font-size:var(--t-small);color:var(--ink-soft)}
.t3__facts dd{margin:0;font-weight:500;font-size:var(--t-lead);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
@media (max-width:900px){
  .t3{grid-template-columns:1fr;grid-template-rows:none;gap:var(--s-4)}
  .t3__col,.t3__col--us{grid-row:auto;display:flex;flex-direction:column;gap:var(--s-3)}
}

/* chiusure: l'oggetto sta al centro dell'immagine, quindi l'immagine scorre a destra e sfuma nel Forest a sinistra */
/* spazi: un blocco a tutta larghezza attaccato a un altro a tutta larghezza non prende spazio (niente strisce vuote) */
.p-band + .s.on-forest,.m-film + .s.on-forest,.s.on-forest + .p-band,.p-band + .m-close,.s.on-forest + .m-close{margin-top:0}

/* percorso: le fasi con un filo che si riempie di Lime. Su schermi larghi e alti la scena resta ferma (is-live) e la
   descrizione della fase attiva sta in un riquadro fisso che cambia in dissolvenza; altrove l'elenco scorre normale con tutte
   le descrizioni e la forma resta accanto. Niente elementi che saltano. */
.scrolly{position:relative}
.scrolly__stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7) clamp(32px,5vw,96px);align-items:start}
.scrolly__stage{grid-template-areas:"head panel" "visual panel";grid-template-rows:auto 1fr}
.scrolly__stage > .s-head{grid-area:head;align-self:end}
.scrolly__visual{grid-area:visual}
.scrolly__panel{grid-area:panel}
.scrolly__visual{position:sticky;top:max(104px,calc(50svh - 200px));display:grid;justify-items:center}
.scrolly .p-meter{width:min(100%,380px,calc(100svh - 450px))}
.scrolly .p-stairs{width:min(100%,460px,calc((100svh - 470px) * 1.41))}
.scrolly .p-meter__arc{transition:none}
.scrolly__list{--r0:12px;--r1:calc(100% - 12px);--fh:0px;position:relative;list-style:none;margin:0;padding:0 0 0 32px}
.scrolly__list::before,.scrolly__list::after{content:"";position:absolute;top:var(--r0);border-radius:2px}
.scrolly__list::before{left:5px;width:1px;height:calc(var(--r1) - var(--r0));background:var(--line)}
.scrolly__list::after{left:4.5px;width:2px;height:var(--fh);background:var(--lime)}
.scrolly__list > li + li{margin-top:var(--s-6)}
.scrolly__row{position:relative;display:flex;align-items:baseline;gap:var(--s-3)}
.scrolly__row::before{content:"";position:absolute;left:-32px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--canvas);box-shadow:inset 0 0 0 1.5px var(--line);transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.scrolly__list > li.is-done .scrolly__row::before,.scrolly__list > li.is-on .scrolly__row::before{background:var(--lime);box-shadow:none}
.scrolly__list > li.is-on .scrolly__row::before{box-shadow:0 0 0 5px rgba(200,242,90,.3)}
.scrolly__n{font-size:var(--t-small);font-weight:500;color:var(--ink-soft);min-width:1.75rem}
.scrolly__list h3{font-size:clamp(1.375rem,1.1rem + .7vw,1.75rem);line-height:1.2;letter-spacing:-.025em;color:var(--ink-soft);transition:color .35s var(--ease-out)}
.scrolly__list > li.is-on h3,.scrolly__list > li.is-done h3{color:var(--ink)}
.scrolly__text{margin:0;padding:var(--s-2) 0 0 calc(1.75rem + var(--s-3));color:var(--ink-soft);max-width:calc(42ch + 1.75rem + var(--s-3));text-wrap:pretty}
.scrolly.is-live{height:calc(var(--n) * 55svh + 100svh)}
.scrolly.is-live .scrolly__stage{position:sticky;top:0;height:100svh;grid-template-rows:auto auto;align-content:center;row-gap:var(--s-6);padding:88px 0 24px}
.s:has(.scrolly.is-live){padding-top:max(24px,calc(var(--m-sec) - 120px))}
.scrolly.is-live .scrolly__visual{position:static;align-self:start;justify-items:start}
.scrolly.is-live .scrolly__panel{align-self:center}
.scrolly.is-live .s-head .s-lead{margin-top:var(--s-4)}
.scrolly.is-live .scrolly__list > li + li{margin-top:var(--s-4)}
.scrolly.is-live .scrolly__list > li.is-done h3{color:var(--ink-soft)}
.scrolly.is-live .scrolly__fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-reveal)}
.scrolly.is-live .scrolly__fold > .scrolly__text{min-height:0;overflow:hidden;opacity:0;transition:opacity .35s var(--ease-out)}
.scrolly.is-live .scrolly__list > li.is-on .scrolly__fold{grid-template-rows:1fr}
.scrolly.is-live .scrolly__list > li.is-on .scrolly__fold > .scrolly__text{opacity:1;transition-delay:.12s}
@media (prefers-reduced-motion:reduce){.scrolly__row::before,.scrolly__list h3,.scrolly__fold,.scrolly__fold > .scrolly__text{transition:none}}
@media (max-width:900px){
  .scrolly__stage{grid-template-columns:1fr;grid-template-areas:"head" "visual" "panel";grid-template-rows:auto;gap:var(--s-6)}
  .scrolly__visual{position:static}
  .scrolly .p-meter{width:min(46vw,200px)}
  .scrolly .p-stairs{width:min(66vw,280px)}
  .scrolly__list h3{font-size:1.25rem}
}

/* /breakout, cosa si acquista: riquadri Pine su Forest; i due che provano l'attività (clienti, ricavi) più grandi */
.s-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
.s-bento li{grid-column:span 2;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(241,243,234,.07)}
.s-bento li.s-bento__big{grid-column:span 3;padding:var(--s-7) var(--s-6)}
.s-bento h3{font-size:clamp(1.5rem,1.1rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.05}
.s-bento__big h3{font-size:clamp(2rem,1.2rem + 1.8vw,3rem);letter-spacing:-.04em}
.s-bento p{color:var(--ink-soft);font-size:var(--t-lead);line-height:1.45;max-width:34ch;text-wrap:pretty}
@media (max-width:860px){.s-bento{grid-template-columns:1fr}.s-bento li,.s-bento li.s-bento__big{grid-column:auto}}

/* /breakout, chi porta il rischio: un grafico unico, due blocchi in proporzione alle fasi (4 a 1) */
.p-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1.25fr);gap:8px}
.p-split__part{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6);min-height:168px;padding:var(--s-6);border-radius:24px}
.p-split__part span{font-size:clamp(1.375rem,1rem + 1vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.p-split__part small{font-size:var(--t-small);font-weight:500;opacity:.75}
.p-split__part--forest{background:var(--forest);color:var(--mist)}
.p-split__part--lime{background:var(--lime);color:var(--forest)}
.p-split.pre .p-split__part{clip-path:inset(0 100% 0 0 round 24px)}
.p-split.in .p-split__part{animation:split-fill 1.1s var(--ease-reveal) both}
.p-split.in .p-split__part--lime{animation-delay:.45s}
@keyframes split-fill{from{clip-path:inset(0 100% 0 0 round 24px)}to{clip-path:inset(0 0 0 0 round 24px)}}
@media (prefers-reduced-motion:reduce){.p-split.pre .p-split__part{clip-path:none}.p-split.in .p-split__part{animation:none}}
@media (max-width:760px){.p-split{grid-template-columns:1fr}.p-split__part{min-height:132px}}

/* confronto a due colonne (Lab): la domanda come etichetta, le risposte allineate riga per riga */
.t3--two{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.t3--two .t3__facts dd{font-weight:400;line-height:1.45}
.t3--two .t3__col:not(.t3__col--us) .t3__facts dd{color:var(--ink-soft)}
.t3--two .t3__col h3{padding-bottom:var(--s-3)}
@media (max-width:900px){.t3--two{grid-template-columns:1fr}}
/* nella scena ferma il titolo è più compatto: deve stare sullo schermo insieme alle cinque fasi */
.scrolly.is-live .s-head .m-two-tone{font-size:clamp(2rem,1rem + 1.6vw,2.75rem)}
.scrolly.is-live .scrolly__list > li + li{margin-top:var(--s-3)}

/* /loop, cosa si ottiene: quattro schede sul Forest (nome e misura) */
.s-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.s-cards li{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);border-radius:24px;background:var(--surface)}
.s-cards h3{font-size:clamp(1.5rem,1.1rem + 1vw,2.125rem);letter-spacing:-.03em;line-height:1.05}
.s-cards p{color:var(--ink-soft);font-size:var(--t-lead);line-height:1.45;text-wrap:pretty}
@media (max-width:1000px){.s-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.s-cards{grid-template-columns:1fr}}


/* fine pagina: una riga sobria sul chiaro, sopra il piè di pagina. Niente immagini, niente sezioni a tutta pagina */
/* chiusura di ogni pagina: fascia verde chiaro (come i riquadri dei mockup), il piè di pagina resta l'unico blocco scuro */
.s-end{margin-top:var(--s-9);padding-block:var(--s-8);background:radial-gradient(90% 140% at 20% 20%,#E9F6C6 0%,#DCEFA8 100%)}
.s-end__inner{display:grid;justify-items:start;gap:var(--s-5)}
.s-end__title{max-width:18ch;font-size:clamp(2rem,1.3rem + 2vw,3.25rem);line-height:1.08;letter-spacing:-.035em;font-weight:600;color:var(--ink);text-wrap:balance}
.s-end__title .light{font-weight:300;color:var(--ink-soft)}
.s-end__text{color:var(--ink-soft);max-width:52ch;text-wrap:pretty}
.s-end .btn--primary{background:var(--forest);color:#fff}
body:has(.s-end) .site-footer .ft__cta{display:none}
/* l'ultima sezione della pagina respira prima del piè di pagina */
main > .s:last-child{padding-bottom:var(--m-sec)}
main > .s.on-forest:last-child{margin-bottom:0}

/* /loop, compenso: il diagramma della success fee. Il risultato sale e supera l'obiettivo concordato; sopra l'obiettivo si accende la success fee */
.p-fc{margin:0}
.p-fc__plot{position:relative;height:clamp(240px,26vw,380px)}
.p-fc__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-fc__base{stroke:var(--hairline);stroke-width:1;vector-effect:non-scaling-stroke}
.p-fc__obj{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.p-fc__line{fill:none;stroke:var(--forest);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.p-fc__area{fill:var(--lime);opacity:.55}
.p-fc__dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px var(--forest),0 0 0 8px rgba(200,242,90,.35)}
.p-fc__label{position:absolute;font-size:var(--t-small);font-weight:500;line-height:1.2;white-space:nowrap}
.p-fc__label--obj{left:0;transform:translateY(calc(-100% - 8px));color:var(--ink-soft)}
.p-fc__label--res{right:0;transform:translateY(calc(-100% - 12px))}
.p-fc__label--fee{transform:translate(-50%,-50%);color:var(--forest);font-weight:600}
.p-fc__axis{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-3);font-size:var(--t-small);color:var(--ink-soft)}
.p-fc.pre .p-fc__svg{clip-path:inset(-20px 100% -20px 0)}
.p-fc.pre .p-fc__dot,.p-fc.pre .p-fc__label{opacity:0}
.p-fc.in .p-fc__svg{animation:fc-draw 1.6s var(--ease-reveal) both}
.p-fc.in .p-fc__dot,.p-fc.in .p-fc__label{opacity:1;transition:opacity .5s var(--ease-out) 1.1s}
.p-fc.in .p-fc__label--obj{transition-delay:.2s}
@keyframes fc-draw{from{clip-path:inset(-20px 100% -20px 0)}to{clip-path:inset(-20px 0 -20px 0)}}
@media (prefers-reduced-motion:reduce){.p-fc.pre .p-fc__svg{clip-path:none}.p-fc.pre .p-fc__dot,.p-fc.pre .p-fc__label{opacity:1}.p-fc.in .p-fc__svg{animation:none}}
@media (max-width:640px){.p-fc__axis span:last-child{text-align:right;max-width:16ch}}

/* voci senza riquadri: filetto sottile sopra ogni voce, nessun fondo (valore, a chi ci rivolgiamo, cosa si acquista, linee) */
.s-cards li,.p-duo > div,.s-bento li,.s-bento li.s-bento__big{padding:var(--s-5) 0 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--hairline);min-height:0}
.s-cards,.p-duo,.s-bento{gap:var(--s-6) var(--gutter)}
.s-cards h3,.p-duo h3,.s-bento h3,.s-bento__big h3{font-size:clamp(1.375rem,1.1rem + .6vw,1.75rem);letter-spacing:-.03em;line-height:1.1}
.s-cards p,.p-duo p,.s-bento p,.s-bento__big p{margin-top:var(--s-2);font-size:var(--t-body);line-height:1.5;color:var(--ink-soft);max-width:34ch}
.s-bento{grid-template-columns:repeat(5,minmax(0,1fr))}
.s-bento li,.s-bento li.s-bento__big{grid-column:auto}
@media (max-width:1000px){.s-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.s-bento{grid-template-columns:minmax(0,1fr)}}

/* diagramma della success fee, interattivo: una linea segue il puntatore, un punto scorre sulla curva; oltre l'obiettivo l'area si accende fino al puntatore */
.p-fc__plot{touch-action:pan-y;cursor:crosshair}
.p-fc__area{transition:opacity .35s var(--ease-out)}
.p-fc__cursor{position:absolute;top:0;bottom:0;width:1px;background:var(--forest);opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out)}
.p-fc__probe{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--mist);box-shadow:0 0 0 2px var(--forest);opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out),background-color .25s var(--ease-out)}
.p-fc__plot.is-hover .p-fc__cursor{opacity:.25}
.p-fc__plot.is-hover .p-fc__probe{opacity:1}
.p-fc__plot.is-hover .p-fc__area{opacity:.3}
.p-fc__plot.is-hover.is-over .p-fc__area{opacity:.85}
.p-fc__plot.is-over .p-fc__probe{background:var(--lime)}
.p-fc__dot{transition:transform .4s var(--ease-reveal)}
.p-fc__plot.is-over .p-fc__dot{transform:scale(1.35)}
.p-fc__label--fee{transition:opacity .3s var(--ease-out),transform .4s var(--ease-reveal)}
.p-fc__plot.is-hover:not(.is-over) .p-fc__label--fee{opacity:.35}

/* elenchi con filetto: al passaggio il filetto si riempie di Lime da sinistra */
.s-cards li,.p-duo > div,.s-bento li,.lb-rules li,.track-notes > div{position:relative}
.s-cards li::before,.p-duo > div::before,.s-bento li::before,.lb-rules li::before,.track-notes > div::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-reveal)}
@media (hover:hover){.s-cards li:hover::before,.p-duo > div:hover::before,.s-bento li:hover::before,.lb-rules li:hover::before,.track-notes > div:hover::before{transform:scaleX(1)}}

/* diagrammi a barre: la riga o la parte sotto il puntatore resta piena, le altre si attenuano */
.track__row,.p-split__part{transition:opacity .35s var(--ease-out),transform .45s var(--ease-reveal)}
@media (hover:hover){
  .track:hover .track__row:not(:hover){opacity:.4}
  .p-split:hover .p-split__part:not(:hover){opacity:.45}
  .p-split .p-split__part:hover{transform:translateY(-4px)}
}
/* percorso: le fasi si possono cliccare per andarci */
.scrolly.is-live .scrolly__row{cursor:pointer}
@media (hover:hover){.scrolly.is-live .scrolly__list > li:not(.is-on) .scrolly__row:hover h3{color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.s-cards li::before,.p-duo > div::before,.s-bento li::before,.lb-rules li::before,.track-notes > div::before{transition:none}}

.p-cycle__step{background:var(--canvas)}
/* D. mattoni: una linea in cinque tratti che si riempie dal chiaro al Forest; la parola sotto ogni tratto */
.s-bricks{gap:6px}
.s-bricks li{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s-3);min-height:0;padding:var(--s-4) 0 0;border-radius:0;background:none!important;box-shadow:none!important;color:var(--ink)!important;position:relative;font-size:var(--t-lead)}
.s-bricks li::before{order:-1;font-size:var(--t-small);opacity:1;color:var(--ink-soft)!important}
.s-bricks li::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:3px;background:var(--line);transition:transform .5s var(--ease-reveal)}
.s-bricks li:nth-child(2)::after{background:#C5D3B9}
.s-bricks li:nth-child(3)::after{background:#8FA596}
.s-bricks li:nth-child(4)::after{background:var(--pine)}
.s-bricks li:nth-child(5)::after{background:var(--forest);box-shadow:inset 0 0 0 1px var(--forest)}
.s-bricks li:nth-child(5){font-weight:600}
@media (hover:hover){.s-bricks li:hover::after{transform:scaleY(1.6)}}
@media (max-width:900px){.s-bricks li{flex-direction:column;align-items:flex-start;min-height:0;padding:var(--s-4) 0 var(--s-2)}}
/* E. terza via: tre colonne senza riquadro, filetto sopra; /breakout con il filetto Forest spesso */
.t3__col,.t3__col--us{padding:var(--s-5) 0 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--hairline)}
.t3__col--us{border-top:3px solid var(--forest)}
.t3{column-gap:var(--gutter)}
.t3__col--us h3,.t3__col--us .t3__desc,.t3__col--us dd{color:var(--ink)}
.t3__col--us .t3__tag,.t3__col--us dt{color:var(--ink-soft)}
.t3__col--us .t3__facts div{border-top-color:var(--hairline)}
.t3__col--us .m-slash{color:var(--forest)}
@media (hover:hover){.t3__col{transition:opacity .35s var(--ease-out)}.t3:hover .t3__col:not(:hover){opacity:.5}}

/* titoli e frasi affiancati: righe bilanciate (insieme al riallineamento in components.js) */
.s-points h3,.s-cards h3,.p-duo h3,.s-bento h3,.t3__col h3,.track-notes h3,.s-cards p,.p-duo p,.s-bento p,.s-points p,.t3__desc{text-wrap:balance}

/* ===== mockup interattivi ===== */
/* terza via: mappa prova / costo; un punto per strada, la scheda a fianco cambia al passaggio */
.p-map{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7) clamp(32px,5vw,96px);align-items:center}
.p-map__plot{position:relative;aspect-ratio:16/10;margin:36px 0 36px;border-left:1px solid var(--ink-soft);border-bottom:1px solid var(--ink-soft)}
.p-map__plot::before,.p-map__plot::after{content:"";position:absolute;width:8px;height:8px;border-top:1px solid var(--ink-soft);border-left:1px solid var(--ink-soft)}
.p-map__plot::before{left:-4.5px;top:-1px;transform:rotate(45deg)}
.p-map__plot::after{right:-1px;bottom:-4.5px;transform:rotate(135deg)}
.p-map__grid{position:absolute;inset:0;background-image:linear-gradient(to bottom,var(--hairline) 1px,transparent 1px),linear-gradient(to right,var(--hairline) 1px,transparent 1px);background-size:100% 25%,25% 100%;opacity:.7}
.p-map__axis{position:absolute;margin:0;font-size:var(--t-small);color:var(--ink-soft);white-space:nowrap}
.p-map__axis--y{left:14px;top:-32px}
.p-map__axis--x{right:0;bottom:-34px}
.p-map__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-map__links line{stroke:var(--forest);stroke-width:1.2;stroke-dasharray:4 5;vector-effect:non-scaling-stroke;opacity:.5}
.p-map__pt{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 10px 0 0;border:0;background:none;font:inherit;color:var(--ink-soft);cursor:pointer;transform:translate(-7px,-50%);transition:color .3s var(--ease-out)}
.p-map__pt--above{flex-direction:column-reverse;gap:6px;padding:0;transform:translate(-50%,calc(-100% + 7px + 15px))}
.p-map__pt--above{min-height:0;padding-top:8px}
.p-map__pt i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--canvas);box-shadow:0 0 0 1.5px var(--ink-soft);transition:transform .4s var(--ease-reveal),box-shadow .3s var(--ease-out),background-color .3s var(--ease-out)}
.p-map__pt span{font-size:var(--t-small);font-weight:500;white-space:nowrap}
.p-map__pt--us i{background:var(--lime);box-shadow:0 0 0 1.5px var(--forest)}
.p-map__pt--us span{font-weight:600}
.p-map__pt.is-on{color:var(--ink)}
.p-map__pt.is-on i{transform:scale(1.35);box-shadow:0 0 0 1.5px var(--forest),0 0 0 7px rgba(200,242,90,.35)}
.p-map__read{display:grid}
.p-map__card{grid-area:1 / 1;display:grid;gap:var(--s-2);align-content:start;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease-out),transform .45s var(--ease-reveal);pointer-events:none}
.p-map__card.is-on{opacity:1;transform:none;pointer-events:auto}
.p-map__tag{font-size:var(--t-small);font-weight:500;color:var(--ink-soft)}
.p-map__card h3{font-size:clamp(1.75rem,1.2rem + 1.2vw,2.5rem);letter-spacing:-.035em;line-height:1.05}
.p-map__desc{color:var(--ink-soft);max-width:38ch;text-wrap:pretty}
.p-map__card dl{display:grid;margin:var(--s-4) 0 0}
.p-map__card dl div{display:grid;gap:2px;padding-block:var(--s-3);border-top:1px solid var(--hairline)}
.p-map__card dt{font-size:var(--t-small);color:var(--ink-soft)}
.p-map__card dd{margin:0;font-weight:500}
.p-map.pre:not(.in) .p-map__pt i{transform:scale(0)}
.p-map.pre:not(.in) .p-map__links{clip-path:inset(0 100% 0 0)}
.p-map.in .p-map__pt i{transition-delay:calc(var(--d,0) * 1ms)}
.p-map.in .p-map__links{transition:clip-path 1s var(--ease-reveal) .5s;clip-path:inset(0 0 0 0)}
@media (max-width:900px){.p-map{grid-template-columns:1fr}.p-map__read{min-height:260px}}
@media (max-width:520px){.p-map__pt span{font-size:.8125rem}.p-map__axis--y{left:10px}}

/* a chi ci rivolgiamo: due cerchi che si avvicinano; l'intersezione si accende */
.p-venn{display:grid;justify-items:center}
.p-venn__stage{position:relative;width:min(100%,760px);aspect-ratio:2/1;container-type:inline-size}
.p-venn__c{position:absolute;top:0;width:50%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink-soft);transition:transform 1.1s var(--ease-reveal),box-shadow .3s var(--ease-out)}
.p-venn__c--a{left:11%}
.p-venn__c--b{left:39%}
.p-venn__c span{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:clamp(.8125rem,.7rem + .5vw,1.0625rem);font-weight:500;line-height:1.3;text-align:center;white-space:nowrap}
.p-venn__c--a span{left:28%}
.p-venn__c--b span{left:72%}
.p-venn__lens{position:absolute;inset:0;clip-path:circle(25cqw at 36% 50%);transition:opacity .8s var(--ease-out) .6s}
.p-venn__lens i{position:absolute;inset:0;clip-path:circle(25cqw at 64% 50%);background:var(--lime)}
.p-venn__mid{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);font-size:clamp(.75rem,.65rem + .45vw,1rem);font-weight:600;line-height:1.25;text-align:center;white-space:nowrap;color:var(--forest);transition:opacity .6s var(--ease-out) .9s}
.p-venn.pre:not(.in) .p-venn__c--a{transform:translateX(-22%)}
.p-venn.pre:not(.in) .p-venn__c--b{transform:translateX(22%)}
.p-venn.pre:not(.in) .p-venn__lens,.p-venn.pre:not(.in) .p-venn__mid{opacity:0}
@media (hover:hover){.p-venn__stage:hover .p-venn__c{box-shadow:inset 0 0 0 1.5px var(--forest)}.p-venn__stage:hover .p-venn__lens i{background:#B9E83F}}

/* l'idea: tra un'idea e un'attività che funziona c'è un muro di cinque mattoni (le tappe). Scorrendo i mattoni vengono tolti
   uno alla volta e resta la loro sagoma con la spunta; tolto l'ultimo, la strada fino all'attività si accende */
.p-gate{--ww:clamp(170px,17vw,230px);--gap:calc(var(--ww) / 2 + 30px);position:relative;height:clamp(300px,26vw,360px);counter-reset:g}
.p-gate__line{position:absolute;top:50%;height:0}
.p-gate__line--in{left:6px;right:calc(50% + var(--gap));border-top:1.5px solid var(--forest)}
.p-gate__line--out{left:calc(50% + var(--gap));right:6px;border-top:1.5px dashed var(--ink-soft);opacity:.6}
.p-gate__path{position:absolute;top:50%;left:6px;right:6px;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--lime);box-shadow:0 0 0 1px rgba(16,38,27,.12);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-reveal)}
.p-gate.is-open .p-gate__path{transform:none}
.p-gate.is-open .p-gate__line--in,.p-gate.is-open .p-gate__line--out{opacity:0;transition:opacity .4s var(--ease-out) .6s}
.p-gate__end{position:absolute;top:50%;display:grid;gap:12px;margin:0;transform:translateY(calc(-100% + 7px));font-weight:500;line-height:1.2;z-index:1}
.p-gate__end--a{left:0;justify-items:start}
.p-gate__end--b{right:0;justify-items:end;text-align:right;color:var(--ink-soft);transition:color .5s var(--ease-out)}
.p-gate__end i{width:14px;height:14px;border-radius:50%;background:var(--canvas);box-shadow:0 0 0 1.5px var(--forest);transition:background-color .5s var(--ease-out) .7s,box-shadow .5s var(--ease-out) .7s}
.p-gate__end--a i{background:var(--forest)}
.p-gate.is-open .p-gate__end--b{color:var(--ink);font-weight:600}
.p-gate.is-open .p-gate__end--b i{background:var(--lime);box-shadow:0 0 0 1.5px var(--forest),0 0 0 8px rgba(200,242,90,.35)}
.p-gate__wall{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);list-style:none;margin:0;padding:0;display:grid;gap:6px;z-index:2}
.p-gate__wall li{--off:-12px;position:relative;display:flex;align-items:center;gap:12px;width:var(--ww);height:48px;padding:0 16px;border-radius:10px;background:var(--forest);color:var(--mist);font-weight:500;font-size:var(--t-body);white-space:nowrap;transform:translateX(var(--off))}
.p-gate__wall li:nth-child(even){--off:12px}
.p-gate__wall li::before{counter-increment:g;content:"0" counter(g);flex:none;width:18px;font-size:var(--t-small);color:var(--sage)}
.p-gate__wall li.is-out{animation:brick-out .9s var(--ease-out) forwards}
.p-gate__wall li.is-in{animation:brick-in .7s var(--ease-reveal) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes brick-out{0%{transform:translateX(var(--off))}30%{background:var(--lime);color:var(--forest);transform:translateX(var(--off)) scale(1.04)}100%{background:var(--lime);color:var(--forest);transform:translate(calc(var(--off) + 90px),40px) rotate(9deg);opacity:0}}
@keyframes brick-in{from{transform:translate(var(--off),-26px);opacity:0}to{transform:translateX(var(--off));opacity:1}}
/* movimento ridotto: il muro già abbattuto, con le tappe spuntate */
.p-gate.is-still .p-gate__wall li{background:transparent;color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line);animation:none}
.p-gate.is-still .p-gate__path{left:calc(50% + var(--gap))}
.p-gate.is-still .p-gate__line--in{opacity:1}

@media (max-width:640px){
  .p-gate{height:330px;--ww:150px;--gap:calc(var(--ww) / 2 + 18px)}
  .p-gate__end{font-size:var(--t-small);max-width:9ch}
  .p-gate__wall li{height:44px;padding:0 12px;font-size:.875rem;--off:-6px}
  .p-gate__wall li:nth-child(even){--off:6px}
  .p-gate__end{max-width:10ch}
  .p-gate__wall li::after{left:14px}
}

/* Company, il metodo: una linea attraversa i tre principi e si divide in /loop e /breakout; un punto la percorre */
.p-flow__plot{position:relative;aspect-ratio:1000/300}
.p-flow__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-flow__line,.p-flow__branch{fill:none;stroke:var(--forest);stroke-width:1.5;transition:opacity .35s var(--ease-out),stroke-width .35s var(--ease-out)}
.p-flow__node{fill:var(--canvas);stroke:var(--forest);stroke-width:1.5}
.p-flow__runner{fill:var(--lime);stroke:var(--forest);stroke-width:1.5;transition:opacity .35s var(--ease-out)}
.p-flow__label{position:absolute;top:calc(50% + 22px);margin:0;max-width:min(16ch,17.5%);font-size:clamp(1rem,.85rem + .4vw,1.25rem);font-weight:500;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;transform:translateX(-7px)}
.p-flow__end{position:absolute;right:0;display:grid;justify-items:end;gap:2px;min-height:44px;text-decoration:none;color:var(--ink);transition:opacity .35s var(--ease-out)}
.p-flow__end > span{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.75rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.p-flow__end small{font-size:var(--t-small);font-weight:500;color:var(--ink-soft)}
.p-flow__end--a{bottom:calc(100% - 62 / 300 * 100% + 12px)}
.p-flow__end--b{top:calc(238 / 300 * 100% + 12px)}
.p-flow__plot.is-a .p-flow__branch--b,.p-flow__plot.is-a .p-flow__runner--b,.p-flow__plot.is-a .p-flow__end--b,.p-flow__plot.is-b .p-flow__branch--a,.p-flow__plot.is-b .p-flow__runner--a,.p-flow__plot.is-b .p-flow__end--a{opacity:.2}
.p-flow__plot.is-a .p-flow__branch--a,.p-flow__plot.is-b .p-flow__branch--b{stroke-width:3}
.p-flow.pre .p-flow__svg{clip-path:inset(-20px 100% -20px 0)}
.p-flow.in .p-flow__svg{animation:fc-draw 1.6s var(--ease-reveal) both}
@media (prefers-reduced-motion:reduce){.p-flow__runner{display:none}.p-flow.pre .p-flow__svg{clip-path:none}.p-flow.in .p-flow__svg{animation:none}}
@media (max-width:760px){
  .p-flow__plot{aspect-ratio:auto;display:grid;gap:var(--s-4);padding-left:var(--s-5);border-left:1.5px solid var(--forest)}
  .p-flow__svg{display:none}
  .p-flow__label,.p-flow__end{position:static;transform:none;max-width:none}
  .p-flow__end{justify-items:start;margin-top:var(--s-2)}
}
.p-flow{padding-block:72px 64px}
@media (max-width:760px){.p-flow{padding-block:0}}
/* cerchi su telefono: uno sopra l'altro */
@media (max-width:600px){
  .p-venn__stage{width:min(100%,340px);aspect-ratio:1/1.28}
  .p-venn__c{left:11%;width:78%;height:60.9%}
  .p-venn__c--a{top:0}
  .p-venn__c--b{top:39.1%}
  .p-venn__c span{left:50%!important;font-size:.875rem}
  .p-venn__c--a span{top:30%}
  .p-venn__c--b span{top:70%}
  .p-venn__lens{clip-path:circle(39cqw at 50% 30.5%)}
  .p-venn__lens i{clip-path:circle(39cqw at 50% 69.5%)}
  .p-venn__mid{font-size:.875rem}
  .p-venn.pre:not(.in) .p-venn__c--a{transform:translateY(-16%)}
  .p-venn.pre:not(.in) .p-venn__c--b{transform:translateY(16%)}
}

/* ===== Telefono ===== */
/* percorso: la scena resta ferma come sul computer. Il titolo scorre via, poi la forma e le cinque fasi restano sotto la barra:
   la forma avanza, il filo si riempie e si apre la descrizione della fase attiva (components.js mette is-pin solo se tutto sta nello schermo) */
@media (max-width:900px){
  .scrolly.is-pin{height:calc(var(--head-h,0px) + 100svh + (var(--n) - 1) * 40svh)}
  .scrolly.is-pin .scrolly__stage{position:sticky;top:calc(-1 * var(--head-h,0px));min-height:calc(var(--head-h,0px) + 100svh);grid-template-areas:"head" "." "." "visual" "panel" ".";grid-template-rows:auto var(--pin,88px) minmax(0,1fr) auto auto minmax(0,1fr);row-gap:0}
  .scrolly.is-pin .scrolly__visual{margin-bottom:var(--s-5)}
  /* nella scena ferma le righe in basso non aspettano la comparsa: sono già sullo schermo */
  .rv-on .scrolly.is-pin .scrolly__list > li.rv{opacity:1;transform:none}
  .scrolly.is-pin .p-meter{width:var(--vis,160px)}
  .scrolly.is-pin .p-stairs{width:min(100%,calc(var(--vis,160px) * 1.414))}
  .scrolly.is-pin .scrolly__list > li + li{margin-top:0}
  .scrolly.is-pin .scrolly__row{min-height:44px;align-items:center;cursor:pointer}
  .scrolly.is-pin .scrolly__list > li.is-done h3{color:var(--ink-soft)}
  .scrolly.is-pin .scrolly__text{padding-top:0;padding-bottom:0;font-size:var(--t-small);line-height:1.5}
  .scrolly.is-pin .scrolly__fold{margin-bottom:0}
  .scrolly.is-pin .scrolly__list > li.is-on .scrolly__fold{margin-bottom:var(--s-2)}
  .scrolly.is-pin .scrolly__fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-reveal),margin-bottom .5s var(--ease-reveal)}
  .scrolly.is-pin .scrolly__fold > .scrolly__text{min-height:0;overflow:hidden;opacity:0;transition:opacity .35s var(--ease-out)}
  .scrolly.is-pin .scrolly__list > li.is-on .scrolly__fold{grid-template-rows:1fr}
  .scrolly.is-pin .scrolly__list > li.is-on .scrolly__fold > .scrolly__text{opacity:1;transition-delay:.12s}
}
/* filetti delle voci: sul telefono si accende quello della voce al centro dello schermo (components.js mette is-lit) */
:is(.s-cards li,.p-duo > div,.s-bento li,.lb-rules li,.track-notes > div).is-lit::before{transform:scaleX(1)}
/* terza via: i punti non scelti respirano piano, per dire che si possono toccare */
@media (hover:none){
  .p-map__pt i{position:relative}
  .p-map__pt:not(.is-on) i::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink-soft);opacity:0;animation:pt-pulse 2.6s var(--ease-out) infinite}
  .p-map.is-touring .p-map__pt i::after{animation:none}
}
@keyframes pt-pulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.p-map__pt i::after{animation:none!important}}
@media (max-width:760px){
  /* chi porta il rischio: i due blocchi uno sopra l'altro, sempre in proporzione (quattro fasi contro una); si riempiono dall'alto */
  .p-split{grid-template-rows:auto auto}
  .p-split__part--forest{min-height:280px}
  .p-split__part--lime{min-height:0;gap:var(--s-3);padding-block:var(--s-5)}
  .p-split.pre .p-split__part{clip-path:inset(0 0 100% 0 round 24px)}
  .p-split.in .p-split__part{animation-name:split-fill-v}
  /* success fee: le etichette restano dentro il grafico */
  .p-fc__plot{height:clamp(220px,62vw,280px)}
}
@keyframes split-fill-v{from{clip-path:inset(0 0 100% 0 round 24px)}to{clip-path:inset(0 0 0 0 round 24px)}}
@media (max-width:420px){.p-map__pt--above:not(.p-map__pt--us) span{transform:translateX(-12px)}}
/* linea del tempo sul telefono: la stessa tabella girata in verticale. Le fasi diventano righe, le due strade colonne,
   ogni voce una barra verticale sulle fasi in cui vale (lo span arriva da --span nella pagina) */
@media (max-width:860px){
  .track{grid-template-columns:minmax(0,1fr) minmax(84px,26%) minmax(84px,26%);column-gap:8px;row-gap:0}
  .track .track__head,.track .track__row{display:contents}
  .track .track__head span{display:flex;align-items:center;grid-column:1 / -1;min-height:50px;padding:0;border-bottom:0;border-top:1px solid var(--hairline);font-size:var(--t-small);color:var(--ink-soft)}
  .track .track__head span:first-child{grid-row:1;border-top:0;min-height:0}
  .track .track__head span:nth-child(2){grid-row:2}.track .track__head span:nth-child(3){grid-row:3}.track .track__head span:nth-child(4){grid-row:4}
  .track .track__head span:nth-child(5){grid-row:5}.track .track__head span:nth-child(6){grid-row:6}.track .track__head span:nth-child(7){grid-row:7;border-bottom:1px solid var(--hairline)}
  .track .track__name{grid-row:1;align-self:end;padding:0 0 var(--s-3);font-size:var(--t-small);line-height:1.3;text-wrap:balance}
  .track .track__row:nth-child(2) > .track__name{grid-column:2!important}
  .track .track__row:nth-child(3) > .track__name{grid-column:3!important}
  .track .track__row:nth-child(2) > .track__bar{grid-column:2!important}
  .track .track__row:nth-child(3) > .track__bar{grid-column:3!important}
  .track .track__row > .track__bar{position:relative;z-index:1;grid-row:var(--span);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--s-3);margin:6px 0!important;padding:var(--s-3);font-size:.8125rem;line-height:1.3;white-space:normal}
  .track .track__bar[data-span]::before{content:none}
  .track__bar--end::after{margin:0}
  .track.pre .track__bar{clip-path:inset(0 0 100% 0 round 12px)}
  .track.in .track__bar{animation-name:track-fill-v}
}
@keyframes track-fill-v{from{clip-path:inset(0 0 100% 0 round 12px)}to{clip-path:inset(0 0 0 0 round 12px)}}
/* metodo sul telefono: linea verticale disegnata da components.js (p-flow__vsvg), testi a destra della linea, /loop e /breakout affiancati in fondo */
.p-flow__vsvg{display:none}
@media (max-width:760px){
  .p-flow__plot{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4);padding-left:0;border-left:0}
  .p-flow__vsvg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .p-flow .p-flow__label{grid-column:1 / -1;padding:0 0 var(--s-6) 32px;font-size:1.125rem}
  .p-flow .p-flow__end{grid-row:auto;margin-top:72px;padding-left:24px;justify-items:start}
  .p-flow__end--b{grid-column:2}
  .p-flow__end > span{font-size:clamp(1.625rem,7vw,2rem)}
  .p-flow__node--end{fill:var(--forest)}
  .p-flow.pre .p-flow__vsvg{clip-path:inset(-20px -20px 100% -20px)}
  .p-flow.in .p-flow__vsvg{animation:flow-draw-v 1.6s var(--ease-reveal) both}
}
@keyframes flow-draw-v{from{clip-path:inset(-20px -20px 100% -20px)}to{clip-path:inset(-20px -20px -20px -20px)}}
@media (prefers-reduced-motion:reduce){.p-flow.pre .p-flow__vsvg{clip-path:none}.p-flow.in .p-flow__vsvg{animation:none}}
@media (max-width:760px){
  /* frasi sotto i titoli: su una colonna righe piene (il bilanciamento le restringeva), i titoli restano bilanciati */
  .s-points p,.s-cards p,.p-duo p,.s-bento p,.t3__desc{text-wrap:pretty}
}
@media (max-width:560px){
  /* cosa si acquista: voci brevi, due per riga come una griglia di dati */
  .s-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-4)}
  .s-bento h3,.s-bento__big h3{font-size:1.25rem}
  .s-bento p,.s-bento__big p{font-size:var(--t-small)}
}

/* ===== schede dei mockup: testata con titolo (e legenda), disegno, riga che dice cosa mostra ===== */
.mk{margin:0;display:flex;flex-direction:column;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(16,38,27,.04),0 28px 56px -40px rgba(16,38,27,.35);overflow:hidden}
.mk__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin:0;padding:16px 24px;border-bottom:1px solid var(--hairline)}
.mk__title{font-size:var(--t-small);font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.mk__title .m-slash{color:var(--forest)}
.mk__meta{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:500;color:var(--ink-soft)}
.mk__meta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line)}
.mk__meta--on::before{background:var(--lime);box-shadow:0 0 0 3px rgba(200,242,90,.35);animation:mk-pulse 2.4s ease-in-out infinite}
.mk__meta--off::before{background:var(--ink-soft)}
@keyframes mk-pulse{50%{box-shadow:0 0 0 6px rgba(200,242,90,.12)}}
.mk__legend{display:flex;flex-wrap:wrap;gap:6px 16px}
.mk__key{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:500;color:var(--ink-soft)}
.mk__key::before{content:"";flex:none}
.mk__key--dash::before{width:18px;border-top:1.5px dashed var(--ink-soft)}
.mk__key--line::before{width:18px;border-top:2px solid var(--forest)}
.mk__key--lime::before{width:14px;height:10px;border-radius:3px;background:var(--lime)}
.mk__body{flex:1;padding:clamp(24px,3vw,40px)}
.mk__note,.mk__head{max-width:none}
.mk__note{margin:0;padding:14px 24px;border-top:1px solid var(--hairline);font-size:var(--t-small);line-height:1.45;color:var(--ink-soft);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.mk__meta--on::before{animation:none}}
@media (max-width:560px){.mk__head,.mk__note{padding-inline:18px}.mk__body{padding:22px 18px}}
/* dentro le schede: la mappa porta la sua lettura a fianco, la legenda degli assi è in testata */
.mk .p-map{gap:var(--s-6) clamp(28px,4vw,64px)}
.mk .p-map__plot{margin:30px 0 30px}
.mk .p-flow{padding-block:56px 48px}
.mk .p-venn__stage{width:min(100%,640px)}

/* ===== dettagli delle schede ===== */
.mk__title{display:inline-flex;align-items:center;gap:10px}
.mk__title::before{content:"/";display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--forest);color:var(--lime);font-size:.8125rem;font-weight:700;line-height:1}
.mk__body{position:relative;background-image:radial-gradient(circle,rgba(16,38,27,.075) 1px,transparent 1.3px);background-size:18px 18px;background-position:9px 9px}
.mk__note{display:flex;align-items:baseline;gap:10px}
.mk__note::before{content:"i";flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink-soft);font-size:.6875rem;font-weight:700;font-style:italic;color:var(--ink-soft);transform:translateY(2px)}
/* pillole: etichette dentro i disegni */
.lp-proj__stop em,.lp-ring__lab,.p-map__pt span,.p-gate__end span,.lp-proj__paper{font-style:normal;display:inline-block;padding:4px 11px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);line-height:1.2}
.lp-proj__stop--end em{background:var(--forest);color:var(--mist);box-shadow:none}
.lp-proj__paper{border:0;box-shadow:inset 0 0 0 1px var(--line);background:transparent;max-width:13ch;white-space:normal;border-radius:10px;padding:6px 11px;text-align:left;color:var(--ink-soft);background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(16,38,27,.04) 5px 6px)}
@keyframes lp-lab{0%,12%{background:var(--lime);color:var(--forest);box-shadow:none}20%,100%{background:var(--surface);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line)}}
.p-map__pt span{padding:3px 10px}
.p-map__pt.is-on span{background:var(--forest);color:var(--mist);box-shadow:none}
/* anello: tacche da quadrante e scia Lime dietro il punto */
.lp-ring::before{content:"";position:absolute;inset:9%;border-radius:50%;background:repeating-conic-gradient(rgba(16,38,27,.22) 0 .6deg,transparent .6deg 7.5deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 7px))}
.lp-ring__orbit::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 270deg,transparent 0deg,rgba(200,242,90,.95) 90deg,transparent 90deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
/* success fee: griglia, verifiche trimestrali, obiettivo raggiunto */
.p-fc__plot{background-image:linear-gradient(to bottom,rgba(16,38,27,.06) 1px,transparent 1px);background-size:100% 25%}
.p-fc__area{fill:url(#fc-grad)}
.p-fc__reached{position:absolute;transform:translate(-50%,calc(-100% - 22px));padding:4px 10px;border-radius:var(--r-pill);background:var(--forest);color:var(--mist);font-size:.75rem;font-weight:600;white-space:nowrap;transition:opacity .5s var(--ease-out) 1.3s}
.p-fc__reached::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:var(--forest);transform:rotate(45deg);border-radius:1px}
.p-fc.pre:not(.in) .p-fc__reached{opacity:0}
.p-fc__reviews{position:relative;height:30px;margin-top:-1px}
.p-fc__reviews i{position:absolute;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:2px;background:var(--canvas);box-shadow:0 0 0 1.5px var(--forest);transform:translateY(-4.5px) rotate(45deg)}
.p-fc__reviews span{position:absolute;right:0;top:12px;font-size:.75rem;font-weight:500;color:var(--ink-soft)}
/* rischio: la fila delle fasi sopra i blocchi */
.p-split-wrap{display:grid;gap:10px}
.p-split__phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr);gap:8px}
.p-split__phases li{display:grid;gap:2px;padding:8px 10px 0;border-top:2px solid var(--forest);font-size:.75rem;font-weight:500;line-height:1.25;color:var(--ink-soft)}
.p-split__phases li:last-child{border-top-color:var(--lime);color:var(--ink)}
.p-split__phases b{font-weight:600;color:var(--ink)}
@media (max-width:760px){.p-split__phases{display:none}}
/* cerchi: chi porta cosa */
.p-venn__c span small{display:block;margin-bottom:6px;font-size:.6875rem;font-weight:600;letter-spacing:.01em;color:var(--ink-soft)}
.p-venn__c{background:radial-gradient(circle at 50% 50%,transparent 62%,rgba(16,38,27,.025) 100%)}
.p-venn__c::after{content:"";position:absolute;inset:7%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(16,38,27,.1);border:0;-webkit-mask:linear-gradient(#000,#000);}
/* muro: mattoni con un filo di luce */
.p-gate__wall li{box-shadow:inset 0 1px 0 rgba(241,243,234,.14),0 6px 14px -10px rgba(16,38,27,.6)}
/* metodo: numero dei principi */
.p-flow__label{counter-increment:fl}
.p-flow__plot{counter-reset:fl}
.p-flow__label::before{content:"0" counter(fl);display:block;margin-bottom:4px;font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.mk__title:has(.m-slash)::before{content:none}
.mk__title:has(.m-slash){gap:0}
@media (max-width:560px){.p-fc__reached{display:none}}
.mk__key--soft::before{width:16px;height:10px;border-radius:3px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.mk__key--dark::before{width:16px;height:10px;border-radius:3px;background:var(--forest)}

/* ===== schede dei mockup: simbolo, firma, luce ===== */
.mk{background:linear-gradient(180deg,#FBFCF8 0%,var(--surface) 140px)}
.mk__title::before{content:"";width:24px;height:24px;border-radius:7px;background:var(--forest) url("../brand/symbol-lime.svg") center/9px auto no-repeat;box-shadow:inset 0 1px 0 rgba(241,243,234,.14)}
.mk__title:has(.m-slash)::before{content:""}
.mk__title:has(.m-slash){gap:0}
.mk__title:has(.m-slash)::before{margin-right:10px}
.mk__note{align-items:center}
.mk__note::after{content:"";flex:none;width:78px;height:15px;margin-left:auto;background:url("../brand/logo-forest.svg") right center/contain no-repeat;opacity:.32}
@media (max-width:560px){.mk__note::after{width:62px}}
.lp-ring__mark{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:15px;background:var(--forest);box-shadow:0 12px 24px -12px rgba(16,38,27,.6),inset 0 1px 0 rgba(241,243,234,.14)}
.lp-ring__mark img{width:18px;height:auto}
/* schede che mostrano gli altri o un confronto: niente simbolo né firma Deploiable, un'icona neutra */
.mk--neutral .mk__title::before{background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A6054' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 12V7M8 12V4M13 12V9'/%3E%3C/svg%3E") center/12px auto no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
.mk:has(> .mk--neutral) .mk__note::after{content:none}

/* Domande frequenti: elenco a filetti sottili, ogni domanda si apre con un clic; il segno + ruota in × quando è aperta */
.faq{max-width:880px;border-top:1px solid var(--hairline)}
.faq__item{border-bottom:1px solid var(--hairline)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:68px;padding:var(--s-4) 0;cursor:pointer;list-style:none;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);background:linear-gradient(var(--ink),var(--ink)) center/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 10px no-repeat;transition:transform .35s var(--ease-out),background-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.faq__item[open] .faq__q::after{transform:rotate(45deg)}
.faq__q:focus-visible{outline:2px solid var(--forest);outline-offset:4px;border-radius:8px}
@media (hover:hover){.faq__q:hover::after{background-color:var(--lime);box-shadow:none}}
.faq__a p{max-width:64ch;margin:0;padding:0 var(--s-8) var(--s-5) 0;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.faq__q::after{transition:none}}

/* /loop, fasi: al centro del cerchio lo stesso primo piano dell'anello dell'apertura, ritagliato a disco */
.p-meter__ring--photo{left:9%;top:9%;width:82%;height:82%;border-radius:50%;object-fit:cover}

/* Lab: la struttura del banco di prova  disegnata come una scheda del sito, su fondo Lime tenue */
.lb-tree{width:100%;height:100%;display:grid;place-items:center;padding:clamp(18px,5%,40px);background:radial-gradient(120% 90% at 30% 20%,#E8F5C4 0%,#DCEFA8 100%)}
.lb-tree__card{width:min(100%,460px);border-radius:16px;background:#FBFCF8;box-shadow:0 1px 2px rgba(16,38,27,.06),0 24px 48px -28px rgba(16,38,27,.35);overflow:hidden}
.lb-tree__co{display:grid;gap:2px;margin:0;padding:14px 18px;border-bottom:1px solid var(--line);font-size:.8125rem;color:var(--ink-soft)}
.lb-tree__co b{font-size:.9375rem;font-weight:600;color:var(--ink)}
.lb-tree__rows{list-style:none;margin:0;padding:6px 0}
.lb-tree__rows li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 18px;font-size:.8125rem;line-height:1.3}
.lb-tree__f{font-weight:500;color:var(--ink);white-space:nowrap}
.lb-tree__f::before{content:"";display:inline-block;width:12px;height:9px;margin-right:9px;border-radius:2px 2px 2px 2px;background:var(--forest);vertical-align:0}
.lb-tree__d{color:var(--ink-soft);text-align:right}
.lb-tree__traps{display:flex;align-items:center;gap:9px;margin:0;padding:12px 18px;border-top:1px solid var(--line);font-size:.8125rem;font-weight:600;color:var(--ink);background:rgba(200,242,90,.28)}
.lb-tree__traps i{width:8px;height:8px;border-radius:50%;background:var(--forest);box-shadow:0 0 0 4px rgba(16,38,27,.10)}
@media (max-width:520px){.lb-tree__d{display:none}}
.lb-tree p{max-width:none}

/* muro di /breakout, stato fermo (movimento ridotto e agenti): la strada Lime è aperta da un capo all'altro e i cinque mattoni
   sono tappe raggiunte lungo la strada, così l'immagine dice quello che dice la nota */
.p-gate.is-still .p-gate__path{left:6px;right:6px;transform:none}
.p-gate.is-still .p-gate__line--in,.p-gate.is-still .p-gate__line--out{opacity:0}
.p-gate.is-still .p-gate__wall li{--off:0px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.p-gate.is-still .p-gate__wall li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--forest)}
.p-gate.is-still .p-gate__end--b{color:var(--ink);font-weight:600}
.p-gate.is-still .p-gate__end--b i{background:var(--lime);box-shadow:0 0 0 1.5px var(--forest),0 0 0 8px rgba(200,242,90,.35)}

/* grafico del compenso: l'ultimo rombo resta dentro il grafico; sul telefono niente legenda (le etichette sono già nel grafico),
   asse su una riga */
.p-fc__reviews i:last-of-type{margin-left:-9px}
@media (max-width:760px){
  .mk:has([data-fc]) .mk__legend{display:none}
  .p-fc__axis{font-size:.8125rem}
  .p-fc__axis span,.p-fc__axis span:last-child{white-space:nowrap;max-width:none}
  .p-fc__label--fee{font-size:.8125rem}
}

/* Giro di revisione dei mockup (9/11): niente blocchi pieni, niente testi sotto i 13px, titoli dentro le schede al massimo 24px */
/* chi finanzia ogni fase: due filetti sotto le fasi invece dei blocchi pieni */
.p-split__phases li{font-size:.8125rem}
.p-split{margin-top:var(--s-5)}
.p-split__part{min-height:0;padding:14px 0 0;border-radius:0;background:none!important;color:var(--ink)!important;gap:6px;justify-content:flex-start}
.p-split__part--forest{border-top:2px solid var(--forest)}
.p-split__part--lime{border-top:3px solid var(--lime)}
.p-split__part span{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.p-split__part small{font-size:.8125rem;opacity:1;color:var(--ink-soft)}
.p-split.pre .p-split__part{clip-path:inset(0 100% 0 0)}
@media (max-width:760px){
  .p-split__phases{display:grid;grid-template-columns:1fr;gap:0}
  .p-split__phases li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
  .p-split__phases li:last-child{border-top:3px solid var(--lime)}
  .p-split{grid-template-columns:1fr 1fr;gap:var(--s-4)}
}
/* testi piccoli dentro gli schemi: minimo 13px */
.p-venn__c span small{font-size:.8125rem}
/* titoli dentro le schede: al massimo 24px */
.p-map__card h3{font-size:clamp(1.25rem,1.05rem + .5vw,1.5rem);letter-spacing:-.025em;line-height:1.15}
.p-flow__end > span{font-size:1.5rem;letter-spacing:-.03em}
@media (max-width:760px){.p-flow__end > span{font-size:1.375rem}}
/* "The promised value remains on paper": a sinistra, leggibile */
.lp-proj__paper{text-align:left;max-width:20ch;color:var(--ink-soft);background-image:none}
/* testata della scheda di Company: sul telefono la legenda ripete le intestazioni delle colonne */
@media (max-width:760px){.mk:has(.track) .mk__legend{display:none}}
.p-split .p-split__part,.p-split.pre .p-split__part,.p-split.in .p-split__part{clip-path:none;animation:none}
.p-split{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr);gap:8px}
.p-split__part--forest{grid-column:1 / 5}
.p-split__part--lime{grid-column:5}
.p-split__part{opacity:1;transition:opacity .6s var(--ease-out)}
.p-split.pre:not(.in) .p-split__part{opacity:0}
.p-split.in .p-split__part--lime{transition-delay:.3s}
@media (max-width:760px){.p-split{grid-template-columns:1fr 1fr;gap:var(--s-4)}.p-split__part--forest{grid-column:1}.p-split__part--lime{grid-column:2}}

/* contrasto: la barra di /loop e /breakout su fondo chiaro dentro le schede in Forest (la Lime resta sui fondi scuri) */
.p-map__card .m-slash,.p-flow__end .m-slash,.cf-card__name .m-slash{color:var(--forest)}
.lp-proj__paper{color:var(--ink-soft);opacity:1}
/* telefono stretto: le pillole della linea del progetto non si toccano */
@media (max-width:420px){.lp-proj__stop em{font-size:.8125rem;padding-inline:8px}}

/* ===== Sistema unico delle schede (analisi del 9/11) =====
   testo: 13 etichette e assi, 15 testo e note, 17 voci dei diagrammi, 20 titoli dentro una scheda; niente 12px.
   Lime solo per "attivo o raggiunto" e mai come superficie grande; niente barre Forest piene; numeri tabellari. */
.p-fc__reached,.p-fc__reviews span,.p-fc__reviews{font-size:.8125rem}
.p-fc__axis{margin-top:8px}
.p-map__card h3{font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.p-flow__end > span{font-size:1.25rem;letter-spacing:-.02em}
@media (max-width:760px){.p-flow__end > span{font-size:1.25rem}}
.p-split__phases li{padding:8px 0 0;font-variant-numeric:tabular-nums}
.p-split__phases li:last-child{border-top-width:2px}
.p-split__part--lime{border-top-width:2px}
.p-split__phases b{display:inline-block;min-width:2ch}
.p-venn__lens i{background:rgba(200,242,90,.40)}
.p-venn__c::after{content:none!important}
.track__bar--forest{background:rgba(16,38,27,.05);box-shadow:inset 0 0 0 1.5px var(--forest);color:var(--ink)}
.lb-tree,.lb-item__media--tree .lb-tree{background:var(--surface)}
.lb-tree__traps{background:rgba(200,242,90,.18)}
/* telefono stretto: le etichette delle tre strade restano dentro la scheda */
@media (max-width:420px){.p-map__pt span{font-size:.8125rem;padding-inline:8px}}

/* Lab, immagini dei sistemi (9/11): un disegno per sistema, in movimento solo con .is-play; lo stato di base è quello finale */
.ls{margin:0;width:100%;height:100%;display:block;background:var(--surface)}
.ls svg{display:block;width:100%;height:100%;font-family:var(--font)}
.ls text{font-family:var(--font)}
.ls--bench,.ls--signals{background:var(--forest)}
.ls-loop{animation-iteration-count:infinite;animation-play-state:paused}

/* 1. mappa */
.lsm-lane{fill:#EDF0E5}
.lsm-head{fill:var(--forest)}
.lsm-ht{fill:#fff;font-size:16px;font-weight:500}
.lsm-c path,.lsm-hand path{fill:none;stroke-linejoin:round}
.lsm-c path{stroke:var(--forest);stroke-width:1.6}
.lsm-c--today{opacity:0}
.lsm-hand path{stroke:var(--lime);stroke-width:7;opacity:.6}
.lsm-hand{opacity:1}
.lsm-box rect{fill:#fff;stroke:rgba(16,38,27,.25);stroke-width:1.2}
.lsm-box text{font-size:15.5px;font-weight:500;fill:var(--forest)}
.lsm-mv{transform:translateX(190px)}
.lsm-mv rect{fill:var(--forest);stroke:var(--forest)}
.lsm-mv text{fill:#fff}
.lsm-state rect{fill:var(--forest)}
.lsm-s{font-size:16px;font-weight:500;fill:#fff}
.lsm-s--today{opacity:0}
.ls--map.is-play .lsm-mv{animation:lsm-mv 8s var(--ease-out) infinite}
.ls--map.is-play .lsm-mv--2{animation-delay:.15s}
.ls--map.is-play .lsm-mv rect{animation:lsm-fill 8s infinite}
.ls--map.is-play .lsm-mv text{animation:lsm-ink 8s infinite}
.ls--map.is-play .lsm-mv--2 rect,.ls--map.is-play .lsm-mv--2 text{animation-delay:.15s}
.ls--map.is-play .lsm-c--today,.ls--map.is-play .lsm-s--today{animation:lsm-in 8s infinite}
.ls--map.is-play .lsm-c--auto,.ls--map.is-play .lsm-s--auto,.ls--map.is-play .lsm-hand{animation:lsm-out 8s infinite}
@keyframes lsm-mv{0%,38%{transform:translateX(0)}50%,92%{transform:translateX(190px)}100%{transform:translateX(0)}}
@keyframes lsm-fill{0%,40%{fill:#fff;stroke:rgba(16,38,27,.25)}50%,92%{fill:var(--forest);stroke:var(--forest)}100%{fill:#fff;stroke:rgba(16,38,27,.25)}}
@keyframes lsm-ink{0%,40%{fill:var(--forest)}50%,92%{fill:#fff}100%{fill:var(--forest)}}
@keyframes lsm-in{0%,38%{opacity:1}46%,94%{opacity:0}100%{opacity:1}}
@keyframes lsm-out{0%,38%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}

/* 2. banco di prova */
.lsb-bg{fill:var(--forest)}
.lsb-t{font-size:30px;font-weight:600;letter-spacing:-.02em;fill:#fff}
.lsb-sub{font-size:15px;fill:var(--sage)}
.lsb-g{font-size:15px;fill:#DCE3D6}
.lsb-d{fill:var(--lime)}
.lsb-d.is-miss{fill:none;stroke:var(--sage);stroke-width:1.5}
.lsb-f rect{fill:var(--pine);stroke:#2E4A3B}
.lsb-ft{font-size:15px;font-weight:600;fill:#fff}
.lsb-fs{font-size:13px;fill:var(--sage)}
.lsb-f:nth-of-type(n) rect{}
.ls--bench.is-play .lsb-d:not(.is-miss){animation:lsb-d 9s infinite;animation-delay:calc(var(--k) * .22s)}
.ls--bench.is-play .lsb-f{animation:lsb-f 9s infinite;animation-delay:calc(.8s + var(--i) * 1.1s)}
@keyframes lsb-d{0%{fill:transparent;stroke:var(--sage);stroke-width:1.5}4%,88%{fill:var(--lime);stroke:transparent}100%{fill:transparent;stroke:var(--sage)}}
@keyframes lsb-f{0%{opacity:0;transform:translateY(8px)}6%,80%{opacity:1;transform:none}90%,100%{opacity:0}}

/* 3. sola lettura */
.lsr-col{font-size:15px;font-weight:500;fill:var(--ink-soft)}
.lsr-p{fill:none;stroke:rgba(16,38,27,.22);stroke-width:2}
.lsr-tile rect{fill:#fff;stroke:rgba(16,38,27,.22);stroke-width:1.2}
.lsr-tile text{font-size:16px;font-weight:500;fill:var(--forest)}
.lsr-tile.is-dash rect{fill:var(--forest);stroke:var(--forest)}
.lsr-tile.is-dash text{fill:#fff}
.lsr-dot{fill:var(--lime);stroke:var(--forest);stroke-width:1.5}
.lsr-bad{fill:#fff;stroke:var(--forest);stroke-width:2}
.ls--bridge:not(.is-play) .lsr-dot,.ls--bridge:not(.is-play) .lsr-bad{display:none}
.lsr-lock > circle:not(.lsr-halo){fill:var(--forest)}
.lsr-halo{fill:var(--lime);opacity:.35}
.lsr-shackle{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round}
.lsr-body{fill:var(--lime)}
.lsr-ro{font-size:17px;font-weight:600;fill:var(--forest)}
.lsr-blocked rect{fill:var(--lime)}
.lsr-blocked text{font-size:14px;font-weight:600;fill:var(--forest)}
.ls--bridge.is-play .lsr-blocked{animation:lsr-bl 5.2s 1s infinite both}
.ls--bridge.is-play .lsr-halo{transform-origin:300px 204px;animation:lsr-halo 5.2s 1s infinite both}
@keyframes lsr-bl{0%,32%{opacity:0;transform:translateY(4px)}38%,70%{opacity:1;transform:none}80%,100%{opacity:0}}
@keyframes lsr-halo{0%,32%{transform:scale(1);opacity:.35}38%{transform:scale(1.35);opacity:.6}55%,100%{transform:scale(1);opacity:.35}}

/* 4. segnali di domanda */
.lsg-bg{fill:var(--forest)}
.lsg-sub{font-size:15px;fill:var(--sage)}
.lsg-n{font-size:30px;font-weight:600;letter-spacing:-.02em;fill:#fff;font-variant-numeric:tabular-nums}
.lsg-l{font-size:16px;fill:#DCE3D6}
.lsg-l--end{fill:#fff;font-weight:500}
.lsg-bar--a{fill:#45604F}
.lsg-bar--b{fill:var(--sage)}
.lsg-bar--x{fill:none;stroke:var(--sage);stroke-width:1.5;stroke-dasharray:4 4}
.lsg-bar--c{fill:var(--lime)}
.lsg-x{font-size:13px;fill:var(--sage)}
.lsg-bar{transform-box:fill-box;transform-origin:left center}
.ls--signals.is-play .lsg-r{animation:lsg-r 9s infinite;animation-delay:calc(var(--i) * .9s)}
.ls--signals.is-play .lsg-bar{animation:lsg-bar 9s var(--ease-out) infinite;animation-delay:calc(var(--i) * .9s)}
@keyframes lsg-r{0%{opacity:.15}6%,88%{opacity:1}100%{opacity:.15}}
@keyframes lsg-bar{0%{transform:scaleX(0)}10%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* 5. Deploiable OS */
.lso-col{fill:#EDF0E5}
.lso-col.is-gate{fill:#E4ECCF;stroke:var(--forest);stroke-width:1.2;stroke-dasharray:5 4}
.lso-h{font-size:15px;font-weight:500;fill:var(--ink-soft)}
.lso-card rect{fill:#fff;stroke:rgba(16,38,27,.2);stroke-width:1.2}
.lso-ct{font-size:15px;font-weight:600;fill:var(--forest)}
.lso-cs{font-size:13px;fill:var(--ink-soft)}
.lso-card--mv rect{stroke:var(--forest);stroke-width:1.6}
.lso-mv{transform:translateX(146px)}
.lso-ok rect{fill:var(--lime);stroke:var(--forest);stroke-width:1.2}
.lso-ok text{font-size:13.5px;font-weight:600;fill:var(--forest)}
.lso-ok{transform-box:fill-box;transform-origin:center}
.lso-cursor{fill:var(--forest);stroke:#fff;stroke-width:1.2}
.lso-cap{font-size:17px;font-weight:500;fill:var(--forest)}
.ls--os.is-play .lso-mv{animation:lso-mv 9s var(--ease-out) infinite}
.ls--os.is-play .lso-ok{animation:lso-ok 9s infinite}
.ls--os.is-play .lso-cursor{animation:lso-cur 9s var(--ease-out) infinite}
@keyframes lso-mv{0%,10%{transform:translateX(0);opacity:1}20%,52%{transform:translateX(146px)}62%,70%{transform:translateX(292px)}80%,90%{transform:translateX(438px);opacity:1}96%{opacity:0}100%{transform:translateX(0);opacity:0}}
@keyframes lso-ok{0%,22%{opacity:0;transform:scale(.9)}26%,44%{opacity:1;transform:scale(1)}46%{transform:scale(.92)}48%{transform:scale(1);opacity:1}54%,100%{opacity:0}}
@keyframes lso-cur{0%,26%{opacity:0;transform:translate(330px,240px)}30%{opacity:1}40%,46%{opacity:1;transform:translate(259px,169px)}47%{transform:translate(259px,169px) scale(.9)}50%{opacity:1;transform:translate(259px,169px)}56%,100%{opacity:0;transform:translate(259px,169px)}}

/* 6. tour e attività */
.lsp-ch rect{fill:#fff;stroke:rgba(16,38,27,.22);stroke-width:1.2}
.lsp-ch text{font-size:11.5px;font-weight:500;fill:var(--forest)}
.lsp-l{fill:none;stroke:rgba(16,38,27,.22);stroke-width:1.5}
.lsp-dot{fill:var(--lime);stroke:var(--forest);stroke-width:1.2}
.ls--platform:not(.is-play) .lsp-dot{display:none}
.lsp-hub > rect{fill:var(--forest)}
.lsp-hub text{font-size:13.5px;font-weight:500;fill:#fff}
.lsp-lock{fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round}
.lsp-lockb{fill:var(--lime)}
.lsp-panel > rect{fill:#fff;stroke:rgba(16,38,27,.14);stroke-width:1.2}
.lsp-pt{font-size:16px;font-weight:600;fill:var(--forest);letter-spacing:-.01em}
.lsp-th text{font-size:12.5px;fill:var(--ink-soft);font-weight:500}
.lsp-rule{stroke:var(--line);stroke-width:1}
.lsp-t{font-size:14.5px;font-weight:500;fill:var(--forest)}
.lsp-d{font-size:14px;fill:var(--ink-soft);font-variant-numeric:tabular-nums}
.lsp-st text{font-size:12px;font-weight:600}
.lsp-st--full rect{fill:var(--forest)}.lsp-st--full text{fill:#fff}
.lsp-st--almost rect{fill:#E4ECCF}.lsp-st--almost text{fill:var(--forest)}
.lsp-st--open rect{fill:#fff;stroke:rgba(16,38,27,.25)}.lsp-st--open text{fill:var(--ink-soft)}
.lsp-st--check rect{fill:var(--lime);stroke:var(--forest);stroke-width:1}.lsp-st--check text{fill:var(--forest)}
.ls--platform.is-play .lsp-r{animation:lsp-r 8s infinite;animation-delay:calc(.6s + var(--i) * .35s)}
.ls--platform.is-play .lsp-st--check rect{animation:lsp-pulse 8s infinite;animation-delay:2.4s;transform-box:fill-box;transform-origin:center}
@keyframes lsp-r{0%{opacity:0;transform:translateY(6px)}6%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lsp-pulse{0%,20%{transform:scale(1)}24%{transform:scale(1.08)}28%,100%{transform:scale(1)}}

/* pannelli dei mockup in HTML (Lab e pagine di dettaglio) */
.tx{display:grid;gap:12px;align-content:start;width:100%;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(16,38,27,.08),0 18px 36px -26px rgba(16,38,27,.35);font-size:.8125rem;line-height:1.35;color:var(--ink);text-align:left}
.tx--wide{padding:22px 24px;gap:16px;font-size:.875rem}
.tx__h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tx__h b{font-size:1.0625em;font-weight:600;letter-spacing:-.01em}
.tx__tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:.8461em;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.tx-t{width:100%;border-collapse:collapse}
.tx-t th{padding:0 8px 7px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500;font-size:.9231em;color:var(--ink-soft)}
.tx-t td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.tx-t tr:last-child td{border-bottom:0}
.tx-t td:first-child{font-weight:500}
.tx-t th:last-child,.tx-t td:last-child{text-align:right;padding-right:0}
.tx-t--num td{font-variant-numeric:tabular-nums}
.tx-t--num td b{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--lime);font-weight:600}
.tx-t--ok .tx-tick{color:var(--forest);display:inline-block;padding:3px;border-radius:50%;background:var(--lime);width:20px;height:20px}
.tx-t--bars td:last-child{width:55%}
.tx-bar{display:block;height:8px;border-radius:99px;background:var(--forest);width:var(--w);margin-left:auto}
.tx-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tx-kpis div{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tx-kpis span{font-size:.9231em;color:var(--ink-soft)}
.tx-kpis b{font-size:1.7em;font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.tx-list{list-style:none;margin:0;padding:0;display:grid}
.tx-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.tx-list li:last-child{border-bottom:0}
.tx-list span{color:var(--ink-soft)}
.tx-list b{font-weight:600}
.tx-pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.9231em;font-weight:500;white-space:nowrap}
.tx-pill--soft{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft)}
.tx-pill--lime{background:var(--lime);color:var(--forest);font-weight:600}
.tx-pill--forest{background:var(--forest);color:#fff;font-weight:600}
.tx-soft{color:var(--ink-soft);font-weight:400}
.tx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding-top:12px;border-top:1px solid var(--line);color:var(--ink-soft)}
.tx-foot:has(> .tx-pill:only-child){justify-content:flex-end}
.tx-checks{list-style:none;margin:0;padding:0;display:grid}
.tx-checks li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.tx-checks li:last-child{border-bottom:0}
.tx-checks .tx-tick{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--lime);color:var(--forest)}
.tx-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:99px;background:var(--lime);color:var(--forest);font-weight:600;box-shadow:inset 0 0 0 1px rgba(16,38,27,.2)}
.tx-pill--mist{background:#E4ECCF;color:var(--forest)}
.tx-btn--ghost{background:#fff;color:var(--ink-soft)}
/* pannelli sul telefono: celle su una riga sola tranne la prima; nelle tabelle a quattro colonne si toglie la seconda */
@media (max-width:520px){
  .tx-t td:not(:first-child),.tx-t th{white-space:nowrap}
  .tx-t tr > :nth-child(2):nth-last-child(3){display:none}
  .tx--wide{padding:18px 18px}
  .tl-panel__mock,.au-view,.tx-stage{padding:14px}
}

/* Keep the wall and endpoint labels apart on narrow phones. */
@media (max-width:520px){
  .p-gate{--ww:112px}
  .p-gate__end{max-width:var(--s-8);font-size:.75rem}
  .p-gate__end span{padding:var(--s-1) 6px}
  .p-gate__wall li{padding-inline:var(--s-2);font-size:.75rem}
}