/* This page and the homepage are one company. The tokens, the Lora headline
   scale, the 999px pill buttons and the navy/lime palette are the homepage's;
   only the layout below is specific to this page. Nothing here re-invents a
   colour, a radius or a typeface the homepage has already settled. */
.ncmhce-page {
  --navy: #102a56;
  --navy-deep: #0b1f43;
  --lime: #c9ffad;
  --lime-dark: #153622;
  --violet: #625bf6;
  --violet-soft: #eeecff;
  --home-line: #dfe3ec;
  background: #fff;
}

.ncmhce-page a:focus-visible,
.ncmhce-page button:focus-visible,
.ncmhce-page summary:focus-visible {
  outline: 3px solid #5145cd;
  outline-offset: 3px;
}

.ncmhce-shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.ncmhce-header {
  min-height: 88px;
  gap: 34px;
  background: #fff;
}

.ncmhce-header .brand {
  gap: 12px;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.7px;
}

.ncmhce-header .brand img {
  display: block;
  flex: 0 0 auto;
}

.ncmhce-header .primary-nav {
  margin-left: auto;
  gap: 31px;
}

.ncmhce-header .primary-nav a {
  color: #26334b;
  font-size: 14px;
  font-weight: 680;
}

/* Hero: the homepage hero without the photograph. */
.ncmhce-hero {
  color: #fff;
  background: var(--navy);
}

.ncmhce-hero .hero-inner {
  min-height: 0;
  display: block;
  padding-top: 92px;
  padding-bottom: 100px;
}

.ncmhce-kicker {
  margin: 0 0 20px;
  color: var(--lime);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .15px;
}

.ncmhce-hero h1 {
  max-width: 15ch;
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(50px, 5vw, 67px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -2px;
}

.ncmhce-page .hero-lede {
  max-width: 560px;
  margin: 25px 0 34px;
  color: #dae4f1;
  font-size: 18px;
  line-height: 1.58;
}

.hero-copy > small {
  display: block;
  margin-top: 18px;
  color: #c7d2e1;
  font-size: 13px;
}

/* Sections */
.ncmhce-section {
  padding-top: 112px;
  padding-bottom: 112px;
}

.mechanism {
  background: #f3f1ff;
}

.section-heading {
  max-width: 780px;
}

.ncmhce-page h2 {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(42px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.8px;
}

.ncmhce-page .section-heading .ncmhce-kicker {
  color: #5046c4;
}

.section-heading > p:last-child {
  max-width: 660px;
  margin: 24px 0 0;
  color: #626b80;
  font-size: 17px;
  line-height: 1.55;
}

.mechanism-list {
  max-width: 900px;
  margin-top: 48px;
  border-top: 1px solid #d7d3ed;
}

.mechanism-list article {
  min-height: 118px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 26px;
  align-items: center;
  border-bottom: 1px solid #d7d3ed;
}

.mechanism-list article > span {
  color: #554ac7;
  font-size: 12px;
  font-weight: 850;
}

.mechanism-list h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.3px;
}

.mechanism-list p {
  margin: 9px 0 0;
  color: #626b80;
  font-size: 13px;
  line-height: 1.55;
}

/* Exam format */
.format {
  background: #fff;
}

.format-facts {
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  border-block: 1px solid var(--home-line);
}

.format-facts > div {
  padding: 28px 24px;
  border-right: 1px solid var(--home-line);
}

.format-facts > div:first-child {
  padding-left: 0;
}

.format-facts > div:last-child {
  border-right: 0;
}

.format-facts strong,
.format-facts span {
  display: block;
}

.format-facts strong {
  color: #1e2d49;
  font-family: "Lora", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.6px;
}

.format-facts span {
  margin-top: 6px;
  color: #626b80;
  font-size: 13px;
}

.format-note {
  max-width: 760px;
  margin: 18px 0 0;
  color: #596273;
  font-size: 13px;
  line-height: 1.55;
}

.format-note a,
.ncmhce-page .faq-list a {
  color: #5b55dd;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* Questions */
.ncmhce-faq {
  background: #fff;
  border-top: 1px solid var(--home-line);
}

.ncmhce-faq .ncmhce-shell {
  display: grid;
  grid-template-columns: .67fr 1.33fr;
  gap: 92px;
}

.ncmhce-page .faq-list {
  border-top: 1px solid var(--home-line);
}

.ncmhce-page .faq-list details {
  border-bottom: 1px solid var(--home-line);
}

.ncmhce-page .faq-list summary {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.ncmhce-page .faq-list summary::-webkit-details-marker {
  display: none;
}

.ncmhce-page .faq-list summary span {
  color: #5b55dd;
  font-size: 18px;
  font-weight: 500;
  transition: transform .2s;
}

.ncmhce-page .faq-list details[open] summary span {
  transform: rotate(45deg);
}

.ncmhce-page .faq-list details > p {
  max-width: 650px;
  margin: -4px 0 24px;
  color: #667086;
  font-size: 13px;
  line-height: 1.65;
}

/* Closing call to action: the homepage's navy card. */
.ncmhce-cta {
  padding: 0 0 110px;
  background: #fff;
}

.ncmhce-cta .ncmhce-shell {
  min-height: 265px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px 40px;
  align-items: center;
  padding: 50px 58px;
  border-radius: 30px;
  color: #fff;
  background: var(--navy);
}

.ncmhce-cta h2 {
  color: #fff;
  font-size: clamp(38px, 4vw, 54px);
}

.ncmhce-cta p {
  margin: 10px 0 0;
  color: #d1dbe8;
  font-size: 15px;
}

.ncmhce-footer {
  border-top: 1px solid #e5e7ed;
}

@media (max-width: 980px) {
  .ncmhce-faq .ncmhce-shell {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .ncmhce-cta .ncmhce-shell {
    grid-template-columns: 1fr;
  }

  .ncmhce-cta .ncmhce-shell .button {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .ncmhce-shell {
    width: min(calc(100% - 28px), var(--shell));
  }

  .ncmhce-header {
    width: min(calc(100% - 28px), var(--shell));
    min-height: 66px;
    gap: 12px;
  }

  .ncmhce-header .brand span {
    display: none;
  }

  .ncmhce-header .nav-toggle {
    display: block;
    width: 44px;
    height: 44px;
    margin-left: auto;
  }

  .ncmhce-header .primary-nav {
    left: 14px;
    right: 14px;
    top: 72px;
    gap: 0;
    border-color: #e0e3ea;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(30,38,67,.15);
  }

  .ncmhce-header .primary-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
  }

  .ncmhce-hero .hero-inner {
    padding-top: 60px;
    padding-bottom: 64px;
  }

  .ncmhce-hero h1 {
    font-size: 46px;
    letter-spacing: -1.5px;
  }

  .ncmhce-page .hero-lede {
    font-size: 16px;
  }

  .ncmhce-page .button-lime {
    width: 100%;
  }

  .ncmhce-section {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .ncmhce-page h2 {
    font-size: 41px;
  }

  .mechanism-list article {
    grid-template-columns: 34px 1fr;
    gap: 16px;
    min-height: 106px;
  }

  .format-facts {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .format-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--home-line);
  }

  .format-facts > div:last-child {
    border-bottom: 0;
  }

  .format-facts span {
    margin: 0;
    text-align: right;
  }

  .ncmhce-cta {
    padding-bottom: 80px;
  }

  .ncmhce-cta .ncmhce-shell {
    gap: 19px;
    padding: 40px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ncmhce-page * {
    scroll-behavior: auto;
    transition: none;
  }
}

/* The hero band held a photograph on the homepage and air here. Composed as a
   narrow centred measure instead of the left half of a wide empty field. */
.ncmhce-hero .hero-inner {
  width: min(calc(100% - 40px), 860px);
  text-align: center;
}

.ncmhce-hero h1 {
  max-width: 19ch;
  margin-inline: auto;
}

.ncmhce-page .hero-lede {
  margin-inline: auto;
}

@media (max-width: 760px) {
  .ncmhce-hero .hero-inner { width: min(calc(100% - 28px), 860px); }
}

/* Round 3. This page reused the homepage's row and FAQ components and then set
   them two points smaller, and the higher specificity kept the homepage's own
   readability patch out. Same component, one type scale. */
.mechanism-list p { font-size: 15px; }
.ncmhce-page .faq-list summary { font-size: 15px; }
.ncmhce-page .faq-list details > p { font-size: 15px; }