/* site.css — shared nav + footer styles for all marketing pages
   Loaded by pages that use the partials system (include.js).
   Blog pages already have these rules in /blog/style.css — this
   file covers the landing page, /features, and any future pages. */

/* nav */
header.nav{ position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(19,20,25,.72); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; }
header.nav.scrolled{ border-bottom-color:var(--border); background:rgba(19,20,25,.88); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; font-size:18px; letter-spacing:-.4px; }
.brand .mark{ width:22px; height:22px; flex:none; }
.brand b{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a.link{ color:var(--muted); font-size:14.5px; font-weight:500; transition:color .15s; }
.nav-links a.link:hover,
.nav-links a.link.active{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* footer */
footer.ft{ border-top:1px solid var(--border); padding:34px 0; color:var(--faint); font-size:13.5px; }
.ft-in{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.ft .brand{ font-size:16px; }
.ft-links{ display:flex; gap:22px; flex-wrap:wrap; }
.ft-links a:hover{ color:var(--text); }
.ft-social{ display:flex; gap:14px; align-items:center; }
.ft-social a{ display:inline-flex; color:var(--faint); transition:color .15s; }
.ft-social a:hover{ color:var(--accent); }

/* header mount — reserve height to prevent layout shift */
[data-include*="header"]{ min-height:66px; }

/* app: compact header — logo only, no nav links or CTA */
body[data-page="app"] header.nav{ border-bottom-color:var(--border); }
body[data-page="app"] .nav-links{ display:none; }
body[data-page="app"] .nav-in{ height:50px; }
body[data-page="app"] [data-include*="header"]{ min-height:50px; }

/* app: footer clears mobile tabbar */
@media (max-width:720px){
  body[data-page="app"] footer.ft{ padding-bottom:calc(34px + 72px); }
}

/* mobile nav collapse */
@media (max-width:800px){
  .nav-links a.link{ display:none; }
  .ft-in{ flex-direction:column; align-items:flex-start; }
}