/* Integrates the two interactive assessments with the redesigned SYN Labs site. */
.syn-assessment-page {
  min-height: 100vh;
  background: #f7f4ee;
  color: #14151a;
  font-family: "Instrument Sans", Arial, sans-serif;
}

/* The design-component runtime sets its host to one viewport high. These
   assessment pages are longer, so let the host grow before the footer begins. */
html:has(.syn-assessment-page),
body:has(.syn-assessment-page) {
  height: auto !important;
  min-height: 100%;
}

body:has(.syn-assessment-page) #dc-root,
body:has(.syn-assessment-page) #dc-root > .sc-host {
  height: auto !important;
  min-height: 100vh;
}

body:has(.syn-assessment-page) .syn-global-footer {
  position: relative !important;
  z-index: 2;
  clear: both;
  margin: 0 !important;
}

.syn-assessment-page h1,
.syn-assessment-page h2,
.syn-assessment-page h3,
.syn-assessment-page button,
.syn-assessment-page a {
  font-family: "Instrument Sans", Arial, sans-serif !important;
}

.syn-assessment-page .qz-hero,
.syn-assessment-page .hc-hero {
  width: min(1180px, 100%) !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 780px) !important;
  align-items: end !important;
  gap: 0 !important;
  padding: clamp(72px, 9vw, 118px) 32px 58px !important;
}

.syn-assessment-page .qz-hero > div:first-child,
.syn-assessment-page .hc-hero > div:first-child {
  max-width: 780px;
}

.syn-assessment-page .qz-hero > .qz-card,
.syn-assessment-page .hc-hero > .hc-card {
  display: none !important;
}

.syn-assessment-page .qz-hero > div:first-child > div:first-child,
.syn-assessment-page .hc-hero > div:first-child > div:first-child {
  gap: 10px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.syn-assessment-page .qz-hero > div:first-child > div:first-child span:first-child,
.syn-assessment-page .hc-hero > div:first-child > div:first-child span:first-child {
  width: 28px !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: #806747 !important;
}

.syn-assessment-page .qz-hero > div:first-child > div:first-child span:last-child,
.syn-assessment-page .hc-hero > div:first-child > div:first-child span:last-child {
  color: #806747 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}

.syn-assessment-page .qz-hero h1,
.syn-assessment-page .hc-hero h1 {
  max-width: 760px;
  margin-bottom: 22px !important;
  color: #14151a !important;
  font-size: clamp(2.55rem, 6vw, 4.65rem) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.syn-assessment-page .qz-hero h1 span,
.syn-assessment-page .hc-hero h1 span {
  color: #806747 !important;
}

.syn-assessment-page .qz-hero p,
.syn-assessment-page .hc-hero p {
  max-width: 650px !important;
  margin-bottom: 24px !important;
  color: #645f56 !important;
  font-size: clamp(1rem, 1.6vw, 1.12rem) !important;
  line-height: 1.65 !important;
}

.syn-assessment-page #quiz {
  flex: 1;
  padding: 58px 0 104px !important;
  border-top: 1px solid #dfd9cf;
  background: #fbf9f4;
  scroll-margin-top: 78px !important;
}

.syn-assessment-page .quiz-sec-pad,
.syn-assessment-page .hc-quiz-pad {
  width: min(820px, 100%) !important;
  max-width: none !important;
}

.syn-assessment-page #quiz h2,
.syn-assessment-page #quiz h3 {
  color: #14151a !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
}

.syn-assessment-page #quiz h2 {
  font-size: clamp(1.85rem, 4vw, 2.75rem) !important;
  line-height: 1.08 !important;
}

.syn-assessment-page .qz-pillars > div,
.syn-assessment-page .hc-pillars > div {
  border-color: #ded8cd !important;
  border-radius: 14px !important;
  background: #fffefa !important;
  box-shadow: none !important;
}

.syn-assessment-page .syn-assessment-panel {
  border: 1px solid #ded8cd !important;
  border-radius: 20px !important;
  background: #fffefa !important;
  box-shadow: 0 18px 54px rgba(20, 21, 26, .06) !important;
}

.syn-assessment-page [role="radio"],
.syn-assessment-page .hc-opts button {
  border-color: #ded8cd !important;
  border-radius: 12px !important;
  background: #fbf9f4 !important;
  box-shadow: none !important;
}

.syn-assessment-page [role="radio"]:hover,
.syn-assessment-page .hc-opts button:hover {
  border-color: #806747 !important;
  background: #fffefa !important;
}

.syn-assessment-page .qz-float,
.syn-assessment-page .hc-float,
.syn-assessment-page .qz-mobile-start button,
.syn-assessment-page .hc-mobile-start button {
  border: 1px solid #14151a !important;
  border-radius: 999px !important;
  background: #14151a !important;
  color: #fffefa !important;
  box-shadow: 0 12px 30px rgba(20, 21, 26, .16) !important;
}

.syn-assessment-page .qz-float,
.syn-assessment-page .hc-float {
  display: none !important;
}

.syn-assessment-page .qz-mobile-start,
.syn-assessment-page .hc-mobile-start {
  display: flex !important;
  justify-content: center;
  margin-top: 30px;
}

.syn-assessment-page .qz-pillars {
  display: grid !important;
}

.syn-assessment-page .qz-float:hover,
.syn-assessment-page .hc-float:hover,
.syn-assessment-page .qz-mobile-start button:hover,
.syn-assessment-page .hc-mobile-start button:hover {
  border-color: #806747 !important;
  background: #806747 !important;
}

.syn-assessment-page [data-syn-legacy-footer] {
  display: none !important;
}

@media (max-width: 760px) {
  .syn-assessment-page .qz-hero,
  .syn-assessment-page .hc-hero {
    padding: 62px 20px 44px !important;
  }

  .syn-assessment-page .qz-hero h1,
  .syn-assessment-page .hc-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.45rem) !important;
  }

  .syn-assessment-page #quiz {
    padding: 46px 0 78px !important;
  }

  .syn-assessment-page .quiz-sec-pad,
  .syn-assessment-page .hc-quiz-pad {
    padding: 0 18px !important;
  }
}