/* 11 — Depth pricing block (.prc-)
   Значения сняты из Figma oFtdKnfuDczuCj4v7e0emt:
   118:118058 (1600, блок 1540×1135) · 118:118059 (1200, 1160×1178) ·
   118:118057 (1024, 992×2154) · 118:118062 (768, 744×2138) ·
   118:118061 (430, 414×2598) · 118:118060 (375, 363×2614) · 118:118063 (320, 2614) */

.prc-section,
.prc-section * {
  box-sizing: border-box;
}

.prc-section {
  background: transparent;   /* фон общий, своей подложки нет */
  /* макет 1600: pt 41, pb 0; боковые поля 24 — решение Alexa (в макете 30) */
  padding: 41px 24px 0;
}

.prc-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Заголовок с кольцами */
.prc-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-bottom: 44px;
}

.prc-rings {
  position: relative;
  width: 162px;
  height: 80px;
}

.prc-ring {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
}

.prc-ring img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Позиции колец заданы transform-ом, а не left: доли считаются от
   собственной ширины кольца, поэтому одни и те же 0 / 50% / 100% верны
   и на 1600 (шаг 40,5), и на 1024 (шаг 28,25) — и это же значение
   анимируется, не воюя с раскладкой. */
.prc-ring--l { left: 0; transform: translateX(0); }
.prc-ring--c { left: 0; transform: translateX(50%); }
.prc-ring--r { left: 0; transform: translateX(100%); }

/* Крайние кольца проходят сквозь центральное и меняются местами
   (выбор Alexa из трёх прочтений). Центральное стоит. Движение только по
   горизонтали и без масштаба — по вертикали строго ноль, как она и просила.
   Одно событие на цикл: знак не тараторит рядом с заголовком. */
.prc-ring--l { animation: prc-swap-l 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
.prc-ring--r { animation: prc-swap-r 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite; }

@keyframes prc-swap-l {
  0%,  10%  { transform: translateX(0); }
  45%, 55%  { transform: translateX(100%); }
  90%, 100% { transform: translateX(0); }
}
@keyframes prc-swap-r {
  0%,  10%  { transform: translateX(100%); }
  45%, 55%  { transform: translateX(0); }
  90%, 100% { transform: translateX(100%); }
}

/* Меньше движения — знак просто стоит на своих местах. */
@media (prefers-reduced-motion: reduce) {
  .prc-ring--l, .prc-ring--r { animation: none; }
}

.prc-title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-align: center;
  color: #EAEAEA;
  max-width: 425px;
}

/* Тело: табы + карточки + подпись */
.prc-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.prc-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* Табы LANDING / E-COM / UX-UI / PRODUCT */
.prc-tabs-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 111px;
}

.prc-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.prc-tabs {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px;
  border-radius: 111px;
  background: #232325;
}

.prc-tab {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 22px;
  border: 0;
  border-radius: 51px;
  background: #232325;
  color: #EAEAEA;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.prc-tab.is-active {
  background: #EAEAEA;
  color: #232325;
  cursor: default;
}

.prc-tabsep {
  flex: none;
  width: 1px;
  height: 20px;
  background: #EAEAEA;
  opacity: 0.24;
}

/* в макете разделители рядом с активным табом отсутствуют */
.prc-tab.is-active + .prc-tabsep { visibility: hidden; }
.prc-tabsep:has(+ .prc-tab.is-active) { visibility: hidden; }

/* Карточки тарифов */
.prc-cards {
  display: flex;
  gap: 4px;
  width: 100%;
}

.prc-card {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 742px;
  border-radius: 20px;
  background: rgba(164, 164, 164, 0.28);
  overflow: hidden;
}

.prc-card--pro {
  background: #EAEAEA;
}

.prc-card__head {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  border-radius: 16px;
  background: #EAEAEA;
  overflow: hidden;
}

.prc-card--pro .prc-card__head {
  background: #232325;
}

.prc-card__toprow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 12px 7px;
}

.prc-card__name {
  margin: 0;
  font-family: "Iwona Heavy", "Iwona Bold", serif;
  font-style: italic;
  font-size: 20px;
  line-height: 32px;
  white-space: nowrap;
  color: #232325;
}

.prc-card--pro .prc-card__name {
  color: #EAEAEA;
}

.prc-card__price {
  margin: 0;
  width: 120px;
  height: 32px;
  text-align: right;
  font-family: "Iwona Bold", serif;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: #171719;
}

.prc-card--pro .prc-card__price {
  color: #EAEAEA;
}

.prc-card__plus {
  font-size: 12.9px;
}

.prc-card__rulewrap {
  padding: 0 12px;
}

.prc-card__rule {
  display: block;
  height: 1px;
  background: #171719;
  opacity: 0.24;
}

.prc-card--pro .prc-card__rule {
  background: #EAEAEA;
  opacity: 0.72;
}

.prc-card__descrow {
  padding: 10px 12px 12px;
}

.prc-card__desc {
  margin: 0;
  width: 264px;
  max-width: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
  color: #171719;
}

.prc-card--pro .prc-card__desc {
  color: #EAEAEA;
}

.prc-card__cta {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 16px;
  background: #F7F7F7;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #171719;
  text-decoration: none;
}

.prc-card__ctalabel {
  white-space: nowrap;
}

.prc-card__cta em {
  font-style: italic;
}

.prc-card--pro .prc-card__cta {
  background: #171719;
  color: #EAEAEA;
}

/* Подпись под карточками */
.prc-subtext {
  margin: 0;
  width: 736px;
  max-width: 100%;
  padding: 0 20px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #EAEAEA;
  opacity: 0.56;
}

/* ─── 1200 ─── блок 1160, три колонки; в макете pt 40 / pb 40 и зазор 48 */
@media (max-width: 1200px) {
  .prc-section {
    padding: 40px 20px;
  }
  .prc-header {
    margin-bottom: 48px;
  }
}

/* ─── 1024 ─── карточки в столбик 588/588/606, мобильный заголовок */
@media (max-width: 1024px) {
  .prc-section {
    padding: 40px 16px 0;
  }
  .prc-header {
    gap: 24px;
    margin-bottom: 56px;
  }
  .prc-rings {
    width: 113px;
    height: 56px;
  }
  .prc-title {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.48px;
    max-width: 261px;
  }
  .prc-cards {
    flex-direction: column;
    gap: 12px;
  }
  .prc-card {
    flex: none;
    width: 100%;
    height: 588px;
  }
  .prc-card--pro {
    height: 606px;
  }
  .prc-card__desc {
    width: auto;
  }
  .prc-card__descrow {
    padding-right: 164px;
  }
  .prc-card--pro .prc-card__descrow {
    padding-right: 113px;
  }
}

/* ─── 768 ─── */
@media (max-width: 1023px) {
  .prc-section {
    padding: 40px 12px 0;
  }
  .prc-header {
    margin-bottom: 40px;
  }
  .prc-subtext {
    width: 100%;
  }
}

/* ─── 430 ─── карточки снова 742, подпись с pt 4 */
@media (max-width: 719px) {
  .prc-section {
    padding: 40px 8px 0;
  }
  .prc-body {
    gap: 12px;
  }
  .prc-card,
  .prc-card--pro {
    height: 742px;
  }
  .prc-card__desc {
    width: 264px;
  }
  .prc-card__descrow,
  .prc-card--pro .prc-card__descrow {
    padding-right: 12px;
  }
  .prc-subtext {
    padding-top: 4px;
  }
}

/* ─── 375 ─── свитчер держит 414 и скроллится по горизонтали (в макете обрезан) */
@media (max-width: 375px) {
  .prc-section {
    padding: 40px 6px 0;
  }
  .prc-tabs {
    width: 414px;
  }
}