/* the floating nav on every page: the name, two tabs and the waitlist button.
   On a phone the pill has no room for the tabs, so they sit behind a menu button beside "Join the waitlist". */
.bar .links{display:flex;gap:clamp(18px,2.2vw,30px);color:var(--muted);white-space:nowrap;font-size:15px}
.bar .links a:hover,.bar .links a[aria-current="page"]{color:var(--fg)}
.bar .menu{display:none}
.drop{position:fixed;z-index:19;top:84px;left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),340px);display:grid;padding:8px;border-radius:22px;
  background:rgba(12,16,34,.86);border:1px solid var(--edge);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 30px 60px -30px #000}
.drop[hidden]{display:none}
.drop a{padding:14px 16px;border-radius:14px;font-size:16px;color:var(--fg)}
.drop a:hover,.drop a[aria-current="page"]{background:rgba(255,255,255,.08)}
@media (max-width:900px){.bar .links{display:flex}}
@media (max-width:640px){
  .bar{gap:10px;padding-left:16px}
  .bar .mark{font-size:16px}
  .bar .links{display:none}
  .bar .menu{display:grid;place-items:center;width:38px;height:38px;margin:0 -2px 0 -4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--fg);cursor:pointer}
  .bar .menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .drop{top:72px}
}
@media (max-width:350px){.bar .menu{display:none}}