/* Страницы для поиска: отдельные статические HTML рядом с приложением.
Вид тот же тёмный «Терминал», что на лендинге и правовых страницах, но
вёрстка посадочная: широкие блоки, карточки, таблицы сравнения.
Почему отдельный файл, а не legal.css: тот сделан под сплошной документный
текст (узкая колонка 820 px, всё серое). Здесь нужны сетки и акценты, и
мешать это в один файл — портить обе стороны.
ПЕРЕПОЛНЕНИЯ ПО ГОРИЗОНТАЛИ БЫТЬ НЕ ДОЛЖНО. Его только что чинили на
правовых страницах (legal.css, 16.08.2026), и вернуть его здесь было бы
обидно: страницы для поиска смотрят с телефона чаще, чем с компьютера, а
Яндекс и Google понижают сайты, которые уезжают вбок. Поэтому: у body
стоит overflow-x: hidden как последний рубеж, все таблицы обёрнуты в
.tbl-wrap с контейнерным запросом, длинные слова переносятся. */
:root {
--bg: #0e1116; --surface: #161b23; --surface-2: #1b2230;
--border: #262e3a; --border-hi: #33404f;
--text: #e8ecf2; --text-muted: #8b96a5; --text-3: #5d6875;
--accent: #4d8dff; --good: #52c97e; --warn: #f0b354; --bad: #ec7a72;
--font: "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }
/* ---- Шапка ---- */
header.seo {
border-bottom: 1px solid var(--border); padding: 20px 0 0;
background: radial-gradient(ellipse 70% 130% at 50% 0%, rgba(77,141,255,.09), transparent 65%);
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: flex-end; gap: 9px; font-weight: 800; font-size: 19px; text-decoration: none; color: inherit; }
.brand svg { color: var(--accent); }
/* Тот же словесный замок, что в приложении (BrandMark.css) и на правовых
страницах. Статический HTML не может подключить React-компонент, поэтому
разметка повторена — см. тот же блок в legal.css. */
.brand .wm {
display: inline-flex; align-items: flex-end; line-height: 1;
font-family: "Montserrat", "Poppins", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
font-weight: 800; letter-spacing: -.035em; text-indent: -.035em;
}
.brand .wm .l { position: relative; display: inline-block; width: .3em; height: 1em; flex: none; }
.brand .wm .l .bar { position: absolute; left: .07em; bottom: .02em; width: .15em; height: .96em; border-radius: .075em; background: currentColor; }
.brand .wm .l .dot { position: absolute; left: .025em; top: -.1em; width: .245em; height: .245em; border-radius: 50%; background: var(--accent); }
/* Хлебные крошки: и человеку понятно, где он, и поиск показывает путь
вместо голого адреса. */
.crumbs { font-size: 13.5px; color: var(--text-3); padding: 14px 0 0; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
/* ---- Первый экран ---- */
.hero { padding: 26px 0 34px; }
.hero h1 { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.15; margin: 0 0 14px; letter-spacing: -.02em; }
.hero .lead { font-size: clamp(16px, 2vw, 18.5px); color: var(--text-muted); margin: 0 0 22px; max-width: 62ch; }
.hero .lead b { color: var(--text); font-weight: 600; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
display: inline-block; padding: 12px 22px; border-radius: 10px; font-weight: 600;
font-size: 15.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.btn-main { background: var(--accent); color: #fff; }
.btn-main:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--border-hi); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.cta-note { font-size: 13.5px; color: var(--text-3); }
main { padding: 8px 0 56px; }
section { padding: 30px 0; }
h2 { font-size: clamp(20px, 2.8vw, 26px); margin: 0 0 8px; letter-spacing: -.015em; line-height: 1.25; }
h3 { font-size: 17px; margin: 22px 0 8px; }
p, li { color: var(--text-muted); }
p { margin: 0 0 13px; max-width: 74ch; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }
b, strong { color: var(--text); font-weight: 600; }
a { color: var(--accent); }
.sub { color: var(--text-3); font-size: 14.5px; margin: -2px 0 18px; }
/* ---- Карточки ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 18px 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
.card h3 { margin: 0 0 7px; font-size: 16.5px; color: var(--text); }
.card p { margin: 0; font-size: 14.8px; }
.card p + p { margin-top: 9px; }
/* Плашка честности: где мы чего-то НЕ умеем. Она тут не для красоты —
владелец прямо запретил обещать несуществующее, а страница уходит наружу
и становится обещанием. */
.honest {
border: 1px solid var(--border-hi); border-left: 3px solid var(--warn);
background: var(--surface-2); border-radius: 10px; padding: 15px 18px; margin: 20px 0;
}
.honest p { margin: 0; font-size: 14.8px; }
.honest p + p { margin-top: 8px; }
.honest .lbl { display: block; color: var(--warn); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 6px; }
/* ---- Числовая полоса ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.fact { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 17px; }
.fact .n { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.02em; display: block; }
.fact .c { font-size: 13.5px; color: var(--text-3); }
/* ---- Формула ---- */
.formula {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 16px 18px; margin: 16px 0; font-size: 15px; color: var(--text-muted);
overflow-wrap: anywhere;
}
.formula .op { color: var(--text-3); padding: 0 3px; }
.formula .plus { color: var(--good); }
.formula .minus { color: var(--bad); }
/* ---- Таблицы ---- */
.tbl-wrap { overflow-x: auto; container-type: inline-size; margin: 14px 0 20px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yes { color: var(--good); font-weight: 600; }
.no { color: var(--text-3); }
/*
* ТАБЛИЦЫ НА ТЕЛЕФОНЕ — тот же приём, что на правовых страницах.
* Прокрутка вбок формально спасает, но правый столбец уезжает за край без
* намёка, что там что-то есть, — а в таблице сравнения именно правый столбец
* и есть ответ. Поэтому строка перестраивается в подписанные пары.
*
* Запрос КОНТЕЙНЕРНЫЙ, а не оконный: ширину задаёт .wrap со своими полями,
* и окно про неё ничего не знает.
*/
@container (max-width: 520px) {
.tbl-wrap table, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td { display: block; width: 100%; }
.tbl-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl-wrap tr { border-bottom: 1px solid var(--border); padding: 12px 14px; }
.tbl-wrap tr:last-child { border-bottom: none; }
.tbl-wrap td { border: none; padding: 4px 0; }
.tbl-wrap td.num { text-align: left; }
.tbl-wrap td[data-l]::before {
content: attr(data-l); display: block; font-size: 11.5px; text-transform: uppercase;
letter-spacing: .08em; color: var(--text-3); font-weight: 600; margin-bottom: 1px;
}
.tbl-wrap td:first-child { color: var(--text); font-weight: 600; padding-bottom: 8px; }
.tbl-wrap td:first-child[data-l]::before { content: none; }
}
/* ---- Вопросы и ответы ---- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq summary {
cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--text);
font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 16px; }
.faq p:last-child { margin-bottom: 0; }
/* ---- Финальный призыв ---- */
.final {
background: var(--surface); border: 1px solid var(--border-hi); border-radius: 16px;
padding: 30px 28px; margin: 26px 0 0; text-align: center;
}
.final h2 { margin-bottom: 10px; }
.final p { margin-left: auto; margin-right: auto; }
.final .cta-row { justify-content: center; }
/* ---- Подвал ---- */
footer.seo { border-top: 1px solid var(--border); padding: 24px 0 44px; color: var(--text-3); font-size: 13.5px; }
footer.seo nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
footer.seo a { text-decoration: none; }
footer.seo a:hover { text-decoration: underline; }
@media (max-width: 560px) {
section { padding: 24px 0; }
.btn { width: 100%; text-align: center; }
.cta-row { gap: 10px; }
}
/* ---- Переключение площадок на страницах-калькуляторах (16.08.2026) ----
Владелец открыл страницу WB и первым делом спросил «а где фильтр — вб озон
ям?»: посчитав одну площадку, человек тут же хочет посчитать вторую. Поэтому
выбор стоит НАД калькулятором, а не ссылкой в подвале.
Живёт в общем файле, а не в