.pricing { padding-block: 20px; }

.pricing__box {
  position: relative;
  padding: 0 var(--card-pad);
}

.pricing__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.596cqw, 30px);
}

.pricing__head {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.851cqw, 16px);
}

.pricing__title {
  font-size: var(--fs-h2);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-black);
}

.pricing__title-muted { color: var(--color-gray-2); }

.pricing__subtitle {
  font-size: var(--fs-h4);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
  opacity: 0.8;
}

.pricing__stages,
.pricing__formats {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

.pricing__stage,
.pricing__format {
  min-height: 44px;
  padding: 10px clamp(16px, 1.596cqw, 30px);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-gray-1);
  font: inherit;
  font-size: var(--fs-btn);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pricing__stage--active,
.pricing__format--active {
  background: var(--color-blue);
  color: var(--color-white);
}

.pricing__stages,
.pricing__formats {
  gap: 8px;
  padding: 0;
  background: none;
}

.pricing .pricing__stage,
.pricing .pricing__format {
  min-height: 0;
  padding: 10px clamp(16px, 1.596cqw, 30px);
  border: 1px solid var(--color-gray-2);
  color: var(--color-gray-2);
  font-size: clamp(15px, 1.064cqw, 20px);
  line-height: 1.4;
}

.pricing .pricing__stage--active,
.pricing .pricing__format--active {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--color-white);
}

.pricing__formats { display: none; }

.pricing__feature {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--color-gray-1);
}

.pricing__icon {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.05em;
}

.pricing__feature--yes .pricing__icon { color: var(--color-success); }

.pricing__feature--no .pricing__icon { color: var(--color-gray-2); }

.pricing__feature--no { color: var(--color-gray-2); }

.pricing__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-cards);
  list-style: none;
}

.pricing__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.702cqw, 32px);
  padding: clamp(20px, 2.553cqw, 48px);
  background: var(--color-white);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

@media (min-width: 1281px) {
  .pricing__plan { min-height: 58.787cqw; }

  .pricing__grid {
    grid-template-columns: repeat(2, calc((100% - 3 * var(--gap-cards)) / 4));
    justify-content: center;
  }
}

.pricing__plan[data-format='with'],
.pricing__plan[data-format='premium'] {
  border-color: color-mix(in srgb, var(--color-blue) 13%, transparent);
  background: linear-gradient(180deg, var(--tint-selago) 0%, var(--color-white) 100%);
  box-shadow: 0 8px 30px 0 color-mix(in srgb, var(--color-blue) 8%, transparent), var(--shadow-card);
}

.pricing[data-format='with'] .pricing__plan[data-format='with'],
.pricing[data-format='without'] .pricing__plan[data-format='without'] {
  border-color: var(--color-blue);
}

.pricing__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.pricing__chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 clamp(10px, 1.1cqw, 21px);
  border-radius: var(--radius-pill);
  background: var(--tint-athens);
  color: var(--color-ink);
  font-size: clamp(13px, 0.83cqw, 16px);
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.pricing__chip--without { background: var(--tint-periwinkle); color: var(--color-violet); }

.pricing__chip--with,
.pricing__chip--premium { background: var(--tint-orchid); color: var(--color-plum); }

.pricing__chip--fgos::after {
  content: '';
  width: 1.5em;
  height: 1.5em;
  margin-left: 6px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M6.8 11.7l3.6 5.5a.9.9 0 001.7 0L18 8.3' stroke='%2322AE73' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--color-white);
}

.pricing__hot {
  position: absolute;
  top: -17px;
  left: 45.4%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 206px;
  min-height: 33px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-violet);
  color: var(--tint-periwinkle);
  font-size: clamp(13px, 0.8cqw, 15px);
  font-weight: 500;
  white-space: nowrap;
}

.pricing__plan-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing__plan-title {
  font-size: var(--fs-h4);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-black);
}

.pricing__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pricing__price-value {
  font-size: clamp(32px, 2.553cqw, 48px);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-blue);
}

.pricing__price-period {
  font-size: var(--fs-text);
  color: var(--color-gray-2);
}

.pricing__plan-body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.702cqw, 32px);
}

.pricing__plan-intro {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-gray-2);
}

.pricing__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.pricing__cta {
  justify-content: center;
  padding-block: clamp(14px, 1.17cqw, 22px);
  border-radius: 20px;
  font-size: clamp(16px, 1.064cqw, 20px);
}

@media (max-width: 1280px) {
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 1024px) {
  .pricing__box { padding-inline: 0; }

  .pricing__plan { padding: 24px; }
}

@media (max-width: 800px) {
  .pricing__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .pricing__stages {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing .pricing__stage {
    padding: 10px 6px;
    font-size: var(--fs-small);
  }

  .pricing__hot { left: auto; right: 16px; }
}