/* Pezzi comuni a tutte le pagine: intestazione di vetro, titolo e film in apertura, titoli a due toni, schede, chiusura, oggetti che galleggiano, comparse. Solo token di tokens.css, solo Satoshi. */
:root{--m-sec:clamp(88px,6vw + 64px,184px)}   /* spazio tra le sezioni: 88 px sul telefono, 150 px a 1440 */
body{background:var(--canvas)}
.light{font-weight:300}

/* intestazione: barra di vetro smerigliato color Mist che galleggia sopra il film (leggibile anche quando passano le schegge scure) */
.site-header{position:fixed;inset-inline:0;top:0;background:transparent;border:0;padding-top:12px;pointer-events:none}
.site-header__bar{pointer-events:auto;height:60px;width:calc(100% - 2 * var(--edge) + 40px);max-width:calc(var(--container) + 40px);margin-inline:auto;padding-inline:20px 8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--canvas) 74%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 10px 30px -12px rgba(16,38,27,.22)}
.site-menu{top:calc(100% + 8px)}
.site-header__bar{transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.site-header.is-menu .site-header__bar,.site-header.is-dark .site-header__bar{background:color-mix(in srgb,var(--forest) 72%,transparent);box-shadow:inset 0 0 0 1px rgba(241,243,234,.12),0 10px 30px -12px rgba(0,0,0,.45)}
.site-header.is-dark .site-nav__btn{color:var(--mist)}
.site-header.is-menu .menu-btn{color:var(--mist);border-color:var(--mist)}
.site-header.is-dark .menu-btn{color:var(--mist);border-color:var(--mist)}
@media (max-width:860px){.site-header{padding-top:8px}.site-header__bar{width:calc(100% - 16px);height:56px;padding-inline:12px 6px}}

/* 1. Titolo in alto, sotto la barra */
.m-intro{padding-block:clamp(120px,6vw + 48px,148px) 0}
.m-intro__title{font-size:clamp(3rem,6.6vw,7rem);line-height:.95;letter-spacing:-.05em;font-weight:700}
.m-intro__title span{display:block}
.m-intro__row{display:grid;grid-template-columns:minmax(0,1fr) fit-content(44%);align-items:end;gap:var(--s-5) var(--gutter);margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--hairline)}
.m-intro__lead{font-size:var(--t-lead);line-height:1.45;color:var(--ink-soft);max-width:56ch}
.m-intro__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;min-inline-size:0;gap:var(--s-3)}
/* Give introductions their full measure before actions squeeze them into a narrow column. */
@media (max-width:1100px){
  .m-intro__row{grid-template-columns:minmax(0,1fr)}
  .m-intro__actions{justify-content:flex-start}
}
@media (max-width:760px){
  .m-intro{padding-top:112px}
  .m-intro__title{font-size:clamp(2.6rem,12.4vw,4rem)}
  .m-intro__row{grid-template-columns:1fr}
}

/* 2. Film sotto il titolo: cornice arrotondata larga quanto il contenuto; scorrendo si allarga fino ai bordi dello schermo */
.m-film{padding-top:32px;padding-bottom:var(--film-grow,0px);overflow-x:clip}
.m-film__frame{position:relative;width:min(calc(100% - 2 * var(--edge)),var(--container));margin-inline:auto;aspect-ratio:16/9;border-radius:28px;overflow:hidden;isolation:isolate;background:#E9E8DC;transform-origin:50% 50%;will-change:transform}
.m-film__frame img,.m-film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-film__video{opacity:0;transition:opacity .8s var(--ease-out)}
.m-film__video.is-playing{opacity:1}
/* video solo decorativi: su iPhone in risparmio energetico niente pulsante di avvio sopra l'immagine fissa */
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
@media (max-width:760px){.m-film__frame{aspect-ratio:16/9;border-radius:18px}}

/* titoli in due toni */
.m-two-tone{font-size:clamp(2.25rem,1rem + 2.6vw,3.5rem);line-height:1.04;letter-spacing:-.035em;max-width:18ch}
.m-two-tone span{display:block}
.m-tone2{color:var(--ink-soft)}

/* schede grandi con video e testo affiancati */
.m-lines__stack{display:grid;gap:var(--s-5)}
/* due schede grandi: video e testo affiancati (la seconda a specchio); scorrendo la seconda sale sopra la prima, che resta ferma e arretra */
.m-feature{position:sticky;top:96px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,56px);padding:16px 0;border-radius:0;background:var(--forest);box-shadow:none;border-top:1px solid rgba(241,243,234,.12);color:var(--mist);text-decoration:none;transform-origin:50% 0;will-change:transform}
.m-feature + .m-feature{top:112px}
.m-feature--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.m-feature--rev .m-feature__media{order:2}
.m-feature__media{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/11;background:#E6E2D2}
.m-feature__video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-reveal)}
.m-feature__body{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6);padding:clamp(8px,1vw,16px) 0}
.m-feature__name{font-size:clamp(2.5rem,3.8vw,3.75rem);font-weight:700;line-height:1;letter-spacing:-.045em}
.m-slash{color:var(--lime)}
.m-feature__copy{display:grid;gap:var(--s-3)}
.m-feature__title{font-size:clamp(1.375rem,.9rem + .9vw,1.875rem);line-height:1.18;letter-spacing:-.02em;color:var(--mist)}
.m-feature__text{color:var(--sage);max-width:42ch;text-wrap:pretty}
.m-feature__go{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);font-weight:500;min-height:44px}
.m-feature__arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(241,243,234,.09);transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),transform var(--t-hover) var(--ease-out)}
@media (hover:hover){
  .m-feature:hover .m-feature__video{transform:scale(1.035)}
  .m-feature:hover .m-feature__arrow{background:var(--lime);color:var(--forest);transform:translateX(2px)}
}
.m-feature:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
@media (max-width:900px){
  .m-feature,.m-feature--rev{position:relative;top:auto;grid-template-columns:1fr}
  .m-feature--rev .m-feature__media{order:0}
  .m-feature__media{aspect-ratio:4/3}
}

.m-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor}

/* 5. Chiusura su Forest */
.m-close{position:relative;margin-top:var(--m-sec);isolation:isolate;overflow:hidden}
.m-close__media{position:absolute;top:50%;right:max(0px,calc((100% - var(--container)) / 2 - 24px));z-index:-1;width:min(50%,780px);aspect-ratio:4/3;transform:translateY(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.m-close__media video,.m-close__media img{display:block;width:100%;height:100%;object-fit:cover}
.m-close__inner{position:relative;display:grid;align-content:center;justify-items:start;gap:var(--s-5);min-height:clamp(560px,56.25vw,920px);padding-block:var(--m-sec)}
.m-close__title{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.035em;max-width:min(12ch,40vw)}
.m-close__text{font-size:var(--t-lead);color:var(--sage);max-width:min(40ch,40vw);margin-bottom:var(--s-3)}
@media (max-width:760px){
  .m-close__media{position:relative;top:auto;right:auto;width:100%;transform:none;z-index:auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent)}
  .m-close__inner{min-height:0;padding-block:var(--s-5) var(--m-sec)}
  .m-close__title,.m-close__text{max-width:none}
}
/* chiusura: un solo simbolo, quello di vetro (decisione dell'8/11); niente supergrafica */
main .m-close.on-forest::before{display:none}

/* Oggetti di vetro che galleggiano: lento su e giù con pochi gradi di rotazione; lo scorrimento li sposta appena (profondità) */
.m-float{display:block;width:100%;height:auto;animation:m-float 8s cubic-bezier(.45,0,.55,1) infinite alternate;translate:0 var(--py,0px);will-change:transform}
.m-float--slow{animation-duration:11s;animation-delay:-3s}
@keyframes m-float{from{transform:translateY(-10px) rotate(-1.2deg)}to{transform:translateY(10px) rotate(1.2deg)}}
@media (prefers-reduced-motion:reduce){.m-float{animation:none;translate:none}}

/* Righe dei titoli che salgono da una maschera */
.rv-on .ln-title.rv{opacity:1;transform:none}
.ln-title .ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.ln-title .ln-i{display:block;transform:translate3d(0,105%,0)}
.ln-title.in .ln-i{transform:none;transition:transform 1.05s var(--ease-reveal) calc(var(--ln-i,0) * 110ms)}
/* le righe salgono solo quando Satoshi è caricato: prima restano sotto la maschera, così il titolo non nasce in un altro carattere e non si ricompone */
html:not(.fonts-ok) .ln-title.in .ln-i{transform:translate3d(0,105%,0);transition:none}
.m-film__frame{transform-origin:50% 0;will-change:transform,border-radius}

/* ancore: la sezione raggiunta da "Our two lines" non finisce sotto la barra fissa */
main [id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* andate a capo: frasi senza parole sole sull'ultima riga, titoli bilanciati */
main p{text-wrap:pretty}
.m-thesis__title,.m-close__title,.m-feature__title,.m-why__list h3{text-wrap:balance}

/* passaggio tra le pagine: dissolvenza morbida (browser che lo supportano; con movimento ridotto niente animazione) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* menu del telefono: schermata intera Forest sotto la barra, la pagina non scorre */
@media (max-width:860px){
  .site-header__bar{position:relative;z-index:2}
  .site-menu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:104px 0 var(--s-7);background:var(--forest);pointer-events:auto;overflow-y:auto}
  .site-menu .container{display:flex;flex-direction:column;flex:1}
  .site-menu ul{margin-bottom:auto}
  .site-menu li a{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) 0;border-bottom:1px solid rgba(241,243,234,.12);font-size:clamp(2rem,9vw,2.75rem)}
  .site-menu li a::after{content:"";width:12px;height:12px;border-top:2px solid var(--lime);border-right:2px solid var(--lime);transform:rotate(45deg);margin-right:6px}
  .site-menu .btn{align-self:flex-start;margin-top:var(--s-7)}
  .site-menu__mail{margin-top:var(--s-5);color:var(--sage)}
  .site-menu__mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--mist)}
  html.menu-open,html.menu-open body{overflow:hidden}
}
@media (max-width:760px){.m-film__frame.p-film{aspect-ratio:16/9}}

/* Forme astratte: sempre un video 3D 4:3. Sul chiaro la forma galleggia libera e i bordi sfumano nella pagina;
   sul Forest sta dentro una finestra chiara, come nelle card */
.f-tile{position:relative;border-radius:28px;overflow:hidden;isolation:isolate;-webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%)}
.on-forest .f-tile{background:#F1F3EA;box-shadow:inset 0 0 0 1px rgba(241,243,234,.1);-webkit-mask-image:none;mask-image:none}
.f-tile video{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Sezioni numerate: etichetta con il numero e il nome, sempre uguale */
.sec-label{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);font-weight:500;color:var(--ink-soft)}
.sec-label::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--lime)}
.sec-label b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}

/* Indice della pagina, subito dopo l'apertura */

/* Sezione divisa: testo a sinistra, scheda della forma a destra */
.p-split2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7) var(--gutter);align-items:center}
.p-split2 .m-two-tone{margin-bottom:var(--s-6)}
@media (max-width:900px){.p-split2{grid-template-columns:1fr}.p-split2 > .f-tile{width:min(100%,480px);justify-self:center}}

/* fascia cinematografica a tutta larghezza: una sequenza del film che si gioca una volta e resta sull'ultima immagine */
.p-band{margin-top:var(--m-sec);background:#E9E8DC;overflow:hidden}
.p-band__video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:88svh;object-fit:cover}
@media (max-width:760px){.p-band__video{aspect-ratio:16/9;max-height:none}}

/* menu: tre tendine che si aprono al clic, una alla volta, sotto la barra di vetro */
.site-nav .site-nav__list{display:flex;align-items:center;gap:2px}
.site-nav__item{position:relative}
.site-nav .site-nav__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;margin:0;padding:0 10px;border:0;text-decoration:none;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);font:500 var(--t-small)/1 inherit;font-family:inherit;cursor:pointer;transition:background-color var(--t-hover) var(--ease-out),color .35s var(--ease-out)}
.site-nav__btn:hover,.site-nav__btn[aria-expanded="true"]{background:rgba(16,38,27,.06)}
.site-header.is-dark .site-nav__btn:hover,.site-header.is-dark .site-nav__btn[aria-expanded="true"]{background:rgba(241,243,234,.1)}
.site-nav__btn{position:relative}
.site-nav__btn.is-current::after{content:"";position:absolute;left:10px;right:26px;bottom:7px;height:1.5px;border-radius:1px;background:currentColor}
.site-nav__chev{transition:transform .25s var(--ease-out)}
.site-nav__btn[aria-expanded="true"] .site-nav__chev{transform:rotate(180deg)}
.site-nav__panel{position:absolute;top:calc(100% + 14px);left:-8px;z-index:3;display:grid;gap:2px;width:320px;padding:8px;border-radius:22px;background:#F6F7F1;box-shadow:inset 0 0 0 1px rgba(16,38,27,.07),0 1px 2px rgba(16,38,27,.06),0 24px 48px -20px rgba(16,38,27,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}
.site-nav__panel--wide{width:420px}
.site-nav__btn[aria-expanded="true"] + .site-nav__panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-out),transform .25s var(--ease-out),visibility 0s}
.site-header .site-nav__link{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:44px;margin:0;padding:12px 14px;border:0;border-radius:16px;color:var(--forest);text-decoration:none;transition:background-color var(--t-hover) var(--ease-out)}
.site-header .site-nav__link:hover,.site-header .site-nav__link:focus-visible{background:rgba(16,38,27,.05)}
.site-nav__thumb{flex:none;width:56px;height:56px;object-fit:contain;border-radius:12px;background:var(--mist);padding:6px}
.site-nav__text{display:grid;gap:3px}
.site-nav__name{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.site-nav__desc{font-size:.875rem;line-height:1.4;color:var(--ink-soft)}
.site-header.is-dark .site-nav__desc{color:#4A6054}
@media (prefers-reduced-motion:reduce){.site-nav__panel,.site-nav__chev{transition:none}}
/* menu del telefono: le stesse tre voci, raggruppate */
@media (max-width:860px){
  .site-menu__groups{display:grid;gap:var(--s-6);margin-bottom:auto}
  .site-menu__label{font-size:var(--t-small);font-weight:500;color:var(--sage);margin-bottom:var(--s-1)}
  .site-menu__group ul{margin:0}
  .site-menu .site-menu__group li a{padding:var(--s-3) 0;font-size:clamp(1.5rem,6.4vw,2rem)}
}
.site-nav a.site-nav__btn.is-current::after{right:10px}

/* ===== Telefono: stessa ricchezza del computer (regole solo sotto i 900 px, il computer non cambia) ===== */
a,button{-webkit-tap-highlight-color:transparent}
@media (max-width:900px){
  /* aree sicure: tacca, angoli arrotondati e barra in basso dell'iPhone */
  .container{padding-left:max(var(--edge),env(safe-area-inset-left));padding-right:max(var(--edge),env(safe-area-inset-right))}
  .site-footer{padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom))}
  /* due linee: la seconda scheda non scende sotto la sezione (lo spostamento serviva solo alla pila del computer) */
  .m-feature + .m-feature{top:auto}
  /* pila delle due schede anche sul telefono, quando una scheda sta tutta nello schermo (components.js mette is-stack) */
  .m-lines__stack.is-stack .m-feature{position:sticky;top:calc(max(8px,env(safe-area-inset-top)) + 68px)}
  .m-lines__stack.is-stack .m-feature + .m-feature{top:calc(max(8px,env(safe-area-inset-top)) + 80px)}
}
@media (max-width:760px){.m-feature__media{aspect-ratio:16/11}.m-feature__body{gap:var(--s-5)}.m-feature__go{margin-top:var(--s-2)}}
@media (max-width:860px){
  .site-header{padding-top:max(8px,env(safe-area-inset-top))}
  .site-header__bar{width:calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  /* pulsante del menu: le due linee diventano una X */
  .menu-btn__icon{border:0}
  .menu-btn__icon::before,.menu-btn__icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:top .3s var(--ease-out),transform .3s var(--ease-out)}
  .menu-btn__icon::before{top:0}
  .menu-btn__icon::after{top:calc(100% - 1.5px)}
  .menu-btn[aria-expanded="true"] .menu-btn__icon::before{top:calc(50% - .75px);transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] .menu-btn__icon::after{top:calc(50% - .75px);transform:rotate(-45deg)}
  /* menu a schermo intero: i due prodotti con la loro forma e la frase, come nella tendina del computer */
  .site-menu{padding:calc(max(8px,env(safe-area-inset-top)) + 88px) 0 calc(var(--s-7) + env(safe-area-inset-bottom))}
  .site-menu__groups{gap:var(--s-5)}
  .site-menu .site-menu__group li a.site-menu__product{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:var(--s-4);padding:var(--s-4) 0}
  .site-menu__thumb{width:64px;height:64px;object-fit:contain;padding:7px;border-radius:16px;background:var(--mist)}
  .site-menu__text{display:grid;gap:4px;min-width:0}
  .site-menu__name{font-size:clamp(1.5rem,6.4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.05}
  .site-menu__desc{font-size:var(--t-small);font-weight:400;letter-spacing:0;line-height:1.4;color:var(--sage);text-wrap:pretty}
  /* la pagina in cui si è: un punto al posto della freccia */
  .site-menu li a[aria-current="page"]::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--lime);transform:none;margin-right:8px}
  /* entrata: il fondo appare, le voci salgono una dopo l'altra */
  .site-menu:not([hidden]){animation:menu-in .28s var(--ease-out) both}
  .site-menu:not([hidden]) :is(.site-menu__label,.site-menu__group li,.container > .btn,.site-menu__mail){animation:menu-item .5s var(--ease-reveal) both}
  .site-menu:not([hidden]) .site-menu__group:first-child li:nth-child(1){animation-delay:50ms}
  .site-menu:not([hidden]) .site-menu__group:first-child li:nth-child(2){animation-delay:95ms}
  .site-menu:not([hidden]) .site-menu__group + .site-menu__group li:nth-child(1){animation-delay:140ms}
  .site-menu:not([hidden]) .site-menu__group + .site-menu__group li:nth-child(2){animation-delay:185ms}
  .site-menu:not([hidden]) .container > .btn{animation-delay:230ms}
  .site-menu:not([hidden]) .site-menu__mail{animation-delay:260ms}
  .site-menu li a{transition:opacity var(--t-hover) var(--ease-out)}
  .site-menu li a:active{opacity:.6}
}
@keyframes menu-in{from{opacity:0}}
@keyframes menu-item{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.site-menu:not([hidden]),.site-menu:not([hidden]) *{animation:none!important}.menu-btn__icon::before,.menu-btn__icon::after{transition:none}}
@media (max-width:760px){
  /* titoli di sezione: proporzionati allo schermo, mai urlati */
  .m-two-tone{font-size:clamp(1.875rem,8.2vw,2.25rem);line-height:1.06}
}

/* testo solo per i lettori di schermo */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Transizioni tra le pagine: la barra resta ferma; la scheda della home diventa il film d'apertura di /loop e /breakout */
.site-header__bar{view-transition-name:site-bar}
.m-feature[href="loop.html"] .m-feature__media,body[data-page="loop"] .m-film__frame{view-transition-name:film-loop}
.m-feature[href="breakout.html"] .m-feature__media,body[data-page="breakout"] .m-film__frame{view-transition-name:film-breakout}
::view-transition-group(film-loop),::view-transition-group(film-breakout){animation-duration:.75s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(film-loop),::view-transition-new(film-loop),::view-transition-old(film-breakout),::view-transition-new(film-breakout){height:100%;object-fit:cover;overflow:hidden}
::view-transition-group(site-bar){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}}
/* profondità al passaggio del puntatore (schede video della home, prove di Lab) */
[data-tilt]{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out);will-change:transform}
[data-tilt].is-tilting{transition:transform .12s linear}

/* ===== schede /loop e /breakout in home: pannelli scuri con dettagli ===== */
.m-feature{padding:14px;border-top:0;border-radius:30px;background:linear-gradient(160deg,#1E3D2D 0%,#152F22 45%,#10261B 100%);box-shadow:inset 0 0 0 1px rgba(241,243,234,.08),inset 0 1px 0 rgba(241,243,234,.10),0 30px 60px -36px rgba(0,0,0,.65)}
.m-lines__stack{display:grid;gap:var(--s-5)}
.m-feature__media{border-radius:20px;box-shadow:0 0 0 1px rgba(241,243,234,.10)}
.m-feature__badge{position:absolute;left:16px;top:16px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(16,38,27,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(241,243,234,.16)}
.m-feature__badge img{width:13px;height:auto}
.m-feature__body{padding:clamp(16px,2vw,32px) clamp(14px,2vw,30px) clamp(12px,1.4vw,22px)}
.m-feature__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid rgba(241,243,234,.10)}
.m-feature__n{font-size:.8125rem;font-weight:600;color:var(--sage);font-variant-numeric:tabular-nums}
.m-feature__who{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(241,243,234,.16);font-size:.8125rem;font-weight:500;color:var(--mist)}
.m-feature__who::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.m-feature__facts{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.m-feature__facts li{padding:5px 11px;border-radius:var(--r-pill);background:rgba(241,243,234,.06);box-shadow:inset 0 0 0 1px rgba(241,243,234,.10);font-size:.8125rem;font-weight:500;color:var(--mist)}
.m-feature__go{padding:6px 6px 6px 18px;border-radius:var(--r-pill);background:rgba(241,243,234,.06);box-shadow:inset 0 0 0 1px rgba(241,243,234,.12);align-self:flex-start;transition:background-color var(--t-hover) var(--ease-out)}
.m-feature__arrow{width:36px;height:36px;background:var(--lime);color:var(--forest)}
@media (hover:hover){.m-feature:hover .m-feature__go{background:rgba(241,243,234,.12)}.m-feature:hover .m-feature__arrow{transform:translateX(3px)}}
@media (max-width:900px){.m-feature{padding:10px;border-radius:24px}.m-feature__body{padding:18px 12px 12px}}
.m-feature__go{justify-self:start;align-self:start}
/* miniature fotografiche (la lastra rotta di /breakout): la foto riempie tutto il riquadro, senza bordi visibili */
.site-nav__thumb--photo,.site-menu__thumb--photo{object-fit:cover;padding:0}

/* frase che dice il significato di un diagramma: nascosta alla vista, letta da screen reader e agenti (va nel markdown) */
.sr-desc{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* evidenziatore: un tratto lime sotto le espressioni da ricordare, al massimo uno o due per pagina */
.hl,.m-two-tone .hl{display:inline;padding:0 .08em;color:var(--ink);background:linear-gradient(transparent 58%,rgba(200,242,90,.9) 58%,rgba(200,242,90,.9) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.on-forest .hl,.on-forest .m-two-tone .hl{background:none;color:var(--lime)}
.k{font-weight:600;color:var(--ink)}
.m-intro__title .hl{display:inline}
.on-forest .k{color:#fff}
/* card dei due prodotti: il titolo completa il nome ("/loop built for your business"), quindi gli sta subito sotto; il link va in fondo */
.m-feature__body{justify-content:flex-start;gap:0}
.m-feature__name{margin-bottom:var(--s-3)}
.m-feature__copy{flex:1;grid-template-rows:auto auto auto 1fr;align-content:start}
.m-feature__go{align-self:end}

.p-path-more{display:flex;justify-content:flex-start;margin-top:var(--s-5);padding-left:72px}