@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");

:root {
  --font-montserrat_sans: "Montserrat", sans-serif;
  --font-roboto_sans: "Roboto", sans-serif;

  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 51, 51, 51;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.15),
    hsla(0, 0%, 100%, 0)
  );
  --banner-hover-gradient: linear-gradient(0deg, #004a5c, #00718c 87.43%);
  --banner-hover-gradient2: linear-gradient(0deg, #005a70, #007d9b 87.43%);
  --hover-gradient: linear-gradient(0deg, #800043, #b31245);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-font-weight-bolder: 700;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-white: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.15),
    hsla(0, 0%, 100%, 0)
  );
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --outline-blue: #86b7fe;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
  --bs-teal-anchor: #006983;
  --bs-teal2-anchor: #008094;
  --bs-red-anchor: #a51140;
  --bs-purplish-red: #b40b47;
  --bs-blue-anchor: #0054a6;
  --bs-purple-anchor: #7965af;
  --app-hero-text-shadow: #444;
  --app-maroon-accent: #a51140;
  --app-maroon-accent-light: rgba(186, 18, 72, 0.15);
  --app-light-background: #f9f6f5;
  --app-pink-background: #e0c3ca;
  --app-chapter-background: #dcb7bf;
  --app-chapter-btn-background: #f2ebef;
  --app-chapter-btn-played-background: #f3eeec;
  --app-light-gray: #f8f8f8;
  --app-very-light-gray: #f7f7f7;
  --app-border-light-gray: #ddd;
  --app-light-greenish-gray: #f1f6f3;
  --app-dark-green: #164322;
  --light-blue-gray: #e5f0f2;
  --pale-ice-blue: #f7fbfc;
  --dark-gray-color: #333333;

  /* Additional color variables for direct hex codes */
  --cyf-maroon-dark: #610033;
  --cyf-maroon-hover: #800043;
  --cyf-red-bright: #b31245;
  --cyf-text-dark: #333;
  --cyf-teal-dark: #004a5c;
  --cyf-teal-medium: #009eb5;
  --background-color-blue: #3d7d93;
  --cyf-teal-hover-dark: #005a70;
  --cyf-teal-hover-light: #007d9b;
  --cyf-bg-pink-light: #f2e6e9;
  --cyf-bg-pink-hover: #f3dee5;
  --cyf-light-gray: #eaeaea;
  --cyf-shadow-pink: #fdebf1;
  --cyf-shadow-purple: #eeebf5;
  --cyf-shadow-blue: #dff9ff;
  --cyf-lavendar: #830065;
  --cyf-shadow-lavendar: #ffdff8;
  --cyf-active-teal: #982441;
  --cyf-light-dark-teal: #909090;
  --cyf-light-teal: #f6f8f9;
  --cyf-bg-teal-transparent: rgba(0, 128, 148, 0.08);
  --cyf-bg-message: #f9f6f5;
  --cyf-shadow-gray: rgba(88, 89, 91, 0.7);
  --cyf-shadow-blue-gray: rgba(110, 136, 162, 0.32);
  --cyf-teal2-dark: #0c7485;
  --cyf-teal2-light: #08a8c1;
  --hero-para-color: #666;
  --hero-caption-color: #999;
  --hero-red-color: rgb(165, 17, 64);
  --hero-container-color: hsla(0, 0%, 56%, 0.5);
  --cta-blue-bg: #f5f8fa;
  --fancybutton-hover: #f3dee5;

  --bs-gutter-x: 24px;
  --bs-gutter-y: 0;
  --bs-modal-inner-border-radius: calc(8px - 1px);
  --bs-modal-header-padding-x: 16px;
  --bs-modal-header-padding-y: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(51, 51, 51, 0);
}

body .red {
  color: var(--app-maroon-accent);
}

body .dark-red {
  color: var(--cyf-maroon-dark);
}

body .darkTeal {
  color: var(--cyf-teal-dark);
}

body a {
  text-decoration: underline;
  outline: none;
}

b,
strong {
  font-weight: bolder;
}

a {
  color: var(--bs-link-color);
  text-decoration: underline;
}

a:hover {
  color: var(--bs-link-hover-color);
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

body a.red,
body .red {
  color: var(--bs-red-anchor);
}

body .darkTeal {
  color: var(--cyf-teal-dark);
}

body a.blue,
body a.teal {
  color: var(--bs-teal-anchor);
}

body a.arrow-link span.text,
body a.arrow-link.red {
  color: var(--bs-red-anchor);
}

body b,
body strong {
  font-weight: var(--bs-body-font-weight-bolder);
}

body .purplish-red {
  color: var(--bs-purplish-red);
}

body .font-weight-medium {
  font-weight: 500;
}

body a.blue {
  color: var(--bs-blue-anchor);
}

body a.purple {
  color: var(--bs-purple-anchor);
}

body a.teeal2 {
  color: var(--bs-teal2-anchor);
}

body a.black {
  color: var(--cyf-text-dark);
}

body .teal {
  color: var(--bs-teal-anchor);
}

body a.black,
body .black {
  color: var(--cyf-text-dark);
}

body a.underline,
body a:hover {
  text-decoration: underline;
}

body a.arrow-link:hover span.text:after,
body a.arrow-link:hover.no-span:after {
  transform: translateX(1.5px);
}

body a:hover {
  font-weight: 500;
  outline: none;
}

body a:hover.red,
body a:hover.red span.text {
  color: var(--bs-red-anchor);
}

body a:hover.blue,
body a:hover.blue span.text,
body a:hover.teal,
body a:hover.teal span.text {
  color: var(--bs-teal-anchor);
}

body a:hover.teal2,
body a:hover.teal2 span.text {
  color: var(--bs-teal2-anchor);
}

body a:hover.black,
body a:hover.black span.text {
  color: var(--cyf-text-dark);
}

body a:hover.white,
body a:hover.white span.text {
  color: var(--bs-white);
}

body a span.text {
  position: relative;
}

body a.download-link {
  text-decoration: none;
  display: inline-flex;
  padding-right: 28px;
}

body .dark-red {
  color: var(--cyf-maroon-dark);
}

body .smaller-size.h2,
body h2.smaller-size {
  font-size: 22px;
}

body .large-size.h2,
body h2.large-size {
  font-size: 28px;
  line-height: 1.35;
}

body .h4,
body h4 {
  font-weight: 500;
  font-size: 18px;
}

body .h4,
body .h5,
body h4,
body h5 {
  font-family: var(--font-montserrat_sans);
  font-style: normal;
  line-height: 1.4;
  margin: 0;
}

body .extended-margin {
  margin-bottom: 20px;
}

body ul {
  font-family: var(--font-roboto_sans);
}

body ol,
body ul {
  padding-left: 32px;
}

body dl,
body ol,
body ul {
  margin-top: 0px;
  margin-bottom: 16px;
}

ul ul {
  margin-bottom: 0;
}

body ul.red-bullets {
  margin: 0px;
  padding: 0px 28px 0px 16px;
  list-style: none;
}

body ul.red-bullets > li,
body ul.red-bullets > li ul li {
  font-family: var(--font-roboto_sans);
  font-size: 16px;
  padding-bottom: 8px;
}

body ul.red-bullets > li ul li {
  list-style: none;
}

body ul.red-bullets > li ul li:before {
  content: "-";
  color: inherit;
  font-weight: 700;
  display: inline-block;
  width: 16px;
  margin-left: -16px;
  position: relative;
  top: -1px;
}

body ul.red-bullets > li::before {
  content: "•";
  color: var(--bs-red-anchor);
  font-weight: 700;
  display: inline-block;
  width: 16px;
  margin-left: -16px;
}

body a.download-link span.text:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 9px);
  left: calc(100% + 12px);
  width: 18px;
  height: 18px;
  background: url(/icons/btn-icon-download-red.svg) no-repeat;
  background-size: contain;
  background-position: 100%;
  transform: translateY(-1px);
  transition: transform 0.1s ease-in-out;
}

body a.download-link.teal2 span.text:after {
  background: url(/icons/btn-icon-download-teal2.svg) no-repeat;
}

body h1 {
  font-family: var(--font-montserrat_sans);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: var(--cyf-text-dark);
  margin: 0;
}

body h2 {
  font-family: var(--font-montserrat_sans);
  font-style: normal;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.4;
  color: var(--cyf-text-dark);
  margin: 0;
}

body .smaller-size.h2,
body h2.smaller-size {
  font-size: 22px;
}

body .large-size.h2,
body h2.large-size {
  font-size: 28px;
  line-height: 1.35;
}

body h3,
body .h3 {
  font-family: var(--font-montserrat_sans);
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--cyf-text-dark);
  margin: 0;
}

body h4 {
  font-weight: 500;
  font-size: 18px;
}

body h4,
body h5 {
  font-family: var(--font-montserrat_sans);
  font-style: normal;
  line-height: 1.4;
  color: var(--cyf-text-dark);
  margin: 0;
}

body h6 {
  font-style: normal;
  font-weight: var(--bs-body-font-weight);
  color: var(--cyf-text-dark);
}

body p {
  font-family: var(--font-roboto_sans);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 16px;
  font-style: normal;
  font-weight: 400;
  color: var(--cyf-text-dark);
}

body .montserrat {
  font-family: var(--font-montserrat_sans);
  font-weight: 500;
}

body p.large-size {
  font-size: 18px;
  line-height: 1.45;
}

body p.large-size {
  font-size: 18px;
  line-height: 1.45;
}

body p.larger-size {
  font-size: 19px;
  line-height: 1.45;
}

body p.small-text {
  font-size: 13px;
  line-height: 1.4;
}

body a.arrow-link {
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  padding-right: 46px;
  font-family: var(--font-roboto_sans);
}

body a.arrow-link:hover {
  font-weight: 700;
  text-decoration: none;
}

body a.arrow-link.no-span {
  position: relative;
}

body a.arrow-link.no-span::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 8px);
  right: 1.5px;
  width: 34px;
  height: 16px;
  background: url(/icons/btn-icon-arrow-red.svg) no-repeat;
  background-size: contain;
  background-position: 100%;
  transition: transform 0.1s ease-in-out;
}

body a.arrow-link span.text:hover::after,
body a.arrow-link.no-span:hover::after {
  transform: translateX(2px);
}

body a.arrow-link span.text,
body a.arrow-link {
  display: block;
  width: 100%;
}

body a.arrow-link span.text:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 8px);
  right: 0;
  left: calc(100% + 8px);
  width: 34px;
  height: 16px;
  background: url(/icons/btn-icon-arrow-red.svg) no-repeat;
  background-size: contain;
  background-position: 100%;
  transition: transform 0.1s ease-in-out;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

body ul.blue-bullets,
body ul.teal-bullets {
  margin: 0;
  padding: 0 28px 0 16px;
  list-style: none;
}

body ul.teal2-bullets {
  margin: 0;
  padding: 0 28px 0 16px;
  list-style-type: none;
}

body .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

body .hollow-cta-btn-blue.teal2 {
  border: 1px solid var(--bs-teal2-anchor);
  color: var(--bs-teal2-anchor);
}

body .hollow-cta-btn-blue,
body .hollow-cta-btn-red {
  text-decoration: none;
  color: var(--bs-teal-anchor);
  background: none;
  border: 1px solid var(--bs-teal-anchor);
  padding: 12px;
  display: block;
  width: 100%;
  max-width: 346px;
  min-height: -moz-fit-content;
  min-height: fit-content;
  text-align: center;
  border-radius: 6px;
  font-family: var(--font-montserrat_sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  transition: all 0.1s ease-in-out;
  opacity: 1;
  text-shadow: none;
}

body .pulled-sup {
  position: relative;
}

body .pull {
  position: relative;
  padding-left: 6.5px;
}

body .pulled-sup .pull {
  position: absolute;
  left: -13px;
}

body .hollow-cta-btn-red {
  color: var(--app-maroon-accent);
  border: 1px solid var(--app-maroon-accent);
}

body .hollow-cta-btn-red span.text {
  display: inline-block;
  color: var(--app-maroon-accent);
  position: relative;
}

body .hollow-cta-btn-red:hover {
  color: var(--app-maroon-accent);
  background: var(--cyf-bg-pink-hover);
  text-decoration: none;
}

body .footnote {
  padding-bottom: 8px;
}

body .footnote:last-of-type {
  padding-bottom: 0;
}

body .hollow-cta-btn-blue:hover {
  background: var(--cyf-bg-teal-transparent);
  text-decoration: none;
}

body .cta-btn-blue.teal2:hover {
  background: linear-gradient(
    0deg,
    var(--cyf-teal-hover-dark),
    var(--cyf-teal-medium) 87.43%
  );
}

body .cta-btn-blue.teal2:hover span.text {
  color: var(--bs-white);
}

body a:hover.teal2,
body a:hover.teal2 span.text {
  color: var(--bs-teal2-anchor);
}

section .icon-with-heading {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
}

section .icon-with-heading.vertically-centered {
  align-items: center;
}

section .icon-with-heading.stack-in-mobile {
  flex-direction: column;
  text-align: center;
}

section .icon-with-heading img {
  margin-right: 20px;
}

section .icon-with-heading img.smaller-icon {
  width: 60px;
  height: auto;
  margin-right: 16px;
}

section .icon-with-heading.stack-in-mobile img {
  margin: 0 auto 20px;
}

section .icon-with-heading :not(img) {
  margin-bottom: 0;
}

.hero-section {
  position: relative;
  background-repeat: no-repeat;
  background-size: 0 0;
}

.hero-section h1 {
  margin: 18px 0 15px;
}

body .h1,
body h1 {
  font-family: var(--font-montserrat_sans);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: var(--cyf-text-dark);
  margin: 0;
}

.hero-section.longer-text h1 {
  font-size: 24px;
  line-height: 1.4;
}

.hero-section p {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 10px;
}

.hero-section p.btn-row {
  margin: 0 0 22px;
}

.hero-section.mobile-order-reverse {
  background-color: transparent;
}

.hero-section .mobile-bg {
  background-size: 120% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  padding-bottom: 51vw;
}

.hero-section.model-note .mobile-bg {
  position: relative;
}

.hero-section.mobile-order-reverse .mobile-bg {
  background-size: 100% auto;
  background-position: top;
  padding-top: 86vw;
  padding-bottom: 16px;
}

.hero-section.mobile-order-reverse.model-note .mobile-bg {
  padding-top: 85vw;
}

body .teal2 {
  color: var(--bs-teal2-anchor);
}

.tooltip-trigger {
  border-bottom-width: 2px;
  border-bottom-style: dotted;
}

.tcl-section .tooltip-trigger {
  border-bottom-color: var(--bs-teal-anchor);
  color: var(--bs-teal-anchor);
}

.tooltip-trigger.teal2 {
  border-bottom-color: var(--bs-teal2-anchor);
  color: var(--bs-teal2-anchor);
}
.tooltip-trigger.red {
  border-bottom-color: var(--app-maroon-accent);
  color: inherit;
}
.tooltip-trigger:hover {
  cursor: pointer;
}

body .cta-btn-blue {
  text-decoration: none;
  color: var(--bs-white);
  background: linear-gradient(
    0deg,
    var(--cyf-teal-dark),
    var(--cyf-teal-hover-light) 87.43%
  );
  border: 1px solid var(--bs-white);
  padding: 12px;
  display: block;
  width: 100%;
  max-width: 346px;
  min-height: -moz-fit-content;
  min-height: fit-content;
  text-align: center;
  border-radius: 6px;
  font-family: var(--font-montserrat_sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  transition: all 0.1s ease-in-out;
  opacity: 1;
  text-shadow: none;
}

.bcl-cta-banner2 .image-div {
  padding-right: 0;
  padding-left: 0;
}

body .cta-btn-blue.teal2 {
  background: linear-gradient(
    0deg,
    var(--cyf-teal2-dark),
    var(--cyf-teal2-light) 87.43%
  );
  transition: all 0.1s ease-in-out;
}

body .cta-btn-blue span.text {
  display: inline-block;
  color: var(--bs-white);
  position: relative;
}

.bcl-cta-banner2 .cta-btn-blue {
  display: block;
  width: 100%;
  max-width: none;
  margin-bottom: 35px;
}

body .cta-btn-blue.download-btn span.text {
  padding-right: 30px;
}

body .cta-btn-blue.download-btn span.text:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 12px);
  right: 0;
  width: 24px;
  height: 24px;
  background: url(/icons/btn-icon-download-white.svg) no-repeat;
  background-size: contain;
  background-position: 100%;
}

body .model-note {
  position: relative;
}

body .model-note:after,
body .model-note .mobile-bg:after {
  position: absolute;
  right: 20px;
  bottom: 16px;
  color: var(--bs-white);
  text-shadow: 1px 1px 2px var(--app-hero-text-shadow);
  font-family: var(--font-montserrat_sans);
  font-size: 11px;
  line-height: 1;
  content: "Model portrayal";
}

.hero-section.mobile-order-reverse.model-note .mobile-bg:after {
  bottom: auto;
  top: calc(82vw - 16px);
}

body ul.blue-bullets > li,
body ul.teal-bullets > li,
body ul.teal2-bullets > li {
  font-family: var(--font-roboto_sans);
  font-size: 16px;
  padding-bottom: 8px;
}

body ul.blue-bullets > li:before,
body ul.teal-bullets > li:before,
body ul.teal2-bullets > li:before {
  content: "•";
  color: var(--bs-teal-anchor);
  font-weight: 700;
  display: inline-block;
  width: 16px;
  margin-left: -16px;
}

body ul.teal2-bullets > li:before {
  color: var(--bs-teal2-anchor);
}

.jumplinkholder .jumplinkanchor {
  position: relative;
  scroll-margin-top: 50px;
}

.jumplinkholder .jumplinkanchor.tcl {
  scroll-margin-top: 60px;
}

.slider-btn-container p.active {
  color: var(--cyf-teal-medium);
  font-weight: bold;
  transition: color 1s;
}

.hero-section .cta-btn-red {
  padding: 12px 16px;
  width: -webkit-fill-available;
  border: none;
}

.hero-section.mobile-order-reverse p.btn-row .cta-btn-red {
  width: 100%;
  max-width: 346px;
  margin-left: auto;
  margin-right: auto;
}

body .cta-btn-red:hover {
  background: var(--hover-gradient);
  text-decoration: none;
  color: var(--bs-body-bg);
}

.hero-section .cta-btn-red .arr {
  display: inline-block;
  margin: 0 0 0 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 32px;
  background-image: url(/icons/right-arrow-white.svg);
  background-repeat: no-repeat;
  background-size: 12px auto;
  background-position: 100%;
  position: relative;
  transform: translateZ(0);
  transition: transform 0.1s ease;
}

.science-steps-group {
  padding: 32px 0;
}

.science-steps-group .heading h2 {
  font-size: 24px;
  text-align: center;
}

.science-steps-group .subheading {
  padding-top: 20px;
}

.science-steps-group .science-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
}

.science-steps-group .science-step .science-step-image {
  width: 284px;
  margin: 0 auto;
}

.science-steps-group .science-step .science-step-copy {
  margin: 20px auto 10px;
  width: 284px;
}

.science-steps-group .science-step .science-step-copy h3 {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.science-steps-group .additonal-copy {
  margin-top: 12px;
  font-weight: 500;
}

.definition-tooltip {
  pointer-events: none;
  --bs-tooltip-bg: var(--bs-body-bg);
  --bs-tooltip-arrow-height: 8px;
  --bs-tooltip-arrow-widith: 16px;
  padding: 8px;
}

.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow,
.bs-tooltip-top .tooltip-arrow {
  bottom: 0;
}

.definition-tooltip.bs-tooltip-auto[data-popper-placement^="top"]
  .tooltip-arrow:before {
  border-top-color: var(--bs-body-bg);
  border-width: var(--bs-tooltip-arrow-height)
    calc(var(--bs-tooltip-arrow-width) * 0.77) 0;
  z-index: 1;
}

.definition-tooltip .tooltip-arrow:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 66.5%;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  z-index: 0;
  transform: translate(-50%, -23%);
}

.definition-tooltip.teal2 .tooltip-arrow:after {
  border-top-color: var(--bs-teal2-anchor);
}

.definition-tooltip.red .tooltip-arrow:after {
  border-top-color: var(--app-maroon-accent);
}

.definition-tooltip .tooltip-inner {
  padding: 12px 15px;
  background-color: var(--bs-body-bg);
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  opacity: 1;
  color: var(--bs-black);
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  min-width: 350px;
  text-align: center;
}

.definition-tooltip.teal2 .tooltip-inner {
  border-color: var(--bs-teal2-anchor);
}
.definition-tooltip.red .tooltip-inner {
  border-color: var(--app-maroon-accent);
}

@media (min-width: 768px) {
  body h2 {
    font-size: 28px;
  }

  body p.desktop-large-size {
    font-size: 18px;
    line-height: 1.45;
  }

  body .extended-margin {
    margin-bottom: 30px;
  }
}

@media (min-width: 768px) {
  body .h2,
  body h2,
  body .h3,
  body h3 {
    font-size: 28px;
  }

  body a.arrow-link span.text,
  body a.arrow-link {
    display: inline-flex;
    width: auto;
  }

  body a.arrow-link {
    white-space: nowrap;
  }

  section .icon-with-heading.stack-in-mobile {
    flex-direction: row;
    text-align: start;
  }

  section .icon-with-heading.stack-in-mobile img {
    margin: 0 16px 0 0;
  }

  body ul.teal2-bullets {
    padding: 0 28px 0 16px;
  }

  .jumplinkholder .jumplinkanchor.tcl {
    scroll-margin-top: 110px;
  }

  body .smaller-size.h2,
  body h2.smaller-size {
    font-size: 28px;
  }

  body .h3,
  body h3 {
    font-size: 28px;
  }

  .bcl-cta-banner2 .cta-btn-blue {
    max-width: 346px;
  }

  .bcl-cta-banner2 .image-div {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hero-section.mobile-order-reverse .mobile-bg {
    padding-bottom: 32px;
    padding-top: 84vw;
  }

  .hero-section p.btn-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .hero-section.mobile-order-reverse.model-note .mobile-bg:after {
    bottom: auto;
    top: calc(80vw - 16px);
  }

  .science-steps-group {
    padding: 54px 0;
  }

  .science-steps-group .heading h2 {
    text-align: center;
    font-size: 28px;
  }

  .science-steps-group .subheading {
    padding-top: 30px;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }

  .science-steps-group .science-step {
    padding-top: 32px;
  }

  .science-steps-group .science-step .science-step-copy,
  .science-steps-group .science-step .science-step-image {
    width: 270px;
  }
}

@media screen and (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: calc(
      960px + max(0px, min(180px, (100vw - 1199px) * 9999)) +
        max(0px, min(180px, (100vw - 1399px) * 9999))
    );
  }

  body h1 {
    font-size: 44px;
    line-height: 1.3;
  }

  .hero-section {
    background-position: 50% center;
    background-size: cover;
  }

  .hero-section h1 {
    margin: 72px 0 8px;
  }

  .bcl-cta-banner2 .cta-btn-blue {
    margin-bottom: 0;
  }

  .hero-section.mobile-order-reverse .mobile-bg {
    background-size: 0 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-section.mobile-order-reverse.model-note .mobile-bg {
    background-size: 0 0;
    padding-top: 0;
  }

  .hero-section.longer-text h1 {
    font-size: 34px;
    line-height: 1.4;
    margin-top: 32px;
  }

  .hero-section.mobile-order-reverse p.btn-row .cta-btn-red {
    width: -webkit-fill-available;
    max-width: 346px;
    margin-left: 0;
    margin-right: 0;
  }

  .hero-section.mobile-order-reverse.model-note .mobile-bg:after {
    top: auto;
    right: 20px;
    bottom: 16px;
  }

  .science-steps-group .science-step {
    padding-top: 48px;
  }

  .science-steps-group .additonal-copy {
    margin: 32px auto 0;
    max-width: 87%;
  }
}

/* For OT banner */
div.ot-sdk-container {
  margin: 0 auto !important;
  overflow: hidden !important;
}
@media (max-width: 767px) {
  #onetrust-banner-sdk #onetrust-button-group button {
    float: none !important;
    width: 100% !important;
  }
}

#onetrust-banner-sdk #onetrust-button-group button:not(:first-of-type),
#onetrust-banner-sdk #onetrust-button-group button:not(:last-of-type),
#onetrust-banner-sdk #onetrust-policy-text,
#onetrust-banner-sdk .onetrust-policy-text {
  font-family: var(--font-roboto_sans) !important;
}

@media (min-width: 768px) {
  #onetrust-banner-sdk .ot-sdk-row {
    max-width: 738px !important;
    margin: auto !important;
    position: relative !important;
  }
}
@media (min-width: 992px) {
  #onetrust-banner-sdk .ot-sdk-row {
    max-width: 992px !important;
  }
}
@media (min-width: 1200px) {
  #onetrust-banner-sdk .ot-sdk-row {
    max-width: 1176px !important;
    margin: auto !important;
  }
  #onetrust-banner-sdk:not(.ot-iab-2) #onetrust-group-container {
    width: 55%;
  }
  #onetrust-banner-sdk.ot-buttons-fw:not(.ot-iab-2).vertical-align-content
    #onetrust-button-group-parent {
    position: absolute;
    left: 55%;
  }
}
@media (min-width: 1280px) {
  #onetrust-banner-sdk #onetrust-button-group button {
    width: auto !important;
  }
}