/* One header for every page (the launch page's). Pages keep their own nav CSS
   from before; these selectors are prefixed html:root so they outrank every
   page's `nav {…}` and `:root[data-theme=light] nav {…}` rule. The header
   carries its own colors, so it looks the same whatever the page's palette. */
/* The header and a page's section row (.subnav) stay pinned while you scroll,
   so a jump to #install never strands you without the menu. Sticky needs every
   ancestor to not be a scroll box: body{overflow-x:hidden} (on most pages)
   makes body one, so clip it instead, which hides overflow without scrolling. */
html{overflow-x:clip;--pfn-h:72px;scroll-padding-top:calc(var(--pfn-h) + 58px)}
html:root body{overflow-x:clip}
html:root .subnav{position:sticky;top:var(--pfn-h);z-index:59}
html:root nav.pfn{
  --pfn-text:#E7ECEE;--pfn-muted:#9AA4AA;--pfn-dim:#5B656B;--pfn-line:#252D33;--pfn-panel:#0E1316;
  --pfn-yellow:#F3F16B;--pfn-gold:#F2C94C;--pfn-on-yellow:#07090A;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:60;height:var(--pfn-h);width:100%;box-sizing:border-box;max-width:1180px;margin:0 auto;padding:0 28px;
  /* a full-bleed band in the page's own background, so a fixed page image never shows through */
  --pfn-bg:var(--bg,#07090A);background:var(--pfn-bg);border:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  font:400 12px/1.2 ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--pfn-muted);
}
html:root[data-theme="light"] nav.pfn{
  --pfn-text:#0B0B0C;--pfn-muted:#5B656B;--pfn-dim:#8A9297;--pfn-line:#E5E6E3;--pfn-panel:#FBFBFA;
  --pfn-bg:var(--bg,#FFFFFF);border:0;
}
nav.pfn::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:var(--pfn-bg);z-index:-1;pointer-events:none}
nav.pfn a{color:var(--pfn-muted);text-decoration:none;border:0;background:none}
nav.pfn a:hover,nav.pfn a[aria-current]{color:var(--pfn-text)}
/* The wordmark is set in the page's own content font (--sans), not a display face,
   and every part names it so no page rule on span/b/i can swap it out. */
nav.pfn .pfn-brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--pfn-text);
  font:500 18px/1 var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif);letter-spacing:0}
nav.pfn .pfn-brand img{width:28px;height:28px;display:block}
nav.pfn .pfn-brand span,nav.pfn .pfn-brand b,nav.pfn .pfn-brand i{font-family:inherit;font-size:inherit;letter-spacing:inherit}
nav.pfn .pfn-brand b{font-weight:700;color:inherit}
nav.pfn .pfn-brand i{font-style:normal;font-weight:400;color:var(--pfn-dim)}
nav.pfn .pfn-r{display:flex;align-items:center;gap:26px}
nav.pfn .pfn-pt{display:inline-flex;border:1px solid var(--pfn-line);border-radius:999px;padding:2px}
nav.pfn .pfn-pt a{padding:5px 14px;border-radius:999px;font:400 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:0}
nav.pfn .pfn-pt a[aria-current]{background:var(--pfn-text);color:var(--pfn-panel)}
nav.pfn .pfn-tog{background:none;border:1px solid var(--pfn-line);border-radius:6px;padding:5px 11px;margin:0;
  color:var(--pfn-muted);font:400 11px/1.2 ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;cursor:pointer}
nav.pfn .pfn-tog:hover{color:var(--pfn-text);border-color:var(--pfn-text)}
nav.pfn .pfn-cta{background:var(--pfn-yellow);color:var(--pfn-on-yellow);border:0;border-radius:7px;padding:8px 15px;margin:0;
  font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif;letter-spacing:0;white-space:nowrap;cursor:pointer}
nav.pfn .pfn-cta:hover{background:var(--pfn-gold);color:var(--pfn-on-yellow)}
/* Phone menu: every link stays one tap away instead of disappearing. */
nav.pfn .pfn-menu{display:none;position:relative}
nav.pfn .pfn-menu summary{list-style:none;cursor:pointer;border:1px solid var(--pfn-line);border-radius:6px;padding:6px 10px;color:var(--pfn-text)}
nav.pfn .pfn-menu summary::-webkit-details-marker{display:none}
nav.pfn .pfn-menu div{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;display:flex;flex-direction:column;
  background:var(--pfn-panel);border:1px solid var(--pfn-line);border-radius:10px;padding:6px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
nav.pfn .pfn-menu div a,nav.pfn .pfn-menu div button{padding:10px 12px;border-radius:6px;text-align:left;font-size:13px}
nav.pfn .pfn-menu div a:hover{background:var(--pfn-line)}
nav.pfn .pfn-menu .pfn-tog{margin:4px 12px 6px;align-self:flex-start}
@media (max-width:900px){
  nav.pfn .pfn-l,nav.pfn .pfn-r>.pfn-tog{display:none}
  nav.pfn .pfn-menu{display:block}
  nav.pfn .pfn-r{gap:14px}
}
@media (max-width:560px){
  html{--pfn-h:58px}
  html:root nav.pfn{padding:0 16px}
  nav.pfn .pfn-r>.pfn-pt{display:none}
  nav.pfn .pfn-r{gap:10px}
  nav.pfn .pfn-brand{font-size:16px;gap:8px}
  nav.pfn .pfn-cta{padding:7px 11px}
}
@media (max-width:430px){
  nav.pfn .pfn-brand span{display:none}
}