/* ==========================================================================
   SITE CHROME — shared by every page (index, about, demo, faq, acceptable-use)
   Only the global nav and footer live here, so this file can be dropped into
   any page without touching that page's own styles.
   Figma: Nav 305:367 · Footer 305:413 (file 3bp0ReCVJRPF5meAdwxBgZ)
   ========================================================================== */

/* ---------- Nav ---------- */
/* Pinned to the top while scrolling (sticky keeps its space in the layout, so nothing jumps).
   site.js adds .is-scrolled once the page has moved, which fades in a hairline + soft shadow. */
html{scroll-padding-top:96px}   /* in-page anchors (#waitlist, #how, FAQ groups…) land below the nav */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 rgba(227,229,236,0),0 8px 24px rgba(14,17,22,0);transition:box-shadow .25s}
.site-nav.is-scrolled{box-shadow:0 1px 0 rgba(227,229,236,1),0 8px 24px rgba(14,17,22,.06)}
.site-nav__inner{max-width:1440px;height:96px;margin:0 auto;padding:0 120px;display:flex;align-items:center;justify-content:space-between}
.site-logo{display:inline-flex;align-items:center;gap:9px;color:#0e1116;text-decoration:none}
.site-logo img{display:block;width:25px;height:32px;flex:none}
.site-logo span{font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1;letter-spacing:-.44px;white-space:nowrap}
.site-nav__menu{display:flex;align-items:center;gap:36px}
.site-nav__menu a{font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.3;color:#0e1116;text-decoration:none;white-space:nowrap;transition:color .15s}
.site-nav__menu a:hover,.site-nav__menu a[aria-current="page"]{color:#3b5bff}
.site-nav__menu a.site-nav__cta{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:8px;background:linear-gradient(90deg,#3b5bff,#007aff);color:#fff;font-size:16px;transition:filter .15s,transform .15s}
.site-nav__menu a.site-nav__cta:hover{color:#fff;filter:brightness(1.08)}
.site-nav__menu a.site-nav__cta:active{transform:translateY(1px)}
.site-nav__menu a:focus-visible,.site-nav__toggle:focus-visible,.site-logo:focus-visible{outline:3px solid rgba(59,91,255,.4);outline-offset:3px;border-radius:6px}
/* Hamburger (phones only) */
.site-nav__toggle{display:none;position:relative;width:44px;height:44px;border:0;background:none;cursor:pointer;border-radius:10px}
.site-nav__toggle span{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:#0e1116;transition:transform .25s,top .25s}
.site-nav__toggle span:first-child{top:16px}
.site-nav__toggle span:last-child{top:26px}
.site-nav__toggle[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.site-nav__toggle[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

/* ---------- Footer ---------- */
.site-footer{background:#fbfbfb;border-top:1px solid #e3e5ec}
.site-footer__inner{max-width:1440px;margin:0 auto;padding:64px 120px 40px;display:flex;flex-direction:column;gap:48px;font-family:'Geist',system-ui,sans-serif}
.site-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.site-footer__brand{width:360px;display:flex;flex-direction:column;gap:16px}
.site-footer__brand p{font-size:15px;line-height:1.5;color:#5b6070}
.site-footer__cols{display:flex;gap:88px;line-height:1.3;white-space:nowrap}
.site-footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.site-footer__col h2{font-family:'Geist Mono',ui-monospace,monospace;font-weight:700;font-size:12px;letter-spacing:.72px;color:#9aa0ae;line-height:1.3}
.site-footer__col a{font-size:15px;color:#0e1116;text-decoration:none;transition:color .15s}
.site-footer__col a:hover{color:#3b5bff}
.site-footer__divider{height:1px;background:#e3e5ec}
.site-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;line-height:1.3;color:#5b6070;white-space:nowrap}
.site-footer__bottom a{color:inherit;text-decoration:none}
.site-footer__bottom a:hover{color:#0e1116}

/* ---------- Responsive ---------- */
@media (max-width:1339px){
  .site-nav__inner{padding:0 40px}
  .site-footer__inner{padding-left:40px;padding-right:40px}
  .site-footer__cols{gap:56px}
}
@media (max-width:900px){
  .site-footer__top{flex-direction:column}
  .site-footer__brand{width:auto;max-width:360px}
}
@media (max-width:720px){
  html{scroll-padding-top:72px}
  .site-nav__inner{height:72px;padding:0 16px}
  .site-nav__toggle{display:block}
  /* Dropdown panel under the bar */
  .site-nav__menu{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px;background:#fff;border-bottom:1px solid #e3e5ec;box-shadow:0 18px 30px rgba(14,17,22,.08);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .site-nav.is-open .site-nav__menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
  .site-nav__menu a{padding:14px 4px;font-size:17px;border-bottom:1px solid #f0f1f5}
  .site-nav__menu a.site-nav__cta{margin-top:14px;border-bottom:0;padding:15px 22px}
  .site-footer__inner{padding:48px 16px 32px;gap:36px}
  .site-footer__cols{flex-wrap:wrap;gap:32px 48px}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;gap:8px}
}