/* Общая тема сайта botzapisi.ru: index.html, vozmozhnosti.html, sravnenie.html, demo.html, kak-podklyuchit.html, zakon.html.
Палитра и шрифты те же, что на страницах ниш (web/site/dlya/niche.css, генератор tools/build_niche_pages.py).
Фирменные цвета botZA (docs/brand/palette.md): белые страницы для чтения, графитовые (body.dark) —
продающие; шапка и подвал графитовые всегда. Тема закреплена за страницей, от системной настройки не зависит.
Контраст текста >= 4.5:1 в обеих палитрах. */
/* Шрифты лежат на своём домене (web/site/fonts), сторонние сервисы шрифтов не вызываются.
Golos Text и Unbounded под открытой лицензией OFL: самостоятельный хостинг разрешён.
Файлы переменные: один файл на алфавит покрывает весь диапазон насыщенности.
unicode-range делит по алфавитам: кириллица не грузится ради латиницы и наоборот.
Знак рубля U+20BD у Google лежит в наборе latin-ext (это ещё ~140 КБ), поэтому вынесен в отдельный файл на один символ. */
@font-face {
font-family: "Golos Text"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("/fonts/golos-text-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Golos Text"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("/fonts/golos-text-latin.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B2, U+00B7, U+00BB, U+00D7, U+2010-2011, U+2018-201E, U+2026, U+2039-203A, U+2192, U+2212;
}
@font-face {
font-family: "Golos Text"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("/fonts/golos-text-rouble.woff2") format("woff2");
unicode-range: U+20BD;
}
@font-face {
font-family: "Unbounded"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url("/fonts/unbounded-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Unbounded"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url("/fonts/unbounded-latin.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B2, U+00B7, U+00BB, U+00D7, U+2010-2011, U+2018-201E, U+2026, U+2039-203A, U+2192, U+2212;
}
@font-face {
font-family: "Unbounded"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url("/fonts/unbounded-rouble.woff2") format("woff2");
unicode-range: U+20BD;
}
:root {
/* фирменные цвета botZA (docs/brand/palette.md): белый фон, графитовый текст, мята — тёмными оттенками */
--bg: #FFFFFF; --surface: #F4F5F8; --card: #F4F5F8; --surface-2: #ECEEF2; --sunk: #F4F5F8;
--ink: #23262B; --ink-2: #45474D; --muted: #65656B; --line: #E3E4E8;
--accent: #0E7A55; --accent-2: #0B6647; --accent-soft: #E3F6EE; --accent-ink: #FFFFFF;
--mint: #159C6E; --mint-ink: #0E7A55; --mint-soft: #E3F6EE;
--sun: #FFB547; --sun-ink: #8A5800; --sun-soft: #FFF1D6;
--no-ink: #A33B2F; --no-soft: #F9E7E4;
--chat: #F4F5F8; --chat-ink: #23262B;
--sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--display: "Unbounded", "Golos Text", system-ui, sans-serif;
--shadow: 0 18px 50px -24px rgba(35, 38, 43, .35);
}
/* графит: продающие страницы целиком, шапка и подвал везде. Мята живёт на тёмном. */
body.dark, header.top, footer.bottom {
--bg: #23262B; --surface: #2B2F36; --card: #2B2F36; --surface-2: #323740; --sunk: #1E2125;
--ink: #FFFFFF; --ink-2: #D0D1D5; --muted: #A8A9AE; --line: #3A3F48;
--accent: #3DDC97; --accent-2: #5BE6AA; --accent-soft: #1F3A30; --accent-ink: #12241B;
--mint: #3DDC97; --mint-ink: #3DDC97; --mint-soft: #1F3A30;
--sun: #FFC46A; --sun-ink: #FFC46A; --sun-soft: #3A2E14;
--no-ink: #F0A094; --no-soft: #3A2320;
--chat: #323740; --chat-ink: #FFFFFF;
--shadow: 0 18px 50px -24px rgba(0, 0, 0, .7);
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
/* переход по якорю (пункт оферты #p8-1, раздел страницы) останавливается ниже закреплённой шапки (64px) с запасом:
начало абзаца не прячется под ней */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6;
padding-block: 0 64px; padding-inline: 20px; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
.wrap { max-width: 1080px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
/* потолок 44px: в Unbounded слово «возможностями,» при большем кегле не помещается в колонку первого экрана */
h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; margin-bottom: 14px; }
/* заголовок первого экрана: влезает в три строки на широком экране и в пять на телефоне */
.hero h1 { max-width: 15ch; }
@media (max-width: 980px) { .hero h1 { max-width: none; } }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 600; margin-block: 0 12px; }
h3 { font-size: 18px; font-weight: 600; font-family: var(--sans); margin-bottom: 6px; }
/* поворот темы внутри раздела: та же мысль с другой стороны, а не новый экран.
Отбивка сверху и тонкая черта делают переход видимым, но не разрывают раздел надвое. */
.turn { font-size: 21px; margin: 40px 0 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.turn + p { color: var(--muted); }
/* «Подробнее на отдельных страницах»: ссылки строкой, а не плитками (главная короче, п. 16 разбора 25.09) */
.morelinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.morelinks a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; }
.morelinks a:hover { border-color: var(--accent); color: var(--accent); }
.morelinks a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
p { margin: 0 0 12px; max-width: 64ch; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
section { padding-block: 56px 0; }
.sec-head { max-width: 680px; margin-bottom: 24px; }
.sec-head p { color: var(--ink-2); }
/* Рубрика раздела плашкой, а не мелкой серой строкой: на длинной странице она работает указателем,
за который цепляется глаз при быстрой прокрутке. */
.eyebrow { display: inline-block; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
/* Ритм: часть разделов на утопленном фоне, часть на общем. Иначе двадцать с лишним экранов подряд
читаются как один сплошной документ и глазу не за что зацепиться. Перечислены по именам, а не
через nth-of-type: порядок разделов меняется, а оформление должно оставаться осмысленным. */
#cifry, #price, #order {
background: var(--sunk); border: 1px solid var(--line); border-radius: 28px;
padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px); margin-top: 48px;
}
.lead { font-size: 19px; color: var(--ink-2); max-width: 58ch; }
.small { font-size: 15px; color: var(--muted); }
.note { font-size: 14px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 12px; margin-top: 14px; max-width: 72ch; }
.checked { font-size: 13px; color: var(--muted); margin-top: 10px; }
/* --- формы сайта: конструктор демо и заявка --- */
/* Поля крупные и по одному на строку на телефоне: форму чаще всего заполняют стоя, одной рукой. */
.bform { background: var(--card); border: 1px solid var(--line); border-radius: 20px;
padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.f input, .f select, .f textarea, .srow input {
font: inherit; font-weight: 400; font-size: 16px; /* 16px: iOS не зумит страницу при фокусе */
color: var(--ink); background: var(--surface); border: 1px solid var(--line);
border-radius: 12px; padding: 12px 14px; width: 100%; min-width: 0;
transition: border-color .15s ease, box-shadow .15s ease;
}
.f textarea { resize: vertical; min-height: 78px; }
.f input:focus, .f select:focus, .f textarea:focus, .srow input:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.fhead { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }
.fhead span { font-weight: 400; color: var(--muted); }
/* Услуга и цена в одной строке: цена узкая, потому что это три-четыре знака */
.srow { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.agree { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
font-size: 14px; color: var(--muted); line-height: 1.45; }
.agree input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.bform .btn { justify-self: start; }
.bform button[disabled] { opacity: .55; cursor: not-allowed; }
/* пока формы выключены, поля тоже заблокированы (site.js, lock) и выглядят неактивными */
.bform input:disabled, .bform select:disabled, .bform textarea:disabled { background: var(--sunk); cursor: not-allowed; }
.fmsg { font-size: 15px; color: var(--muted); margin: 0; min-height: 1.4em; }
.fmsg.bad { color: var(--no-ink); }
.fmsg.good { color: var(--ink); }
.fmsg.good a { font-weight: 600; }
/* подпись только для читалки: поля услуг подписаны placeholder-ом, но слепому он не читается */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
.frow { grid-template-columns: 1fr; }
.srow { grid-template-columns: 1fr 96px; }
.bform .btn { justify-self: stretch; text-align: center; }
}
/* --- первый экран продуктовой страницы --- */
/* Раздел стоит вплотную к заголовку: это доказательство к нему, а не отдельная тема. */
.lead-shot { padding-top: 0; }
.lead-shot .shot { margin: 0; }
/* QR: код слева, объяснение справа; на телефоне код уходит наверх и не съедает ширину текста */
.qr-lead { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: start;
background: var(--card); border: 1px solid var(--line); border-radius: 20px;
padding: clamp(18px, 3vw, 28px); }
.qr-lead p { margin-bottom: 10px; }
.qr { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px;
color: var(--ink); line-height: 0; }
.qr img { width: 100%; height: auto; display: block; }
@media (max-width: 560px) {
.qr-lead { grid-template-columns: 1fr; gap: 16px; }
.qr { max-width: 180px; }
}
/* Счёт: строки с точечным выравниванием сумм, итог отбит чертой */
.bill { background: var(--card); border: 1px solid var(--line); border-radius: 20px;
padding: clamp(18px, 3vw, 28px); }
.bill-head { font-family: var(--display); font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.bill-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.bill-row span { color: var(--ink-2); }
.bill-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-row.total { border-top: 2px solid var(--accent); margin-top: 4px; padding-top: 12px; font-size: 17px; }
.bill-row.total b { color: var(--accent); font-size: 21px; }
.bill .checked { margin-top: 14px; }
/* Дата, автор и время чтения у статьи: точки-разделители рисуются между элементами,
а не дописываются в текст, чтобы при переносе строки не висела одинокая точка. */
.postmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
font-size: 14px; color: var(--muted); margin: 10px 0 16px; }
.postmeta > * + *::before { content: "\00b7"; margin-right: 10px; color: var(--line); }
.fact .postmeta { margin: 8px 0 0; font-size: 13px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; margin: 8px 0; }
/* --- шапка: знак и имя botZA с подписью, меню, «Заказать» всегда на виду (tools/site_chrome.py) --- */
header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
padding-block: 10px; margin-inline: -20px; padding-inline: 20px; height: 64px;
background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.logo { text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 10px; flex: none; margin-right: auto; }
.logo svg { width: 34px; height: 34px; flex: none; border-radius: 8px; box-shadow: 0 0 0 1px #3A3F48; }
/* высота строк в пикселях: пока грузится шрифт, запасной не меняет высоту шапки и страница не прыгает */
.logo .brand { display: flex; flex-direction: column; line-height: 20px; }
.logo .bname { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.logo .bname b { color: var(--accent); font-weight: 700; }
.logo .tagline { font-size: 12px; line-height: 14px; color: var(--muted); margin-top: 2px; }
.nav-toggle { display: none; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 600; min-height: 44px;
color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.order-btn { flex: none; min-height: 44px; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap;
padding: 10px 10px; border-radius: 10px; }
.menu a:not(.btn):hover { color: var(--ink); background: var(--surface); }
.menu a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.menu .mob { display: none; }
/* «Для вашего дела»: по наведению или фокусу раскрываются три вида дела и их ниши */
.drop { position: relative; }
.drop-panel { display: none; position: absolute; top: 100%; left: -12px; width: min(720px, 86vw); z-index: 30;
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 18px 20px;
background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.drop:hover .drop-panel, .drop:focus-within .drop-panel { display: grid; }
.drop-col ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.menu .drop-col a { padding: 5px 8px; font-size: 14px; }
.menu .drop-col a.drop-kind { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.drop-sub { display: block; font-size: 12px; color: var(--muted); padding-left: 8px; }
@media (max-width: 960px) {
.nav-toggle { display: inline-flex; }
.menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
max-height: calc(100vh - 72px); overflow-y: auto;
background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; box-shadow: var(--shadow); }
.menu[hidden] { display: none; }
.menu a:not(.btn) { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; border-radius: 0; }
.menu .mob { display: block; }
.drop-panel { display: grid; position: static; width: auto; grid-template-columns: 1fr; gap: 10px; padding: 8px 0 4px;
background: none; border: 0; box-shadow: none; }
.drop-col ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.menu .drop-col li a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.menu .drop-col a.drop-kind { border-bottom: 0; padding: 8px 0 0; }
.drop-sub { padding-left: 0; }
}
@media (max-width: 420px) {
header.top { gap: 8px; }
.logo { gap: 8px; }
.logo svg { width: 30px; height: 30px; }
.logo .bname { font-size: 17px; }
.logo .tagline { font-size: 12px; max-width: 16ch; }
.order-btn { padding-inline: 12px; }
.nav-toggle { padding-inline: 10px; }
}
/* --- плашка «Сервис готовится к запуску» под шапкой (tools/site_chrome.prelaunch_bar, решение 04.10.2026) --- */
.prelaunch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-inline: -20px; padding: 10px 20px;
background: var(--sun-soft); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.prelaunch p { margin: 0; flex: 1 1 320px; }
.prelaunch .prelaunch-btns { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.prelaunch-max { color: var(--ink-2); font-size: 14px; display: inline-block; min-height: 24px; line-height: 24px; }
@media (max-width: 560px) {
.prelaunch { font-size: 14px; }
.prelaunch .prelaunch-btns { flex: 1 1 100%; }
}
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); padding-top: 18px; }
/* касание не меньше 24 px (WCAG 2.2, 2.5.8; перепроверка 27.09, Н12) */
.crumbs a { color: var(--muted); display: inline-block; min-height: 24px; line-height: 24px; }
.crumbs [aria-current] { color: var(--ink-2); }
/* --- кнопки --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 600;
font-size: 16px; color: var(--accent-ink); background: var(--accent); padding: 13px 20px; border-radius: 12px;
text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, background .15s; text-align: center; }
.btn:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn.sm { font-size: 14px; padding: 8px 14px; border-radius: 10px; }
.btn.big { font-size: 19px; padding: 16px 28px; border-radius: 14px; box-shadow: var(--shadow); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
@media (max-width: 460px) { .cta .btn { flex: 1 1 100%; } }
/* --- первый экран --- */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(20px, 4vw, 44px); align-items: center;
background: var(--surface);
border: 1px solid var(--line); border-radius: 28px; padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow);
margin-top: 24px; }
/* Первый экран разложен по областям, а не по порядку в разметке. На широком экране слева заголовок
и кнопки, справа переписка во всю высоту. На телефоне переписка встаёт между текстом и кнопками:
продукт виден сразу, а не после третьего пролистывания. Порядок в HTML при этом не меняется. */
.hero { grid-template-areas: "top phone" "act phone"; align-content: center; }
.hero-top { grid-area: top; } .hero-act { grid-area: act; } .hero .phone { grid-area: phone; }
@media (max-width: 980px) {
.hero { grid-template-columns: 1fr; grid-template-areas: "top" "phone" "act"; }
.hero .phone { margin-block: 4px 18px; }
}
.tag { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--surface); border: 1px solid var(--line);
color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.tag b { color: var(--accent); }
/* --- телефон с перепиской --- */
.phone { justify-self: center; width: min(300px, 100%); border-radius: 32px; border: 1px solid var(--line); background: var(--surface);
box-shadow: var(--shadow); padding: 14px 12px 18px; }
.phone::before { content: ""; display: block; width: 86px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 12px; }
.chat { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.msg { padding: 9px 12px; border-radius: 14px; max-width: 90%; }
/* анимацию включает класс, который ставит наблюдатель появления (site.js): иначе на телефоне
переписка проигрывается ниже экрана и её никто не видит */
.chat-live .msg { animation: pop .45s ease both; }
.chat-live .typing { animation: typing-life 1.5s .6s ease both; }
.chat-live .kb { animation: pop .45s .9s ease both; }
.msg.bot { background: var(--chat); color: var(--chat-ink); border-bottom-left-radius: 5px; }
.msg.me { background: var(--accent); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: 5px; }
.msg b { font-weight: 600; }
.msg:nth-child(2) { animation-delay: .15s; } .msg:nth-child(3) { animation-delay: .3s; }
.msg:nth-child(4) { animation-delay: .45s; } .msg:nth-child(5) { animation-delay: .6s; } .msg:nth-child(6) { animation-delay: .75s; }
/* «печатает»: три точки перед последним ответом бота; появляется вместе с предыдущим сообщением и исчезает,
когда приходит ответ. Длительность совпадает с задержкой .msg:nth-child(6) в анимации pop. */
.typing { align-self: flex-start; display: flex; align-items: center; gap: 5px; background: var(--chat);
border-radius: 14px; border-bottom-left-radius: 5px; padding: 12px 14px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing-dot 1.1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes typing-life { 0% { opacity: 0; transform: translateY(8px); } 10%, 88% { opacity: 1; transform: none; }
100% { opacity: 0; height: 0; padding-block: 0; margin-top: -8px; } }
.kb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.key { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; color: var(--ink-2); }
.key.hl { border-color: var(--accent); color: var(--accent); font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* --- строка каналов под заголовком первого экрана --- */
.channels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.channels li { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.channels svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
/* --- триада под главной кнопкой --- */
.triad { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 0; padding: 0; list-style: none;
font-size: 15px; color: var(--ink-2); }
.triad li { display: inline-flex; align-items: center; gap: 7px; }
.triad li::before { content: "\2713"; color: var(--mint-ink); font-weight: 700; }
/* --- счётчики проверяемого --- */
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50% - 6px, 170px), 1fr)); gap: 12px; }
.counters .c { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.counters .c b { display: block; font-family: var(--display); font-size: clamp(22px, 3.4vw, 28px); font-weight: 700;
letter-spacing: -0.02em; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.counters .c span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; }
/* --- плашки фактов --- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); gap: 12px; margin-top: 20px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
/* плашка-ссылка (раздел «Подробнее»): выглядит так же, но целиком кликабельна */
a.fact { display: block; text-decoration: none; color: inherit; }
a.fact b { color: var(--accent); }
a.fact:hover { border-color: var(--accent); }
.fact b { display: block; font-family: var(--display); font-size: 17px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.02em; }
.fact span { font-size: 14px; color: var(--ink-2); }
/* --- полоски цен --- */
.bars { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
/* Цена стоит справа от полосы, а не внутри: узкая полоса («0 ₽», «790 ₽») резала подпись на телефоне,
и главный довод «дешевле» не читался (Р47 проверки 26.09). У полосы минимальная ширина, чтобы 0 ₽ был виден. */
.bar { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 6.5em; gap: 14px; align-items: center; font-size: 15px; }
@media (max-width: 620px) { .bar { grid-template-columns: 1fr auto; gap: 4px 10px; } .bar .name { grid-column: 1 / -1; } }
.bar .name { color: var(--ink-2); }
.bar .track { background: var(--sunk); border-radius: 999px; height: 22px; overflow: hidden; }
.bar .fill { display: block; height: 100%; min-width: 8px; border-radius: 999px;
background: var(--accent); }
.bar.rival .fill { background: var(--ink-2); }
.bar .val { font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--ink); }
.bar:not(.rival) .val { color: var(--accent); }
/* доводы под честной таблицей конкурентов: не карточки, а список, чтобы не спорил с таблицей выше */
.why { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.why li { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: 14px; padding: 14px 16px; font-size: 15px; color: var(--ink-2); }
.why b { color: var(--ink); }
/* --- таблицы --- */
.tablebox { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.tablebox table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tablebox th, .tablebox td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tablebox th { position: sticky; top: 0; font-weight: 600; font-size: 13px; color: var(--muted); background: var(--surface-2); z-index: 1; }
.tablebox td:first-child { font-weight: 500; }
.tablebox tr:last-child td { border-bottom: none; }
.tablebox .mine { background: var(--accent-soft); }
.tablebox th.mine { color: var(--accent); }
.yes::before { content: "\2713\00a0"; color: var(--mint-ink); font-weight: 700; }
.no::before { content: "\2212\00a0"; color: var(--no-ink); font-weight: 700; }
.part::before { content: "\00b1\00a0"; color: var(--sun-ink); font-weight: 700; }
.dim { color: var(--muted); }
@media (max-width: 760px) {
.tablebox table, .tablebox tbody, .tablebox tr, .tablebox td { display: block; width: 100%; }
.tablebox thead { display: none; }
.tablebox tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
.tablebox tr:last-child { border-bottom: none; }
.tablebox td { border: none; padding: 5px 14px; }
.tablebox td:first-child { font-weight: 600; padding-top: 12px; }
/* на телефоне шапки таблицы нет: подпись столбца и значок «есть / нет / с оговоркой» рисует один и тот же ::before */
.tablebox td:not(:first-child)::before { content: attr(data-l) ": "; color: var(--muted); font-size: 13px; }
.tablebox td.yes:not(:first-child)::before { content: attr(data-l) ": \2713\00a0"; }
.tablebox td.no:not(:first-child)::before { content: attr(data-l) ": \2212\00a0"; }
.tablebox td.part:not(:first-child)::before { content: attr(data-l) ": \00b1\00a0"; }
}
sup { font-size: 12px; color: var(--muted); }
sup a { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; text-align: center; }
/* --- калькулятор --- */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.calc label { display: block; font-weight: 600; margin-bottom: 10px; }
.calc output { color: var(--accent); }
.calc input[type=range] { width: 100%; height: 24px; accent-color: var(--accent); margin-bottom: 18px; }
.calcres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.cell { background: var(--sunk); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.cell span { font-size: 13px; color: var(--muted); }
.cell b { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.cell small { font-size: 12px; color: var(--muted); }
.cell.mineC { background: var(--accent-soft); }
.cell.mineC b { color: var(--accent); }
/* та же подсветка «это мы» для плашки в честном сравнении с ботами-двойниками */
.fact.mineC { background: var(--accent-soft); border-color: var(--accent); }
.fact.mineC b { color: var(--accent); }
.cell.save { background: var(--mint-soft); }
.cell.save b { color: var(--mint-ink); }
/* другие сервисы под калькулятором: строка — имя, цена в месяц, разница за год */
.rivals { margin-top: 18px; }
.rivals-h { font-weight: 600; margin: 0 0 8px; }
.rivals ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rivals li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
background: var(--sunk); border-radius: 12px; padding: 10px 14px; }
.rivals li span { font-weight: 600; }
.rivals li b { font-variant-numeric: tabular-nums; text-align: right; }
.rivals li small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
/* --- живое демо --- */
.demo { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.demo .bar2 { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line);
font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.demo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.demo iframe { width: 100%; height: 560px; max-width: 100%; border: 0; display: block; background: var(--sunk); }
@media (max-width: 560px) { .demo iframe { height: 620px; } }
/* --- плитки ниш --- */
.niches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr)); gap: 10px; }
/* длинные названия ниш не должны вылезать за край плитки */
.niche { min-width: 0; overflow-wrap: break-word; }
/* «Показать остальные»: длинный список целиком в HTML, но страница не превращается в стену.
Работает без скрипта, открывается с клавиатуры, поиск видит закрытый текст. */
.more-items { margin-top: 12px; }
.more-items > summary { cursor: pointer; display: inline-block; font-weight: 600; font-size: 15px;
color: var(--accent); padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
background: var(--card); transition: background .15s ease, border-color .15s ease; }
.more-items > summary:hover { background: var(--accent-soft); border-color: var(--accent); }
.more-items > summary { list-style: none; }
.more-items > summary::-webkit-details-marker { display: none; }
.more-items > summary::after { content: ""; display: inline-block; width: 7px; height: 7px;
margin-left: 9px; vertical-align: 1px; border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor; transform: rotate(45deg);
transition: transform .15s ease; }
.more-items[open] > summary::after { transform: rotate(-135deg); vertical-align: 3px; }
.more-items[open] > summary { margin-bottom: 12px; }
.niche { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
padding: 12px 14px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15px;
transition: border-color .15s, transform .15s; }
.niche:hover { border-color: var(--accent); transform: translateY(-1px); }
@media (max-width: 560px) {
.niche { padding: 12px 10px; gap: 8px; font-size: 14px; }
.niche svg { width: 22px; height: 22px; }
}
.niche svg { flex: none; width: 26px; height: 26px; color: var(--accent); }
/* --- карточки --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.card p { font-size: 14px; color: var(--ink-2); margin: 0; }
.card .ic { width: 30px; height: 30px; color: var(--accent); margin-bottom: 10px; fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; }
/* --- панели и списки --- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.panel.warn { background: var(--no-soft); }
.panel p:last-child { margin-bottom: 0; }
.panel ul { margin: 10px 0 0; padding-left: 20px; font-size: 15px; }
.panel li { margin: 7px 0; }
.panel li b { font-weight: 600; }
/* --- разделы возможностей --- */
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.feat .item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; position: relative; overflow: hidden; }
.feat .item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.feat .item b { display: block; font-weight: 600; margin-bottom: 4px; line-height: 1.35; }
.feat .item span { color: var(--ink-2); font-size: 15px; }
.feat .item code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
background: var(--surface-2); border-radius: 6px; padding: 1px 6px; }
/* --- три шага --- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); gap: 12px; }
.steps li { counter-increment: s; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
padding: 18px 18px 18px 54px; position: relative; font-size: 15px; }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 18px; width: 26px; height: 26px; border-radius: 50%;
background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.steps li b { display: block; margin-bottom: 4px; }
/* --- цена --- */
.pricebox { background: var(--surface); border: 2px solid var(--accent);
border-radius: 22px; padding: 26px; box-shadow: var(--shadow); }
.pricebox .big { font-family: var(--display); font-size: clamp(32px, 6vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
/* годовая оплата: вторая цена рядом с основной, но заметно тише её, чтобы 790 ₽ оставались главными */
.pricebox .year { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
background: var(--surface); font-size: 15px; color: var(--ink-2); }
.pricebox .year b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pricebox ul { columns: 2; column-gap: 28px; margin: 16px 0 0; padding-left: 20px; font-size: 15px; }
.pricebox li { margin-bottom: 4px; break-inside: avoid; }
@media (max-width: 620px) { .pricebox ul { columns: 1; } }
/* --- фильтр демо --- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter button { font-family: var(--sans); font-size: 15px; font-weight: 500; padding: 8px 15px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.filter button:hover { border-color: var(--accent); color: var(--accent); }
.filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.demolist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.demolist .d { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.demolist .d[hidden] { display: none; }
.demolist .d b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; margin-bottom: 4px; letter-spacing: -0.02em; }
.demolist .d span { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 10px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
.pill.sun { background: var(--sun-soft); color: var(--sun-ink); }
.pill.mint { background: var(--mint-soft); color: var(--mint-ink); }
.empty { color: var(--muted); }
.empty[hidden] { display: none; }
/* --- вопросы --- */
.faq { display: grid; gap: 10px; max-width: 820px; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
details[open] { border-color: var(--accent); }
summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--display); color: var(--accent); font-size: 20px; line-height: 1; flex: none; }
details[open] summary::after { content: "\2212"; }
details p { margin: 10px 0 2px; color: var(--ink-2); font-size: 15px; }
/* --- ниши группами --- */
.niche-groups { display: grid; gap: 22px; }
.niche-group h3 { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
color: var(--ink-2); margin-bottom: 10px; }
/* --- живые демо-боты --- */
.botlinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.botlinks a { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--line);
border-radius: 12px; padding: 11px 16px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.botlinks a:hover { border-color: var(--accent); color: var(--accent); }
.botlinks svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
/* --- источники --- */
.src { font-size: 14px; color: var(--muted); margin-top: 20px; }
.src a { color: var(--accent); overflow-wrap: anywhere; }
.src ol { padding-left: 20px; margin: 6px 0 0; columns: 2; column-gap: 30px; }
.src li { margin-bottom: 4px; break-inside: avoid; overflow-wrap: anywhere; }
@media (max-width: 640px) { .src ol { columns: 1; } }
/* --- подвал --- */
footer.bottom { margin-top: 64px; padding: 26px 20px 40px; margin-inline: -20px; margin-bottom: -64px;
background: var(--bg); color: var(--muted); font-size: 14px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px 20px; }
footer.bottom .fabout { grid-column: 1 / -1; }
@media (min-width: 900px) { footer.bottom { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } footer.bottom .fabout { grid-column: auto; } }
@media (max-width: 560px) {
/* на телефоне ссылки подвала строкой: столбиком они занимали больше экрана */
footer.bottom { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
footer.bottom ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
footer.bottom li a { padding-block: 4px; }
}
footer.bottom a { color: var(--muted); }
footer.bottom a:hover { color: var(--accent); }
footer.bottom b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }
footer.bottom p { margin: 0 0 6px; }
/* подвал по колонкам: виды дела, разделы, поисковые страницы, документы (tools/site_chrome.py) */
footer.bottom .fh { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
footer.bottom .fbrand { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -0.02em; }
footer.bottom .fbrand b { display: inline; color: var(--accent); margin: 0; font-weight: 700; }
footer.bottom ul { list-style: none; margin: 0; padding: 0; }
footer.bottom li a { display: inline-block; padding-block: 5px; }
/* знак охраны: отдельной строкой во всю ширину подвала (tools/stamp_author.py) */
footer.bottom .copyright { grid-column: 1 / -1; margin-top: 10px; padding-top: 12px;
border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 860px) { section { padding-block: 44px 0; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.btn, .niche { transition: none; }
.msg, .kb { animation: none; }
/* «печатает» без движения: точки не прыгают, плашка просто не показывается */
.typing { display: none; }
.typing span { animation: none; }
}
/* --- витрина демо (demo.html): плитки ниш, роли и окно демо --- */
.demo-pick .niche { font-family: var(--sans); font-size: 15px; line-height: 1.3; text-align: left; width: 100%; cursor: pointer; }
.demo-pick .niche[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.roles .role { display: block; text-align: left; font-family: var(--sans); cursor: pointer; background: var(--surface);
border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; color: var(--ink);
transition: border-color .15s, transform .15s; }
.roles .role:hover { border-color: var(--accent); transform: translateY(-1px); }
.roles .role b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; margin-bottom: 6px; }
.roles .role span { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.roles .role[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.roles .role[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* журнал в окне плотнее мини-приложения: даём ему больше высоты */
.demo.journal iframe { height: 680px; }
@media (max-width: 560px) { .demo.journal iframe { height: 620px; } }
.demo-pick .niche:focus-visible, .roles .role:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .roles .role { padding: 14px 16px; } .roles .role b { font-size: 16px; } }
/* --- калькулятор неявок: считает потерю от тех, кто не пришёл --- */
.noshow .rows { display: grid; gap: 16px; margin-bottom: 18px; }
.noshow label { display: block; font-weight: 600; margin-bottom: 8px; }
.noshow input[type=range] { width: 100%; height: 24px; accent-color: var(--accent); }
.noshow .cell.loss { background: var(--no-soft); }
.noshow .cell.loss b { color: var(--no-ink); }
.noshow .verdict { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.noshow .verdict b { color: var(--mint-ink); }
/* --- снимки продукта: настоящие экраны наших живых демо (tools/make_shots.py) --- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px;
align-items: start; }
.shot { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
display: flex; flex-direction: column; margin: 0; }
/* снимок обрезается по верхней части: там главное, а низ страницы на картинке всё равно не прочитать */
.shot > a { display: block; max-height: 300px; overflow: hidden; border-bottom: 1px solid var(--line);
background: var(--sunk); }
.shot img { display: block; width: 100%; height: auto; }
.shot > figcaption { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.shot > figcaption a { font-size: 14px; font-weight: 600; margin-top: 2px; }
.shot > figcaption b { display: block; font-family: var(--display); font-weight: 600; font-size: 16px;
letter-spacing: -0.02em; margin-bottom: 4px; }
.shot > figcaption span { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.screen { margin: 14px; padding: 12px; background: var(--sunk); border-radius: 14px; font-size: 13px; flex: 1; }
.screen .head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.screen .row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
padding: 9px 11px; margin-bottom: 7px; }
.screen .row:last-child { margin-bottom: 0; }
.screen .row i { font-style: normal; color: var(--muted); font-size: 12px; display: block; }
.screen .row b { font-weight: 600; font-size: 13px; }
.screen .row .money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.screen .keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.screen .keys span { background: var(--accent-soft); color: var(--accent); border-radius: 8px;
padding: 6px 10px; font-size: 12px; font-weight: 600; }
.screen table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.screen th, .screen td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.screen th { color: var(--muted); font-weight: 600; }
.screen td.money, .screen th.money { text-align: right; white-space: nowrap; }
.screen .day { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; }
.screen .day .time { color: var(--muted); font-size: 11px; padding-top: 6px; }
.screen .day .busy { background: var(--accent-soft); border-radius: 8px; padding: 6px 8px; font-size: 11px;
color: var(--accent-2); line-height: 1.3; }
.screen .day .free { border: 1px dashed var(--line); border-radius: 8px; padding: 6px 8px; font-size: 11px;
color: var(--muted); }
.shot .more { margin: 0 18px 16px; }
/* --- появление блоков при прокрутке (site.js добавляет классы) --- */
.reveal-on .reveal { opacity: 0; transform: translateY(14px); }
.reveal-on .reveal.shown { opacity: 1; transform: none;
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
.reveal-on .reveal, .reveal-on .reveal.shown { opacity: 1; transform: none; transition: none; }
}
/* --- микровзаимодействия: скупо, только подъём и тень, и только у того, что можно нажать --- */
@media (hover: hover) {
.card, .fact, .niche, .why li { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card:hover, .fact:hover, .why li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.niche:hover { transform: translateY(-2px); border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
.card, .fact, .niche, .why li { transition: none; }
.card:hover, .fact:hover, .why li:hover, .niche:hover { transform: none; }
}
/* --- бесплатные инструменты (tools/build_product_pages.TOOL_PAGES) --- */
.tool-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-bottom: 18px; }
.tool-rows label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 600; font-size: 15px; }
.tool-rows input, .tool-rows select { font: inherit; font-weight: 400; width: 100%; padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--line); background: var(--sunk); color: var(--ink); }
.tool-rows input:focus-visible, .tool-rows select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.tpls { display: grid; gap: 12px; margin-top: 16px; }
.tpl { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
display: flex; flex-direction: column; gap: 10px; }
.tpl h3 { margin: 0; font-size: 17px; }
.tpl p { margin: 0; }
.tpl .btn { align-self: flex-start; }
/* ===============================================================================================
Новый сайт botZA (этап 4, прототип docs/audit_2026-09/prototype): главная, направления запись,
заказы, заявки и витрины ниш. Страницы графитовые (body.dark.v2), мята только на тёмном,
без градиентов (docs/brand/palette.md). Собирают tools/build_home.py и tools/build_niche_pages.py.
=============================================================================================== */
.v2 main > section { padding-block: 30px 0; margin-top: 30px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .v2 main > section { padding-top: 64px; margin-top: 64px; } }
/* на новых страницах цена и заказ без отдельной плашки: разделы и так отбиты линией */
.v2 #price, .v2 #order { background: none; border: 0; border-radius: 0; padding-inline: 0; padding-bottom: 0; }
.v2 #price { border-top: 1px solid var(--line); }
.v2 #order { border-top: 1px solid var(--line); }
.v2 .pcard { padding: 18px; }
@media (max-width: 560px) {
/* на телефоне подписи строк таблицы слоёв прячем: название слоя понятно и без них */
.layers td:first-child span { display: none; }
.v2 .sec-head { margin-bottom: 18px; }
}
.v2 .sec-head { max-width: 760px; }
.v2 .eyebrow { font-size: 12px; }
.v2 h1 { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 0; }
.v2 h2 { font-size: clamp(23px, 3.1vw, 34px); }
.v2 h3 { font-family: var(--display); font-size: 18px; line-height: 1.25; }
/* первый экран: слева заголовок, цена и кнопки; справа телефон с приложением */
.first { padding-top: 22px; }
.first-grid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .first-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; } }
.first .lead { font-size: 18px; margin: 14px 0 0; max-width: 36em; }
.priceline { margin: 16px 0 20px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 16px; color: var(--ink-2); max-width: none; }
.priceline b { color: var(--ink); font-size: 18px; }
.priceline span { white-space: nowrap; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.first .btns .btn { flex: 1 1 200px; min-height: 48px; }
.facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; max-width: 760px; }
.facts3 div { background: var(--surface); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 420px) { .facts3 div { font-size: 13px; padding: 9px 10px; overflow-wrap: normal; hyphens: auto; } }
.facts3 b { display: block; font-family: var(--display); color: var(--ink); font-size: 20px; margin-bottom: 2px; }
.crumbs + .first { padding-top: 6px; }
/* телефон в рамке: снимок живого демо в натуральную величину */
.phone-shot { display: block; background: #0E0E10; border: 1px solid var(--line); border-radius: 32px; padding: 8px;
box-shadow: var(--shadow); max-width: 280px; margin-inline: auto; }
.phone-shot img { display: block; width: 100%; height: auto; aspect-ratio: 560 / 1212; object-fit: cover; object-position: top;
border-radius: 25px; background: #F2F2F0; }
.phone-shot.sm { border-radius: 22px; padding: 5px; max-width: 210px; }
.phone-shot.sm img { border-radius: 17px; }
@media (max-width: 560px) {
.first .phone-shot { max-width: 220px; }
.first .btns .btn { flex: 1 1 140px; padding-inline: 12px; }
/* журнал на компьютере на экране телефона не прочитать (site_design.md, находка 10): там его не показываем */
.v2 .pc-only { display: none; }
}
figure { margin: 0; }
.v2 figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.shot-pc { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.shot-pc img { display: block; width: 100%; height: auto; }
/* вкладки: ниши на первом экране и роли персонала (site.js, tabs); без скрипта видно всё сразу */
.tabs .seg { display: flex; gap: 4px; background: var(--sunk); border: 1px solid var(--line); border-radius: 14px; padding: 4px;
margin: 0 auto 14px; max-width: 380px; }
.tabs .seg.left { margin-inline: 0; }
.tabs .seg button { flex: 1; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-2); background: none; border: 0;
border-radius: 10px; padding: 8px 6px; min-height: 44px; cursor: pointer; }
.tabs .seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.tabs .seg button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tabs [role="tabpanel"][hidden] { display: none; }
.tabs .pane figcaption { text-align: center; }
.role-pane { display: grid; gap: 22px; align-items: start; }
@media (min-width: 800px) { .role-pane { grid-template-columns: 280px 1fr; } }
.role-pane h3 { margin-bottom: 12px; }
/* карточки и сетки */
.grid3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.grid2.mid { align-items: center; }
.v2 .grid2 + .grid2, .v2 .screens + .grid2, .v2 .tabs + .screens { margin-top: 14px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pcard p { margin: 0; color: var(--ink-2); }
.pcard .btn { margin-top: auto; align-self: flex-start; }
.kind { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2);
color: var(--ink); text-decoration: none; font-size: 15px; }
.chips a:hover { background: var(--accent-soft); }
details.chips-more > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px;
border: 1px dashed var(--line); color: var(--muted); cursor: pointer; font-size: 15px; list-style: none; }
details.chips-more > summary::-webkit-details-marker { display: none; }
details.chips-more { background: none; border: 0; padding: 0; }
details.chips-more > summary::after { content: none; }
details.chips-more[open] > summary { display: none; }
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.ticks li { padding-left: 28px; position: relative; color: var(--ink-2); }
ul.ticks li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--accent);
border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
ul.nots li::before { border: 0; width: 12px; height: 2.5px; top: .7em; background: var(--no-ink); transform: none; }
/* экраны ролей */
.screens { display: grid; gap: 18px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .screens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .screens.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.screens figcaption b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }
.screens a { text-decoration: none; }
/* значок на экране телефона: схема, не снимок */
.homescreen { background: var(--sunk); border-radius: 22px; padding: 14px 12px; max-width: 190px; margin-inline: auto;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; border: 1px solid var(--line); }
.homescreen i { display: block; aspect-ratio: 1; border-radius: 22%; background: var(--surface-2); }
.homescreen .app { text-align: center; font-size: 12px; min-width: 0; color: var(--ink); line-height: 1.2; }
.homescreen .app i { background: #159C6E; display: flex; align-items: center; justify-content: center; font-family: var(--display);
font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 4px; font-style: normal;
box-shadow: 0 0 0 3px var(--accent); }
/* честная таблица слоёв: есть, часть, нет, ваш сервис */
.layers { width: 100%; border-collapse: collapse; font-size: 15px; }
.layers th, .layers td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.layers th:first-child, .layers td:first-child { text-align: left; padding-left: 0; }
.layers td.end { text-align: right; }
.layers thead th { font-size: 14px; color: var(--muted); font-weight: 600; }
.layers td:first-child b { display: block; font-weight: 600; color: var(--ink); }
.layers td:first-child span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.mk { display: inline-block; min-width: 56px; padding: 3px 7px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.mk.y { background: var(--accent-soft); color: var(--accent); }
.mk.p { background: var(--sun-soft); color: var(--sun-ink); }
.mk.n { background: var(--no-soft); color: var(--no-ink); }
.mk.s { background: var(--surface-2); color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; font-size: 14px; color: var(--muted); max-width: none; }
@media (max-width: 420px) { .layers { font-size: 14px; } .mk { min-width: 0; padding: 3px 5px; font-size: 12px; } .layers th, .layers td { padding-inline: 3px; } }
/* цена */
.cost { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
@media (min-width: 900px) { .cost { grid-template-columns: 1fr 1fr; padding: 32px; gap: 32px; } }
.cost > * { min-width: 0; }
.cost-num { font-family: var(--display); font-size: clamp(40px, 6vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.cost-num small { font-family: var(--sans); font-size: 18px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.cost .ticks { margin-top: 18px; }
.cost .btns { margin-top: 18px; }
.vs { background: var(--sunk); border-radius: 14px; padding: 16px; font-size: 15px; color: var(--ink-2); }
.vs b { color: var(--ink); }
.vs table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.vs td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.vs td + td { text-align: right; padding-left: 10px; color: var(--ink); width: 42%; }
.vs p { margin: 0; font-size: 14px; }
/* шаги и способы заказа */
.howto { counter-reset: s; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
list-style: none; padding: 0; margin: 0 0 22px; }
.howto li { counter-increment: s; background: var(--surface); border-radius: 16px; padding: 18px 18px 18px 60px; position: relative; color: var(--ink-2); }
.howto li::before { content: counter(s); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
background: var(--accent); color: var(--accent-ink); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.howto b { display: block; color: var(--ink); }
.ways { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ways a.way { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
padding: 16px 18px; color: var(--ink); text-decoration: none; }
.ways a.way:hover { border-color: var(--accent); }
.ways a.way b { font-size: 18px; }
.ways a.way span { color: var(--muted); font-size: 15px; }
/* раскрывающиеся подробности и сноски */
details.fold { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; padding: 0; }
details.fold > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; min-height: 48px; }
details.fold > div { padding: 0 16px 16px; color: var(--ink-2); font-size: 15px; }
details.fold > div p { max-width: none; }
details.fold details.fold { background: var(--sunk); }
.fine { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.5; max-width: 72ch; }
.center { text-align: center; }
/* живое демо внутри страницы: открывается по нажатию, окно не грузится, пока закрыто */
.livebox iframe { display: block; width: 100%; max-width: 420px; height: 640px; margin: 4px auto 0; border: 1px solid var(--line);
border-radius: 18px; background: #fff; }
@media (max-width: 560px) { .livebox iframe { height: 600px; } }
/* витрина ниш на /dlya/: плитка с экраном приложения */
.nshow { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.ncell { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; background: var(--surface);
border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.ncell .phone-shot { max-width: 92px; border-radius: 14px; padding: 3px; margin: 0; box-shadow: none; }
.ncell .phone-shot img { border-radius: 11px; }
.ncell h3 { font-size: 16px; margin: 0 0 4px; }
.ncell h3 a { color: var(--ink); text-decoration: none; }
.ncell p { font-size: 14px; margin: 0 0 8px; color: var(--ink-2); }
.ncell .links { font-size: 14px; }
/* --- документы: оферта и архив, политика, согласия (tools/site_chrome.to_doc) ---
Белая страница для чтения (docs/brand/palette.md, раздел 2): карточка текста шириной в строку чтения,
шапка и подвал общие и графитовые. Согласия клиента заведения открываются без нашей шапки. */
body.doc .docbox { max-width: 760px; margin: 28px auto 0; background: var(--surface); border: 1px solid var(--line);
border-radius: 18px; padding: 28px clamp(18px, 4vw, 40px); font-size: 16px; line-height: 1.6; }
body.doc .docbox h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.15; margin: 0 0 8px; }
body.doc .docbox h2 { font-size: 20px; line-height: 1.25; margin: 28px 0 10px; }
body.doc .docbox p { max-width: none; }
body.doc .docbox ul { margin: 0 0 12px; padding-left: 22px; }
body.doc .docbox li { margin-bottom: 4px; }
body.doc .docbox a { overflow-wrap: anywhere; }
body.doc .docbox .meta { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
body.doc .docbox .site-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
body.doc .docbox .site-foot a { color: var(--muted); }
@media (max-width: 560px) { body.doc .docbox { margin-top: 16px; border-radius: 14px; } }
/* рассказ «как это выглядит в работе» на главных нишах: абзацы в строку чтения */
.story { max-width: 760px; display: grid; gap: 4px; }
.story p { color: var(--ink-2); }
/* --- под ключ: 4 ниши, «Скоро» для остальных, отдельные страницы цены, подключения, вопросов и «О нас» (01.10) ---
Сначала телефон 390 px, потом шире. Собирают tools/build_home.py, tools/build_niche_pages.py, tools/turnkey_pages.py */
.first.home { padding-block: 40px 8px; }
.first.home h1 { font-size: clamp(34px, 6.4vw, 64px); max-width: 14ch; }
.first.home .lead { font-size: clamp(19px, 2.4vw, 24px); color: var(--ink); max-width: 30em; }
.first.home .btns { max-width: 560px; }
/* крупные карточки ниш: на телефоне снимок слева, на компьютере сверху */
.ncards { display: grid; gap: 14px; grid-template-columns: 1fr; }
.ncard { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--surface);
border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
.ncard-pic { display: block; border-radius: 14px; overflow: hidden; background: #0E0E10; border: 1px solid var(--line);
aspect-ratio: 3 / 4; }
.ncard-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ncard-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.v2 .ncard h2, .v2 .ncard h3 { font-size: 20px; margin: 2px 0 0; }
.ncard h2 a, .ncard h3 a { color: var(--ink); text-decoration: none; }
.ncard p { margin: 0; color: var(--ink-2); font-size: 15px; }
.ncard .btns { gap: 8px; margin-top: 2px; }
.ncard .btns .btn { flex: 1 1 120px; min-height: 44px; }
@media (min-width: 700px) { .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
.ncards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ncard { grid-template-columns: 1fr; padding: 14px; }
.ncard-pic { aspect-ratio: 4 / 3; }
}
/* три главные выгоды на первом экране ниши */
.gains { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gains li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; color: var(--ink-2); }
.gains b { display: block; color: var(--ink); font-family: var(--display); font-size: 17px; margin-bottom: 4px; }
/* «что входит»: на широком экране в две колонки */
@media (min-width: 900px) { ul.ticks.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
/* чем отличаемся: строка на сервис, наша строка выделена */
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 860px; }
.vs-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--ink-2); }
.vs-list li b { color: var(--ink); }
.vs-list li.ours { border-color: var(--accent); }
/* плашка «в разработке» на страницах ниш, которые ещё не запускаем под ключ */
.devnote { margin-top: 16px; background: var(--sun-soft); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
color: var(--ink); }
.devnote p { margin: 0; max-width: none; }
.devnote a { color: var(--ink); }
.devnote .btns { margin-top: 10px; }
.btns.wait { gap: 8px; margin: 10px 0 0; }
.btns.wait .btn { min-height: 44px; }
/* «Скоро»: группы ниш одной строкой и кнопка «Сообщить, когда будет готово» */
.soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .soon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.soon li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.v2 .soon h3 { font-size: 17px; margin: 0 0 6px; }
.soon p { margin: 0; color: var(--ink-2); font-size: 15px; }
.soon p a { color: var(--ink-2); }
/* контакты живого человека и список документов */
.contacts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.contacts a { display: inline-block; min-height: 24px; overflow-wrap: anywhere; }
.doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .doclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doclist li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.doclist a { font-weight: 600; }
.doclist span { display: block; font-size: 14px; color: var(--muted); }
/* пять шагов подключения: на широком экране в одну строку */
@media (min-width: 1100px) { .howto.steps5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .howto.steps5 li { padding: 60px 16px 18px; }
.howto.steps5 li::before { left: 16px; top: 16px; } }
/* меню: четыре ниши под ключ одной колонкой с подписью */
.drop-panel.one { grid-template-columns: 1fr; width: 340px; gap: 6px; }
.drop-panel.one ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.drop-panel.one li .drop-sub { padding-left: 8px; margin-top: -2px; }
.menu .drop-panel.one a { padding: 6px 8px; font-size: 15px; }
.menu .drop-panel.one a:not(.drop-more) { font-weight: 600; color: var(--ink); }
.menu .drop-panel.one a.drop-more { color: var(--accent); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; border-radius: 0; }
@media (max-width: 960px) {
.drop-panel.one { width: auto; }
.menu .drop-panel.one li a { display: inline-block; border: 0; border-radius: 0; padding: 8px 0 0; font-size: 16px; }
.drop-panel.one li .drop-sub { padding-left: 0; }
.menu .drop-panel.one a.drop-more { display: block; padding: 12px 0; }
}
/* --- отступы и ширины классами вместо атрибутов style="…": политика CSP запрещает встроенные стили --- */
section.sec-top { padding-top: 28px; }
.mb0 { margin-bottom: 0; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mt20 { margin-top: 20px; }
.mt22 { margin-top: 22px; }
.mt26 { margin-top: 26px; }
/* витрина демо (demo.html): название заведения крупно, ниша мелко */
.sub-muted { opacity: .75; font-weight: 400; }
.sub-line { display: block; opacity: .75; margin: -2px 0 6px; }
/* полоски цен в «Сравнении»: ширина полосы по цене */
.bar .fill.w6 { width: 6%; }
.bar .fill.w11 { width: 11%; }
.bar .fill.w15 { width: 15%; }
.bar .fill.w17 { width: 17%; }
.bar .fill.w29 { width: 29%; }
.bar .fill.w46 { width: 46%; }
.bar .fill.w55 { width: 55%; }
.bar .fill.w100 { width: 100%; }
/* --- страница «Сайт готовится к запуску» (web/site/soon.htm, режим «Скоро» в deploy/nginx_site.conf, 04.10.2026):
без знака, имени и описания продукта, внизу мелко ссылки на документы --- */
body.soon { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #FFFFFF; color: #23262B;
font-family: var(--sans); }
.soon-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.soon-line { margin: 0; font-size: clamp(20px, 5vw, 28px); text-align: center; }
.soon-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 16px; font-size: 13px; }
.soon-foot a { color: #65656B; display: inline-block; min-height: 24px; line-height: 24px; }