/* Shared header for the homepage and supporting pages. */
.site-header.site-header--shared {
  background: rgba(21, 23, 20, .82);
  gap: clamp(16px, 2vw, 32px);
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 80px;
  padding: 0 clamp(24px, 4vw, 68px);
}
.site-header--shared .header-brand {
  align-items: center;
  display: inline-flex;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  min-height: 44px;
  white-space: nowrap;
}
.footer-brand.brand--wordmark,
.thank-you-card .brand--wordmark {
  align-items: center;
  display: inline-flex;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  width: max-content;
  text-transform: none;
}
.footer-brand.brand--wordmark { font-size: 19px; }
.thank-you-card .brand--wordmark { margin: 0 auto 36px; }
.site-header--shared nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  font-size: 11px;
  justify-self: start;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-header--shared nav a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; }
.site-header--shared .header-cta {
  font-size: 11px;
  gap: 14px;
  justify-self: end;
  min-height: 44px;
  padding: 11px 15px;
  white-space: nowrap;
}
.site-header--shared .header-cta .cta-label--mobile { display: none; }
.site-header--shared .nav-toggle { display: none; }
.site-header--shared [hidden] { display: none; }
.site-header--shared a:focus-visible,
.site-header--shared button:focus-visible { outline: 2px solid #edc58f; outline-offset: 4px; }
.site-header--shared .header-brand:hover,
.site-header--shared .header-brand:focus-visible { color: #edc58f; }
#home, #how-it-works, #product, #comparison, #pricing { scroll-margin-top: 24px; }

@media (max-width: 75rem) {
  .site-header.site-header--shared {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    height: auto;
    min-height: 70px;
    padding: 10px 18px;
    position: relative;
  }
  .site-header--shared .header-brand { grid-column: 2; grid-row: 1; justify-self: center; font-size: 18px; }
  .site-header--shared .header-cta { grid-column: 3; grid-row: 1; font-size: 10px; gap: 8px; padding: 8px 10px; }
  .site-header--shared nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
  .site-header--shared .nav-toggle:not([hidden]) {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: 600 11px var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .site-header--shared .nav-toggle[aria-expanded="true"] { color: #edc58f; }
  .site-header.site-header--shared[data-navigation-ready] { position: absolute; }
  .site-header--shared[data-navigation-ready] nav {
    align-items: stretch;
    background: #1b1d19;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 18px 28px rgba(0, 0, 0, .2);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    left: 0;
    max-height: calc(100svh - 70px);
    overflow-y: auto;
    padding: 12px 24px 20px;
    position: absolute;
    right: 0;
    top: 100%;
  }
  .site-header--shared nav a { min-height: 48px; font-size: 12px; }
}
@media (max-width: 32rem) {
  .site-header.site-header--shared { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .site-header--shared .header-brand { font-size: 16px; }
  .site-header--shared .header-cta { font-size: 9px; white-space: nowrap; }
  .site-header--shared .header-cta .cta-label--desktop { display: none; }
  .site-header--shared .header-cta .cta-label--mobile { display: inline; }
}