/* ============================================================
   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;
  align-items:start;
}
.footer .brand{display:flex; width:fit-content; align-items:center; gap:9px; text-decoration:none; height:30px}
.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:21px; line-height:1.1; color:var(--f-ink); letter-spacing:-.02em}
.f-brand p{font-size:15.5px; color:var(--f-muted); margin:14px 0 0; max-width:260px; line-height:1.65}
.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}
/* headings sit in a 30px box (= brand logo row) and center-align, so the top
   row (UpSheet + Product/Solutions/...) shares one clean baseline */
.f-col h4{font-family:'Poppins',sans-serif; font-size:18px; font-weight:700; color:var(--f-ink); letter-spacing:-.01em; margin:0 0 14px; display:flex; align-items:center; min-height:30px}
.f-col a, .f-col .f-soon, .f-col .f-cookie{display:block; font-size:15px; padding:6px 0; text-decoration:none}
.f-col a, .f-col .f-cookie{color:var(--f-muted); transition:color .15s ease}
.f-col a:hover, .f-col .f-cookie:hover{color:var(--f-ink)}
/* Cookie Preferences opens a panel rather than navigating, so it is a button.
   Strip the UA button styling so it reads as the link beside it. */
.f-col .f-cookie{background:none; border:0; padding-left:0; font:inherit; font-size:15px; text-align:left; cursor:pointer; width:100%}
/* 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:13.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:12.5px; color:var(--f-n400); max-width:var(--f-maxw); padding:14px clamp(20px,4vw,40px) 0; text-align:center; line-height:1.65}
@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}
}
/* Large screens / TVs: scale footer type up to match the pages */
@media(min-width:1600px){
  .footer .brand .nm{font-size:23px}
  .f-brand p{font-size:17px}
  .f-col h4{font-size:20px}
  .f-col a, .f-col .f-soon{font-size:16.5px}
  .f-bottom{font-size:14.5px}
  .f-legal{font-size:13.5px}
}
@media(min-width:2200px){
  .footer .brand .nm{font-size:26px}
  .f-brand p{font-size:19px}
  .f-col h4{font-size:22px}
  .f-col a, .f-col .f-soon{font-size:18.5px}
}

/* "(coming soon)" tag on footer items that have no page yet — lighter and
   smaller than the label so the row still scans as one item, not two. */
.f-col .f-soon em{display:block;font-style:normal;font-size:.78em;line-height:1.3;opacity:.7;white-space:nowrap}