/* generated by scripts/build-lista.mjs from site/components/footer/footer.css: edit the source */
/* Footer di nembo.app (D-109). Richiede .wrap con il margine laterale della pagina. */
/* Layout: white page stub above; the footer is a terracotta band: brand line + email on the left,
   three short link columns on the right, the nembo wordmark set huge and cut by the bottom edge. */

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* footer */
.ft{background:var(--band);color:var(--on-band);overflow:hidden;position:relative}
.ft .wrap{padding-block:88px 0}
.ft-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.ft-brand p{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.8vw,34px);line-height:1.2;margin:0 0 28px;max-width:20ch;text-wrap:balance}
.mail{display:inline-flex;align-items:center;gap:10px;color:var(--on-band);text-decoration:none;font-size:19px;font-weight:600;padding-bottom:6px;position:relative}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--on-band);transform:scaleX(.18);transform-origin:left;transition:transform .35s var(--ease)}
.mail:hover::after{transform:scaleX(1)}
.mail svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.mail:hover svg{transform:translate(3px,-3px)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cols h2{font-family:var(--display);font-size:20px;font-weight:500;color:var(--on-band);margin:0 0 14px}
.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cols a{color:var(--on-band);text-decoration:none;font-size:16px}
.cols a:hover{text-decoration:underline;text-underline-offset:4px}
.social a{display:inline-flex;align-items:center;gap:10px}
.social svg{width:18px;height:18px;flex:none}
.soon{font-size:14px;color:var(--on-band);margin-left:6px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:72px;font-size:14px;color:var(--on-band)}
.mark{display:block;width:100%;height:auto;margin-top:28px;margin-bottom:-4.2%}
.mark path{fill:url(#fade)}

/* entrance: content is visible by default; script opts in only when it can reveal it */
.js-anim .ft [data-in]{opacity:.001;transform:translateY(18px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js-anim .ft.in [data-in]{opacity:1;transform:none;filter:none}
.js-anim .ft .mark{transform:translateY(12%);transition:transform 1.4s var(--ease) .25s}
.js-anim .ft.in .mark{transform:none}

@media (max-width:860px){
  .ft-top{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:520px){
  .ft .wrap{padding-top:64px}
  .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:36px}
  .legal{margin-top:56px}
}