@import 'ui-kit.css';
@import 'ui-blocks.css';
@import 'hovers.css';

main>*:first-child {
  padding-top: 144px;
}

/* Homepage | .hero */

.hero {
  overflow: hidden;
}

.hero__wrapper {
  display: grid;
  align-items: flex-start;
  grid-template-columns: repeat(12, 1fr);
}

.hero__left {
  max-width: min(800px, 55.556vw);
  grid-column: span 8;
}

.hero__left .section-label+.section-title {
  /* TODO: check on macbook */
  /* margin-top: min(24px, 1.667vw); */
  margin-top: min(8px, 0.556vw);
}

.hero__description-wrapper {
  /* margin-top: 40px; */
  /* TODO: cgeck on macbook */
  margin-top: min(56px, 3.889vw);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.hero__description-wrapper .default-button {
  min-width: min(220px, 15.278vw);
}

.hero__description-wrapper .description {
  margin-left: min(80px, 5.556vw);
  margin-top: max(-7px, -0.486vw);
  max-width: min(450px, 31.250vw);
}

.-apple .hero__description-wrapper .description {
  margin-top: 0;
}

.hero__description-wrapper .description .text {
  margin-top: min(24px, 1.667vw);
  color: var(--shark-shark-250, #A3A5A6);
}

.hero__right {
  grid-column: span 4;
  position: relative;
  padding: min(112px, 7.778vw) min(16px, 1.111vw);
  width: min(440px, 30.556vw);
  min-width: min(440px, 30.556vw);
  box-sizing: border-box;
  /* TODO: check margin on macbook*/
  margin-top: min(56px, 3.889vw);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__right-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* grid-template-columns: repeat(21, min(8px, 0.556vw)); */
  gap: min(16px, 1.111vw);
}

.hero__right-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__right-bg circle {
  transition: fill 0.6s;
  /* animation: 0.7s infinite alternate lightUp ease-in-out; */
}

.hero__right-bg circle.-active {
  fill: var(--secondary-sun, #FCB000);
}

/* .hero__right-bg:not(.-in-viewport) circle {
  animation-play-state: paused !important;
} */

/* @keyframes lightUp {
  from {
    fill: var(--shark-shark-450);
  }

  to {
    fill: var(--secondary-sun, #FCB000);
  }
} */

.hero__right-bg span.-active {
  background: var(--secondary-sun, #FCB000);
}

.hero__right-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__right__wrapper {
  width: 100%;
  aspect-ratio: 17/19;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero__right__wrapper .apple-helper {
  display: none;
}

.-apple .hero__right__wrapper {
  aspect-ratio: none;
}

.-apple .hero__right__wrapper .apple-helper {
  pointer-events: none;
  display: block;
  width: 100%;
  aspect-ratio: 17/19;
}

.-apple .hero__right__wrapper .animated-hero-card {
  position: absolute;
}

.hero__right__wrapper .animated-hero-card {
  width: 100%;
  display: flex;
  justify-content: center;
  height: fit-content;
}

.hero__right__wrapper .animated-hero-card .preparedBlock {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: min(408px, 28.333vw);
  min-width: 163px;
}

.hero__right__wrapper img {
  display: block;
  width: 100%;
  height: fit-content;
}

.-apple .hero__right__wrapper img,
.-apple .hero__right__wrapper .animated-hero-card {
  height: auto;
}


.hero-card {
  position: relative;
  z-index: 1;
  box-shadow: 0px min(16px, 1.111vw) min(40px, 2.778vw) 0px rgba(10, 11, 13, 0.08);
  background: var(--shark-shark-550, #1A1B21);
  border-radius: min(16px, 1.111vw);
}

.hero-cards {
  position: relative;
  z-index: 0;
  margin: min(160px, 11.111vw) 0 0 0;
  overflow: hidden;
}

.hero-cards:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: min(248px, 17.222vw);
  display: block;
  background: linear-gradient(to top, #0A0B0D 0%, rgba(10, 11, 13, 0.00) 100%);
}

.hero-card__wrapper {
  margin: 0 auto max(-116px, -8.056vw) auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: min(52px, 3.611vw);
  padding: 0 min(16px, 1.111vw);
}

.hero-card__item {
  width: min(408px, 28.333vw);
}

.hero-card__item img {
  width: 100%;
  display: block;
}

.hero-card__item:nth-child(3) {
  opacity: 0;
  pointer-events: none;
}


/* Homepage | succes-story */

.succes-story {
  margin: var(--default-section-margin) 0;
}

.succes-story .review {
  margin-top: min(53px, 3.681vw);
}

.succes-story .colored-tabs {
  margin-top: min(48px, 3.333vw);
}


/* Homepgae | faq-section */

.faq-section {
  padding: var(--default-section-margin) 0;
}

.faq-section .faq-list {
  margin-top: min(95px, 6.597vw);
}

.-apple .faq-section .faq-list {
  margin-top: min(80px, 5.556vw);
}

.cta-faq {
  margin: 160px auto 0 auto;
  max-width: min(994px, 69.028vw);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: min(72px, 5.000vw) min(80px, 5.556vw) min(80px, 5.556vw) min(81px, 5.625vw);
  background: var(--shark-shark-550, #1A1B21);
  border-radius: min(16px, 1.111vw);
}

.cta-faq .content {
  max-width: min(294px, 20.417vw);
  margin-top: min(6px, 0.417vw);
}

.cta-faq .content .text {
  color: var(--shark-shark-250, #A3A5A6);
}

.cta-faq .title {
  max-width: min(350px, 24.306vw);
}

.cta-faq .content .default-button {
  margin-top: min(26px, 1.806vw);
  width: fit-content;
  min-width: min(220px, 15.278vw);
}

/* Homepage | key-features */

.key-features {
  padding: var(--default-section-margin) 0;
}

.key-features__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: min(120px, 8.333vw);
  margin-top: min(95px, 6.597vw);
}

.-apple .key-features__wrapper {
  margin-top: min(80px, 5.556vw);
}

.key-features__left {
  position: sticky;
  top: calc(var(--window-inner-height) / 2);
  min-width: min(580px, 40.278vw);
  width: min(580px, 40.278vw);
  transition: opacity 0.4s;
}

.key-features__left-wrapper {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: min(16px, 1.111vw);
  background: var(--shark-shark-550, #1A1B21);
}

.key-features__left .img {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s;
}

.key-features__left .img.-active {
  opacity: 1;
  position: relative;
}

.key-features__left img {
  display: block;
  width: 100%;
}

.key-features__right {
  position: relative;
  /* margin-top: 72px; */

  width: 100%;
}

.key-features__right .img {
  display: none;
}

.key-features__right .key-features__slide:not(.-active) {
  /* opacity: 0; */
  pointer-events: none;
}


.key-features__right .checked-list {
  display: block;
  margin-top: min(45px, 3.125vw);
}

.key-features__right .key-features__slide+.key-features__slide {
  margin-top: min(75px, 5.208vw);
}

.key-features__right .key-features__slide {
  opacity: 0.3;
  transition: opacity 0.4s;
}

.key-features__right .key-features__slide.-active {
  opacity: 1;
}

.key-features-slider {
  position: relative;
}

.key-features__progress {
  position: absolute;
  left: max(-56px, -3.889vw);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.key-features__progress .progress {
  position: relative;
  display: block;
  height: min(366px, 25.417vw);
  width: min(1px, 0.069vw);
  border-radius: min(20px, 1.389vw);
  background: var(--shark-shark-450, #48494D);
}

.key-features__progress .progress-active {
  display: block;
  position: absolute;
  top: 0;
  width: min(2px, 0.139vw);
  left: 50%;
  transform: translateX(-50%);
  border-radius: min(20px, 1.389vw);
  background: var(--white, #FFF);
}

/* Homepage | steps-section */

.steps-section {
  margin: var(--default-section-margin) 0;
}

.steps-section .section-title {
  margin-bottom: min(95px, 6.597vw);
}

.-apple .steps-section .section-title {
  margin-top: min(80px, 5.556vw);
}


/* Homepage | reviews */

.reviews {
  margin: var(--default-section-margin) 0 var(--smaller-section-margin) 0;
}

.reviews .reviews-slider {
  margin-top: min(95px, 6.597vw);
}

.-apple .reviews .reviews-slider {
  margin-top: min(80px, 5.556vw);
}


/* Homepage | pricing plan */

.pricing-plans {
  margin: var(--smaller-section-margin) 0;
}

.pricing-plans .pricing-plans__wrapper {
  margin-top: min(95px, 6.597vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(40px, 2.778vw);
}

.-apple .pricing-plans .pricing-plans__wrapper {
  margin-top: min(80px, 5.556vw);
}

.pricing-plan__item {
  grid-column: span 1;
  padding: min(32px, 2.222vw) min(32px, 2.222vw) min(40px, 2.778vw) min(32px, 2.222vw);
  border-radius: min(16px, 1.111vw);
  border: 1px solid var(--shark-shark-50, #EFF2F4);
  background: var(--white, #FFF);
  /* Shadow 40 16 8% */
  box-shadow: 0px min(16px, 1.111vw) min(40px, 2.778vw) 0px rgba(10, 11, 13, 0.08);
}

.pricing-plan__item.-popular {
  position: relative;
  border-radius: 0 0 min(16px, 1.111vw) min(16px, 1.111vw);
}

.pricing-plan__item .popular-label {
  pointer-events: none;
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 3px);
  height: calc(100% + 2px);
  border-radius: inherit;
  border: 2px solid var(--secondary-jade, #3AA670);
}

.pricing-plan__item .popular-label .text {
  padding: min(8px, 0.556vw) min(8px, 0.556vw) min(5px, 0.347vw) min(8px, 0.556vw);
  border-radius: min(8px, 0.556vw) min(8px, 0.556vw) 0px 0px;
  color: var(--white, #FFF);
  background: var(--secondary-jade, #3AA670);
  position: absolute;
  left: -2px;
  top: 0;
  transform: translateY(calc(-100% - 2px));
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% + 4px);
}

.pricing-plan__item .best-for {
  color: var(--shark-shark-300, #8C8F90);
  margin-top: min(8px, 0.556vw);
  min-height: min(48px, 3.333vw);
}

.pricing-plan__item .price {
  margin-top: min(32px, 2.222vw);
}

.pricing-plan__item .price+.default-button {
  margin-top: min(24px, 1.667vw);
}

.pricing-plan__item .default-button+.free-transactions-title {
  margin-top: min(32px, 2.222vw);
}

.pricing-plan__item .free-transactions-title+.free-transactions-text {
  margin-top: min(8px, 0.556vw);
}

.pricing-plans__key-features {
  position: relative;
}

.pricing-plans__key-features .separator {
  margin-top: min(32px, 2.222vw);
  margin-bottom: min(32px, 2.222vw);
  display: block;
  width: 100%;
  height: 1px;
  background: var(--shark-shark-100, #E4E7E9);
}

.pricing-plans__key-features .list {
  margin-top: min(13px, 0.903vw);
}

.pricing-plans__key-features .list li {
  position: relative;
  margin-top: min(8px, 0.556vw);
  padding-left: min(24px, 1.667vw);
}

.pricing-plans__key-features .list li:before {
  content: '';
  position: absolute;
  left: max(-1px, -0.069vw);
  top: min(5px, 0.347vw);
  width: min(16px, 1.111vw);
  height: min(16px, 1.111vw);
  display: block;
  background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjI0eDI0IC8gY2hlY2siPgo8cGF0aCBpZD0iSWNvbiIgZD0iTTEzLjMzMzcgNEw2LjAwMDMzIDExLjMzMzNMMi42NjY5OSA4IiBzdHJva2U9IiMwQTBCMEQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+Cg==);
}

.pricing-plans__key-features .default-button {
  display: none;
}

.-apple .pricing-plans__key-features .list li:before {
  top: 1px;
  left: 0;
}


/* Homepage | table-section */

.table-section {
  margin: var(--smaller-section-margin) 0;
}

.table-section .comparing-slider {
  display: none;
}

.comparing-table {
  margin-top: min(92px, 6.389vw);
}

.comparing-table .mobile-info {
  display: none;
}

.comparing-table table {
  border-collapse: collapse;
  overflow: hidden;
  width: 100%;
}

.comparing-table thead td {
  background: var(--shark-shark-50, #EFF2F4);
}

.comparing-table thead td:first-child {
  border-radius: min(16px, 1.111vw) 0 0 0;
}

.comparing-table thead td:last-child {
  border-radius: 0 min(16px, 1.111vw) 0 0;
}

.comparing-table thead td .default-button {
  margin-top: min(10px, 0.694vw);
}

.comparing-table tbody th {
  width: 100%;
  padding: min(24px, 1.667vw);
  text-align: left;
  border: 1px solid var(--shark-shark-125, #DADDDE);
  border-top: none;
}

.comparing-table tr {
  display: flex;
}

.comparing-table tr td {
  width: 100%;
  padding: min(24px, 1.667vw);
  border: 1px solid var(--shark-shark-125, #DADDDE);
}

.comparing-table tr:not(:first-child) td {
  border-top: none;
}

.comparing-table tr td:not(:first-child) {
  border-left: none;
}

.comparing-table tr td:first-child {
  max-width: 16.667vw;
}

.comparing-table tbody tr:nth-child(even) td {
  background: var(--shark-shark-25, #F7F9FA);
}

.comparing-table tr td.check,
.comparing-table tr td.empty {
  display: flex;
  justify-content: center;
  align-items: center;
}

.comparing-table tr td.check:before {
  content: '';
  display: block;
  width: min(20px, 1.389vw);
  height: min(20px, 1.389vw);
  border-radius: min(83.333px, 5.787vw);
  background: no-repeat center / min(12px, 0.833vw) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjI0eDI0IC8gY2hlY2siPgo8cGF0aCBpZD0iSWNvbiIgZD0iTTEwIDNMNC41IDguNUwyIDYiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K);
  background-color: var(--accent, #512CCC);
}

.comparing-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 min(16px, 1.111vw);
}

.comparing-table tbody tr:last-child td:last-child {
  border-radius: 0 0 min(16px, 1.111vw) 0;
}


/* Homepage | form-section */

.form-section {
  margin: var(--smaller-section-margin) 0;
}