/* IT-технологии — page-company.css: раскладка карточки сервиса (single-ns_service.php) и сравнения (single-ns_compare.php).
   Компоненты лежат в components.css; здесь — колонки, отступы и связки блоков этих двух страниц.
   Вёрстка от телефона; медиазапросы только min-width: 768px и min-width: 1200px. Скруглений, теней и переходов цвета нет.

   Классы
   .ns-svc__*  карточка сервиса и то, что у двух страниц общее: подстрока, две клетки рядом, мини-таблица аналогов
   .ns-vs__*   только сравнение: две клетки сервисов с табличкой места и «или», баллы в ячейке, группы тегов, переходы

   Содержание
   1. Карточка сервиса: шапка, карточка действия, содержимое     6. Мини-таблица аналогов
   2. Подстрока и две клетки рядом                               7. Подборки, сравнения, источники
   3. За что баллы, цена входа                                   8. Сравнение: шапка с двумя клетками
   4. Как платить: три условия и шаги                            9. Сравнение: таблицы, отличия, переходы
   5. Что внутри: чипы и способы доступа                         */

/* ── 1. Карточка сервиса: шапка, карточка действия, содержимое ─────────────
   В разметке порядок такой: шапка → карточка действия → содержимое. На телефоне и планшете карточка действия стоит
   в потоке сразу после шапки. От 1200px она уходит в правую колонку на всю высоту страницы и закреплена
   (position: sticky задан компоненту .ns-sidecard). Свойство order не используется: порядок фокуса = порядок разметки. */
.ns-svc { row-gap: var(--ns-s-5); }
.ns-svc__head { display: grid; gap: var(--ns-s-3); }
.ns-svc__body > :first-child { margin-top: 0; }
.ns-svc__tabs + .ns-block { margin-top: var(--ns-s-4); }

@media (min-width: 768px) {
  /* планшет: карточка действия во всю ширину — факты слева, кнопка и отметки справа */
  .ns-svc__rail { grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--ns-s-6); align-items: start; }
  .ns-svc__rail > .ns-sidecard__top { grid-column: 1; grid-row: 1; }
  .ns-svc__rail > .ns-sidecard__facts { grid-column: 1; grid-row: 2 / span 2; }
  .ns-svc__rail > .ns-btn { grid-column: 2; grid-row: 1; }
  .ns-svc__rail > .ns-sidecard__marks { grid-column: 2; grid-row: 2; }
  .ns-svc__rail > .ns-sidecard__foot { grid-column: 2; grid-row: 3; }
}
@media (min-width: 1200px) {
  .ns-svc__head { grid-column: 1; grid-row: 1; }
  .ns-svc__rail { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); }
  .ns-svc__body { grid-column: 1; grid-row: 2; }
  .ns-svc__rail > .ns-sidecard__top, .ns-svc__rail > .ns-sidecard__facts, .ns-svc__rail > .ns-btn,
  .ns-svc__rail > .ns-sidecard__marks, .ns-svc__rail > .ns-sidecard__foot { grid-column: auto; grid-row: auto; }
  /* в колонке содержимого пары сравнений стоят по две, а не по три */
  .ns-svc__body .ns-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 2. Подстрока и две клетки рядом ───────────────────────────────────────── */
/* подстрока под значением: пояснение к цене, причина балла, подпись группы тегов */
.ns-svc__sub { display: block; color: var(--ns-muted); font-size: 0.8125rem; line-height: 18px; }

/* две клетки с линией между ними: «Кому подойдёт и кому нет», «Плюсы и минусы» */
.ns-svc__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--ns-line); border: var(--ns-border); }
.ns-svc__cell { display: grid; gap: var(--ns-s-3); align-content: start; min-width: 0; padding: var(--ns-s-3); background: var(--ns-surface); }
.ns-svc__cell .ns-prose { max-width: none; }
.ns-svc__cellhead { display: grid; grid-template-columns: var(--ns-fav-l) minmax(0, 1fr) auto; gap: var(--ns-s-3); align-items: center; }
.ns-svc__cellhead b { font: var(--ns-fw-semibold) var(--ns-fs-num-lg)/20px var(--ns-font-head); }
.ns-svc__cellhead a { text-decoration: none; }
.ns-svc__cellhead a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ns-accent); }
.ns-svc__cell h4 { margin-bottom: 6px; font-size: 0.875rem; line-height: 20px; }

@media (min-width: 768px) {
  .ns-svc__two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-svc__cell { padding: var(--ns-s-4); }
}

/* ── 3. За что баллы, цена входа ───────────────────────────────────────────── */
/* шесть клеток под блоком оценки: откуда взялся каждый балл */
.ns-svc__why { margin-top: var(--ns-s-3); }
.ns-svc__why .ns-rule__k b { color: var(--ns-ink); font-weight: var(--ns-fw-bold); }

/* цена входа: крупная цифра слева, условия строками справа — та же схема, что у блока оценки */
.ns-svc__price { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; background: var(--ns-surface); border: var(--ns-border); }
.ns-svc__pricetotal { padding: var(--ns-s-3); border-bottom: var(--ns-border); }
.ns-svc__pricetotal .ns-over { color: var(--ns-muted); }
.ns-svc__pricenum { display: block; white-space: nowrap; letter-spacing: -0.02em; font: var(--ns-fw-bold) 2rem/1.25 var(--ns-font-mono); font-variant-numeric: tabular-nums; }
.ns-svc__pricerows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px var(--ns-s-3); }
.ns-svc__pricerows > div + div { border-top: var(--ns-border-soft); }
.ns-svc__pricerows dt { color: var(--ns-muted); }
.ns-svc__pricerows dd { min-width: 0; font-size: var(--ns-fs-small); line-height: var(--ns-lh-small); }
.ns-svc__pricerows .ns-badge { margin-right: 6px; }

@media (min-width: 768px) {
  .ns-svc__price { grid-template-columns: 240px minmax(0, 1fr); }
  .ns-svc__pricetotal { border-right: var(--ns-border); border-bottom: 0; }
  .ns-svc__pricerows > div { grid-template-columns: 136px minmax(0, 1fr); gap: var(--ns-s-4); align-items: baseline; }
}

/* ── 4. Как платить: три условия и шаги ────────────────────────────────────── */
/* значение в клетке условия: «да», способ оплаты */
.ns-svc__val { display: block; margin-bottom: 2px; font-size: var(--ns-fs-body); line-height: 22px; font-weight: var(--ns-fw-semibold); }
.ns-svc__steps { margin-top: var(--ns-s-5); }
.ns-svc__steps h3 { margin-bottom: var(--ns-s-3); }

/* ── 5. Что внутри: чипы и способы доступа ─────────────────────────────────── */
.ns-svc__inside .ns-pass__row { align-items: start; }
.ns-svc__inside .ns-pass__v { display: grid; gap: var(--ns-s-2); }
.ns-svc__inside .ns-pass__k b { color: var(--ns-ink); font-weight: var(--ns-fw-bold); }
/* модель названа на сайте сервиса, но своей подборки у неё нет: чип пунктиром и не ссылка */
.ns-svc__nolink { border-style: dashed; cursor: default; }
.ns-svc__nolink:hover { background: var(--ns-surface); }
/* способы доступа: семь строк словаря, есть — галочка, нет — прочерк */
.ns-svc__plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--ns-s-4); font-size: var(--ns-fs-small); line-height: var(--ns-lh-small); }
.ns-svc__plats li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.ns-svc__plats .ns-ico { margin-top: 3px; color: var(--ns-accent2-ink); }
.ns-svc__plats .ns-no { flex: none; width: 14px; text-align: center; }
.ns-svc__plats .is-on { font-weight: var(--ns-fw-semibold); }
.ns-svc__plats .is-off { color: var(--ns-muted); }

@media (min-width: 768px) {
  .ns-svc__inside .ns-pass__k { padding-top: 10px; }
  .ns-svc__plats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ns-svc__inside .ns-pass__k { padding-top: 6px; }
}

/* ── 6. Мини-таблица аналогов ──────────────────────────────────────────────
   На телефоне строка складывается в карточку: название и оценка, ниже поля с подписями из data-label.
   От 768px — обычная таблица внутри .ns-tablewrap. */
.ns-svc__alts table { display: block; min-width: 0; }
.ns-svc__alts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ns-svc__alts tbody { display: block; }
.ns-svc__alts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--ns-s-3); align-items: center; padding: var(--ns-s-3); }
.ns-svc__alts tr + tr { border-top: var(--ns-border-soft); }
.ns-svc__alts td { display: block; min-width: 0; padding: 0; border-bottom: 0; }
.ns-svc__alts td[data-label] { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--ns-s-3); grid-column: 1 / -1; text-align: left; white-space: normal; font-family: inherit; }
.ns-svc__alts td[data-label]::before { content: attr(data-label); color: var(--ns-muted); letter-spacing: var(--ns-ls-over); text-transform: uppercase;
  font: var(--ns-fw-medium) var(--ns-fs-over)/20px var(--ns-font-mono); }
.ns-svc__alts .ns-badge { margin-right: 6px; }
.ns-svc__altwho { display: flex; align-items: center; gap: var(--ns-s-2); min-width: 0; font-weight: var(--ns-fw-bold); }
.ns-svc__altwho a { text-decoration: none; }
.ns-svc__altwho a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--ns-accent); }
.ns-svc__altscore { font: var(--ns-fw-semibold) var(--ns-fs-num-lg)/20px var(--ns-font-head); }
.ns-svc__alts td.ns-svc__altgo { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .ns-svc__alts table { display: table; }
  .ns-svc__alts thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip-path: none; }
  .ns-svc__alts tbody { display: table-row-group; }
  .ns-svc__alts tr { display: table-row; padding: 0; }
  .ns-svc__alts tr + tr { border-top: 0; }
  .ns-svc__alts td, .ns-svc__alts td[data-label] { display: table-cell; padding: 10px var(--ns-s-3); border-bottom: var(--ns-border-soft); vertical-align: middle; }
  .ns-svc__alts tr:last-child td { border-bottom: 0; }
  .ns-svc__alts td[data-label]::before { content: none; }
  .ns-svc__alts td.ns-r { text-align: right; white-space: nowrap; }
  .ns-svc__alts td.ns-svc__altgo { text-align: right; white-space: nowrap; }
  .ns-svc__altwho { white-space: nowrap; }
  .ns-svc__alts .ns-btn--text { min-height: 24px; }
}

/* ── 7. Подборки, сравнения, источники ─────────────────────────────────────── */
/* несколько списков подборок в одной колонке: «по модели», «по условиям», «по профессии» */
.ns-svc__stack .ns-linkcols__list + .ns-linkcols__title { margin-top: var(--ns-s-5); }
/* подпись над группой пар: «С GPTunnel», «С Chad AI» */
.ns-svc__grouplabel { margin-bottom: 6px; color: var(--ns-muted); }
.ns-pairs + .ns-svc__grouplabel { margin-top: var(--ns-s-5); }
/* источники данных: адрес страницы и что с неё взято */
.ns-svc__srclist { display: grid; gap: 4px; font-size: var(--ns-fs-small); line-height: var(--ns-lh-small); }
.ns-svc__srclist li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--ns-s-3); }
.ns-svc__srclist a { overflow-wrap: anywhere; font: var(--ns-fw-medium) 0.8125rem/20px var(--ns-font-mono); }
.ns-svc__srclist span { color: var(--ns-muted); }

@media (min-width: 768px) {
  .ns-svc__srclist li { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
}

/* ── 8. Сравнение: шапка с двумя клетками ──────────────────────────────────
   Две клетки с табличкой места: на телефоне и планшете друг под другом, от 1200px рядом.
   «Или» стоит на линии между клетками. Клетка кликабельна целиком: ссылка названия растянута на клетку. */
.ns-vs__duo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: var(--ns-s-4); background: var(--ns-line); border: var(--ns-border); }
.ns-vs__side { position: relative; display: grid; grid-template-columns: var(--ns-plate) minmax(0, 1fr); gap: var(--ns-s-3); align-items: start; min-width: 0; padding: var(--ns-s-3); background: var(--ns-surface); }
.ns-vs__info { display: grid; gap: 6px; justify-items: start; align-content: start; min-width: 0; }
.ns-vs__name { display: flex; align-items: center; gap: var(--ns-s-2); min-width: 0; font: var(--ns-fw-bold) 1.125rem/24px var(--ns-font-body); }
.ns-vs__name a { text-decoration: none; }
.ns-vs__name a::after { content: ""; position: absolute; inset: 0; }
.ns-vs__side:hover .ns-vs__name a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ns-accent); }
.ns-vs__name a:focus-visible { outline: none; }
.ns-vs__name a:focus-visible::after { outline: var(--ns-focus-w) solid var(--ns-ink); outline-offset: calc(var(--ns-focus-w) * -1); }
.ns-vs__score { letter-spacing: -0.02em; font: var(--ns-fw-semibold) var(--ns-fs-score)/1 var(--ns-font-head); }
.ns-vs__of { margin-left: 6px; color: var(--ns-muted); font: var(--ns-fw-medium) 12px/1 var(--ns-font-mono); }
.ns-vs__place { color: var(--ns-muted); font-size: var(--ns-fs-small); line-height: var(--ns-lh-small); }
.ns-vs__short { display: none; max-width: 420px; font-size: var(--ns-fs-small); line-height: var(--ns-lh-small); }
/* «или» лежит в начале второй клетки и рисуется на линии между клетками: над табличкой, пока клетки стоят друг под другом */
.ns-vs__or { position: absolute; left: calc(var(--ns-s-3) + var(--ns-plate) / 2); top: -0.5px; z-index: 1; transform: translate(-50%, -50%);
  padding: 2px 6px; background: var(--ns-bg); border: var(--ns-border); }
.ns-vs__duo + .ns-disclosure { margin-top: var(--ns-s-3); }

@media (min-width: 768px) {
  .ns-vs__side { gap: var(--ns-s-4); padding: var(--ns-s-4); }
  .ns-vs__short { display: block; }
  .ns-vs__or { left: calc(var(--ns-s-4) + var(--ns-plate) / 2); }
  /* «Коротко» на планшете: название и причина стоят друг под другом, иначе причине остаётся колонка в 130px */
  .ns-vs__answer .ns-answer__row { grid-template-columns: 176px var(--ns-fav-l) minmax(0, 1fr) auto; align-items: start; padding-block: var(--ns-s-3); }
  .ns-vs__answer .ns-answer__label { grid-column: 1; grid-row: 1 / span 2; padding-top: 2px; }
  .ns-vs__answer .ns-answer__row > .ns-fav { grid-column: 2; grid-row: 1 / span 2; }
  .ns-vs__answer .ns-answer__name { grid-column: 3; grid-row: 1; }
  .ns-vs__answer .ns-answer__why { grid-column: 3; grid-row: 2; }
  .ns-vs__answer .ns-answer__links { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
}
@media (min-width: 1200px) {
  .ns-vs__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* клетки рядом: «или» — на вертикальной линии, по середине высоты; под него у клеток шире поля */
  .ns-vs__side:first-child { padding-right: var(--ns-s-6); }
  .ns-vs__side + .ns-vs__side { padding-left: var(--ns-s-6); }
  .ns-vs__or { left: -0.5px; top: 50%; }
  /* от 1200px «Коротко» — строка в пять колонок, как в подборке */
  .ns-vs__answer .ns-answer__row { grid-template-columns: 190px var(--ns-fav-l) 150px minmax(0, 1fr) auto; align-items: center; padding-block: var(--ns-s-2); }
  .ns-vs__answer .ns-answer__label, .ns-vs__answer .ns-answer__row > .ns-fav, .ns-vs__answer .ns-answer__name,
  .ns-vs__answer .ns-answer__why, .ns-vs__answer .ns-answer__links { grid-column: auto; grid-row: auto; align-self: auto; padding-top: 0; }
}

/* ── 9. Сравнение: таблицы, отличия, переходы ──────────────────────────────── */
.ns-cmp td > .ns-badge { margin-right: 4px; }
.ns-vs__num { font: var(--ns-fw-semibold) var(--ns-fs-num-lg)/20px var(--ns-font-head); }
/* балл критерия в ячейке: число, шкала, под ними причина */
.ns-vs__pts { display: flex; align-items: center; gap: var(--ns-s-2); margin-bottom: 2px; }
.ns-vs__pts b { flex: none; min-width: 22px; font: var(--ns-fw-bold) var(--ns-fs-num)/20px var(--ns-font-mono); font-variant-numeric: tabular-nums; }
.ns-vs__pts .ns-bar { flex: 1; width: auto; max-width: 180px; height: 8px; }
.ns-vs__w { color: var(--ns-ink); }
/* «Чем отличаются»: абзац и группы тегов — общие, только у первого, только у второго */
.ns-vs__diff .ns-pass__row { align-items: start; }
.ns-vs__diff .ns-pass__v { display: grid; gap: var(--ns-s-2); max-width: var(--ns-measure); }
.ns-vs__sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-s-3) var(--ns-s-5); }
.ns-vs__sets .ns-svc__sub { margin-bottom: 4px; }
/* в узкой ячейке сравнения тег переносится, а не обрезается многоточием: здесь значение нужно видеть целиком */
.ns-cmp .ns-tag { white-space: normal; overflow-wrap: anywhere; }
/* переходы: по клетке на сервис, кнопки делят ширину поровну */
.ns-vs__go { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-s-3); }
.ns-vs__gohead { display: grid; grid-template-columns: var(--ns-fav-l) minmax(0, 1fr); gap: 0 var(--ns-s-3); align-items: center; }
.ns-vs__gohead .ns-fav { grid-row: span 2; }
.ns-vs__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-s-2); }
/* «Добавить третий сервис»: на телефоне в столбик, от 768px в строку */
.ns-vs__third .ns-btn { width: 100%; }
.ns-vs__third .ns-svc__sub { margin-top: 2px; font-weight: var(--ns-fw-regular); }

@media (min-width: 768px) {
  .ns-vs__diff .ns-pass__k { padding-top: 4px; }
  .ns-vs__go { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-gap); }
  .ns-vs__btns { grid-template-columns: 160px 160px; }
  .ns-vs__third { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ns-s-4); }
  .ns-vs__third .ns-btn { width: auto; }
}
@media (min-width: 1200px) {
  /* три группы тегов в ряд: на планшете колонке значения не хватает ширины, длинные названия обрезались бы */
  .ns-vs__sets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* текст и вопросы внизу стоят рядом, 7 и 5 колонок */
  .ns-vs__bottom .ns-faq, .ns-vs__bottom .ns-prose { max-width: none; }
}

/* Правка 14.10.2026: «Сравнить» в таблице аналогов на планшете (768–1199px) — область нажатия 40px вместо 24px;
   название сервиса не сжимается уже 150px, чтобы оценка рядом не выдавливала его в столбик. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ns-svc__alts .ns-btn--text { min-height: 40px; }
}
@media (min-width: 768px) {
  .ns-svc__alts td:first-child { min-width: 150px; }
}