/* Цветной заголовок над белой таблицей: стоимость указана без моделей ИИ и
   вычислительных ресурсов. Он стоит выше всех цен, чтобы это было понятно до
   чтения состава тарифов, а не только в условиях поставки внизу страницы. */
.company-resources-header { display: grid; gap: 7px; margin-bottom: 14px; padding: 22px 26px; border-radius: 18px; background: linear-gradient(112deg,#0f2f5c,#1d4f9c 45%,#4b3f9e); box-shadow: 0 16px 40px #0a1b3352; }
.company-resources-header .company-resources-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fd4ee; }
.company-resources-header p { font-size: 16px; font-weight: 650; line-height: 1.45; color: #f2f6ff; }
.company-comparison-wrap { width: 100%; margin-bottom: 0; border-radius: 24px; overflow-x: auto; background: #fff; -webkit-overflow-scrolling: touch; scrollbar-color: #526789 #e2e7ef; }
.company-comparison-wrap:focus-visible { outline: 3px solid #89a7ff; outline-offset: 4px; }
.company-comparison { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; font-size: 15px; line-height: 1.6; color: #1d1d1f; background: #fff; }
.company-comparison th,.company-comparison td { padding: 24px 20px; vertical-align: top; border-bottom: 1px solid #dedee3; overflow-wrap: anywhere; }
.company-comparison thead th { width: 25%; border-bottom: 2px solid #d6d6dc; }
.company-comparison thead th:first-child { width: 25%; vertical-align: bottom; font-size: 14px; font-weight: 600; color: #34343b; }
.company-comparison tr>th:first-child { position: sticky; left: 0; z-index: 1; background: #f0f2f6; border-right: 1px solid #d6dae3; }
/* Карточки тарифов выравниваются по верху: бренд, название и подпись начинаются
   на одной линии. Подписи занимают разное число строк, поэтому под них
   зарезервирована одинаковая высота, а кнопка прижата к низу колонки. */
.company-comparison thead th { vertical-align: top; }
.company-comparison .company-license-price { display: flex; flex-direction: column; gap: 14px; height: 100%; }
/* Кнопка прижата к низу колонки: карточки разной высоты, а кнопки трёх тарифов
   должны стоять на одной линии. Цена при этом идёт сверху, поэтому крупные
   цифры тоже начинаются на одной высоте. */
.company-comparison .company-license-price>.button { margin-top: auto; }
.company-comparison .company-license-price>.price-stack { display: flex; flex-direction: column; gap: 18px; }
/* У бесплатного тарифа младших цен нет, но место под них всё равно
   резервируется: иначе кнопка «Личного» поднималась бы выше кнопок платных
   тарифов и три кнопки стояли бы не на одной линии. Высота рассчитана на
   главную цену с подписью и три строки категорий с разделителем. */
.company-comparison .company-license-price>.price-stack { min-height: 216px; }
.company-comparison .company-license-price>.price { display: flex; flex-direction: column; justify-content: flex-start; }
.company-comparison .company-license-price>.price>span { margin-top: 12px; }
/* Мелкая метка бренда над названием: «Личный», «Старт» и «Организации» читаются
   крупно как самостоятельные уровни, а слово «Дипнео» не повторяется трижды. */
.company-comparison .plan-brand { display: block; margin-bottom: -6px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #8a90a0; }
.company-comparison h3 { margin: 0; min-height: 2.5em; font-size: 30px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; color: #1d1d1f; overflow-wrap: normal; }
/* Три строки подписи: самая длинная подпись «Организации» переносится на две
   строки в широких колонках и на три в узких, поэтому высота зарезервирована
   заранее. Иначе соседние карточки съезжают по вертикали. */
.company-comparison thead small { display: block; min-height: 4.5em; font-size: 14px; line-height: 1.5; font-weight: 400; color: #50505b; }
.company-comparison .price { margin: 0; font-size: clamp(38px,3.4vw,48px); line-height: 1.05; font-weight: 750; letter-spacing: -.05em; white-space: nowrap; color: #1d1d1f; }
.company-comparison .price>span { display: block; margin-top: 12px; font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; white-space: normal; color: #50505b; }
/* Младшие категории объёма: строки 13 px за тонким разделителем. Метка объёма
   серая, цена выровнена по правому краю и набрана спокойнее главной цифры, поэтому
   младшие цены читаются как уточнение. Сравнивать по вертикали проще, чем через тире. */
.company-comparison .price-rows { display: grid; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e6e8ee; }
.company-comparison .price-rows>div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.company-comparison .price-rows dt { font-size: 13px; line-height: 1.4; font-weight: 400; color: #8a90a0; white-space: nowrap; }
.company-comparison .price-rows dd { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: #5a5a64; white-space: nowrap; }
/* Строка стоит на тёмной полосе блока тарифов, поэтому цвет берётся из переменной
   полосы, а не из светлой палитры таблицы. */
.company-plan-seats { margin: 14px 2px 0; font-size: 14px; line-height: 1.5; color: #b9bcc6; }
.company-resources-header .company-order-terms { margin-top: 6px; padding-top: 12px; border-top: 1px solid #ffffff33; font-size: 16px; line-height: 1.45; font-weight: 650; color: #f2f6ff; }
/* Узкий зазор между текстом и стрелкой: в колонке таблицы подпись кнопки
   помещается в одну строку, и кнопки во всех трёх тарифах одной высоты. */
.company-comparison .button { width: 100%; min-height: 48px; gap: 10px; padding: 14px 12px; font-size: 14px; font-weight: 650; line-height: 1.3; white-space: normal; }
.company-comparison .button-accent { background: linear-gradient(110deg,#125cbb,#4e53cc 65%,#6844be); }
.company-comparison tbody th { font-weight: 550; color: #34343b; }
.company-comparison td { color: #292930; }
.company-comparison td>span { display: inline-block; min-width: 1em; font-size: 22px; line-height: 1; font-weight: 650; color: #315fc1; }
.company-comparison td>span[aria-label="Нет"] { color: #73737e; }
.company-comparison td small { display: block; margin-top: 7px; font-size: 15px; line-height: 1.6; font-weight: 400; color: #50505b; }
.company-comparison th:nth-child(4),.company-comparison td:nth-child(4) { background: #f5f7fc; }
.company-comparison th:nth-child(4) h3,.company-comparison th:nth-child(4) .price { color: #315fc1; }
.company-comparison tbody tr:last-child th,.company-comparison tbody tr:last-child td { border-bottom: 0; }
#company-server>.button { margin-top: 28px; }
#company-server .company-small-note { font-size: 14px; line-height: 1.7; color: #6e6e73; }
#company-terms { max-width: 850px; margin-top: 32px; padding-top: 28px; border-top: 1px solid #ffffff26; scroll-margin-top: 120px; }
#company-terms h3 { font-size: 20px; color: #f5f5f7; }
#company-terms .company-small-note { margin-top: 8px; font-size: 14px; color: #b2b6c3; }
#company-terms .check-list { margin: 18px 0 0; color: #d6d9e3; }
#company-terms .check-list li { margin-block: 12px; font-size: 15px; line-height: 1.6; }

.is-scroll-enhanced .company-comparison-wrap { scrollbar-width: none; }
.is-scroll-enhanced .company-comparison-wrap::-webkit-scrollbar { display: none; }
.company-comparison-scrollbar { -webkit-appearance: none; appearance: none; position: sticky; bottom: max(10px,env(safe-area-inset-bottom)); z-index: 3; display: block; width: 100%; height: 24px; margin: 12px 0 0; padding: 0 8px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 8px #0002; cursor: ew-resize; touch-action: pan-y; }
.company-comparison-scrollbar::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #d8dfe9; }
.company-comparison-scrollbar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--scroll-thumb-width,40%); height: 6px; border-radius: 999px; background: #526789; }
.company-comparison-scrollbar::-moz-range-track { height: 6px; border-radius: 999px; background: #d8dfe9; }
.company-comparison-scrollbar::-moz-range-thumb { width: var(--scroll-thumb-width,40%); height: 6px; border: 0; border-radius: 999px; background: #526789; }
.company-comparison-scrollbar:focus-visible { outline: 3px solid #89a7ff; outline-offset: 3px; }
#business .company-heading .section-lead { color: #c8cad3; }
@media (max-width: 760px) {
  .company-comparison-carousel { --comparison-label-width: clamp(100px,29vw,160px); --comparison-peek: clamp(24px,6vw,40px); width: auto; margin-inline: -32px; }
  .company-comparison-wrap { border-radius: 0; }
  .company-comparison { min-width: 0; width: calc(300% - 2 * var(--comparison-label-width) - 3 * var(--comparison-peek)); }
  .company-comparison thead th { width: auto; }
  .company-comparison thead th:first-child { width: var(--comparison-label-width); padding-inline: 10px; font-size: 12px; overflow-wrap: normal; }
  .company-comparison th,.company-comparison td { padding: 20px 14px; }
  .company-comparison tr>:not(:first-child) { border-right: 1px solid #dedee3; }
  .company-comparison tbody th { padding-inline: 12px; font-size: 14px; line-height: 1.5; overflow-wrap: normal; hyphens: auto; }
  .company-comparison h3 { font-size: clamp(18px,5.6vw,22px); overflow-wrap: anywhere; }
  .company-comparison .price { font-size: 36px; }
  .company-comparison .price-rows dt,.company-comparison .price-rows dd { font-size: 12px; }
  .company-comparison .company-license-price>.price-stack { min-height: 198px; }
  .company-comparison .company-license-price { gap: 12px; }
  .company-comparison-scrollbar { width: calc(100% - 32px); margin-inline: 16px; }
  #business .company-small-note { font-size: 12px; }
}
@media (max-width: 560px) {
  .company-comparison-carousel { margin-inline: -20px; }
  /* На узких колонках текст кнопки переносился на вторую строку и кнопки
     становились разной высоты: подпись цены и кнопка съезжали вниз. */
  .company-comparison .button { gap: 8px; padding-inline: 10px; font-size: 13px; }
}
@media (max-width: 360px) {
  .company-comparison .button { gap: 6px; padding-inline: 8px; font-size: 13px; }
  .company-comparison .button span { font-size: 15px; }
  /* В самой узкой колонке подпись «Организации» занимает четыре строки. */
  .company-comparison thead small { min-height: 6em; }
}