@charset "UTF-8";

.membership-plans {
  position: relative;
  padding: 120px 0;
  border-radius: 120px;
  background: #142023;
  color: #fff;
}

.membership-plans::before {
  background: var(--grey-50);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: -1;
}

.membership-plans__container {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.membership-plans__head {
  max-width: 720px;
  margin-bottom: 42px;
}

.membership-plans__title {
  max-width: 490px;
  margin: 0 0 48px;
  color: #fff;
}

.membership-plans__quote {
  display: flex;
  align-items: center;
  gap: 24px;
}

.membership-plans__quote .text-wrap {
  flex: 1;
}

.membership-plans__quote .img-wrap {
  position: relative;
}

.membership-plans__quote .img-wrap:before {
  background: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.74534 16C2.6646 16 1.77019 15.6368 1.06211 14.9104C0.354037 14.1458 0 13.2091 0 12.1004C0 11.718 0.0186335 11.3548 0.0559005 11.0108C0.130435 10.6667 0.242236 10.2652 0.391304 9.80645C0.540373 9.30944 0.745342 8.71684 1.00621 8.02867L3.63354 0H7.15528L4.36025 11.6416L3.68944 8.31541C4.77019 8.31541 5.6646 8.6595 6.37267 9.34767C7.08074 10.0358 7.43478 10.9534 7.43478 12.1004C7.43478 13.2473 7.08074 14.184 6.37267 14.9104C5.6646 15.6368 4.78882 16 3.74534 16ZM14.3106 16C13.2298 16 12.3354 15.6368 11.6273 14.9104C10.9193 14.1458 10.5652 13.2091 10.5652 12.1004C10.5652 11.718 10.5839 11.3548 10.6211 11.0108C10.6957 10.6667 10.8075 10.2652 10.9565 9.80645C11.1056 9.30944 11.3106 8.71684 11.5714 8.02867L14.1988 0H17.7205L14.9255 11.6416L14.2547 8.31541C15.3354 8.31541 16.2298 8.6595 16.9379 9.34767C17.646 10.0358 18 10.9534 18 12.1004C18 13.2473 17.646 14.184 16.9379 14.9104C16.2298 15.6368 15.354 16 14.3106 16Z' fill='%23ECEEF4'/%3E%3C/svg%3E%0A");
  content: "";
  position: absolute;
  right: 0px;
  top: 4px;
  width: 18px;
  height: 16px;
  z-index: 2;
}

.membership-plans__quote img {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  border: 2px solid #06c95f;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
}

.membership-plans__quote strong {
  display: block;
  margin-bottom: 16px;
  color: #07d96a;
  font-size: 20px;
  line-height: 1.2;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.membership-plans__quote p {
  position: relative;
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.45;
  font-style: italic;
  letter-spacing: -0.03em;
}

.membership-plans__quote span {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
}

.membership-plans__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

.membership-plans__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 584px;
  padding: 24px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: var(--32, 32px);
  border: var(--2, 2px) solid var(--grey-700, #3E494E);
  background: var(--grey-800, #262F31);
}

.membership-plans__card::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--black-20, rgba(0, 0, 0, 0.2));
  pointer-events: none;
  transform: translate(26%, -62%);
}

.membership-plans__card.is-featured {
  border-color: var(--primary);
  background: var(--grey-100, #DCDFE5);
  color: var(--secondary);
}

.membership-plans__card.is-featured::before {
  background: var(--white-48, rgba(255, 255, 255, 0.48));
}

.membership-plans__card.is-featured .membership-plans__badge span {
  color: var(--secondary);
}

.membership-plans__card-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 174px;
  gap: 18px;
  min-height: 48px;
  margin-bottom: 40px;
  align-items: center;
}

.membership-plans__badge {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 9px 10px;
  color: #fff;
  border-radius: var(--8, 8px);
  background: rgba(2, 195, 88, 0.24);
}

.membership-plans__badge img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
  object-fit: contain;
}

.membership-plans__badge span {
  font-size: 12px;
  line-height: 1.15;
  font-weight: 400;
}

.membership-plans__table {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 30px;
  overflow: visible;
  min-height: 168px;
}

.membership-plans__table-head,
.membership-plans__row {
  display: grid;
  grid-template-columns: 100px 100px 1fr;
}

.membership-plans__table-head {
  color: currentColor;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
}

.membership-plans__table-head span {
  padding: 0 8px 8px;
  max-width: 120px;
}

.membership-plans__row {
  align-items: center;
  min-height: 42px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.22);
}

.membership-plans__row span,
.membership-plans__row strong {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  gap: 2px;
}

.membership-plans__row > * + * {
  border-left: 2px solid var(--grey-800, #262F31);
}

.membership-plans__row b {
  font-size: 14px;
  font-weight: 600;
}

.membership-plans__row strong {
  position: relative;
}

.membership-plans__row:nth-child(n+3) {
  background: rgba(2, 195, 88, 0.24);
  color: #fff;
}

.membership-plans__row:nth-child(n+4) {
  background: rgba(2, 195, 88, 0.64);
}

.is-featured .membership-plans__row {
  background: #fff;
}

.is-featured .membership-plans__row:nth-child(n+3) {
  background: rgba(2, 195, 88, 0.24);
  color: #17212a;
}

.is-featured .membership-plans__row:nth-child(n+4) {
  background: rgba(2, 195, 88, 0.64);
}

.membership-plans__row em {
  position: absolute;
  right: 4px;
  top: 50%;
  max-width: 74px;
  padding: 4px 2px;
  border-radius: var(--8, 8px);
  background: var(--error, #F54D4E);
  color: #fff;
  font-size: 12px;
  line-height: 1.05;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  transform: translateY(-50%);
}

.membership-plans__features {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.membership-plans__features li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.25;
}

.membership-plans__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.membership-plans__button {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 1260px) {
  .membership-plans {
    padding: 90px 0;
    border-radius: 90px;
  }

  .membership-plans__container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .membership-plans__cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .membership-plans {
    padding: 60px 0;
    border-radius: 60px;
  }

  .membership-plans__title {
    margin-bottom: 24px;
  }

  .membership-plans__quote {
    gap: 14px;
    margin-bottom: 32px;
  }

  .membership-plans__quote strong {
    font-size: 15px;
  }

  .membership-plans__quote span {
    font-size: 14px;
  }

  .membership-plans__quote img {
    width: 56px;
    height: 56px;
  }

  .membership-plans__quote p {
    font-size: 15px;
  }

  .membership-plans__card {
    min-height: 0;
    padding: 22px 16px 18px;
    border-radius: 24px;
  }

  .membership-plans__card-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .membership-plans__badge {
    width: 100%;
  }

  .membership-plans__table-head,
  .membership-plans__row {
    grid-template-columns: 0.85fr 0.9fr 1.35fr;
  }

  .membership-plans__table {
    min-height: 0;
  }

  .membership-plans__row span,
  .membership-plans__row strong {
    padding: 0 6px;
    font-size: 11px;
  }

  .membership-plans__row b {
    font-size: 13px;
  }

  .membership-plans__row em {
    max-width: 70px;
  }
}