/* ============================================================
   UpSheet — shared site footer styles (self-contained)
   Paired with js/site-footer.js. Colors are hard-scoped under
   .footer so the footer renders identically on every page,
   regardless of that page's own :root tokens.
   ============================================================ */
.footer{
  --f-ink:#1A2733; --f-muted:#5F6E7E; --f-n400:#94A3B4;
  --f-n100:#F1F5F9; --f-n200:#E6ECF2; --f-line:#E6ECF2; --f-bg:#F7F9FC;
  --f-maxw:1200px;
  background:var(--f-bg); color:var(--f-muted);
  border-top:1px solid var(--f-line);
  padding:clamp(48px,6vw,72px) 0 32px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.footer .wrap{
  max-width:var(--f-maxw); margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
  display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:32px;
}
.footer .brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.footer .brand-logo img{width:30px; height:30px; object-fit:contain; display:block}
.footer .brand .nm{font-family:'Poppins',sans-serif; font-weight:800; font-size:19px; color:var(--f-ink); letter-spacing:-.02em}
.f-brand p{font-size:13.5px; color:var(--f-muted); margin:14px 0 0; max-width:240px; line-height:1.6}
.f-mp{display:inline-block; margin-top:18px; line-height:0; transition:transform .2s ease}
.f-mp:hover{transform:translateY(-2px)}
.f-mp img{width:200px; height:auto; max-width:100%; display:block}
.f-col{display:flex; flex-direction:column}
.f-col h4{font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; color:var(--f-ink); letter-spacing:.03em; margin:0 0 14px}
.f-col a, .f-col .f-soon{display:block; font-size:13.5px; padding:5px 0; text-decoration:none}
.f-col a{color:var(--f-muted); transition:color .15s ease}
.f-col a:hover{color:var(--f-ink)}
/* page not built yet — visible but not clickable */
.f-col .f-soon{color:var(--f-n400); cursor:default}
.f-bottom{
  max-width:var(--f-maxw); margin:40px auto 0;
  padding:24px clamp(20px,4vw,40px) 0;
  border-top:1px solid var(--f-line);
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--f-n400);
}
.f-social{display:flex; gap:10px}
.f-social a{width:34px; height:34px; border-radius:9px; background:var(--f-n100); display:grid; place-items:center; color:var(--f-muted); transition:background .15s ease,color .15s ease}
.f-social a:hover{background:var(--f-n200); color:var(--f-ink)}
.f-social svg{width:16px; height:16px; fill:currentColor}
.f-legal{margin:14px auto 0; font-size:11.5px; color:var(--f-n400); max-width:var(--f-maxw); padding:14px clamp(20px,4vw,40px) 0; text-align:center; line-height:1.6}
@media(max-width:980px){
  .footer .wrap{grid-template-columns:1fr 1fr 1fr}
  .f-brand{grid-column:1 / -1}
}
@media(max-width:520px){
  .footer .wrap{grid-template-columns:1fr 1fr}
}