/* /join uses the shared site header. The join page keeps its own language
   select (join-i18n.js) and a slim bar with the section links and launch chip. */
.join-site-header .join-language select {
  min-height: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
}
.join-site-header .join-language select option { color: #17110A; background: #FFFDF9; }

.join-subnav { border-top: 1px solid rgba(255, 255, 255, .16); }
.join-subnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; }
.join-subnav nav { display: flex; gap: clamp(16px, 2.25vw, 32px); font-size: 14px; font-weight: 700; color: #fff; }
.join-subnav nav a { color: #fff; text-decoration: none; white-space: nowrap; text-shadow: 0 1px 8px rgba(10, 39, 28, .24); }
.join-subnav nav a:hover { color: #ffd1e2; }
.join-subnav .launch-chip { margin-left: auto; color: #fff; border-color: rgba(255, 255, 255, .42); }

/* Room for the taller masthead above the hero. */
.hero { padding-top: clamp(160px, calc(6vw + 120px), 200px); }

@media (max-width: 1020px) {
  .join-subnav nav { display: none; }
}
@media (max-width: 760px) {
  .join-subnav { display: none; }
  .hero { padding-top: 112px; }
}

/* The site stylesheets above are loaded for the header. These undo the few
   rules that would otherwise reach the join page's own content and footer. */
main .eyebrow { line-height: inherit; }
main .check a { text-decoration: underline; }
.flow-footer-main .footer-brand p { margin-top: 0; }
.flow-footer-main .footer-company { font-size: inherit; line-height: inherit; }
.flow-footer-main .footer-group h2 { margin-top: 0; }
.flow-footer-main .footer-group a { font-size: inherit; }
main *::before, main *::after,
.flow-footer *::before, .flow-footer *::after { box-sizing: content-box; }
.flow-footer-main .footer-brand .brand { width: max-content; height: auto; overflow: visible; align-items: normal; flex-shrink: 1; }
.flow-footer-main .footer-brand .brand img { object-fit: fill; }