/* ─────────────────────────────────────────────────────────────────────────
   The masthead's "Plans & Pricing" link, its outlined "Log in" button, and
   the "Start a 14-day free trial" button the pinned bar adds, shared by the
   homepage and /pricing. Loaded after microsite.css.

   microsite.css drops .navlinks under 980px and the login button under
   520px, because the agnostic homepage had no room for them. Here they are
   the point of the bar, so they stay at every width; what gives way on a
   phone is the "Start a 14-day free trial" button instead.
   ───────────────────────────────────────────────────────────────────────── */
.site-nav .brand { flex: none; }
.site-nav .navlinks { display: flex; }
.site-nav .navlinks a[aria-current="page"] { color: var(--text-primary); }
.site-nav .nav-right .btn--login { display: inline-flex; }

/* "Plans & Pricing" sits on the right, just before "Log in", as plain
   text in the brighter colour. */
.site-nav .navlinks { margin-left: 0; margin-right: var(--space-xs); }
.site-nav .navlinks .nav-pricing { color: var(--text-primary); }
.site-nav .navlinks .nav-pricing:hover { color: var(--accent); }

/* "Log in" is an outlined button: no fill, a light grey stroke. */
.site-nav .nav-right .btn--login {
  padding: var(--space-xs) var(--space-m);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, .24);
}
.site-nav .nav-right .btn--login:hover { border-color: rgba(255, 255, 255, .5); }

/* The "Start a 14-day free trial" button waits for the pinned bar
   (microsite.css hides it until then). While the hero is in view, the
   hero's own button makes that ask. */

@media (max-width: 640px) {
  .site-nav .topnav-inner { gap: var(--space-s); }
  .site-nav .nav-right .btn--login { padding-inline: var(--space-s); }
  .site-nav .signup-cta,
  .site-nav.is-pinned .signup-cta { display: none; }
}