/* The site menu, shared by the marketing pages and the app pages. Colours are
   derived from currentColor rather than the palette variables: the two halves of
   the app name their tokens differently (--text-soft/--hair here,
   --text-2/--border in css/style.css), and this way one stylesheet is correct in
   both, in light and dark. */

.site-nav{position:fixed;top:32px;left:60px;right:auto;z-index:1000;
  display:inline-flex;align-items:center;justify-content:flex-start;gap:20px;
  padding:14px 18px;border-radius:9999px;background:transparent;box-shadow:none;
  max-width:calc(100vw - 120px);
  transition:background-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),
             padding .4s cubic-bezier(.16,1,.3,1),backdrop-filter .5s ease,
             transform .5s cubic-bezier(.34,1.56,.64,1);
  animation:snIn .9s cubic-bezier(.16,1,.3,1) both}
.site-nav.scrolled{padding:12px 22px;background:var(--nav-bg,rgba(127,127,127,.12));
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 14px 38px rgba(0,0,0,.18),0 1px 0 rgba(128,128,128,.25);
  transform:translateY(-4px) scale(.99)}
@keyframes snIn{
  0%{opacity:0;transform:translateY(-30px) scale(.92)}
  60%{opacity:1;transform:translateY(5px) scale(1.015)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.site-nav .brand{font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.01em;color:inherit;text-decoration:none}
.site-nav .brand i{color:var(--accent,#ff5c38);font-style:normal}
.site-nav .sn-links a{transition:all .2s cubic-bezier(.34,1.56,.64,1)}
.site-nav .sn-links a:hover{transform:translateY(-2px)}

.sn-links{display:flex;align-items:center;gap:8px}
.sn-links a{font-size:13px;font-weight:600;text-decoration:none;padding:9px 14px;
  border-radius:9999px;white-space:nowrap;transition:all .2s;
  color:inherit;opacity:.72;border:1px solid rgba(128,128,128,.38)}
.sn-links a:hover{opacity:1;border-color:rgba(128,128,128,.7);
  background:color-mix(in srgb, currentColor 8%, transparent)}
.sn-links a[aria-current="page"]{opacity:1;border-color:rgba(128,128,128,.7)}
.sn-links a.sn-cta{opacity:1;color:#fff;background:var(--accent,#ff5c38);
  border-color:var(--accent,#ff5c38)}
.sn-links a.sn-cta:hover{filter:brightness(1.08);background:var(--accent,#ff5c38)}

/* Inline mode: the links sit inside a page's own header, so they carry no
   positioning of their own. */
.sn-inline .sn-links a{padding:7px 14px;font-size:13px}

@media(max-width:600px){
  .site-nav{gap:12px;padding:10px 14px;top:16px}
  .site-nav .brand{font-size:18px}
  .sn-links{gap:7px}
  .sn-links a{padding:8px 13px;font-size:13px}
  /* Everything but the primary action would push a phone's nav past the
     viewport; the brand still links home and the blog is one tap from there. */
  .sn-links a:not(.sn-cta):not([data-keep]){display:none}
}