@charset "UTF-8";
/* Mini pricing comparison — matches Figma node 15489:1888 */
.mini_pricing {
  padding: 80px 0 120px;
  background: #ffffff;
}
.mini_pricing .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.mini_pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.mini_pricing__eyebrow {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: #4a3bbe;
}
.mini_pricing__title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #1a1a22;
}
.mini_pricing__subtitle {
  margin: 0;
  max-width: 720px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #1a1a22;
}
.mini_pricing__grid {
  display: flex;
  align-items: stretch;
  gap: 24px;
}
.mini_pricing {
  /* Shared row scaffolding — fixed heights keep the four columns aligned */
}
.mini_pricing__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.mini_pricing__row {
  display: flex;
  align-items: center;
  min-height: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #1a1a22;
}
.mini_pricing__row--tall {
  min-height: 60px;
}
.mini_pricing__row img {
  flex: 0 0 auto;
}
.mini_pricing__row {
  /* Mobile-only inline label */
}
.mini_pricing__row::before {
  content: attr(data-label);
  display: none;
  flex: 1 1 auto;
  font-weight: 600;
  color: #757585;
}
.mini_pricing__hr {
  width: 100%;
  height: 1px;
  border-radius: 4px;
  background: #e7e7ea;
}
.mini_pricing {
  /* Labels column — offset to align with the plans' feature rows:
     plan head (24 card pad + 32 name + 16 + 88 price + 24 + 48 button) + 32 gap = 264 */
}
.mini_pricing__labels {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 264px;
}
.mini_pricing__labels .mini_pricing__row {
  color: #757585;
}
.mini_pricing {
  /* Plan cards */
}
.mini_pricing__plan {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 24px 32px;
  border-radius: 16px;
  border: 1px solid #c6c6cd;
  background: #ffffff;
}
.mini_pricing__plan.is-featured {
  border: 2px solid #a59afc;
  padding: 23px 23px 31px; /* compensate the thicker border */
  background: radial-gradient(95% 60% at 50% 100%, #f3f0ff 0%, #ffffff 100%);
}
.mini_pricing__plan-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mini_pricing__plan-name {
  height: 32px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: #1a1a22;
}
.mini_pricing__price-block {
  height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
.mini_pricing__price {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.mini_pricing__price-value {
  font-size: 48px;
  line-height: 60px;
  font-weight: 700;
  color: #23232e;
}
.mini_pricing__price-period {
  padding-bottom: 12px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #757585;
}
.mini_pricing__price-custom {
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: #757585;
}
.mini_pricing__price-sub {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #757585;
}
.mini_pricing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 8px;
  padding: 0 16px 2px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.mini_pricing__cta--outline {
  border: 1px solid #23232e;
  color: #1a1a22;
}
.mini_pricing__cta--outline:hover {
  background: rgba(35, 35, 46, 0.06);
}
.mini_pricing__cta--primary {
  background: #614efa;
  color: #f7f7f8;
}
.mini_pricing__cta--primary:hover {
  background: #5544dc;
}

@media (max-width: 1100px) {
  .mini_pricing {
    padding: 48px 0 64px;
  }
  .mini_pricing__title {
    font-size: 32px;
    line-height: 40px;
  }
  .mini_pricing__grid {
    flex-direction: column;
  }
  .mini_pricing {
    /* Labels column hidden — each row shows its own label instead */
  }
  .mini_pricing__labels {
    display: none;
  }
  .mini_pricing__row {
    justify-content: space-between;
    gap: 16px;
  }
  .mini_pricing__row--tall {
    min-height: 0;
  }
  .mini_pricing__row::before {
    display: block;
  }
}
/* Tablet + mobile — plan cards scroll horizontally and each card carries its
   OWN inline labels (label left, value right). No separate labels column — the
   labels live "inside" each card. Covers <=1281; desktop (>1281) untouched.
   Placed after the 1100 block so the horizontal scroll overrides its vertical
   stack while reusing the same inline-label (::before) treatment. */
@media screen and (max-width: 1281px) {
  .mini_pricing {
    padding: 48px 0 64px;
  }
  .mini_pricing__title {
    font-size: 32px;
    line-height: 40px;
  }
  .mini_pricing__grid {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mini_pricing {
    /* No standalone labels column — labels are rendered inside each card */
  }
  .mini_pricing__labels {
    display: none;
  }
  .mini_pricing__plan {
    flex: 0 0 300px;
  }
  .mini_pricing__row {
    justify-content: space-between;
    gap: 16px;
  }
  .mini_pricing__row--tall {
    min-height: 0;
  }
  .mini_pricing__row::before {
    display: block;
  }
}
/* Mobile — left-align the heading, tighten the column gap, and let the plan
   scroller bleed past the container's 16px gutters so the last card isn't
   cropped (first card stays aligned to the gutter). */
@media screen and (max-width: 767px) {
  .mini_pricing__head {
    align-items: flex-start;
    text-align: left;
  }
  .mini_pricing__grid {
    gap: 16px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}