/* Shared public-site top navigation. Source markup: static/partials/site-nav.html, stamped into every public page by
 * scripts/stamp_site_nav.py (edit the partial, never a page copy — CI fails if a page drifts).
 *
 * Like the shared footer, it owns almost no colours: text, borders and the hover state are derived from the host page's
 * text colour (currentColor), so it reads on any of the site's unrelated design systems in both themes. The only fixed
 * colour is the brand mint on the primary button and the "Pro" wordmark. Class-scoped (.pn …) and a <div>, so page-level
 * `nav`, `header`, `a`, `ul` rules cannot leak in.
 *   desktop  logo · Features · How it works · Pricing · Affiliate · FAQ · Log in · Get started
 *   <= 980   Affiliate + FAQ drop out
 *   <= 720   links drop out: logo · Log in · Get started
 *   <= 359   the logo's words drop out, the mark stays
 */
.pn{
  --pn-mint:#3fe3b0;
  --pn-dim:color-mix(in srgb,currentColor 78%,transparent);
  --pn-line:color-mix(in srgb,currentColor 14%,transparent);
  position:sticky;top:0;z-index:60;box-sizing:border-box;width:100%;margin:0;
  font-family:inherit;font-size:14px;font-weight:400;line-height:1.4;color:inherit;text-align:left;
  background:var(--pn-bg,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--pn-line);
}
[data-theme="light"] .pn{--pn-mint:#16a37a}
.pn *,.pn *::before,.pn *::after{box-sizing:border-box}
.pn[hidden]{display:none}
/* --page-max (1600px, defined by the host page) box + 32px gutters = the same content edge the pages and the footer use. */
.pn-wrap{max-width:var(--page-max,1600px);margin:0 auto;padding:0 var(--page-gutter,32px);height:64px;display:flex;align-items:center;gap:28px}
.pn ul{list-style:none;margin:0;padding:0;color:inherit}   /* a page-level `ul{color:..}` rule dimmed the links (free-trial: 3.2:1) */
.pn li{margin:0;padding:0;border:0}
.pn a{text-decoration:none}
.pn .pn-logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px;color:inherit!important;font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.pn .pn-logo img{width:32px;height:32px;border-radius:9px;display:block;flex-shrink:0}
.pn-pro{color:var(--pn-mint);font-weight:600}
.pn-arr{margin-left:.4em}
.pn-links{display:flex;align-items:center;gap:26px;margin-left:12px}
.pn .pn-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--pn-dim);white-space:nowrap}
.pn .pn-links a:hover,.pn .pn-links a:focus-visible{color:inherit}
.pn-cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.pn .pn-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.pn .pn-ghost{color:inherit!important;border-color:var(--pn-line)}
.pn .pn-ghost:hover{border-color:color-mix(in srgb,currentColor 38%,transparent)}
.pn .pn-primary{background:var(--pn-mint);color:#04110d!important;box-shadow:0 8px 24px -8px color-mix(in srgb,var(--pn-mint) 55%,transparent),inset 0 -1px 0 rgba(0,0,0,.18)}
.pn .pn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.pn a:focus-visible{outline:2px solid var(--pn-mint);outline-offset:2px;border-radius:8px}
@media (max-width:980px){.pn-opt{display:none}}
@media (max-width:860px){.pn-links{gap:20px}.pn-wrap{gap:18px}}
@media (max-width:720px){
  .pn-links{display:none}
  .pn-wrap{height:60px;gap:12px}
  .pn .pn-btn{padding:0 13px}
}
/* phones: logo + "Log in" (plain text) + "Get started" must fit 360px with room to spare */
@media (max-width:480px){
  .pn-wrap{gap:8px}
  .pn .pn-logo{font-size:16px;gap:8px}
  .pn .pn-logo img{width:30px;height:30px}
  .pn-arr{display:none}
  .pn-cta{gap:4px}
  .pn .pn-ghost{border-color:transparent;padding:0 10px}
}
@media (max-width:400px){.pn-pro{display:none}}
@media (max-width:380px){.pn .pn-btn{padding:0 11px}.pn .pn-ghost{padding:0 8px}.pn-wrap{gap:6px}}   /* 360px Androids: logo + both buttons inside the 20px gutters */
@media (max-width:359px){
  .pn-name{display:none}
  .pn .pn-btn{padding:0 11px}
}
/* Dual-mode pages (pricing, docs, help, api-docs): while the public nav shows (signed out) the app's own phone header —
   hamburger + empty drawer — must not sit above it. Signed in, this nav hides itself and the app header returns. */
body:has([data-site-nav]:not([hidden])) #app-mobile-header{display:none!important}
@media (prefers-reduced-motion:reduce){.pn .pn-btn{transition:none}.pn .pn-primary:hover{transform:none}}
/* #hash links ("/#pricing") must not land underneath the sticky bar */
html:has([data-site-nav]:not([hidden])){scroll-padding-top:76px}
@media print{.pn{display:none}}