/* Примадок — production stylesheet
Design tokens + reusable components. No inline styles, no external fonts/CDNs. */
:root{
--bg:#FCFBF9; --surface:#fff; --surface-2:#F5F2EC;
/* Контраст текста поднят 24.09.2026: серый по-прежнему отличается от чёрного, но читается
без усилия. Было #4f4b44/#655f57/#736e66 — на светлом фоне это выглядело выцветшим. */
--ink:#1C1B19; --muted:#3a352f; --subtle:#474038; --faint:#5b544b;
--line:#E7E3DC; --line-2:#F0EBE5;
/* Акцент = синий из логотипа (цвет точки #3b4ee0). Прежний тёмно-синий #1F3A5F выглядел мрачно.
--accent-ink — затемнённый вариант для hover/active. Белый текст на #3b4ee0 = контраст 6.3:1 (AA). */
--accent:#3b4ee0; --accent-ink:#2f3eb3;
--tint:#EEF1F6; --tint-2:#E7EDF4; --tint-line:#DCE3EC; --tint-soft:#F5F8FC;
--green:#1F8A5B; --green-bg:#E7F4EE; --amber:#8a6d2a; --amber-bg:#F5EFE0;
/* единый радиус закруглений по всему сайту — 7px (кроме кругов 50%: аватары/точки/номера шагов) */
--radius:7px; --radius-lg:7px; --radius-pill:7px;
--maxw:1360px; --maxw-mid:860px; --maxw-read:760px;
/* Одна сетка на весь сайт (14.09.2026). Было две: шапка жила в контейнере 1360px по центру,
а страница с левой колонкой растягивалась до края экрана. На мониторе 2000px это давало
360px пустоты слева, контент впритык к правому краю и расхождение правых краёв шапки и
страницы на 340px — ровно то, что читается как «всё разъезжается».
--shell = 1280 (контентная колонка, столько же, сколько на страницах без сайдбара)
+ 228 (левая колонка) + 32 (зазор) + 2x40 (поля) = 1620.
--gut — боковое поле оболочки. Живёт переменной, а не числом, потому что его обязаны
брать ОБА контейнера: и .wrap шапки/подвала, и .pgshell страницы, иначе логотип и левый
край сайдбара встают на разные вертикали. На 1200-1499 поле уменьшено: там каждый пиксель
ширины у контента на счету, а на полях он дешевле всего. */
--shell:1620px; --gut:40px;
--serif:Georgia,"Times New Roman",serif;
--danger:#b3261e;
--sans:'Onest',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--shadow-card:0 16px 34px -22px rgba(31,58,95,.34);
--shadow-pop:0 26px 44px -26px rgba(0,0,0,.28);
/* Расширенная палитра (12.09.2026). Причина: «глаза разбегаются» — страница набрана одним
акцентом и одним серым, поэтому блоки разного смысла выглядят одинаково и взгляду не за что
зацепиться. Здесь не радуга, а шесть смысловых ролей: каждая — цвет для подписи/иконки и
мягкая подложка под неё. Брать только по смыслу, а не для украшения.
Значения согласованы с макетом Арсения (акцент #3a41e3, зелёный «бесплатно» #136a4f,
тёплые подложки #faf9f6 / #f0eeea). */
--c-free:#136A4F; --c-free-bg:#E7F2EC; /* бесплатно: бланк, образец, просмотр */
--c-pay:#3B4EE0; --c-pay-bg:#EEF0FE; /* платное действие, цена, основной CTA */
--c-info:#1F6F8B; --c-info-bg:#E8F2F6; /* справочное: календари, справочники, нормы */
--c-doc:#6E3FA8; --c-doc-bg:#F2ECFA; /* документ и шаблон: виды, комплекты */
--c-warn:#8A6D2A; --c-warn-bg:#F7F1E1; /* сроки, риски, «утратило силу» */
--c-law:#7A4A2B; --c-law-bg:#F6EDE6; /* нормы права, ссылки на статьи */
/* Тёплая бумага под крупные блоки — чтобы белое на белом не сливалось */
--paper:#FAF9F6; --paper-2:#F0EEEA; --paper-line:#E6E4DE;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
main{background:#fff;flex:1 0 auto} /* §6.3: растягиваем контент, чтобы футер прижимался к низу */
textarea,input,select,button{font-family:inherit}
/* Единое базовое оформление ВСЕХ полей ввода. :where() = нулевая специфичность, поэтому любые
классовые правила (.search input, .field input, инлайн-стили) легко переопределяют базу. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]),textarea,select){padding:10px 12px;border:1px solid #D8DEE7;border-radius:7px;font-size:15px;line-height:1.45;outline:none;color:var(--ink);background:var(--surface);transition:border-color .12s,box-shadow .12s;max-width:100%}
:where(textarea){min-height:100px;resize:vertical}
:where(select){appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select):hover{border-color:#B7C0CC}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
:where(input,textarea)::placeholder{color:var(--subtle)}
/* §1.8: страховка от горизонтального «гуляния» страницы на мобиле. clip (не hidden) — не ломает
position:sticky (липкий предпросмотр/CTA). Плюс никакой блок не должен вылезать за вьюпорт. */
/* Фон страницы белый, как и у main. Раньше здесь стоял бежевый --bg, и он был виден ровно в
одном месте — в зазоре между контентом и подвалом: полоса цвета, которого больше нигде на
странице нет, читалась как след старой вёрстки. */
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:clip;display:flex;flex-direction:column;min-height:100vh}
img,svg,video,canvas,table,pre{max-width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .14s ease,border-color .14s ease,background .14s ease,box-shadow .15s ease,transform .15s ease}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:700}
p{margin:0}
ul,ol{margin:0}
/* icons */
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;vertical-align:middle;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:16px;height:16px}
.ic-lg{width:24px;height:24px}
.ic-accent{color:var(--accent)}
/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* Шапка, подвал, префутер и панель каталога — полосы во всю ширину окна, ширину задаёт их
ВНУТРЕННИЙ контейнер. Он один и тот же, что у оболочки страницы с сайдбаром (sidebar.css),
поэтому логотип, левый край колонки и правые края всех блоков стоят на одних вертикалях. */
.site-header>.wrap,.hdr-panel>.wrap,.prefooter-ask>.wrap,.site-footer>.wrap{max-width:var(--shell)}
/* Ниже 1500px оболочке физически не хватает ширины: 1280 контента + 188 колонки + зазор уже
больше самого экрана. Поле — единственное место, где можно занять, не отнимая у текста. */
@media(max-width:1499px){:root{--gut:28px}}
.wrap-narrow{max-width:var(--maxw-read)}
.read{max-width:var(--maxw-read);margin:0 auto;padding:0 40px}
.section{padding:52px 0}
.section-sm{padding:36px 0}
.stack-lg{margin-top:44px}
.divider-top{border-top:1px solid var(--line)}
.divider-bottom{border-bottom:1px solid var(--line)}
/* typography */
.serif{font-family:var(--serif)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--subtle)}
.h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1.08;letter-spacing:-.01em}
/* Единый заголовок страницы (карточка документа, ситуация, комплект, скачивание…).
Один размер по всему сайту — вместо разнобоя inline-clamp'ов и геройского .h1 (§1.2). */
.page-title{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.14;letter-spacing:-.01em;margin:0}
/* Отступ под заголовком секции — в самом .h2, а не утилитой в вёрстке.
Половина секций писала `class="h2 mb-14"`, половина — голый `class="h2"`, и там,
где утилиту забыли (в том числе «Частые вопросы»), текст лип к заголовку вплотную.
Утилиты .mb-* и .faq-h объявлены ниже по файлу и по-прежнему перебивают это правило,
так что специально заданные отступы не ломаются. Сбрасываем только там, где заголовок
стоит в одной строке с чем-то ещё (flex-ряд «заголовок ↔ ссылка»). */
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,30px);line-height:1.15;letter-spacing:-.01em;margin-bottom:22px}
.row-between .h2,.ed-sh .h2,.ed-sec-h .h2,.sec-head .h2{margin-bottom:0}
/* Та же болезнь, но у заголовков БЕЗ класса: `h1,h2,h3,h4{margin:0}` в основе обнуляет всё,
и там, где в вёрстке стоит голый
или
(блок «Расскажите, какой документ
нужен», «Частые вопросы» в ситуациях и категориях), текст лип к заголовку вплотную.
Правим по факту отсутствия класса — то есть ровно забытые случаи, не трогая ни одного
заголовка, которому отступ задан осознанно. Ряды «заголовок ↔ ссылка» исключены: там
заголовок стоит в одной строке с соседом и отступ снизу ломает выравнивание. */
h2:not([class]),h3:not([class]){margin-bottom:18px}
.row-between h2:not([class]),.ed-sh h2:not([class]),.ed-sec-h h2:not([class]),.sec-head h2:not([class]),
.row-between h3:not([class]),.ed-sh h3:not([class]),.sec-head h3:not([class]){margin-bottom:0}
.h3{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.25}
.lead{font-size:18px;line-height:1.55;color:var(--muted)}
.muted{color:var(--muted)}
.subtle{color:var(--subtle)}
.small{font-size:15px}
.accent{color:var(--accent)}
.italic-accent{font-style:italic;font-weight:400;color:var(--accent)}
.center{text-align:center}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.header-bar{display:flex;align-items:center;justify-content:space-between;height:70px}
/* Дефицит ширины в шапке съедает ТОЛЬКО поиск. Почему это правило нужно явно:
контентная колонка зафиксирована (--maxw 1360 минус 2×40 padding = 1280px на ЛЮБОМ
мониторе шире 1360), а ступени сжатия ниже по файлу считают ширину ОКНА. На 1440/1920
ни одна ступень не срабатывает, при этом строке шапки при показанных «Отраслях» и
ссылках из настроек нужно ~1300-1410px. Раньше дефицит делился между .header-left и
.header-search пропорционально их базам, .header-left сжимался, а внутри него пункты
меню — однословные и без nowrap — не переносились, а вылезали за свою коробку и
уезжали под поле поиска (скрин от 26.07.2026). Делаем левый блок жёстким: поиск
ужимается с 380 до ~250px и остаётся рабочим, меню не рвётся. */
.header-left{display:flex;align-items:center;gap:26px;flex:0 0 auto}
/* flex:none обязателен: без него логотип — обычный сжимаемый flex-элемент и принимает на себя
ВЕСЬ дефицит ширины строки. На 1280 он ужимался до 79px, на 1180 — до 14px, на 1024 — до нуля
(прод, 25.07.2026). Дефицит должен съедать поиск и меню, а не бренд. */
.logo{display:flex;align-items:center;gap:3px;font-family:var(--serif);font-weight:700;font-size:21px;flex:0 0 auto}
.logo-img{height:26px;width:auto;display:block;flex:none}
.logo .ic{color:var(--accent);width:20px;height:20px;stroke-width:2.6}
/* подчёркивание логотипа убрано по требованию бренда */
.nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:600;color:#3a352f;flex:none}
.nav a,.nav button{color:inherit}
/* white-space:nowrap — страховка второго уровня: даже если ширины не хватит, пункт
останется целым словом, а не разъедется на две строки внутри 70px-строки шапки. */
.navbtn{display:flex;align-items:center;gap:5px;background:none;border:none;font:inherit;font-weight:600;padding:0;cursor:pointer;flex:none;white-space:nowrap}
.nav a{flex:none;white-space:nowrap}
.navbtn .ic{width:14px;height:14px;stroke-width:2.2}
.nav a:hover,.navbtn:hover{color:var(--accent)}
.navbtn[aria-expanded="true"]{color:var(--accent)}
/* Правый блок тоже жёсткий: иначе подпись главного CTA («Составить документ») ужимается
и переносится в две строки внутри 70px-строки. */
.header-right{display:flex;align-items:center;gap:14px;flex:none}
.header-right .link-strong,.header-right .header-cta{white-space:nowrap}
.icon-btn{width:38px;height:38px;border:1px solid #E0DBD2;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.link-strong{font-size:14.5px;font-weight:600;color:var(--accent)}
.burger{display:none;background:none;border:none;color:var(--muted);cursor:pointer;padding:6px}
/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-pop);z-index:40}
.mega[hidden]{display:none}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:26px 40px}
.mega-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:34px}
.mega-title{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.mega-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.mega-cat{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:3px 0}
.mega-cat .ic{width:17px;height:17px;color:var(--accent);stroke-width:1.6}
.mega-cat .count{margin-left:auto;color:var(--faint);font-weight:500}
.mega-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:700;color:var(--accent)}
.mega-more .ic{width:15px;height:15px;stroke-width:2.2}
.mega-side{background:var(--surface-2);border-radius:7px;padding:20px}
.mega-side-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.mega-side-row:last-of-type{border-bottom:none}
.mega-side-row .price{color:var(--accent);font-weight:700}
.mega-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mega-tiles.cols-3{grid-template-columns:repeat(3,1fr)}
.mega-tile{display:flex;align-items:center;gap:11px;border-radius:7px;padding:12px 13px;background:#F8F6F1;font-size:14px;font-weight:600}
.mega-tile:hover{background:var(--tint)}
.mega-tile.bordered{background:var(--surface);border:1px solid var(--line)}
.mega-tile.bordered:hover{border-color:var(--accent);background:var(--surface)}
/* icon chip */
.ichip{width:38px;height:38px;border-radius:7px;background:var(--tint);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.ichip .ic{stroke-width:1.7}
.ichip-lg{width:48px;height:48px;border-radius:7px}
.ichip-round{border-radius:50%}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;border-radius:7px;padding:13px 22px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn .ic{width:17px;height:17px;stroke-width:2}
.btn-sm{font-size:14px;padding:10px 16px;border-radius:7px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-outline{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.btn-outline:hover{background:var(--tint)}
.btn-soft{background:var(--tint);color:var(--accent)}
.btn-soft:hover{background:var(--tint-2)}
.btn-block{display:flex;width:100%}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent);background:var(--tint-soft)}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
/* §4.7: sticky-алфавит словаря + кнопка «наверх» */
.alpha-index{position:sticky;top:72px;z-index:20;display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:7px}
.alpha-index a{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;border-radius:7px}
.alpha-index a:hover{background:var(--tint)}
.to-top{position:fixed;right:18px;bottom:18px;z-index:40;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:50%;box-shadow:0 6px 18px rgba(20,18,15,.12);color:var(--accent)}
.to-top:hover{border-color:var(--accent)}
/* §2.2: свёрнутое облако видов на хабе — ~2 ряда + затухание, «показать все» снимает класс */
.chips-collapsed{max-height:150px;overflow:hidden;position:relative}
.chips-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.chip{font-size:14px;font-weight:500;padding:8px 15px;border:1px solid #D8DEE7;border-radius:7px;color:var(--muted);background:var(--surface)}
/* Чип-документ: образцы на первом экране главной. Серые названия в 500-м начертании
в один ряд читались как хлебные крошки, а не как список документов — глаз пробегал
мимо. Иконка листа слева сразу говорит, что за ссылкой документ, а не раздел. */
.chip-doc{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600}
.chip-doc .ic{width:15px;height:15px;flex:none;color:var(--accent);stroke-width:1.6}
.chip-doc:hover .ic{color:var(--accent)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip-on{border-color:var(--accent);background:var(--accent);color:#fff}
.chip-soft{border:none;background:var(--tint);color:var(--accent);font-weight:600}
/* badges */
.badge{font-size:12px;font-weight:700;padding:3px 8px;border-radius:7px}
.badge-accent{color:var(--accent);background:var(--tint)}
.badge-green{color:var(--green);background:var(--green-bg)}
.badge-amber{color:var(--amber);background:var(--amber-bg)}
.badge-pill{border-radius:var(--radius-pill);padding:4px 11px}
.badge-hit{position:absolute;top:-11px;left:20px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px}
/* segmented control */
.seg{display:inline-flex;background:#F1EEE8;border-radius:7px;padding:3px;font-size:14px;font-weight:600}
.seg span,.seg button{padding:8px 15px;border-radius:7px;color:var(--muted);border:none;background:none;font:inherit;cursor:pointer}
.seg .active{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.seg.on-white{background:var(--surface);border:1px solid var(--tint-line)}
/* Тумблер период на тёмной (accent) карточке пейвола: полупрозрачный фон, белый текст */
.seg.seg-onaccent{background:rgba(255,255,255,.14);width:100%}
.seg.seg-onaccent button{color:#eaf0f7;flex:1;padding:7px 10px;font-size:13px}
.seg.seg-onaccent .active{background:#fff;color:var(--accent)}
/* stat row */
.stats{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--subtle)}
.stat{display:flex;align-items:center;gap:7px}
/* Hero-статы. Было: четыре числа в 800-м начертании, вплотную друг к другу — полоса
читалась как рекламный баннер, а не как факты о каталоге. Стало: начертание 600,
серифное (числа — часть той же типографики, что и заголовок), размер крупнее,
между группами — тонкие разделители вместо голого зазора.
Тонких разделителей оказалось мало: числа разной длины («3 177», «★ 4.8») стояли на
разном расстоянии от своих подписей, строка расползалась по ширине экрана и читалась
одной кашей — «3 177 документов 154 раздела 24 877 раз собрано». Стало: четыре
одинаковых блока в ряд, у каждого своя рамка, — видно, что это четыре разных факта. */
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
max-width:720px;margin:30px auto 0}
.hero-stats .hs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
padding:15px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.hero-stats .hs-n{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1}
.hero-stats .hs-l{font-size:13px;color:var(--subtle);letter-spacing:.01em;text-align:center;line-height:1.25}
@media(max-width:760px){.hero-stats{gap:10px}.hero-stats .hs{padding:13px 6px}.hero-stats .hs-n{font-size:25px}}
@media(max-width:560px){
.hero-stats{grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}
.hero-stats .hs{padding:12px 6px}
.hero-stats .hs-n{font-size:23px}
.hero-stats .hs-l{font-size:12.5px}
}
/* «Почему нам доверяют» — карточки крупнее тонкой полосы */
.why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.why>.ic{width:26px;height:26px;color:var(--accent);flex:none}
.why b{display:block;font-size:16px;color:var(--ink);margin-bottom:3px}
.why span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:760px){.why-row{grid-template-columns:1fr}}
/* Заголовки в тёмной полосе преимуществ — крупнее (были «страшные») */
.band-dark .feature h3{font-size:21px;margin-bottom:6px}
.band-dark .feature p{font-size:15.5px;line-height:1.55}
.stat .ic{width:16px;height:16px;color:var(--accent);stroke-width:1.7}
/* hero */
.hero{border-bottom:1px solid var(--tint-line);
background:radial-gradient(circle at 1px 1px, rgba(31,58,95,.055) 1px, transparent 0) 0 0/22px 22px,
linear-gradient(180deg,#E8EDF5 0%,#F3F6FB 100%)}
/* padding-block, а не сокращённая запись: сокращённая обнуляла боковые поля, и на мобильном
заголовок первого экрана лип к краям экрана (правило .wrap ниже по файлу до него не доходило).
Боковое поле герою даёт .wrap — на десктопе внутри оболочки его берёт на себя сама полоса. */
.hero-inner{padding-block:60px 56px}
.hero .btn-row{display:flex;gap:12px;flex-wrap:wrap}
/* search */
.search{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius);padding:8px 8px 8px 18px;box-shadow:0 14px 34px -20px rgba(31,58,95,.5)}
.search .ic{color:var(--accent);width:20px;height:20px}
.search input{flex:1;border:none;outline:none;font:16px var(--sans);background:transparent;color:var(--ink);min-width:0}
.search .btn{padding:11px 22px;font-size:15px}
/* cards & grids */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px}
.card-hover:hover{border-color:var(--accent);box-shadow:var(--shadow-card)}
/* card-link: самостоятельная карточка-ссылка (форматы скачивания, плитки разделов/списков) */
.card-link{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px}
.card-link:hover{border-color:var(--accent);box-shadow:var(--shadow-card)}
.card-link .row-title{display:block;font-weight:700;margin-bottom:2px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.card-sel{border:1.5px solid var(--accent)}
.card .card-title{font-size:16px;font-weight:700}
.card .card-desc{font-size:14px;color:var(--muted);line-height:1.5;margin-top:6px}
.card-article{padding:26px 28px;display:flex;flex-direction:column;transition:box-shadow .18s ease,border-color .16s ease}
.card-article:hover{box-shadow:0 10px 26px -20px rgba(28,27,25,.26)}
.card-article .card-cat{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--tint);padding:5px 11px;border-radius:7px;margin-bottom:16px}
.card-article .card-title{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.18;letter-spacing:-.015em;color:var(--ink)}
.card-article:hover .card-title{color:var(--accent)}
.card-article .card-excerpt{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-article .card-meta{margin-top:auto;padding-top:18px;font-size:13px;color:var(--faint)}
/* журнал: рубрикатор */
.rubricator{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
/* журнал: верхний блок — крупная «геро» + колонка «Свежее» */
.journal-top{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:stretch;margin-bottom:8px}
.journal-hero{display:flex;flex-direction:column;position:relative;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:32px 34px;transition:border-color .15s,box-shadow .18s}
.journal-hero:hover{border-color:var(--tint-line);box-shadow:0 10px 26px -20px rgba(28,27,25,.26)}
.journal-hero .jh-cat{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--tint);padding:5px 11px;border-radius:7px}
.journal-hero .jh-title{font-family:var(--serif);font-weight:700;font-size:clamp(29px,3.4vw,44px);line-height:1.05;letter-spacing:-.02em;margin:16px 0 12px;max-width:680px;color:var(--ink)}
.journal-hero .jh-excerpt{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:600px;margin:0}
.journal-hero .jh-meta{font-size:13.5px;color:var(--faint);margin-top:16px}
.journal-hero .jh-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:22px;font-weight:700;color:var(--accent);transition:gap .15s ease}
.journal-hero .jh-more .ic{width:16px;height:16px;stroke-width:2.2}
.journal-hero:hover .jh-more{gap:11px}
.journal-side{border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:22px 24px;display:flex;flex-direction:column}
.journal-side .js-title{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.journal-side .js-item{display:block;padding:11px 0}
.journal-side .js-item:last-child{border-bottom:none}
.journal-side .js-cat{display:block;font-size:12px;font-weight:700;color:var(--accent);margin-bottom:3px}
.journal-side .js-t{display:block;font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.journal-side .js-item:hover .js-t{color:var(--accent)}
.journal-side .js-date{display:block;font-size:13px;color:var(--faint);margin-top:4px}
/* журнал: секции-разделы (материалы из раздела → раздел с пагинацией) */
.journal-section{margin-top:34px}
.journal-section .js-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.journal-section .js-all{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}
.journal-section .js-all .ic{width:15px;height:15px;stroke-width:2.2}
@media(max-width:860px){.journal-top{grid-template-columns:1fr}}
@media(max-width:640px){.journal-hero{padding:26px 22px}}
/* tiles (situations) */
/* §3.4: «лист» документа на странице образца — белый лист с тенью на приглушённой подложке, Times */
.doc-sheet-wrap{background:#f1efe9;border:1px solid var(--line);border-radius:7px;padding:22px}
/* Лист документа — НАСТОЯЩИЙ A4, а не «примерно похоже».
Раньше он был 760px шириной при кегле 15px и межстрочном 1.65, тогда как файл собирается по
ГОСТ Р 7.0.97: 210 мм, поля 20/15 мм, Times 12 pt, интерлиньяж 1.15. То есть на экране в
строку влезало заметно больше слов, а буквы были мельче — и в скачанном PDF человек видел
«увеличенный шрифт», хотя кегль в файле ровно тот, что и был обещан. Увеличился не шрифт,
уменьшилась страница.
Размеры заданы в мм и пунктах — теми же числами, что в DocumentComposer::printCss(), чтобы
правка в одном месте была видна во втором. */
.doc-sheet{max-width:210mm;margin:0 auto;background:#fff;color:#1f1d1a;box-shadow:0 4px 18px rgba(20,18,15,.10);
border:1px solid #e7e3db;border-radius:7px;padding:18mm 15mm 18mm 20mm;font-family:var(--serif);font-size:12pt;line-height:1.15}
.doc-sheet .doc-title,.doc-sheet h1,.doc-sheet h2{font-family:var(--serif);text-align:center;font-weight:700}
.doc-sheet .doc-h{font-weight:700;margin:10pt 0 3pt}
.doc-sheet .doc-body{margin:0 0 8pt;color:#2a2723}
.doc-sheet .doc-body-locked{color:var(--muted,#6b6862);font-style:italic}
.doc-sheet .doc-lock{font-style:normal}
/* Альбомный лист (журнал, табель, график) — те же 297×210 мм и те же поля, что уйдут в файл.
На узком экране он просто сжимается по max-width, как и книжный. */
.doc-sheet.is-land{max-width:297mm;padding:12mm 15mm 12mm 20mm;font-size:10pt}
/* На телефоне полноразмерные поля A4 съели бы половину экрана: страница сужается вместе с
вьюпортом, поэтому и поля берём пропорционально меньше. Кегль оставляем близким к печатному —
ради него всё и затевалось. */
@media(max-width:560px){.doc-sheet{padding:9mm 7mm 9mm 9mm;font-size:11pt}.doc-sheet-wrap{padding:12px}
.doc-sheet.is-land{padding:6mm 7mm 6mm 9mm;font-size:9pt}}
/* §2.4: единая карточка комплекта — сетка 2–3 колонки, канон белый + hairline */
.pkg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.pkg-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pkg-cards{grid-template-columns:1fr}}
.pkg-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:16px;text-decoration:none;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.pkg-card:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(20,18,15,.08);transform:translateY(-1px)}
.pkg-card--soon{opacity:.72}
.pkg-card-head{display:flex;align-items:center;gap:8px}
.pkg-card-title{font-weight:700;font-size:15px;line-height:1.3}
.pkg-card-count{font-size:13px;color:var(--muted,#6b6862)}
.pkg-card-foot{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.pkg-card-price{font-weight:800;font-size:16px}
.pkg-card-cta{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--accent)}
/* §4.1: единая карточка документа (вместо «полосок») — сетка 2–3 колонки, канон белый + hairline */
.doc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.doc-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.doc-cards{grid-template-columns:1fr}}
.doc-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:16px 16px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.doc-card:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(20,18,15,.08);transform:translateY(-1px)}
.doc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.doc-card-title{font-weight:700;font-size:15px;line-height:1.35}
.doc-card-verified{color:var(--green);flex-shrink:0;margin-top:2px}
.doc-card-desc{font-size:13px;color:var(--muted,#6b6862);line-height:1.45;flex:1}
.doc-card-foot{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.doc-card-price{font-weight:700;font-size:14px}
.doc-card-mins{font-size:12.5px;color:var(--muted,#6b6862)}
.doc-card-cta{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px}
.tile{border-radius:7px;padding:20px;background:var(--tint);border:1px solid transparent;transition:background .15s ease,border-color .15s ease}
.tile.alt{background:var(--tint-2)}
.tile:hover{background:var(--tint-2);border-color:var(--tint-line)}
.tile.alt:hover{background:var(--tint);border-color:var(--tint-line)}
.tile-feature:hover{background:var(--accent-ink);border-color:transparent}
.tile .ic{color:var(--accent);width:24px;height:24px;stroke-width:1.6}
.tile-title{font-size:15px;font-weight:700;margin-top:12px}
.tile-sub{font-size:13px;color:var(--muted);margin-top:4px}
.tile-feature{grid-row:span 2;background:var(--accent);color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.tile-feature .ic{color:#fff}
.tile-feature .tile-sub{color:#f2f5ff}
.tile-feature .go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;margin-top:20px}
/* list rows */
.rows{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
.row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;background:var(--surface)}
.row:hover{border-color:var(--accent)}
.row .ic-lead{color:var(--accent);width:20px;height:20px;stroke-width:1.6;flex:none}
.row .row-main{flex:1;min-width:0}
.row .row-title{font-size:15px;font-weight:700;display:block}
.row .row-sub{font-size:15px;color:var(--muted);margin-top:3px;display:block}
.row .ic-chev{color:#c2bcb2;width:18px;height:18px;stroke-width:2}
/* plain list (dividers) */
.list-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);list-style:none;padding:0}
.list-card li>a,.list-card .lrow,.list-card .row-main{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line-2);color:inherit}
.list-card li:last-child>a,.list-card .lrow:last-child,.list-card .row-main:last-child{border-bottom:none}
.list-card .lrow:hover,.list-card li>a:hover,.list-card .row-main:hover{background:#FAF7F2}
.list-card .row-main .row-title{display:block;font-size:15px;font-weight:700}
.list-card .row-main .small{display:block;margin-top:2px}
/* packages */
.pkg-price{font-size:20px;font-weight:800;color:var(--accent)}
.pkg-foot{display:flex;align-items:baseline;justify-content:space-between}
/* trust band */
.band-dark{background:var(--accent);color:#e6ecf3}
/* ТЗ гл.4: trust-блок — крупнее заголовки, стандартные боковые отступы как у остального контента */
.band-features{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:6px 4px}
.feature{display:flex;gap:13px}
.feature .ic{width:22px;height:22px;flex:none;margin-top:2px;stroke-width:1.6}
.band-dark .feature .ic{color:#9db6d6}
.feature h3{font-family:var(--serif);font-size:16px}
.band-dark .feature h3{color:#fff}
/* §6.6: подписи преимуществ на синем фоне были тёмно-серые (--muted) — ниже WCAG; делаем светлыми */
.band-dark .feature p{color:#dce3f3}
.feature p{font-size:14px;line-height:1.5;margin-top:5px;color:var(--muted)}
.band-dark .feature p{color:#a9bad0}
/* CTA banner */
.banner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.banner-dark{background:var(--accent);color:#fff;border-radius:var(--radius-lg);padding:28px 32px}
.banner-dark .muted{color:#b9c4d3}
/* footer */
/* Подвал вплотную к надфутеру: отступ между ними давал полосу фона body — ту самую бежевую.
На страницах без надфутера (форма заявки) main остаётся прямым соседом — там отступ нужен. */
.site-footer{background:#1C1B19;color:#c9c6bf;padding:48px 0 32px;margin-top:0}
main + .site-footer{margin-top:56px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:26px;padding-bottom:32px;border-bottom:1px solid #33302b}
.footer-brand .logo{color:#fff;margin-bottom:14px}
.footer-brand .logo .ic{color:#fff}
.footer-brand p{font-size:14px;line-height:1.65;color:#a49f97;max-width:280px}
.footer-col{font-size:14.5px;line-height:2.1}
.footer-col .h{color:#fff;margin-bottom:8px;font-weight:700}
.footer-col a{display:block;color:inherit}
.footer-col a:hover{color:#fff}
.footer-meta{display:flex;flex-direction:column;gap:8px;padding-top:22px;font-size:14px;color:#8f8a83;line-height:1.6}
/* §8: разные ссылки правовой строки разведены явным зазором, а не одним пробелом «как между словами» */
.footer-legal-line{display:flex;flex-wrap:wrap;gap:6px 26px}
.footer-legal-line a{color:#e7e3db;text-decoration:none;font-weight:500}
.footer-legal-line a:hover{color:#fff}
.footer-copy{color:#8f8a83}
/* forms */
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
/* ТЗ ред.5: пустое поле НЕ выглядит как disabled — белый фон всегда, состояние читается по рамке */
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid #cfd6df;border-radius:10px;font-size:15px;line-height:1.45;outline:none;font-family:var(--sans);color:#141414;background:#fff;transition:border-color .12s,box-shadow .12s,background .12s}
/* Заполненное поле белеет (пустое остаётся серым) — сразу видно, что заведено, и фон светлее */
.field input:not(:placeholder-shown),.field textarea:not(:placeholder-shown){color:#141414;font-weight:500;background:#fff;border-color:#e6e8ec}
.field select{color:#141414;font-weight:500}
/* §3.1: одинаковая фиксированная высота инпута и селекта — селект больше не «выше» на общей строке */
.field input:not([type=checkbox]):not([type=radio]),.field select{height:48px}
.field textarea{height:auto;min-height:120px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B7C0CC}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint);background:var(--surface)}
.field input::placeholder,.field textarea::placeholder{color:var(--subtle)}
.field input[readonly]{background:var(--tint);color:var(--muted);cursor:not-allowed}
/* Поле даты с календарём: кнопка справа открывает нативный date-picker (скрытый input[type=date]) */
.date-field{position:relative;display:block}
.date-field input[data-date-ru]{padding-right:44px}
.date-field .date-native{position:absolute;left:14px;bottom:6px;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;margin:0}
.date-field .date-cal{position:absolute;top:50%;right:7px;transform:translateY(-50%);width:34px;height:34px;border:none;background:transparent;color:var(--subtle);cursor:pointer;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,background .12s}
.date-field .date-cal:hover{color:var(--accent);background:rgba(0,0,0,.05)}
/* Умное текстовое поле: выглядит как инпут, но при длинном вводе растёт до 2+ строк (JS auto-grow) */
.field textarea.ta-grow{min-height:0;height:46px;resize:none;overflow:hidden;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.field .hint{font-size:12.5px;line-height:1.4;color:var(--subtle);margin-top:5px}
.field .req{color:var(--danger)}
.field .err{font-size:13px;color:var(--danger);margin-top:6px}
.field+.field{margin-top:15px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
/* Выравнивание: label разной высоты не должен «ронять» инпуты на разные уровни — ячейки одной высоты,
поле прижимается к низу, поэтому инпуты в ряду всегда на одной линии. */
.field-row>.field{display:flex;flex-direction:column}
.field-row>.field>:where(input,select,textarea){margin-top:auto}
.field-row+.field{margin-top:18px}
/* Симметрия: отступ был описан только после ряда, но не перед ним, и на телефоне, где ряд
схлопывается в колонку, «КПП» прилипал к полю «Название организации» над ним. */
.field+.field-row{margin-top:18px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
/* radio / checkbox */
.field input[type=checkbox],.field input[type=radio]{width:auto}
/* §6/§3.1: короткие поля не растягиваются на всю ширину широкого экрана — «полоски» короче */
.field input[type=date],.field input[type=number],.field input[inputmode=numeric]{max-width:320px}
.field input[type=tel],.field input[type=email]{max-width:460px}
.consent{display:flex;gap:10px;align-items:flex-start;margin:8px 0 18px;line-height:1.5;font-size:14px}
.consent input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--accent);cursor:pointer}
.consent .consent-text{color:var(--muted)}
label.consent-text{cursor:pointer;user-select:none}
.consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--accent-ink)}
/* breadcrumb — единый вертикальный ритм: одинаковый отступ от шапки и до контента (§1.1) */
.crumbs{font-size:14px;color:var(--subtle);display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:18px 0 0;margin-bottom:16px}
.crumbs .ic{width:14px;height:14px;stroke-width:2}
.crumbs .cur{color:var(--muted)}
/* wizard */
/* §6: редактор side-by-side — 2/5 форма слева, 3/5 «лист как в Word» справа (на ≤960px схлопывается в стопку). */
.wiz{display:grid;grid-template-columns:2fr 3fr;gap:26px;align-items:start}
.wiz-preview{position:sticky;top:78px;margin-top:0;background:#f0efec;border-radius:7px;padding:22px;max-height:calc(100vh - 96px);overflow:auto}
.wiz-preview .doc-preview{max-width:none;width:100%;margin:0;box-shadow:0 8px 26px -12px rgba(20,18,12,.30);border-color:#e6e1d6}
.wiz-preview .doc-preview-scroll{max-height:none}
.wiz-preview .dpv-note,.wiz-preview>.small{text-align:center}
@media(max-width:940px){.wiz-preview{padding:14px}}
.wiz-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.wiz-head{padding:20px 24px;border-bottom:1px solid var(--line-2)}
.wiz-progress{height:6px;background:var(--tint);border-radius:7px;overflow:hidden;margin-top:12px}
.wiz-progress span{display:block;height:100%;background:var(--accent);border-radius:7px;transition:width .3s ease}
/* Строка-обещание в шапке карточки — то, что раньше занимало отдельный раздел «Настройка». */
.wiz-head .wiz-lead{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.wiz-body{padding:24px}
.wiz-foot{padding:16px 24px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.wiz-step{display:none}
/* Эпик A: 3 уровня — навигация | поля | документ (v2). Левая колонка добавляется только при .wiz-v3 */
.wiz.wiz-v3{grid-template-columns:minmax(190px,17%) minmax(320px,37%) minmax(0,1fr)}
/* ТЗ ред.2: редактор занимает 100% ширины экрана (страница-приложение, а не статья) */
.edit-shell .edit-main .wrap{max-width:none}
/* Заголовки секций в едином пространстве (scroll-режим) */
.wiz-sec-head{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);margin:28px 0 14px;padding-top:20px;border-top:1px solid var(--line-2)}
.wiz-step:first-child .wiz-sec-head{margin-top:0;padding-top:0;border-top:0}
/* Селект-пилюли: все варианты видны сразу */
.pillset{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.pill{padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;line-height:1.2;cursor:pointer;color:var(--ink);transition:border-color .12s,background .12s,color .12s}
.pill:hover{border-color:var(--accent)}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
/* Вспышка только что подставленного значения в предпросмотре */
@keyframes docjust{0%{background:#ffe58a}100%{background:transparent}}
.doc-just{animation:docjust 2.4s ease forwards;border-radius:3px;padding:0 1px}
.wiz-nav{position:sticky;top:78px;align-self:start;display:flex;flex-direction:column;gap:2px}
.wiz-nav-title{text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:700;color:var(--subtle);margin:0 0 8px;padding-left:10px}
.wiz-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--subtle);border-left:2px solid transparent;line-height:1.25;font-size:13px}
.wiz-nav-item:hover{background:var(--tint)}
.wiz-nav-item[aria-current="step"]{background:var(--tint);border-left-color:var(--accent);font-weight:700}
.wiz-nav-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--tint);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.wiz-nav-item[aria-current="step"] .wiz-nav-n{background:var(--accent);color:#fff}
/* Раздел, где не осталось пустых обязательных полей. Правило стоит ниже правила текущего раздела
и равно ему по специфичности, поэтому «готово» перебивает «здесь вы сейчас» — так и нужно:
положение в списке видно по подсветке строки, а галочка отвечает на другой вопрос. */
.wiz-nav-item.done .wiz-nav-n{background:var(--green);color:#fff;font-size:0}
.wiz-nav-item.done .wiz-nav-n::after{content:"✓";font-size:12px;line-height:1}
.wiz-v3 .wiz-steps-map{display:none}
@media(max-width:940px){.wiz.wiz-v3{grid-template-columns:1fr}.wiz-nav{display:none}.wiz-v3 .wiz-steps-map{display:flex}}
/* §6: полноэкранное пространство редактора (кнопка «На весь экран»; Esc/«Свернуть» — выход) */
.wiz-fs-bar{display:none}
body.wiz-fs-lock{overflow:hidden}
.wiz-fs{position:fixed;inset:0;z-index:300;max-width:none;width:100%;margin:0;background:var(--surface);overflow:auto;padding-left:26px;padding-right:26px}
.wiz-fs .wiz-fs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:3;background:var(--surface);padding:10px 0 14px;margin-bottom:8px;border-bottom:1px solid var(--line-2)}
.wiz-fs-title{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiz-fs .wiz-preview{top:6px;max-height:calc(100vh - 150px)}
@media(max-width:960px){.wiz-fs{padding-left:16px;padding-right:16px}}
.wiz-step.active{display:block}
.tip{display:flex;align-items:center;gap:9px;background:var(--tint-soft);border:1px solid #E1E8F1;border-radius:7px;padding:11px 13px;margin-top:14px;font-size:13.5px;color:var(--muted)}
.tip .ic{color:var(--accent);width:17px;height:17px;flex:none;stroke-width:1.7}
/* Hero страницы документа в 2 колонки (ТЗ §2.2): контекст слева, виджет-действие справа */
/* Правая колонка первого экрана — это коробка покупки, единственный коммерческий блок
страницы. 358px давали ей ~29% ширины: строка форматов ломалась на три, цена шла тем же
кеглем, что и подписи, а слева при этом пустовало полполосы. 500px — ~39%, форматы и цена
встают в строку, а левой колонке остаётся 750px, что для чтения даже комфортнее. */
.doc-hero{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:30px;align-items:start;margin-bottom:16px}
@media(max-width:1240px){.doc-hero{grid-template-columns:minmax(0,1fr) 420px;gap:24px}}
.doc-hero--solo{grid-template-columns:minmax(0,1fr)}
.doc-hero-main{min-width:0}
.doc-hero-side{position:sticky;top:88px}
@media(max-width:920px){.doc-hero{grid-template-columns:1fr;gap:16px}.doc-hero-side{position:static}}
/* Телефон (08.10.2026): коробка «Скачать и получить» — сразу под заголовком и лидом, а не через
три экрана после «Что документ закрепляет». С телефонов 4 из 5 покупок, а до образца и кнопки
«Заполнить онлайн» доходил каждый пятый: из поиска приходят за образцом, а видели перечень пунктов.
display:contents раскрывает левую колонку в сетку героя, порядок задаёт order. */
@media(max-width:920px){
.doc-hero:not(.is-sub):not(.doc-hero--solo) .doc-hero-main{display:contents}
.doc-hero:not(.is-sub):not(.doc-hero--solo) .doc-hero-main>header{order:1}
.doc-hero:not(.is-sub):not(.doc-hero--solo) .doc-hero-side{order:2}
.doc-hero:not(.is-sub):not(.doc-hero--solo) .doc-hero-main>:not(header){order:3;min-width:0}
}
/* На мобиле конструктор — в одну колонку, живой предпросмотр скрыт (в 2 колонки всё плющится и
ничего не видно; форма и так работает, итог смотрят на /preview). */
/* превью теперь под конструктором — показываем и на мобиле (это ключевая «магия» продукта) */
/* Почта-гейт — главный акцент на странице документа (ТЗ §3): заметная карточка, а не бледная плашка */
.doc-start{display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#fff,var(--tint-soft));border:1.5px solid var(--tint-line);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-card)}
.doc-start-title{font-size:18px;font-weight:800;color:var(--ink);line-height:1.25}
.doc-start-title::before{content:"";display:inline-block;width:6px;height:18px;border-radius:7px;background:var(--accent);margin-right:9px;vertical-align:-3px}
.doc-start-sub{font-size:14px;line-height:1.5;color:var(--muted)}
.doc-start [data-se-step1] .btn,.doc-start [data-se-step2] .btn{white-space:nowrap}
.doc-start-consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--subtle);cursor:pointer;user-select:none}
.doc-start-consent input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--accent);cursor:pointer}
.doc-start-consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Виджет «Документ готов к заполнению» для вошедшего пользователя: зелёная галка-статус, без кнопки-«вниз» */
.doc-start--ready{background:linear-gradient(180deg,#fff,var(--green-bg));border-color:#bfe3d2}
.doc-start--ready .doc-start-ready-head{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;color:var(--green);line-height:1.25}
.doc-start--ready .doc-start-ready-head .ic{width:22px;height:22px;color:var(--green);flex:none}
.doc-start-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid var(--tint-line);font-size:12.5px;line-height:1.45;color:var(--muted)}
.doc-start-note .ic{color:var(--accent);flex:none;margin-top:1px;width:15px;height:15px}
/* «Что внутри документа» — полоса статистики с тонкими вертикальными разделителями (ТЗ §2.6) */
.doc-inside{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:16px 20px}
.doc-inside-title{font-family:inherit;font-weight:700;font-size:15px;line-height:1.35;letter-spacing:0;margin:0 0 14px;color:var(--ink)}
/* Цифры распределяются по всей ширине карточки равными долями, а не жмутся к левому краю.
Раньше это был flex с фиксированными отступами: у короткого документа («3 пункта, 2 поля,
≈1 страница») четыре числа занимали треть карточки, а две трети оставались пустыми — блок
выглядел недорисованным. Колонок ровно столько, сколько показателей (их 4 или 5). */
.doc-inside-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start}
.dis-item{display:flex;flex-direction:column;gap:4px;padding:2px 0 2px 20px;border-left:1px solid var(--line-2);min-width:0}
.dis-item:first-child{padding-left:0;border-left:0}
.dis-num{font-size:24px;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dis-lbl{font-size:13px;line-height:1.3;color:var(--muted)}
/* Полоса доверия — подвал карточки, а не строка, висящая под цифрами: отделяем линией. */
.doc-inside-trust{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--muted)}
.doc-inside-trust:empty{display:none;margin:0;padding:0;border:0}
.doc-inside-trust .flexrow{gap:6px}
.dis-gold{color:#8a6d1c;font-weight:600} /* золотой нотариальный акцент */
.dis-gold .ic{color:#C79A2E;stroke-width:1.8}
/* §3.2: золотой бейдж «проверено юристом» в полосе доверия */
.ts-verified{color:#8a6d1c;font-weight:600}
.ts-verified .ic{color:#C79A2E}
.ts-verified b{color:#8a6d1c}
/* §3.2 — единый «золотой» бейдж «Проверено юристом · ФИО · дата» */
.law-badge{display:inline-flex;align-items:center;gap:6px;color:#8a6d1c;font-weight:600;font-size:13px;line-height:1.25}
.law-badge .ic{color:#C79A2E;flex:none}
.law-badge-sm{gap:0;flex-shrink:0;margin-top:2px}
/* §4.4 — подсветка совпадений запроса в выдаче поиска */
mark{background:var(--tint);color:inherit;padding:0 1px;border-radius:2px}
/* §6.10 — выноска «Итог:/Вывод:» в теле статьи */
.ed-article .ed-callout{background:#f5f7ff;border-left:3px solid var(--ed-accent,#3b4ee0);border-radius:8px;padding:14px 16px;margin:18px 0}
/* Б1 (SEO/mobile аудит) — страница комплекта: 2 колонки, на мобиле в одну колонку.
Раньше грид был инлайн-стилем (grid-template-columns:1.4fr .6fr), медиазапрос его не перекрывал,
и сайдбар покупки с ценой/кнопкой уезжал за правый край экрана. */
.pkg-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:26px;align-items:start;margin-top:14px}
@media(max-width:960px){.pkg-grid{grid-template-columns:1fr;gap:18px}.pkg-grid .sticky{position:static}}
/* Б2/Б3/Б4/Б5 (аудит mobile) — устранение горизонтального переполнения на мобиле */
.btn-wrap{white-space:normal;text-align:center;line-height:1.25} /* длинные CTA переносятся (Б3) */
.prose{overflow-wrap:break-word} /* /info: длинные слова не рвут макет (Б2) */
.prose :is(img,table,pre,iframe,video){max-width:100%}
.prose pre{overflow-x:auto}
.doc-preview{max-width:100%} /* «лист как в Word» не шире экрана (Б4) */
.doc-preview-body{min-width:0;overflow-wrap:break-word}
.doc-sheet{overflow-wrap:break-word}
@media(max-width:860px){.doc-teaser{grid-template-columns:1fr}} /* тизер-предпросмотр в одну колонку */
@media(max-width:400px){ /* кукис-баннер: кнопки под текстом (Б5) */
.cookie-bar{flex-direction:column;align-items:stretch}
.cookie-bar .cookie-actions{justify-content:stretch}
.cookie-bar .cookie-actions .btn{flex:1}
}
/* Б7 (аудит) — на мобиле поля ввода ≥16px, иначе iOS Safari зумит страницу при фокусе */
@media(max-width:640px){
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
}
.doc-inside-dl{margin-top:15px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13.5px}
@media(max-width:520px){.dis-item{padding:2px 14px}.dis-num{font-size:20px}}
/* FAQ на странице документа — аккуратные карточки в 2 колонки (ТЗ §2.5), тёмный текст ответа */
.doc-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.doc-faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px}
.doc-faq-q{font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.35}
.doc-faq-a{font-size:14px;line-height:1.55;color:var(--muted)}
@media(max-width:640px){.doc-faq{grid-template-columns:1fr}}
/* Низ страницы документа: контент + липкая колонка действий (чтобы не растягивать одну колонку на пол-экрана). */
.doc-below{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;padding-top:26px;padding-bottom:10px}
.doc-below-main{min-width:0}
.doc-below-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.doc-below-side .card{padding:16px 18px}
.doc-actions .doc-action-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.doc-actions .doc-action-row .dar-ic{width:18px;height:18px;color:var(--accent);flex:none}
.doc-actions .doc-action-row .dar-body{flex:1;min-width:0}
.doc-actions .doc-action-row .row-title{display:block;font-weight:700}
.doc-actions .doc-action-row .subtle{display:block}
.doc-actions .doc-action-row .dar-go{width:15px;height:15px;color:var(--muted);flex:none;transition:transform .12s,color .12s}
.doc-actions .doc-action-row:hover .row-title{color:var(--accent)}
.doc-actions .doc-action-row:hover .dar-go{color:var(--accent);transform:translateX(2px)}
.doc-upsell{background:var(--accent);border-color:var(--accent)}
@media(max-width:920px){.doc-below{grid-template-columns:1fr;gap:18px}.doc-below-side{position:static}}
/* Сборка комплекта: форма слева, липкая сводка справа. */
.pkg-build-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;margin-top:16px}
.pkg-build-side{position:sticky;top:88px}
@media(max-width:920px){.pkg-build-grid{grid-template-columns:1fr}.pkg-build-side{position:static}}
.check-toggle{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface);border:1px solid #D8DEE7;border-radius:7px;padding:13px 14px;cursor:pointer;font:inherit}
.check-toggle .box{width:20px;height:20px;border-radius:7px;border:2px solid #D8DEE7;display:flex;align-items:center;justify-content:center;flex:none}
.check-toggle .box .ic{color:#fff;width:13px;height:13px;stroke-width:3;opacity:0}
.check-toggle.on{background:var(--tint);border-color:var(--accent)}
.check-toggle.on .box{background:var(--accent);border-color:var(--accent)}
.check-toggle.on .box .ic{opacity:1}
.clause{display:flex;align-items:center;gap:11px;border-radius:7px;padding:13px 14px}
.clause.free{border:1px solid var(--line);background:var(--surface)}
.clause.free .ic{color:var(--green)}
.clause.paid{border:1px solid var(--tint-line);background:var(--tint-soft)}
.clause.paid .ic{color:var(--accent)}
.clause .t{flex:1;font-size:14px;font-weight:600}
/* preview doc */
.doc-preview{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 40px -30px rgba(0,0,0,.22);overflow:hidden;font-family:'Times New Roman','Liberation Serif','PT Serif',Georgia,serif;color:#1c1b19}
.doc-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;background:var(--tint-soft);border-bottom:1px solid #E7EDF4;font-family:var(--font,system-ui,sans-serif)}
.dpv-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.dpv-label .ic{width:15px;height:15px}
.dpv-tools{display:flex;align-items:center;gap:4px}
.dpv-zbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:7px;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dpv-zbtn:hover{border-color:var(--accent);color:var(--accent)}
.dpv-zval{min-width:42px;text-align:center;font-size:12.5px;color:var(--subtle);font-variant-numeric:tabular-nums}
.doc-preview-scroll{max-height:min(72vh,760px);overflow:auto;overscroll-behavior:contain}
.doc-preview-body{padding:28px 32px;position:relative;background:#fff;z-index:0}
/* Реальный водяной знак: диагональные «ЧЕРНОВИК / ПРИМАДОК» позади текста, пока документ
не оплачен (маркер .doc-draft в разметке). Снимается после оплаты вместе с маркером.
Одного слова «ПРИМАДОК» было мало: по подложке не читалось, что лист — черновик. */
.doc-preview:has(.doc-draft){position:relative;z-index:0} /* свой контекст наложения: ::before z-index:-1 ляжет над фоном, но под текстом */
/* Плитка рисуется ОДИН раз. .doc-preview-body вложен в .doc-preview, а маркер .doc-draft лежит
внутри обоих — раньше срабатывали оба селектора и подложка накладывалась дважды: надписи шли
со смещением и вдвое плотнее, читалось как «ЧЕРНОВИК напечатан два раза». Внешний слой
отвечает за лист только тогда, когда внутреннего нет. */
.doc-preview-body:has(.doc-draft)::before,
.doc-preview:has(.doc-draft):not(:has(.doc-preview-body))::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='196'%3E%3Cg font-family='Arial,Helvetica,sans-serif' font-size='23' font-weight='700' letter-spacing='2' fill='%231F3A5F' fill-opacity='0.07' text-anchor='middle' transform='rotate(-27 150 98)'%3E%3Ctext x='150' y='92'%3EЧЕРНОВИК%3C/text%3E%3Ctext x='150' y='120'%3EПРИМАДОК%3C/text%3E%3C/g%3E%3C/svg%3E");
background-repeat:repeat;background-position:center top}
.doc-title{text-align:center;font-weight:700;font-size:1em;letter-spacing:.02em;color:#211d1a;text-transform:uppercase}
/* Подзаголовок под названием документа: «о передаче дела по подсудности». Не прописными и не
полужирный — это уточнение названия, а не второй заголовок. */
.doc-subtitle{text-align:center;font-size:1em;color:#211d1a;margin:0 0 10pt}
/* Шапка обращения «кому / от кого» — блок в правой половине листа, текст внутри по левому краю.
Так оформляется заявление: выключка вправо рвала бы адрес суда и номер дела по правому краю. */
.doc-addressee{margin:0 0 14px 48%;text-align:left;white-space:pre-line}
.doc-addressee .doc-p,.doc-addressee .doc-sub{text-indent:0;text-align:left;margin:0 0 2pt}
/* Город и дата — таблица: ровно та же разметка, что уходит в PDF (см. DocumentComposer::headerHtml). */
.doc-city{width:100%;border-collapse:collapse;font-size:1em;color:var(--ink);margin:6px 0 12pt}
.doc-city td{border:0;padding:0;vertical-align:top}
.doc-city td.dc-r{text-align:right}
.doc-h{font-weight:700;font-size:1em;margin:10pt 0 3pt;color:#1c1b19}
/* Красная строка и выключка по формату — как в файле; раньше их на экране не было вовсе. */
.doc-p{font-size:1em;line-height:inherit;color:#2a2621;margin:0 0 4pt;text-indent:0.75cm;text-align:justify}
.doc-sub{text-indent:0}
/* Картинка в документе (герб, логотип, скан подписи): размеры приходят в самом теге. */
.doc-img{margin:6pt 0}
.doc-img img{display:inline-block;max-width:100%}
/* Гриф — шапка документа, а не пункт: без номера, без выключки, авторская разбивка строк. */
.doc-grif{margin:0 0 14px}
.doc-grif .doc-p{text-align:left;text-indent:0;margin:0 0 2pt}
.doc-subnum{margin-right:.4em;color:#1c1b19;font-weight:600}
/* Приложение к документу — отдельный лист: «Приложение № N» справа, свой заголовок, разделитель. */
.doc-appendix{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2)}
.doc-app-sep{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2)}
.doc-app-title{text-align:right;font-weight:700;font-size:13px;color:#57534c;margin:0 0 8px}
.doc-appendix .doc-title,.doc-app-sep+.doc-app-title+.doc-title{margin-bottom:10px}
@media print{.doc-appendix,.doc-app-sep{break-before:page;border-top:0;padding-top:0}}
.doc-reqs{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:10px}
.doc-reqs td.doc-req{width:50%;vertical-align:top;padding:0 14px;white-space:pre-line;font-size:13px;color:#57534c}
.doc-req-role{font-weight:700;color:#1c1b19;margin-bottom:4px}
.fill{background:#EAF0F8;border-radius:7px;padding:0 5px;color:var(--accent);font-weight:600;font-family:var(--sans);font-size:11px}
.doc-expert{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-family:var(--sans);font-size:11px;color:var(--muted)}
.avatar{border-radius:50%;background:repeating-linear-gradient(135deg,#dfe6ef,#dfe6ef 5px,#eef2f7 5px,#eef2f7 10px);flex:none}
.avatar-28{width:28px;height:28px}.avatar-44{width:44px;height:44px}.avatar-56{width:56px;height:56px}.avatar-72{width:72px;height:72px}
/* sticky aside */
.sticky{position:sticky;top:88px}
/* faq */
.faq{margin-top:26px}
[data-header]{min-height:71px} /* резерв под sticky-хедер (70px+1px), инжектится app.js — против CLS */
/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-card{background:var(--bg);border-radius:7px;max-width:840px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 40px 90px -30px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--line)}
.modal-body{padding:24px 28px}
/* article */
.prose{font-size:17px;line-height:1.7;color:#2a2621}
.prose h2{font-family:var(--serif);font-size:26px;margin:32px 0 14px;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--accent);background:var(--tint-soft);border-radius:0 7px 7px 0;font-family:var(--serif);font-style:italic;font-size:18px;color:#211d1a}
.cover{border-radius:7px;background:repeating-linear-gradient(135deg,#e6ebf3,#e6ebf3 12px,#eef2f7 12px,#eef2f7 24px);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#9aa6b5}
.thumb{background:repeating-linear-gradient(135deg,#EDE9E2,#EDE9E2 10px,#F5F2EC 10px,#F5F2EC 20px);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#b0a99f}
/* account */
.acct{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.side-nav{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:12px;display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--muted);border-radius:7px;padding:12px 14px}
.side-nav a .ic{width:19px;height:19px;stroke-width:1.8}
.side-nav a.active{font-weight:600;color:var(--accent);background:var(--tint)}
.side-nav a:hover{color:var(--accent)}
.stat-card{display:flex;align-items:center;gap:16px;padding:22px}
.stat-card .num{font-size:28px;font-weight:800;line-height:1}
/* Доступность (WCAG 2.4.7): видимый фокус с клавиатуры для всех интерактивных элементов */
:where(a,button,.btn,.chip,.icon-btn,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:7px}
/* §6.7: читаемое disabled-состояние (было opacity:.55 → бледно-лиловый на акценте, нечитаемо) */
.btn:disabled,.btn[disabled]{cursor:not-allowed;pointer-events:none;opacity:1;background:#e7e4de;color:#8f8b83;border-color:#e7e4de;box-shadow:none}
/* Кабинет: документы карточками одинаковой структуры (без «прыгающих» строк) */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.doc-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:9px;transition:border-color .12s,box-shadow .12s}
.doc-card:hover{border-color:var(--tint-line);box-shadow:var(--shadow-card)}
.doc-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.doc-card-title{font-weight:700;font-size:15px;line-height:1.32;color:var(--ink)}
.doc-card-sub{font-size:12.5px;color:var(--subtle)}
.doc-card-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-2)}
.doc-card-actions form{display:inline-flex}
.doc-card-share{margin-top:8px;border-top:1px dashed var(--line-2);padding-top:10px}
.doc-card-share[hidden]{display:none}
/* Номер и дата документа: у двух похожих договоров это единственное различие, поэтому строка
стоит сразу под названием и набрана моноширинным — номер читают посимвольно. */
.doc-card-no{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.doc-card-no .sep{color:var(--faint);margin:0 2px}
.doc-card-actions .btn-sm{margin-right:auto}
/* Виджет скачивания в карточке — тот же выбор формата, что в редакторе. */
.doc-card-dl{margin-top:10px;border-top:1px dashed var(--line-2);padding-top:10px}
.doc-card-dl[hidden]{display:none}
.dl-fmts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dl-f{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:8px 10px;font:inherit;cursor:pointer;color:var(--ink)}
.dl-f b{font-size:13px;font-weight:700}
.dl-f small{font-size:11.5px;color:var(--subtle);line-height:1.25}
.dl-f:hover{border-color:var(--accent);color:var(--accent)}
.dl-f.off{cursor:default;background:var(--surface-2);border-style:dashed;color:var(--faint)}
.dl-f.off:hover{border-color:var(--line);color:var(--faint)}
.dl-pay{margin-top:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.45}
/* Счётчик в навигации кабинета: сколько комплектов и сколько неоплаченных заказов. */
.side-nav .nav-n{margin-left:auto;font-size:12px;font-weight:700;color:var(--subtle);background:var(--surface-2);border-radius:20px;padding:1px 8px}
.side-nav .nav-n.warn{color:#8a5a00;background:#fdf1d8}
/* Комплект в кабинете: шапка со статусом и оплатой, под ней — состав теми же карточками. */
.pack-box{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-2);padding:14px 16px}
.pack-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pack-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}
.pack-title{font-weight:700;font-size:16px;line-height:1.3}
.pack-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pack-docs{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media(max-width:560px){.dl-fmts{grid-template-columns:1fr}.pack-acts{width:100%}.pack-acts .btn{flex:1}}
@media(max-width:900px){.side-nav{flex-direction:row;flex-wrap:wrap;position:static}.side-nav a{padding:9px 12px;font-size:14px}}
.notice{display:flex;align-items:center;gap:12px;background:var(--tint-soft);border:1px solid #E1E8F1;border-radius:7px;padding:12px 14px;font-size:14px;color:#3a3833;line-height:1.35}
.notice-x{flex:none;width:26px;height:26px;border:none;background:transparent;color:var(--subtle);cursor:pointer;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start}
.notice-x:hover{color:var(--ink);background:rgba(0,0,0,.06)}
.notice .ic{color:var(--accent);flex:none}
/* filter rail (category) */
/* .rail БОЛЬШЕ НЕ грид: остаточное правило grid-template-columns:240px 1fr загоняло
из TableBlock, поэтому раскладка
фиксированная — иначе браузер делит полосу между пустыми ячейками поровну и бланк выходит
сеткой одинаковых клеток. Шапка по центру и по середине высоты. Те же правила, что в
печатном CSS (DocumentComposer::printCss): экран обязан показывать тот же документ. */
.doc-table{width:100%;border-collapse:collapse;margin:6pt 0;font-size:.92em;table-layout:fixed;word-wrap:break-word}
.doc-table th,.doc-table td{border:1px solid #444;padding:1.4mm 1.2mm;vertical-align:middle;text-align:left}
.doc-table thead th{font-weight:700;text-align:center;vertical-align:middle}
/* Строка нумерации граф «1 2 3 4…» — указатель, а не данные: по центру и легче шапки. */
.doc-table tbody tr.tr-cols td{text-align:center;font-size:.85em}
.doc-table tfoot td{font-weight:700}
.doc-table .ta-r{text-align:right}
.doc-table .ta-c{text-align:center}
.doc-table .ta-l{text-align:left}
/* ============================================================
Редизайн (редакционный стиль) — прототип primadoc-redesign.
Scoped .ed-* классы + .ed-* переменные: не трогают шапку/футер
и остальные компоненты. Применяются постранично.
============================================================ */
:root{
--ed-ink:#17140d; --ed-ink2:#403b31; --ed-line:#E7E3D9; --ed-line-soft:#F1EDE4;
--ed-accent:#3b4ee0; --ed-accent-ink:#2b3aad; --ed-accent-soft:#F1F3FD;
--ed-amber:#87692a; --ed-amber-soft:#F7F1E1; --ed-panel:#FAFAF8;
--ed-serif:'PT Serif',Georgia,"Times New Roman",serif; --ed-rad:7px;
}
.ed-page{background:#fff;color:var(--ed-ink)}
/* Ширина контента — как на всём сайте (.wrap = --maxw 1360px). НЕ сужаем. */
/* Это правило задаёт заголовкам страницы гарнитуру — и раньше оно же обнуляло им отступ снизу.
Отсюда и росла «болезнь сайта», на которую жаловались трижды: `.ed-page h2` (0,1,1) сильнее
одноклассовой утилиты `.h2` (0,1,0), поэтому заголовок с `class="h2"` терял свои 22 пикселя и
прилипал к тексту — на страницах документов, календарей, справочников, регионов. Лечили это
заплаткой на `[class*="mb-"]`, но она чинила только заголовки с утилитой отступа и вдобавок
сама перебивала её значение своим 14. Убираем `margin` отсюда совсем: базовый сброс
`h1,h2,h3,h4{margin:0}` продолжает обнулять всё, а классы `.h2`/`.h3`/`.mb-*` снова работают
как задумано — и точечные сбросы для флекс-рядов (`.ed-sh .h2` и соседние) тоже. */
.ed-page h1,.ed-page h2,.ed-page h3{font-family:var(--ed-serif);font-weight:700;line-height:1.14;letter-spacing:-.01em;color:var(--ed-ink)}
.ed-page h1.mb-6,.ed-page h2.mb-6,.ed-page h3.mb-6{margin-bottom:6px}
.ed-page h1.mb-10,.ed-page h2.mb-10,.ed-page h3.mb-10{margin-bottom:10px}
.ed-page h1.mb-16,.ed-page h2.mb-16,.ed-page h3.mb-16{margin-bottom:16px}
.ed-page h1.mb-22,.ed-page h2.mb-22,.ed-page h3.mb-22{margin-bottom:22px}
.ed-page h1.mb-26,.ed-page h2.mb-26,.ed-page h3.mb-26{margin-bottom:26px}
.ed-page h1.mb-30,.ed-page h2.mb-30,.ed-page h3.mb-30{margin-bottom:30px}
.ed-sec{padding:44px 0}
.ed-sec.tight{padding:26px 0}
.ed-sec--line{border-top:1px solid var(--ed-line)}
.ed-kicker{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ed-accent);display:block}
.ed-crumbs{font-size:14px;color:var(--ed-ink2);padding:22px 0 6px}
.ed-crumbs a{color:var(--ed-ink2)}
.ed-lead{font-size:20px;color:var(--ed-ink2);line-height:1.5}
.ed-sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.ed-sh h2{font-size:29px}
.ed-sh a{font-size:15px;font-weight:600;color:var(--ed-accent);white-space:nowrap}
.ed-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ed-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ed-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* кнопки */
.ed-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ed-accent);color:#fff;border:none;border-radius:var(--ed-rad);padding:12px 20px;font-family:var(--sans);font-weight:600;font-size:15.5px;cursor:pointer;text-decoration:none}
.ed-btn:hover{background:var(--ed-accent-ink);color:#fff}
.ed-btn.ghost{background:#fff;color:var(--ed-ink);border:1px solid var(--ed-ink)}
.ed-btn.ghost:hover{background:var(--ed-ink);color:#fff}
.ed-btn.block{display:flex;width:100%}
/* отраслевой слой: чип-ссылка, заголовок секции, CTA-мост */
.ed-chip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--ed-line);border-radius:8px;font-size:14px;color:var(--ed-ink);text-decoration:none;background:#fff;line-height:1.2}
.ed-chip:hover{border-color:var(--ed-accent);color:var(--ed-accent)}
.ed-chip.ghost{background:var(--ed-panel);color:var(--ed-ink2)}
.ed-h2{font-family:var(--ed-serif);font-weight:700;font-size:clamp(23px,3vw,29px);line-height:1.16;letter-spacing:-.01em;color:var(--ed-ink)}
.ed-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:1px solid var(--ed-line);border-radius:var(--ed-rad);background:var(--ed-panel);padding:22px 24px}
.ed-cta .nm{font-family:var(--ed-serif);font-weight:700;font-size:20px;line-height:1.2;color:var(--ed-ink)}
.ed-cta .ex{font-size:15px;color:var(--ed-ink2);margin-top:6px}
/* единый компонент карточки документа */
.ed-dcard{border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:19px 20px;display:flex;flex-direction:column;background:#fff;text-decoration:none;color:var(--ed-ink)}
.ed-dcard:hover{border-color:var(--ed-accent)}
.ed-dcard .nm{font-family:var(--ed-serif);font-weight:700;font-size:20px;line-height:1.25;margin-bottom:8px}
.ed-dcard .ds{font-size:15px;color:var(--ed-ink2);margin-bottom:14px}
.ed-dcard .mrow{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.ed-dcard .mrow .pt{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ed-ink2)}
.ed-dcard .mrow .pt .ic{width:15px;height:15px;color:var(--ed-accent);opacity:.85}
.ed-dcard .ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--ed-line)}
.ed-dcard .pr{font-weight:700;font-size:16px}
.ed-dcard .pr.free{color:var(--ed-accent)}
.ed-dcard .mt{font-size:14px;color:var(--ed-ink2)}
.ed-dcard .go{font-size:14px;font-weight:600;color:var(--ed-accent)}
/* Подразделы каталога — выделенные цветные карточки */
.subcat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.subcat-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.subcat-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(20,40,80,.07)}
.subcat-card .sc-ic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.subcat-card .sc-ic .ic{width:19px;height:19px;color:var(--accent)}
.subcat-card .sc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.subcat-card .sc-t{font-weight:600;font-size:15.5px;line-height:1.25}
.subcat-card .sc-c{font-size:13px;color:var(--subtle)}
.subcat-card .sc-go{flex:none;width:17px;height:17px;color:var(--faint);opacity:0;transform:translateX(-3px);transition:opacity .15s,transform .15s}
.subcat-card:hover .sc-go{opacity:1;transform:none;color:var(--accent)}
@media (max-width:560px){.subcat-grid{grid-template-columns:1fr}}
/* Футер раздела каталога */
.ed-catfoot{margin-top:34px;border:1px solid var(--ed-line);border-radius:var(--ed-rad);background:#fafbfc;padding:22px 24px}
.ed-catfoot h3{font-size:18px;font-weight:700;margin:0 0 8px}
.ed-catfoot p{font-size:15px;color:var(--ed-ink2);margin:0 0 14px;max-width:70ch}
.ed-catfoot .cf-pts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px;padding:0;list-style:none}
.ed-catfoot .cf-pts li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ed-ink)}
.ed-catfoot .cf-pts li .ic{width:16px;height:16px;color:var(--ed-accent);flex:none}
.ed-catfoot .cf-act{display:flex;flex-wrap:wrap;gap:10px}
/* тарифы */
.ed-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ed-tier{border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:24px;background:#fff;display:flex;flex-direction:column}
.ed-tier.reco{border-color:var(--ed-accent);border-top:3px solid var(--ed-accent)}
.ed-tier .tag{align-self:flex-start;background:var(--ed-accent-soft);color:var(--ed-accent-ink);font-size:12.5px;font-weight:700;border-radius:7px;padding:3px 10px;margin-bottom:12px}
.ed-tier .nm{font-family:var(--ed-serif);font-weight:700;font-size:22px;margin-bottom:6px}
.ed-tier .pr{font-size:30px;font-weight:700;font-family:var(--ed-serif);margin-bottom:4px}
.ed-tier .pr small{font-size:16px;color:var(--ed-ink2);font-weight:400}
.ed-tier .ds{font-size:15px;color:var(--ed-ink2);margin-bottom:18px}
.ed-tier ul{list-style:none;margin:0 0 20px;padding:0;font-size:15px}
.ed-tier li{padding:7px 0 7px 22px;position:relative;color:var(--ed-ink)}
.ed-tier li::before{content:"✓";position:absolute;left:0;color:var(--ed-accent);font-weight:700}
.ed-tier .cta{margin-top:auto}
.ed-paystrip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:15px;color:var(--ed-ink2)}
.ed-paystrip b{color:var(--ed-ink)}
/* продающая карточка комплекта */
.ed-pack{border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:20px 22px;background:#fff;display:flex;flex-direction:column;text-decoration:none;color:var(--ed-ink)}
.ed-pack .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.ed-pack .nm{font-family:var(--ed-serif);font-weight:700;font-size:20px;line-height:1.2}
.ed-pack .disc{background:var(--green-bg);color:var(--green);font-size:13px;font-weight:700;border-radius:7px;padding:3px 9px;white-space:nowrap}
.ed-pack .nm .pkg-ic{width:20px;height:20px;color:var(--ed-accent);margin-right:9px;vertical-align:-3px;flex:none}
.ed-pack .cnt{font-size:14.5px;color:var(--ed-ink2);margin-bottom:14px}
.ed-pack .items{list-style:none;margin:0 0 14px;padding:0;font-size:14.5px}
.ed-pack .items li{padding:5px 0 5px 22px;position:relative;color:var(--ed-ink)}
.ed-pack .items li::before{content:"✓";position:absolute;left:0;color:var(--ed-accent);font-weight:700}
.ed-pack .prc{font-size:15.5px;margin-bottom:16px}
.ed-pack .prc s{color:var(--faint);margin-right:8px}
.ed-pack .prc b{font-weight:700}
.ed-pack .cta{margin-top:auto}
.ed-pack.soon{background:var(--ed-panel);border-style:dashed}
.ed-pack.soon .nm{color:var(--ed-ink2)}
/* обложка раздела, карточка ситуации */
.ed-cover{border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:20px 22px;background:#fff;display:flex;flex-direction:column;min-height:128px;text-decoration:none;color:var(--ed-ink)}
.ed-cover:hover{border-color:var(--ed-accent)}
/* Кликабельная карточка-группа целиком (§3.1): невидимый оверлей-ссылка; чипы внутри кликаются поверх */
.ed-cover--link{position:relative}
.ed-cover--link:hover{border-color:var(--ed-accent)}
.ed-cover--link .cover-hit{position:absolute;inset:0;z-index:1;border-radius:var(--ed-rad)}
.ed-cover--link .ex a{position:relative;z-index:2}
.ed-cover .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.ed-cover .nm{font-family:var(--ed-serif);font-weight:700;font-size:20px;line-height:1.15}
.ed-cover .cnt{font-size:14px;color:var(--ed-ink2);font-weight:600;white-space:nowrap;margin-left:12px}
.ed-cover .ex{font-size:14.5px;color:var(--ed-ink2);line-height:1.45;margin-top:auto}
.ed-sit{border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:18px 20px;background:#fff;display:flex;flex-direction:column;text-decoration:none;color:var(--ed-ink)}
.ed-sit:hover{border-color:var(--ed-accent)}
.ed-sit .nm{font-family:var(--ed-serif);font-weight:700;font-size:18px;margin-bottom:8px}
.ed-sit .dd{font-size:14.5px;color:var(--ed-ink2);margin-bottom:14px;line-height:1.45}
.ed-sit .ct{font-size:14px;color:var(--ed-accent);font-weight:600;margin-top:auto}
/* 404: развилка, а не извинение по центру. Ровная сетка вместо трёх рядов чипов вразнобой. */
.e404{max-width:860px;padding-top:34px}
.e404-head{display:flex;gap:22px;align-items:flex-start}
.e404-code{font-family:var(--ed-serif,var(--serif));font-size:60px;font-weight:800;line-height:.95;color:var(--ed-accent);flex:none}
.e404-intro{min-width:0}
.e404-intro .ed-lead{margin-top:10px;max-width:56ch}
.e404-search{display:flex;gap:10px;margin-top:24px;max-width:560px}
.e404-search input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:15px}
.e404-guess{display:flex;flex-direction:column;gap:3px;margin-top:18px;max-width:560px;padding:14px 16px;border:1px solid var(--ed-line);border-left:3px solid var(--ed-amber,var(--accent));border-radius:var(--ed-rad);background:#fff;text-decoration:none}
.e404-guess .lb{font-size:13px;color:var(--ed-ink2)}
.e404-guess .nm{font-weight:700;color:var(--ed-ink)}
.e404-guess:hover .nm{color:var(--ed-accent)}
.e404-cols{margin-top:26px;align-items:start}
.e404-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media(max-width:640px){
.e404-head{gap:14px}
.e404-code{font-size:44px}
.e404-search{flex-direction:column}
}
/* страница ситуации: заголовок с иконкой, шаги оформления, боковая колонка.
Раньше всё это держалось на inline-стилях внутри разметки — отступы задавал тот блок,
который случайно шёл первым, и между секциями было то пусто, то вплотную. */
.sit-head{display:flex;align-items:center;gap:12px}
.sit-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px;counter-reset:none}
.sit-steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--ed-line);border-radius:var(--ed-rad);background:#fff}
.sit-steps li .n{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--ed-accent);color:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.sit-steps li .dd{flex:1;min-width:0;display:grid;gap:9px}
.sit-steps .row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sit-steps .row a{flex:1;min-width:180px;font-weight:600;color:var(--ed-ink);text-decoration:none}
.sit-steps .row a:hover{color:var(--ed-accent)}
.sit-steps .row .req{font-size:13px;font-weight:600;color:var(--green,#1a7f4b);white-space:nowrap}
.sit-steps .row .opt,.sit-steps .row .pr{font-size:13px;color:var(--ed-ink2);white-space:nowrap}
.ed-rail .share-row{display:flex;flex-wrap:wrap;gap:7px}
.ed-rail .share-row .share-btn{padding:6px 11px;font-size:13px}
/* группы ситуаций: 68 карточек подряд не читаются, поэтому разложены по темам.
scroll-margin-top — под липкую шапку, иначе якорь из чипов уводит заголовок под неё. */
.sit-group{scroll-margin-top:86px}
.sit-group + .sit-group{margin-top:38px;padding-top:34px;border-top:1px solid var(--ed-line)}
.sit-group .ed-sh{margin-bottom:18px}
.sit-group .ed-sh h2{font-size:23px}
/* отзывы */
.ed-revs{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.ed-rev .st{color:var(--ed-amber);font-size:15px;margin-bottom:10px}
.ed-rev .q{font-family:var(--ed-serif);font-size:18px;line-height:1.5;color:var(--ed-ink);display:block}
.ed-rev .m{font-size:15px;color:var(--ed-ink2);margin-top:11px}
.ed-rev .m b{color:var(--ed-ink);font-weight:700}
/* журнал */
/* Журнал: две крупные карточки в ряд (§2.1). Без картинок — .no-im схлопывает колонку изображения. */
.ed-jfeat-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ed-jfeat{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid var(--ed-line);border-radius:var(--ed-rad);overflow:hidden;background:#fff;text-decoration:none;color:var(--ed-ink);transition:border-color .15s ease}
.ed-jfeat:hover{border-color:var(--ed-accent)}
.ed-jfeat.no-im{grid-template-columns:1fr}
.ed-jfeat .im{background:var(--ed-panel);min-height:240px;background-size:cover;background-position:center}
.ed-jfeat .tx{padding:28px 30px}
.ed-jfeat .tx h2{font-size:24px;line-height:1.16;margin:10px 0 12px;font-family:var(--ed-serif)}
.ed-jfeat:hover .tx h2{color:var(--ed-accent)}
.ed-jfeat .tx p{font-size:15px;color:var(--ed-ink2);line-height:1.55;margin:0 0 14px}
.ed-jfeat .m{font-size:13.5px;color:var(--ed-ink2)}
.ed-jcard{text-decoration:none;color:var(--ed-ink);display:block}
.ed-jcard .im{background:var(--ed-panel);height:150px;border-radius:var(--ed-rad);margin-bottom:12px;background-size:cover;background-position:center}
.ed-jcard .rub{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ed-accent)}
.ed-jcard h3{font-size:18px;line-height:1.22;margin:7px 0 8px;font-family:var(--ed-serif)}
.ed-jcard:hover h3{color:var(--ed-accent)}
.ed-jcard .ex{font-size:14.5px;color:var(--ed-ink2);line-height:1.5;margin:0 0 10px}
.ed-jcard .m{font-size:13.5px;color:var(--ed-ink2)}
/* Листинг журнала: карточки без картинок читаются как карточки (рамка + паддинг).
Колонка + `.m{margin-top:auto}`: у части статей нет рубрики или анонса, и при обычном
потоке строка с датой вставала на своей высоте в каждой карточке — ряд из трёх карточек
получал три разные «подошвы» при одинаковых рамках. Дату прижимаем к низу: она читается
как подпись карточки, а не как случайно оборвавшийся текст. */
.ed-jlist .ed-jcard{display:flex;flex-direction:column;height:100%;border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:20px 22px;background:#fff;transition:border-color .15s ease}
.ed-jlist .ed-jcard:hover{border-color:var(--ed-accent)}
.ed-jlist .ed-jcard .im{margin:-2px 0 14px}
.ed-jlist .ed-jcard .m{margin-top:auto;padding-top:10px}
.ed-rubnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.ed-rubnav a{font-size:14.5px;padding:7px 15px;border:1px solid var(--ed-line);border-radius:7px;color:var(--ed-ink);text-decoration:none}
.ed-rubnav a:hover,.ed-rubnav a.on{border-color:var(--ed-accent);color:var(--ed-accent)}
.ed-rubnav a.on{background:var(--ed-accent-soft)}
/* faq раскрыт */
/* Два столбца, а не один узкий слева.
Ответы стояли колонкой с `max-width:76ch` (~700px) внутри колонки шириной ~935px, а правый
рейл к этому месту страницы уже кончался: на мониторе 1920 нижняя треть /situation и /doc
была текстом, прижатым к левому краю, и пустотой шириной в пол-экрана справа — ровно то,
что 14.09.2026 названо «контент очень страшно оформлен». Ширину строки теперь задаёт сама
колонка (~450px, 55–60 знаков — читаемая мера), а не отдельный потолок, который с ней спорил.
`break-inside` не нужен: это grid, а не columns, — вопрос и ответ не разрываются по столбцам.
Порог 1400px, а не 900: делить надо не окно, а колонку текста, и она заметно уже окна.
На 1200px колонка под вопросы = 1200 − поля − левая навигация − правый рейл ≈ 580px, то есть
два столбца по 270px — 33 знака в строке, читать невозможно. На 1400px она уже ≈ 780px
(два по 370px, ~45 знаков), на 1920 — 930px (два по 440px). Ниже порога — один столбец,
как было. */
.ed-faq .item{padding:0 0 22px}
.ed-faq h3{font-size:20px;margin-bottom:8px}
.ed-faq p{font-size:16.5px;color:var(--ed-ink2);margin:0}
@media(min-width:1400px){
.ed-faq .ed-sh{grid-column:1/-1}
.ed-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 44px;align-items:start}
}
/* split + rail (категория/статья/документ) */
.ed-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.ed-rail{position:sticky;top:70px;display:flex;flex-direction:column;gap:16px}
.ed-rbox{border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:18px 20px;background:#fff}
.help-steps{margin:0;padding-left:20px;font-size:14.5px;color:var(--ed-ink2);line-height:1.5}
.help-steps li{margin-bottom:10px}
.help-steps li:last-child{margin-bottom:0}
.help-steps li b{color:var(--ed-ink)}
.ed-rbox h4{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ed-ink2);margin:0 0 12px}
.ed-seg{display:inline-flex;gap:7px;flex-wrap:wrap}
.ed-seg span,.ed-seg a{font-size:14px;padding:6px 12px;border:1px solid var(--ed-line);border-radius:7px;color:var(--ed-ink2);cursor:pointer;text-decoration:none}
.ed-seg span.on,.ed-seg a.on,.ed-seg span.active,.ed-seg [data-pill].active{background:var(--ed-ink);color:#fff;border-color:var(--ed-ink)}
.ed-main{min-width:0}
.ed-catpack{border:1px solid var(--ed-line);border-top:3px solid var(--ed-amber);border-radius:var(--ed-rad);padding:20px;background:var(--ed-amber-soft)}
/* byline + pull-quote + доклист */
.ed-byline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:15px;color:var(--ed-ink2);margin:14px 0 22px}
.ed-byline .verif{color:var(--ed-amber);font-weight:600}
.ed-byline .st{color:var(--ed-amber)}
.ed-pq{border-left:3px solid var(--ed-amber);background:var(--ed-amber-soft);padding:22px 26px;border-radius:0 var(--ed-rad) var(--ed-rad) 0;margin:26px 0}
.ed-pq .q{font-family:var(--ed-serif);font-size:21px;line-height:1.45;color:var(--ed-ink)}
.ed-pq .by{margin-top:12px;font-size:14.5px;color:var(--ed-ink2)}
.ed-pq .by b{color:var(--ed-ink)}
/* лист документа (Word-подобный предпросмотр на всю ширину) */
.ed-sheetwrap{background:#f1efe9;border-radius:var(--ed-rad);padding:30px}
.ed-sheet{background:#fff;border:1px solid var(--ed-line);box-shadow:0 10px 30px -18px rgba(0,0,0,.28);max-width:720px;margin:0 auto;padding:48px 56px;font-family:var(--ed-serif);color:#111;line-height:1.7;font-size:16px}
.ed-sheet .foot{margin-top:26px;padding-top:12px;border-top:1px solid var(--ed-line);text-align:center;font-size:13px;color:var(--faint)}
/* адаптив */
@media(max-width:940px){
.ed-grid2,.ed-grid3,.ed-grid4,.ed-tiers,.ed-revs,.ed-jfeat,.ed-jfeat-2{grid-template-columns:1fr}
.ed-split{grid-template-columns:1fr}
.ed-rail{position:static}
}
.ed-checklist{list-style:none;margin:0;padding:0;font-size:15px}
.ed-checklist li{padding:7px 0 7px 22px;position:relative;color:var(--ed-ink)}
.ed-checklist li::before{content:"✓";position:absolute;left:0;color:var(--ed-accent);font-weight:700}
/* каталог: раздел-обложка со ссылками на подкатегории */
.ed-catcard{border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:20px 22px;background:#fff;display:flex;flex-direction:column}
.ed-catcard .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ed-catcard .hd h2{flex:1;min-width:0}
.ed-catcard .cat-ic{flex:none;width:32px;height:32px;border-radius:8px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.ed-catcard .cat-ic .ic{width:18px;height:18px;color:var(--accent)}
.ed-catcard--soon{opacity:.72}
.ed-catcard--soon .cat-ic{background:var(--surface-2)}
.ed-catcard--soon .cat-ic .ic,.ed-catcard--soon .cnt{color:var(--faint)}
.ed-catcard .hd h2{font-family:var(--ed-serif);font-size:20px;line-height:1.15;margin:0}
.ed-catcard .hd h2 a{color:var(--ed-ink)}
.ed-catcard .hd h2 a:hover{color:var(--ed-accent)}
.ed-catcard .hd .cnt{font-size:13px;font-weight:700;color:var(--ed-accent);white-space:nowrap}
.ed-sublinks{display:flex;flex-direction:column;gap:2px}
.ed-sublinks a{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:15px;color:var(--ed-ink);border-bottom:1px solid var(--ed-line-soft)}
.ed-sublinks a:last-child{border-bottom:0}
.ed-sublinks a:hover{color:var(--ed-accent)}
.ed-sublinks a .n{color:var(--ed-ink2);font-weight:600}
.ed-sublinks a.more{color:var(--ed-accent);font-weight:600}
/* статья (редизайн) */
.ed-article{font-size:18px;line-height:1.72;color:var(--ed-ink);max-width:none}
.ed-article h2{font-family:var(--ed-serif);font-size:27px;margin:34px 0 12px;line-height:1.2}
.ed-article h3{font-family:var(--ed-serif);font-size:21px;margin:26px 0 10px}
.ed-article p{margin:0 0 16px}
.ed-article a{color:var(--ed-accent);text-decoration:underline;text-underline-offset:2px}
.ed-article ul,.ed-article ol{margin:0 0 16px;padding-left:22px}
.ed-article li{margin:6px 0}
.ed-article img{max-width:100%;height:auto;border-radius:var(--ed-rad)}
.ed-article blockquote{border-left:3px solid var(--ed-accent);margin:20px 0;padding:6px 18px;color:var(--ed-ink2)}
.ed-takeaways{background:var(--ed-panel);border:1px solid var(--ed-line);border-radius:var(--ed-rad);padding:18px 22px;margin:22px 0}
.ed-takeaways .t{font-weight:700;font-family:var(--ed-serif);font-size:17px;margin-bottom:8px}
.ed-takeaways ul{margin:0;padding-left:20px;color:var(--ed-ink2)}
.ed-tgt{border:1px solid var(--ed-line);border-top:3px solid var(--ed-accent);border-radius:var(--ed-rad);padding:18px 20px;background:#fff;display:block;text-decoration:none;color:var(--ed-ink)}
.ed-tgt .k{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ed-accent);margin-bottom:6px}
.ed-tgt .nm{font-family:var(--ed-serif);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:14px}
.ed-toc a{display:block;font-size:14px;line-height:1.4;color:var(--ed-ink2);padding:5px 0 5px 12px;border-left:2px solid var(--ed-line);text-decoration:none}
.ed-toc a:hover,.ed-toc a.active{color:var(--ed-accent);border-left-color:var(--ed-accent)}
.ed-rlist{list-style:none;margin:0;padding:0}
.ed-rlist li{padding:8px 0;border-bottom:1px solid var(--ed-line-soft)}
.ed-rlist li:last-child{border-bottom:0}
.ed-rlist a{color:var(--ed-ink);font-size:15px;text-decoration:none;display:block}
.ed-rlist a:hover{color:var(--ed-accent)}
.ed-rlist .dt{display:block;font-size:13px;color:var(--ed-ink2);margin-top:2px}
/* ===== Флагман /doc: компоненты по прототипу (О документе, pull-quote юриста, отзывы, share) ===== */
.docpg .sh{font-family:var(--ed-serif);font-weight:700;font-size:clamp(23px,3vw,29px);line-height:1.16;letter-spacing:-.01em;color:var(--ed-ink);margin:48px 0 20px}
/* Подпись-намерение над сеткой «других документов». Три бывших раздела («Похожие»,
«Обычно вместе оформляют», «Смежные») схлопнуты в один: заголовок остался один, а
назначение каждой сетки объясняет эта строка — она набрана мельче заголовка, чтобы
не читаться как ещё один раздел. */
.docpg .doc-more-lead{font-size:15px;line-height:1.5;color:var(--ed-ink2);margin:0 0 16px}
.docpg .doc-more-lead + .ed-grid3{margin-bottom:26px}
.docpg .byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:14px;font-size:15px;color:var(--ed-ink2)}
.docpg .byline .s{color:var(--ed-amber);font-weight:700}
.docpg .byline b{color:var(--ed-ink)}
.docpg .byline .law{display:flex;align-items:center;gap:9px}
.docpg .byline .law .a{width:30px;height:30px;border-radius:50%;background:var(--ed-amber-soft);border:1px solid var(--ed-amber);color:var(--ed-amber);display:grid;place-items:center;font-family:var(--ed-serif);font-weight:700;font-size:13px}
.docpg .byline .law span{color:var(--ed-amber);font-weight:600}
/* О документе — три колонки Зачем / Как / Риск */
.docpg .cols3d{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.docpg .cols3d .k{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ed-accent);margin-bottom:9px}
.docpg .cols3d h3{font-family:var(--ed-serif);font-size:20px;font-weight:700;margin:0 0 9px;color:var(--ed-ink)}
.docpg .cols3d p{font-size:16px;line-height:1.55;color:var(--ed-ink2);margin:0}
@media(max-width:760px){.docpg .cols3d{grid-template-columns:1fr;gap:20px}}
/* pull-quote юриста — во всю колонку, амбер */
.docpg .pull{margin:38px 0;border-left:3px solid var(--ed-amber);background:var(--ed-amber-soft);padding:24px 28px;border-radius:0 7px 7px 0}
.docpg .pull .q{font-family:var(--ed-serif);font-size:21px;line-height:1.44;color:var(--ed-ink);display:block}
.docpg .pull .q b{color:var(--ed-amber)}
.docpg .pull .cred{display:flex;align-items:center;gap:13px;margin-top:18px}
.docpg .pull .cred .a{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--ed-amber);color:var(--ed-amber);display:grid;place-items:center;font-family:var(--ed-serif);font-weight:700;flex:none}
.docpg .pull .cred .nm{font-size:16.5px;font-weight:700;color:var(--ed-ink)}
.docpg .pull .cred .rl{font-size:15px;color:var(--ed-amber)}
/* Комментарии юриста к пунктам — раскрывашки; в документ не печатаются */
.docpg .lnotes-lead{font-size:15px;color:var(--ed-ink2);margin:-4px 0 14px}
.docpg .lnotes{border-top:1px solid var(--ed-line,#e4e1d8);margin-bottom:34px}
.docpg .lnotes-i{border-bottom:1px solid var(--ed-line,#e4e1d8)}
.docpg .lnotes-i summary{cursor:pointer;list-style:none;padding:14px 30px 14px 0;position:relative;font-family:var(--ed-serif);font-size:18px;font-weight:700;color:var(--ed-ink)}
.docpg .lnotes-i summary::-webkit-details-marker{display:none}
.docpg .lnotes-i summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;font-weight:400;color:var(--ed-amber)}
.docpg .lnotes-i[open] summary::after{content:"−"}
.docpg .lnotes-b{padding:0 0 14px;border-left:3px solid var(--ed-amber);padding-left:16px;margin-bottom:14px}
.docpg .lnotes-b p{font-size:16px;line-height:1.55;color:var(--ed-ink2);margin:0 0 9px}
.docpg .lnotes-b p:last-child{margin-bottom:0}
.docpg .lnotes-b b{color:var(--ed-ink)}
/* FAQ — всегда раскрыт */
.docpg .faq2 .item{padding:0 0 22px}
.docpg .faq2 h3{font-family:var(--ed-serif);font-size:19px;font-weight:700;margin:0 0 8px;color:var(--ed-ink)}
.docpg .faq2 p{font-size:16px;line-height:1.55;color:var(--ed-ink2);margin:0}
/* Те же два столбца, что и у .ed-faq, и по той же причине (см. комментарий там). */
@media(min-width:1400px){
.docpg .faq2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;align-items:start}
}
/* отзывы с текстом */
.docpg .revs{display:grid;grid-template-columns:1fr 1fr;gap:24px 36px}
.docpg .rev .rst{color:var(--ed-amber);font-size:15px;margin-bottom:9px;letter-spacing:1px}
.docpg .rev .rq{font-family:var(--ed-serif);font-size:17.5px;line-height:1.5;color:var(--ed-ink);display:block}
.docpg .rev .rm{font-size:15px;color:var(--ed-ink2);margin-top:10px}
.docpg .rev .rm b{color:var(--ed-ink);font-weight:700}
@media(max-width:760px){.docpg .revs{grid-template-columns:1fr}}
/* share-строка */
.docpg .sharebar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:15px;color:var(--ed-ink2);margin-top:40px;border-top:1px solid var(--ed-line);padding-top:22px}
.docpg .sharebar .s{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1px solid var(--ed-line);border-radius:7px;color:var(--ed-ink2);cursor:pointer;font-size:14px;text-decoration:none;background:#fff}
.docpg .sharebar .s:hover{border-color:var(--ed-accent);color:var(--ed-accent)}
/* липкий рейл цены «Скачать и получить» */
/* Коробка покупки. Была скромной карточкой: белый фон, волосок рамки, заголовок в один ряд
с остальным текстом. На странице, которая должна продавать, главный блок не может весить
столько же, сколько соседний абзац. Шапка вынесена в плашку на всю ширину коробки (поля
съедаются отрицательным margin — отдельная обёртка в разметке для этого не нужна), рамка
получила тень и больший радиус. */
.docpg .pr-box{border:1px solid var(--ed-line);border-top:3px solid var(--ed-accent);border-radius:10px;
background:#fff;padding:24px;box-shadow:0 6px 22px rgba(23,20,13,.07)}
.docpg .pr-box .price-h{font-family:var(--ed-serif);font-size:19px;font-weight:700;color:var(--ed-ink);
margin:-24px -24px 2px;padding:15px 24px;background:var(--ed-accent-soft,#F1F3FD);
border-bottom:1px solid var(--ed-line-soft,#F1EDE4);border-radius:9px 9px 0 0}
/* Строки предложения. Раньше они шли впритык (9px по вертикали, разделитель-волосок) и
склеивались в сплошной серый текст, а выделенная строка получала фон без вертикальных
отступов — буквы упирались в край плашки. Теперь строка — это строка: воздух сверху и снизу
одинаковый, а выделение расширяется на те же поля, что и сама коробка. */
.docpg .pr-box .opt{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid var(--ed-line-soft,#F1EDE4)}
.docpg .pr-box .opt:first-of-type{border-top:none;padding-top:16px;align-items:center;gap:18px}
.docpg .pr-box .opt .n{font-size:16px;font-weight:600;color:var(--ed-ink)}
.docpg .pr-box .opt .n .s{display:block;font-size:13.5px;line-height:1.45;color:var(--ed-ink2);font-weight:400;margin-top:4px}
.docpg .pr-box .opt .v{font-weight:700;font-size:15.5px;white-space:nowrap;color:var(--ed-ink)}
/* Цена товара — самое крупное число на экране. Раньше 299 ₽ шли тем же кеглем, что и слово
«смотреть» строкой ниже: взгляд не находил, сколько это стоит, и цена не работала ни как
довод, ни как фильтр. */
.docpg .pr-box .opt:first-of-type .v{font-size:30px;line-height:1.05;font-weight:800;
color:var(--ed-accent-ink,#2b3aad);letter-spacing:-.01em}
.docpg .pr-box .opt:first-of-type .v.free{font-size:23px;color:var(--green,#137a3f)}
.docpg .pr-box .opt .v.free{color:var(--ed-accent)}
/* Колонка действия у образца и бланка. Раньше здесь стояло «бесплатно» тем же начертанием,
что и цена, — и читалось как «этот формат стоит ноль». Просмотр на экране ценой не является:
начертание обычное, цвет приглушённый, слово — действие, а не сумма. */
.docpg .pr-box .opt .v.look{font-weight:600;font-size:14px;color:var(--ed-ink2)}
.docpg .pr-box a.opt-link:hover .v.look{color:var(--ed-accent)}
.docpg .pr-box .trust{font-size:13.5px;color:var(--ed-ink2);text-align:center;margin-top:14px;line-height:1.5}
.docpg .pr-box .trust b{color:var(--ed-amber)}
.docpg .pr-box .pay{display:flex;justify-content:center;gap:8px;font-size:13.5px;color:var(--ed-ink2);margin-top:10px}
.docpg .pr-box .pay b{color:var(--ed-ink)}
.docpg .packbox{border:1px solid var(--ed-line);border-radius:7px;background:var(--ed-amber-soft);padding:20px}
.docpg .packbox .k{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ed-amber);margin-bottom:9px}
.docpg .packbox .nm{font-family:var(--ed-serif);font-weight:700;font-size:19px;margin-bottom:7px;color:var(--ed-ink)}
.docpg .packbox .dd{font-size:15px;color:var(--ed-ink2);margin-bottom:14px}
/* ── Первый экран страницы документа (пересборка 25.07.2026) ────────────────────────────
Задача: на первом экране должно быть видно ЧТО это, ЧТО закрепляет, ЧТО настраивается
и СКОЛЬКО стоит — без прокрутки. Раньше там были только заголовок и полоса цифр,
а три одинаковые кнопки «Заполнить онлайн» были размазаны по всей странице. */
.docpg .doc-lead{margin:10px 0 0;font-size:17px;line-height:1.55;color:var(--ink2,#444);max-width:62ch}
/* Порядок действий под главной кнопкой: человек видит цену в кнопке и тут же читает,
что платит не сейчас. Без этой строки цена в кнопке читается как «оплата прямо сюда». */
.docpg .pr-seq{margin:10px 0 0;text-align:center;font-size:13px;line-height:1.5}
/* Главная кнопка — в полный рост коробки: она и есть действие, ради которого блок существует. */
.docpg .pr-box .cta{padding:16px 20px;font-size:16.5px;border-radius:9px}
/* «Что документ закрепляет» — карточка, а не абзац на фоне страницы. Блок стоит на первом
экране и перечисляет предмет документа, но выглядел бледнее соседнего «Настраивается под вашу
ситуацию», который всего лишь считает виды. Рамка и подложка те же, что у .doc-opts, — блоки
первого экрана должны читаться как один ряд, а не как случайные куски текста. */
.docpg .doc-key{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
/* Подписи блоков первого экрана — настоящие h2 (раньше div: у страницы с восемью смысловыми
блоками в структуре было три заголовка). Гарнитуру задаём явно: `.ed-page h2` выше по файлу
включает serif, и смена тега без этой строки поменяла бы вид блоков. */
.docpg .doc-key-title{font-family:inherit;font-weight:700;font-size:15px;line-height:1.35;color:var(--ink);letter-spacing:0;margin:0 0 9px}
.docpg .doc-key-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 22px}
.docpg .doc-key-list li{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;line-height:1.45;color:var(--ink2,#444);min-width:0;
padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--bg)}
.docpg .doc-key-list li svg{flex:none;margin-top:2px}
@media(max-width:640px){.docpg .doc-key-list{grid-template-columns:1fr}}
.docpg .doc-opts{margin:18px 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.docpg .doc-opts-title{font-family:inherit;font-weight:700;font-size:15px;line-height:1.35;color:var(--ink);letter-spacing:0;margin:0 0 10px}
.docpg .doc-opts-row{display:flex;flex-wrap:wrap;gap:8px}
.docpg .doc-opt{display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--ink2,#444);text-decoration:none;background:#fff}
.docpg .doc-opt b{font-size:15px;color:var(--ink);font-weight:700}
.docpg a.doc-opt:hover{border-color:var(--ed-accent);color:var(--ink)}
.docpg .doc-opts-note{margin:10px 0 0;line-height:1.5}
/* Блок покупки первого экрана: платная строка + главный CTA + две бесплатные строки-ссылки.
Бесплатные строки — это и есть действия (раньше те же два пункта стояли в коробке дважды:
некликабельной строкой прайса и кнопкой под ней). Рамка и стрелка показывают, что строка
кликабельна, — без них ссылка неотличима от соседней платной строки-описания. */
.docpg .pr-box .pr-or{display:flex;align-items:center;gap:10px;margin:16px 0 4px;font-size:13px;color:var(--ed-ink2)}
.docpg .pr-box .pr-or::before,.docpg .pr-box .pr-or::after{content:"";flex:1;height:1px;background:var(--ed-line-soft,#F1EDE4)}
.docpg .pr-box a.opt-link{border:1px solid var(--ed-line);border-radius:9px;padding:13px 16px;margin-top:9px;text-decoration:none;color:inherit}
.docpg .pr-box a.opt-link:hover{border-color:var(--ed-accent)}
.docpg .pr-box a.opt-link:hover .n{color:var(--ed-accent)}
.docpg .pr-box .pr-signals{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center;margin-top:16px}
/* Подвал коробки покупки: рейтинг и способ оплаты. Две строки точек («★ 4.8 DOCX · PDF · ODT»
и «МИР · СБП · чек по 54-ФЗ») читались как обрывки — теперь это подвал с линией сверху,
отделённый от строк прайса, и в нём одна мысль на строку. */
.docpg .pr-box .pr-foot{margin-top:16px;padding-top:13px;border-top:1px solid var(--ed-line-soft,#F1EDE4);
display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--ed-ink2)}
.docpg .pr-box .prf-rate{display:flex;align-items:baseline;gap:6px;color:var(--ed-ink)}
.docpg .pr-box .prf-rate .st{color:var(--ed-amber,#b26a00);font-size:15px;line-height:1}
.docpg .pr-box .prf-rate b{font-size:15px;font-weight:700}
.docpg .pr-box .prf-pay{display:flex;align-items:flex-start;gap:7px;line-height:1.45}
.docpg .pr-box .prf-pay .ic{flex:none;margin-top:2px;color:var(--ed-ink2)}
.docpg .pr-box .prf-pay b{color:var(--ed-ink);font-weight:700}
/* ── Состав документа (вместо полного предпросмотра) ──────────────────────────────────── */
.docpg .doc-struct{padding:18px 20px 16px;font-family:var(--ed-serif,Georgia,serif)}
.docpg .doc-struct-title{font-weight:700;font-size:17px;text-align:center;color:var(--ed-ink,#22201c);margin-bottom:16px;line-height:1.35}
.docpg .ds-open{margin-bottom:13px}
/* Номер раздела — кружок слева, а не цифра с точкой в начале строки. Заголовок пункта у юриста
часто уже начинается со своего номера («1. Общие положения»), и на странице выходило
«2. 1. Общие положения»: две нумерации в одной строке. Авторский номер теперь снимает
clause_label(), а собственный вынесен из текста в отдельный знак — спорить стало нечему. */
.docpg .ds-n{display:flex;align-items:flex-start;gap:9px;font-weight:700;font-size:14.5px;color:var(--ed-ink,#22201c)}
.docpg .ds-nn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
margin-top:1px;border-radius:50%;background:var(--tint-2);color:var(--accent-ink);
font-family:var(--sans);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.docpg .ds-frag{margin:3px 0 0 30px;font-size:14px;line-height:1.55;color:var(--ed-ink2,#5b564d)}
.docpg .ds-rest{margin:0;padding-left:1.35em;display:grid;gap:5px;font-size:14.5px;line-height:1.45;color:var(--ed-ink,#22201c)}
.docpg .ds-rest li{padding-left:2px}
.docpg .ds-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--sans,system-ui,sans-serif);line-height:1.5}
/* Состав документа: галочки «что внутри» вместо продолжения нумерации пунктов. */
.ds-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.ds-checks li{display:flex;align-items:flex-start;gap:8px;min-width:0}
.ds-checks li .ic{flex:none;width:16px;height:16px;margin-top:2px;color:var(--green)}
.ds-checks li span{min-width:0}
@media (max-width:760px){.ds-checks{grid-template-columns:1fr}}
/* Системное ТЗ §4.1 — второй уровень пунктов. Отступ и более мелкий кегль делают вложенность
видимой с одного взгляда; счётчик «5 подпунктов» стоит рядом с заголовком раздела там, где
сами подпункты не перечисляем (списки-галочки и без того плотные). */
.ds-subs{list-style:none;margin:5px 0 0 30px;padding:0 0 0 14px;border-left:2px solid var(--line-2,#e3ded4);display:grid;gap:3px;font-size:13.5px;line-height:1.45;color:var(--ed-ink2,#5b564d)}
.ds-subs li{min-width:0}
.ds-sub-n{display:inline-block;min-width:2.4em;font-variant-numeric:tabular-nums;color:var(--ed-ink,#22201c)}
.ds-subn{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--muted,#7a7469)}
/* Приложения в составе документа: отдельный блок, а не пункты вперемешку с телом договора. */
.ds-apps{margin-top:15px;padding-top:13px;border-top:1px dashed var(--line-2,#e3ded4)}
.ds-apps-h{font-family:var(--sans,system-ui,sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.ds-apps-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ds-apps-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:14.5px;line-height:1.45}
.ds-app-n{flex:none;font-weight:700;color:var(--ed-ink,#22201c)}
.ds-app-t{min-width:0;color:var(--ed-ink2,#5b564d)}
/* ── «Как это работает» (заменило дубль главного CTA) ─────────────────────────────────── */
.docpg .doc-how{margin:0;padding-left:1.25em;display:grid;gap:12px;font-size:14.5px;line-height:1.55;color:var(--ink2,#444)}
.docpg .doc-how b{color:var(--ink);font-weight:700}
.docpg .doc-how-foot{display:flex;align-items:flex-start;gap:7px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line);line-height:1.5}
.docpg .doc-how-foot svg{flex:none;margin-top:2px}
/* ── Нормативная база: название + описание нормы ──────────────────────────────────────── */
.docpg .lawrefs{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.docpg .lawrefs li{display:flex;align-items:flex-start;gap:9px;min-width:0}
.docpg .lawrefs li>svg{flex:none;margin-top:3px}
.docpg .lawrefs .lr-b{min-width:0}
.docpg .lawrefs .lr-h{font-size:15px;line-height:1.4;color:var(--ed-ink,#22201c);font-weight:600}
.docpg .lawrefs .lr-t{font-weight:400;color:var(--ed-ink2,#5b564d)}
.docpg .lawrefs .lr-s{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--ed-ink2,#5b564d)}
/* Правый рейл низа: доверие вместо второго прайса. */
.docpg .sidenote{border:1px solid var(--ed-line);border-radius:7px;background:#fff;padding:18px}
.docpg .sidenote .k{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ed-ink2,#5b564d);margin-bottom:9px}
.docpg .sidenote p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:var(--ed-ink2,#5b564d)}
/* Финальный CTA-баннер: один на страницу, для дочитавших. */
.docpg .doc-final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:8px 0 40px;padding:22px 26px;border:1px solid var(--ed-line);border-top:3px solid var(--ed-accent);border-radius:7px;background:var(--ed-amber-soft,#fbf7ef)}
.docpg .doc-final .df-h{font-family:var(--ed-serif);font-weight:700;font-size:21px;line-height:1.25;color:var(--ed-ink,#22201c)}
.docpg .doc-final .df-s{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--ed-ink2,#5b564d)}
.docpg .doc-final .df-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
@media(max-width:600px){.docpg .doc-final{padding:18px}.docpg .doc-final .df-a{width:100%}.docpg .doc-final .df-a .btn{flex:1 1 100%;justify-content:center}}
/* ── Лёгкая editorial-обёртка для второстепенных страниц: белый фон + serif-заголовки,
без сброса отступов (утилиты отступов .mt- и .mb- сохраняем — они нужны страницам
с несколькими секциями).
ВНИМАНИЕ: не писать здесь «.mt-*» со слэшем сразу после звёздочки — эта пара
символов закрывает комментарий досрочно. Именно так и было до 26.07.2026:
комментарий обрывался, остаток строки браузер читал как селектор, а по правилам
восстановления после ошибки отбрасывал его вместе со следующим блоком — то есть
правило .edp{background:#fff} на проде не применялось вообще. ── */
.edp{background:#fff;color:var(--ed-ink)}
.edp h1,.edp h2,.edp h3{font-family:var(--ed-serif);letter-spacing:-.01em;color:var(--ed-ink);font-weight:700}
.edp .page-title,.edp .h1{font-family:var(--ed-serif);letter-spacing:-.02em}
.edp .lead{color:var(--ed-ink2)}
.edp .card,.edp .card-link,.edp .list-card{border-radius:7px}
/* ── Отдельное пространство редактора (layouts.editor) ── */
body.edit-shell{background:var(--bg)}
.edit-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.edit-top .brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);text-decoration:none;font-size:16px}
.edit-top .et-title{font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.edit-top .et-sp{flex:1}
.edit-top .et-back{display:inline-flex;align-items:center;gap:6px;color:var(--subtle);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.edit-top .et-back:hover{color:var(--ink)}
.edit-top{padding-left:24px;padding-right:24px}
.edit-main{flex:1;padding:16px 0 40px}
.edit-varbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.ed-guestbar{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px 14px;margin:0 0 16px}
.ed-guestbar-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media(max-width:640px){.edit-top .brand span{display:none}.edit-top .et-title{max-width:60vw;font-size:13.5px}}
/* Блоки «черновик» и «справочник» в форме — с боковыми отступами (не впритык к краям панели) */
.wiz-card > .notice,.wiz-card > [data-req-toolbar]{margin-left:24px;margin-right:24px}
/* Шапка стороны: заголовок + справочник этой стороны в одну строку, с разделителем снизу */
.party-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line-soft,#EFF1F4)}
.party-req{display:inline-flex;align-items:center;gap:8px}
.party-req select[data-party-picker]{max-width:190px;font-size:13.5px;padding:6px 8px}
.party-req .btn{white-space:nowrap}
.party-req .party-req-msg{flex-basis:100%;color:var(--accent);font-size:12.5px;margin-top:2px}
@media(max-width:560px){.party-req{width:100%;justify-content:flex-start}.party-req select[data-party-picker]{flex:1;max-width:none}}
/* Редактор — рабочее пространство во всю ширину/высоту (как Word/Acrobat): слева форма (только поля,
скроллятся), справа документ на светлом холсте (скроллится сам), внизу панель-статусбар со всеми
действиями и масштабом. Страница целиком не едет. Всё scoped под .edit-shell. */
.edit-shell .wrap{max-width:none;padding-left:24px;padding-right:24px}
.edit-shell .wiz{grid-template-columns:minmax(340px,440px) 1fr;gap:20px}
/* КРИТИЧНО: у мастера v2 три колонки (разделы | форма | документ), а не две. Правило выше по
специфичности равно `.wiz.wiz-v3` и стоит ниже в файле, поэтому раньше перебивало его: третий
ребёнок (предпросмотр) уезжал в НЕЯВНУЮ вторую строку шириной первой колонки, а строка формы,
заданная как minmax(0,1fr), схлопывалась в ноль. Наружу это выглядело так: узкий лист документа
слева, пустое поле справа и никакой формы. Явные три колонки — и раскладка снова та, что в макете. */
.edit-shell .wiz.wiz-v3{grid-template-columns:minmax(190px,230px) minmax(340px,440px) minmax(0,1fr)}
/* Предохранитель: любой лишний прямой ребёнок сетки не должен уметь создать новую строку и
обнулить форму — неявные строки схлопываем, а не растягиваем. */
.edit-shell .wiz{grid-auto-rows:0}
/* Нижняя панель-статусбар */
.edit-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 24px;background:var(--surface);border-top:1px solid var(--line);margin:12px -24px 0}
.edit-bar .eb-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.edit-bar .eb-div{width:1px;height:22px;background:var(--line);margin:0 4px}
.edit-bar .eb-zoom{display:inline-flex;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.edit-bar .eb-zbtn{width:28px;height:28px;border:none;background:transparent;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.edit-bar .eb-zbtn:hover{background:rgba(0,0,0,.06)}
.edit-bar .eb-zoom .dpv-zval{font-size:13px;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted)}
@media(min-width:941px){
body.edit-shell{height:100vh;overflow:hidden}
.edit-shell .edit-main{flex:1;min-height:0;overflow:hidden;padding:12px 0 0;display:flex;flex-direction:column}
.edit-shell .edit-main > .wrap{flex:none}
.edit-shell #zapolnit{flex:1;min-height:0;display:flex;flex-direction:column}
.edit-shell .wiz{flex:1;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
/* В редакторе страница не прокручивается (body overflow:hidden), поэтому sticky-позиционирование
колонки разделов бессмысленно, а `top:78px` (запас под шапку сайта) просто опускал её вниз под
несуществующую шапку. Колонка живёт на всю высоту рабочей области и прокручивается сама —
иначе документ с 12+ разделами вылезал за нижнюю границу экрана и обрезался. */
.edit-shell .wiz-nav{position:static;top:auto;align-self:stretch;min-height:0;overflow-y:auto;padding-right:4px}
.edit-shell .wiz-card{max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.edit-shell .wiz-card > *{flex:none}
.edit-shell .wiz-card > .wiz-lock{flex:1;min-height:0;display:flex;flex-direction:column}
.edit-shell .wiz-lock .wiz-body{flex:1;min-height:0;overflow-y:auto}
.edit-shell .wiz-preview{position:relative;top:0;height:100%;max-height:100%;margin:0;overflow:hidden;padding:30px 40px;background:#f1f0ed;border-radius:12px}
.edit-shell .wiz-preview .doc-preview{max-width:820px;height:100%;margin:0 auto;display:flex;flex-direction:column;border:none;border-radius:8px;box-shadow:0 8px 34px -14px rgba(20,18,12,.22)}
.edit-shell .wiz-preview .doc-preview-scroll{flex:1;min-height:0;max-height:none;overflow-y:auto}
.edit-shell .doc-preview-body{padding:52px 60px}
.edit-shell .edit-bar{flex:none;margin-bottom:0}
}
@media(max-width:940px){
/* Обе записи обязательны: `.wiz-v3` выше по специфичности, одним `.edit-shell .wiz` его
трёхколоночную раскладку на узком экране уже не перебить. Плюс снимаем grid-auto-rows:0,
иначе в одноколоночном режиме строки схлопнутся вместе с контентом. */
.edit-shell .wiz,
.edit-shell .wiz.wiz-v3{grid-template-columns:1fr;grid-auto-rows:auto}
.edit-shell .wiz-preview{padding:16px;position:relative;background:#f1f0ed;border-radius:12px}
.edit-shell .doc-preview-body{padding:30px 24px}
.edit-shell .wrap{padding-left:16px;padding-right:16px}
.edit-bar{position:sticky;bottom:0;z-index:50;margin:12px -16px 0}
}
/* Тизер-предпросмотр на лендинге документа (конструктор переехал в редактор) */
.doc-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.doc-teaser-prev{position:relative}
.doc-teaser-fade{position:absolute;left:1px;right:1px;bottom:1px;height:60px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;border-radius:0 0 10px 10px}
.doc-teaser-cta{align-self:start;padding:22px}
@media(max-width:900px){.doc-teaser{grid-template-columns:1fr}}
/* P2-11: карточки видов на странице-группе документа */
.vg-label{font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.03em;font-size:12px;margin-bottom:9px}
.vg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.vg-card{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border:1px solid var(--line);border-radius:9px;background:var(--surface);text-decoration:none;transition:border-color .12s,box-shadow .12s}
.vg-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.vg-card-nm{font-weight:600;color:var(--ink);font-size:15px;line-height:1.3}
.vg-card-aud{font-size:12.5px;color:var(--subtle)}
.vg-card-go{font-size:13px;font-weight:600;color:var(--accent);margin-top:4px}
/* Главная: «Как это работает» — 3 шага (убедительность + визуальный ритм) */
.hiw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hiw-step{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;transition:border-color .15s,box-shadow .15s}
.hiw-step:hover{border-color:var(--accent);box-shadow:0 4px 18px rgba(31,58,95,.06)}
.hiw-step .hiw-n{position:absolute;top:10px;right:18px;font-family:var(--serif);font-size:56px;font-weight:700;color:var(--tint-2,#eef1f7);line-height:1;pointer-events:none}
.hiw-step .hiw-ic{width:30px;height:30px;color:var(--accent);margin-bottom:12px;stroke-width:1.7;position:relative}
.hiw-step h3{font-size:17px;font-weight:700;margin:0 0 6px;position:relative}
.hiw-step p{font-size:14.5px;color:var(--muted);line-height:1.5;margin:0;position:relative}
@media(max-width:760px){.hiw{grid-template-columns:1fr}}
/* build: full-css-check 2026-07-15e — «Как это работает» на главной */
/* ── Страницы форм по номеру (/form/{nomer}) и карта сайта (/sitemap) ────────
Отдельная секция: эти классы используются только на справочных страницах,
поэтому вынесены в конец файла и не конфликтуют с каталогом. */
.form-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin:20px 0}
.form-meta .fm-item{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.form-meta .fm-l{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.form-meta .fm-v{font-size:14.5px;line-height:1.5;color:var(--ink)}
@media(max-width:760px){.form-meta{grid-template-columns:1fr}}
.form-cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;margin:24px 0}
.form-cta--soft{background:var(--surface-2);border-style:dashed}
.form-cta-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.checklist{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.checklist li{position:relative;padding-left:24px;font-size:15px;line-height:1.55;color:var(--muted)}
.checklist li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.45}
@media(max-width:760px){.checklist{grid-template-columns:1fr}}
.note{background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:14px 18px;font-size:14.5px;line-height:1.6;color:var(--muted);margin:18px 0}
.note strong{color:var(--ink)}
.smap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 28px}
@media(max-width:980px){.smap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.smap-grid{grid-template-columns:1fr}}
.smap-col{min-width:0}
.smap-h{font-size:15.5px;font-weight:700;margin-bottom:8px}
.smap-h a{color:var(--ink)}
.smap-h a:hover{color:var(--accent)}
.smap-l{display:block;font-size:14.5px;line-height:1.75;color:var(--muted)}
.smap-l:hover{color:var(--accent)}
.smap-flow{display:flex;flex-wrap:wrap;gap:6px 18px}
.smap-flow a{font-size:14.5px;line-height:1.7;color:var(--muted)}
.smap-flow a:hover{color:var(--accent)}
/* ── Поиск в шапке (§навигация 1.1) ──────────────────────────────────────────
Поиск — центральный всегда развёрнутый элемент, а не иконка в углу: это
главный вход на сервисе документов. На узких экранах схлопывается — там
вход в поиск первым пунктом бургера. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.header-search{flex:1 1 380px;max-width:480px;margin:0 20px;display:flex;align-items:center;gap:8px;
background:var(--surface);border:1px solid #D8DEE7;border-radius:8px;padding:0 6px 0 12px;height:42px;
transition:border-color .12s,box-shadow .12s}
.header-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.header-search .hs-ic{flex:none;width:17px;height:17px;color:var(--faint)}
.header-search input{flex:1;min-width:0;border:none!important;background:none;padding:0;height:100%;
font-size:14.5px;box-shadow:none!important;outline:none;color:var(--ink)}
.header-search input::placeholder{color:var(--faint)}
.header-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.hs-go{flex:none;border:none;background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:600;
padding:0 14px;height:32px;border-radius:6px;cursor:pointer}
.hs-go:hover{background:var(--accent-ink)}
.hs-mob{display:none}
/* Ступени сжатия шапки. Порядок жертв задан явно, потому что «само» получалось наоборот —
ужимался логотип. Сначала уходят дополнительные пункты меню (они дублируются в футере и
бургере), потом кнопка «Найти», потом поле поиска целиком. Логотип и главный CTA — не трогаем. */
@media (max-width:1320px){.header-left{gap:20px}.nav{gap:17px}.nav .navbtn-extra{display:none}}
@media (max-width:1180px){.header-search{flex-basis:230px;margin:0 14px;padding-right:12px}.hs-go{display:none}
.header-left{gap:16px}.nav{gap:14px;font-size:14px}}
@media (max-width:1040px){.header-search{display:none}.hs-mob{display:flex}}
@media (max-width:560px){.hs-mob{display:none}} /* на телефоне — первый пункт бургера */
/* ── Большой футер (§навигация 1.3) ──────────────────────────────────────────
8 блоков, ~80 ссылок. На десктопе — сетка 4×2, на мобиле аккордеоны
(правила ниже 720px уже есть выше по файлу). */
.footer-top{padding-bottom:26px}
.footer-top .logo{color:#fff;margin-bottom:12px}
.footer-top p{font-size:14px;line-height:1.65;color:#a49f97;max-width:520px;margin:0}
.footer-grid-lg{grid-template-columns:repeat(4,1fr);gap:26px 30px;padding-bottom:30px}
.footer-grid-lg .footer-col{font-size:14px;line-height:1.95;min-width:0}
.footer-grid-lg .footer-col a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer-more{color:#e7e3db!important;font-weight:600}
@media(max-width:1000px){.footer-grid-lg{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.footer-grid-lg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.footer-grid-lg{grid-template-columns:1fr;gap:0}
.footer-grid-lg .footer-col a{white-space:normal}}
.footer-pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px;color:#8f8a83}
.footer-pay .ic{width:16px;height:16px;flex:none}
.footer-pay span+.ic{margin-left:8px}
.footer-disclaimer{font-size:13px;line-height:1.6;color:#8f8a83;max-width:820px}
.footer-disclaimer a{color:#c9c6bf;text-decoration:underline}
.footer-disclaimer a:hover{color:#fff}
/* ── Главная: микро-доверие, чипы, таблица сравнения, SEO-текст ──────────────── */
.hero-trust{font-size:13.5px;line-height:1.6;color:var(--faint);margin:14px auto 0;max-width:620px}
/* Те же обещания в точке решения — на карточке документа, под кнопками. Не серым: это не
примечание, а половина ответа на вопрос «почему 299, если рядом бесплатный бланк». */
.pr-trust{font-size:13px;line-height:1.55;color:var(--muted);margin:10px 0 0;padding:9px 12px;background:var(--surface-2);border-radius:7px}
@media(max-width:560px){
/* Чипы быстрых входов скроллятся горизонтально, а не рвут первый экран на 4 строки */
.chips-scroll{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start!important;
margin-left:-16px;margin-right:-16px;padding:2px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips-scroll::-webkit-scrollbar{display:none}
.chips-scroll .chip{flex:none;white-space:nowrap}
}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);font-size:15px}
.cmp-table th{text-align:left;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:13px 18px;background:var(--surface-2);color:var(--subtle);border-bottom:1px solid var(--line)}
.cmp-table th:last-child{color:var(--accent)}
.cmp-table td{padding:13px 18px;line-height:1.5;border-bottom:1px solid var(--line-2);vertical-align:top;width:50%}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table td:first-child{color:var(--faint)}
.cmp-table td:last-child{color:var(--ink);font-weight:500;border-left:1px solid var(--line-2)}
@media(max-width:640px){
.cmp-table,.cmp-table tbody,.cmp-table tr,.cmp-table td{display:block;width:auto}
.cmp-table thead{display:none}
.cmp-table tr{border-bottom:1px solid var(--line);padding:4px 0}
.cmp-table tr:last-child{border-bottom:none}
.cmp-table td{border:none;padding:6px 16px}
.cmp-table td:first-child::before{content:"Шаблон: ";font-weight:600;color:var(--subtle)}
.cmp-table td:last-child::before{content:"Примадок: ";font-weight:600;color:var(--accent)}
}
.seo-text{max-width:900px;font-size:15px;line-height:1.7;color:var(--muted)}
.seo-text p+p{margin-top:12px}
.seo-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Табличные справочники (календари, МРОТ, районный коэффициент) — 07.09.2026.
Обёртка .table-scroll даёт горизонтальный скролл на мобиле вместо переполнения страницы:
тут не карточки в столбик (как .cmp-table), а честная таблица данных на 3-12 колонок. */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;border:1px solid var(--line);border-radius:var(--radius-lg)}
.data-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
.data-table th{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
padding:11px 16px;background:var(--surface-2);color:var(--subtle);border-bottom:1px solid var(--line);white-space:nowrap}
.data-table td{padding:11px 16px;line-height:1.5;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:nth-child(even) td{background:var(--surface-2)}
.data-table td.num,.data-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.data-table .dim{color:var(--faint)}
.data-table tr.is-cur td{background:#F1F3FD}
/* Карточки-плашки итогов (дней в году и т.п.) — переиспользуем сетку .form-meta с другим числом колонок. */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin:20px 0}
.stat-grid .sg-item{background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:4px;text-align:center}
.stat-grid .sg-v{font-size:26px;font-weight:800;color:var(--ink)}
.stat-grid .sg-l{font-size:12.5px;color:var(--subtle)}
@media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
/* Саджест в шапке позиционируется относительно самой строки поиска */
.header-search{position:relative}
/* ===== Микрокопия: легенда к жёлтой подсветке под живым предпросмотром =====
Жёлтый блок в тексте без пояснения читается как ошибка. Легенда переводит его
в «сюда впишется ваш ответ» и показывает образец цвета — тот же, что у .doc-ph. */
.prev-legend{ display:flex; align-items:flex-start; gap:8px; margin:10px 2px 0;
font-size:13px; line-height:1.45; color:var(--subtle) }
.prev-legend-sw{ flex:none; width:16px; height:16px; margin-top:1px; border-radius:5px;
background:#FFF3C4; border:1px dashed #D6D0C4 }
/* ===== Микрокопия «после оплаты»: что делать с готовым документом =====
Момент после скачивания — единственный, где человек остаётся один на один с файлом.
Три шага вместо «спасибо за покупку» снимают самый частый вопрос в поддержку. */
.next-steps{ margin-top:16px; padding:14px 16px; border-radius:12px;
background:var(--soft,#f5f6f8); border:1px solid var(--line) }
.next-steps-h{ font-weight:700; font-size:14px; margin-bottom:8px }
.next-steps ol{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:13px; line-height:1.5 }
/* ===== «Как это работает» на странице комплекта =====
Номера шагов теми же кружками, что и «Порядок действий» у ситуации — один
визуальный язык для последовательностей по всему сайту. */
.pkg-how-n{ flex:0 0 auto; width:24px; height:24px; border-radius:50%;
background:var(--accent); color:#fff; font-weight:700; font-size:13px;
display:inline-flex; align-items:center; justify-content:center }
.pkg-how li{ line-height:1.55 }
/* Чеклист «Что понадобится» на странице ситуации. */
.sit-check li{ line-height:1.5 }
/* Надфутер «Нужного документа нет в каталоге?» — последний экран контента, а не колонка подвала.
Тёмный футер съедал этот блок: на его фоне призыв к действию выглядел служебной сноской рядом
с реквизитами. Полоса сидит на белом фоне контента и отделена сверху линией, а не заливкой:
бежевая заливка между контентом и подвалом читалась как артефакт вёрстки. */
/* Префутер «Не нашли, что искали». Был белым как страница и отделялся только волоском сверху —
то есть выглядел не отдельным блоком, а хвостом контента, приклеенным вплотную. Даём ему тот же
фон, что у шапки: страница получает видимую нижнюю границу, а линия становится не нужна. */
.prefooter-ask{background:var(--bg);border-top:0;margin-top:52px;padding:38px 0 44px}
.prefooter-ask .pf-card{display:flex;align-items:center;justify-content:space-between;gap:28px;
padding:24px 28px;border:1px solid var(--tint-line);border-radius:var(--radius);background:#fff}
.prefooter-ask .pf-tx{min-width:0}
.prefooter-ask h2{margin:0;font-size:21px;line-height:1.3;letter-spacing:-.01em}
.prefooter-ask p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:74ch}
.prefooter-ask .btn{flex:none;white-space:nowrap}
@media(max-width:760px){
.prefooter-ask{margin-top:32px;padding:26px 0 30px}
.prefooter-ask .pf-card{flex-direction:column;align-items:flex-start;gap:18px;padding:20px}
.prefooter-ask h2{font-size:19px}
.prefooter-ask .btn{width:100%;text-align:center}
}
/* Шаг ситуации: сверху текст шага, снизу строка с документом, которым он закрывается. Раньше в
строке было только название документа и цена — половина карточки пустовала, а сами шаги
лежали в правой колонке, где длинный текст не читается. */
.sit-steps li .tx{margin:0;font-size:15.5px;line-height:1.55;color:var(--ed-ink)}
/* Строка документа внутри шага — НЕ карточка.
Утилитарный класс .row (он же у полей формы) приносит сюда рамку, скругление, фон и отбивку
15/18 px: внутри шага получалась вложенная коробка со случайными отступами, а рамка у неё
рисовалась только сверху. Гасим всё, что пришло от утилиты, и оставляем один разделитель. */
.sit-steps li .tx + .row{margin:0;padding:9px 0 0;border:0;border-top:1px solid var(--ed-line-soft);
border-radius:0;background:none}
.sit-steps .row .dn{flex:1;min-width:180px;font-weight:600;color:var(--ed-ink2)}
.ed-kicker-link{text-decoration:none}
.ed-kicker-link:hover{text-decoration:underline}
.ed-rmore{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--ed-accent)}
/* ===== Главная: полоса плюсов под героем =====
Тёмная секция «Ревизия юриста» стояла в самом низу страницы — доводы нужны до того, как
человек решил уйти. Полоса светлая и без рамок вокруг секции: она продолжение первого
экрана, а не отдельный баннер. */
.plus-band{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.plus-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 34px}
.plus{display:flex;align-items:flex-start;gap:12px;min-width:0}
.plus>.ic{width:24px;height:24px;flex:none;color:var(--accent);margin-top:1px}
.plus b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.plus span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:960px){.plus-row{grid-template-columns:1fr 1fr;gap:16px 24px}}
@media(max-width:640px){.plus-band{padding:18px 0}.plus-row{grid-template-columns:1fr;gap:14px}}
/* ===== Главная: «Почему Примадок» =====
Заменила таблицу «чем это отличается от бесплатного шаблона»: две колонки серого текста
расползались по ширине, левая половина была посвящена тому, чего у нас нет. Здесь шесть
утверждений о том, что есть, — каждое отдельной карточкой, чтобы взгляд цеплялся за тезис. */
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-card{display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);
border-radius:var(--radius);background:var(--surface)}
.why-card>.ic{width:26px;height:26px;color:var(--accent);margin-bottom:12px}
.why-card b{font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.25;color:var(--ink);margin-bottom:7px}
.why-card span{font-size:14.5px;line-height:1.55;color:var(--muted)}
@media(max-width:960px){.why-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why-cards{grid-template-columns:1fr;gap:12px}.why-card{padding:17px}}
/* ===== Главная: SEO-текст внизу страницы =====
Абзацы лежали голым текстом сразу над подвалом и читались как обрывок вёрстки. Карточка
на подложке отделяет справочный текст от продающих блоков, не выдавая его за один из них. */
.seo-block{padding:26px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.seo-block .h2{font-size:clamp(20px,2vw,24px)}
.seo-block .seo-text{max-width:none}
@media(max-width:640px){.seo-block{padding:20px 18px}}
/* Иконка типа документа в карточке каталога: карточка документа и карточка комплекта
отличались только текстом. Название теперь в рядом с иконкой — flex, чтобы
вторая строка названия не подъезжала под иконку. */
.ed-dcard .nm{display:flex;align-items:flex-start;gap:10px}
.ed-dcard .dc-ic{flex:none;width:20px;height:20px;margin-top:4px;color:var(--ed-accent);opacity:.9}
/* ===== Надфутер: два действия и строка ожиданий =====
Одна кнопка на канцелярском тексте читалась как заявка в ведомство. У человека, который не
нашёл нужного документа, чаще вопрос «а чем это вообще решается», а не готовая заявка. */
.prefooter-ask .pf-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.prefooter-ask .pf-eyebrow .ic{width:16px;height:16px}
.prefooter-ask .pf-facts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.prefooter-ask .pf-facts li{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted)}
.prefooter-ask .pf-facts .ic{width:16px;height:16px;flex:none;color:var(--green)}
.prefooter-ask .pf-act{display:flex;flex-direction:column;gap:10px;flex:none}
.prefooter-ask .pf-act .btn{width:100%;text-align:center;justify-content:center}
@media(max-width:760px){
.prefooter-ask .pf-act{width:100%}
.prefooter-ask .pf-facts{gap:8px 16px}
}
/* ===== Мега-меню «Комплекты»: строки вместо крупных плиток =====
Шесть плиток с рамкой в три колонки занимали пол-экрана. Строка держит те же данные
(иконка, название, состав, цена) в одну линию: при том же месте влезает вдвое больше. */
.mega-pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 28px}
.mega-pkg{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);
font-size:14px;font-weight:600;color:var(--ink);min-width:0}
.mega-pkg:hover{color:var(--accent)}
.mega-pkg>.ic{width:17px;height:17px;flex:none;color:var(--accent);stroke-width:1.6}
.mega-pkg .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.mega-pkg .s{display:block;font-size:12.5px;font-weight:500;color:var(--faint)}
.mega-pkg .p{flex:none;color:var(--accent);font-weight:700}
@media(max-width:1100px){.mega-pkgs{grid-template-columns:1fr 1fr}}
/* ── Каталог: два входа, хиро раздела ───────────────────────────────────────────
§каталог: «не понятно по какому критерию сгруппированные элементы — толи по ситуации,
толи по нише». Каталог группирует по типу документа, ситуации — по задаче; пока это
нигде не сказано, оба списка выглядят как два случайных набора. Блок объясняет разницу
и одновременно работает переходом между разделами. */
.two-ways{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tw-card{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
a.tw-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(20,40,80,.07)}
.tw-here{background:var(--tint-soft);border-color:var(--tint-line)}
.tw-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.tw-ic .ic{width:20px;height:20px;color:var(--accent)}
.tw-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tw-b b{font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tw-b span{font-size:14px;line-height:1.45;color:var(--muted)}
.tw-badge{font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--accent);background:var(--tint);border-radius:var(--radius-pill,999px);padding:2px 8px}
.tw-go{flex:none;width:18px;height:18px;color:var(--faint);align-self:center}
a.tw-card:hover .tw-go{color:var(--accent)}
@media (max-width:760px){.two-ways{grid-template-columns:1fr}}
/* Хиро раздела L1. Фон — мягкая заливка страницы, а не тёмная плашка: тёмные полосы на
сайте уже убраны как артефакт. Крупная иконка справа рисуется тем же спрайтом, что и
маленькая, — второго набора графики держать не нужно. */
.cat-hero{position:relative;overflow:hidden;margin:14px 0 26px;padding:26px 30px;border:1px solid var(--tint-line);border-radius:var(--radius-lg,12px);background:linear-gradient(135deg,var(--tint-soft) 0%,var(--surface) 62%)}
.cat-hero .ch-art{position:absolute;right:-26px;top:50%;transform:translateY(-50%);width:210px;height:210px;color:var(--accent);opacity:.07;pointer-events:none}
.cat-hero .ch-art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}
.cat-hero .ch-in{position:relative;max-width:70ch}
.cat-hero .ch-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;background:var(--surface);border:1px solid var(--tint-line);margin-bottom:14px}
.cat-hero .ch-ic .ic{width:23px;height:23px;color:var(--accent)}
.cat-hero .ch-h1{font-family:var(--serif);font-weight:700;font-size:clamp(27px,3.2vw,38px);line-height:1.1;letter-spacing:-.015em;margin:0 0 10px}
.cat-hero .ch-lead{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 16px;max-width:62ch}
.cat-hero .ch-facts{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--subtle);margin-bottom:18px}
.cat-hero .ch-facts span{display:inline-flex;align-items:center;gap:6px}
.cat-hero .ch-facts b{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}
.cat-hero .ch-facts .ic{width:16px;height:16px;color:var(--green)}
.cat-hero .ch-act{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.cat-hero{padding:22px 18px;margin:10px 0 22px}.cat-hero .ch-art{width:150px;right:-38px;opacity:.05}.cat-hero .ch-act .btn{flex:1 1 100%;justify-content:center}}
/* ── Виджет «Поделиться» (partials/share-widget) ──────────────────────────────
Общий для страницы документа, ситуации, комплекта и статьи. Раньше шеринг был
текстовой строкой «TG VK @ Почта» и только на документе. Кнопки — знаками, с
фирменным цветом на наведении; «скопировать ссылку» подтверждает действие. */
.share-w{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.share-w .sw-lbl{font-size:14px;color:var(--subtle);font-weight:600}
.share-w .sw-btns{display:flex;flex-wrap:wrap;gap:8px}
.share-w .sw-b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--subtle);cursor:pointer;transition:color .15s,border-color .15s,background .15s;position:relative}
.share-w .sw-b .ic{width:19px;height:19px}
.share-w .sw-b:hover{background:var(--surface);border-color:currentColor}
.share-w .sw-telegram:hover{color:#2AABEE}
.share-w .sw-whatsapp:hover{color:#25D366}
.share-w .sw-vk:hover{color:#0077FF}
.share-w .sw-ok:hover{color:#EE8208}
.share-w .sw-max:hover{color:#7C3AED}
.share-w .sw-mail:hover,.share-w .sw-copy:hover{color:var(--accent)}
.share-w .sw-copy.is-done{color:var(--green);border-color:var(--green)}
.share-w .sw-copy.is-done::after{content:'Ссылка скопирована';position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 7px);white-space:nowrap;font-size:12px;line-height:1;padding:6px 9px;border-radius:6px;background:var(--ink);color:#fff}
.share-w .sw-aside{margin-left:auto;font-size:14px}
.share-w .sw-help{color:var(--accent);font-weight:600;text-decoration:none}
.share-w .sw-help:hover{text-decoration:underline}
@media (max-width:560px){.share-w .sw-aside{margin-left:0;flex-basis:100%}}
/* ── Суб-страницы документа: /download, /blank, /sample ─────────────────────────
Три страницы были голым заголовком и парой кнопок, ходивших по кругу. Теперь у
них общая шапка-тизер (public/partials/doc-subpage-hero) с ценой и составом
предложения, а ниже — по одному блоку содержания. Классы sp-* только здесь. */
.sp-badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-ink);background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--radius-pill);padding:5px 10px}
.sp-gains{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.sp-gains li{display:flex;align-items:flex-start;gap:9px;font-size:15px;line-height:1.45;color:var(--muted)}
.sp-gains li .ic{flex:none;width:17px;height:17px;margin-top:2px;color:var(--green)}
.sp-gains li b{color:var(--ink);font-weight:600}
/* Выделенная строка — плашка, а не подкрашенный фон под текстом: ей нужны свои поля со всех
четырёх сторон, иначе буквы упираются в край. Волосок над ней и под ней убираем — разделитель
и заливка на одной границе спорят друг с другом. */
.doc-hero-side .pr-box .opt.is-here{background:var(--tint-soft);border-radius:var(--radius);box-shadow:inset 3px 0 0 var(--accent);
padding:13px 12px;margin:0 -12px;border-top-color:transparent}
.doc-hero-side .pr-box .opt.is-here+.opt{border-top-color:transparent}
.doc-hero-side .pr-box .opt.is-here .n{padding-left:2px}
.sp-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.sp-fmt{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-2);padding:14px 15px;min-width:0}
.sp-fmt b{display:block;margin:9px 0 4px;font-size:15px;color:var(--ink)}
.sp-fmt span:not(.sp-fi){display:block;font-size:13.5px;line-height:1.45;color:var(--subtle)}
.sp-fi{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);color:var(--accent)}
.sp-fi .ic{width:17px;height:17px}
@media (max-width:760px){.sp-formats{grid-template-columns:1fr}}
.sp-sheet-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 12px}
.sp-sheet-head .card-title{margin:0}
.sp-notes{display:grid;gap:14px;margin-top:12px}
.sp-note{padding-left:13px;border-left:2px solid var(--tint-line)}
.sp-note-t{font-weight:600;font-size:15px;color:var(--ink);margin-bottom:3px}
/* Печать: с /blank и /sample печатают лист документа, а не шапку, кнопки и подвал. */
@media print{
body.is-printing-sheet .site-header,body.is-printing-sheet .site-footer,
body.is-printing-sheet .prefooter,body.is-printing-sheet .crumbs,
body.is-printing-sheet .doc-hero,body.is-printing-sheet .doc-final,
body.is-printing-sheet .share-w,body.is-printing-sheet .rail,
body.is-printing-sheet .sp-sheet-head,
body.is-printing-sheet section.mt-26,body.is-printing-sheet .card,
body.is-printing-sheet .prose{display:none !important}
body.is-printing-sheet [data-sheet]{margin:0 !important}
body.is-printing-sheet [data-sheet] .doc-sheet{box-shadow:none !important;border:0 !important;padding:0 !important;max-width:none !important}
}
/* ── Ситуация: шаги, боковая кнопка ────────────────────────────────────────────
«Порядок действий» — главный смысл страницы ситуации, а выглядел как список
одинаковых белых прямоугольников: у шага без документа под текстом висела одна
метка «обязательно» в пустой строке. Теперь метка стоит в строке текста, шаги
связаны вертикальной нитью (видно, что это последовательность), а у документа
шага появилось действие «Заполнить →» прямо в редактор. */
.sit-steps{position:relative;gap:8px}
.sit-steps::before{content:'';position:absolute;left:16px;top:24px;bottom:24px;width:2px;background:var(--tint-line);border-radius:2px}
/* Плотнее: шаг — строка чек-листа, а не карточка товара. Шаг без документа при прежних отступах
выглядел пустой коробкой, потому что занимал столько же места, сколько шаг с документом. */
.sit-steps li{position:relative;z-index:1;padding:12px 15px;box-shadow:0 1px 2px rgba(28,27,25,.04)}
.sit-steps li .dd{gap:0}
.sit-steps li .n{width:27px;height:27px;font-size:13.5px;box-shadow:0 0 0 4px var(--bg)}
.sit-steps li .tx .tag{display:inline-block;margin-left:9px;font-size:12px;font-weight:600;line-height:1;padding:4px 8px;border-radius:var(--radius-pill);color:var(--subtle);background:var(--surface-2);border:1px solid var(--line);vertical-align:2px;white-space:nowrap}
.sit-steps li .tx .tag.req{color:#166b47;background:rgba(31,138,91,.08);border-color:rgba(31,138,91,.24)}
.sit-steps .row{align-items:center;gap:9px}
.sit-steps .row .dic{flex:none;width:17px;height:17px;color:var(--accent)}
.sit-steps .row a{flex:0 1 auto;min-width:0}
.sit-steps .row .pr{margin-left:2px}
.sit-steps .row .go{margin-left:auto;flex:none;font-size:13.5px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.sit-steps .row .go:hover{text-decoration:underline}
@media (max-width:560px){
.sit-steps::before{display:none}
.sit-steps .row .go{margin-left:0;flex-basis:100%}
}
/* ── Страница комплекта: состав и смысловые блоки ─────────────────────────────
Заголовки «Что решает», «Кому подходит», «Как это работает» стояли на mb-6 и
мельче, чем FAQ ниже: подзаголовок прилипал к тексту, а сама страница читалась
как черновик. Один ритм на все блоки комплекта. */
.pkg-sec{margin-top:30px;padding-top:24px}
.pkg-sec h2{font-size:22px;line-height:1.28;font-weight:700;margin:0 0 12px}
.pkg-sec h2.pkg-sub{margin-top:28px}
.pkg-sec p{font-size:16px;line-height:1.62;color:var(--muted);margin:0 0 14px;max-width:66ch}
.pkg-sec p:last-child{margin-bottom:0}
.pkg-sec .chips{margin-top:2px}
.pkg-how{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:66ch}
.pkg-how li{display:flex;gap:12px;align-items:baseline;font-size:16px;line-height:1.6;color:var(--muted)}
.pkg-how li b{color:var(--ink);font-weight:600}
.pkg-cta-line{margin:20px 0 0}
/* Состав комплекта: документ описан так же, как в каталоге, а не одной строкой
«входит в комплект» — иконка типа, короткое описание, объём, время и розничная цена. */
.pkg-items{display:grid;gap:10px;margin-top:2px}
.pkg-item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;align-items:start;
border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:15px 16px}
.pi-ic{width:38px;height:38px;border-radius:var(--radius);background:var(--tint);border:1px solid var(--tint-line);
color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.pi-ic .ic{width:19px;height:19px}
.pi-b{min-width:0}
.pi-t{font-size:16px;font-weight:600;line-height:1.35}
.pi-t a{color:var(--ink);text-decoration:none}
.pi-t a:hover{color:var(--accent)}
.pi-d{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--subtle)}
.pi-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:9px;font-size:13.5px;color:var(--faint)}
.pi-m span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pi-m .ic{width:15px;height:15px;flex:none}
.pi-m .pi-p{margin-left:auto;color:var(--subtle);font-weight:600}
@media (max-width:560px){
.pkg-item{grid-template-columns:30px minmax(0,1fr);gap:11px;padding:13px 14px}
.pi-ic{width:30px;height:30px}
.pi-ic .ic{width:16px;height:16px}
.pi-m .pi-p{margin-left:0;flex-basis:100%}
}
/* ── Радио-карточки в формах сайта (b2b) ────────────────────────────────────
Нативная «точка» в паре подписей выглядела съехавшей и не отвечала на вопрос
«что сейчас выбрано»: подсветки не было ни у метки, ни у строки. Рисуем свою
метку и подсвечиваем всю карточку — выбор виден без вчитывания. */
.opt-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt-card{position:relative;display:flex;gap:11px;align-items:flex-start;padding:13px 15px;
border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;
transition:border-color .12s,background .12s}
.opt-card:hover{border-color:#B7C0CC}
.opt-card input{position:absolute;opacity:0;width:0;height:0;margin:0}
.opt-card .mark{flex:0 0 18px;height:18px;margin-top:2px;border:1.5px solid #cfd6df;border-radius:50%;
background:var(--surface);position:relative;transition:border-color .12s,background .12s}
.opt-card input:checked~.mark{border-color:var(--accent);background:var(--accent)}
.opt-card input:checked~.mark::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;background:#fff;border-radius:50%}
.opt-card input:focus-visible~.mark{box-shadow:0 0 0 3px var(--tint)}
.opt-card:has(input:checked){border-color:var(--accent);background:var(--tint-soft)}
.opt-card .t{display:block;font-size:15px;font-weight:600;line-height:1.3}
.opt-card .d{display:block;font-size:13px;line-height:1.4;color:var(--subtle);margin-top:3px}
.field-row.fr-2-1{grid-template-columns:minmax(0,1fr) 170px}
.b2b-sum{margin-top:14px;padding:11px 14px;border:1px solid var(--tint-line);border-radius:var(--radius);
background:var(--tint-soft);font-size:15px;color:var(--muted)}
.b2b-sum b{font-size:17px;color:var(--ink)}
@media (max-width:640px){
.opt-cards{grid-template-columns:1fr}
.field-row.fr-2-1{grid-template-columns:1fr}
}
/* ── Поиск: заголовки групп результатов ────────────────────────────────────
`.rail>h2{margin:0 0 12px}` перебивалось идущим ниже по файлу `.ed-page h2{margin:0}`
(специфичность равная — побеждает последнее правило), и подписи «Ситуации», «Статьи»
прилипали к карточкам. Отдельный блок с собственным отступом от этой пары не зависит. */
.srch-sec{margin:34px 0 0}
.srch-sh{display:flex;align-items:baseline;gap:10px;margin:0 0 16px}
.srch-sh h2{font-size:22px;margin:0;line-height:1.2}
.srch-sh .cnt{font-size:14px;font-weight:600;color:var(--faint)}
.srch-sh .srch-all{margin-left:auto;font-size:14px;font-weight:600;color:var(--accent);white-space:nowrap;text-decoration:none}
.srch-sh .srch-all:hover{text-decoration:underline}
@media (max-width:760px){
.srch-sec{margin-top:26px}
.srch-sh h2{font-size:19px}
}
/* ══════════════════════════════════════════════════════════════════════════════
МОБИЛЬНАЯ ВЁРСТКА — сводный блок
──────────────────────────────────────────────────────────────────────────────
Жалоба владельца: «почти все страницы — главная, документ, ситуация, поиск,
комплект, инфо — кривые в моб. версии». Аудит на 390px (Chromium, iPhone-профиль)
показал четыре системные причины, а не десяток частных багов:
1) Двухколоночные сетки заданы ИНЛАЙН-стилем (style="grid-template-columns:1fr 1fr"),
поэтому ни одно медиа-правило их не перебивало: на /contacts страница уезжала
вправо на 95px, боковая карточка сжималась до 109px и текст рвался по слогам.
2) Кнопки .btn имеют white-space:nowrap. Растянутая на всю ширину кнопка с длинным
текстом («Заполнить: Договор купли-продажи доли в ООО») не переносится и вылезает
за карточку на 49px.
3) Строки «заголовок + ссылка справа» (.ed-sh, .row-between) не переносятся:
ссылка со white-space:nowrap выдавливалась за экран, когда заголовок в две строки.
4) Поисковая форма на мобиле раскладывалась так, что лупа оставалась одна на первой
строке, а поле ввода уезжало на вторую — коробка выглядела сломанной.
Блок идёт последним в файле сознательно: он должен побеждать по порядку следования,
а инлайн-сетки перебиваются !important — иначе никак, стиль стоит в атрибуте.
══════════════════════════════════════════════════════════════════════════════ */
/* ── 1. Сетки в одну колонку ──────────────────────────────────────────────── */
@media (max-width:760px){
/* .grid сама по себе колонок не задаёт — они всегда приходят из инлайн-стиля
конкретной страницы. Поэтому схлопывание в одну колонку здесь безопасно. */
.grid{grid-template-columns:1fr!important}
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:560px){
.grid-cards{grid-template-columns:1fr}
}
/* ── 2. Кнопки: перенос вместо выезда за экран ────────────────────────────── */
@media (max-width:760px){
.btn{white-space:normal;text-wrap:balance;min-width:0}
/* Кнопка на всю ширину карточки не должна быть уже содержимого своего текста. */
.cat-hero .ch-act .btn,.doc-final .df-a .btn{max-width:100%}
}
/* ── 3. Строки «заголовок + ссылка» переносятся ───────────────────────────── */
@media (max-width:760px){
.ed-sh,.row-between,.sec-head,.ed-sec-h{flex-wrap:wrap;align-items:flex-start;gap:6px 14px}
.ed-sh h2,.row-between h2,.sec-head h2{font-size:22px;line-height:1.2;min-width:0}
.ed-sh a,.row-between a,.sec-head a{white-space:normal}
.ed-sh-more{white-space:normal}
}
/* ── 4. Поисковая коробка: лупа и поле в одной строке, кнопка снизу ───────── */
@media (max-width:560px){
.search{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;
gap:8px 10px;padding:12px 14px}
.search .ic{grid-column:1;grid-row:1}
.search input{grid-column:2;grid-row:1;width:100%;padding:4px 0;min-height:38px}
/* Кнопка в поисковой коробке размечена по-разному: на главной это .btn, в каталоге и
справочнике — .ed-btn. Селектор по классу ловил только первую, и на /catalog кнопка
«Найти» падала в колонку лупы шириной 20px и вылезала из коробки. Берём любую кнопку. */
.search button,.search .btn,.search .ed-btn{grid-column:1/-1;grid-row:2;width:100%;margin-top:2px}
.search .suggest-pop{grid-column:1/-1}
}
/* ── 5. Cookie-полоса ─────────────────────────────────────────────────────── */
/* Правило @media(max-width:400px) стояло в файле ВЫШЕ правила @media(max-width:560px),
поэтому на телефоне побеждало второе (flex-direction:row) и кнопки «Принять» /
«Отклонить» выдавливали текст, а на /contacts вылезали за экран на 74px. */
@media (max-width:430px){
.cookie-bar{flex-direction:column;align-items:stretch;gap:9px}
.cookie-bar>span:first-child{-webkit-line-clamp:3}
.cookie-bar .cookie-actions{justify-content:stretch;gap:8px}
.cookie-bar .cookie-actions .btn{flex:1 1 0;min-width:0}
}
/* ── 6. Метаданные документа: бейджи «кому подходит» переносятся ──────────── */
.stats .stat{flex-wrap:wrap;min-width:0}
@media (max-width:640px){
.stats{gap:8px 14px}
.stats .stat{row-gap:6px}
}
/* ── 7. Общая защита от горизонтального скролла ───────────────────────────── */
@media (max-width:760px){
html,body{overflow-x:hidden}
/* Длинные слова и адреса (ОГРН, e-mail, «Бухвостова») не растягивают карточку. */
.card,.prose,.rows,.ds-frag,.doc-body{overflow-wrap:break-word;min-width:0}
h1,h2,h3,.h1,.h2,.h3{overflow-wrap:break-word}
table{max-width:100%}
/* Свёрнутое облако видов: 150px на телефоне резало вторую строку чипов пополам. */
.chips-collapsed{max-height:196px}
}
/* ── 8. Комфортные тапы ───────────────────────────────────────────────────── */
@media (max-width:640px){
.chip{min-height:36px;display:inline-flex;align-items:center}
.footer-col a,.link-arrow{min-height:36px}
}
/* ── 9. Поле с кнопкой-помощником (ИНН на /b2b) ───────────────────────────── */
/* .flexrow держит поле и кнопку «Заполнить по ИНН» в одной строке. Кнопка размечена
с white-space:nowrap и на 360px занимает 230px из 320 — под сам ИНН оставалось меньше
ста пикселей, и введённые цифры не были видны целиком. На узком экране кнопка уходит
под поле: это единственная раскладка, при которой оба элемента остаются рабочими. */
@media (max-width:560px){
.field>.flexrow{flex-wrap:wrap}
.field>.flexrow>input,.field>.flexrow>select{flex:1 1 100%;max-width:100%}
.field>.flexrow>.btn{flex:1 1 100%;justify-content:center}
}
/* ── 10. Крупные заголовки и цифры не переполняют экран ───────────────────── */
@media (max-width:560px){
.hero h1,.ed-hero h1,.cat-hero h1{font-size:clamp(26px,7.4vw,34px);line-height:1.15}
.num-xl,.stat-num,.ds-num{overflow-wrap:break-word}
}
/* ── 11. Полоска «что внутри документа»: ровная сетка вместо рваного flex ── */
/* Четыре показателя во flex-wrap на 360px ложились как 3 + 1: последний «6 мин чтения»
висел отдельной строкой с разделителем слева, будто продолжение первого ряда. */
@media (max-width:560px){
.doc-inside-strip{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:12px 0}
.dis-item{padding:2px 0 2px 14px}
.dis-item:nth-child(odd){padding-left:0;border-left:0}
.dis-item:first-child{padding-left:0}
}
/* §3.4 — статическая сетка бланка на 6+ граф: на странице /blank и /sample ужимаем кегль,
иначе журнал учёта на шесть колонок ломает сетку листа. */
.doc-table-wide{font-size:.8em}
.doc-table-wide th{padding:1.6mm 1mm}
/* Строки бланка держим повыше: по ним ведут ручкой. */
.doc-table-wide td{padding:2.2mm 1mm}
/* Подпись сервиса внутри документа: одинаково в предпросмотре, по ссылке и в PDF. */
.doc-disclaimer{margin-top:22px;font-size:12px;font-style:italic;color:var(--faint)}
/* ─── Сферы (жизненные ситуации): /situations, /situations/{group}, /situation/{slug} ───────
Четырнадцать направлений и под семьдесят ситуаций шли одним типом блока — «h2, сетка,
тонкая линия, h2, сетка». Отличить сферу от сферы можно было только прочитав заголовок,
а на странице направления шапки не было вовсе. Иконка сферы одна и та же в меню, в списке
и на странице направления (sit_group_icon), поэтому направление узнаётся, а не вычитывается. */
.chip-sph{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.chip-sph .ic{width:16px;height:16px;flex:none;color:var(--accent);stroke-width:1.7}
.chip-sph .subtle{font-weight:500}
.ichip-sm{width:30px;height:30px;border-radius:6px}
.ichip-sm .ic{width:17px;height:17px}
.ichip-hero{width:56px;height:56px;border-radius:10px}
.ichip-hero .ic{width:28px;height:28px}
/* Мини-шапка сферы в списке: полоса фона + иконка + счётчики. Полоса нужна больше линии —
она видна боковым зрением при прокрутке и отвечает «здесь началась новая сфера». */
.sph-head{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:18px;
border:1px solid var(--ed-line);border-radius:var(--ed-rad);background:var(--ed-accent-soft)}
.sph-head .ichip{background:#fff;color:var(--ed-accent)}
.sph-head .tt{min-width:0;flex:1}
.sph-head h2{font-family:var(--ed-serif);font-size:23px;line-height:1.15;color:var(--ed-ink);margin:0}
.sph-head .mt{margin:5px 0 0;font-size:13.5px;color:var(--ed-ink2)}
.sph-head .sph-more{flex:none;font-size:14.5px;font-weight:600;color:var(--ed-accent);text-decoration:none;white-space:nowrap}
.sph-head .sph-more:hover{text-decoration:underline}
.sph-note{margin:-8px 0 16px;font-size:14.5px;color:var(--ed-ink2);max-width:72ch}
/* Линию между сферами убрали: её работу теперь делает шапка, а вместе они читались как
двойной разделитель. */
.sit-group + .sit-group{margin-top:34px;padding-top:0;border-top:0}
/* Шапка страницы направления. */
.sph-hero{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;margin:6px 0 26px;
border:1px solid var(--ed-line);border-radius:var(--ed-rad);background:var(--ed-accent-soft)}
.sph-hero .ichip{background:#fff;color:var(--ed-accent)}
.sph-hero .tx{min-width:0}
.sph-hero .ed-kicker{margin-bottom:8px}
.sph-hero .ed-lead{margin:12px 0 0;max-width:62ch}
.sph-hero .ed-seg{margin-top:16px}
/* Карточка ситуации: иконка рядом с названием. Без неё сетка из девяти карточек была
девятью абзацами текста — зацепиться глазу не за что. */
.ed-sit .hd{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.ed-sit .hd .nm{margin:0;min-width:0}
.ed-sit .hd .ichip{background:var(--ed-accent-soft);color:var(--ed-accent)}
.ed-sit:hover .hd .ichip{background:var(--ed-accent);color:#fff}
/* «С чего начать» — единственный цветной блок страницы ситуации, во всю ширину под шапкой. */
.sit-start{display:flex;align-items:center;gap:16px;margin-top:22px;padding:18px 20px;
border:1px solid var(--ed-line);border-radius:var(--ed-rad);background:var(--ed-accent-soft)}
.sit-start .ichip{background:#fff;color:var(--ed-accent)}
.sit-start .tx{flex:1;min-width:0}
.sit-start .k{display:block;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ed-accent)}
.sit-start .nm{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--ed-ink)}
.sit-start .ac{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:7px}
.sit-start .ac .btn{white-space:nowrap;justify-content:center}
.sit-start .alt{font-size:13px;color:var(--ed-ink2);text-decoration:none;text-align:center}
.sit-start .alt:hover{color:var(--ed-accent)}
/* Комплект в правой колонке — строками самой колонки, без вложенной карточки. */
.sit-pkg .nm{display:flex;align-items:center;gap:9px;font-family:var(--ed-serif);font-weight:700;
font-size:17px;line-height:1.25;color:var(--ed-ink);text-decoration:none}
.sit-pkg .nm .ic{width:18px;height:18px;flex:none;color:var(--ed-accent)}
.sit-pkg .nm:hover{color:var(--ed-accent)}
.sit-pkg .mt{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--ed-ink2)}
.sit-pkg .pr{display:flex;align-items:baseline;gap:9px;margin:12px 0 12px}
.sit-pkg .pr b{font-size:21px;color:var(--ed-ink)}
.sit-pkg .pr s{font-size:14px;color:var(--ed-ink2)}
.sit-pkg .pr .disc{font-size:12.5px;font-weight:700;color:#166b47;background:rgba(31,138,91,.09);
border:1px solid rgba(31,138,91,.22);border-radius:var(--radius-pill,999px);padding:3px 8px}
.sit-pkg .btn{width:100%;justify-content:center}
@media (max-width:860px){
.sph-hero{flex-direction:column;gap:14px;padding:18px 18px}
.sit-start{flex-wrap:wrap}
.sit-start .ac{width:100%}
}
@media (max-width:640px){
.sph-head{flex-wrap:wrap;gap:12px;padding:13px 15px}
.sph-head .sph-more{flex-basis:100%}
.sph-head h2{font-size:20px}
.sit-start{gap:13px;padding:15px 16px}
.sit-start .ichip{display:none}
}
/* ── Русский календарь у полей даты (assets/datepicker.js) ───────────────────────────────
Попап лежит в и позиционируется fixed: внутри поля он попадал бы под overflow
формы и обрезался. Ширина фиксированная — сетка 7×6 не должна «плыть» между полями. */
.rudp{position:fixed;z-index:120;display:none;width:268px;padding:10px;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);
font-family:var(--sans);font-size:14px;color:var(--ink)}
.rudp.on{display:block}
.rudp-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.rudp-nav{flex:none;width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);
color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.rudp-nav:hover{border-color:var(--accent);color:var(--accent)}
.rudp-m,.rudp-y{height:28px;min-width:0;border:1px solid var(--line);border-radius:var(--radius);
background:#fff;color:var(--ink);font-family:inherit;font-size:13.5px;padding:0 4px;cursor:pointer}
.rudp-m{flex:1}
.rudp-y{flex:none;width:72px}
.rudp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;
font-size:11.5px;font-weight:600;color:var(--subtle);text-align:center}
.rudp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.rudp-e{height:32px}
.rudp-d{height:32px;border:1px solid transparent;background:transparent;border-radius:var(--radius);
font-family:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.rudp-d:hover{background:var(--tint)}
/* Сегодня — обводкой, выбранное — заливкой: два разных факта, их нельзя показывать одинаково. */
.rudp-d.now{border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.rudp-d.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.rudp-f{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)}
.rudp-b{flex:1;height:30px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);
font-family:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.rudp-b:hover{border-color:var(--accent);color:var(--accent)}
/* ═══════════════════════════════════════════════════════════════════════════
Журнал: читаемость статьи, оглавление, врезки — 21.08.2026
═══════════════════════════════════════════════════════════════════════════
Палитра НЕ менялась намеренно. В ТЗ предлагались токены #1A1D21 / #4A525E /
#1F5FD0, но у нынешних цветов контраст на белом выше по всем трём позициям:
текст 18.4:1 против 16.9:1, приглушённый 11.1:1 против 7.9:1, ссылка
6.3:1 против 5.8:1. Менять было бы ухудшением, поэтому взяты только те
правила §4, которые действительно расходились с продом. */
/* Полоса набора. Была не ограничена: на широком мониторе строка растягивалась
далеко за сотню знаков, и глаз терял начало следующей строки. 720px — это
примерно 72–78 знаков при кегле 18. */
.ed-article{max-width:720px}
.ed-article > *{max-width:100%}
/* Отбивка абзаца была 16px при интерлиньяже 1.72 — межстрочное расстояние почти
равнялось межабзацному, и текст читался сплошным полотном. */
.ed-article p{margin:0 0 22px}
/* Заголовок раздела должен отрываться от предыдущего текста заметно сильнее,
чем от собственного: иначе непонятно, к чему он относится. */
.ed-article h2{margin:44px 0 14px}
.ed-article h3{margin:30px 0 10px}
/* Якоря заголовков: без этого переход по ссылке из оглавления загонял заголовок
под липкую шапку. */
.ed-article h2[id],.ed-article h3[id]{scroll-margin-top:88px}
@media (max-width:768px){
.ed-article{font-size:17px}
.ed-article h2{font-size:23px;margin:34px 0 12px}
.ed-article h3{font-size:19px}
.ed-article h2[id],.ed-article h3[id]{scroll-margin-top:72px}
}
/* ── Оглавление в тексте ───────────────────────────────────────────────────
Раньше оглавление жило только в правой колонке и собиралось на клиенте.
На мобильных правой колонки нет вовсе, то есть на телефоне содержания не было. */
.ed-toc-inline{max-width:720px;margin:24px 0 30px;background:var(--ed-surface,#f5f7fa);
border:1px solid var(--ed-line,#e3e8ef);border-radius:12px;padding:14px 18px}
.ed-toc-inline > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
font-weight:600;color:var(--ed-ink,#17140d)}
.ed-toc-inline > summary::-webkit-details-marker{display:none}
.ed-toc-inline > summary::after{content:'';margin-left:auto;width:8px;height:8px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform .15s;opacity:.55}
.ed-toc-inline[open] > summary::after{transform:rotate(-135deg)}
.ed-toc-inline .n{font-size:13px;font-weight:600;color:var(--ed-ink2,#403b31);opacity:.7;
background:#fff;border:1px solid var(--ed-line,#e3e8ef);border-radius:20px;padding:1px 9px}
.ed-toc-inline ol{margin:12px 0 2px;padding-left:22px}
.ed-toc-inline li{margin:7px 0;line-height:1.45}
.ed-toc-inline a{color:var(--ed-ink,#17140d);text-decoration:none;border-bottom:1px solid transparent}
.ed-toc-inline a:hover{border-bottom-color:currentColor}
@media (max-width:960px){ .ed-toc-inline ol{padding-left:20px} }
/* ── Врезки [note] [warn] [expert] [case] ──────────────────────────────────
Разные по смыслу: примечание, предупреждение, позиция юриста, судебная
практика. Отличаются цветом левой границы и иконкой, а не размером — врезка
не должна перебивать основной текст, она его дополняет. */
.ed-cal{max-width:720px;margin:24px 0;padding:14px 18px 14px 16px;border-radius:10px;
border:1px solid var(--ed-line,#e3e8ef);border-left-width:3px;background:#fff}
.ed-cal > .h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin-bottom:6px}
.ed-cal > .h .ic{width:17px;height:17px;flex:none}
.ed-cal p{margin:0 0 10px}
.ed-cal p:last-child{margin-bottom:0}
.ed-cal-note{border-left-color:#7b8798;background:var(--ed-surface,#f5f7fa)}
.ed-cal-note > .h{color:#4a525e}
.ed-cal-warn{border-left-color:#d9930b;background:#fffaf0}
.ed-cal-warn > .h{color:#8a5a06}
.ed-cal-expert{border-left-color:var(--ed-accent,#3b4ee0);background:var(--ed-surface,#f5f7fa)}
.ed-cal-expert > .h{color:var(--ed-accent,#3b4ee0)}
.ed-cal-case{border-left-color:#3f7d58;background:#f4faf6}
.ed-cal-case > .h{color:#2f6444}
/* Счётчик статей в навигации по рубрикам: раздел с тремя материалами и раздел
с сотней выглядели одинаково. */
.ed-rubnav .n{font-size:12px;opacity:.6;margin-left:3px}
.ed-kicker-link{text-decoration:none}
.ed-kicker-link:hover{text-decoration:underline}
/* ── Таблицы в статье журнала ──────────────────────────────────────────────
До 21.08.2026 в статьях таблиц не было вообще: markdown не конвертировался,
и разметка «| Критерий | Дарение |» печаталась текстом. Когда конвертацию
включили, таблицы появились — и оказалось, что стилей для них не написано
ни одного: браузер рисовал их своими умолчаниями, без линеек и отступов.
Все 22 статьи с таблицами — сравнения на три графы («чем отличаются и что
выбрать»): признак и два сравниваемых варианта. Под этот случай и свёрстано. */
/* Контейнер прокрутки. Таблица шире полосы набора не распирает страницу и не
сжимается в столбики по одному слову — она прокручивается внутри себя. */
.ed-tw{max-width:720px;margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ed-tw::-webkit-scrollbar{height:8px}
.ed-tw::-webkit-scrollbar-thumb{background:#c9d2de;border-radius:4px}
/* `table-layout:fixed` — не для скорости, а ради равных граф: браузер в авторежиме делил
остаток «на глаз» по объёму текста, и два симметричных варианта сравнения получали разную
ширину («Дарение» переносилось вчетверо, «Завещание» вдвое). В фиксированном режиме графы
без явной ширины делят остаток поровну — при любом их числе. */
.ed-article .ed-tw table{width:100%;min-width:540px;border-collapse:collapse;table-layout:fixed;
font-size:16px;line-height:1.45;margin:0}
.ed-article .ed-tw th,
.ed-article .ed-tw td{overflow-wrap:break-word}
/* Шапка: отделена от данных двойной линией — так набирают таблицы в печати,
и так сразу видно, где заканчиваются названия граф и начинаются значения. */
.ed-article .ed-tw th{text-align:left;vertical-align:bottom;font-weight:600;
padding:0 14px 9px;border-bottom:2px solid var(--ed-ink,#17140d);
color:var(--ed-ink,#17140d)}
/* ГЛАВНОЕ: выравнивание по ВЕРХУ. По центру ячейка с одной строкой повисала в
середине высокой соседки, и таблица читалась как рассыпанные слова — ровно то,
что бросалось в глаза. Строки читают по горизонтали, значит начинаться они
должны на одной линии. */
.ed-article .ed-tw td{vertical-align:top;padding:11px 14px;
border-bottom:1px solid var(--ed-line,#e3e8ef)}
.ed-article .ed-tw tr:last-child td{border-bottom:none}
/* Первая графа — признак сравнения, а не данные: это подпись строки, и она держит
строку слева. Не переносим её по буквам и даём чуть больше веса. */
.ed-article .ed-tw td:first-child,
.ed-article .ed-tw th:first-child{padding-left:0}
.ed-article .ed-tw td:first-child{font-weight:600;color:var(--ed-ink,#17140d);width:26%}
.ed-article .ed-tw td:last-child,
.ed-article .ed-tw th:last-child{padding-right:0}
/* Подсветка строки под курсором: в сравнении глаз ходит по горизонтали, и на
третьей-четвёртой строке легко перескочить на соседнюю. */
.ed-article .ed-tw tbody tr:hover td{background:var(--ed-surface,#f5f7fa)}
.ed-article .ed-tw p{margin:0}
@media (max-width:768px){
.ed-article .ed-tw table{font-size:15px;min-width:480px}
.ed-article .ed-tw th{padding:0 10px 8px}
.ed-article .ed-tw td{padding:9px 10px}
.ed-article .ed-tw td:first-child{width:auto}
}
/* Карточки шорткодов внутри статьи — не подчёркиваются.
`.ed-article a` (специфичность 0,1,1) перебивал `text-decoration:none`, заданный самим
`.sc-doc` (0,1,0), и подчёркивание протекало на все карточки: документ, комплект, ситуацию,
раздел каталога и ссылку на госресурс. У карточки есть рамка и фон — она и так читается
ссылкой, а подчёркивание под названием документа рвало её на две строки. */
.ed-article a.sc-doc,
.ed-article a.sc-clsf,
.ed-article a.sc-gov,
.ed-article a.ed-doc-card,
.ed-article .sc-docs a,
.ed-article .sc-package a{text-decoration:none}
.ed-article a.sc-doc:hover,
.ed-article a.sc-clsf:hover,
.ed-article a.sc-gov:hover{text-decoration:none}
/* ══════════════════════════════════════════════════════════════════════════════════════════
РИТМ, ШИРИНА ЧТЕНИЯ И СМЫСЛОВОЙ ЦВЕТ (12.09.2026)
Разбор владельца: «сайт кривоват, какие-то блоки супер широкие, какие-то кривые». Обход
десяти страниц на 1440 и 390 показал три системные болезни, а не десяток частных:
1. Вертикальный ритм набран четырьмя разными шкалами: .section 52px, .section-sm 36px,
.ed-sec 44px, .ed-sec.tight 26px. Одинаковые по смыслу промежутки между секциями на
соседних страницах отличались на 8-16px — глаз читает это как «блоки стоят криво».
2. Абзацы тянулись на всю контентную колонку (1222-1234px = ~150 знаков в строке). Строку
такой длины глаз не дочитывает: он теряет начало следующей. Токены --maxw-read (760)
и --maxw-mid (860) в проекте были, но применялись через раз.
3. Всё белое на белом. Бесплатное и платное, документ и справка, текст и норма выглядели
одинаково — «глаза разбегаются». Роли цвета (--c-free/--c-pay/--c-info/--c-doc/--c-law)
объявлены сверху файла; здесь они впервые применяются по смыслу.
Блок стоит в конце файла намеренно: он правит уже объявленные выше компоненты и должен
выигрывать каскад без гонки специфичностей.
══════════════════════════════════════════════════════════════════════════════════════════ */
/* ── 1. Одна шкала вертикальных отступов ───────────────────────────────────────────────────
Две ступени вместо четырёх: 44px между крупными секциями, 28px между «тесными».
Внутренние отступы блоков не трогаем — речь только о промежутках между секциями. */
.section{padding:44px 0}
.section-sm{padding:28px 0}
.ed-sec{padding:44px 0}
.ed-sec.tight{padding:28px 0}
@media(max-width:760px){
.section{padding:30px 0}
.section-sm,.ed-sec,.ed-sec.tight{padding:24px 0}
}
/* ── 2. Ширина чтения ──────────────────────────────────────────────────────────────────────
«Во всю ширину» остаётся тому, что этого требует: сеткам карточек, таблицам, листу
документа. Сплошной текст ограничен 760px (≈75 знаков) или 860px там, где абзац стоит
рядом с кнопкой и обрыв на 760 выглядел бы случайным. */
.seo-text{max-width:var(--maxw-read)}
/* Тот же текст внутри карточки-подложки: ограничить его 760px значило оставить 500px пустой
подложки справа — ровно тот «супер широкий блок», на который жалуется владелец. Здесь текст
набирается в две колонки: строка получается ~560px (читаемо), а плашка заполнена. */
@media(min-width:1000px){
.seo-block .seo-text{max-width:none;columns:2 400px;column-gap:44px}
.seo-block .seo-text p{margin-top:0}
.seo-block .seo-text p+p{margin-top:12px}
}
.ed-cta .ex{max-width:var(--maxw-mid)}
/* «Собрать свой документ» внизу страницы. Блок был flex-строкой из трёх равноправных детей
(заголовок, пояснение, кнопки), и раскладка зависела от длины текста: пока пояснение шло на
всю ширину — оно занимало вторую строку, а стоило ограничить его шириной чтения, как оно
встало рядом с заголовком. Задаём раскладку явно: слева текстовая колонка, справа действия. */
.docpg .doc-final{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 28px;align-items:center}
.docpg .doc-final .df-h{grid-column:1;grid-row:1}
.docpg .doc-final .df-s{grid-column:1;grid-row:2;max-width:var(--maxw-mid)}
.docpg .doc-final .df-a{grid-column:2;grid-row:1/3;justify-self:end}
@media(max-width:760px){
.docpg .doc-final{grid-template-columns:1fr;gap:8px}
.docpg .doc-final .df-a{grid-column:1;grid-row:auto;justify-self:stretch;margin-top:6px}
}
/* «Что будет в файле»: заголовок стоял по центру, а весь остальной текст страницы — слева,
и карточка читалась как чужая. Список из коротких строк в двух колонках на 1280px оставлял
половину ширины пустой — на широком экране колонок три. */
.docpg .doc-struct-title{text-align:left}
.ds-checks{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
/* Пояснения под заголовком карточки на /download, /blank, /sample: «Оба файла входят в один
заказ…», «На месте данных — прочерки…» — шли на 1143-1234px. */
.docpg .card>p.small.subtle,
.docpg .sp-sheet-head p.small.subtle{max-width:var(--maxw-read)}
/* Подзаголовок секции на главной («Шаблон из интернета — это файл…», «Все документы под одну
задачу…») — абзац между заголовком и сеткой карточек, а не сама сетка. */
.section-sm>.wrap>p.muted,
.section-sm>.wrap>p.small.subtle{max-width:var(--maxw-mid)}
.fbl-note{max-width:var(--maxw-read)}
.docpg .prose{max-width:var(--maxw-read)}
/* ── 3. Первый экран главной ───────────────────────────────────────────────────────────────
Было 796px: на ноутбуке 1440×900 весь первый экран занимали заголовок и поиск, а каталог
и быстрые входы начинались за сгибом. Поиск остаётся главным элементом — ужимаем воздух,
кегль заголовка и высоту плашки со статистикой, ни одного смыслового блока не убирая. */
.hero-inner{padding-block:26px 24px}
.hero .h1{font-size:clamp(27px,3vw,40px);line-height:1.1}
.hero .maxw-hero{max-width:920px}
/* Лид был зажат в 560px и разваливался на три строки. На ширине поиска — две. */
.hero .hero-lead{max-width:var(--maxw-mid);margin-left:auto;margin-right:auto;font-size:16.5px;line-height:1.5}
/* Строка микро-доверия: на 620px она ломалась на две строки ради трёх слов. */
.hero-trust{max-width:820px;margin-top:12px}
/* Плитки частых документов: 8px полей и 14px кегля разворачивали ряд в три строки и одни
только они съедали 117px первого экрана. Плотнее — и ряд снова в две строки. На мобиле
плитки остаются крупными (min-height 36px ниже по файлу), там ряд горизонтальный. */
.hero .chips{gap:6px}
.hero .chips .chip{padding:5px 11px;font-size:13.5px}
/* Вход «по ситуации» — такая же плитка ряда, только акцентная: это вход не по названию
документа, а по задаче, и он не должен теряться среди названий. */
.chip-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;
color:var(--c-pay);background:#fff;border-color:var(--c-pay)}
.chip-more .ic{width:14px;height:14px;stroke-width:2.2}
.chip-more:hover{background:var(--c-pay-bg)}
/* На мобиле ряд плиток превращается в горизонтальную ленту, и последний элемент не виден
без прокрутки. Вход «по ситуации» там нужнее всего — ставим его первым. */
@media(max-width:760px){.chips-scroll .chip-more{order:-1}}
/* Статистика: четыре коробки по 84px высоты превратились в одну строку на тёплой бумаге.
Числа остались крупными, подпись встала рядом, а не под ними. */
.hero-stats{max-width:780px;margin-top:18px;gap:0;
border:1px solid var(--paper-line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.hero-stats .hs{flex-direction:row;align-items:baseline;justify-content:center;gap:7px;
padding:11px 8px;border:none;border-left:1px solid var(--paper-line);background:transparent}
.hero-stats .hs:first-child{border-left:none}
.hero-stats .hs-n{font-size:21px;line-height:1.15}
.hero-stats .hs-l{font-size:13px;text-align:left}
@media(max-width:560px){
.hero-stats{grid-template-columns:1fr 1fr;margin-top:14px}
.hero-stats .hs{border-top:1px solid var(--paper-line)}
.hero-stats .hs:nth-child(-n+2){border-top:none}
.hero-stats .hs:nth-child(odd){border-left:none}
.hero-stats .hs-n{font-size:19px}
}
/* ── 4. Шапка суб-страниц документа: /sample, /blank, /download ────────────────────────────
Было: левая колонка текста кончалась на 110-180px выше правой карточки с ценой, и между
ними зияла пустая полоса во всю ширину — «дыра посередине». Причина не в ширинах, а в том,
что колонки просто разной высоты и никто их низ не выравнивал.
Стало: колонки тянутся на одну высоту, ссылка на основную страницу документа прижата к
низу левой колонки и отбита волоском — она читается как подвал колонки, а пустоты нет.
Карточка при этом стала уже (440 вместо 500): 500px под текст в два-три слова — это и был
«супер широкий блок», а освободившееся место ушло тексту. */
.doc-hero.is-sub{grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:32px;align-items:stretch}
@media(max-width:1240px){.doc-hero.is-sub{grid-template-columns:minmax(0,1fr) 380px;gap:26px}}
.doc-hero.is-sub .doc-hero-main{display:flex}
/* align-items:flex-start обязателен: в колонке-флексе дети растягиваются по ширине, и ярлык
«Образец» превращался в полосу во всю колонку вместо плашки по размеру слова. */
.doc-hero.is-sub .doc-hero-main>header{display:flex;flex-direction:column;flex:1;padding:2px 0 0}
.doc-hero.is-sub .sp-badge{align-self:flex-start}
/* Список выгод — главный текст левой колонки, а шёл он самым плотным на странице (15px/9px).
Дав ему воздух, мы и читаем его легче, и закрываем разницу высот с карточкой цены. */
.doc-hero.is-sub .sp-gains{margin-top:20px;gap:13px}
.doc-hero.is-sub .sp-gains li{font-size:15.5px;line-height:1.5}
/* Карточка цены ужата: 24px полей вокруг короткого текста давали лишние 30px высоты,
из-за которых правая колонка и «провисала» ниже левой. */
.doc-hero.is-sub .pr-box{padding:20px}
.doc-hero.is-sub .pr-box .price-h{margin:-20px -20px 2px;padding:13px 20px}
.doc-hero.is-sub .pr-box .cta{padding:14px 20px}
/* Два второстепенных действия («Пустой бланк» / «О документе») стояли друг под другом на всю
ширину карточки и тянули её вниз на 90px — из-за них правая колонка и была заметно выше
левой. Действия равнозначные, поэтому им место в одной строке. */
.doc-hero.is-sub .pr-free{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.doc-hero.is-sub .pr-free .btn{margin-top:0}
.doc-hero.is-sub .sp-h1{font-size:clamp(26px,3vw,36px);margin-top:10px}
.doc-hero.is-sub .doc-lead{max-width:var(--maxw-read)}
.doc-hero.is-sub .sp-ref{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2)}
@media(max-width:920px){
.doc-hero.is-sub{grid-template-columns:1fr;gap:18px}
.doc-hero.is-sub .sp-ref{margin-top:14px}
}
/* Ярлык страницы («Образец», «Пустой бланк», «Скачивание») говорит о РАЗНОВИДНОСТИ документа —
это роль --c-doc. Раньше он был синим, как и всё остальное, и не отличался от цены и кнопок. */
.sp-badge{color:var(--c-doc);background:var(--c-doc-bg);border-color:transparent}
/* ── 5. Бесплатное — зелёным, платное — акцентом ───────────────────────────────────────────
Главная развилка на странице документа: «получить готовый за 299 ₽» против «скачать бланк
и образец бесплатно». Обе строки были набраны одним синим, и разница читалась только текстом. */
.docpg .pr-box .opt:first-of-type .v{color:var(--c-pay)}
.docpg .pr-box .opt .v.free,
.docpg .pr-box .opt:first-of-type .v.free{color:var(--c-free)}
.doc-hero-side .pr-box .opt.is-free.is-here{background:var(--c-free-bg);box-shadow:inset 3px 0 0 var(--c-free)}
.sp-gains li .ic{color:var(--c-free)}
/* ── 6. Витрина /forms: страница вместо простыни ───────────────────────────────────────────
Было 36 000px одной лентой — 34 раздела подряд и следом алфавитный указатель на 500 строк.
Стало: раздел — свёрнутый с заголовком, иконкой и счётчиком; первые два открыты.
Заголовок раздела — кликабельная строка на тёплой бумаге, чтобы было видно, что она живая. */
.fbl-fold{border:1px solid var(--paper-line);border-radius:var(--radius);background:#fff;
margin-top:7px;overflow:hidden}
.fbl-fold:first-child{margin-top:0}
summary.fbl-sechd{display:flex;align-items:center;gap:10px;margin:0;padding:10px 16px;
border-bottom:1px solid transparent;background:var(--paper);cursor:pointer;list-style:none}
summary.fbl-sechd::-webkit-details-marker{display:none}
summary.fbl-sechd:hover{background:var(--paper-2)}
.fbl-fold[open]>summary.fbl-sechd{border-bottom-color:var(--paper-line)}
summary.fbl-sechd .fbl-sect{margin:0;font-size:17px}
summary.fbl-sechd .fbl-secn{margin-left:0;font-size:13px;color:var(--subtle)}
.fbl-fold-ic{margin-left:auto;width:18px;height:18px;color:var(--subtle);transition:transform .16s ease}
.fbl-fold[open] .fbl-fold-ic{transform:rotate(180deg)}
.fbl-fold>.fbl-grid{padding:14px 16px 4px}
.fbl-secmore{margin:0;padding:0 16px 14px;font-size:14px}
.fbl-secmore a{color:var(--c-pay);font-weight:600}
/* Алфавитный указатель — один свёрнутый блок: 500 названий в четыре колонки нужны тому, кто
пришёл за конкретным именем, а не каждому посетителю раздела. */
.fbl-alphafold{border:1px solid var(--paper-line);border-radius:var(--radius);background:#fff}
.fbl-alphafold>summary{padding:12px 16px;background:var(--paper);cursor:pointer;font-weight:600;font-size:15px;
border-radius:var(--radius);list-style:none}
.fbl-alphafold>summary::-webkit-details-marker{display:none}
.fbl-alphafold[open]>summary{border-bottom:1px solid var(--paper-line);border-radius:var(--radius) var(--radius) 0 0}
.fbl-alphafold>summary .n{color:var(--subtle);font-weight:400}
.fbl-alphafold>.fbl-alpha{padding:8px 16px 16px}
/* Нормативная справка «Обязательны ли унифицированные формы» — это ссылки на закон, роль
--c-law: тёплая подложка и полоса слева отделяют норму от наших собственных обещаний. */
.forms-law{border-left:3px solid var(--c-law);background:var(--c-law-bg);border-radius:0 var(--radius) var(--radius) 0;
padding:18px 22px}
.forms-law p{max-width:var(--maxw-read)}
.forms-law p+p{margin-top:10px}
/* ── 6b. Справочные величины — своим цветом ────────────────────────────────────────────────
МРОТ, прожиточный минимум и районные коэффициенты набраны тем же синим, что и цены и все
кнопки сайта: цифра «27 093 ₽» в справочнике читалась как ценник. Роль --c-info отделяет
справочное от продаваемого. Селекторы длиннее оригинальных: directory.css подключается
после styles.css, и без этого правило бы не сработало. */
.dir-cards .dir-card .dir-card-v,
.dir-cards .dir-card .dir-card-m{color:var(--c-info)}
.dir-cards .dir-card:hover{border-color:var(--c-info)}
/* ── 7. Ряды карточек: одинаковая высота — и одинаковое место у действия ───────────────────
В рядах комплектов цена и кнопка «Купить» стояли у каждой карточки на своей высоте:
состав у комплектов разной длины, и ряд читался как «съехавший».
.ed-pack уже прижимал к низу саму кнопку, но цена и строка «Экономия …» шли сразу за
составом — а состав у комплектов от трёх до шести строк. Прижимаем к низу весь хвост
карточки (цена → экономия → кнопка), тогда в ряду совпадают и цены, и кнопки. */
.ed-pack .prc{margin-top:auto}
.ed-pack .prc~.cta{margin-top:12px}
/* ── 8. Калькуляторы (/calculator) — форма, результат и итоговые цифры ─────────────────────
Раздел справочный, как календари и справочники, и набран их же ролью --c-info: цифра
«914 000 ₽» на странице госпошлины — это не наш ценник, а чужая сумма, которую человеку
предстоит заплатить государству. Синим (цена документа, кнопки) её набирать нельзя.
Своего CSS-файла у раздела нет намеренно: разметка целиком стоит на уже готовых классах
сайта (.chips, .table-scroll, .data-table, .cal-card), и здесь дописано только то, чего
не было вовсе, — коробка формы и блок результата. */
.calc-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px}
.calc-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.calc-field{flex:1 1 220px;min-width:180px;display:flex;flex-direction:column;gap:6px}
.calc-label{font-size:13px;font-weight:600;color:var(--subtle)}
.calc-field input{width:100%;font-size:17px;padding:11px 13px;border:1px solid var(--line);
border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.calc-field input:focus{outline:none;border-color:var(--c-info)}
.calc-out{display:flex;flex-direction:column;gap:6px;min-width:190px}
.calc-value{font-size:28px;font-weight:800;line-height:1.1;color:var(--c-info);font-variant-numeric:tabular-nums}
/* Строка прописью — её копируют в документ целиком, поэтому она крупная, выделяется подложкой
и переносится по словам, а не уезжает за край на длинных суммах. */
.calc-result{margin-top:16px;padding:14px 16px;background:var(--c-info-bg);border-radius:var(--radius);
font-size:19px;line-height:1.45;color:var(--ink);word-break:break-word}
.calc-note{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
/* Предупреждение о нехватке данных (года без производственного календаря) — это не ошибка
ввода, а честная граница наших данных, поэтому роль --c-law, а не красная. */
.calc-warn{margin:12px 0 0;padding:11px 14px;border-left:3px solid var(--c-law);background:var(--c-law-bg);
border-radius:0 var(--radius) var(--radius) 0;font-size:14px;line-height:1.6;color:var(--muted)}
.calc-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.calc-stat{flex:1 1 150px;min-width:130px;padding:13px 15px;background:var(--surface-2);border-radius:var(--radius)}
.calc-stat-v{display:block;font-size:26px;font-weight:800;line-height:1.1;color:var(--c-info);font-variant-numeric:tabular-nums}
.calc-stat-l{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.data-table td .dim{display:block;margin-top:2px;font-size:13px}
@media (max-width:720px){
.calc-row{gap:12px}
.calc-value{font-size:24px}
.calc-result{font-size:17px}
}
/* Вторая кнопка прайса — «скачать без заполнения». 23.09.2026 владелец не нашёл на карточке
ни одной платной кнопки скачивания: везде написано «платно», а действие одно — «Заполнить
онлайн». Человеку, которому нужен просто файл, страница отвечала «сначала ответьте на 17
вопросов», и он уходил. Кнопка обведённая, а не залитая: путь с заполнением остаётся
главным, но второй путь виден и не требует догадки. */
.cta-buy{margin-top:8px}
/* Одна платная строка в блоке бесплатных файлов — с действием, а не с пересказом прайса. */
.dfw-paidbtn{display:inline-block;margin-left:4px;padding:5px 12px;border:1px solid var(--accent);
border-radius:8px;color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.dfw-paidbtn:hover{background:var(--accent);color:#fff}
/* Бланк унифицированной формы (FormGrid, 04.10.2026): объединённые ячейки, рамки по ячейкам, линии подписи с подстрочниками. */
.doc-ftable td{border:1px solid #444;padding:1mm 1.2mm;vertical-align:middle}
.doc-ftable tr.fh td{text-align:center;font-weight:400}
.doc-ftable td.bd-none{border:none}
.doc-ftable td.bd-b{border:none;border-bottom:1px solid #444}
.doc-ftable td.bd-t{border:none;border-top:1px solid #444}
.doc-ftable td.bd-all{border:1px solid #444}
.doc-ftable td.fb{font-weight:700}
.doc-ftable td.fs{font-size:.62em;line-height:1.15;padding-top:.3mm}
.doc-ftable tr.fblank td{height:6.5mm}
.doc-ftable tr.ftight td{padding-top:0;padding-bottom:.6mm}
.doc-ftable-small{font-size:.8em}
.doc-ftable-bare td{padding:.8mm 1mm}
.doc-fline{margin:2pt 0 4pt}
.doc-fline td{padding:.6mm .8mm .2mm}
.doc-pagebreak{width:100%;border:0;border-top:1px dashed #c9c4b8;margin:10px 0;height:0}
.doc-pagebreak td{border:0;padding:0}