/* Reusable gray header skin for backend pages with the light menu variant. */
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) {
  --gray-header-bg: #e7e9eb;
  --gray-header-cover-height: 95px;
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell {
  display: block;
  position: relative;
  background: var(--gray-header-bg);
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--gray-header-cover-height);
  background: var(--gray-header-bg);
  pointer-events: none;
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .site-header.figma-header {
  width: 100%;
  max-width: 1750px;
  height: 95px;
  min-height: 95px;
  margin: 0 auto;
  background: transparent;
  color: var(--navy);
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .brand-logo::after {
  opacity: 1;
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .brand-emblem,
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .brand-lockup {
  opacity: 0;
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .header-nav a,
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .favorite-link,
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .social-links a {
  color: var(--navy);
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .favorite-link img,
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .social-links img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(967%) hue-rotate(178deg) brightness(90%) contrast(94%);
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .header-nav a.is-active,
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .header-nav a[aria-current="page"] {
  color: var(--gold);
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .icon-link,
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .phone-link {
  background: #344258;
  color: #fff;
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .menu-toggle {
  color: var(--navy);
}

:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .menu-toggle span,
:is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .menu-toggle::before {
  background: var(--navy);
}

@media (max-width: 1750px) and (min-width: 768px) {
  :is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) {
    --gray-header-cover-height: calc(5.45977vw - 1.9655px);
  }
}

@media (max-width: 760px) {
  :is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) {
    --gray-header-cover-height: 80px;
  }

  :is(.figma-gray-header-page, .page-blog, .page-article, .figma-backend-wrap:has(.backend-blog-page), .figma-backend-wrap:has(.backend-article-page)) .figma-header-shell .site-header.figma-header {
    width: calc(100vw - 40px);
    height: 60px;
    min-height: 60px;
    margin: 10px auto 0;
  }
}

/* Explicit backend gray skin. Kept separate from :has() selectors so page CSS loaded later cannot restore the white header state. */
.figma-backend-wrap.figma-gray-header-page {
  --gray-header-bg: #e7e9eb;
  --gray-header-cover-height: 95px;
  --gray-header-ink: var(--navy, #12233b);
  --gray-header-pill: #344258;
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell {
  display: block;
  position: relative;
  background: var(--gray-header-bg);
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--gray-header-cover-height);
  background: var(--gray-header-bg);
  pointer-events: none;
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .site-header.figma-header {
  width: 100%;
  max-width: 1750px;
  height: 95px;
  min-height: 95px;
  margin: 0 auto;
  background: transparent;
  color: var(--gray-header-ink);
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .brand-logo::after {
  opacity: 1;
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .brand-emblem,
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .brand-lockup {
  opacity: 0;
  filter: none;
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .header-nav a,
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .header-nav a[data-sale-trigger],
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .header-nav a.is-active,
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .header-nav a[aria-current="page"],
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .favorite-link,
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .social-links a {
  color: var(--gray-header-ink);
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .favorite-link img,
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .social-links img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(967%) hue-rotate(178deg) brightness(90%) contrast(94%);
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .icon-link,
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .phone-link {
  background: var(--gray-header-pill);
  color: #fff;
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .icon-link img {
  filter: none;
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .menu-toggle {
  color: var(--gray-header-ink);
}

.figma-backend-wrap.figma-gray-header-page .figma-header-shell .menu-toggle span,
.figma-backend-wrap.figma-gray-header-page .figma-header-shell .menu-toggle::before {
  background: var(--gray-header-ink);
  filter: none;
}

@media (max-width: 1750px) and (min-width: 768px) {
  .figma-backend-wrap.figma-gray-header-page {
    --gray-header-cover-height: calc(5.45977vw - 1.9655px);
  }
}

@media (max-width: 760px) {
  .figma-backend-wrap.figma-gray-header-page {
    --gray-header-cover-height: 80px;
  }

  .figma-backend-wrap.figma-gray-header-page .figma-header-shell .site-header.figma-header {
    width: calc(100vw - 40px);
    height: 60px;
    min-height: 60px;
    margin: 10px auto 0;
  }
}