/*************
 * HOME PAGE 
**************/
.site-sync-intro {
  text-align: center;
  background-color: #F3EDDC;
  padding: 40px 20px;
}
@media (min-width: 1025px) {
  .site-sync-intro {
    padding: 80px 40px;
  }
}
.site-sync-intro .first-section {
  max-width: 1100px;
  margin: 0px auto;
}
@media (min-width: 1025px) {
  .site-sync-intro .first-section {
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .site-sync-intro .first-section img {
    width: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
  .site-sync-intro .first-section .desktop-only {
    padding: 30px;
    max-width: 450px;
  }
  .site-sync-intro .first-section .desktop-only h2 {
    margin-bottom: 20px;
  }
}
.site-sync-intro h2 {
  margin: 0px;
  font-size: 32px;
}
.site-sync-intro img {
  width: 100%;
  max-width: 260px;
  margin: 0px auto;
  padding: 20px 0px;
}
.site-sync-intro p {
  font-size: 20px;
  line-height: 26px;
  margin: 0px;
}
.site-sync-intro .solution-selectors {
  padding-top: 40px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 20px;
}
@media (min-width: 1025px) {
  .site-sync-intro .solution-selectors {
    max-width: 1100px;
    margin: 0px auto;
  }
}
.site-sync-intro .solution-selectors .solution-selector {
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 60vw;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  padding: 0px 30px;
  font-size: 18px;
}
@media (min-width: 1025px) {
  .site-sync-intro .solution-selectors .solution-selector {
    width: calc(33% - 10px);
    min-width: calc(33% - 10px);
    max-width: calc(33% - 10px);
  }
}
.site-sync-intro .solution-selectors .solution-selector img {
  max-width: 100px;
  max-height: 80px;
  padding: 0px;
  margin: 0px;
  padding-top: 5px;
}
.site-sync-intro .solution-selectors .solution-selector.active {
  background-color: #FEBF10;
}
.site-sync-intro .solutions {
  padding: 20px 0px;
}
.site-sync-intro .solutions .solution {
  display: none;
}
.site-sync-intro .solutions .solution .benefit-tagline {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  padding: 10px;
  background-color: rgba(254, 191, 16, 0.3);
}
.site-sync-intro .solutions .solution img {
  width: 100%;
  border-radius: 10px;
  max-width: none;
  overflow: hidden;
  padding: 0px;
  margin: 20px 0px;
}
.site-sync-intro .solutions .solution a:not(.orange-button) {
  text-decoration: underline;
  color: #000;
  display: block;
  margin: 10px 0px;
}
.site-sync-intro .solutions .solution.active {
  display: block;
}
@media (min-width: 1024px) {
  .site-sync-intro .solutions .solution.active {
    max-width: 1100px;
    margin: 0px auto;
    display: flex;
    text-align: left;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }
  .site-sync-intro .solutions .solution.active .copy {
    max-width: 400px;
  }
  .site-sync-intro .solutions .solution.active .copy p {
    margin: 10px 0px;
  }
  .site-sync-intro .solutions .solution.active .copy .orange-button {
    margin-top: 20px;
  }
  .site-sync-intro .solutions .solution.active .benefit-tagline {
    display: inline-block;
    width: auto;
  }
  .site-sync-intro .solutions .solution.active img {
    order: 2;
  }
}

.how-it-works {
  background-image: url("../images/Grid-BG.svg");
  padding: 60px 20px;
  text-align: center;
}
@media (min-width: 1025px) {
  .how-it-works {
    padding: 80px 40px;
    text-align: left;
    position: relative;
  }
  .how-it-works .inner {
    justify-content: space-between;
    display: flex;
    max-width: 1100px;
    margin: 0px auto;
    position: relative;
    align-items: start;
  }
  .how-it-works .inner .first-section {
    max-width: 460px;
    position: sticky;
    top: 220px;
  }
  .how-it-works .inner .first-section h2 {
    margin-bottom: 40px;
  }
}
.how-it-works .benefit-list .benefit {
  padding: 30px 0px;
}
@media (min-width: 1025px) {
  .how-it-works .benefit-list .benefit {
    text-align: center;
  }
}
@media (min-width: 1025px) {
  .how-it-works .benefit-list .benefit:first-of-type {
    padding-top: 0px;
  }
}
.how-it-works .benefit-list .benefit img {
  width: 100%;
  max-width: 400px;
  padding-bottom: 10px;
}
.how-it-works .benefit-list .benefit .description {
  max-width: 265px;
  margin: 0px auto;
}

.integrations {
  padding: 60px 20px;
  text-align: center;
}
@media (min-width: 1025px) {
  .integrations {
    padding: 80px 40px;
  }
  .integrations .inner {
    max-width: 1100px;
    align-items: center;
    margin: 0px auto;
    display: flex;
    text-align: left;
    gap: 80px;
  }
  .integrations .logos-and-cta {
    text-align: center;
  }
}
.integrations h2 {
  max-width: 300px;
  margin: 0px auto;
}
@media (min-width: 1025px) {
  .integrations h2 {
    max-width: 380px;
    min-width: 380px;
  }
}
.integrations .copy {
  padding: 30px 0px;
  max-width: 330px;
  margin: 0px auto;
}
@media (min-width: 1025px) {
  .integrations .copy {
    margin: 0px;
  }
}

.owner-portal {
  background: linear-gradient(180deg, rgba(254, 191, 16, 0.2) 0%, #FEBF10 100%);
  padding: 60px 20px;
  text-align: center;
}
@media (min-width: 1025px) {
  .owner-portal {
    padding: 80px 40px;
  }
  .owner-portal .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0px auto;
    text-align: left;
  }
  .owner-portal .inner .orange-button {
    margin-top: 10px;
  }
  .owner-portal .inner .copy-wrapper {
    max-width: 380px;
  }
  .owner-portal .inner .copy-wrapper h2 {
    max-width: 320px;
  }
  .owner-portal .inner .copy-wrapper .copy {
    text-align: left;
  }
  .owner-portal .inner img {
    max-width: 50%;
  }
}
.owner-portal h2 {
  display: flex;
}
.owner-portal h2 img {
  width: 165px;
}
.owner-portal .copy {
  text-align: center;
  margin: 30px 0px;
}
.owner-portal img {
  width: 100%;
}
.owner-portal a.orange-button {
  margin-top: 30px;
}

.pricing {
  padding: 60px 20px;
  text-align: center;
}
.pricing img {
  width: 100%;
  max-width: 190px;
  margin: 0px auto;
}
.pricing h2 {
  margin: 10px 0px;
}
.pricing .pricing-items .pricing-item {
  background-color: #F3EDDC;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0px;
}
.pricing .pricing-items .pricing-item .pricing-elements .pricing-element {
  margin: 10px 0px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}
.pricing .pricing-items .pricing-item .pricing-elements .pricing-element .price {
  font-weight: 700;
  color: #F47D20;
  font-size: 36px;
  margin: 10px 0px 5px 0px;
}
.pricing .pricing-items .pricing-item .pricing-elements .pricing-element .smaller p {
  font-size: 16px;
}
.pricing .pricing-items .pricing-item .pricing-elements .pricing-element .price-content, .pricing .pricing-items .pricing-item .pricing-elements .pricing-element .after-price {
  margin: 0px auto;
  max-width: 250px;
}
.pricing .pricing-items .pricing-item .pricing-elements .pricing-element .price-content a, .pricing .pricing-items .pricing-item .pricing-elements .pricing-element .after-price a {
  text-decoration: underline;
  color: #000;
}
.pricing .buttons .button {
  display: block;
  margin: 10px 0px;
}
@media (min-width: 1025px) {
  .pricing {
    padding: 80px 40px;
  }
  .pricing .inner {
    max-width: 1100px;
    margin: 0px auto;
  }
  .pricing .inner .intro-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    text-align: left;
  }
  .pricing .inner .intro-section .copy-wrapper {
    max-width: 450px;
  }
  .pricing .inner .intro-section .copy-wrapper h2 {
    margin-bottom: 20px;
  }
  .pricing .inner .intro-section img {
    order: 2;
    max-width: 35%;
    margin: 0px;
  }
  .pricing .inner .pricing-items {
    display: flex;
    gap: 20px;
    justify-content: start;
    align-items: start;
  }
  .pricing .inner .pricing-items .pricing-item {
    width: 33.33%;
  }
}