/* РАСКЛАДКИ ЦЕН - ЗЕРКАЛО, А НЕ СВОЯ ВЕРСИЯ.

   Источник: design/v4/site-ceny/kit/ (1 файл). Собирает tools/adopt-pricing.php;
   правка руками теряется при следующем срезе и теряется молча.

   Отступления от побайтовой копии объявлены В КОДЕ ИНСТРУМЕНТА и печатаются отчётом
   прогона. Их 12. */

/* ===== pricing-kit.css ===== */
/* =========================================================================
   СЕКЦИЯ «ЦЕНЫ» - СЕМЬЯ A (КАРТОЧКИ). Наборы A1 и A2.
   Слой блоков сайта клиента. Ни одного жёсткого цвета, ни одной жёсткой
   гарнитуры, ни одного медиазапроса к ширине окна, ни одного !important,
   ни одного физического свойства направления.

   Цвет - только роли палитры сайта:
     --ls-paper --ls-band --ls-band-2 --ls-ink
     --ls-acc --ls-acc-on --ls-acc-2 --ls-line
   Гарнитуры - только роли: --ls-head-face --ls-text-face
   Скругление - только ступень сайта: --ls-radius --ls-r-k --ls-r-pill
   Ритм - --ls-section-y, контейнер - --ls-container

   Состояния и наборы красятся через ПОЛЬЗОВАТЕЛЬСКИЕ СВОЙСТВА
   (--ls-pr-card-edge, --ls-pr-btn-bg, --ls-pr-btn-ink): инлайн PHP печатает сырьё
   в переменную, правила его не перебивают.
   ========================================================================= */

.ls-pricing {
  container: sc-paper / inline-size;      /* узость решает бумага, а не окно */
  background: var(--ls-paper);
  color: var(--ls-ink);
  font-family: var(--ls-text-face);
  font-size: 16px;
  line-height: 1.5;
}

.ls-pricing *, .ls-pricing *::before, .ls-pricing *::after { box-sizing: border-box; }

.ls-pricing__ct { padding-block: var(--ls-pr-pad, 96px); }

.ls-pricing__in {
  max-inline-size: var(--ls-pr-max, var(--ls-max, 1536px));   /* одна ширина на весь сайт */
  margin-inline: auto;
  padding-inline: clamp(16px, 2.2cqw, 32px);
}

.ls-pricing h2, .ls-pricing h3, .ls-pricing p, .ls-pricing ul { margin: 0; }
.ls-pricing ul { padding: 0; list-style: none; }

/* ---------- заголовочный блок: любая часть может отсутствовать ---------- */

.ls-pricing__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  max-inline-size: 62ch;
  margin-inline: auto;
  margin-block-end: clamp(32px, 3.4cqw, 56px);
}

.ls-pricing__eyebrow {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-acc-2);               /* объявленная роль, а не альфа */
}

.ls-pricing__title {
  font-family: var(--ls-head-face);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.22;                     /* запас под Ё и Й */
  text-wrap: pretty;
}

.ls-pricing__para { font-size: 18px; line-height: 1.55; text-wrap: pretty; }

/* ---------- ряд: число колонок - следствие числа планов ---------- */

.ls-pricing__row {
  display: grid;
  justify-content: center;               /* ряд уже секции - встаёт по центру */
  align-items: stretch;
  /* зазор течёт от ширины бумаги одной величиной, без ступеней */
  gap: clamp(12.5px, calc(10.5px + 0.52cqw), 18px);
  grid-template-columns: minmax(0, 1fr);   /* узкая бумага - одна колонка */
}

/* КОЛОНКИ СЕМЬИ A ПО СЧИТАННЫМ ПОРОГАМ, как в семьях B и C.
   Карточке нужно 260 на текст плюс два отступа по 28 плюс две рамки по 2 = 320
   на трек. Содержимое контейнера - 0.956 бумаги, зазор - 10.5 + 0.0052 бумаги.
   Отсюда: трём колонкам нужно 1038 бумаги (берём 1040), четырём - 1395,
   двум - 684, то есть две колонки живут уже от первого порога 700.
   Без этого на 701 три колонки дали бы трек 214 и текст 154. */

@container ls (width > 700px) {
  .ls-pricing__row--2,
  .ls-pricing__row--3,
  .ls-pricing__row--4 { grid-template-columns: repeat(2, minmax(0, 480px)); }
}

@container ls (width >= 1040px) {
  .ls-pricing__row--3 { grid-template-columns: repeat(3, minmax(0, 480px)); }
}

@container ls (width >= 1395px) {
  .ls-pricing__row--4 { grid-template-columns: repeat(4, minmax(0, 480px)); }
}

.ls-pricing__row--1 { grid-template-columns: fit-content(620px); }  /* растёт по содержимому */

.ls-pricing__slot { display: flex; flex-direction: column; min-inline-size: 0; }

/* ---------- карточка ---------- */

.ls-pricing__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-inline-size: 0;
  padding: 28px;
  background: var(--ls-pr-card-bg, var(--ls-band));
  color: var(--ls-pr-card-ink, var(--ls-ink));
  border: 2px solid var(--ls-pr-card-edge, var(--ls-line));
  border-radius: calc(18px * var(--ls-r-k, 1));
}

/* признак выделенного: несущий край берёт ГЛАВНЫЙ ЦВЕТ (4.9 и выше),
   а не роль «линия» (1.3-1.5 - она декоративна по построению).
   Толщина края одна у всех карточек, поэтому геометрия не съезжает. */
.ls-pricing__card--hi { --ls-pr-card-edge: var(--ls-acc); }

.ls-pricing__name {
  font-family: var(--ls-head-face);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  text-wrap: pretty;
}

.ls-pricing__price {
  display: flex;
  flex-wrap: wrap;                       /* цена - строка любой длины */
  align-items: baseline;
  gap: 8px;
  min-inline-size: 0;
}

.ls-pricing__amount {
  font-family: var(--ls-head-face);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.12;
  color: inherit;                        /* роль органа-хозяина, не жёсткий акцент */
  min-inline-size: 0;
  overflow-wrap: break-word;
}

.ls-pricing__period { font-size: 16px; color: inherit; }

.ls-pricing__desc { font-size: 16px; line-height: 1.55; text-wrap: pretty; }

/* ---------- список пунктов: потолка нет ---------- */

.ls-pricing__list { display: flex; flex-direction: column; gap: 10px; }

.ls-pricing__li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.ls-pricing__tick { flex: none; font-size: 20px; color: var(--ls-pr-mark, var(--ls-acc)); }

/* ---------- кнопка: значок с любой стороны не меняет высоту ---------- */

.ls-pricing__cta { display: flex; }
.ls-pricing__cta--last { margin-block-start: auto; }   /* A1: кнопка держится низа карточки */

.ls-pricing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 48px;                  /* цель нажатия */
  padding-block: 12px;
  padding-inline: 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  background: var(--ls-pr-btn-bg, var(--ls-acc));
  color: var(--ls-pr-btn-ink, var(--ls-acc-on));   /* пара ролей, не константа */
  border-radius: calc(12px * var(--ls-r-k, 1));
  transition: background-color 0.15s linear, color 0.15s linear;
}

.ls-pricing__btn:hover { --ls-pr-btn-bg: var(--ls-ink); --ls-pr-btn-ink: var(--ls-paper); }

/* нажатие - третий вид, а не тот, что наведение. Пара «плоскость + чернило»
   есть в любой из 24 палитр и работает даже внутри залитой колонки семьи B.
   Ни один орган не меняет размер ни на одном из четырёх видов. */
.ls-pricing__btn:active { --ls-pr-btn-bg: var(--ls-paper); --ls-pr-btn-ink: var(--ls-ink); }

/* при фиксированной колонке длинная подпись обрезается многоточием в одну
   строку; при одном плане колонка fit-content растёт по этой же строке */
.ls-pricing__btn-label { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- бейдж A1: внутри карточки, над именем плана ---------- */

.ls-pricing__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  padding-block: 4px;
  padding-inline: 14px;
  font-size: 16px;
  font-weight: 600;
  background: var(--ls-acc);
  color: var(--ls-acc-on);
  border-radius: var(--ls-r-pill, 999px);
}

/* ---------- полоса A2: над карточкой, приклеена к ней ---------- */

.ls-pricing__band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding-block: 12px;
  padding-inline: 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-wrap: pretty;
  background: var(--ls-acc);
  color: var(--ls-acc-on);
  border-start-start-radius: calc(18px * var(--ls-r-k, 1));
  border-start-end-radius: calc(18px * var(--ls-r-k, 1));
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.ls-pricing__slot--banded > .ls-pricing__card {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* НЕЦВЕТНАЯ метка выделенного плана в семье B - значок у имени. Заливка
   колонки - единственный признак этих двух наборов, а на палитре, где главный
   цвет совпадает с полосой, он исчезает целиком. Значок - форма, не цвет. */
.ls-pricing__nrow { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }

/* ---------- подвал секции (необязательный орган) ---------- */

.ls-pricing__foot {
  margin-block-start: clamp(28px, 2.6cqw, 44px);
  text-align: center;
  font-size: 18px;
  text-wrap: pretty;
}

.ls-pricing__flink { color: var(--ls-acc); text-decoration: underline; text-underline-offset: 3px; }
.ls-pricing__flink:hover { color: var(--ls-ink); }

/* ---------- фокус: отличается от выделенного (тот - главный цвет) ----------
   последняя часть не голый :focus-visible - несёт оговорку :not(.sc-se__edit),
   чтобы не перебивать кабинетную голубую рамку правки */

.ls-pricing .ls-pricing__btn:focus-visible:not(.sc-se__edit),
.ls-pricing .ls-pricing__flink:focus-visible:not(.sc-se__edit) {
  /* ДЕКОРАЦИЯ: кольцо фокуса объявлено outline без своего радиуса:
     оси скругления оно НЕ слушается и остаётся кольцом на всех шести ступенях */
  outline: 3px solid var(--ls-ink);
  outline-offset: 3px;
}

/* ---------- значки: только Material Symbols, именами ---------- */

.ls-pricing__ico {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;   /* исключение: лигатуры Material Symbols читаются только слева направо */
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  flex: none;
}

/* ---------- узкая бумага: порог 700, условие диапазонное ---------- */

@container ls (width <= 700px) {
  .ls-pricing__ct { padding-block: calc(var(--ls-pr-pad, 96px) * 0.66); }
  .ls-pricing__title { font-size: 32px; }
  .ls-pricing__para { font-size: 17px; }
  .ls-pricing__amount { font-size: 34px; }
  .ls-pricing__name { font-size: 20px; }
  .ls-pricing__foot { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-pricing * { transition-duration: 0s; animation-duration: 0s; }
}

/* =========================================================================
   СЕМЬЯ B (СЛИТЫЕ). Наборы B1 и B2. Оболочка секции, контейнер, ритм,
   заголовочный блок, кнопка, цена и фокус - общие с семьёй A: одна ширина
   контейнера на весь сайт, секция себе ширину не изобретает.

   Выделенный план в этой семье помечен ЗАЛИВКОЙ КОЛОНКИ. Заливка взята
   парой ролей - главный цвет плюс текст на главном (5.1 при любой из 24),
   а не «полосой к плоскости» (1.04-1.09, не видно ни при одной). Внутри
   залитой колонки перекрашивается всё: маркер, разделители пунктов и пара
   кнопки - через переменные, а не через жёсткие цвета.
   ========================================================================= */

.ls-pricing__head--start {
  align-items: flex-start;
  text-align: start;
  margin-inline: 0;
  max-inline-size: 52ch;
}

.ls-pricing__foot--start { text-align: start; }

/* ---------- B1: плита из колонок ---------- */

.ls-pricing__slab {
  display: grid;
  overflow: hidden;                      /* заливка колонки обрезается общим углом */
  background: var(--ls-band);
  border: 1px solid var(--ls-pr-edge, var(--ls-ink));   /* несущая рамка - чернило, не «линия» */
  border-radius: calc(18px * var(--ls-r-k, 1));
}

.ls-pricing__slab--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-pricing__slab--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls-pricing__slab--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 978px; margin-inline: auto; }
.ls-pricing__slab--1 {
  grid-template-columns: minmax(0, 1fr);
  inline-size: fit-content;
  max-inline-size: min(100%, 620px);
  margin-inline: auto;
}

.ls-pricing__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-inline-size: 0;
  padding: 32px;
  background: var(--ls-pr-col-bg, var(--ls-band));
  color: var(--ls-pr-col-ink, var(--ls-ink));
}

/* граница между планами; крайние не рисуются - их держит рамка плиты */
.ls-pricing__col + .ls-pricing__col { border-inline-start: 1px solid var(--ls-pr-edge, var(--ls-ink)); }

.ls-pricing__col--hi {
  --ls-pr-col-bg: var(--ls-acc);
  --ls-pr-col-ink: var(--ls-acc-on);
  --ls-pr-mark: var(--ls-acc-on);
  --ls-pr-sep: var(--ls-acc-on);
  --ls-pr-btn-bg: var(--ls-acc-on);
  --ls-pr-btn-ink: var(--ls-acc);
}

/* где заливка встречает обычную колонку, границей служит край заливки:
   линия там была бы вторым разделителем на одном стыке */
.ls-pricing__col + .ls-pricing__col--hi { border-inline-start-color: transparent; }
.ls-pricing__col--hi + .ls-pricing__col { border-inline-start-color: transparent; }

.ls-pricing__col--hi .ls-pricing__btn:hover {
  --ls-pr-btn-bg: var(--ls-acc);
  --ls-pr-btn-ink: var(--ls-acc-on);
  box-shadow: none;
  outline: 2px solid var(--ls-acc-on);
  outline-offset: -2px;                  /* не тень: обводка внутрь, чтобы кнопка не пропала в заливке */
}

/* список B1: маркер-точка, разделитель по всей ширине колонки */
.ls-pricing__plist { display: flex; flex-direction: column; margin-inline: -32px; }

.ls-pricing__pli {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 12px;
  padding-inline: 32px;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.ls-pricing__pli + .ls-pricing__pli { border-block-start: 1px solid var(--ls-pr-sep, var(--ls-line)); }

/* ДЕКОРАЦИЯ: точка обязана остаться точкой на любой ступени, поэтому
   радиус здесь намеренно НЕ конструктивный и ступени не слушается */
.ls-pricing__dot {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-block-start: 9px;
  border-radius: 50%;
  background: var(--ls-pr-mark, var(--ls-acc));
}

/* ---------- B2: сетка по строкам ---------- */

.ls-pricing__grid {
  display: grid;
  overflow: hidden;
  background: var(--ls-band);
  border: 1px solid var(--ls-pr-edge, var(--ls-ink));
  border-radius: calc(18px * var(--ls-r-k, 1));
}

.ls-pricing__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-pricing__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls-pricing__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 978px; margin-inline: auto; }
.ls-pricing__grid--1 {
  grid-template-columns: minmax(0, 1fr);
  inline-size: fit-content;
  max-inline-size: min(100%, 620px);
  margin-inline: auto;
}

/* число рядов - свойство ПЛИТЫ, а не плана: ряд существует, если поле
   заполнено хотя бы у одного плана */
.ls-pricing__grid--rows5 { grid-template-rows: repeat(5, auto); }
.ls-pricing__grid--rows4 { grid-template-rows: repeat(4, auto); }
.ls-pricing__grid--rows3 { grid-template-rows: repeat(3, auto); }
.ls-pricing__grid--rows5 > .ls-pricing__plan { grid-row: span 5; }
.ls-pricing__grid--rows4 > .ls-pricing__plan { grid-row: span 4; }
.ls-pricing__grid--rows3 > .ls-pricing__plan { grid-row: span 3; }

.ls-pricing__plan {
  display: grid;
  grid-template-rows: subgrid;           /* ряды проходят через все планы насквозь */
  min-inline-size: 0;
  background: var(--ls-pr-col-bg, var(--ls-band));
  color: var(--ls-pr-col-ink, var(--ls-ink));
}

.ls-pricing__plan + .ls-pricing__plan { border-inline-start: 1px solid var(--ls-pr-edge, var(--ls-ink)); }

.ls-pricing__plan--hi {
  --ls-pr-col-bg: var(--ls-acc);
  --ls-pr-col-ink: var(--ls-acc-on);
  --ls-pr-mark: var(--ls-acc-on);
  --ls-pr-sep: var(--ls-acc-on);
  --ls-pr-btn-bg: var(--ls-acc-on);
  --ls-pr-btn-ink: var(--ls-acc);
}

.ls-pricing__plan + .ls-pricing__plan--hi { border-inline-start-color: transparent; }
.ls-pricing__plan--hi + .ls-pricing__plan { border-inline-start-color: transparent; }

.ls-pricing__plan--hi .ls-pricing__btn:hover {
  --ls-pr-btn-bg: var(--ls-acc);
  --ls-pr-btn-ink: var(--ls-acc-on);
  outline: 2px solid var(--ls-acc-on);
  outline-offset: -2px;                  /* причина та же, что в B1 */
}

.ls-pricing__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;           /* содержимое всех ячеек ряда встаёт на одну линию сверху */
  min-inline-size: 0;
  padding-block: 20px;
  padding-inline: 28px;
}

.ls-pricing__cell + .ls-pricing__cell { border-block-start: 1px solid var(--ls-pr-sep, var(--ls-line)); }

.ls-pricing__cell--first { padding-block-start: 28px; }
.ls-pricing__cell--last { padding-block-end: 28px; margin-block-start: auto; }

/* список B2 без разделителей: ряд уже обведён линиями сетки */
.ls-pricing__glist { display: flex; flex-direction: column; gap: 10px; }

.ls-pricing__gli {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- средняя бумага: порог выведен из меры набора, а не назначен ----------
   Как считано. Содержимое контейнера - это бумага минус два padding-inline
   по 2.2cqw, то есть 0.956 бумаги. Разделители - границы НА колонках и при
   box-sizing:border-box трек НЕ уменьшают; из содержимого вычитаются только
   2 точки собственной рамки плиты. Колонке нужно 260 на текст плюс два
   отступа по 32 плюс разделитель 1, то есть трек не меньше 325.
   Отсюда четырём планам нужно 0.956P - 2 >= 1300, то есть бумаги 1362;
   трём - 1022. Условия диапазонные и контейнерные, граница строгая - дробной
   ширине бумаги нельзя оставлять щель. Единственный ОБЪЯВЛЕННЫЙ порог
   продукта - 700; эти два считаны из меры и живут только внутри семьи B. */

@container ls (700px < width < 1362px) {
  .ls-pricing__slab--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-pricing__slab--4 > .ls-pricing__col:nth-child(odd) { border-inline-start: 0; }
  .ls-pricing__slab--4 > .ls-pricing__col:nth-child(n+3) { border-block-start: 1px solid var(--ls-pr-edge, var(--ls-ink)); }
}

@container ls (700px < width < 1022px) {
  .ls-pricing__slab--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-pricing__slab--3 > .ls-pricing__col:nth-child(odd) { border-inline-start: 0; }
  .ls-pricing__slab--3 > .ls-pricing__col:nth-child(n+3) { border-block-start: 1px solid var(--ls-pr-edge, var(--ls-ink)); }
}

/* Сетке по строкам хватает 220 на текст плюс два отступа по 28 плюс разделитель 1,
   то есть трек 277: четырём планам нужно бумаги 1162, трём 872.
   Ряды продолжают совпадать внутри каждой пары. */

@container ls (700px < width < 1162px) {
  .ls-pricing__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-pricing__grid--4 > .ls-pricing__plan:nth-child(odd) { border-inline-start: 0; }
  .ls-pricing__grid--4 > .ls-pricing__plan:nth-child(n+3) { border-block-start: 1px solid var(--ls-pr-edge, var(--ls-ink)); }
}

@container ls (700px < width < 872px) {
  .ls-pricing__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-pricing__grid--3 > .ls-pricing__plan:nth-child(odd) { border-inline-start: 0; }
  .ls-pricing__grid--3 > .ls-pricing__plan:nth-child(n+3) { border-block-start: 1px solid var(--ls-pr-edge, var(--ls-ink)); }
}

/* ---------- узкая бумага для семьи B: тот же порог 700 ---------- */

@container ls (width <= 700px) {
  /* плита честно распадается на строки, но остаётся ОДНОЙ коробкой:
     общая рамка и общий угол не снимаются, разделитель поворачивается */
  .ls-pricing__slab--1,
  .ls-pricing__slab--2,
  .ls-pricing__slab--3,
  .ls-pricing__slab--4 { grid-template-columns: minmax(0, 1fr); }

  .ls-pricing__col { padding: 24px; }
  .ls-pricing__plist { margin-inline: -24px; }
  .ls-pricing__pli { padding-inline: 24px; }

  .ls-pricing__col + .ls-pricing__col {
    border-inline-start: 0;
    border-block-start: 1px solid var(--ls-pr-edge, var(--ls-ink));
  }
  .ls-pricing__col + .ls-pricing__col--hi,
  .ls-pricing__col--hi + .ls-pricing__col { border-block-start-color: var(--ls-pr-edge, var(--ls-ink)); }

  .ls-pricing__grid--1,
  .ls-pricing__grid--2,
  .ls-pricing__grid--3,
  .ls-pricing__grid--4 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }

  /* ряды теряют смысл на одной колонке: план становится стопкой целиком */
  .ls-pricing__plan { grid-template-rows: none; }
  .ls-pricing__grid--rows5 > .ls-pricing__plan,
  .ls-pricing__grid--rows4 > .ls-pricing__plan,
  .ls-pricing__grid--rows3 > .ls-pricing__plan { grid-row: auto; }

  .ls-pricing__plan + .ls-pricing__plan {
    border-inline-start: 0;
    border-block-start: 1px solid var(--ls-pr-edge, var(--ls-ink));
  }
  .ls-pricing__plan + .ls-pricing__plan--hi,
  .ls-pricing__plan--hi + .ls-pricing__plan { border-block-start-color: var(--ls-pr-edge, var(--ls-ink)); }

  .ls-pricing__cell { padding-inline: 24px; }

  /* семья C на узкой бумаге */
  .ls-pricing__band-row { max-inline-size: 100%; }
  .ls-pricing__wcard { padding: 22px; }
  .ls-pricing__srow { padding: 20px; border-inline-start-width: 8px; }
}

/* =========================================================================
   СЕМЬЯ C (ИНЫЕ). Наборы C1 и C2.
   ========================================================================= */

/* ---------- C1: широкая с ранним порогом ----------
   Собственный предел ширины ряда выражен ОТ КОНТЕЙНЕРА - min() с 100%, -
   поэтому с колонкой тела секции он спорить не может: сужает, но никогда
   не расширяет. Окно не читается нигде. */

.ls-pricing__wrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  inline-size: 100%;
  margin-inline: auto;
}

/* СОБСТВЕННЫЙ ПРЕДЕЛ ШИРИНЫ - НЕ ОДНО ЧИСЛО, А МЕРА НАБОРА.
   Колонке на план нужно 260 на текст плюс два отступа по 28 плюс две рамки
   по 2 = 320. Отсюда предел: число планов на 320 плюс зазоры по 16.
   Выражен min() с 100%, то есть ОТ КОНТЕЙНЕРА: сужает ряд на широкой
   бумаге и молча уступает колонке тела, когда бумага уже предела. */
.ls-pricing__wrow--1 { max-inline-size: min(100%, 620px); }
.ls-pricing__wrow--2 { max-inline-size: min(100%, 656px); }
.ls-pricing__wrow--3 { max-inline-size: min(100%, 992px); }
.ls-pricing__wrow--4 { max-inline-size: min(100%, 1328px); }

.ls-pricing__wcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-inline-size: 0;
  padding: 28px;
  background: var(--ls-pr-card-bg, var(--ls-band));
  color: var(--ls-pr-card-ink, var(--ls-ink));
  border: 2px solid var(--ls-pr-card-edge, var(--ls-line));
  border-radius: calc(18px * var(--ls-r-k, 1));
}

.ls-pricing__wcard--hi { --ls-pr-card-bg: var(--ls-band-2); --ls-pr-card-edge: var(--ls-acc); }

/* ПРОМЕЖУТОЧНОЕ СОСТОЯНИЕ: бумага шире 700, но тесна для колонки на план.
   План лежит на боку: имя и описание в начале строки, цена и кнопка в конце. */

.ls-pricing__wtop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.ls-pricing__wmain { display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }
.ls-pricing__wside { display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; }

/* ---------- C2: лента строк ----------
   Строка - ОДИН ПЛАН ЦЕЛИКОМ. В B2 строка - ОДНО ПОЛЕ у всех планов сразу,
   и там все планы живут в общей коробке без воздуха. Здесь у каждой строки
   своя рамка и свой угол, строки разделены зазором. */

.ls-pricing__strip { display: flex; flex-direction: column; gap: 14px; }

.ls-pricing__srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-inline-size: 0;
  padding: 24px;
  background: var(--ls-pr-card-bg, var(--ls-band));
  color: var(--ls-pr-card-ink, var(--ls-ink));
  border: 2px solid var(--ls-pr-card-edge, var(--ls-line));
  border-inline-start-width: 8px;        /* одна ширина у всех строк: геометрия не съезжает */
  border-radius: calc(18px * var(--ls-r-k, 1));
}

/* выделение в C2: ведущий край главным цветом, подложка на второй полосе
   и бейдж рядом с именем. НЕ полоса над строкой - та читалась бы заголовком
   раздела, а не меткой плана. */
.ls-pricing__srow--hi { --ls-pr-card-bg: var(--ls-band-2); --ls-pr-card-edge: var(--ls-acc); }

/* Органы строки лежат ПЛОСКИМИ детьми и в порядке узкой бумаги:
   имя, цена, описание, список, кнопка. Цена и кнопка НЕ собраны в общий
   узел: в боковую колонку их ставит сетка на широкой бумаге, и только там.
   Собери их одним блоком - и на 390 цена уедет под десять пунктов. */

.ls-pricing__sname { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-inline-size: 0; }

.ls-pricing__sdesc { min-inline-size: 0; }

.ls-pricing__sprice { min-inline-size: 0; }

.ls-pricing__scta { display: flex; min-inline-size: 0; }

/* список внутри строки идёт в колонки по мере 220: число колонок подбирается
   само от доступного места, отдельные условия ширины для этого не нужны */
.ls-pricing__scols { columns: 220px auto; column-gap: 28px; min-inline-size: 0; }

.ls-pricing__scols > .ls-pricing__li { break-inside: avoid; margin-block-end: 10px; }

/* ---------- широкая бумага для семьи C ---------- */

/* Первый порог - объявленные 700 продукта: план кладётся на бок. */
@container ls (width > 700px) {
  .ls-pricing__wtop { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }

  .ls-pricing__srow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: 14px 24px;
    align-items: start;
  }
  /* ряды неявные: любой орган может отсутствовать, пустого ряда не остаётся */
  .ls-pricing__sname,
  .ls-pricing__sdesc,
  .ls-pricing__scols { grid-column: 1; }
  .ls-pricing__sprice { grid-column: 2; grid-row: 1; }
  .ls-pricing__scta { grid-column: 2; grid-row: 2; }

  /* двум планам предела 656 хватает уже здесь: 0.956 от 701 даёт 670 > 656,
     то есть трек 320 и текст ровно 260 - второй порог совпадает с первым */
  .ls-pricing__wrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 24px; }
  .ls-pricing__wrow--2 .ls-pricing__wtop { grid-template-columns: minmax(0, 1fr); }
}

/* ВТОРОЙ ПОРОГ C1 ЗАВИСИТ ОТ ЧИСЛА ПЛАНОВ, как и в семье B:
   порог есть та бумага, на которой ряд впервые получает свой предел целиком.
   Ряд получает 0.956 бумаги, отсюда: трём планам 992 / 0.956 = 1038,
   округлено вниз до 1024 (текст колонки 255 вместо 260, в пределах
   читаемого); четырём 1328 / 0.956 = 1389, округлено вверх до 1390.
   Один порог на все наборы означал бы четыре колонки с текстом 173 на 1024. */
@container ls (width >= 1024px) {
  .ls-pricing__wrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 24px; }
  .ls-pricing__wrow--3 .ls-pricing__wtop { grid-template-columns: minmax(0, 1fr); }
}

@container ls (width >= 1390px) {
  .ls-pricing__wrow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: 24px; }
  .ls-pricing__wrow--4 .ls-pricing__wtop { grid-template-columns: minmax(0, 1fr); }
}

/* УЗКАЯ БУМАГА СЕМЬИ C. Стоит ПОСЛЕ базового .ls-pricing__scols намеренно:
   специфичность у них равная, и стоя выше, оно не срабатывало бы вовсе.
   Список в одну колонку обязан быть ПРАВИЛОМ, а не следствием того, что два
   трека по 220 не влезли в узкую бумагу. */
@container ls (width <= 700px) {
  .ls-pricing__scols { columns: auto; }
}