/* ─── AILevelUp shared footer component 2026-06-09 ───────────────────── */
.site-footer{
  border-top:1px solid var(--border,rgba(11,11,12,.09));
  padding-top:56px;
  position:relative;
  overflow:hidden;
  /* 2026-08-10: was var(--surface), which read as barely-different-from-page
     white now that every page (homepage, Micro SAP, blog, tools, 404) runs
     the same all-light theme — fine for cards, which get a border+shadow to
     read as distinct anyway, but too subtle for a full-bleed band with only
     a hairline border to set it apart. --paperDeep is theme.css's
     deliberately-more-visible step darker than --paper, added for exactly
     this case. (Previously index.html/micro-sap carried this as a
     page-scoped override because blog/tools were still dark at the time;
     now that everything is light, it belongs here instead — see git history
     for the older per-page override this replaced.) */
  background:var(--paperDeep,#EFEDE7);
  color:var(--text,rgba(11,11,12,.92));
}
.site-footer *{box-sizing:border-box;}
.site-footer__wordmark{
  display:block;
  font-family:'Sora',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:800;
  font-size:clamp(5rem,18vw,13rem);
  letter-spacing:-.06em;
  line-height:.9;
  color:rgba(11,11,12,.08);
  user-select:none;
  pointer-events:none;
  white-space:nowrap;
  width:100%;
  /* 2026-08-10: was `padding-left` calculated to line the text's left edge
     up with .site-footer__wrap's left edge — not actually centered, just
     coincidentally close to it while the wrap was wide. Narrowing the wrap
     (below) moved that left edge further right and exposed it as
     lopsided. Centering the text itself is the more honest fix — it stays
     correct regardless of the wrap's width, and clips evenly on both sides
     if the text is ever wider than the viewport instead of only clipping
     on the right. */
  text-align:center;
  overflow:hidden;
}
.site-footer__wrap{
  /* 2026-08-10: narrower than the site's main --max (1080px) on purpose.
     The brand block and contact list are both naturally narrow, so at the
     full site width `space-between` below was stranding them at opposite
     edges with a large empty gap between — this pulls them closer without
     changing the flex layout itself. */
  width:min(880px,calc(100% - 48px));
  margin:0 auto;
}
.site-footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:32px 0 40px;
  border-top:1px solid var(--border,rgba(11,11,12,.09));
  margin-top:16px;
}
.site-footer__logo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  color:var(--text,#0B0B0C);
  text-decoration:none;
  font-family:'Sora',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
}
.site-footer__logo svg{width:20px;height:20px;flex:0 0 auto;}
.site-footer__logo b{font-weight:800;}
.site-footer__tagline{
  font-family:'Sora',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-style:italic;
  font-size:.82rem;
  color:var(--text2,rgba(11,11,12,.62));
  margin:7px 0 0;
}
.site-footer__social{
  display:flex;
  gap:8px;
  margin-top:12px;
  justify-content:flex-start;
}
.site-footer__social a{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--surface,rgba(11,11,12,.045));
  border:1px solid var(--border,rgba(11,11,12,.09));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text2,rgba(11,11,12,.62));
  text-decoration:none;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.site-footer__social a:hover{
  border-color:rgba(11,11,12,.28);
  color:var(--text,#0B0B0C);
  background:var(--surfaceH,rgba(11,11,12,.08));
  transform:translateY(-1px);
}
.site-footer__meta{
  font-size:.78rem;
  font-weight:500;
  color:var(--text2,rgba(11,11,12,.62));
  line-height:1.9;
  text-align:right;
}
.site-footer__meta a{
  display:inline-block;
  padding:10px 6px;
  margin:-10px -6px;
  color:var(--text2,rgba(11,11,12,.62));
  text-decoration:none;
  transition:color .15s;
}
.site-footer__meta a:hover{color:var(--text,#0B0B0C);}
.site-footer__copy{margin-top:8px;}
@media(max-width:720px){
  .site-footer{padding-top:34px;}
  .site-footer__wrap{width:calc(100% - 32px);}
  .site-footer__inner{
    flex-direction:column;
    gap:16px;
    padding:24px 0 32px;
    align-items:center;
    text-align:center;
  }
  .site-footer__meta{text-align:center;font-size:.75rem;}
  .site-footer__social{justify-content:center;}
  .site-footer__tagline{text-align:center;}
  .site-footer__wordmark{font-size:clamp(3.2rem,14vw,5rem);}
}