.pgx-page {
  background: #fff
}

.pgx-page .desktop-nav a[aria-current="page"],
.pgx-page .mobile-nav a[aria-current="page"] {
  color: var(--green);
  font-weight: 600
}

.pgx-page .desktop-nav a[aria-current="page"]::after {
  right: 0
}

.pgx-opening {
  background: #fff
}

.pgx-opening-inner {
  padding: 112px 0 78px
}

.pgx-opening h1 {
  margin: var(--space-eyebrow-heading) 0 0;
  font-family: var(--font-sans);
  font-size: var(--type-page-h1-size);
  font-weight: var(--type-page-h1-weight);
  line-height: var(--type-page-h1-line);
  letter-spacing: var(--type-page-h1-track)
}

.pgx-opening h2 {
  max-width: 940px;
  margin: var(--space-heading-lead) 0 0;
  font-family: var(--font-sans);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-track);
  margin-top: 4px;
}

.pgx-opening-lead {
  max-width: 880px;
  margin: var(--space-heading-lead) 0 0;
  color: #526771;
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-line)
}

.pgx-technology {
  padding: 100px 0
}

.pgx-technology-qpcr {
  background: #f7f9f7
}

.pgx-technology-ngs {
  background: #fff
}

.technology-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(58px, 8vw, 112px);
  align-items: start
}

.technology-intro {
  position: sticky;
  top: 104px
}

.technology-label {
  margin: 0 0 var(--space-eyebrow-heading);
  color: var(--green);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase
}

.technology-intro h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-track)
}

.technology-intro>p:last-child {
  max-width: 620px;
  margin: var(--space-heading-lead) 0 0;
  color: #526771;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line)
}

.product-directory {
  min-width: 0;
  padding-top: 4px
}

.product-group {
  scroll-margin-top: 108px
}

.product-group+.product-group {
  margin-top: 40px
}

.product-group h3 {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-track);
  color: var(--navy)
}

.product-list {
  border-top: 1px solid var(--line)
}

.product-item {
  scroll-margin-top: 100px;
  border-bottom: 1px solid var(--line);
  background: transparent
}

.product-item summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 21px 46px 21px 0;
  list-style: none;
  cursor: pointer
}

.product-item summary::-webkit-details-marker {
  display: none
}

.product-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--green)
}

.product-item[open] summary::after {
  content: "−"
}

.product-item summary:focus-visible {
  outline: 3px solid rgba(3, 105, 75, .32);
  outline-offset: 5px
}

.product-name {
  font-weight: 600;
  line-height: var(--type-body-line)
}

.product-code {
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  font-weight: 600;
  line-height: var(--type-meta-line);
  letter-spacing: .07em;
  /* color: #6a7b82; */
  white-space: nowrap
}

.product-detail {
  padding: 0 46px 26px 0
}

.product-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 22px
}

.product-facts div {
  border-left: 2px solid #cfdeda;
  padding-left: 13px
}

.product-facts dt {
  font-size: var(--type-meta-size);
  font-weight: 700;
  line-height: var(--type-meta-line);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #61757c
}

.product-facts dd {
  margin: 7px 0 0;
  color: #344f5b;
  font-size: var(--type-small-size);
  line-height: var(--type-small-line)
}

.product-action {
  display: inline-block;
  padding: 11px 17px;
  background: var(--green);
  color: #fff;
  font-size: var(--type-cta-size);
  font-weight: var(--type-cta-weight);
  line-height: var(--type-cta-line);
  transition: background-color .18s ease, transform .18s ease
}

.product-action:hover,
.product-action:focus-visible {
  background: #02563e;
  transform: translateY(-1px)
}

.pgx-contact {
  padding: 94px 0;
  background: var(--mint)
}

.pgx-contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: end
}

.pgx-contact h2 {
  max-width: 780px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-track)
}

.pgx-contact p {
  max-width: 700px;
  margin: var(--space-heading-lead) 0 0;
  color: #4f646d;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line)
}

.pgx-contact-inner>a {
  display: inline-block;
  padding: 15px 24px;
  background: var(--green);
  color: #fff;
  font-size: var(--type-cta-size);
  font-weight: var(--type-cta-weight);
  line-height: var(--type-cta-line);
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease
}

.pgx-contact-inner>a:hover,
.pgx-contact-inner>a:focus-visible {
  background: #02563e;
  transform: translateY(-2px)
}

@media(max-width:980px) {
  .pgx-opening-inner {
    padding: 86px 0 62px
  }

  .pgx-technology {
    padding: 76px 0
  }

  .technology-layout {
    grid-template-columns: 1fr;
    gap: 46px
  }

  .technology-intro {
    position: static
  }

  .technology-intro h2 {
    max-width: 780px
  }

  .product-directory {
    padding-top: 0
  }

  .product-facts {
    grid-template-columns: 1fr;
    gap: 13px
  }

  .pgx-contact {
    padding: 76px 0
  }

  .pgx-contact-inner {
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: start
  }

  .pgx-contact-inner>a {
    width: max-content
  }
}

@media(max-width:560px) {
  .pgx-opening-inner {
    padding: 70px 0 50px
  }

  .pgx-opening h1 {
    margin-top: var(--space-eyebrow-heading)
  }

  .pgx-opening h2,
  .pgx-opening-lead {
    margin-top: var(--space-heading-lead)
  }

  .pgx-technology {
    padding: 62px 0
  }

  .technology-layout {
    gap: 38px
  }

  .technology-intro>p:last-child {
    margin-top: var(--space-heading-lead)
  }

  .product-group+.product-group {
    margin-top: 34px
  }

  .product-item summary {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 19px 38px 19px 0
  }

  .product-code {
    white-space: normal
  }

  .product-detail {
    padding: 0 0 24px
  }

  .product-action {
    width: 100%;
    text-align: center
  }

  .pgx-contact {
    padding: 64px 0
  }

  .pgx-contact>a {
    width: 100%;
    text-align: center
  }
}

@media(prefers-reduced-motion:reduce) {

  .product-action:hover,
  .product-action:focus-visible,
  .pgx-contact>a:hover,
  .pgx-contact>a:focus-visible {
    transform: none
  }
}