/* XM-258. Лендинги «Поддержка» и «Продажи».
   Подключается ПОСЛЕ /styles.css; токены (--surf, --border, --txt, --body, --mut,
   --blue ...) берутся из :root в styles.css. Ничего из styles.css не меняется. */


/* ============================================================
   1. Тарифы: ровная сетка карточек
   ------------------------------------------------------------
   Причина «кривизны» (замерено Playwright): при 5 колонках (>=1181px)
   контент карточки всего 176px. Цены «17 900 ₽» и «26 900 ₽» вместе с «/ мес»
   (189px при 36px) и лимит «до 20 000 диалогов / мес» (175.7px при 14px)
   переносились на вторую строку. Высоты блоков цена/лимит у карточек
   становились разными, и разделители списков стояли на трёх уровнях.
   На 3 и 2 колонках последние карточки висели слева с пустой ячейкой.
   ============================================================ */

/* цена и лимит всегда в одну строку, у цены есть запасной шрифт */
#pricing .plans-5 .plan-name,
#pricing .plans-5 .plan-price{font-family:"Geist",-apple-system,"Segoe UI",Roboto,sans-serif}
#pricing .plans-5 .plan-price,
#pricing .plans-5 .plan-limit{white-space:nowrap}

/* 5 колонок: ширина карточки постоянна (контейнер 1180px), подгоняем кегль */
@media (min-width:1181px){
  #pricing .plans-5 .plan-price{font-size:30px}
  #pricing .plans-5 .plan-limit{font-size:13px}
}

/* неполная последняя строка центрируем, а не прижимаем влево */
@media (min-width:981px) and (max-width:1180px){
  #pricing .plans-5{grid-template-columns:repeat(6,1fr)}
  #pricing .plans-5 .plan{grid-column:span 2}
  #pricing .plans-5 .plan:nth-child(4){grid-column:2 / span 2}
  #pricing .plans-5 .plan:nth-child(5){grid-column:4 / span 2}
}
@media (min-width:561px) and (max-width:980px){
  #pricing .plans-5{grid-template-columns:repeat(4,1fr)}
  #pricing .plans-5 .plan{grid-column:span 2}
  #pricing .plans-5 .plan:nth-child(5){grid-column:2 / span 2}
}

/* строки внутри карточек (название, цена, лимит, список, кнопка) делят одни
   треки сетки, поэтому горизонтали совпадают у всех карточек в ряду */
@supports (grid-template-rows:subgrid){
  #pricing .plans-5 .plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:16px}
}


/* ============================================================
   2. Клиенты xMessenger
   ============================================================ */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.section.band > .clients{margin-top:48px}

.client{padding:20px 20px 28px;gap:14px}
.client .client-name{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.client-name b{font-family:"Geist",-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.client-name span{font-size:14px;color:var(--mut)}
.client h3{text-wrap:balance}
.client p{text-wrap:pretty}

/* Логотипы клиентов рассчитаны на светлый фон, поэтому лежат на светлой плашке.
   Цвета логотипов не трогаем. Высота у всех одинаковая. */
.client-logo{position:relative;display:flex;align-items:center;justify-content:center;height:92px;padding:0 28px;
  border-radius:10px;background:#E9EDF3;transition:background .2s}
.client-logo:hover{background:#F4F6FA}
.client-logo:focus-visible{border-radius:10px}
.client-logo img{display:block;height:44px;width:auto;max-width:100%;object-fit:contain}
.client-ext{position:absolute;top:10px;right:10px;width:14px;height:14px;fill:none;stroke:#6B7689;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.client-logo:hover .client-ext,.client-logo:focus-visible .client-ext{stroke:var(--blue)}

/* заголовок и текст карточки совпадают по высоте через общие строки */
@supports (grid-template-rows:subgrid){
  .clients .client{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px}
  .clients .client .client-name{margin-top:6px}
}

/* узкий экран: одна колонка, карточка по горизонтали (плашка слева) */
@media (max-width:980px){
  .clients{grid-template-columns:1fr}
  .clients .client{display:grid;grid-row:auto;grid-template-rows:none;grid-template-columns:200px 1fr;
    grid-template-areas:"logo name" "logo head" "logo text";
    column-gap:28px;row-gap:8px;align-content:start;padding:20px}
  .clients .client .client-logo{grid-area:logo;align-self:start}
  .clients .client .client-name{grid-area:name;margin-top:0}
  .clients .client h3{grid-area:head;margin-top:6px}
  .clients .client p{grid-area:text}
}
@media (max-width:640px){
  .clients .client{display:flex;flex-direction:column;gap:14px;padding:20px}
  .clients .client .client-logo{height:84px}
  .clients .client .client-name{margin-top:4px}
  .clients .client h3{margin-top:0}
}


/* ============================================================
   3. Кому подходит?
   ============================================================ */
.aud{list-style:none;max-width:840px;margin:0 auto;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.02)}
.aud-row{display:grid;grid-template-columns:minmax(0,250px) 1fr;column-gap:32px;row-gap:6px;
  align-items:baseline;padding:24px 28px}
.aud-row + .aud-row{border-top:1px solid rgba(255,255,255,.06)}
.aud-row h3{font-size:20px;line-height:1.3;text-wrap:balance}
.aud-row p{color:var(--body);font-size:15px;line-height:1.6;text-wrap:pretty}
@media (max-width:640px){
  .aud-row{grid-template-columns:1fr;padding:20px}
}