/* Shared public-page hero shell: matches the main landing-page inset and
   lets each hero image continue behind its transparent navigation. */
body.about-site,
body.pay-site,
body.support-site {
  background: #f7f8f9;
}

body.about-site > .site-header,
body.pay-site > .site-header,
body.support-site > .site-header {
  position: absolute;
  z-index: 20;
  top: 15px;
  right: 15px;
  left: 15px;
  background: transparent;
}

body.about-site > .site-header .brand,
body.pay-site > .site-header .brand,
body.support-site > .site-header .brand,
body.about-site > .site-header .main-nav a,
body.pay-site > .site-header .main-nav a,
body.support-site > .site-header .main-nav a,
body.about-site > .site-header .header-actions a,
body.pay-site > .site-header .header-actions a,
body.support-site > .site-header .header-actions a {
  color: #fff;
}

body.about-site > .site-header .brand,
body.pay-site > .site-header .brand,
body.support-site > .site-header .brand {
  border-radius: .5rem;
  background: rgba(255, 255, 255, .92);
}

body.about-site > .site-header .main-nav a.active,
body.pay-site > .site-header .main-nav a.active,
body.support-site > .site-header .main-nav a.active,
body.about-site > .site-header .main-nav a:hover,
body.pay-site > .site-header .main-nav a:hover,
body.support-site > .site-header .main-nav a:hover {
  color: var(--brand-orange);
}

body.about-site > .site-header .login-link,
body.pay-site > .site-header .login-link,
body.support-site > .site-header .login-link {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .1);
  color: #fff !important;
}

body.about-site .about-hero,
body.pay-site .pay-hero,
body.support-site .support-hero {
  min-height: var(--hero-panel-height) !important;
  margin: 15px 15px 10px;
  padding-inline: var(--hero-content-gutter);
  overflow: hidden;
  border-radius: 20px;
}

body.about-site .about-hero { padding-top: calc(2.5rem + 72px); }
body.pay-site .pay-hero,
body.support-site .support-hero { padding-top: calc(2.5rem + 72px); }

/* The landing-page hero is the typography source of truth for public heroes. */
body.about-site .about-hero,
body.pay-site .pay-hero,
body.support-site .support-hero {
  font-family: var(--font-sans);
}

body.about-site .about-hero h1,
body.pay-site .pay-hero h1,
body.support-site .support-hero h1 {
  font-family: inherit;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

body.about-site .about-hero p,
body.pay-site .pay-hero p,
body.support-site .support-hero p {
  font-family: inherit;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
}

body.about-site .about-page .btn-flip,
body.pay-site .pay-hero__cta {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
}

@media (min-width: 1000px) and (max-width: 1200px) {
  body.about-site .about-hero h1,
  body.pay-site .pay-hero h1,
  body.support-site .support-hero h1 { font-size: 2.375rem; }
}

@media (min-width: 1201px) and (max-width: 1439px) {
  body.about-site .about-hero h1,
  body.pay-site .pay-hero h1,
  body.support-site .support-hero h1 { font-size: 2.75rem; }
}

@media (min-width: 1440px) and (min-height: 850px) {
  body.about-site .about-hero h1,
  body.pay-site .pay-hero h1,
  body.support-site .support-hero h1 { font-size: 3.125rem; }

  body.about-site .about-hero p,
  body.pay-site .pay-hero p,
  body.support-site .support-hero p,
  body.about-site .about-page .btn-flip,
  body.pay-site .pay-hero__cta { font-size: 1rem; }
}

/* Slightly stronger scale for the About and Pay heroes only. */
body.about-site .about-hero h1,
body.pay-site .pay-hero h1 {
  font-size: 2.25rem;
}

body.about-site .about-hero p,
body.pay-site .pay-hero p {
  font-size: 1rem;
}

body.about-site .about-page .btn-flip {
  min-height: 3rem;
  line-height: 3rem;
}

body.pay-site .pay-hero__cta {
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
}

body.pay-site .pay-hero__animation img {
  max-width: min(100%, 34rem);
}

@media (min-width: 1000px) and (max-width: 1200px) {
  body.about-site .about-hero h1,
  body.pay-site .pay-hero h1 { font-size: 2.5rem; }
}

@media (min-width: 1201px) and (max-width: 1439px) {
  body.about-site .about-hero h1,
  body.pay-site .pay-hero h1 { font-size: 2.875rem; }
}

@media (min-width: 1440px) and (min-height: 850px) {
  body.about-site .about-hero h1,
  body.pay-site .pay-hero h1 { font-size: 3.25rem; }

  body.about-site .about-hero p,
  body.pay-site .pay-hero p { font-size: 1.0625rem; }
}

@media (max-width: 999px) {
  body.about-site > .site-header .menu-toggle span,
  body.pay-site > .site-header .menu-toggle span,
  body.support-site > .site-header .menu-toggle span { background: #fff; }

  body.about-site .about-hero,
  body.pay-site .pay-hero,
  body.support-site .support-hero {
    min-height: 0 !important;
    padding-top: 5.5rem;
  }
}