/* Shared floating pill header, linked LAST in <head> of every page that has <header class="nav">.
   Single source: edit here, not in the pages. Tokens come from each page's :root (all pages carry
   --line-strong, --e-out, --dur-med, --dur-fast). Selectors are prefixed .nav so they outrank the
   older full width bar rules some pages and assets/help.css still carry.
   Floating capsule: inset from the edges, hairline + soft shadow. Still sticky, and the negative
   bottom margin keeps its in-flow height at the old 65/57px so nothing below moves.
   It hides on scroll down and returns on any scroll up (nav.js toggles .nav-hide). */
.nav{position:sticky;top:10px;z-index:60;width:min(calc(100% - 24px),1240px);margin:10px auto -9px;
  background:rgba(12,13,16,.72);border:1px solid var(--line-strong);border-radius:999px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.65);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  transition:transform .45s var(--e-out),border-color var(--dur-med),background var(--dur-med);}
.nav.scrolled{border-color:var(--line-strong);background:rgba(12,13,16,.72);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav,.nav.scrolled{background:rgba(12,13,16,.95);}}
.nav.nav-hide{transform:translateY(calc(-100% - 24px));}
@media(prefers-reduced-motion:reduce){.nav{transition:none;}}
/* logo at the left, buttons at the right, links truly centred (1fr auto 1fr) */
.nav .nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:none;height:62px;position:relative;padding-inline:20px;}
@media(min-width:721px){  /* above the burger breakpoint; phones keep the flex row */
  .nav .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;}
  .nav .nav-inner .brand{justify-self:start;}
  .nav .nav-inner>.nav-btn-cluster,.nav .nav-inner>.nav-right{justify-self:end;}
}
@media(max-width:720px){.nav .nav-inner{height:62px;}.nav .nav-btn-cluster{margin-left:auto;}}
/* word-link group: the centre grid column of .nav-inner */
.nav .nav-links{position:relative;left:auto;top:auto;transform:none;gap:2px;}
/* sliding inner pill: sits behind the links, nav.js moves it (transform) to the hovered, focused
   or current link and gives it that link's width; hidden until it has somewhere to be */
.nav-pill{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;border-radius:999px;pointer-events:none;
  background:rgba(53,96,230,.22);box-shadow:inset 0 0 0 1px rgba(53,96,230,.55);opacity:0;width:0;
  transition:transform .45s cubic-bezier(.34,1.3,.5,1),width .45s cubic-bezier(.34,1.3,.5,1),opacity .2s;}
.nav-pill.on{opacity:1;}
.nav-pill.snap{transition:opacity .2s;}   /* first placement: appear in place, do not fly in from the left */
@media(prefers-reduced-motion:reduce){.nav-pill{transition:none;}}
/* tighten the gap just above the burger breakpoint so the row never touches the brand or buttons */
@media(min-width:721px) and (max-width:800px){.nav .nav-links a.navlink{padding-inline:9px;}}
.nav .nav-links a.navlink{font-size:14px;color:var(--muted);font-weight:500;transition:color var(--dur-fast);position:relative;padding:8px 16px;border-radius:999px;}
.nav .nav-links a.navlink::after{display:none;}   /* retire the old underline */
.nav .nav-links a.navlink:hover,.nav .nav-links a.navlink.cur{color:var(--ink);}
.nav .nav-links a.navlink:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
@media(max-width:720px){.nav .nav-links a.navlink{display:none;}}
/* ---- burger button + floating menu panel (shared; pages carry no menu CSS of their own) ----
   The panel is a second capsule-family surface: same inset (12px, matching the pill's
   100% - 24px), same hairline, frosted near-black fill, 24px radius, hung 6px under the pill.
   One quick fade + rise, all rows at once (no stagger). Specificity uses #navMenu so any
   older per-page copy cannot win. */
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  color:var(--ink);flex:0 0 auto;cursor:pointer;transition:background var(--dur-fast);}
.nav-burger:hover{background:var(--surface);}
.nav-burger:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.nav-burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
/* each bar slides to the centre line, then rotates about it, so the X is symmetric */
.nav-burger .bl{transform-box:view-box;transform-origin:12px 12px;transition:transform .2s var(--e-out),opacity .12s;}
.nav-burger[aria-expanded="true"] .bl-t{transform:rotate(45deg) translateY(5px);}
.nav-burger[aria-expanded="true"] .bl-m{opacity:0;}
.nav-burger[aria-expanded="true"] .bl-b{transform:rotate(-45deg) translateY(-5px);}
@media(max-width:720px){.nav .nav-burger{display:inline-flex;margin-left:6px;}.nav .nav-inner{padding-inline:18px 8px;}}
#navMenu.nav-menu{position:fixed;top:78px;left:0;right:0;margin-inline:auto;z-index:59;
  width:min(calc(100% - 24px),1240px);box-sizing:border-box;
  background:rgba(12,13,16,.98);border:1px solid var(--line-strong);border-radius:24px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  padding:8px 8px calc(12px + env(safe-area-inset-bottom,0px));
  max-height:calc(100dvh - 94px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top center;
  transition:opacity .16s var(--e-out),transform .2s var(--e-out),visibility 0s linear .2s;}
#navMenu.nav-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s;}
@media(min-width:721px){#navMenu.nav-menu{display:none;}}
@media(prefers-reduced-motion:reduce){#navMenu.nav-menu,.nav-burger .bl{transition:none;}}
#navMenu .menu-inner{overflow:visible;max-height:none;padding:0;}
#navMenu a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:0;border-radius:16px;
  font-size:16px;font-weight:500;color:var(--muted);opacity:1;transform:none;transition:color var(--dur-fast),background var(--dur-fast);}
#navMenu a:hover,#navMenu a:focus-visible{color:var(--ink);background:var(--surface);}
#navMenu a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
#navMenu .menu-cta{margin:8px 4px 0;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;}
#navMenu .menu-cta a.btn{width:100%;border:1px solid var(--line-strong);border-radius:999px;font-weight:600;font-size:15px;}
#navMenu .menu-cta a.btn[href="/login"]{display:none;}   /* Log in already sits in the pill */
#navMenu .menu-cta .btn-primary{color:#fff;}
#navMenu .menu-cta .appbadge{padding:0;height:auto;min-height:0;border:0;border-radius:0;background:none;display:inline-block;}
#navMenu .menu-cta .appbadge:hover{background:none;}
#navMenu .menu-legal{order:2;display:flex;justify-content:center;align-items:center;gap:8px;}
#navMenu a.menu-secondary{min-height:44px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:400;color:var(--faint);background:none;}
#navMenu a.menu-secondary:hover,#navMenu a.menu-secondary:focus-visible{color:var(--muted);background:var(--surface);}
body.menu-open{overflow:hidden;}