/* Universal breakpoints */
@keyframes from-right {
  0% {
    opacity: 0;
    transform: translateX(40rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

 main section {
  scroll-margin-top: 180px; }
  @media (max-width: 991px) {
     section {
      scroll-margin-top: 230px; } }

@media (min-width: 992px) {
  .subnav {
    margin-bottom: 56px; } }

.subnav .subnav__links {
  align-items: center;
  font-size: 16px;
  font-weight: 500; }
  @media (min-width: 992px) {
    .subnav .subnav__links {
      height: 34px; } }

.hero-2019 .global-max-w {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 60px; }
  @media (min-width: 992px) {
    .hero-2019 .global-max-w {
      gap: 100px; } }

.hero-2019__content {
  padding: 40px 16px; }
  @media (min-width: 992px) {
    .hero-2019__content p {
      font-size: 24px; } }

.subnav {
  background-color: #40637c; }
  @media (min-width: 992px) {
    .subnav {
      padding-top: 5px;
      padding-bottom: 5px; } }

.get-it-done {
  margin: 80px auto;
  padding: 0 80px;
  box-sizing: border-box; }
  @media (max-width: 1439px) {
    .get-it-done {
      padding: 0 40px; } }
  @media (max-width: 991px) {
    .get-it-done {
      padding: 0 16px;
      margin: 40px auto; } }
  .get-it-done h2 {
    font-weight: 400; }
    @media (max-width: 991px) {
      .get-it-done h2 {
        text-align: center; } }
  .get-it-done .tiles {
    display: flex;
    justify-content: space-between;
    gap: 24px; }
    @media (max-width: 991px) {
      .get-it-done .tiles {
        flex-direction: column;
        align-items: center; } }
    .get-it-done .tiles .tile {
      display: flex;
      flex-direction: column;
      align-items: center; }
      @media (min-width: 992px) {
        .get-it-done .tiles .tile {
          max-width: 313px; } }
      @media (max-width: 991px) {
        .get-it-done .tiles .tile img {
          height: 125px;
          width: 125px; } }
      .get-it-done .tiles .tile p {
        font-size: 24px;
        text-align: center; }
        .get-it-done .tiles .tile p:first-of-type {
          font-weight: 500; }
        @media (max-width: 991px) {
          .get-it-done .tiles .tile p {
            font-size: 18px; } }
        .get-it-done .tiles .tile p sup {
          font-size: 16px; }
          @media (max-width: 991px) {
            .get-it-done .tiles .tile p sup {
              font-size: 14px; } }

.benefits-block .gold-border {
  padding: 20px 120px 20px 10px; }
  @media (max-width: 1079px) {
    .benefits-block .gold-border {
      padding: 20px 24px 60px 24px; } }

.benefits-block ul {
  font-size: 24px;
  line-height: 40px; }
  @media (max-width: 991px) {
    .benefits-block ul {
      font-size: 18px;
      margin: 0;
      padding-left: 20px; } }

@media (max-width: 1079px) {
  .benefits-block__image {
    margin-left: -16px;
    width: calc(100% + 32px); } }

.explore-merchants {
  margin: 80px auto;
  background-color: #e8e9ec; }
  @media (max-width: 1439px) {
    .explore-merchants {
      margin: 40px auto; } }
  .explore-merchants__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 80px;
    max-width: 830px;
    margin: 0 auto; }
    @media (max-width: 1439px) {
      .explore-merchants__content {
        padding: 30px 40px; } }
    @media (max-width: 991px) {
      .explore-merchants__content {
        padding: 30px 16px;
        align-items: unset; } }
  .explore-merchants h2 {
    font-weight: 400; }
    @media (max-width: 991px) {
      .explore-merchants h2 {
        text-align: left; } }
  .explore-merchants p {
    font-size: 24px;
    text-align: center; }
    @media (max-width: 991px) {
      .explore-merchants p {
        font-size: 16px;
        text-align: left; } }
  .explore-merchants a {
    margin-top: 40px; }
    @media (max-width: 991px) {
      .explore-merchants a {
        margin-top: 24px;
        margin-left: auto;
        margin-right: auto; } }

#offers {
  align-items: unset; }
  @media (max-width: 991px) {
    #offers .value-prop__image {
      max-height: 200px;
      width: auto;
      max-width: 100%;
      -o-object-fit: contain;
      object-fit: contain; } }
  #offers h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 38px; }
  #offers .value-prop__image {
    height: 100%;
    width: auto; }

@media (min-width: 992px) {
  #mobile {
    padding-top: 0;
    padding-bottom: 0; } }

@media (max-width: 991px) {
  #mobile {
    text-align: center; } }

#mobile .value-prop__image {
  height: 100%;
  width: auto; }
  @media (max-width: 991px) {
    #mobile .value-prop__image {
      display: none; } }

#mobile h2 {
  font-weight: 400; }

#mobile .app-store-links {
  display: flex;
  gap: 16px;
  margin-top: 25px;
  flex-wrap: wrap; }
  @media (max-width: 991px) {
    #mobile .app-store-links {
      justify-content: center; } }
  #mobile .app-store-links a {
    height: 58px; }
    #mobile .app-store-links a img {
      height: 100%;
      width: 195px; }

#ready-to-get-started .value-prop__image {
  height: 100%;
  width: auto;
  min-width: 475px;
  max-height: 200px;
  -o-object-fit: contain;
  object-fit: contain; }
  @media (min-width: 992px) {
    #ready-to-get-started .value-prop__image {
      min-width: 475px; } }
  @media (max-width: 991px) {
    #ready-to-get-started .value-prop__image {
      width: 100%;
      max-width: 200px;
      height: auto;
      max-height: unset;
      min-width: unset;
      margin: auto; } }

#ready-to-get-started .value-prop__text h2 {
  font-weight: 400; }

@media (min-width: 992px) {
  #ready-to-get-started .value-prop__text {
    max-width: 570px; } }

#ready-to-get-started .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem; }
  #ready-to-get-started .buttons a {
    flex: 1;
    max-width: 250px;
    min-width: 220px;
    white-space: nowrap; }
    @media (max-width: 479px) {
      #ready-to-get-started .buttons a {
        max-width: 100%; } }
.hero-2019__image .primary-image {
      width: 100%;
      object-fit: contain; }