/* Shared site chrome (top nav + footer) for every mustr.gg marketing page.
   One source of truth — edit here, not per page. Relies on the design tokens
   (--accent, --bg, --border, --muted, --text) each page defines in :root. */

.site-nav{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-nav .row{
  max-width:980px; margin:0 auto; padding:.7rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.site-nav .brand{ font-weight:800; letter-spacing:.02em; color:var(--text); text-decoration:none; font-size:1.15rem; }
.site-nav .brand span{ color:var(--accent); }
.site-nav nav{ display:flex; gap:1.1rem; align-items:center; font-size:.9rem; flex-wrap:wrap; justify-content:flex-end; }
.site-nav nav a{ color:var(--muted); text-decoration:none; white-space:nowrap; }
.site-nav nav a:hover{ color:var(--text); }
.site-nav nav a.cta{ color:var(--accent); font-weight:700; }
@media (max-width:640px){ .site-nav nav a.hide-sm{ display:none; } }

.site-foot{ border-top:1px solid var(--border); margin-top:3.5rem; }
.site-foot .row{
  max-width:980px; margin:0 auto; padding:1.6rem 1.1rem;
  display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:center;
}
.site-foot .brand{ font-weight:800; color:var(--text); text-decoration:none; }
.site-foot .brand span{ color:var(--accent); }
.site-foot a{ color:var(--muted); text-decoration:none; font-size:.9rem; }
.site-foot a:hover{ color:var(--text); }
.site-foot .copy{ margin-left:auto; color:var(--muted); font-size:.85rem; }