/* ===================================================================
   «Как выбирают нейросети» (how-neural-cite.html)
   Все значения — замеры из JSON-экспорта Figma «How AI chooses»
   (1440 / 768 / 390), см. reports/how-neural-cite_v1.md.
   Общие файлы (tokens.css, components.css) не меняются: страница
   добавляет только свои классы с префиксом .hnc-.
   =================================================================== */

/* ---------- 01 · Нейросеть берёт названия ---------- */
.hnc-s01__in{display:grid;grid-template-columns:minmax(0,736px) minmax(0,440px);
  justify-content:space-between;gap:24px;align-items:start}
.hnc-h1{font-size:60px;line-height:64px;margin-top:12px}   /* макет 1440: H1 страницы 60/64, не 64/68 */

.hnc-nums{display:grid;grid-template-columns:repeat(2,minmax(0,300px));
  justify-content:start;gap:66px;margin-top:39px}
.hnc-num__v{font-size:var(--fs-bignum);line-height:var(--lh-bignum);font-weight:700;color:var(--ink)}
.hnc-num__v--blue{color:var(--blue)}
.hnc-num__v sup{font-size:20px;line-height:1;font-weight:700;vertical-align:super}
.hnc-num__d{margin-top:9px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray)}
.hnc-ref{display:inline-block;margin-top:24px;padding:8px 12px;border-radius:var(--r-xs);
  background:var(--bg-soft);font-size:12px;line-height:12px;font-weight:700;color:var(--gray)}

/* Д-118 п.1 ([С] 24.10): две серые карточки-источника (.hnc-fade--1/--2) убраны
   из разметки, их стили удалены. Остаётся одна карточка-иллюстрация .hnc-rank —
   во всю ширину правой колонки сетки, по верхнему краю текстового блока.
   Кегли и цвета — только токены (было 12/15, 17/22, 15/18 вручную). */
.hnc-stack{display:flex;flex-direction:column;align-items:center}

.hnc-rank{width:100%;background:var(--bg);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line);padding:20px 24px 16px}
.hnc-rank__url{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--gray)}
.hnc-rank__h{margin-top:3px;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;color:var(--ink)}
.hnc-rank__list{margin-top:14px}
.hnc-rank__list li{display:flex;align-items:center;border-top:1px solid var(--line);padding:19px 0 13px}
.hnc-rank__n{flex:0 0 45px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray-2)}
.hnc-rank__name{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink)}
.hnc-rank__you{display:flex;align-items:center;border-top:1px solid var(--line);
  margin:0 -12px;padding:13px 12px;border-radius:var(--r-xs);background:var(--blue-tint)}
.hnc-rank__you .hnc-rank__n,.hnc-rank__you .hnc-rank__name{font-weight:700;color:var(--blue)}
.hnc-rank__you .hnc-rank__n{flex-basis:44px;padding-left:1px}
.hnc-rank__tag{display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  padding:0 16px;height:28px;border-radius:var(--r-pill);
  background:var(--blue);font-size:var(--fs-caption);line-height:var(--lh-caption);
  font-weight:700;color:#fff}
.hnc-rank__tag .i-check{background:#fff}

/* ---------- 02 · Индекс цитируемости ---------- */
.hnc-niches{margin-top:42px}
.hnc-niche{padding:28px 28px 30px}
.hnc-niche__label{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:700;
  letter-spacing:0;color:var(--gray)}
.hnc-niche__name{margin-top:4px;font-size:14px;line-height:18px;font-weight:700;color:var(--ink)}
/* Д-118 п.2 ([С] 24.10): монохром — подпись «Нейросеть берёт ответ из» была
   синей, стала серой (--gray, как «НИША» и прочие подписи сайта). Синими
   в секции остаются только надзаголовок и ссылки. */
.hnc-niche__kicker{margin-top:15px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;line-height:15px;font-weight:700;color:var(--gray)}
.card .hnc-niche__src{margin-top:7px;font-size:var(--fs-title-m);line-height:26px;font-weight:700;color:var(--ink)}
.card .hnc-niche__desc{margin-top:6px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray)}
.hnc-fine{margin-top:16px;font-size:var(--fs-caption);line-height:18px;color:var(--gray-2)}
.hnc-sum{margin-top:32px;font-size:19px;line-height:28px;color:var(--ink)}
.hnc-sum b{font-weight:700}
.hnc-sum--lead{margin-top:39.4px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray)}
.hnc-sum--lead b{color:var(--ink)}

/* ---------- 03 · Якорные страницы (фон #1C1C1E) ---------- */
.hnc-s03{background:var(--card-dark);color:#fff}
.hnc-s03 .h2{color:#fff}
.hnc-s03 .h2 .muted{color:var(--gray-on-dark)}
.hnc-s03 .eyebrow{color:var(--blue-on-dark)}
.hnc-s03__in{display:grid;grid-template-columns:minmax(0,700px) minmax(0,458px);
  justify-content:space-between;gap:42px;align-items:start}
.hnc-s03__lead{max-width:624px;margin-top:24.4px;color:var(--gray-2)}
.hnc-big{display:flex;align-items:baseline;gap:25px;margin-top:39.6px;
  font-size:var(--fs-bignum);line-height:var(--lh-bignum);font-weight:700;color:#fff}
.hnc-big__v--blue{color:var(--blue-on-dark)}
.hnc-big__v sup{font-size:20px;line-height:1;vertical-align:super}
.hnc-big__arrow{font-size:38px;line-height:1;font-weight:400}
.hnc-fine--dark{margin-top:10.8px;max-width:460px;color:var(--gray-2)}

.hnc-site{align-self:start;margin-top:97px;background:var(--card-dark-2);
  border-radius:var(--r-md);padding:26px 28px 28px}
.hnc-site__kicker{display:block;font-size:var(--fs-caption);line-height:15px;font-weight:700;
  color:#8E8E93}
.hnc-site__line{display:block;height:6px;border-radius:3px;background:#3A3A3C}
.hnc-site__line:nth-of-type(2){margin-top:19px;width:72%}
.hnc-site__line:nth-of-type(3){margin-top:10px;width:52%}
.hnc-site__line:nth-of-type(4){margin-top:10px;width:78%}
.hnc-site__line:nth-of-type(5){margin-top:16px;width:62%}
.hnc-site__line:nth-of-type(6){margin-top:10px;width:74%}
.hnc-site__line:nth-of-type(7){margin-top:10px;width:48%}
.hnc-site__line:nth-of-type(8){margin-top:10px;width:66%}
.hnc-site__hit{display:flex;align-items:center;gap:16px;margin:14px -14px 0;
  padding:15.3px 16px 15.7px 18px;border-radius:var(--r-xs);background:var(--blue)}
.hnc-site__bar{flex:0 0 auto;width:40.6%;height:6px;border-radius:3px;background:#fff}
.hnc-site__hit-t{margin-left:auto;font-size:12px;line-height:15px;font-weight:700;color:#fff}
.hnc-site__more{display:block;margin-top:14px;font-size:12px;line-height:15px;color:#8E8E93}

/* ---------- 04 · Признаки цитируемых страниц ---------- */
.hnc-s04 .h2{max-width:1056px}   /* ширина текста H2 в макете: перенос после «цитирует» */
.hnc-signs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px}
/* Д-118 п.3 ([С] 24.10): линии над колонками — как в «Методике» на
   how-it-works (.section--method .stat): были 2 px --gray-2, стали тонкие
   1 px --line-2. Потерянный 1 px высоты возвращён в padding-top. */
.hnc-sign{border-top:1px solid var(--line-2);padding-top:19px}
.hnc-sign__h{font-size:var(--fs-title-s);line-height:24px;font-weight:700;color:var(--ink)}
.hnc-sign__sub{margin-top:2px;font-size:var(--fs-caption);line-height:18px;font-weight:700;color:var(--ink)}
.hnc-sign__desc{margin-top:8px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--gray)}
/* Итог «По этим признакам мы готовим…» — в серой плашке во всю ширину
   контейнера, как .section--method .conclusion на how-it-works:
   --bg-soft, --r-md, поля --card-py/--card-px; отбивка --gap-head (42/30/29). */
.hnc-note{margin-top:var(--gap-head);background:var(--bg-soft);border-radius:var(--r-md);
  padding:var(--card-py) var(--card-px);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;color:var(--ink)}

/* ---------- 05 · Ответы меняются ---------- */
.hnc-s05{padding-bottom:40.6px}          /* макет: низ секции 05 поднят, 06 идёт тем же серым */
.hnc-head--05{margin-bottom:0}
.hnc-s05__lead{max-width:640px;margin-top:24.5px}
/* Д-118 п.4 ([С] 24.10): низ всех столбиков на одной линии на всех ширинах.
   Был margin-bottom у .hnc-bar:nth-child(n+18) — 12 px на ПК, 2 px на планшете,
   0 на телефоне; правила сняты, телефонная (верная) раскладка стала общей. */
.hnc-chart{display:flex;align-items:flex-end;gap:8px;height:230px;margin-top:40.5px}
.hnc-bar{flex:1 1 0;min-width:0;border-radius:6px;background:var(--blue)}
.hnc-bar:nth-child(n+11){background:var(--blue-light)}
.hnc-bar:nth-child(1){height:100%}   .hnc-bar:nth-child(2){height:92.17%}
.hnc-bar:nth-child(3){height:85.22%} .hnc-bar:nth-child(4){height:79.13%}
.hnc-bar:nth-child(5){height:70.43%} .hnc-bar:nth-child(6){height:65.22%}
.hnc-bar:nth-child(7){height:59.13%} .hnc-bar:nth-child(8){height:53.04%}
.hnc-bar:nth-child(9){height:47.83%} .hnc-bar:nth-child(10){height:42.61%}
.hnc-bar:nth-child(11){height:29.57%}.hnc-bar:nth-child(12){height:25.22%}
.hnc-bar:nth-child(13){height:21.74%}.hnc-bar:nth-child(14){height:19.13%}
.hnc-bar:nth-child(15){height:17.39%}.hnc-bar:nth-child(16){height:15.65%}
.hnc-bar:nth-child(17){height:13.91%}.hnc-bar:nth-child(18){height:13.04%}
.hnc-bar:nth-child(19){height:12.17%}.hnc-bar:nth-child(20){height:11.30%}
.hnc-bar:nth-child(21){height:10.43%}.hnc-bar:nth-child(22){height:9.57%}
.hnc-bar:nth-child(23){height:9.13%} .hnc-bar:nth-child(24){height:8.70%}
.hnc-bar:nth-child(25){height:8.26%} .hnc-bar:nth-child(26){height:7.83%}
.hnc-bar:nth-child(27){height:7.39%} .hnc-bar:nth-child(28){height:6.96%}
.hnc-bar:nth-child(29){height:6.52%} .hnc-bar:nth-child(30){height:6.09%}
.hnc-legend{display:flex;gap:39px;margin-top:13px}
.hnc-legend__i{display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-caption);line-height:16px;color:var(--gray)}
.hnc-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.hnc-dot--soft{background:var(--blue-light)}

/* ---------- 06 · Что делать бренду ---------- */
.hnc-s06 .h2{max-width:640px}    /* ширина текста H2 в макете: перенос после «бренду.» */
.hnc-rules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:43.5px}
.hnc-rule{padding:24px 25px 23.7px;border-radius:var(--r-md)}
.hnc-rule__n{font-size:var(--fs-caption);line-height:16px;font-weight:700;color:var(--gray-2)}
.hnc-rule__h{margin-top:16px;font-size:var(--fs-title-s);line-height:24px;font-weight:700;color:var(--ink)}
.card .hnc-rule__d{margin-top:8px;font-size:14px;line-height:20px;color:var(--gray)}

/* ---------- 07 · Финальный призыв ---------- */
.hnc-cta__h{max-width:900px;margin:0 auto}  /* ширина текста H1 в макете: 887 */
/* Д-118 п.5 ([С] 24.10): вместо ссылки «Посмотреть пример отчёта» — вторая
   кнопка «Проверить сайт бесплатно». Пара кнопок собрана как в секции 11
   главной (index.html:466‑468): .actions + .btn--primary / .btn--ghost,
   центрирование и шаг 12/11,5 из components.css, на телефоне кнопки на всю
   ширину. Своё — только отбивка: .center .actions в components.css обнулён
   под главную, где её держит .center .head. */
.center .hnc-cta__actions{margin-top:var(--gap-actions)}

/* только десктоп 1024+: отбивка надстрочника под бокс макета */
@media (min-width:1024px){
  .hnc-s03 .eyebrow,.hnc-s05 .eyebrow{margin-bottom:15.1px}
  .hnc-s06 .eyebrow{margin-bottom:14.5px}
}

/* ===================== Планшет 768 ===================== */
@media (max-width:1023px){
  .hnc-s01__in,.hnc-s03__in{grid-template-columns:minmax(0,1fr);gap:0}
  .hnc-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);margin-top:12px}
  .hnc-nums{grid-template-columns:repeat(2,minmax(0,300px));gap:52px;margin-top:32.3px}
  .hnc-ref{margin-top:25px}
  .hnc-stack{display:none}   /* Д-118 п.1 ([С] 24.10): карточка-иллюстрация только на ПК (≥1024) */
  .hnc-niches{margin-top:29.9px}
  .hnc-niche{padding:28px 28px 28px}
  .hnc-niche__name{margin-top:4.5px}
  .hnc-niche__kicker{margin-top:14px}
  .card .hnc-niche__src{margin-top:5.5px}
  .card .hnc-niche__desc{margin-top:4.8px}
  .hnc-fine{margin-top:17.1px}
  .hnc-sum{margin-top:23.6px;font-size:var(--fs-body);line-height:var(--lh-body)}
  .hnc-s03__lead{max-width:524px}
  .hnc-big{margin-top:32.7px}
  .hnc-fine--dark{margin-top:9.9px}
  .hnc-site{margin-top:40.1px}                        /* макет 768: мокап 284 */
  .hnc-site__kicker{font-size:12px}
  .hnc-site__line:nth-of-type(2){margin-top:18px}
  .hnc-signs{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 32px;margin-top:33.9px}
  .hnc-s05{padding-bottom:24.6px}
  .hnc-chart{height:184px;gap:5px;margin-top:32.7px}
  .hnc-legend{gap:30px;margin-top:11px}
  .hnc-sum--lead{margin-top:28.8px}
  .hnc-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30.3px}
}

/* только планшет 768: кегли и отбивки, которые на телефоне другие */
@media (min-width:768px) and (max-width:1023px){
  /* надстрочник: в макете 768 кегль 17 px, в эталоне components.css — 16.
     Кегль держим эталонный, высоту строки равняем по боксу макета (17 x 1,21),
     чтобы заголовок и всё, что ниже, встало на места макета. */
  .hnc-s01 .eyebrow,.hnc-s02 .eyebrow,.hnc-s04 .eyebrow,
  .hnc-s05 .eyebrow,.hnc-s06 .eyebrow{line-height:20.6px}
  .hnc-s01 .eyebrow{margin-bottom:10.1px}
  .hnc-s02 .eyebrow,.hnc-s04 .eyebrow{margin-bottom:12.5px}
  .hnc-s05 .eyebrow{margin-bottom:12.4px}
  .hnc-s06 .eyebrow{margin-bottom:12.1px}
  .hnc-s02 .head,.hnc-s04 .head,.hnc-s06 .head{margin-bottom:0}
  .hnc-h1{margin-top:0}            /* отбивку держит margin-bottom надстрочника */
  .hnc-s03__lead,.hnc-s05__lead{margin-top:19.3px}
  /* карточка признака: макет 131 / 111 */
  .hnc-sign{padding-top:18.4px}
  .hnc-sign__h{line-height:23px}
  .hnc-sign__sub{margin-top:2.6px}
  .hnc-sign__desc{margin-top:7.3px}
  /* карточка правила: макет 172 / 148, заголовок 20/auto */
  .hnc-rule{padding:22.3px 22.7px 22.4px}
  .hnc-rule__n{line-height:15.7px}
  .hnc-rule__h{margin-top:15.3px;font-size:20px;line-height:24.2px}
  .card .hnc-rule__d{margin-top:8.1px}
}

/* ===================== Телефон 390 ===================== */
@media (max-width:767px){
  .hnc-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);margin-top:9.6px}
  .hnc-nums{grid-template-columns:minmax(0,300px);gap:24px;margin-top:33.4px}
  .hnc-num__v{font-size:44px;line-height:48px}
  .hnc-num__v sup{font-size:14px}
  .hnc-num__d{margin-top:7.6px}
  .hnc-ref{margin-top:24.8px}
  .hnc-s02 .head{margin-bottom:0}
  .hnc-niches{margin-top:28.2px;gap:12px}
  .hnc-niche{padding:22.3px 22px 21.9px}
  .hnc-niche__kicker{margin-top:16px}
  .card .hnc-niche__src{margin-top:5.3px;line-height:24.2px}   /* макет 390: 20/auto */
  .hnc-fine{margin-top:16.2px}
  .hnc-sum{margin-top:23.5px}
  .hnc-signs{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:33.9px}
  .hnc-sign__h{line-height:21.8px}               /* макет 390: карточка признака 110 */
  .hnc-s05{padding-bottom:24px}
  .hnc-chart{height:126.5px;gap:3px;margin-top:30.5px}
  .hnc-legend{flex-direction:column;gap:8px;margin-top:13px}
  .hnc-rules{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:28px}
  .hnc-rule{padding:22.4px 22.7px 21.5px}        /* макет 390: карточка правила 148 */
  .hnc-rule__h{margin-top:14.7px}
  .card .hnc-rule__d{margin-top:9.4px}
  .hnc-s05__lead{margin-top:19.1px}
  .hnc-sum--lead{margin-top:27.6px}
  /* H2/H1: ширина текстового блока из макета 390 — переносы и число строк как в Figma */
  .hnc-s02 .h2{max-width:321px}
  .hnc-s03__text .h2{max-width:313px}
  .hnc-s04 .h2{max-width:308px}
  .hnc-s05 .h2{max-width:330px}
  .hnc-s03__lead{margin-top:17.7px}
  .hnc-big{margin-top:32.1px}
  .hnc-fine--dark{margin-top:10.3px}
  .hnc-site{margin-top:32.1px;padding:18px 20px 20px}   /* макет 390: мокап 268 */
  .hnc-site__kicker{font-size:12px}
  .hnc-site__line:nth-of-type(2){margin-top:18px}
  .hnc-site__bar{width:30.6%}
}