/* Длинная главная нового зеркала (103 домена). Цвета и шрифты — переменные
   из assets/brand.css домена (:root), здесь только раскладка. Шаблон:
   research/mirrors103/tpl/home.css, собирается build_tenant.py. */

.nm-home { background: var(--bg); color: var(--text); font-family: var(--font-body); }
.nm-home .wrap--read { max-width: var(--read, 760px); margin-inline: auto; }
.nm-home h1, .nm-home h2, .nm-home h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.01em; }
.nm-home h2 { font-size: var(--step-2); margin: 0 0 .6em; }
.nm-home h3 { font-size: var(--step-1); margin: 1.4em 0 .4em; }
.nm-home p, .nm-home li { font-size: var(--step-0); line-height: 1.65; }
.nm-home p { margin: 0 0 1em; }

/* первый экран: текст + поле чата слева, картинка справа; на телефоне картинка под полем */
.nm-hero { padding: clamp(28px, 6vw, 80px) 0 clamp(32px, 5vw, 64px); }
.nm-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
/* Элементы сетки не шире колонки: ряд подсказок под полем иначе распирает страницу на телефоне. */
.nm-hero__in > *, .nm-sec__in > * { min-width: 0; }
.nm-home .entry__chips { flex-wrap: wrap; overflow: visible; }
@media (min-width: 960px) { .nm-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.nm-hero h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.4rem); margin: .2em 0 .35em; overflow-wrap: break-word; hyphens: auto; }
.nm-hero__sub { font-size: var(--step-1); color: var(--muted); max-width: 46ch; }
.nm-badge { display: inline-block; font-size: var(--step--1); font-weight: 600; color: var(--accent-text); background: var(--surface-2);
  border-radius: 999px; padding: .35em .9em; margin: 0; }
.nm-hero__art { margin: 0; }
.nm-hero__art img, .nm-sec__art img, .nm-gallery img { display: block; width: 100%; height: auto; border-radius: var(--r-lg, 12px); }
.nm-home .entry { margin-top: 22px; max-width: 640px; }

/* оглавление: короткий список якорей, на телефоне в одну колонку */
.nm-toc { padding: 8px var(--gutter) 24px; }
.nm-toc ol { columns: 2 260px; column-gap: 32px; margin: 0; padding-inline-start: 1.2em; }
.nm-toc li { break-inside: avoid; margin: 0 0 .35em; font-size: var(--step--1); }
.nm-toc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }

.nm-intro { padding: 8px 0 16px; }
.nm-intro p:first-child { font-size: var(--step-1); }

/* разделы: текст + картинка, через один меняются местами и фон */
.nm-sec { padding: clamp(40px, 7vw, 88px) 0; }
.nm-sec--alt { background: var(--bg-2, var(--surface-2)); }
.nm-sec__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) {
  .nm-sec__in--img { grid-template-columns: 1.2fr .8fr; }
  .nm-sec--alt .nm-sec__in--img { grid-template-columns: .8fr 1.2fr; }
  .nm-sec--alt .nm-sec__in--img .nm-sec__art { order: -1; }
  .nm-sec__art { position: sticky; top: calc(var(--head-h, 64px) + 24px); }
}
.nm-sec__text { max-width: 720px; }
.nm-sec__art { margin: 0; }
.nm-list { padding-inline-start: 1.2em; margin: 0 0 1em; }
.nm-list li { margin: .3em 0; }
.nm-list li::marker { color: var(--accent); }

.nm-cta-mid { padding: 8px 0 32px; text-align: center; }

.nm-howto { padding: clamp(40px, 7vw, 88px) 0; }
.nm-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.nm-steps li { counter-increment: s; position: relative; padding-inline-start: 56px; margin: 0 0 22px; }
.nm-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink, #fff); font-weight: 700; display: grid; place-items: center; }
.nm-steps h3 { margin: 6px 0 4px; }

.nm-gallery { padding: 0 0 clamp(40px, 6vw, 72px); }
.nm-gallery__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.nm-gallery figure { margin: 0; }

.nm-faq { padding: clamp(40px, 7vw, 88px) 0; }
.nm-cta { padding: clamp(48px, 8vw, 96px) 0; text-align: center; background: var(--surface-2); }
.nm-cta h2 { margin-bottom: .8em; }

.nm-country { text-align: center; font-size: var(--step--1); color: var(--muted); margin: 0; padding: 18px var(--gutter) 6px; }

@media (max-width: 640px) {
  .nm-hero h1 { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.6rem); }
  .nm-home .btn--lg { width: 100%; }
}

/* Мобильный аудит 03.11: строки оглавления — цель касания ≥40px, звёздочка у h1 — тоже. */
@media (max-width: 640px) {
  .nm-toc li { margin: 0; }
  .nm-toc a { display: inline-block; padding: 9px 0; min-height: 40px; }
  .nm-home .nt-star { display: inline-block; min-width: 24px; min-height: 40px; text-align: center; }
}