/* SuperFile top nav — THE single source of truth for the global .gnav navbar on
   every marketing page. Loaded AFTER the per-page CSS so it wins the cascade over
   any legacy per-page .gnav rules (several had drifted: wrong background opacity,
   missing saturate, 14px vs 22px gutter — which knocked the sub-nav title out of
   alignment with the logo). No page should hardcode its own .gnav styles.
   Canonical values mirror /assets/base.css (used by console pages + /partners). */
/* The navbar is position:sticky at top:0, so a plain #hash jump — or a
   scrollIntoView({block:'start'}) — parks the target's first 44px underneath it. On the home page
   "Join the waitlist" links to #s-name and landed with its heading ("1. Choose your profile
   name.") chopped off behind the nav, so you arrived mid-section and it read as having scrolled
   to the wrong place. scroll-padding-top on the scrolling element offsets every anchor jump and
   scrollIntoView on the site in one line, which is why it belongs here next to the nav that
   causes it rather than in one page's CSS. 44px of nav + ~20px of air; a page with a taller
   sticky header can override --sf-scroll-pad. */
html{scroll-padding-top:var(--sf-scroll-pad,64px)}
/* Ten page stylesheets set html{scroll-behavior:smooth} and none of them guard it, so a visitor
   who has asked the OS for less motion was still getting a ~2500px animated glide on every
   anchor jump — the single loudest bit of motion on the site. Same one-line-in-one-place
   argument as the rule above; realnav.css loads after page CSS so this wins the cascade. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.gnav{height:44px;background:rgba(250,250,252,.8);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgba(0,0,0,.07);position:sticky;top:0;z-index:30}
.gnav .in{max-width:1024px;margin:0 auto;height:100%;padding:0 22px;display:flex;align-items:center;justify-content:center;gap:40px;font-size:12px;letter-spacing:-.01em}
.gnav a{text-decoration:none;color:rgba(29,29,31,.8);transition:color .1s ease}
.gnav a:hover{color:#000;text-decoration:none}
.gnav .lg{height:15.4px;width:68px;color:var(--ink,#1d1d1f);display:block}
.gnav .ndrop{position:relative;display:inline-flex;align-items:center}
.gnav .ndrop>.ntop{cursor:pointer}
.gnav .nmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:184px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.16);padding:7px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:130}
.gnav .nmenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.gnav .nmenu a{display:block;color:var(--ink,#1d1d1f);font-size:13.5px;font-weight:400;padding:9px 14px;border-radius:8px;white-space:nowrap}
.gnav .nmenu a:hover{background:#f5f5f7;color:#000;text-decoration:none}
.gnav .ndrop:hover .nmenu,.gnav .ndrop:focus-within .nmenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(2px)}
.mnavb{display:flex;border:0;background:none;cursor:pointer;color:var(--ink,#1d1d1f);padding:6px;margin-left:2px;-webkit-tap-highlight-color:transparent}
.sipill{background:var(--blue,#0071E3);color:#fff !important;border-radius:999px;padding:4.5px 13px;line-height:1;display:inline-flex;align-items:center;white-space:nowrap;transition:background .15s}
.sipill:hover{background:var(--blue-h,#0077ED);text-decoration:none !important;color:#fff}
/* account-nav layout (marketing pages use .gnav.agnav — right-aligned, logo pushes left) */
.gnav.agnav .in{justify-content:flex-end;max-width:1024px;padding:0 22px;gap:28px}
.gnav.agnav .in > a:first-child{margin-right:auto}
.agnav .gico{display:flex !important;color:var(--ink,#1d1d1f)}
/* bag icon is hidden until the visitor has something in their bag (nav.js toggles .bag-hidden).
   Higher specificity than the rule above so it beats its !important. */
.agnav .gico.bag-hidden{display:none !important}
.agnav .mnavb{display:none}
.gnav .gico{align-items:center;justify-content:center;min-height:44px;padding:0 5px}
@media (max-width:740px){
  .gnav .in{gap:20px;padding:0 14px}
  .gnav.agnav .in{gap:18px;padding:0 16px}
  .gnav.agnav .in > a:not(:first-child):not(.gico){display:none}
  .gnav.agnav .in > .ndrop{display:none}
  .gnav.agnav .in > .sipill{display:inline-flex !important}
  .agnav .mnavb{display:flex}
  .mnavb{align-items:center;justify-content:center;min-height:44px}
}