/* Use the compact Rankings headline frame on the other main pages. */
body[data-route="rankings"] #main-content .page-design-heading.page-heading--compact,
body[data-route="register"] #main-content .register-heading,
body[data-route="downloads"] #main-content .downloads-page-title,
body[data-route="guides"] #main-content > .page-heading {
  position: relative;
  z-index: 4;
  isolation: isolate;
  box-sizing: border-box;
  margin-bottom: 24px !important;
  padding: 10px 24px !important;
  border: 1px solid #c1e8fa;
  border-image: url('../assets/silver-ice-window-frame-v1.svg') 180 200 / 24px 27px / 12px stretch;
  border-radius: 0;
  background: var(--menu-mark) center / contain no-repeat, var(--grw-fill) !important;
  box-shadow: var(--grw-shadow);
  text-align: center;
}

body[data-route="rankings"] #main-content .page-design-heading.page-heading--compact::after,
body[data-route="register"] #main-content .register-heading::after,
body[data-route="downloads"] #main-content .downloads-page-title::after,
body[data-route="guides"] #main-content > .page-heading::after {
  content: '';
  position: absolute;
  inset: 5px 10px;
  z-index: 0;
  border: 1px solid #fff;
  box-shadow: inset 0 0 0 1px rgba(58, 158, 207, .17);
  pointer-events: none;
}

body:is([data-route="rankings"],[data-route="register"],[data-route="downloads"],[data-route="guides"])
  #main-content :is(.page-design-heading.page-heading--compact,.register-heading,.downloads-page-title,.page-heading) > * {
  position: relative;
  z-index: 1;
}

body:is([data-route="rankings"],[data-route="register"],[data-route="downloads"],[data-route="guides"])
  #main-content :is(.page-design-heading.page-heading--compact,.register-heading,.downloads-page-title,.page-heading) h2 {
  margin: 0;
  color: #385e77;
  font: 400 clamp(24px, 2.5vw, 28px)/1.25 Georgia, 'Times New Roman', serif !important;
  letter-spacing: .065em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Keep Register's account label and explanation while matching the title treatment. */
body[data-route="register"] #main-content .register-heading small {
  display: block;
  margin-bottom: 5px;
}
body[data-route="register"] #main-content .register-heading p {
  margin-top: 6px;
}

@media (max-width: 720px) {
  body[data-route="rankings"] #main-content .page-design-heading.page-heading--compact,
  body[data-route="register"] #main-content .register-heading,
  body[data-route="downloads"] #main-content .downloads-page-title,
  body[data-route="guides"] #main-content > .page-heading {
    padding: 10px 14px !important;
    border-image-width: 23px 26px;
    border-image-outset: 10px;
  }
}