/* Как это работает — страничные правки поверх styles/components.css.
Общие компоненты (.steps, .ask, .card--tip, .stats, .banner) не трогаем. */
/* H2 секции 02: в макете 1440 серая часть переносится на новую строку целиком
(а не продолжает чёрную на той же строке) — ограничиваем ширину только на Д,
на П/Т natural wrap уже совпадает с макетом без ограничения.
Секция 04 («Методика») так же вёрстается в Figma, но туда вместить нельзя
без
у .muted (запрещено правилом [С] 12.10) — оставлена как natural wrap,
расхождение описано в отчёте. */
@media (min-width:1024px){
.h2--narrow-queries{max-width:930px}
}
/* Та же H2 на Т (390): natural wrap давал 3 строки вместо 4 в макете
(«...клиенты. А не как вы» / «себя описываете.»). 340px — чёрная строка
«Как спрашивают» уже не совпадает слово-в-слово с макетом («ваши» уходит
на вторую строку раньше), но количество строк (4) и общая высота блока —
как в макете; точка переноса — допустимое расхождение по CLAUDE.md. */
@media (max-width:767px){
.h2--narrow-queries{max-width:340px}
}
/* H2 секции 03 на П (768): natural wrap давал 3 строки вместо 4 в макете
(«самому? Да, расскажет о вас. Но» / «не посоветует.»). 632px — внутри
найденного окна 628–635px: чёрная строка «Почему не спросить» ещё не
ломается раньше срока, а перенос восстанавливает 4 строки (слова по
строкам не копия Figma — это допустимо по CLAUDE.md). На Д/Т ограничение
не нужно — там и так 4/2 строки совпадают с макетом естественно. */
@media (min-width:768px) and (max-width:1023px){
.h2--narrow-tip{max-width:632px}
}
/* ——— Сверка 3 (hiw3) ——————————————————————————————————————————————— */
/* Секция 04 «Методика», шаг карточек .stat на Т (390).
Эталон (SVG, точные координаты): линии-разделители .stat на y 3621,5 / 3783,5 /
3946,5 — шаг ровно 162 px. В вёрстке шаг был 169: 2 (линия) + 14 (padding) +
39 (значение) + 6 + 24 (подзаголовок) + 8 (отбивка абзаца) + 48 (абзац) + 28 (gap).
По эталону отбивка абзаца 5, а gap 24 → 2+14+39+6+24+5+48+24 = 162.
.stats/.stat из components.css не меняем — переопределяем только на этой странице. */
@media (max-width:767px){
.section--method .stats{gap:24px}
.section--method .stat p{margin-top:5px}
}
/* Секция 02 «Вопросы клиентов», карточки .ask на Т (390).
Эталон (SVG): карточки 247 px высотой на y 1217 / 1476 / 1735 — шаг 259,
то есть зазор 12 (шаг сетки 390 по CLAUDE.md), а не 16; линия-разделитель
на y 1336 (отбивка от .ask__value 13, а не 16); синий пузырь 1374..1440 —
66 px, то есть поля 12 по вертикали при 2 строках 17/21, а не 11.
24+15+20+13+10+24+13+1+16+13+8+66+24 = 247 — сходится с эталоном. */
@media (max-width:767px){
.ask{padding-top:24px;padding-bottom:24px}
/* Отбивка лида от сетки карточек: эталон — верх текстового блока 2009
при низе сетки 1982, то есть 27 (в components.css 18). Нижнее поле этой
секции в макете 53 (низ текста 2144,3 → граница секции 2197,5). */
.lead--wide{margin-top:27px}
/* Правки 89 (Д-111), P89-37: подрезка 53 снята — итог уехал в плашку,
нижний полуинтерлиньяж срезать не у чего, поле вернулось к --section-y. */
}
/* Итоговая строка секции 04 на Т (390): эталон — верх текстового блока 4112
при низе последней карточки .stat 4084,5, то есть отбивка 29 (в components.css 26). */
@media (max-width:767px){
.section--method .conclusion{margin-top:29px}
}
/* Шаг сетки на Т (390) — 12 px (CLAUDE.md «Шаг сетки 12»): в эталоне карточки
секции 02 стоят с зазором 12 (y 1217/1476/1735) и секции 03 тоже
(y 2448,5 / 2760,5 / 3048,5), в components.css на 390 было 16. */
@media (max-width:767px){
.grid--3{gap:12px}
}
/* Секция 03, карточки .card--tip на Т (390). Эталон: карточки 300 / 276 / 300,
белый .inner на y 2568,5 / 2880,5 / 3168,5, нижнее поле карточки 26.
24+15+14+2стр+19+.inner+14+.small+26 — сходится с эталоном; в components.css
на ≤1023 было .inner 16, .small 15, поле 24 (итого карточка на 4 px короче). */
@media (max-width:767px){
.card--tip .inner{margin-top:19px}
}
/* Нижнее поле секции, последний элемент которой — текстовый блок: в эталоне 390
это 53, а не 56 (секция 02: низ текста 2144,3 → граница 2197,5). Figma режет
нижний полуинтерлиньяж последней строки — отсюда стабильные 3 px. Секция 03
заканчивается карточкой, там поле ровно 56 и оно не переопределяется.
Правки 89 (Д-110): у «Методики» итог уехал в плашку — срезать нечего,
поле вернулось к --section-y, правило на .conclusion снято (риск Р-2). */
/* Карточка .ask — одинаково на всех трёх ширинах (замер по SVG):
линия-разделитель отбита от .ask__value на 13 (а не 16), синий пузырь при
двух строках 17/21 — 66 px, то есть поля 12 по вертикали (а не 11).
Высота карточки сходится с эталоном: 390 — 247, 1440 — 262. */
.ask hr{margin-top:13px}
.ask .micro + .bubble-q{padding-top:12px;padding-bottom:12px}
/* ——— Д (1024+) ——————————————————————————————————————————————————— */
/* Секция 03, .card--tip: в макете 1440 подзаголовок карточки 24/30, а не 20/26
(замер по PNG эталона: строка «Знать вас и советовать вас —» 359×19 px, в
вёрстке 299×16; верх блока 1939 + 2×30 = 1999 + отбивка 20 = белый .inner
на 2019 — ровно как в эталоне). Плюс .small отбит на 18, низ карточки 34 —
высота карточки 366 как в макете (было 357). .title в components.css
не трогаем: правило только для этой страницы. */
@media (min-width:1024px){
.card--tip .title{font-size:24px;line-height:30px}
}
/* Лид секции 02 на Д: эталон — верх текстового блока 1405 при низе сетки
карточек 1365, то есть отбивка 40 (в components.css 24); нижнее поле секции
в эталоне 101 (низ текста 1469 → граница секции 1569,5) — тот же срез
нижнего полуинтерлиньяжа, что и на 390. */
@media (min-width:1024px){
.lead--wide{margin-top:40px}
/* Правки 89 (Д-111), P89-37: подрезка 101 снята (см. комментарий на 390). */
}
/* Секция 04 на Д: по эталону линии-разделители .stat стоят на 2650,5 (верх
линии) — отбивка от H2 46,5, а не 42; подзаголовок карточки отбит на 6
(а не 8), итоговая строка — на 43 (а не 39). Высота секции сходится:
104+21+16+120+46+2+20+53+6+26+12+48+43+60+104 = 681 (эталон 681,5). */
@media (min-width:1024px){
.stats{margin-top:46px}
.stat .title{margin-top:6px}
.conclusion{margin-top:43px}
}
/* ——— П (768–1023) ———————————————————————————————————————————————— */
/* H2 секции 04 на П: в макете 3 строки — «Как мы проверяем.» /
«Разбираем 120 ответов» / «нейросетей.». При полной ширине 688 строки
слипаются в 2. Окно, где разбивка совпадает с Figma слово-в-слово, —
480–620 px (проверено перебором); берём 560 с запасом. */
@media (min-width:768px) and (max-width:1023px){
.h2--narrow-method{max-width:560px}
}
/* Лид секции 02 на П: эталон — верх текстового блока 1758,8 при низе сетки
карточек 1733 (отбивка 26, в components.css 20), низ текста 1878,8 →
граница секции 1956,5 (нижнее поле 78 вместо 80 — тот же срез нижнего
полуинтерлиньяжа, что на 390 и 1440). */
@media (min-width:768px) and (max-width:1023px){
.lead--wide{margin-top:26px}
/* Правки 89 (Д-111), P89-37: подрезка 78 снята (см. комментарий на 390). */
}
/* ——— Правки Сергея из docx 13.10 (наряд «Дизайн-18») —————————————————— */
/* Источник: _incoming/2026-10-13_pages/Правки_страницы_Как_это_работает.docx.
Все значения — токены tokens.css: F5F5F7 = --bg-soft, 1D1D1F = --ink,
0A3FA8 = --blue-ink. components.css/tokens.css не трогаем (FROZEN). */
/* Правка 2. Кружки шагов: синяя заливка → серая, цифры → чёрные 1D1D1F.
Правки 89 (Д-110): секция стала серой, кружки по эталону image3/4/5 — белые
(отменяет серую заливку F5F5F7 этой правки, цифры остаются чёрными). */
.steps .step__num{background:var(--bg);color:var(--ink)}
/* Правка 3. Плашка «Обычный путь»: текст и ссылка — синим 0A3FA8
(на этой странице вместо --navy из общего решения по .banner).
Правки 89 (Д-110): по эталону image3/4/5 плашка белая, текст чёрный
(отменяет синий текст этой правки); «Цены →» остаётся 0A3FA8. */
.banner{background:var(--bg);color:var(--ink)}
.banner .banner__link{color:var(--blue-ink)}
/* Правка 5. Пузырь «Клиент спрашивает»: 17/21 Regular, заливка F5F5F7,
форма чата — нижний левый угол 6 px, как в эталонном SVG
(path пузыря 1440: M166 1269 … H154 … 148 1329 — радиусы 18/18/18/6). */
.ask p.bubble-q{background:var(--bg-soft);color:var(--ink);font-weight:400;
border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) 6px}
/* Правки 7 и 8. В карточках «Экспертиза GeoWise» убран серый абзац под белым
блоком; белый блок больше не держит фиксированную высоту 128 (Д) — он
растягивается до низа карточки, поэтому низ белых блоков и низ карточек
выровнены на всех трёх ширинах, а пустого места внутри блока остаётся
минимум. Нижнее поле карточки — базовое --card-py (32 / 24 / 24). */
.card--tip .inner{flex:1 1 auto;min-height:0}
/* ——— Правки 89 из docx 23.10 (наряд «Дизайн-110») ————————————————————— */
/* Источник: _incoming/2026-10-23_pravki_89/Правки89.docx, эталоны image2
(«Методика») и image3/4/5 («Четыре шага»). Значения — токены tokens.css;
components.css/tokens.css не трогаем (FROZEN). Секции адресуются именными
классами .section--method / .section--steps, чтобы смена фонов не задела
«Вопросы клиентов» и «Экспертизу» (риск Р-1 разведки). */
/* P89-7. «Методика» — белый фон: класс section--soft с секции снят (HTML). */
/* P89-8. Линии над карточками: были 2 px --ink, по эталону — тонкие серые 1 px.
Цвет снят с image2: на всех трёх кадрах блок чернил линии после пересчёта
масштаба даёт #D0…#D4 — это --line-2 (#D2D2D7), а не --line (#E8E8ED,
он дал бы вдвое более светлую линию). Потерянный 1 px высоты возвращаем
в padding-top, чтобы ритм карточек не поехал. */
.section--method .stat{border-top:1px solid var(--line-2);padding-top:21px}
@media (max-width:1023px){.section--method .stat{padding-top:15px}}
/* P89-9. Цифры «10 нейросетей / 12 вопросов / Дважды»: --fs-stat (44/27/32)
→ --fs-title-xl (28/24/22), как в выносках image2. */
.section--method .stat__value{font-size:var(--fs-title-xl);line-height:var(--lh-title-xl)}
/* P89-10. Подзаголовки карточек: --fs-title (20/19/18) → body 17/24, жирные
(жирность у .title уже 700). */
.section--method .stat .title{font-size:var(--fs-body);line-height:var(--lh-body)}
/* P89-12, P89-13. Итог — 17/24 жирный чёрный в серой плашке шириной с контейнер.
Замер по image2: плашка #F5F5F7, ширина ровно контейнер (1200 / 688 / 350),
высота ПК 89 = 24 (строка) + 2×32 — то есть поля --card-py/--card-px,
радиус --r-md. Жирность и цвет --ink у .conclusion уже базовые. */
.section--method .conclusion{
max-width:none;
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)}
/* P89-18. «Четыре шага»: подписи шагов — серые вместо синих. */
.section--steps .label{color:var(--gray)}
/* ——— Правки 89 из docx 23.10 (наряд «Дизайн-111») ————————————————————— */
/* Источник: _incoming/2026-10-23_pravki_89/Правки89.docx, эталоны image6/7/8
(«Экспертиза GeoWise») и image9/10/11 («Вопросы клиентов»). Секции
адресуются именными классами .section--expert / .section--questions —
общий .label в components.css не трогаем (FROZEN, требование докса). */
/* P89-25, P89-26. «Экспертиза GeoWise»: подписи карточек
(«УЗНАВАЕМОСТЬ ≠ РЕКОМЕНДАЦИИ» и др.) — серые --gray #6E6E73 вместо синих.
Фон секции белый и надзаголовок синий остаются как были. */
.section--expert .card .label{color:var(--gray)}
/* P89-30, P89-31. «Вопросы клиентов»: «ВЫБОР», «ЦЕНА», «ГДЕ КУПИТЬ» — чёрные
--ink #1D1D1F вместо синих. «ВЫ ПИШЕТЕ» / «КЛИЕНТ СПРАШИВАЕТ» — это .micro,
они остаются серыми #A1A1A6, правило их не достаёт. */
.section--questions .ask .label{color:var(--ink)}
/* P89-33, P89-34. Итог «Смотрим, в каких ответах…» — в белой плашке шириной
с контейнер, как итог «Методики» (только там плашка серая на белом фоне,
здесь белая на сером): фон --bg, радиус --r-md (28/24/24), поля
--card-py/--card-px (32×30 / 24×22). Текст — 17/24 вместо --fs-lead
(22/32 · 20/30 · 18/27); жирность и чёрный цвет даёт в разметке
(.lead b{color:var(--ink)} из components.css). */
.section--questions .lead--wide{
background:var(--bg);
border-radius:var(--r-md);
padding:var(--card-py) var(--card-px);
font-size:var(--fs-body);line-height:var(--lh-body)}