/* ==========================================================================
   PROFITNESS · раскладка сайта
   Подключается ПОСЛЕ tokens.css и components.css.
   Здесь только раскладка. Ни одного собственного цвета, размера шрифта,
   отступа или радиуса — всё через токены брендбука. За этим следит
   tools/lint-styles.mjs: литеральное значение останавливает сборку.
   Префикс ps- (profitness site), чтобы не пересекаться с pf- из брендбука.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* Якорь не должен уезжать под закреплённую шапку. */
:target,
.ps-section {
  scroll-margin-top: var(--pf-space-9);
}

.ps-skip {
  position: absolute;
  left: var(--pf-space-4);
  top: var(--pf-space-4);
  z-index: 3;
  transform: translateY(-200%);
}

.ps-skip:focus-visible {
  transform: translateY(0);
}

/* --- шапка ---------------------------------------------------------------- */

.ps-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pf-bg);
  border-bottom: 1px solid var(--pf-border);
}

.ps-header__inner {
  display: flex;
  align-items: center;
  gap: var(--pf-space-4);
  padding-block: var(--pf-space-3);
}

.ps-logo {
  display: block;
  flex: none;
  width: var(--pf-space-10);
}

.ps-nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ps-nav::-webkit-scrollbar {
  display: none;
}

.ps-nav ul {
  display: flex;
  gap: var(--pf-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.ps-nav a {
  font-family: var(--pf-font-display);
  font-size: var(--pf-caption-size);
  font-weight: var(--pf-caption-weight);
  letter-spacing: var(--pf-caption-ls);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pf-text-muted);
}

.ps-nav a:hover {
  color: var(--pf-accent);
}

.ps-header .pf-btn {
  flex: none;
}

.ps-header__cta-text {
  display: none;
}

@media (min-width: 720px) {
  .ps-header__cta-text {
    display: inline;
  }
}

/* --- общие блоки ---------------------------------------------------------- */

.ps-section {
  padding-block: var(--pf-space-9);
}

.ps-section--tight {
  padding-block: var(--pf-space-8);
}

.ps-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-3);
  margin-bottom: var(--pf-space-7);
  max-width: var(--pf-measure);
}

.ps-grid {
  display: grid;
  gap: var(--pf-space-5);
}

@media (min-width: 720px) {
  .ps-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ps-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- о студии ------------------------------------------------------------- */

/* Начало страницы — единственная секция, где шапка занимает полосу набора
   целиком. У остальных .ps-section__head остаётся узкой колонкой: там за
   заголовком сразу идёт содержимое, и свободная половина работает полем.
   Здесь поля нет — под шапкой сетка условий и галерея во всю ширину, и узкая
   шапка над ними читается как обрезанная. Прежде эту половину занимала
   фотография; её убрали при слиянии первого экрана с «О студии», а
   ограничение ширины осталось.
   Порог 1024 px, а не 720 px: при 720 px колонка вышла бы около 340 px, и
   крупный --pf-display-size рассыпался бы на строки по два слова. */
@media (min-width: 1024px) {
  .ps-about__head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--pf-space-6);
    max-width: none;
  }

  /* Надзаголовок подписывает блок целиком, а не левую колонку. */
  .ps-about__eyebrow {
    grid-column: 1 / -1;
  }
}

/* Два вводных абзаца — одна ячейка сетки: порознь абзац про обещание уехал бы
   в третью ячейку, под заголовок. Ограничение длины строки живёт здесь, а не
   на шапке: половина полосы набора и так уже 64ch, это страховка на случай
   более широкого контейнера. */
.ps-about__intro {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-3);
  max-width: var(--pf-measure);
}

/* Второй вводный абзац — про позицию студии: что она обещает вместо результата.
   Он не продолжение первого и не второй лид, поэтому набирается мельче, чтобы
   два абзаца подряд не читались как два вступления. Ширину строки ограничивает
   .ps-section__head. */
.ps-about__proof {
  color: var(--pf-text-muted);
}

/* Условия перечисляются без рамок: коробка вокруг каждого превращает перечень
   в сетку возможностей — приём большого клуба, от которого брендбук
   отстраивается. Держат их наборные заголовки и воздух, поэтому между рядами
   его заметно больше, чем между колонками: только этот отступ и отделяет одну
   пару условий от другой. */
.ps-about__facilities {
  margin-top: var(--pf-space-7);
  row-gap: var(--pf-space-8);
}

.ps-about__facility {
  margin: var(--pf-space-2) 0 0;
  font-size: var(--pf-small-size);
  color: var(--pf-text-muted);
}

/* галерея о студии */

.ps-gallery {
  display: grid;
  gap: var(--pf-space-4);
  margin-top: var(--pf-space-7);
}

/* Число кадров задают данные: auto-fit создаёт столько колонок, сколько кадров,
   и не оставляет пустых. Жёсткая тройка ломалась бы на четвёртом кадре — он
   уезжал бы во второй ряд один. Ниже 720 px кадры идут колонкой: две узкие
   картинки на телефоне читаются хуже одной широкой. */
@media (min-width: 720px) {
  .ps-gallery {
    grid-template-columns: repeat(auto-fit, minmax(var(--pf-space-10), 1fr));
  }
}

.ps-gallery figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--pf-surface-sunken);
}

.ps-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- направления ---------------------------------------------------------- */

.ps-family {
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  padding: var(--pf-space-5);
}

.ps-family__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pf-space-3);
  margin-bottom: var(--pf-space-4);
}

.ps-class {
  border-top: 1px solid var(--pf-border);
}

.ps-class:first-of-type {
  border-top: none;
}

.ps-class > summary {
  /* Три колонки: значок · название с длительностью · нагрузка.
     minmax(0, 1fr) у середины обязателен — иначе длинное название
     распирает строку и выдавливает бейдж за край карточки. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pf-space-3);
  padding-block: var(--pf-space-3);
  cursor: pointer;
  list-style: none;
}

.ps-class > summary::-webkit-details-marker {
  display: none;
}

.ps-class > summary:focus-visible {
  outline: 2px solid var(--pf-focus);
  outline-offset: var(--pf-space-1);
}

.ps-class > summary .pf-badge {
  justify-self: end;
  white-space: nowrap;
}

.ps-class__chevron {
  width: var(--pf-space-2);
  height: var(--pf-space-3);
  color: var(--pf-accent);
  transition: transform 120ms ease;
}

.ps-class[open] > summary .ps-class__chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .ps-class__chevron {
    transition: none;
  }
}

/* min-width у элемента сетки по умолчанию auto: без обнуления длинное название
   переполняет колонку, несмотря на minmax(0, 1fr) у самой колонки. */
.ps-class__main {
  min-width: 0;
}

.ps-class__name {
  font-family: var(--pf-font-display);
  font-weight: var(--pf-h3-weight);
  letter-spacing: var(--pf-h3-ls);
  text-transform: uppercase;
}

.ps-class__dur {
  font-size: var(--pf-small-size);
  color: var(--pf-text-subtle);
  white-space: nowrap;
}

/* Признак отдельной оплаты в заголовке занятия. Цвет только усиливает: смысл
   несёт текст, поэтому при отключённых цветах признак остаётся читаемым.
   Неразрывность — своя у каждого уточнения: длительность и признак переносятся
   целиком, а не рвутся посередине. */
.ps-class__pay {
  font-size: var(--pf-small-size);
  color: var(--pf-accent);
  white-space: nowrap;
}

.ps-class__body {
  padding-bottom: var(--pf-space-5);
  max-width: var(--pf-measure);
}

.ps-class__body p {
  margin: 0 0 var(--pf-space-3);
  font-size: var(--pf-small-size);
  color: var(--pf-text-muted);
}

.ps-class__body b {
  color: var(--pf-text);
}

.ps-class__note {
  font-size: var(--pf-small-size);
  color: var(--pf-accent);
}

.ps-term {
  font-family: var(--pf-font-display);
  text-transform: uppercase;
  letter-spacing: var(--pf-h3-ls);
}

/* --- тренеры -------------------------------------------------------------- */

.ps-trainer__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pf-surface-sunken);
  margin-bottom: var(--pf-space-4);
}

.ps-trainer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ps-trainer ul {
  margin: var(--pf-space-3) 0 0;
  padding-left: var(--pf-space-5);
  font-size: var(--pf-small-size);
  color: var(--pf-text-muted);
}

.ps-trainer li + li {
  margin-top: var(--pf-space-2);
}

/* --- заглушка будущей секции ---------------------------------------------- */

.ps-pending {
  border: 1px dashed var(--pf-border-strong);
  padding: var(--pf-space-6);
  color: var(--pf-text-subtle);
}

/* правила посещения */

/* Раскрыватель повторяет приём карточки занятия: шеврон, снятый штатный
   треугольник, поворот при раскрытии. Посетитель, уже открывавший занятие,
   узнаёт способ. Отличие одно — раскрыватель здесь единственный и потому
   набирается заметнее строки в перечне занятий. */
.ps-rules {
  margin-top: var(--pf-space-7);
  border-top: 1px solid var(--pf-border);
  border-bottom: 1px solid var(--pf-border);
}

.ps-rules__toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--pf-space-3);
  padding-block: var(--pf-space-4);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.ps-rules__toggle::-webkit-details-marker {
  display: none;
}

.ps-rules__toggle:focus-visible {
  outline: 2px solid var(--pf-focus);
  outline-offset: var(--pf-space-1);
}

.ps-rules[open] .ps-class__chevron {
  transform: rotate(90deg);
}

/* Нумерация своя, из данных: пункты идут через value, а не через счётчик
   браузера. Номер правила — часть документа студии, по нему на правило
   ссылаются, и он не должен зависеть от порядка вывода. */
.ps-rules__list {
  margin: 0;
  padding: 0 0 var(--pf-space-6) var(--pf-space-6);
  display: grid;
  gap: var(--pf-space-3);
  max-width: var(--pf-measure);
  color: var(--pf-text-muted);
  font-size: var(--pf-small-size);
  line-height: 1.55;
}

.ps-rules__list li::marker {
  color: var(--pf-accent);
  font-weight: 700;
}

/* Договор наследует оформление раскрывателя правил — он второй документ той же
   природы, и разный вид у двух соседних крышек читался бы как разная важность.
   Верхняя граница снимается: две подряд дали бы двойную линию между ними. */
.ps-doc {
  margin-top: 0;
  border-top: none;
}

.ps-doc__body {
  padding-bottom: var(--pf-space-6);
  max-width: var(--pf-measure);
  color: var(--pf-text-muted);
  font-size: var(--pf-small-size);
  line-height: 1.55;
}

/* Название документа набирается заметнее пунктов, но тише заголовка секции:
   секция названа правилами, договор внутри неё — вложенный документ. */
.ps-doc__lead {
  margin: 0 0 var(--pf-space-4);
  font-weight: 700;
  color: var(--pf-text);
}

.ps-doc__body > p {
  margin: 0 0 var(--pf-space-3);
}

.ps-doc__part {
  margin-top: var(--pf-space-5);
}

.ps-doc__title {
  margin: 0 0 var(--pf-space-3);
  font-size: var(--pf-small-size);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pf-text);
}

/* Номер пункта не отрывается от своего текста при переносе: по номеру на пункт
   договора ссылаются, и номер, повисший на предыдущей строке, теряет смысл. */
.ps-doc__item {
  margin: 0 0 var(--pf-space-3);
}

.ps-doc__num {
  color: var(--pf-accent);
  white-space: nowrap;
}

.ps-doc__details {
  border-top: 1px solid var(--pf-border);
  padding-top: var(--pf-space-4);
}

/* --- подвал --------------------------------------------------------------- */

/* Подвал — блок контактов, к нему ведёт пункт навигации. Отступ прокрутки
   тот же, что у секций: иначе закреплённая шапка перекроет его верх. */
.ps-footer {
  background: var(--pf-surface-sunken);
  border-top: 1px solid var(--pf-border);
  padding-block: var(--pf-space-8);
  scroll-margin-top: var(--pf-space-9);
}

.ps-footer__inner {
  display: grid;
  gap: var(--pf-space-6);
}

@media (min-width: 720px) {
  .ps-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ps-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-footer li + li {
  margin-top: var(--pf-space-2);
}

.ps-footer p + p,
.ps-footer p + ul {
  margin-top: var(--pf-space-2);
}

/* Ссылка со значком: значок и подпись остаются на одной строке, при переносе
   подпись не подтекает под значок. */
.ps-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-2);
}

/* Размер значка — от кегля соседней подписи, а не собственным числом:
   подходящего токена для размера значка в брендбуке нет. */
.ps-ico {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.ps-footer__tel {
  white-space: nowrap;
}

.ps-footer__legal {
  margin-top: var(--pf-space-6);
  padding-top: var(--pf-space-5);
  border-top: 1px solid var(--pf-border);
  font-size: var(--pf-small-size);
  color: var(--pf-text-subtle);
}

/* --- мелочи --------------------------------------------------------------- */

.ps-muted {
  color: var(--pf-text-subtle);
}

.ps-gap-top {
  margin-top: var(--pf-space-7);
}

.ps-class__lead-by {
  font-size: var(--pf-small-size);
  color: var(--pf-text-subtle);
}

/* --- расписание ----------------------------------------------------------- */

.ps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-3);
  list-style: none;
  margin: 0 0 var(--pf-space-5);
  padding: 0;
}

/* Две формы одних данных: широкая таблица и список по дням.
   Переключает CSS — скрытая форма выпадает и из дерева доступности,
   поэтому содержимое не читается дважды. */
.ps-sched__wide {
  display: none;
}

@media (min-width: 1024px) {
  .ps-sched__wide {
    display: block;
  }

  .ps-sched__narrow {
    display: none;
  }
}

.ps-sched {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--pf-space-1);
  table-layout: fixed;
}

.ps-sched caption {
  text-align: left;
  color: var(--pf-text-subtle);
  padding-bottom: var(--pf-space-3);
}

.ps-sched thead th {
  font-family: var(--pf-font-display);
  font-size: var(--pf-caption-size);
  font-weight: var(--pf-caption-weight);
  letter-spacing: var(--pf-caption-ls);
  text-transform: uppercase;
  color: var(--pf-accent);
  padding-bottom: var(--pf-space-2);
}

.ps-sched tbody th {
  font-family: var(--pf-font-display);
  font-size: var(--pf-small-size);
  font-weight: var(--pf-h3-weight);
  color: var(--pf-text-muted);
  text-align: right;
  padding-right: var(--pf-space-3);
  white-space: nowrap;
  vertical-align: middle;
}

.ps-sched td {
  vertical-align: top;
}

.ps-sched .pf-cell {
  justify-content: center;
}

.ps-day + .ps-day {
  margin-top: var(--pf-space-6);
}

.ps-day h3 {
  color: var(--pf-accent);
  margin-bottom: var(--pf-space-3);
}

.ps-day ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pf-space-2);
}

.ps-day li {
  display: grid;
  grid-template-columns: var(--pf-space-8) minmax(0, 1fr);
  align-items: center;
  gap: var(--pf-space-3);
}

.ps-day__time {
  font-family: var(--pf-font-display);
  font-size: var(--pf-small-size);
  color: var(--pf-text-muted);
  font-variant-numeric: tabular-nums;
}

.ps-day__empty {
  color: var(--pf-text-subtle);
  font-size: var(--pf-small-size);
}

/* Отметка сегодняшнего дня. Ставится скриптом; без него просто не появляется. */
.ps-today {
  color: var(--pf-accent);
}

.ps-sched thead th.ps-today {
  border-bottom: 2px solid var(--pf-accent);
}

.ps-day.ps-today h3::after {
  content: ' · сегодня';
  font-size: var(--pf-caption-size);
  letter-spacing: var(--pf-caption-ls);
}

.ps-sched__notes {
  margin-top: var(--pf-space-6);
  color: var(--pf-text-subtle);
}

.ps-sched__notes p {
  margin: 0 0 var(--pf-space-2);
}

/* --- прайс ------------------------------------------------------------------
   Раскладка повторяет утверждённый шаблон студии; оформление переведено
   на токены брендбука. Собственных цветов и размеров здесь нет. */

.ps-pr__valid {
  color: var(--pf-accent);
}

.ps-pr__block + .ps-pr__block {
  margin-top: var(--pf-space-8);
}

.ps-pr__head {
  display: flex;
  align-items: center;
  gap: var(--pf-space-4);
  margin-bottom: var(--pf-space-4);
}

.ps-pr__rule {
  flex: 1;
  height: 2px;
  background: var(--pf-border);
}

/* Разовые и персональные — две колонки с отточием между названием и ценой. */
.ps-pr__cols {
  display: grid;
  gap: var(--pf-space-4) var(--pf-space-8);
}

@media (min-width: 720px) {
  .ps-pr__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ps-pr__cols > div + div {
  margin-top: var(--pf-space-6);
}

@media (min-width: 720px) {
  .ps-pr__cols > div + div {
    margin-top: 0;
  }
}

.ps-pr__line {
  display: flex;
  align-items: baseline;
  gap: var(--pf-space-3);
  padding-block: var(--pf-space-3);
  border-bottom: 1px solid var(--pf-border);
}

.ps-pr__line:last-child {
  border-bottom: none;
}

.ps-pr__nm small {
  display: block;
  font-size: var(--pf-small-size);
  color: var(--pf-text-subtle);
}

.ps-pr__dots {
  flex: 1;
  min-width: var(--pf-space-4);
  border-bottom: 2px dotted var(--pf-border-strong);
  transform: translateY(-4px);
}

.ps-pr__val,
.ps-pr__v {
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ps-pr__cur {
  font-family: var(--pf-font-text);
  font-size: var(--pf-small-size);
  font-style: normal;
  font-weight: 600;
  color: var(--pf-text-subtle);
  margin-left: var(--pf-space-1);
}

/* --- таблица абонементов --- */

.ps-pr__tablewrap {
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
}

.ps-pr__table {
  width: 100%;
  border-collapse: collapse;
}

.ps-pr__table th,
.ps-pr__table td {
  text-align: left;
  padding: var(--pf-space-3) var(--pf-space-4);
  border-bottom: 1px solid var(--pf-border);
  vertical-align: middle;
}

.ps-pr__table thead th {
  font-family: var(--pf-font-display);
  font-size: var(--pf-caption-size);
  font-weight: var(--pf-caption-weight);
  letter-spacing: var(--pf-caption-ls);
  text-transform: uppercase;
  color: var(--pf-text-subtle);
}

.ps-pr__table tbody tr:last-child td {
  border-bottom: none;
}

.ps-pr__pkg {
  font-family: var(--pf-font-display);
  font-size: var(--pf-h3-size);
  font-weight: var(--pf-h3-weight);
}

.ps-pr__pkg small {
  font-size: var(--pf-small-size);
  font-weight: 400;
  color: var(--pf-text-muted);
}

.ps-pr__per {
  display: block;
  font-family: var(--pf-font-text);
  font-size: var(--pf-caption-size);
  font-weight: 500;
  color: var(--pf-text-subtle);
  letter-spacing: 0;
  text-transform: none;
}

.ps-pr__v em {
  font-family: var(--pf-font-text);
  font-size: var(--pf-small-size);
  font-style: normal;
  color: var(--pf-text-subtle);
  margin-left: var(--pf-space-1);
}

.ps-pr__pct {
  display: inline-block;
  margin-left: var(--pf-space-2);
  padding: var(--pf-space-1) var(--pf-space-2);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-accent);
  color: var(--pf-on-accent);
  font-family: var(--pf-font-text);
  font-size: var(--pf-caption-size);
  font-weight: 800;
  vertical-align: 2px;
}

.ps-pr__note {
  margin: var(--pf-space-4) 0 0;
  font-size: var(--pf-small-size);
  color: var(--pf-text-muted);
  max-width: var(--pf-measure);
}

/* --- заморозка и продление срока --- */

/* Две услуги внутри одной плашки: связь между ними смысловая — это два ответа
   на один вопрос. Отдельными плашками они читались бы как несвязанные блоки. */
.ps-pr__freeze {
  margin-top: var(--pf-space-6);
  background: var(--pf-accent);
  color: var(--pf-on-accent);
  display: grid;
  align-items: stretch;
}

@media (min-width: 720px) {
  .ps-pr__freeze {
    grid-template-columns: 1.35fr minmax(0, 1fr);
  }
}

.ps-pr__half {
  padding: var(--pf-space-5) var(--pf-space-6);
}

.ps-pr__half + .ps-pr__half {
  border-top: 1px solid currentColor;
}

@media (min-width: 720px) {
  .ps-pr__half + .ps-pr__half {
    border-top: none;
    border-left: 1px solid currentColor;
  }
}

.ps-pr__freeze p {
  margin: var(--pf-space-2) 0 0;
}

.ps-pr__lbl {
  margin: 0 0 var(--pf-space-1);
}

/* .pf-caption из брендбука приглушает цвет до --pf-text-subtle. На акцентной
   плашке этот сливовый почти сливается с фоном, поэтому надзаголовок внутри
   неё наследует цвет плашки. В блоке правил фон светлый — там приглушение
   уместно и остаётся. */
.ps-pr__freeze .ps-pr__lbl {
  color: inherit;
}

.ps-pr__price {
  display: flex;
  align-items: baseline;
  gap: var(--pf-space-2);
}

.ps-pr__price b {
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: var(--pf-h1-size);
  line-height: var(--pf-h1-lh);
}

/* Единица и приписка отличаются от суммы размером, а не приглушением: на
   акцентном фоне любая прозрачность съедает контраст. */
.ps-pr__price i,
.ps-pr__price em {
  font-style: normal;
  font-size: var(--pf-small-size);
}

/* --- акции и правила --- */

.ps-pr__promos {
  display: grid;
  gap: var(--pf-space-4);
}

@media (min-width: 720px) {
  .ps-pr__promos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ps-pr__promo {
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  padding: var(--pf-space-5);
}

.ps-pr__promo p {
  margin: var(--pf-space-2) 0 0;
  color: var(--pf-text-muted);
  font-size: var(--pf-small-size);
}

.ps-pr__promo b {
  color: var(--pf-text);
}

.ps-pr__cond {
  color: var(--pf-text-subtle);
}

.ps-pr__rules {
  margin-top: var(--pf-space-6);
  border-left: 3px solid var(--pf-accent);
  background: var(--pf-accent-subtle);
  padding: var(--pf-space-5);
}

.ps-pr__rules ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pf-space-3);
  font-size: var(--pf-small-size);
  color: var(--pf-text-muted);
  max-width: var(--pf-measure);
}

/* Таблица на телефоне — карточками: подпись колонки приходит из data-l. */
@media (max-width: 719px) {
  .ps-pr__tablewrap {
    border: none;
    background: transparent;
  }

  .ps-pr__table,
  .ps-pr__table tbody,
  .ps-pr__table tr,
  .ps-pr__table td {
    display: block;
    width: 100%;
  }

  .ps-pr__table thead {
    display: none;
  }

  .ps-pr__table tbody tr {
    border: 1px solid var(--pf-border);
    background: var(--pf-surface);
    padding: var(--pf-space-4);
    margin-bottom: var(--pf-space-3);
  }

  .ps-pr__table tbody td {
    border: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--pf-space-3);
  }

  .ps-pr__table tbody td + td {
    margin-top: var(--pf-space-2);
    padding-top: var(--pf-space-2);
    border-top: 1px solid var(--pf-border);
  }

  .ps-pr__table tbody td::before {
    content: attr(data-l);
    font-size: var(--pf-caption-size);
    font-weight: var(--pf-caption-weight);
    letter-spacing: var(--pf-caption-ls);
    text-transform: uppercase;
    color: var(--pf-text-subtle);
  }

  .ps-pr__table tbody td:first-child::before {
    content: none;
  }
}