/* IT-технологии — base.css
   Сброс, типографика, служебные классы, сетка страницы, шапка, строка групп, подвал.
   Переменные — tokens.css, компоненты — components.css. Правила системы: 05-design.md.
   Вёрстка от телефона; медиазапросы только min-width: 768px и min-width: 1200px.
   Теней, переходов цвета, размытия и скруглений нет нигде.

   Содержание
   1. Сброс                     5. Значки и метка группы       9. Шапка .ns-header, .ns-logo
   2. Типографика               6. Контейнер и сетка           10. Строка групп .ns-groupbar
   3. Служебные классы          7. Блок страницы .ns-block     11. Подвал .ns-footer
   4. Группы .ns-g--<слаг>      8. Ссылка «к содержимому»      12. Печать и движение */

/* ── 1. Сброс ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--ns-bg); color: var(--ns-ink);
  font: var(--ns-fw-regular) var(--ns-fs-body)/var(--ns-lh-body) var(--ns-font-body);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { min-width: 0; border: 0; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
th { font: inherit; text-align: left; }
button, input, select, textarea { margin: 0; border-radius: var(--ns-radius); font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
a { color: inherit; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--ns-ink); color: var(--ns-on-dark); }
:focus-visible { outline: var(--ns-focus-w) solid var(--ns-ink); outline-offset: var(--ns-focus-offset); }
[id] { scroll-margin-top: 74px; }
html.ns-lock, html.ns-lock body { overflow: hidden; }

/* ── 2. Типографика ───────────────────────────────────────────────────────── */
h1, .ns-h1 { font: var(--ns-fw-semibold) var(--ns-fs-h1)/var(--ns-lh-h1) var(--ns-font-head); letter-spacing: var(--ns-ls-head); }
h2, .ns-h2 { font: var(--ns-fw-semibold) var(--ns-fs-h2)/var(--ns-lh-h2) var(--ns-font-head); letter-spacing: var(--ns-ls-head); }
h3, .ns-h3 { font: var(--ns-fw-medium) var(--ns-fs-h3)/var(--ns-lh-h3) var(--ns-font-head); }
h4, .ns-h4 { font: var(--ns-fw-bold) var(--ns-fs-h4)/var(--ns-lh-h4) var(--ns-font-body); }
b, strong { font-weight: var(--ns-fw-bold); }

/* ссылка в тексте: цвет текста, подчёркивание 1px; при наведении 2px цвета акцента */
.ns-link, .ns-prose a, .ns-lead a, .ns-disclosure a, .ns-note a, .ns-trust a, .ns-faq__a a, .ns-block__note a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ns-link:hover, .ns-prose a:hover, .ns-lead a:hover, .ns-disclosure a:hover, .ns-note a:hover, .ns-trust a:hover, .ns-faq__a a:hover, .ns-block__note a:hover {
  text-decoration-thickness: 2px; text-decoration-color: var(--ns-accent); }

/* ── 3. Служебные классы ──────────────────────────────────────────────────── */
.ns-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ns-num { font-family: var(--ns-font-mono); font-weight: var(--ns-fw-medium); font-size: 0.875em; font-variant-numeric: tabular-nums; }
.ns-no { color: var(--ns-muted); }
.ns-muted { color: var(--ns-muted); }
.ns-nowrap { white-space: nowrap; }
/* «из 10» рядом с оценкой: число без подписи не оставляем */
.ns-of { margin-left: 4px; color: var(--ns-muted); letter-spacing: 0; white-space: nowrap; font: var(--ns-fw-medium) 11px/1 var(--ns-font-mono); }
.ns-over { font: var(--ns-fw-medium) var(--ns-fs-over)/16px var(--ns-font-mono); letter-spacing: var(--ns-ls-over); text-transform: uppercase; }
.ns-lead { max-width: var(--ns-measure); font-size: var(--ns-fs-lead); line-height: var(--ns-lh-lead); }
.ns-lead--wide { max-width: none; }
/* «да» в данных: галочка и слово цветом второго акцента */
.ns-yes { display: inline-flex; align-items: center; gap: 4px; color: var(--ns-accent2-ink); font-weight: var(--ns-fw-semibold); white-space: nowrap; }

/* ── 4. Группы задач: класс записывает цвет группы в --ns-g ───────────────── */
.ns-g--agregatory { --ns-g: var(--ns-g-agregatory); }
.ns-g--ii-assistenty { --ns-g: var(--ns-g-ii-assistenty); }
.ns-g--kartinki { --ns-g: var(--ns-g-kartinki); }
.ns-g--video-i-zvuk { --ns-g: var(--ns-g-video-i-zvuk); }
.ns-g--marketplejsy { --ns-g: var(--ns-g-marketplejsy); }
.ns-g--kod { --ns-g: var(--ns-g-kod); }
.ns-g--biznes { --ns-g: var(--ns-g-biznes); }

/* ── 5. Значки и метка группы ─────────────────────────────────────────────── */
.ns-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ns-ico { width: var(--ns-ico); height: var(--ns-ico); flex: none; fill: none; stroke: currentColor;
  stroke-width: var(--ns-ico-sw); stroke-linecap: square; stroke-linejoin: miter; }
.ns-ico--lg { width: var(--ns-ico-lg); height: var(--ns-ico-lg); }
.ns-ico--sm { width: 14px; height: 14px; }
.ns-ico--xs { width: 12px; height: 12px; }
.ns-ico--up { transform: rotate(-90deg); }
.ns-ico--back { transform: rotate(180deg); }
/* метка-квадрат 10×10 цвета группы: строка групп, меню, чипы, карта сервисов, подвал */
.ns-dot { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--ns-g); border: var(--ns-border); }

/* ── 6. Контейнер и сетка ─────────────────────────────────────────────────── */
.ns-wrap { width: 100%; max-width: var(--ns-container); margin-inline: auto; padding-inline: var(--ns-gutter); }
.ns-main { display: block; min-height: 50vh; }
.ns-measure { max-width: var(--ns-measure); }

/* две колонки 7 и 5 от 1200px: текст и вопросы внизу страницы, «Новичку» */
.ns-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-section) var(--ns-gap); }
.ns-split > * { min-width: 0; }
/* содержимое и правая колонка 392px от 1200px: карточка сервиса, статья, служебная страница */
.ns-with-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-s-5); }
.ns-with-rail > * { min-width: 0; }

@media (min-width: 1200px) {
  .ns-split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ns-split > :first-child { grid-column: 1 / span 7; }
  .ns-split > :last-child { grid-column: 8 / span 5; }
  .ns-with-rail { grid-template-columns: minmax(0, 1fr) var(--ns-rail-w); gap: var(--ns-s-7); align-items: start; }
}

/* ── 7. Блок страницы: отступ, заголовок слева, ссылка «все …» справа ─────── */
.ns-block { margin-top: var(--ns-section); }
.ns-block--tight { margin-top: var(--ns-s-5); }
.ns-block--mid { margin-top: var(--ns-s-6); }
.ns-block__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ns-s-2); margin-bottom: var(--ns-s-4); }
.ns-block__title { min-width: 0; }
.ns-block__sub { margin-bottom: var(--ns-s-4); max-width: var(--ns-measure); color: var(--ns-muted); font-size: var(--ns-fs-small); line-height: var(--ns-lh-small); }
.ns-block__head + .ns-block__sub { margin-top: calc(var(--ns-s-2) * -1); }
.ns-block__note { margin-top: var(--ns-s-3); max-width: var(--ns-measure); color: var(--ns-muted); font-size: 0.8125rem; line-height: 1.385; }
.ns-block__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-s-3) var(--ns-s-5); margin-top: var(--ns-s-4); }
/* одиночная кнопка действия под блоком: на телефоне — на всю ширину */
.ns-block__foot > .ns-btn:not(.ns-btn--text) { width: 100%; }
/* заголовок части внутри блока: «Статьи по теме» под подборками */
.ns-block__head--sub { margin-top: var(--ns-s-6); }

@media (min-width: 768px) {
  .ns-block__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--ns-s-5); }
  .ns-block__foot > .ns-btn:not(.ns-btn--text) { width: auto; }
  .ns-block__head > .ns-btn--text { flex: none; }
}

/* ── 8. Ссылка «к содержимому» ────────────────────────────────────────────── */
.ns-skip { position: absolute; left: var(--ns-gutter); top: -100px; z-index: calc(var(--ns-z-sheet) + 1); padding: 10px 16px;
  background: var(--ns-ink); color: var(--ns-on-dark); font-weight: var(--ns-fw-semibold); text-decoration: none; }
.ns-skip:focus { top: 8px; outline-color: var(--ns-accent); }

/* ── 9. Шапка ─────────────────────────────────────────────────────────────── */
.ns-header { position: sticky; top: 0; z-index: var(--ns-z-header); background: var(--ns-bg); border-bottom: var(--ns-border-2); }
.ns-header__row { display: flex; align-items: center; gap: var(--ns-s-4); height: var(--ns-header-h); }

.ns-logo { display: inline-flex; align-items: center; gap: var(--ns-s-2); min-height: var(--ns-tap); color: inherit; text-decoration: none; white-space: nowrap;
  font: var(--ns-fw-semibold) 0.875rem/1 var(--ns-font-head); }
.ns-logo__mark { flex: none; width: 28px; height: 28px; fill: currentColor; }
.ns-logo__hit { fill: var(--ns-accent); }
.ns-logo:hover .ns-logo__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--ns-accent); }

.ns-header__nav { display: none; }
.ns-header__link { display: inline-flex; align-items: center; height: var(--ns-header-h); color: inherit; text-decoration: none; white-space: nowrap;
  font: var(--ns-fw-medium) 0.875rem/1 var(--ns-font-body);
  border-top: var(--ns-bw-2) solid transparent; border-bottom: var(--ns-bw-2) solid transparent; transition: border-color var(--ns-dur) var(--ns-ease); }
.ns-header__link:hover, .ns-header__link[aria-current] { border-bottom-color: var(--ns-ink); }
.ns-header__tools { display: flex; align-items: center; gap: var(--ns-s-4); margin-left: auto; }
/* счётчики «Избранное N» и «Сравнить N» */
.ns-count { display: none; align-items: center; gap: 6px; height: var(--ns-header-h); color: inherit; text-decoration: none; white-space: nowrap;
  font: var(--ns-fw-medium) 0.8125rem/1 var(--ns-font-body);
  border-top: var(--ns-bw-2) solid transparent; border-bottom: var(--ns-bw-2) solid transparent; transition: border-color var(--ns-dur) var(--ns-ease); }
.ns-count:hover { border-bottom-color: var(--ns-ink); }
.ns-count__n { font: var(--ns-fw-medium) 0.8125rem/1 var(--ns-font-mono); font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .ns-header__nav { display: flex; gap: var(--ns-s-5); margin-left: var(--ns-s-4); }
  .ns-count { display: inline-flex; }
}
@media (min-width: 1200px) {
  .ns-header .ns-header__menu { display: none; }
}

/* ── 10. Строка групп: под шапкой, не закреплена, только от 1200px ────────── */
.ns-groupbar { display: none; }
@media (min-width: 1200px) {
  .ns-groupbar { display: block; border-bottom: var(--ns-border); }
  .ns-groupbar__list { display: flex; gap: var(--ns-s-5); height: var(--ns-groupbar-h); }
  .ns-groupbar__link { display: inline-flex; align-items: center; gap: 6px; height: 100%; color: inherit; text-decoration: none; white-space: nowrap;
    font: var(--ns-fw-medium) 0.8125rem/16px var(--ns-font-body);
    border-top: var(--ns-bw-4) solid transparent; border-bottom: var(--ns-bw-4) solid transparent; transition: border-color var(--ns-dur) var(--ns-ease); }
  .ns-groupbar__link:hover { border-bottom-color: var(--ns-g); }
  .ns-groupbar__link[aria-current] { border-bottom-color: var(--ns-ink); font-weight: var(--ns-fw-bold); }
}

/* ── 11. Подвал ───────────────────────────────────────────────────────────── */
.ns-footer { margin-top: var(--ns-section); padding: var(--ns-s-6) 0 var(--ns-s-5); background: var(--ns-dark); color: var(--ns-on-dark);
  font-size: var(--ns-fs-small); line-height: var(--ns-lh-small); }
.ns-footer :focus-visible { outline-color: var(--ns-accent); }
.ns-footer__top { display: grid; gap: var(--ns-s-3); padding-bottom: var(--ns-s-5); }
.ns-footer__about { max-width: 520px; color: var(--ns-muted-on-dark); }
.ns-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ns-s-5); padding: var(--ns-s-5) 0;
  border-top: var(--ns-bw) solid var(--ns-line-on-dark); border-bottom: var(--ns-bw) solid var(--ns-line-on-dark); }
.ns-footer__col { min-width: 0; }
.ns-footer__title { margin-bottom: var(--ns-s-2); color: var(--ns-muted-on-dark); }
.ns-footer__link { display: flex; align-items: center; gap: var(--ns-s-2); min-height: var(--ns-tap); color: inherit; text-decoration: none; }
.ns-footer__link:hover { color: var(--ns-accent); text-decoration: underline; text-underline-offset: 3px; }
.ns-footer__link .ns-dot { border-color: var(--ns-on-dark); }
.ns-footer__bottom { display: grid; gap: var(--ns-s-3); padding-top: var(--ns-s-5); }
.ns-footer__disclosure { max-width: 90ch; color: var(--ns-muted-on-dark); }
.ns-footer__disclosure a { color: var(--ns-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ns-footer__disclosure a:hover { color: var(--ns-accent); }
.ns-footer__date { font: var(--ns-fw-medium) 0.75rem/16px var(--ns-font-mono); }
.ns-footer__mail { overflow-wrap: anywhere; }
.ns-footer__mail a { color: var(--ns-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ns-footer__mail a:hover { color: var(--ns-accent); }

@media (min-width: 768px) {
  .ns-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-footer__link { min-height: 32px; }
}
@media (min-width: 1200px) {
  .ns-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 12. Движение и печать ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .ns-header, .ns-groupbar, .ns-footer, .ns-sheet, .ns-comparebar, .ns-stickycta, .ns-toolbar { display: none !important; }
  body { background: #fff; }
}