/* Shared account entry points on the existing desktop, mobile and account headers. */
header.top .wrap { width: min(1280px, 100%); height: auto; min-height: 64px; padding-block: 10px; flex-wrap: wrap; row-gap: 8px; }
header.top .brand { margin-inline: 0 auto; }
header.top nav.top-nav { flex-wrap: wrap; }
header.top nav.top-nav a { display: inline-flex; align-items: center; min-height: 44px; }
header.top a:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; }
.site-account-nav { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-shrink: 0; }
.site-account-nav [hidden] { display: none !important; }
.site-account-nav a, .site-account-nav .account-upgrade, .site-account-nav .account-signout { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 14px; border: 1px solid transparent; border-radius: 999px; text-decoration: none;
  color: var(--night-ink, var(--ink)); font: 600 .875rem var(--display, var(--font)); white-space: nowrap; }
.site-account-nav .account-signup, .site-account-nav .account-member { background: var(--volt); color: var(--night); }
.site-account-nav .account-upgrade { background: var(--volt); color: var(--night); border-color: var(--volt); }
.site-account-nav .account-signout { background: var(--night-card); border-color: var(--night-faint); cursor: pointer; }
.site-account-nav .account-signout:disabled { opacity: .65; cursor: wait; }
.site-account-nav[data-free-account=true] .account-member { background: transparent; color: var(--night-ink); border-color: var(--night-faint); }
.site-account-nav { flex-wrap: wrap; max-width: 100%; }
.site-account-nav .account-upgrade { white-space: normal; text-align: center; }
.site-account-nav a:hover, .site-account-nav .account-upgrade:hover, .site-account-nav .account-signout:hover { border-color: currentColor; }
.site-account-nav a:focus-visible, .site-account-nav .account-upgrade:focus-visible, .site-account-nav .account-signout:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; }
.account-upgrade { cursor: pointer; }
[data-account-upgrade]:disabled, [data-pro-checkout]:disabled { opacity: .65; cursor: wait; }
.checkout-feedback { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; color: var(--night-muted); grid-column: 1 / -1; }
.checkout-feedback[data-error=true] { color: #ffa997; }
.site-account-nav .checkout-feedback { flex-basis: 100%; max-width: 280px; text-align: end; }
.plan-card .plan-account-action { display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  padding: 12px 22px; border: 1px solid var(--night-faint); border-radius: 999px; margin-top: 20px;
  color: var(--night-ink); text-decoration: none; font-weight: 650; }
.plan-card-pro .plan-account-action { background: var(--volt); border-color: var(--volt); color: var(--night); }
.plan-account-action:focus-visible { outline: 3px solid var(--volt); outline-offset: 4px; }
@media (max-width: 1200px) {
  /* A filtered header would anchor its fixed menu to the header instead of the viewport. */
  .js header.top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--night); }
  .js header.top nav.top-nav { position: fixed; inset-inline-end: 16px;
    bottom: max(78px, calc(78px + env(safe-area-inset-bottom))); display: none;
    width: min(280px, calc(100vw - 32px)); max-height: calc(100dvh - 160px); overflow-y: auto;
    flex-direction: column; gap: 0; padding: 10px; border: 1px solid var(--night-line);
    border-radius: 18px; background: var(--night-card); box-shadow: 0 18px 60px -20px #000e; }
  .js header.top.nav-open nav.top-nav { display: flex; }
  .js header.top nav.top-nav a { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; }
  .js .menu-toggle { display: flex; }
}
@media (max-width: 420px) {
  .site-account-nav { gap: 2px; }
  .site-account-nav a, .site-account-nav .account-upgrade, .site-account-nav .account-signout { padding-inline: 10px; }
  header.top .wrap, .topbar-inner { gap: 8px; flex-wrap: wrap; height: auto; min-height: 64px; }
}