/* ============================================================================
   Матч&мяч — композиция шапки лендинга

   Раньше в шапке висели три «стеклянные» карточки, нарисованные вёрсткой, —
   то есть посетитель видел не продукт, а его имитацию. Теперь центр
   композиции — реальный скриншот приложения на телефоне, а карточки
   работают на него: подсказывают, что внутри, и не спорят за внимание.

   Правило слоёв: телефон выше фона, но ниже карточек — карточки должны
   заходить на его края, иначе композиция распадается на два объекта.
   ========================================================================= */

/* Телефон намеренно выходит за правый край — но без этого он бы добавил
   странице горизонтальную прокрутку. Обрезаем по секции, а не по .hero-ui:
   так «вылет» за край остаётся, а полосы прокрутки нет. */
.hero{overflow:hidden}

.hero-ui{
  /* Телефон вертикальный, ему нужно больше высоты, чем было под карточки. */
  height:620px;
}

.hero-phone{
  position:absolute;
  right:36px;
  top:50%;
  transform:translateY(-50%);
  height:104%;
  width:auto;
  z-index:2;
  /* Тень «сажает» телефон на фон, иначе он висит наклейкой. */
  filter:drop-shadow(0 48px 70px rgba(0,0,0,.62));
  pointer-events:none;
  user-select:none;
}

/* Мяч летит над телефоном, перекрывая его верхний угол: за телефоном он
   попадал целиком в силуэт и просто не был виден. */
.hero-ball{
  right:-18px!important;
  left:auto!important;
  top:-18px!important;
  bottom:auto!important;
  width:150px!important;
  height:150px!important;
  z-index:3!important;
  /* mix-blend-mode:screen из v57 съедал тёмные пиксели прозрачного PNG. */
  mix-blend-mode:normal!important;
  filter:saturate(1.1) drop-shadow(0 18px 40px rgba(188,255,33,.28))!important;
}

/* Карточки прижимаются влево и заходят на телефон. */
.hero-ui .profile{
  left:0!important;
  top:26px!important;
  width:344px!important;
  z-index:3!important;
}
.hero-ui .match{
  right:auto!important;
  left:34px!important;
  top:auto!important;
  bottom:96px!important;
  width:290px!important;
  z-index:3!important;
}
/* Карточка турнира дублировала то, что и так видно на экране телефона. */
.hero-ui .tour{display:none!important}

@media(max-width:1240px){
  .hero-phone{right:-70px;height:98%}
  .hero-ui .profile{width:320px!important}
  .hero-ui .match{width:270px!important;bottom:80px!important}
}

@media(max-width:1050px){
  /* v57 масштабирует весь блок — телефону хватает, карточки ужимаем. */
  .hero-ui{height:560px}
  .hero-phone{right:-90px}
  .hero-ui .match{left:12px!important}
}

@media(max-width:780px){
  /* Раньше на телефоне шапка растягивалась почти на два экрана: сначала
     весь текст, и только потом, далеко за сгибом, — мокап и карточки.
     Человек видел лендинг без продукта. Ужимаем верх так, чтобы телефон
     попадал в первый экран сразу под кнопками. */
  .hero{padding:96px 0 34px!important;min-height:0!important}
  .hero-grid{gap:24px!important;min-height:0!important}
  .hero h1{font-size:clamp(38px,10.5vw,46px)!important;margin:14px 0 14px!important}
  .hero-copy .lead{font-size:14px!important;line-height:1.5!important}
  .actions{margin-top:20px!important;gap:9px!important}
  .proof{margin-top:20px!important}

  .hero-ui{
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* Отрицательный отступ подтягивает мокап под кнопки вплотную. */
    margin-top:-6px;
  }
  .hero-phone{
    position:relative;
    right:auto;top:auto;
    transform:none;
    height:auto;
    width:min(84%,320px);
    filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
  }
  .hero-ball{
    position:absolute!important;
    left:auto!important;
    right:4%!important;
    top:-10px!important;
    width:88px!important;
    height:88px!important;
    z-index:3!important;
  }
  /* Карточки прячем: на экране телефона и так виден настоящий интерфейс,
     а именно они уводили всю картинку за сгиб. */
  .hero-ui .profile,
  .hero-ui .match{display:none!important}
}

@media(max-width:520px){
  .hero{padding:88px 0 28px!important}
  .hero h1{font-size:clamp(34px,10vw,42px)!important}
  /* Кнопки в строку: две колонки экономят целый экран прокрутки. */
  .hero-copy .actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .hero-copy .actions .btn{width:100%!important;min-width:0!important;padding-left:8px!important;padding-right:8px!important;font-size:13px!important}
  .hero-phone{width:min(88%,290px)}
}

@media(prefers-reduced-motion:reduce){
  .hero-phone{transition:none!important}
}

/* ============================================================
   Пропорции картинок в карточках возможностей

   У <img> проставлены width/height — они нужны, чтобы браузер держал
   место и страница не прыгала при загрузке. Но атрибут height жёстко
   задаёт высоту и перебивает aspect-ratio из v57: карточки вытягивались
   в портрет, а снимок обрезался. height:auto возвращает управление
   пропорцией стилям.
   ============================================================ */
.feature img{height:auto!important}

/* ============================================================
   Композиция шапки: карточки по разные стороны телефона

   Обе карточки слева перекрывали первый экран мокапа и спорили с ним
   за внимание. Разводим их по углам и ужимаем — они подпись к продукту,
   а не второй продукт.
   ============================================================ */
.hero-ui .profile{
  width:300px!important;
  top:280px!important;
  left:-8px!important;
  padding:17px!important;
}
.hero-ui .profile .elo strong{font-size:34px!important}
.hero-ui .profile .spark{height:52px!important}
.hero-ui .profile .profile-top img{width:50px!important;height:50px!important}
.hero-ui .profile .profile-top h3{font-size:14.5px!important}

.hero-ui .match{
  left:auto!important;
  right:-14px!important;
  bottom:6px!important;
  width:252px!important;
  padding:15px!important;
  z-index:4!important;
}
.hero-ui .match h3{font-size:13.5px!important;margin:6px 0 13px!important}
.hero-ui .match .duel img,
.hero-ui .match .fake-avatar{width:38px!important;height:38px!important}

@media(max-width:1240px){
  .hero-ui .profile{width:280px!important}
  .hero-ui .match{width:236px!important;right:-24px!important}
}
@media(max-width:1050px){
  .hero-ui .match{right:-40px!important;bottom:0!important}
}

/* ============================================================
   Секция для клубов

   Была светло-серой плашкой с белой карточкой, внутри которой лежал
   фейковый «клуб» с фотографией и тремя миниатюрами кортов. На тёмном
   лендинге она читалась как чужеродная вставка, а показывала макет
   вместо продукта.

   Теперь это сознательный разрыв ритма: фирменный лайм во всю ширину.
   Клубы — другая аудитория, и смена фона честно об этом говорит.
   Единственный акцент секции — бегущая строка, всё остальное держим
   тихим, иначе лайм начнёт кричать.
   ============================================================ */
.club-section{
  background:var(--lime,#bcff21)!important;
  color:#0d120f!important;
  overflow:hidden;
  padding-top:0!important;
}
.club-section .kicker{color:rgba(13,18,15,.62)!important}
.club-section .lead{color:rgba(13,18,15,.72)!important}
.club-section .title{color:#0d120f!important}
.club-section .title span{color:#fff!important}

/* ---- Бегущая строка ---- */
.club-run{
  position:relative;
  margin-bottom:52px;
  padding:18px 0;
  border-bottom:1px solid rgba(13,18,15,.16);
  /* Лента шире экрана: обрезаем, чтобы не появилась прокрутка страницы. */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.club-run-track{
  display:flex;
  align-items:center;
  gap:26px;
  width:max-content;
  animation:club-run 34s linear infinite;
}
.club-run-track span{
  font-size:clamp(34px,5.2vw,68px);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  color:#0d120f;
}
.club-run-track i{
  font-style:normal;
  font-size:clamp(16px,2vw,26px);
  color:rgba(13,18,15,.4);
}
/* Дорожка содержит два одинаковых набора слов, поэтому сдвиг ровно
   на половину замыкает цикл без рывка. */
@keyframes club-run{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.club-section:hover .club-run-track{animation-play-state:paused}

/* ---- Содержимое ---- */
.club-section .club-shell{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
  gap:56px!important;
  align-items:start!important;
}
.club-section .club-copy .title{font-size:clamp(40px,4.4vw,62px)}
.club-section .btn-primary{
  background:#0d120f!important;
  color:var(--lime,#bcff21)!important;
  box-shadow:none!important;
}
.club-section .btn-primary:hover{background:#1b241c!important}
.club-section .club-secondary{
  background:transparent!important;
  border:1px solid rgba(13,18,15,.28)!important;
  color:#0d120f!important;
}
.club-section .club-secondary:hover{background:rgba(13,18,15,.06)!important}

.club-facts{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:1px;background:rgba(13,18,15,.16);border-radius:18px;overflow:hidden}
.club-facts li{
  padding:17px 19px;
  background:var(--lime,#bcff21);
}
.club-facts b{display:block;font-size:15.5px;color:#0d120f;letter-spacing:-.015em}
.club-facts small{display:block;margin-top:5px;font-size:12px;line-height:1.55;color:rgba(13,18,15,.66)}

@media(max-width:900px){
  .club-section .club-shell{grid-template-columns:1fr!important;gap:32px!important}
  .club-run{margin-bottom:34px}
}

@media(prefers-reduced-motion:reduce){
  /* Бесконечное движение — первое, что мешает при чувствительности к анимации. */
  .club-run-track{animation:none!important;transform:none!important}
  .club-run{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
}


/* ============================================================
   Правки по итогам просмотра
   ============================================================ */

/* Стеклянные карточки: прозрачнее, мягче размытие и мельче на 20%.
   Внимание: .glass используют и карточки шапки, и «offer» в блоке PRO —
   zoom подействует на все. */
.glass{
  background:linear-gradient(145deg,rgba(18,25,20,.74),rgba(9,13,11,.68))!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  zoom:.8;
}

/* Секция для клубов скрыта — вернуть можно снятием одной строки. */
.club-section{display:none!important}

/* ============================================================================
   РЕДИЗАЙН ЛЕНДИНГА
   ========================================================================= */

/* ---- Типографика ----
   Заголовки вернулись на Manrope: узкий Oswald по стилю подходил, но
   выглядел чужеродно — гарнитуру подберём отдельно.

   Что здесь ОСТАЁТСЯ и убирать нельзя: в v57 стек начинался с Inter,
   которого страница никогда не загружала. У кого он стоял в системе —
   видел Inter, у остальных подставлялась Manrope, то есть один лендинг
   рисовался двумя разными гарнитурами. Строка ниже это и чинит. */
.ace-marketing-body{
  font-family:Manrope,"Segoe UI",Arial,sans-serif!important;
}
/* Крупные числа — моноширинным, чтобы колонки не пляcали. */
.ace-marketing-body .elo strong,
.ace-marketing-body .score,
.ace-marketing-body .live-stats b{font-family:"IBM Plex Mono",monospace!important}

/* ---- Иконки вместо символов Unicode ----
   Были глифы ◎ ⌁ ♕ ▥ — в части системных шрифтов их просто нет,
   и на их месте появлялись пустые прямоугольники. */
.fi svg,.stats i svg,.live-stats i svg{width:20px;height:20px;display:block}
.fi{display:grid!important;place-items:center}
.stats i{display:grid;place-items:center}

/* ---- Живые цифры ----
   Заменили статичную строку возможностей: гостю важнее увидеть, что
   платформа живая, чем ещё раз прочитать список фич. */
.live-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin-top:44px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--line);
  overflow:hidden;
}
.live-stats>div{
  padding:20px 22px;
  background:#090c0a;
  text-align:left;
}
.live-stats b{
  display:block;
  font-size:clamp(28px,3.4vw,40px);
  line-height:1;
  color:var(--lime);
  font-weight:600;
  letter-spacing:-.03em;
}
.live-stats small{
  display:block;
  margin-top:7px;
  font-size:11.5px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.07em;
}
@media(max-width:780px){
  .live-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
  .live-stats>div{padding:16px 17px}
}

/* ---- Карточки возможностей ----
   Бенто-раскладку вернули к ровной сетке из четырёх колонок по просьбе:
   от неё остались только ховер и плавность. */
.feature{transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease!important}
.feature:hover{transform:translateY(-4px)!important}
.feature img{transition:filter .25s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.feature:hover img{filter:brightness(.95) saturate(1)!important;transform:scale(1.02)}

/* ---- Секция для профессионалов ----
   Четыре B2B-блока подряд рвали путь игрока: человек пришёл играть, а ему
   три экрана продавали CRM. Свели в одну секцию с тремя карточками. */
.pros-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.pros-card.is-wide{grid-column:span 2}
.pros-card{
  display:flex;
  flex-direction:column;
  padding:26px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,#101611,#0d120f);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease;
}
.pros-card:hover{transform:translateY(-4px);border-color:rgba(188,255,33,.3)}
.pros-tag{
  align-self:flex-start;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(188,255,33,.1);
  color:var(--lime);
  font:700 10px/1 Manrope,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pros-card h3{margin:16px 0 9px;font-size:26px;line-height:1}
.pros-card>p{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.6}
.pros-card ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:8px}
.pros-card li{
  position:relative;
  padding-left:19px;
  color:#8e998f;
  font-size:12.5px;
  line-height:1.5;
}
.pros-card li::before{
  content:"";
  position:absolute;
  left:0;top:7px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--lime);
  opacity:.55;
}
.pros-link{
  margin-top:auto;
  color:var(--lime);
  font-weight:700;
  font-size:13.5px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.pros-link span{transition:transform .18s ease}
.pros-link:hover span{transform:translateX(4px)}

@media(max-width:1050px){
  .pros-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pros-card.is-wide{grid-column:span 2}
}
@media(max-width:640px){
  .pros-grid{grid-template-columns:1fr}
  .pros-card.is-wide{grid-column:span 1}
  .pros-card{padding:22px}
}

/* ---- Движение ----
   Было 650 мс на всё подряд — страница ощущалась вязкой. Приводим к
   рекомендованной полосе 300-450 мс и добавляем лёгкий «доводчик». */
.reveal{
  transition:opacity .38s ease,transform .42s cubic-bezier(.2,.9,.28,1.08)!important;
  transform:translateY(14px);
}

@media(prefers-reduced-motion:reduce){
  .feature,.feature img,.pros-card,.pros-link span{transition:none!important}
  .feature:hover,.pros-card:hover{transform:none!important}
}

/* ============================================================
   Тарифы

   Классическая связка: карточки с ценой сверху, под ними построчное
   сравнение. Строки взяты из plan_entitlements, а не выдуманы, —
   иначе таблица разойдётся с тем, что реально открывает Entitlements.
   Тренеры и клубы разведены по вкладкам: одна таблица на двадцать
   строк нечитаема, а сравнивать нужно внутри своей роли.
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pricing-switch{
  display:inline-flex;
  gap:4px;
  margin:0 0 26px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#0d120f;
}
.pricing-switch button{
  min-height:38px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font:700 13px/1 Manrope,sans-serif;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.pricing-switch button:hover{color:#fff}
.pricing-switch button.is-on{background:var(--lime);color:#07100a}
.pricing-switch button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* Колонка карточки + колонка плашки под ней: строки задаются сеткой,
     поэтому карточки выравниваются по низу независимо от объёма текста. */
  grid-template-rows:1fr auto;
  gap:14px 16px;
  align-items:stretch;
  margin-bottom:22px;
}
.pricing-grid.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* В разметке карточка и её плашка идут подряд, поэтому ряд задаём явно:
   иначе авторазмещение кладёт плашку в соседнюю колонку, а карточки
   уезжают в столбик. */
.pricing-grid>.price-card{grid-row:1}
.pricing-grid>.price-plate{grid-row:2}

.price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px 26px 26px;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(180deg,#121814,#0d120f 62%);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease;
}
.price-card:hover{transform:translateY(-4px);border-color:var(--lineL,rgba(255,255,255,.16))}

/* Акцентная карточка: приподнята, светится изнутри и обведена лаймом —
   ровно тот приём, что в референсе, только в наших цветах. */
.price-card.is-accent{
  border-color:rgba(188,255,33,.4);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(188,255,33,.16),transparent 62%),
    linear-gradient(180deg,#151d13,#0d120f 66%);
  box-shadow:0 0 0 1px rgba(188,255,33,.12),0 30px 60px -34px rgba(188,255,33,.5);
  transform:translateY(-14px);
}
.price-card.is-accent:hover{transform:translateY(-19px)}

.price-badge{
  position:absolute;
  top:-13px;left:26px;
  padding:6px 13px;
  border-radius:999px;
  background:var(--lime);
  color:#07100a;
  font:800 10.5px/1 Manrope,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 8px 20px -8px rgba(188,255,33,.8);
}

.price-tag{
  align-self:flex-start;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font:700 10px/1 Manrope,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.price-card.is-accent .price-tag{background:rgba(188,255,33,.16);color:var(--lime)}
.price-card h3{margin:14px 0 12px;font-size:20px;line-height:1;color:#fff}

.price-value{
  font-family:"IBM Plex Mono",monospace;
  font-size:clamp(32px,3.6vw,44px);
  line-height:1;
  color:#fff;
  letter-spacing:-.04em;
}
.price-value.is-text{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.price-value span{font-size:15px;color:var(--muted);letter-spacing:0}
.price-note{display:block;margin-top:8px;color:var(--lime);font-size:11.5px;font-weight:700}
.price-card>p{margin:14px 0 18px;color:var(--muted);font-size:12.5px;line-height:1.6}

/* ---- Строки характеристик: подпись сверху, значение крупно снизу ---- */
.price-specs{list-style:none;margin:0 0 20px;padding:0}
.price-specs li{padding:13px 0;border-top:1px solid rgba(255,255,255,.07)}
.price-specs li:first-child{border-top:0;padding-top:0}
.spec-head{
  display:flex;
  align-items:center;
  gap:7px;
  color:#7f8a80;
  font-size:11px;
  letter-spacing:.02em;
}
.spec-head svg{width:14px;height:14px;flex:0 0 14px}
.price-specs b{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:14.5px;
  font-weight:700;
}
.price-specs b.is-muted{color:#6d776e;font-weight:600}
.price-specs .spec-state{display:flex;align-items:center;justify-content:space-between;gap:12px}
.price-specs .spec-state span{color:#c3ccc3;font-size:12.5px}
.state-pill{
  flex:0 0 auto;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:#6d776e;
  font:700 10px/1 Manrope,sans-serif;
  font-style:normal;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.state-pill.is-on{background:rgba(188,255,33,.16);color:var(--lime)}

.price-actions{margin-top:auto;display:grid;gap:8px}
.price-actions .btn{width:100%;justify-content:center}
.btn-quiet{
  background:rgba(255,255,255,.05);
  border:1px solid transparent;
  color:var(--muted);
}
.btn-quiet:hover{background:rgba(255,255,255,.09);color:#fff}

/* ---- Плашка под карточкой ---- */
.price-plate{
  padding:13px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:11.5px;
  font-weight:700;
  text-align:center;
  letter-spacing:.03em;
}
.price-plate.is-accent{
  background:rgba(188,255,33,.1);
  border-color:rgba(188,255,33,.24);
  color:var(--lime);
}

@media(max-width:900px){
  .pricing-grid,.pricing-grid.is-three{grid-template-columns:1fr;grid-template-rows:none}
  .pricing-grid>.price-card,.pricing-grid>.price-plate{grid-row:auto}
  .price-card,.price-card.is-accent{transform:none!important;padding:24px 22px}
  .price-card.is-accent{margin-top:14px}
}

/* ---- Таблица сравнения ---- */
.price-table-wrap{
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:#0d120f;
}
.price-table{width:100%;border-collapse:collapse;font-size:13.5px}
.price-table thead th{
  padding:14px 16px;
  width:118px;
  color:#fff;
  font:700 12px/1 Manrope,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.price-table thead td{border-bottom:1px solid var(--line)}
.price-table tbody th{
  padding:13px 16px;
  text-align:left;
  font-weight:600;
  color:#dfe6dd;
}
.price-table tbody th small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  line-height:1.4;
}
.price-table td{
  padding:13px 16px;
  text-align:center;
  color:var(--muted);
}
.price-table td b{color:#fff;font-weight:700;font-size:13px}
.price-table tbody tr+tr th,
.price-table tbody tr+tr td{border-top:1px solid rgba(255,255,255,.05)}
.price-table tbody tr:hover th,
.price-table tbody tr:hover td{background:rgba(255,255,255,.022)}
/* Галочка и прочерк — не только цветом: цвет один не должен нести смысл. */
.price-table .is-yes span{color:var(--lime);font-size:16px;font-weight:800}
.price-table .is-no span{color:#525c53;font-size:16px}
/* Колонка PRO подсвечена по всей высоте — взгляд идёт по ней сверху вниз. */
.price-table tr>*:last-child{background:rgba(188,255,33,.045)}

.price-private-note{
  margin:16px 0 0;
  padding:15px 18px;
  border:1px dashed rgba(188,255,33,.28);
  border-radius:16px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
}

@media(max-width:900px){
  /* Таблица уезжает в горизонтальную прокрутку внутри своей рамки,
     а не растягивает страницу. Раскладка карточек задана выше. */
  .price-table-wrap{overflow-x:auto}
  .price-table{min-width:520px}
}