/* Canonical public header metrics shared by the SPA, blog, guides and posts. */
.public-mobile-menu:not([open]) .public-menu-close-icon, .public-mobile-menu[open] .public-menu-open-icon { display: none; }
.site-header.site-header, .public-header.public-header { --ink: #171717; --line: #dfe3e8; --red: #d4313b; }
:root {
  --shared-header-height: 78px;
  --shared-header-mobile-height: 72px;
  --shared-header-shell: min(1200px, calc(100vw - 48px));
  --shared-header-logo-width: 172px;
  --shared-header-nav-gap: 20px;
}

.site-header.site-header,
.public-header.public-header {
  box-sizing: border-box;
  position: sticky;
  font-family: 'Manrope Variable', Manrope, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  z-index: 60;
  top: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, .93);
  border-bottom: 1px solid rgba(23, 23, 23, .08);
  backdrop-filter: blur(18px);
}

.site-header.site-header > .header-inner.header-inner,
.public-header.public-header > .public-shell.public-shell {
  box-sizing: border-box;
  width: var(--shared-header-shell);
  height: var(--shared-header-height);
  min-height: var(--shared-header-height);
  margin-inline: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.site-header.site-header .brand.brand img,
.public-header.public-header .public-brand.public-brand img {
  display: block;
  width: var(--shared-header-logo-width);
  height: auto;
  object-fit: contain;
}

@media (min-width: 840px) {
  .site-header.site-header .desktop-nav.desktop-nav,
  .public-header.public-header .public-desktop-nav.public-desktop-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--shared-header-nav-gap);
  }

  .site-header.site-header .desktop-nav.desktop-nav > a,
  .site-header.site-header .desktop-nav.desktop-nav > button,
  .public-header.public-header .public-desktop-nav.public-desktop-nav > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4d525a;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
  }

  .site-header.site-header .desktop-nav.desktop-nav > :is(a, button)::after,
  .public-header.public-header .public-desktop-nav.public-desktop-nav > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transition: transform .2s ease;
  }

  .site-header.site-header .desktop-nav.desktop-nav > :is(a, button):hover,
  .public-header.public-header .public-desktop-nav.public-desktop-nav > a:hover {
    color: var(--red);
  }

  .site-header.site-header .desktop-nav.desktop-nav > :is(a, button):is(:hover, :focus-visible)::after,
  .public-header.public-header .public-desktop-nav.public-desktop-nav > a:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
  }

  .site-header.site-header .header-actions.header-actions,
  .public-header.public-header .public-header-actions.public-header-actions,
  .site-header.site-header .user-cluster.user-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .site-header.site-header .credit-pill.credit-pill,
  .public-header.public-header .public-credit-pill.public-credit-pill {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    padding-inline: 12px;
    border: 1px solid #171717;
    border-radius: 10px;
    background: #171717;
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .site-header.site-header .user-button.user-button,
  .public-header.public-header .public-account.public-account > summary {
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #202226;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1;
    text-transform: uppercase;
  }
}

.site-header.site-header .account-menu.account-menu,
.public-header.public-header .public-account > div {
  top: calc(100% + 12px); right: 0; width: 230px; padding: 7px;
  border: 1px solid #dfe3e8; border-radius: 14px; background: #fff;
  box-shadow: 0 18px 45px rgba(17,18,22,.14);
}
.site-header.site-header .account-menu button,
.public-header.public-header .public-account > div :is(a,button) {
  width: 100%; min-height: 44px; padding: 0 11px; margin: 0;
  border: 0; border-radius: 9px; background: transparent; color: #171717;
  font: 700 13px/1.5 'Manrope Variable', Manrope, system-ui, sans-serif;
  text-align: left;
}
.site-header.site-header .account-menu button:hover,
.public-header.public-header .public-account > div :is(a,button):hover { background: #f3f5f7; color: #d4313b; }
.site-header.site-header .header-actions > .button,
.public-header.public-header .public-signin {
  min-width: 96px; min-height: 40px; padding: 0 16px; gap: 9px;
  border: 1px solid #171717; border-radius: 10px; background: #171717; color: #fff;
  font-size: 13px; font-weight: 750; line-height: 1;
}

.public-header .public-account > div :is(a, button),
.site-header .account-menu :is(a, button),
.public-header .public-mobile-menu nav :is(a, button),
.site-header .mobile-nav :is(a, button) {
  display: flex;
  align-items: center;
  gap: 9px;
}
.public-header nav svg, .site-header nav svg,
.public-header .public-account > div svg, .site-header .account-menu svg {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (min-width: 840px) and (max-width: 1100px) {
  :root { --shared-header-nav-gap: 10px; --shared-header-logo-width: 142px; }
  .site-header.site-header .desktop-nav.desktop-nav > :is(a,button),
  .public-header.public-header .public-desktop-nav.public-desktop-nav > a { font-size: 13px; gap: 4px; }
}

@media (max-width: 839px) {
  :root {
    --shared-header-shell: min(100% - 24px, 1200px);
    --shared-header-logo-width: 142px;
  }

  .site-header.site-header > .header-inner.header-inner,
  .public-header.public-header > .public-shell.public-shell {
    height: var(--shared-header-mobile-height);
    min-height: var(--shared-header-mobile-height);
  }
  .public-header.public-header .public-header-actions { position: static; }
  .site-header.site-header .credit-pill, .public-header.public-header .public-credit-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; min-height: 38px; padding: 0 12px; border: 1px solid #171717;
    border-radius: 10px; background: #171717; color: #fff; font-size: 13.44px; font-weight: 800; line-height: 1;
  }
  .public-header.public-header .public-credit-pill span { display: none; }
  .site-header.site-header .mobile-menu-button, .public-header.public-header .public-mobile-menu > summary {
    width: 44px; height: 44px; border: 1px solid #dfe3e8; border-radius: 11px; background: #fff; color: #171717;
  }
  .site-header.site-header .mobile-nav, .public-header.public-header .public-mobile-menu nav {
    position: absolute; top: 100%; left: 0; right: 0; width: 100%; margin: 0;
    display: grid; gap: 0; padding: 8px 12px 18px; border: 0; border-bottom: 1px solid #dfe3e8;
    border-radius: 0; background: #fff; box-shadow: 0 12px 24px #1717170a;
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .site-header.site-header .mobile-nav :is(a,button), .public-header.public-header .public-mobile-menu nav :is(a,button) {
    width: 100%; min-height: 48px; margin: 0; padding: 0; gap: 9px; border: 0;
    border-bottom: 1px solid #dfe3e8; border-radius: 0; color: #171717; background: transparent;
    font: 700 14px/1.5 'Manrope Variable', Manrope, system-ui, sans-serif; text-align: left;
  }
  .public-header.public-header .public-mobile-user { display: none; }
}