/* Universal breakpoints */
@keyframes from-right {
  0% {
    opacity: 0;
    transform: translateX(40rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

main {
  color: #3b3d49; }
  main a {
    color: inherit; }
  main sup {
    position: relative;
    top: -3px;
    left: 1px;
    font-size: 12px; }

h2 {
  margin-top: 0;
  font-weight: 500;
  margin-bottom: 32px;
  font-size: 50px;
  line-height: 50px; }
  @media (max-width: 991px) {
    h2 {
      margin-bottom: 30px;
      font-size: 42px;
      line-height: 42px; } }
  @media (max-width: 767px) {
    h2 {
      font-size: 32px;
      line-height: 32px; } }

.button-gold,
.button-outlined {
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 18px;
  display: flex;
  padding: 14px 24px;
  justify-content: center;
  min-width: 180px;
  width: -moz-fit-content;
  width: fit-content; }
  @media (max-width: 767px) {
    .button-gold,
    .button-outlined {
      font-size: 16px;
      padding: 12px 24px; } }

.value-prop {
  background-color: #e8e9ec;
  padding: 40px;
  display: flex;
  gap: 36px;
  justify-content: center;
  align-items: center;
  margin: 80px 0; }
  @media (max-width: 991px) {
    .value-prop {
      flex-direction: column;
      gap: 30px;
      padding: 30px 16px;
      align-items: unset;
      margin: 40px 0; } }
  .value-prop.teal-bg {
    background-color: #3f647c;
    color: white;
    background: linear-gradient(180deg, #417d9f 0%, #34657f 100%), #3f647c; }
  .value-prop__image {
    height: 475px;
    width: 475px;
    -o-object-fit: cover;
    object-fit: cover; }
    .value-prop__image.half-height {
      height: 237px; }
    @media (max-width: 991px) {
      .value-prop__image {
        height: 330px;
        width: 330px;
        max-width: 100%; }
        .value-prop__image.half-height {
          height: 165px; } }
  .value-prop__text {
    height: -moz-fit-content;
    height: fit-content; }
    @media (min-width: 992px) {
      .value-prop__text {
        max-width: 769px; } }
    .value-prop__text p,
    .value-prop__text ul {
      font-size: 24px;
      line-height: 30px; }
      @media (max-width: 479px) {
        .value-prop__text p,
        .value-prop__text ul {
          font-size: 20px;
          line-height: 24px; } }
      .value-prop__text p a,
      .value-prop__text ul a {
        word-break: break-word; }
    .value-prop__text .button-gold {
      margin-top: 40px; }
      @media (max-width: 479px) {
        .value-prop__text .button-gold {
          margin-top: 30px; } }

.benefits-block {
  padding: 0 80px;
  box-sizing: border-box;
  display: flex;
  margin: 80px auto; }
  @media (max-width: 1439px) {
    .benefits-block {
      padding: 0 40px; } }
  @media (max-width: 1079px) {
    .benefits-block {
      flex-direction: column; } }
  @media (max-width: 991px) {
    .benefits-block {
      padding: 0 16px;
      margin: 40px auto; } }
  .benefits-block__text {
    flex: 1; }
    @media (min-width: 1080px) {
      .benefits-block__text h2 {
        padding-right: 120px; } }
    .benefits-block__text .gold-border {
      border: 2px solid #fbc600;
      padding: 40px 120px 50px 42px; }
      @media (max-width: 1079px) {
        .benefits-block__text .gold-border {
          padding: 40px 24px 72px 24px; } }
    .benefits-block__text p {
      margin: 0; }
    .benefits-block__text p,
    .benefits-block__text ul {
      font-size: 16px;
      line-height: 24px; }
    .benefits-block__text .button-gold {
      margin-top: 40px; }
  .benefits-block__image {
    margin-left: -80px;
    width: calc(100% + 80px); }
    @media (min-width: 1080px) {
      .benefits-block__image {
        height: 450px;
        flex: 1; }
        .benefits-block__image img {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover; } }
    @media (max-width: 1079px) {
      .benefits-block__image {
        margin-left: auto;
        width: 70%;
        height: auto;
        margin-top: -50px; }
        .benefits-block__image img {
          width: 100%;
          height: auto; } }

.faq-section {
  max-width: 1440px;
  box-sizing: border-box;
  margin: 80px auto;
  padding: 0 80px; }
  @media (max-width: 1439px) {
    .faq-section {
      margin: 40px auto;
      padding: 0 40px; } }
  @media (max-width: 991px) {
    .faq-section {
      padding: 0 16px; } }
  .faq-section h2 {
    margin-bottom: 16px; }
  .faq-section h3 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400; }
    @media (max-width: 767px) {
      .faq-section h3 {
        font-size: 20px;
        line-height: 24px; } }
    @media (max-width: 479px) {
      .faq-section h3 {
        font-size: 18px;
        line-height: 20px; } }
  .faq-section .two-col {
    display: flex;
    gap: 28px; }
    @media (max-width: 991px) {
      .faq-section .two-col {
        flex-direction: column;
        gap: 0; } }
    .faq-section .two-col .col {
      flex: 1; }
  .faq-section details {
    border: none;
    border-radius: 0; }
    .faq-section details[open] summary {
      border-bottom: 2px solid #fbc600; }
    .faq-section details summary {
      padding: 20px 16px 13px 16px;
      border-bottom: 1px solid rgba(59, 61, 73, 0.25); }
    .faq-section details .answer {
      padding: 16px;
      background-color: #e9eaeb;
      gap: 16px; }
      .faq-section details .answer p {
        margin: 0; }

.footnotes {
  margin: 80px auto;
  padding: 0 80px;
  text-align: center; }
  @media (max-width: 1439px) {
    .footnotes {
      padding: 0 40px; } }
  @media (max-width: 991px) {
    .footnotes {
      margin: 40px auto;
      padding: 0 16px; } }
