/* ============================================================================
   LoopSuite shared header + footer.

   Loaded LAST on every page so the chrome is identical whether the page runs
   the new dark stylesheet or the older style/ds/skin/theme stack. Everything
   is namespaced `ls-` and uses literal hex rather than custom properties, so
   it cannot collide with either stack.
   App tokens: canvas #171717 · surface #202020 · raised #292929 ·
   text #F3F4EF · muted #A7AAA1 · accent #C6FF34 (ink #171717).
   ========================================================================== */

.ls-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#C6FF34;color:#171717;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.ls-skip:focus{left:0}

/* ---------------- Header ---------------- */
.ls-hd{
  position:sticky;top:0;z-index:120;
  background:rgba(23,23,23,.88);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(243,244,239,.10);
  font-family:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.ls-hd *,.ls-ft *{box-sizing:border-box}
.ls-hd-in{
  max-width:1140px;margin-inline:auto;padding:0 20px;
  display:flex;align-items:center;gap:18px;height:64px;
}
.ls-logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.02em;color:#F3F4EF!important;text-decoration:none;flex:none}
.ls-logo svg{width:28px;height:28px;border-radius:8px;display:block;flex:none}
.ls-nav{display:none;align-items:center;gap:26px;margin-left:8px}
.ls-nav a{font-size:14.5px;color:#A7AAA1!important;text-decoration:none;font-weight:500;white-space:nowrap;transition:color .15s}
.ls-nav a:hover,.ls-nav a[aria-current="page"]{color:#F3F4EF!important}
.ls-hd-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.ls-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:#C6FF34;color:#171717!important;text-decoration:none;
  font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  padding:10px 18px;border:0;border-radius:10px;white-space:nowrap;
  transition:filter .2s ease,transform .2s ease;
}
.ls-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ls-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;cursor:pointer;
  background:rgba(243,244,239,.06);border:1px solid rgba(243,244,239,.14);color:#F3F4EF;
}
.ls-burger svg{width:20px;height:20px;display:block}
.ls-mobile{display:none;border-top:1px solid rgba(243,244,239,.10);background:#171717;padding:8px 20px 20px}
.ls-mobile.open{display:block}
.ls-mobile a{display:block;padding:14px 2px;font-size:16.5px;color:#F3F4EF!important;text-decoration:none;border-bottom:1px solid rgba(243,244,239,.08)}
.ls-mobile .ls-btn{display:flex;width:100%;margin-top:16px;padding:14px;font-size:16px;border-bottom:0}
@media (min-width:900px){
  .ls-nav{display:flex}
  .ls-burger{display:none}
  .ls-mobile{display:none!important}
}
@media (prefers-reduced-motion:reduce){.ls-btn:hover{transform:none}}

/* ---------------- Footer ---------------- */
.ls-ft{
  background:#171717;border-top:1px solid rgba(243,244,239,.10);
  padding:52px 0 34px;margin-top:0;
  font-family:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#A7AAA1;
}
.ls-ft-in{max-width:1140px;margin-inline:auto;padding:0 20px;display:grid;gap:34px}
.ls-ft-brand .ls-logo{margin-bottom:12px}
.ls-ft-brand p{margin:0;font-size:14px;color:#A7AAA1;line-height:1.55;max-width:34ch}
.ls-ft-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ls-ft-col h4{margin:0 0 12px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A8D84;font-weight:500}
.ls-ft-col a{display:block;padding:6px 0;font-size:14.5px;color:#A7AAA1!important;text-decoration:none}
.ls-ft-col a:hover{color:#F3F4EF!important}
.ls-ft-btm{
  max-width:1140px;margin:34px auto 0;padding:22px 20px 0;
  border-top:1px solid rgba(243,244,239,.10);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:13px;color:#8A8D84;
}
@media (min-width:760px){
  .ls-ft-in{grid-template-columns:1.3fr 2fr;gap:44px}
  .ls-ft-cols{grid-template-columns:repeat(3,1fr);gap:24px}
}