/* =====================================================================
   SmartPact — Global Shell
   Header + Footer styles. Loaded on every page.
   ===================================================================== */
:root{
  --sp-bg:        #000000;
  --sp-surface:   #0C0C0D;
  --sp-elevated:  #1A1A1D;
  --sp-line:      rgba(255,255,255,0.07);
  --sp-line-2:    rgba(255,255,255,0.12);
  --sp-line-3:    rgba(255,255,255,0.22);
  --sp-ink:       #FFFFFF;
  --sp-ink-2:     #B7B7BA;
  --sp-ink-3:     #76767B;
  --sp-ink-4:     #4A4A50;
  --sp-acid:      #D4FF3A;
  --sp-acid-2:    #B8E632;
  --sp-sans:      "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --sp-display:   "Geist", "Inter Tight", system-ui, sans-serif;
  --sp-mono:      "Geist", "Inter", system-ui, -apple-system, sans-serif;
}

/* Make body a flex column so footer sits below React app */
body.sp-shell{
  margin:0;
  background:var(--sp-bg) !important;
  color:var(--sp-ink);
  font-family:var(--sp-sans);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
body.sp-shell #root{ flex:1; }

/* hide shell on auth pages if needed — body[data-sp-shell="hide"] */
body[data-sp-shell="hide"] .sp-header,
body[data-sp-shell="hide"] .sp-footer{ display:none !important; }

::selection{ background:var(--sp-acid); color:#000; }

/* ====== HEADER ====== */
.sp-header{
  position:sticky; top:0; z-index:9999;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--sp-line);
  font-family:var(--sp-sans);
}
.sp-header-inner{
  display:flex; align-items:center; gap:32px;
  padding:14px 28px; max-width:1320px; margin:0 auto;
}
.sp-logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sp-display); font-weight:700; font-size:17px;
  letter-spacing:-0.03em; color:var(--sp-ink); text-decoration:none;
}
.sp-logo svg{ width:22px; height:22px; flex-shrink:0; }

.sp-nav{ display:flex; align-items:center; gap:2px; margin-left:8px; }
.sp-nav a{
  padding:7px 13px; font-size:13.5px; color:var(--sp-ink-2);
  border-radius:6px; text-decoration:none;
  transition:color .12s ease, background .12s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.sp-nav a:hover{ color:var(--sp-ink); background:rgba(255,255,255,.05); }
.sp-nav a .sp-new{
  font-family:var(--sp-mono); font-size:9.5px; padding:2px 6px; border-radius:3px;
  background:var(--sp-acid); color:#000; font-weight:600; letter-spacing:.06em;
}

.sp-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.sp-login{
  padding:7px 13px; font-size:13.5px; color:var(--sp-ink-2);
  text-decoration:none; transition:color .12s ease;
}
.sp-login:hover{ color:var(--sp-ink); }

.sp-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
  font-family:var(--sp-sans); font-size:13.5px; font-weight:600;
  letter-spacing:-0.005em; cursor:pointer; border:1px solid transparent;
  border-radius:6px; white-space:nowrap; text-decoration:none;
  background:var(--sp-acid); color:#000;
  transition:background .15s ease;
}
.sp-btn:hover{ background:var(--sp-acid-2); }
.sp-btn .sp-arrow{ width:13px; height:13px; transition:transform .18s ease; }
.sp-btn:hover .sp-arrow{ transform:translateX(2px); }

/* ─────────────────────────────────────────────────────────────
   Mobile burger + slide-in drawer
   Shown only ≤900px. Toggled by body.sp-menu-open.
   ───────────────────────────────────────────────────────────── */
.sp-burger{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  background:transparent; color:var(--sp-ink);
  border:1px solid var(--sp-line-2); border-radius:8px;
  cursor:pointer; padding:0; flex-shrink:0;
  transition:border-color .15s ease, background .15s ease;
}
.sp-burger:hover, .sp-burger:focus-visible{
  border-color:var(--sp-line-3); background:rgba(255,255,255,0.04); outline:none;
}
.sp-burger svg{ width:18px; height:18px; }

.sp-drawer{
  position:fixed; inset:0; z-index:10001;
  pointer-events:none; visibility:hidden;
}
.sp-drawer-back{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .25s ease;
}
.sp-drawer-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(360px, 88vw);
  background:var(--sp-bg); color:var(--sp-ink);
  border-left:1px solid var(--sp-line-2);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  display:flex; flex-direction:column;
  padding:18px 22px 24px;
  font-family:var(--sp-sans);
}
body.sp-menu-open{ overflow:hidden; }
body.sp-menu-open .sp-drawer{
  pointer-events:auto; visibility:visible;
}
body.sp-menu-open .sp-drawer-back{ opacity:1; }
body.sp-menu-open .sp-drawer-panel{ transform:translateX(0); }

.sp-drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--sp-line);
}
.sp-drawer-close{
  width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--sp-ink-2);
  border:1px solid var(--sp-line-2); border-radius:8px;
  cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.sp-drawer-close:hover{ color:var(--sp-ink); border-color:var(--sp-line-3); }

.sp-drawer-nav{
  display:flex; flex-direction:column;
  margin:8px 0; flex:1;
}
.sp-drawer-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px;
  font-family:var(--sp-display); font-weight:600;
  font-size:18px; letter-spacing:-0.02em;
  color:var(--sp-ink); text-decoration:none;
  border-bottom:1px solid var(--sp-line);
  transition:color .12s ease;
}
.sp-drawer-nav a:hover{ color:var(--sp-acid); }
.sp-drawer-nav a[aria-current="page"]{ color:var(--sp-acid); }
.sp-drawer-nav a .sp-new{
  font-family:var(--sp-sans); font-size:10px; padding:2px 7px; border-radius:4px;
  background:var(--sp-acid); color:#000; font-weight:600; letter-spacing:.08em;
}

.sp-drawer-foot{
  display:flex; flex-direction:column; gap:10px;
  padding-top:18px; border-top:1px solid var(--sp-line);
}
.sp-drawer-ghost{
  display:flex; align-items:center; justify-content:center;
  padding:12px 16px; font-size:14px; font-weight:500;
  border:1px solid var(--sp-line-2); border-radius:8px;
  color:var(--sp-ink); text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.sp-drawer-ghost:hover{ border-color:var(--sp-line-3); background:rgba(255,255,255,0.04); }
.sp-drawer-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 18px; border-radius:8px;
  background:var(--sp-acid); color:#000;
  font-family:var(--sp-sans); font-weight:600; font-size:15px; letter-spacing:-0.005em;
  text-decoration:none;
  transition:background .15s ease;
}
.sp-drawer-cta:hover{ background:var(--sp-acid-2); }
.sp-drawer-cta svg{ width:14px; height:14px; }

@media(max-width:900px){
  .sp-nav{ display:none; }
  .sp-login{ display:none; }
  .sp-header-inner{ gap:14px; padding:12px 20px; }
  .sp-burger{ display:inline-flex; }
  /* Keep Launch app pill on mobile but a touch smaller */
  .sp-actions{ gap:8px; }
  .sp-actions .sp-btn{ padding:10px 14px; font-size:12.5px; }
}
@media(max-width:480px){
  .sp-actions .sp-btn{ font-size:12px; padding:9px 12px; }
}

/* ====== FOOTER ====== */
.sp-footer{
  margin-top:80px; padding:80px 0 32px; border-top:1px solid var(--sp-line);
  background:var(--sp-bg); color:var(--sp-ink);
  font-family:var(--sp-sans);
}
.sp-footer-wrap{ max-width:1320px; margin:0 auto; padding:0 28px; }
.sp-foot-wordmark{
  font-family:var(--sp-display); font-weight:700;
  font-size:clamp(80px, 14vw, 220px); letter-spacing:-0.055em; line-height:.9;
  color:rgba(255,255,255,0.045); padding-bottom:32px;
  border-bottom:1px solid var(--sp-line); display:block; margin-bottom:64px;
  user-select:none; pointer-events:none;
}
.sp-foot-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:64px; flex-wrap:wrap;
}
.sp-foot-grid .sp-foot-intro{ flex:1 1 360px; max-width:460px; }
.sp-foot-grid .sp-foot-col:not(.sp-foot-intro){ flex:0 0 auto; min-width:140px; }
.sp-foot-col h5{
  font-family:var(--sp-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.18em; color:var(--sp-ink-3); margin:0 0 18px; font-weight:500;
}
.sp-foot-col a{
  display:block; color:var(--sp-ink-2); font-size:13.5px;
  padding:5px 0; text-decoration:none; transition:color .12s ease;
}
.sp-foot-col a:hover{ color:var(--sp-ink); }
.sp-foot-intro p{
  color:var(--sp-ink-3); font-size:13.5px; max-width:340px;
  line-height:1.55; margin:14px 0 24px;
}
.sp-foot-sub{ display:flex; gap:8px; margin-top:16px; max-width:340px; }
.sp-foot-sub input{
  flex:1; background:var(--sp-bg); border:1px solid var(--sp-line-2);
  color:var(--sp-ink); padding:11px 14px; border-radius:6px;
  font-size:13.5px; outline:none; font-family:var(--sp-sans);
}
.sp-foot-sub input:focus{ border-color:var(--sp-acid); }
.sp-foot-sub button{
  display:inline-flex; align-items:center; gap:6px; padding:11px 16px;
  font-family:var(--sp-sans); font-size:13.5px; font-weight:600;
  background:var(--sp-acid); color:#000; border:none; border-radius:6px;
  cursor:pointer; transition:background .15s ease;
}
.sp-foot-sub button:hover{ background:var(--sp-acid-2); }

/* Footer intro — company details block (replaces newsletter subscribe) */
.sp-foot-company{
  display:flex; flex-direction:column; gap:12px;
  margin-top:24px; max-width:380px;
}
.sp-foot-company-row{
  display:flex; gap:14px; align-items:flex-start;
}
.sp-foot-company-label{
  flex-shrink:0; min-width:78px; padding-top:1px;
  font-family:var(--sp-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sp-ink-4);
}
.sp-foot-company-value{
  color:var(--sp-ink-2); font-size:12.5px; line-height:1.5; flex:1;
}

.sp-foot-bottom{
  margin-top:64px; padding-top:32px; border-top:1px solid var(--sp-line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:18px;
}
.sp-foot-bottom .sp-small{
  font-family:var(--sp-mono); font-size:11px;
  color:var(--sp-ink-4); letter-spacing:.04em;
}
.sp-foot-legal{ display:flex; gap:18px; }
.sp-foot-legal a{
  font-family:var(--sp-mono); font-size:11px;
  color:var(--sp-ink-4); letter-spacing:.04em;
  text-decoration:none; transition:color .12s ease;
}
.sp-foot-legal a:hover{ color:var(--sp-ink); }
.sp-foot-cards{ display:flex; gap:8px; }
.sp-foot-cards .sp-cardbrand{
  width:48px; height:30px; border-radius:4px;
  background:var(--sp-surface); border:1px solid var(--sp-line);
  display:flex; align-items:center; justify-content:center;
}

@media(max-width:980px){
  .sp-foot-grid{ gap:32px; }
  .sp-foot-grid .sp-foot-intro{ flex:1 1 100%; max-width:100%; }
  .sp-foot-grid .sp-foot-col:not(.sp-foot-intro){ flex:1 1 calc(50% - 16px); }
}
@media(max-width:560px){
  .sp-foot-grid{ gap:24px; }
  .sp-foot-grid .sp-foot-col:not(.sp-foot-intro){ flex:1 1 100%; }
}