/*
* Лендинг ветплан.рф. Статика без сборки: Caddy отдаёт каталог как есть.
* Сайт продаёт программу, которой нужен работающий сервер, но сам от сервера
* не зависит — упавший api не должен гасить витрину.
*
* Язык оформления взят из самого продукта, а не придуман для витрины:
* • цвет выбирает клиника — пять палитр из `backend/app/core/палитры.py`,
* и страница перекрашивается целиком, как кабинет после выбора в
* «Оформлении». Шкалы здесь переписаны оттуда же, руками не подбирать;
* • нейтральный — тёплый каменный (`neutral: 'stone'` в app.config.ts);
* • тёмное меню с узором из наклеек в тон палитре (useOformlenie.ts);
* • Лилла, выдра-помощница кабинета, и рукописные подписи с арт-листов.
*
* Шрифты лежат у нас (shrift/), а не на Google Fonts: подгрузка с чужого
* сервера отдаёт IP посетителя за границу, а это уже трансграничная передача
* по 152-ФЗ, о которой пришлось бы писать в политике.
*/
@font-face {
font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
src: url(shrift/onest-cyr.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
src: url(shrift/onest-lat.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA,
U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Отдельный кусок ради знака рубля: в латинском подмножестве его нет,
и без этого файла цены рисуются чужим шрифтом. */
@font-face {
font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
src: url(shrift/onest-latext.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}
/* Рукописный — только для пометок на макетах, как надписи на арт-листах
клиники. В тексте страницы его нет: читать им абзац тяжело. */
/* Caveat (аудит 02.10.2026): один вес 600 вместо переменного 500–700 и только
нужные знаки - 80 КБ вместо 150. Кириллица несёт и пробел, цифры, знаки,
поэтому латиница грузится, только если в пометке есть латинские буквы.
Прежние файлы shrift/caveat-cyrillic.woff2 и caveat-latin.woff2 оставлены. */
@font-face {
font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
src: url(shrift/caveat-cyrillic-600.woff2) format("woff2");
unicode-range: U+20-40, U+AB, U+BB, U+401, U+410-44F, U+451, U+2013-2014, U+2026, U+2116;
}
@font-face {
font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
src: url(shrift/caveat-latin-600.woff2) format("woff2");
unicode-range: U+41-7E, U+A0, U+2019, U+201C-201D;
}
/* ТЁМНАЯ ТЕМА ВЫКЛЮЧЕНА (23.09.2026, решение владельца): у кого в системе
тёмный режим, видели чёрный сайт и принимали его за другой стиль. Витрина
всегда светлая, как фирменный вид кабинета. Правила тёмной темы оставлены
на месте с условием `(max-width: 0px)`, которое не выполняется никогда;
вернуть — убрать это условие во всех блоках. */
/* ── палитра ──
С 24.09.2026 витрина — светлая, в медицинском голубом (решение владельца):
акцент --а-* — «Синий клинический» из палитр продукта (`палитры.py`),
нейтральные — холодные светло-голубые. Ключевые кнопки — зелёные (--кнопка),
отдельно от акцента. Прежние значения («Ветеринарный зелёный», тёплый
камень): --а-50 #F0FDF4 … --а-900 #0F4234, --меню #12402D; --фон #fafaf9,
--камень #f5f5f4, --камень-2 #efeeec, --линия #e7e5e4, --линия-2 #f0efed,
--чернила #1c1917, --графит #57534e, --тихий #716a64. */
:root {
--а-50: #F3FAFF; --а-100: #E3F3FF; --а-200: #C9E7FF; --а-300: #A3D4FF;
--а-400: #7BBAFF; --а-500: #3C72DB; --а-600: #3D68B9; --а-700: #325390;
--а-800: #2A4476; --а-900: #273857; --меню: #253656;
--кнопка: #15803D;
--кнопка-наведение: #166534;
--фон: #f6f9fd;
--лист: #ffffff;
--камень: #eef4fa;
--камень-2: #e3ecf6;
--линия: #dbe4ef;
--линия-2: #e9eff6;
--чернила: #0f1c2e;
--графит: #44536a;
/* Проверено на всех четырёх фонах: не ниже 4,5 (норма HIG/WCAG). */
--тихий: #56657b;
--янтарь: #b45309;
--янтарь-фон: #fef3c7;
--красный: #b42318;
--акцент: var(--а-600);
--акцент-текст: var(--а-700);
--на-акценте: #ffffff;
--тон: var(--а-50);
--тон-2: var(--а-100);
--тень-высокая: 0 2px 6px rgba(28, 25, 23, .07), 0 36px 70px -28px rgba(28, 25, 23, .38);
--поле: clamp(1rem, 4vw, 2.5rem);
--ширина: 1200px;
color-scheme: light;
}
@media (prefers-color-scheme: dark) and (max-width: 0px) {
:root {
--фон: #151311;
--лист: #1f1c19;
--камень: #24211e;
--камень-2: #2b2724;
--линия: #36312d;
--линия-2: #2c2825;
--чернила: #f2efec;
--графит: #b5aea8;
--тихий: #8d857e;
--янтарь: #fbbf24;
--янтарь-фон: #3b2a0c;
--красный: #f59a90;
--акцент: var(--а-400);
--акцент-текст: var(--а-300);
--на-акценте: #0c0a09;
--тон: color-mix(in srgb, var(--а-500) 16%, var(--лист));
--тон-2: color-mix(in srgb, var(--а-500) 26%, var(--лист));
--тень-высокая: 0 2px 6px rgba(0, 0, 0, .5), 0 36px 70px -28px rgba(0, 0, 0, .9);
color-scheme: dark;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0;
font: 400 1.0625rem/1.55 "Onest", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--чернила);
background: var(--фон);
/* При очень крупном шрифте длинное слово («Ревакцинация») шире узкого
экрана — пусть переносится, а не вылезает за край. */
overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--акцент-текст); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--акцент); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* Панели и форма прячутся атрибутом, а у самих блоков свой display —
без !important класс перебивает атрибут, и видно всё сразу. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.обёртка {
max-width: var(--ширина); margin-inline: auto;
padding-left: max(var(--поле), env(safe-area-inset-left, 0px));
padding-right: max(var(--поле), env(safe-area-inset-right, 0px));
}
/* Смена палитры — ответ на нажатие, поэтому цвета переходят плавно: видно,
что поменялось. Сама по себе на странице ничего не движется. */
@media (prefers-reduced-motion: no-preference) {
.перекраска * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, stroke .35s ease; }
}
/* ── шрифтовая шкала ── */
.h1 { font-size: clamp(2.25rem, 4.4vw, 3.625rem); line-height: 1.02; font-weight: 760; letter-spacing: -.04em; text-wrap: balance; }
.h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); line-height: 1.06; font-weight: 740; letter-spacing: -.034em; text-wrap: balance; }
.h3 { line-height: 1.25; font-weight: 680; letter-spacing: -.015em; }
.вводный { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--графит); max-width: 34em; text-wrap: pretty; }
/* ── кнопки ── */
.кнопка {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 52px; padding: 0 24px;
font-weight: 640; font-size: 1.0625rem; text-decoration: none; text-align: center;
/* Перенос разрешён: при крупном шрифте «Переезд из Ветменеджера» шире
узкого экрана, и запрет переноса выталкивал кнопку за край. */
padding-block: 10px; line-height: 1.25;
border: 1.5px solid transparent; cursor: pointer;
}
.кнопка-главная { background: var(--кнопка); color: #ffffff; }
@media (prefers-reduced-motion: no-preference) {
.кнопка { transition: transform .1s ease-out, background-color .15s; }
.кнопка:active { transform: scale(.98); }
}
.кнопка-главная:hover { background: var(--кнопка-наведение); color: #ffffff; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .кнопка-главная:hover { background: var(--а-300); } }
.кнопка-тихая { border-color: var(--линия); color: var(--чернила); background: var(--лист); }
.кнопка-тихая:hover { border-color: var(--чернила); color: var(--чернила); }
/* ── рукописная пометка со стрелкой ── */
.пометка {
position: absolute; z-index: 4; pointer-events: none;
font: 600 1.5625rem/1.05 "Caveat", "Segoe Print", cursive;
width: max-content; max-width: 230px;
}
.пометка svg { position: absolute; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* ── Лилла ── наклейка: белая обводка и мягкая тень, как у стикеров кабинета */
.лилла {
position: absolute; z-index: 5; width: 104px;
filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 10px rgba(28, 25, 23, .2));
}
.лилла img { width: 100%; height: auto; }
/* Точки перестройки — в em, а не в px: em в медиазапросе считается от
размера шрифта, выбранного человеком в браузере. Кто увеличил шрифт,
получает более простую раскладку раньше — иначе крупный текст не
помещается в колонки, рассчитанные на обычный. */
/* ── шапка ── */
.шапка {
position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
background: color-mix(in srgb, var(--фон) 90%, transparent);
backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px);
border-bottom: 1px solid transparent; transition: border-color .2s;
}
.шапка.прокручено { border-bottom-color: var(--линия); }
.шапка .обёртка { display: flex; align-items: center; gap: 28px; height: 68px; }
.знак { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--чернила); text-decoration: none; font-weight: 760; font-size: 1.25rem; letter-spacing: -.03em; }
.знак-лапа { width: 34px; height: 34px; border-radius: 10px; background: var(--меню); display: grid; place-items: center; flex: none; }
.знак-лапа svg { width: 20px; height: 20px; stroke: var(--а-200); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.меню { display: flex; gap: 26px; margin-left: auto; font-size: 0.9375rem; }
.меню a { color: var(--графит); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.меню a:hover { color: var(--чернила); }
/* gap в ширину пробела: «клинику» — отдельный кусок кнопки (прячется на
узком экране), и обычный отступ между кусками выглядел двойным пробелом. */
.шапка .кнопка { gap: .28em; min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
@media (max-width: 60em) { .меню { display: none; } .шапка .кнопка { margin-left: auto; } }
/* ── первый экран ── */
.первый { padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(4.5rem, 9vw, 8rem); overflow: hidden; }
.первый .обёртка { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.первый .вводный { margin-top: 24px; }
.действия { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.действия .кнопка { padding: 0 20px; font-size: 1rem; }
@media (max-width: 63.75em) { .первый .обёртка { grid-template-columns: minmax(0, 1fr); } }
/* Выбор палитры стоит прямо над кабинетом, который он перекрашивает:
так видно причину и следствие сразу, без прокрутки. Кнопки, а не
радиокнопки в форме: выбор ничего не отправляет, и aria-pressed говорит
ровно это. */
.примерка { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; font-size: 0.9062rem; color: var(--графит); }
.палитры { display: flex; }
.палитры { gap: 2px; flex-wrap: wrap; }
/* Видимый круг 30px, а касаемая область — 44: меньше палец промахивается
(HIG, минимум 44×44). Кольцо выбора рисуется по краю касаемой области. */
.палитры button {
width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: radial-gradient(circle, var(--цвет) 14.5px, transparent 15.5px);
}
.палитры button:hover { box-shadow: inset 0 0 0 1.5px var(--линия); }
.палитры button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--чернила); }
.примерка b { color: var(--чернила); font-weight: 640; min-width: 7em; }
/* ── макет кабинета ──
Повторяет настоящий: узкое тёмное меню с узором, шапка с названием
раздела и кнопкой, рабочая область на каменном фоне. Без рамки окна
браузера — кабинет узнают по меню, а не по трём точкам в углу. */
.кабинет {
display: grid; grid-template-columns: 52px minmax(0, 1fr);
background: var(--фон); border: 1px solid var(--линия); border-radius: 16px;
box-shadow: var(--тень-высокая); overflow: hidden; font-size: 0.8125rem; text-align: left;
}
.кабинет-меню { position: relative; background: var(--меню); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.кабинет-меню::before {
content: ""; position: absolute; inset: 0; opacity: .28; background: var(--а-200);
-webkit-mask: url(kartinki/uzor.webp) 0 0 / 240px auto repeat; mask: url(kartinki/uzor.webp) 0 0 / 240px auto repeat;
}
.кабинет-меню > * { position: relative; }
.кабинет-лого { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; margin-bottom: 10px; color: var(--а-700); font-weight: 760; font-size: 0.875rem; }
.кабинет-меню svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; stroke: rgba(255, 255, 255, .72); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.кабинет-меню svg.тут { background: rgba(255, 255, 255, .16); stroke: #fff; }
.кабинет-тело { min-width: 0; display: flex; flex-direction: column; }
.кабинет-верх { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border-bottom: 1px solid var(--линия); background: var(--лист); }
.кабинет-верх b { font-size: 0.9062rem; font-weight: 680; }
.кабинет-верх .мкнопка { margin-left: auto; }
.мкнопка { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--акцент); color: var(--на-акценте); font-weight: 620; font-size: 0.7812rem; white-space: nowrap; }
.кабинет-поле { padding: 14px; flex: 1; min-width: 0; }
/* Доска записей: колонка «Не разобрано» слева, дни справа — как в кабинете. */
.доска { display: grid; grid-template-columns: 170px repeat(3, minmax(0, 1fr)); border: 1px solid var(--линия); border-radius: 12px; overflow: hidden; background: var(--лист); }
.доска-колонка { border-left: 1px solid var(--линия-2); min-width: 0; }
.доска-колонка:first-child { border-left: 0; background: var(--камень); }
.доска-шапка { height: 44px; padding: 7px 10px; border-bottom: 1px solid var(--линия-2); font-size: 0.7188rem; color: var(--тихий); line-height: 1.25; }
.доска-шапка b { display: block; color: var(--чернила); font-size: 0.7812rem; }
.доска-колонка:first-child .доска-шапка b { color: var(--янтарь); }
.доска-колонка.сегодня .доска-шапка { background: var(--тон); }
.доска-колонка.сегодня .доска-шапка b { color: var(--акцент-текст); }
.доска-список { display: grid; gap: 6px; padding: 8px; }
.заявка-карточка { background: var(--лист); border: 1px solid var(--линия); border-radius: 9px; padding: 8px 9px; line-height: 1.35; }
.заявка-карточка b { display: block; font-size: 0.7812rem; }
.заявка-карточка > span { display: block; font-size: 0.7188rem; color: var(--графит); }
.заявка-карточка em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 0.6562rem; font-weight: 620; padding: 2px 6px; border-radius: 5px; background: var(--янтарь-фон); color: var(--янтарь); }
.запись { border-radius: 8px; padding: 7px 8px; line-height: 1.3; background: var(--тон); border-left: 3px solid var(--акцент); }
.запись b { display: block; font-size: 0.75rem; }
.запись span { display: block; font-size: 0.6875rem; color: var(--графит); }
.запись time { display: block; font-size: 0.6562rem; color: var(--тихий); margin-bottom: 1px; }
.свободно { font-size: 0.6875rem; color: var(--тихий); padding: 6px 2px; }
/* ── телефон владельца ──
Приложение клиента палитру клиники НЕ берёт: у него свой зелёный, а от
клиники — логотип и телефон в шапке. Поэтому переключатель палитр
телефон не перекрашивает — иначе витрина обещала бы то, чего нет. */
.телефон { --а-200: #BBF7D0; --акцент: #15803D; --акцент-текст: #166534; --тон: #F0FDF4; --тон-2: #DCFCE7; --на-акценте: #fff; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
.телефон { --акцент: #4ADE80; --акцент-текст: #86EFAC; --тон: #1b2a20; --тон-2: #213626; --на-акценте: #0c0a09; }
}
.телефон { width: 232px; border-radius: 36px; padding: 8px; }
.телефон-экран { border-radius: 29px; overflow: hidden; font-size: 0.7812rem; min-height: 440px; }
.прил-шапка { display: flex; align-items: center; gap: 9px; padding: 18px 14px 10px; }
.прил-лого { width: 32px; height: 32px; border-radius: 50%; background: var(--лист); border: 1.5px solid var(--а-200); display: grid; place-items: center; color: var(--акцент-текст); font-weight: 760; font-size: 0.8125rem; flex: none; }
.прил-шапка b { display: block; font-size: 0.8125rem; line-height: 1.2; }
.прил-шапка small { display: block; font-size: 0.6875rem; color: var(--тихий); }
.прил-карта { margin: 2px 12px 10px; padding: 12px; border-radius: 16px; background: var(--лист); display: flex; align-items: center; gap: 10px; }
.прил-аватар { width: 40px; height: 40px; border-radius: 12px; background: var(--тон-2); display: grid; place-items: center; flex: none; color: var(--акцент-текст); font-weight: 760; }
.прил-карта b { display: block; font-size: 0.875rem; }
.прил-карта div > span { display: block; font-size: 0.7188rem; color: var(--графит); }
.пуш { margin: 0 12px 10px; padding: 10px 12px; border-radius: 14px; background: var(--лист); border-left: 3px solid var(--акцент); }
.пуш b { display: block; font-size: 0.75rem; }
.пуш span { display: block; font-size: 0.7188rem; color: var(--графит); line-height: 1.35; }
.прил-кнопка { margin: 0 12px 14px; height: 40px; border-radius: 12px; background: var(--акцент); color: var(--на-акценте); display: grid; place-items: center; font-weight: 640; font-size: 0.8125rem; }
.прил-заголовок { margin: 4px 14px 6px; font-size: 0.7188rem; font-weight: 620; color: var(--тихий); }
.напоминание { display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 10px; border-radius: 12px; background: var(--лист); }
.напоминание b { display: block; font-size: 0.7812rem; }
.напоминание span { display: block; font-size: 0.7188rem; color: var(--тихий); }
.напоминание em { margin-left: auto; font-style: normal; font-size: 0.6562rem; font-weight: 620; padding: 3px 7px; border-radius: 6px; background: var(--янтарь-фон); color: var(--янтарь); white-space: nowrap; }
.напоминание em.ок { background: var(--тон-2); color: var(--акцент-текст); }
.пузырь { max-width: 84%; padding: 8px 11px; border-radius: 15px; font-size: 0.75rem; line-height: 1.4; margin: 0 12px 6px; }
.пузырь-клиника { background: var(--лист); border-bottom-left-radius: 4px; }
.пузырь-я { margin-left: auto; background: var(--акцент); color: var(--на-акценте); border-bottom-right-radius: 4px; }
.пузырь-фото { height: 80px; border-radius: 10px; margin-top: 6px; }
/* Витрина первого экрана: кабинет, справа поверх телефон, на кромке
кабинета — Лилла. Телефон закрывает только пустую пятницу, а не колонку
«Не разобрано»: на неё и указывает пометка. */
.сцена { position: relative; padding: 34px 0 64px; }
.сцена .кабинет { margin-right: 150px; }
/* В витрине дней два: третий всё равно ушёл бы под телефон. */
.сцена .доска { grid-template-columns: 160px repeat(2, minmax(0, 1fr)); }
.сцена .доска-колонка.лишняя { display: none; }
.сцена .телефон { position: absolute; right: 0; bottom: 0; z-index: 3; width: 200px; }
.сцена .телефон-экран { min-height: 0; }
/* Лилла стоит на верхней кромке кабинета между заголовком и кнопкой —
так она не закрывает ни то, ни другое. */
.сцена .лилла { left: calc((100% - 150px) * .47); top: -42px; width: 86px; }
.сцена .пометка { left: 8px; bottom: -4px; transform: rotate(-2deg); }
.сцена .пометка svg { left: 150px; top: -58px; width: 44px; height: 56px; }
@media (max-width: 77.5em) { .доска { grid-template-columns: 160px repeat(2, minmax(0, 1fr)); } .доска-колонка.лишняя { display: none; } }
@media (max-width: 63.75em) { .витрина { max-width: 760px; } }
@media (max-width: 40em) {
.сцена { padding: 30px 0 0; }
.сцена .кабинет { margin-right: 0; }
.сцена .доска { grid-template-columns: 136px minmax(0, 1fr); }
.сцена .телефон, .сцена .пометка { display: none; }
.сцена .лилла { width: 62px; top: -30px; left: 47%; }
.доска { grid-template-columns: 136px minmax(0, 1fr); }
.доска-колонка.лишняя-2 { display: none; }
}
@media (max-width: 26.25em) { .кабинет { grid-template-columns: 40px minmax(0, 1fr); } .кабинет-меню svg { width: 26px; height: 26px; padding: 5px; } .кабинет-лого { width: 26px; height: 26px; } }
/* ── ролик первого экрана ── */
/* Фон тёмный, как первый кадр ролика: пока видео грузится, не мелькает
светлый прямоугольник. */
.ролик { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #06130d; border: 1px solid var(--линия); box-shadow: var(--тень-высокая); }
.ролик video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ролик-кнопка {
position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%;
border: 0; cursor: pointer; display: grid; place-items: center;
background: rgba(28, 25, 23, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ролик-кнопка svg { width: 18px; height: 18px; stroke: #fff; fill: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ролик-кнопка .знак-пуск { display: none; }
.ролик-кнопка.на-паузе .знак-пуск { display: block; }
.ролик-кнопка.на-паузе .знак-пауза { display: none; }
/* ── разделы ── */
.раздел { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.раздел-лист { background: var(--лист); }
.заголовок-раздела { max-width: 780px; margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.заголовок-раздела .вводный { margin-top: 18px; }
/* Три роли. У каждой — кусок того экрана, в котором она живёт, а не значок:
по кусочку интерфейса видно, о чём речь, быстрее, чем по картинке. */
.роли { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.роль .h3 { margin-bottom: 6px; }
.роль > p { color: var(--графит); font-size: 0.9688rem; }
.лоток { margin: 20px 0 18px; padding: 16px; border-radius: 16px; background: var(--камень); min-height: 180px; display: flex; flex-direction: column; justify-content: center; font-size: 0.8125rem; }
.роль > ul li { padding: 11px 0; border-top: 1px solid var(--линия); font-size: 0.9688rem; line-height: 1.45; }
@media (max-width: 56.25em) { .роли { grid-template-columns: minmax(0, 1fr); gap: 48px; } .лоток { min-height: 0; } }
.мини-путь li { position: relative; display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; padding-bottom: 12px; }
.мини-путь li:last-child { padding-bottom: 0; }
.мини-путь li::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--линия); }
.мини-путь li:last-child::before { display: none; }
.мини-путь i { width: 18px; height: 18px; border-radius: 50%; background: var(--акцент); margin-top: 1px; position: relative; }
.мини-путь i.будет { background: var(--камень); border: 2px dashed var(--акцент); }
.мини-путь b { font-size: 0.8125rem; }
.мини-путь span { grid-column: 2; font-size: 0.75rem; color: var(--графит); }
.действия-заявки { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.действия-заявки .мкнопка:last-child { background: var(--лист); color: var(--чернила); border: 1px solid var(--линия); }
.воронка div + div { margin-top: 12px; }
.воронка p { display: flex; justify-content: space-between; font-size: 0.7812rem; margin-bottom: 5px; }
.воронка p b { font-variant-numeric: tabular-nums; }
.воронка i { display: block; height: 8px; border-radius: 4px; background: var(--акцент); }
.воронка div:nth-child(2) i { opacity: .7; }
.воронка div:nth-child(3) i { opacity: .45; }
/* ── интерфейс: вкладки ── */
.вкладки { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--камень-2); width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 22px; }
.вкладки button { flex: none; min-height: 44px; font-size: 0.9375rem; font-weight: 580; color: var(--графит); background: none; border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer; }
.вкладки button[aria-selected="true"] { background: var(--лист); color: var(--чернила); box-shadow: 0 1px 3px rgba(28, 25, 23, .12); }
.показ { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.показ-текст .h3 { margin-bottom: 10px; }
.показ-текст p { color: var(--графит); font-size: 1rem; }
.показ-текст ul { margin-top: 18px; }
.показ-текст li { padding: 10px 0; border-top: 1px solid var(--линия); font-size: 0.9375rem; }
@media (max-width: 56.25em) { .показ { grid-template-columns: minmax(0, 1fr); } .показ-текст { order: -1; } }
.прокрутка { overflow-x: auto; }
.сетка-дня { display: grid; grid-template-columns: 46px repeat(3, minmax(140px, 1fr)); min-width: 520px; background: var(--лист); border: 1px solid var(--линия); border-radius: 12px; overflow: hidden; }
.сетка-дня > div { border-bottom: 1px solid var(--линия-2); border-left: 1px solid var(--линия-2); min-height: 56px; padding: 3px 4px; }
.сетка-дня > .час { border-left: 0; font-size: 0.6875rem; color: var(--тихий); text-align: right; padding: 5px 8px 0 0; }
.сетка-дня > .врач { min-height: 0; padding: 9px 10px; font-weight: 620; font-size: 0.7812rem; }
.сетка-дня > .врач small { display: block; font-weight: 400; color: var(--тихий); font-size: 0.7188rem; }
.запись.новая { background: var(--янтарь-фон); border-left-color: var(--янтарь); }
.запись.долгая { min-height: 104px; }
.приём-экран { display: grid; grid-template-columns: 1fr 210px; min-width: 560px; background: var(--лист); border: 1px solid var(--линия); border-radius: 12px; overflow: hidden; }
.приём-поля { padding: 14px 16px; display: grid; gap: 11px; border-right: 1px solid var(--линия-2); }
.поле-макет small { display: block; font-size: 0.7188rem; color: var(--тихий); margin-bottom: 4px; }
.поле-макет div { border: 1px solid var(--линия); border-radius: 9px; padding: 7px 10px; font-size: 0.7812rem; line-height: 1.45; background: var(--фон); }
.шаблоны { display: flex; gap: 6px; flex-wrap: wrap; }
.шаблоны span { font-size: 0.6875rem; padding: 3px 8px; border-radius: 6px; background: var(--камень-2); color: var(--графит); }
.счёт { padding: 14px; }
.счёт h4 { font-size: 0.7812rem; font-weight: 660; margin-bottom: 8px; }
.счёт li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--линия); font-size: 0.75rem; }
.счёт li span:last-child, .итог span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.итог { display: flex; justify-content: space-between; margin: 12px 0; font-weight: 720; font-size: 0.875rem; }
.счёт .мкнопка { width: 100%; justify-content: center; }
.таблица { width: 100%; min-width: 540px; border-collapse: separate; border-spacing: 0; font-size: 0.7812rem; background: var(--лист); border: 1px solid var(--линия); border-radius: 12px; overflow: hidden; }
.таблица th { text-align: left; font-weight: 500; font-size: 0.7188rem; color: var(--тихий); padding: 9px 12px; border-bottom: 1px solid var(--линия); background: var(--камень); }
.таблица td { padding: 10px 12px; border-bottom: 1px solid var(--линия-2); vertical-align: middle; }
.таблица tr:last-child td { border-bottom: 0; }
.таблица td b { display: block; font-weight: 620; }
.таблица td small { display: block; color: var(--тихий); font-size: 0.7188rem; }
.число { font-variant-numeric: tabular-nums; }
.метка { display: inline-block; font-size: 0.6875rem; font-weight: 620; padding: 3px 8px; border-radius: 6px; background: var(--тон-2); color: var(--акцент-текст); white-space: nowrap; }
.метка.жёлтая { background: var(--янтарь-фон); color: var(--янтарь); }
.точки { display: flex; gap: 4px; }
.точки i { width: 13px; height: 13px; border-radius: 4px; background: var(--акцент); }
.точки i.нет { background: var(--линия); }
/* ── две колонки: текст и макет ── */
.пара { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 6rem); align-items: center; }
.пара > * { min-width: 0; }
.пара-макет { position: relative; display: flex; justify-content: center; }
@media (max-width: 56.25em) { .пара { grid-template-columns: minmax(0, 1fr); } .пара-макет { order: 1; } }
.перечень { margin-top: 30px; }
.перечень li { padding: 15px 0; border-top: 1px solid var(--линия); }
.перечень li:last-child { border-bottom: 1px solid var(--линия); }
.перечень b { display: block; font-weight: 660; margin-bottom: 2px; }
.перечень span { display: block; color: var(--графит); font-size: 0.9688rem; }
.два-телефона { display: flex; gap: 22px; align-items: flex-start; }
.два-телефона .телефон:last-child { margin-top: 56px; }
@media (max-width: 35em) { .два-телефона .телефон:last-child { display: none; } }
/* Сайт клиники — по шаблону настоящего (`site_templates/главная.html`):
крупное название клиники цветом палитры, водяной знак-лапа, две кнопки. */
.сайт { width: 100%; max-width: 560px; background: var(--лист); border: 1px solid var(--линия); border-radius: 16px; box-shadow: var(--тень-высокая); overflow: hidden; font-size: 0.7812rem; text-align: left; }
.сайт-адрес { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: var(--камень); border-bottom: 1px solid var(--линия); font-size: 0.7188rem; color: var(--графит); }
.сайт-адрес svg { width: 12px; height: 12px; stroke: var(--тихий); fill: none; stroke-width: 2.2; }
.сайт-верх { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--линия-2); }
.сайт-верх nav { margin-left: auto; display: flex; gap: 12px; color: var(--графит); font-size: 0.7188rem; }
.сайт-верх .мкнопка { height: 28px; font-size: 0.7188rem; }
@media (max-width: 32.5em) { .сайт-верх nav { display: none; } .сайт-верх .мкнопка { margin-left: auto; } }
.сайт-герой { position: relative; padding: 26px 18px 22px; background: var(--тон); overflow: hidden; }
.сайт-герой small { display: block; font-size: 0.6562rem; font-weight: 700; letter-spacing: .06em; color: var(--акцент-текст); }
.сайт-герой strong { position: relative; display: block; margin-top: 8px; font-size: 1.875rem; line-height: 1.02; letter-spacing: -.035em; color: var(--акцент-текст); max-width: 9em; }
.сайт-герой p { position: relative; margin-top: 10px; color: var(--графит); max-width: 26em; }
.сайт-герой .мкнопка { position: relative; margin-top: 14px; }
.сайт-герой svg { position: absolute; right: -14px; top: 14px; width: 150px; height: 150px; fill: var(--а-200); opacity: .5; }
.сайт-прайс { padding: 14px 18px 18px; }
.сайт-прайс h5 { margin: 0 0 6px; font-size: 0.8125rem; }
.сайт-прайс li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--линия-2); }
.сайт-прайс li span:last-child { font-variant-numeric: tabular-nums; }
.пара-макет .пометка.сайта { transform: rotate(-4deg); }
.пара-макет .пометка.сайта svg { left: -52px; top: -40px; width: 50px; height: 46px; }
@media (max-width: 73.75em) { .пара-макет .пометка.сайта { display: none; } }
/* ── переезд: это настоящая последовательность, поэтому номера ── */
.шаги { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); counter-reset: шаг; }
.шаг { counter-increment: шаг; }
.шаг::before {
content: counter(шаг); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
border-radius: 50%; font-weight: 720; font-size: 1rem;
}
.шаг p { color: var(--графит); font-size: 0.9688rem; margin-top: 8px; }
@media (max-width: 50em) { .шаги { grid-template-columns: 1fr; } }
.откуда { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(2.5rem, 5vw, 4rem); }
.откуда > div { padding: 22px 28px 0 0; }
.откуда > div + div { padding-left: 28px; border-left: 1px solid var(--линия); }
.откуда b { display: block; font-size: 1.0625rem; margin-bottom: 6px; }
.откуда p { font-size: 0.9375rem; color: var(--графит); }
@media (max-width: 50em) {
.откуда { grid-template-columns: 1fr; }
.откуда > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--линия); margin-top: 22px; }
}
/* ── цены: калькулятор ──
Правило то же, что в `app/core/тарифы.py`: база плюс рубль за каждого
клиента с приложением сверх пакета. Тарифы не сравниваются столбиками
галочек — у них одинаковые разделы, и честнее сразу посчитать счёт. */
.расчёт { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); border: 1px solid var(--линия); background: var(--лист); }
.расчёт-ввод { padding: 28px; background: var(--камень); display: grid; gap: 30px; align-content: start; }
.расчёт-ввод label, .расчёт-ввод .подпись { display: block; font-weight: 620; font-size: 0.9375rem; margin-bottom: 10px; }
.расчёт-ввод small { display: block; margin-top: 8px; font-size: 0.8125rem; color: var(--графит); line-height: 1.45; }
.счётчик { display: flex; align-items: center; width: max-content; border: 1.5px solid var(--линия); border-radius: 12px; background: var(--лист); overflow: hidden; }
.счётчик button { width: 46px; height: 46px; border: 0; background: none; font-size: 1.375rem; cursor: pointer; color: var(--чернила); }
.счётчик button:hover { background: var(--камень); }
.счётчик output { min-width: 56px; text-align: center; font-weight: 700; font-size: 1.1875rem; font-variant-numeric: tabular-nums; }
.ползунок-число { font-weight: 740; font-size: 1.875rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
input[type="range"] { width: 100%; accent-color: var(--акцент); height: 44px; margin: 0; }
.расчёт-итог { padding: 10px 28px; }
.вариант { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--линия); }
.вариант:last-child { border-bottom: 0; }
.вариант-имя { font-weight: 700; font-size: 1.125rem; }
.вариант-имя small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--тихий); margin-top: 2px; }
.вариант-как { font-size: 0.875rem; color: var(--графит); font-variant-numeric: tabular-nums; }
.вариант-цена { font-size: 1.75rem; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.вариант-цена small { display: inline-block; font-size: 0.875rem; font-weight: 500; color: var(--графит); letter-spacing: 0; }
.вариант.лучший .вариант-имя::after { content: "подходит лучше"; display: block; width: max-content; margin-top: 8px; font-size: 0.75rem; font-weight: 640; padding: 3px 8px; border-radius: 6px; background: var(--тон-2); color: var(--акцент-текст); }
.вариант.мимо { opacity: .5; }
.вариант.мимо .вариант-цена { font-size: 0.9375rem; font-weight: 560; letter-spacing: 0; }
@media (max-width: 53.75em) { .расчёт { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 32.5em) {
.вариант { grid-template-columns: minmax(0, 1fr) auto; }
.вариант-как { grid-column: 1 / -1; grid-row: 2; }
.расчёт-итог { padding: 6px 20px; }
.расчёт-ввод { padding: 22px 20px; }
}
.сноска { margin-top: 18px; max-width: 62em; font-size: 0.9062rem; color: var(--графит); }
.во-всех { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--линия); }
.во-всех p { color: var(--графит); line-height: 1.75; max-width: 60em; }
@media (max-width: 43.75em) { .во-всех { grid-template-columns: 1fr; gap: 10px; margin-top: 44px; } }
/* ── вопросы ── */
.вопросы { max-width: 840px; }
.вопросы details { border-top: 1px solid var(--линия); }
.вопросы details:last-child { border-bottom: 1px solid var(--линия); }
.вопросы summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 21px 0; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 640; }
.вопросы summary::-webkit-details-marker { display: none; }
/* У flex-строки ширина не меньше самого длинного слова; при шрифте 200%
«Ветменеджером?» шире телефона. anywhere разрешает перенос и в расчёте ширины. */
.вопросы summary { overflow-wrap: anywhere; }
.вопросы summary::after { content: "+"; flex: none; font-size: 1.625rem; font-weight: 400; line-height: 1; color: var(--графит); transition: transform .2s; }
.вопросы details[open] summary::after { transform: rotate(45deg); }
.вопросы details p { padding: 0 40px 22px 0; color: var(--графит); max-width: 44em; }
/* ── заявка: тёмный цвет меню клиники и тот же узор ── */
.заявка { background: var(--меню); color: #f3f1ee; position: relative; overflow: hidden; }
.заявка::before {
content: ""; position: absolute; inset: 0; opacity: .16; background: var(--а-200);
-webkit-mask: url(kartinki/uzor.webp) 0 0 / 420px auto repeat; mask: url(kartinki/uzor.webp) 0 0 / 420px auto repeat;
}
.заявка .обёртка { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.заявка .h2 { color: #fff; }
.заявка .вводный { color: rgba(255, 255, 255, .8); margin-top: 16px; }
.заявка-что { margin-top: 28px; }
.заявка-что li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .92); font-size: 1rem; }
.форма { position: relative; background: var(--лист); color: var(--чернила); border-radius: 20px; padding: clamp(1.375rem, 3vw, 2rem); }
.форма-скоро { padding-right: 160px; min-height: 180px; display: flex; flex-direction: column; justify-content: center; }
.форма-скоро p { margin-top: 10px; color: var(--графит); font-size: 0.9375rem; }
.форма-скоро .лилла { right: 22px; bottom: 16px; width: 116px; }
@media (max-width: 30em) { .форма-скоро { padding-right: 24px; padding-top: 104px; } .форма-скоро .лилла { top: 18px; bottom: auto; left: 20px; width: 84px; } }
.форма label { display: block; font-size: 0.875rem; font-weight: 620; margin-bottom: 6px; }
.форма input[type="text"], .форма input[type="tel"] {
width: 100%; height: 50px; padding: 0 14px; border-radius: 12px;
border: 1.5px solid var(--линия); background: var(--фон); color: var(--чернила); font: inherit; font-size: 1rem;
}
.форма input:focus { outline: none; border-color: var(--акцент); box-shadow: 0 0 0 3px color-mix(in srgb, var(--акцент) 22%, transparent); }
.форма input[aria-invalid="true"] { border-color: var(--красный); }
.два-поля { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 30em) { .два-поля { grid-template-columns: 1fr; } }
.форма .согласие { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8438rem; font-weight: 400; color: var(--графит); margin: 4px 0 18px; line-height: 1.45; }
.форма .согласие input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--акцент); flex: none; }
.форма .кнопка { width: 100%; }
.ответ-формы { margin-top: 14px; font-size: 0.9062rem; }
.ответ-формы.ошибка { color: var(--красный); }
.ответ-формы.готово { color: var(--акцент-текст); font-weight: 600; }
@media (max-width: 55em) { .заявка .обёртка { grid-template-columns: minmax(0, 1fr); } }
/* ── подвал ── */
.подвал { padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px)); }
.подвал .обёртка { flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.подвал nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.подвал a { color: var(--графит); text-decoration: none; display: inline-block; padding-block: 12px; }
.подвал a:hover { color: var(--чернила); }
/* Крупный шрифт на узком экране (настройка размера текста в браузере или
телефоне). Строки, которые в обычном размере помещаются, здесь
перестраиваются, а не вылезают за край. */
@media (max-width: 30em) {
.шапка .коротко { display: none; }
.вариант { grid-template-columns: minmax(0, 1fr); }
.вариант-цена { text-align: left; white-space: normal; }
}
/* Совсем тесно: крупный шрифт на телефоне. В шапке остаются знак-лапа
(у ссылки есть aria-label «ВетПлан») и кнопка — иначе они не помещаются
в одну строку и вылезают за край. */
@media (max-width: 19.9em) {
.шапка .обёртка { gap: 12px; }
.шапка .знак-слово { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.шапка .кнопка { padding: 0 14px; }
}
/* ── пакеты (24.09.2026) ──
Пять пакетов карточками, отдельный «Digital без CRM» и счёт с модулями.
Прежний калькулятор «база + питомцы» спрятан в index.html (template). */
.пакеты { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; }
.пакет { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 22px 22px; border: 1px solid var(--линия); border-radius: 20px; background: var(--лист); }
.пакет-цена { margin: 0; white-space: nowrap; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.пакет-цена small { font-weight: 500; letter-spacing: 0; color: var(--графит); }
.пакет-для { margin: 0; color: var(--графит); }
.пакет-что { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--линия-2); display: grid; gap: 8px; align-content: start; flex: 1; font-size: 0.9375rem; }
.пакет-что li { display: flex; gap: 8px; }
.пакет-что li::before {
content: ""; flex: none; width: 16px; height: 16px; margin-top: .22em; background: var(--акцент);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.пакет .кнопка { min-height: 44px; font-size: 0.9375rem; }
.пакет.главный { border: 2px solid var(--акцент); background: var(--тон); }
.пакет-знак { position: absolute; top: -12px; left: 20px; font-size: 0.75rem; font-weight: 660; padding: 4px 10px; border-radius: 999px; background: var(--акцент); color: var(--на-акценте); }
@media (max-width: 72em) { .пакеты { grid-template-columns: repeat(3, minmax(0, 1fr)); } .пакет.главный { grid-column: span 2; } }
@media (max-width: 44em) { .пакеты { grid-template-columns: minmax(0, 1fr); } .пакет.главный { grid-column: auto; } }
.без-crm { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px 56px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--меню); color: #fff; }
.без-crm-метка { font-size: 0.8125rem; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--а-300); }
.без-crm .h3 { margin: 10px 0 8px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.без-crm .пакет-цена small { color: rgba(255, 255, 255, .75); }
.без-crm-лозунг { margin: 22px 0 0; font-weight: 660; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.без-crm-сноска { margin: 10px 0 24px; max-width: 30em; font-size: 0.9375rem; color: rgba(255, 255, 255, .75); }
.без-crm .пакет-что { border-top: 0; padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; font-size: 1rem; }
.без-crm .пакет-что li::before { background: var(--а-300); }
@media (max-width: 56.25em) { .без-crm { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30em) { .без-crm .пакет-что { grid-template-columns: minmax(0, 1fr); } }
.счёт-заголовок { margin: clamp(3rem, 6vw, 4.5rem) 0 20px; }
.счёт-заголовок p { margin: 6px 0 0; color: var(--графит); }
.выбор { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.выбор legend { padding: 0; }
.расчёт-ввод .пункт { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 12px 14px;
border: 1.5px solid var(--линия); border-radius: 12px; background: var(--лист); cursor: pointer; font-weight: 600; font-size: 1rem; }
.пункт b { font-weight: 560; font-size: 0.875rem; color: var(--графит); white-space: nowrap; font-variant-numeric: tabular-nums; }
.пункт:has(input:checked) { border-color: var(--акцент); background: var(--тон); }
.пункт:has(input:focus-visible) { outline: 3px solid var(--а-300); outline-offset: 2px; }
.пункт input, .модуль input { width: 18px; height: 18px; margin: 0; accent-color: var(--акцент); }
.счёт-итог { padding: 24px 28px 28px; display: flex; flex-direction: column; }
.счёт-итог .подпись { font-weight: 620; font-size: 0.9375rem; }
.модули-список { list-style: none; margin: 6px 0 0; padding: 0; }
.модули-список > li { border-bottom: 1px solid var(--линия); }
.модуль { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; cursor: pointer; }
.модуль b { font-weight: 640; white-space: nowrap; font-variant-numeric: tabular-nums; }
.модуль.в-пакете { cursor: default; color: var(--графит); }
.модуль.в-пакете b { font-weight: 560; font-size: 0.875rem; color: var(--акцент-текст); }
.модуль:has(input:focus-visible) { outline: 3px solid var(--а-300); outline-offset: 2px; border-radius: 6px; }
.филиалы { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 0; }
.филиалы small { display: block; font-size: 0.8125rem; color: var(--тихий); }
.итог-строка { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--чернила); font-weight: 620; }
.итог-строка strong { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.состав { margin: 4px 0 20px; font-size: 0.875rem; color: var(--графит); }
.счёт-итог .кнопка { align-self: flex-start; }
@media (max-width: 32.5em) { .счёт-итог { padding: 20px; } .счёт-итог .кнопка { align-self: stretch; } }
/* ── что входит в пакеты: таблица сравнения ── */
.скрыто { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.состав-пакетов .счёт-заголовок p { max-width: 44em; }
.сравнение-обёртка { overflow-x: auto; border: 1px solid var(--линия); border-radius: 20px; background: var(--лист); }
.сравнение-обёртка:focus-visible { outline: 3px solid var(--а-300); outline-offset: 2px; }
.сравнение { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9375rem; }
.сравнение th, .сравнение td { padding: 11px 14px; border-bottom: 1px solid var(--линия-2); text-align: center; vertical-align: middle; }
.сравнение tbody th[scope="row"] { text-align: left; font-weight: 500; }
.сравнение thead th { position: sticky; top: 0; font-weight: 680; font-size: 0.9375rem; padding-block: 16px; border-bottom: 1px solid var(--линия); }
.сравнение th:first-child { position: sticky; left: 0; z-index: 1; background: var(--лист); min-width: 15em; }
.сравнение .блок th { text-align: left; font-size: 0.75rem; font-weight: 660; letter-spacing: .06em; text-transform: uppercase; color: var(--тихий); background: var(--камень); padding-block: 8px; }
.сравнение .главный { background: var(--тон); }
.сравнение thead .главный { color: var(--акцент-текст); }
.сравнение tr:last-child > * { border-bottom: 0; }
.сравнение .да { display: inline-block; width: 18px; height: 18px; vertical-align: middle; background: var(--акцент);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.сравнение .нет { color: var(--тихий); }
.сравнение .скоро { display: inline-block; font-size: 0.75rem; font-weight: 620; padding: 2px 8px; border-radius: 6px; background: var(--янтарь-фон); color: var(--янтарь); white-space: nowrap; }
@media (max-width: 40em) { .сравнение th:first-child { min-width: 11em; } .сравнение th, .сравнение td { padding: 10px; } }
.сравнение .модуль-цена { display: inline-block; font-size: 0.75rem; font-weight: 620; padding: 2px 8px; border-radius: 6px; background: var(--камень-2); color: var(--графит); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ── калькулятор по ТЗ 24.09.2026: срок оплаты, тарифы по пользователям, расшифровки модулей ── */
.срок { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.расчёт-ввод .срок label { position: relative; margin: 0; display: block; cursor: pointer; }
.срок input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.срок label > span { display: block; text-align: center; padding: 9px 4px; border: 1.5px solid var(--линия); border-radius: 10px; background: var(--лист); font-size: 0.875rem; font-weight: 620; line-height: 1.2; }
.расчёт-ввод .срок small { margin-top: 3px; font-size: 0.75rem; font-weight: 560; color: var(--тихий); }
.срок label:has(input:checked) > span { border-color: var(--акцент); background: var(--тон); }
.срок label:has(input:checked) small { color: var(--акцент-текст); }
.срок label:has(input:focus-visible) > span { outline: 3px solid var(--а-300); outline-offset: 2px; }
.расчёт-ввод .пункт small { margin-top: 2px; font-weight: 500; }
.выбор > small { margin-top: 2px; }
.модуль { align-items: start; }
.модуль input { margin-top: 3px; }
.модуль-про { display: grid; gap: 3px; font-size: 0.8125rem; line-height: 1.45; font-weight: 400; color: var(--графит); }
.модуль-про > span { position: relative; padding-left: 14px; }
.модуль-про > span::before { content: ""; position: absolute; left: 3px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--акцент); }
.модуль.бесплатно { cursor: default; }
.модуль.бесплатно input { appearance: none; -webkit-appearance: none; flex: none; border-radius: 5px; background: var(--акцент) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.модуль.бесплатно b { font-weight: 560; font-size: 0.875rem; color: var(--акцент-текст); }
@media (max-width: 26.25em) { .срок { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── «Собери свой пакет»: значок состава у тарифа, окна состава и сравнения ── */
.пункт-ряд { position: relative; }
.инфо { position: absolute; right: 10px;
border: 1.5px solid var(--линия); background: var(--лист); font: 700 0.875rem/1 Onest, system-ui, sans-serif;
place-items: center; cursor: pointer; }
.инфо::after { content: ""; position: absolute; inset: -7px; }
.инфо:hover { border-color: var(--акцент); color: var(--акцент-текст); }
.инфо:focus-visible, .сравнить:focus-visible, .окно-закрыть:focus-visible { outline: 3px solid var(--а-300); outline-offset: 2px; }
.сравнить { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-weight: 620; font-size: 0.9375rem; color: var(--акцент-текст); text-decoration: underline; text-underline-offset: 3px; }
.без-crm-после { margin-top: 40px; }
.окно { border: 0; padding: 0; border-radius: 20px; width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 920px);
background: var(--лист); color: var(--чернила); box-shadow: var(--тень-высокая); }
.окно[open] { display: flex; flex-direction: column; }
.окно-широкое { width: min(880px, calc(100vw - 32px)); }
.окно::backdrop { background: rgba(28, 25, 23, .45); }
.окно-шапка { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 20px 4px 24px; }
.окно-закрыть { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--камень); color: var(--чернила); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.окно-закрыть:hover { background: var(--камень-2); }
.окно-лимит { margin: 0; padding: 0 24px 12px; color: var(--графит); font-size: 0.9375rem; }
.окно-тело { flex: 1; overflow: auto; padding: 0 24px 12px; }
.окно-тело h4 { margin: 16px 0 6px; font-size: 0.75rem; font-weight: 660; letter-spacing: .06em; text-transform: uppercase; color: var(--тихий); }
.окно-тело ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.окно-тело li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9375rem; }
.окно-тело li > span:first-child { position: relative; padding-left: 24px; }
.окно-тело li > span:first-child::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background: var(--акцент);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.окно-тело li.з-модуль > span:first-child::before, .окно-тело li.з-скоро > span:first-child::before { background: var(--тихий); -webkit-mask: none; mask: none; width: 6px; height: 6px; border-radius: 50%; left: 5px; top: .55em; }
.окно-тело .скоро, .окно-тело .модуль-цена { flex: none; }
.окно-тело li .скоро { display: inline-block; font-size: 0.75rem; font-weight: 620; padding: 2px 8px; border-radius: 6px; background: var(--янтарь-фон); color: var(--янтарь); }
.окно-тело li .модуль-цена { display: inline-block; font-size: 0.75rem; font-weight: 620; padding: 2px 8px; border-radius: 6px; background: var(--камень-2); color: var(--графит); white-space: nowrap; }
.окно-низ { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--линия-2); }
.окно-низ .кнопка { min-height: 44px; font-size: 0.9375rem; }
.окно-тело.сравнение-обёртка { border: 0; border-radius: 0; padding: 0; margin: 0 24px 20px; }
.сравнение.сравнение-три { min-width: 540px; }
@media (max-width: 30em) { .окно-низ .кнопка { flex: 1 1 100%; } }
/* тариф: название, под ним пользователи и плашка «от … ₽» (ТЗ 24.09.2026) */
.расчёт-ввод .пункт-ряд .пункт { grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: 6px; }
.пункт-ряд .пункт input { margin-top: 3px; }
.пункт-ряд .пункт b { grid-column: 2; justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--камень-2); color: var(--чернила); font-weight: 640; }
.пункт-ряд .пункт:has(input:checked) b { background: var(--тон-2); color: var(--акцент-текст); }
/* кнопка состава — в нижней строке карточки тарифа, напротив плашки цены */
.расчёт-ввод .пункт-ряд .пункт { padding-right: 14px; padding-bottom: 12px; }
.инфо { top: auto; bottom: 12px; transform: none; width: auto; height: 28px; padding: 0 10px 0 4px; border-radius: 999px; gap: 6px;
display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 620; color: var(--акцент-текст); border-color: var(--линия); }
.инфо-знак { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--акцент); color: var(--на-акценте); font-size: 0.75rem; font-weight: 800; }
/* ── расшифровка счёта: тариф, модули, филиалы — со скидкой за срок ── */
.модуль b s, .филиалы small s, .расшифровка s, .модуль-цена s { font-weight: 500; color: var(--тихий); margin-right: 4px; }
.расшифровка { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--линия); display: grid; gap: 8px; font-size: 0.9375rem; }
.расшифровка li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.расшифровка b { font-weight: 620; white-space: nowrap; font-variant-numeric: tabular-nums; }
.расшифровка + .итог-строка { margin-top: 14px; }
.выгода { color: var(--акцент-текст); font-weight: 620; margin-top: -14px; }
/* ── калькулятор в один экран на компьютере (24.09.2026) ──
Три колонки: тариф и срок | модули | «Ваш пакет» с итогом. Расшифровки
модулей на широком экране — строкой через точку, а не столбиком: так
весь калькулятор помещается в 1366×768 без прокрутки. */
.счёт-сумма { display: flex; flex-direction: column; padding: 0 28px 28px; }
.счёт-сумма > .подпись { display: none; font-weight: 620; font-size: 0.9375rem; }
.счёт-сумма .кнопка { align-self: flex-start; }
@media (min-width: 53.75em) { .расчёт-ввод { grid-row: span 2; } .счёт-сумма { grid-column: 2; } }
@media (max-width: 32.5em) { .счёт-сумма { padding: 0 20px 20px; } .счёт-сумма .кнопка { align-self: stretch; } }
@media (min-width: 75em) {
.расчёт { grid-template-columns: 272px minmax(0, 1fr) 300px; }
.расчёт-ввод { grid-row: auto; }
.выбор { gap: 6px; }
.сравнить { min-height: 32px; }
.модуль { gap: 10px; }
.модуль-про { display: block; margin-top: 3px; }
.модуль-про > span { display: inline; padding-left: 0; }
.модуль-про > span::before { content: none; }
.модуль-про > span + span::before { content: " · "; position: static; display: inline; width: auto; height: auto; border-radius: 0; background: none; color: var(--тихий); }
.счёт-сумма { grid-column: 3; border-left: 1px solid var(--линия); }
.счёт-сумма > .подпись { display: block; }
.расшифровка { margin-top: 10px; padding-top: 0; border-top: 0; gap: 6px; font-size: 0.875rem; }
.расшифровка li { align-items: flex-start; }
.расшифровка b { text-align: right; }
.итог-строка { margin-top: 14px; }
.итог-строка strong { font-size: 1.75rem; }
.счёт-сумма .кнопка { align-self: stretch; margin-top: auto; }
.выгода { margin-top: -10px; margin-bottom: 16px; }
}
/* описание модуля — отдельной строкой под названием и ценой, на всю ширину */
.модуль-про { grid-column: 2 / -1; margin-top: 0; }
.модуль { row-gap: 4px; }
@media (min-width: 75em) {
.расчёт { grid-template-columns: 252px minmax(0, 1fr) 288px; }
.расчёт-ввод { padding: 18px; gap: 14px; }
.расчёт-ввод .пункт-ряд .пункт { padding: 8px 12px; row-gap: 2px; }
.инфо { bottom: 8px; }
.срок label > span { padding: 7px 2px; }
.модуль { row-gap: 2px; }
.модуль-про { font-size: 0.75rem; }
.счёт-сумма { padding: 16px 20px 20px; }
}
.модуль.бесплатно b { text-align: right; line-height: 1.2; }
.модуль.бесплатно b small { display: block; font-size: 0.75rem; font-weight: 560; }
@media (min-width: 75em) {
.расчёт { grid-template-columns: 276px minmax(0, 1fr) 272px; }
.пункт-ряд .пункт b { font-size: 0.8125rem; }
.инфо { font-size: 0.75rem; padding: 0 8px 0 3px; gap: 5px; height: 26px; }
.инфо-знак { width: 18px; height: 18px; }
.модуль { font-size: 0.9375rem; }
.модуль b s { font-size: 0.8125rem; }
.модуль-про { line-height: 1.35; }
.модуль.бесплатно { padding: 6px 0; }
.филиалы .счётчик button { height: 34px; }
.расшифровка s { display: none; }
.расшифровка .р-бесплатно s { display: inline; }
}
@media (min-width: 75em) {
.счёт-модули { padding: 12px 22px; }
.модуль { padding: 6px 0; }
.модуль.бесплатно > span { font-size: 0.875rem; }
.модуль.бесплатно b { font-size: 0.8125rem; }
.филиалы { padding: 4px 0; }
.филиалы > span { font-size: 0.9375rem; }
.филиалы > span small { display: inline; margin-left: 8px; }
}
/* Шапка сравнения при прокрутке: галочки нарисованы маской, а маска выносит
элемент в свой слой — без z-index они рисуются поверх закреплённой шапки. */
.сравнение thead th { z-index: 3; background: var(--лист); }
.сравнение thead th:first-child { z-index: 4; }
.сравнение tbody th:first-child { z-index: 2; }
/* телефон: три тарифа помещаются по ширине — без прокрутки вбок */
@media (max-width: 40em) {
.сравнение.сравнение-три { min-width: 0; font-size: 0.8125rem; }
.сравнение-три th:first-child { position: static; min-width: 0; padding-left: 8px; }
.сравнение-три thead th { font-size: 0.75rem; line-height: 1.25; }
.сравнение-три .модуль-цена, .сравнение-три .скоро { font-size: 0.6875rem; padding: 2px 5px; }
.окно-тело.сравнение-обёртка { margin: 0 12px 16px; }
}
/* счётчик филиалов — маленький, это второстепенная настройка */
.филиалы .счётчик { border-width: 1px; border-radius: 10px; }
.филиалы .счётчик button, .филиалы .счётчик button:is(*) { width: 32px; height: 30px; font-size: 1.0625rem; }
.филиалы .счётчик output { min-width: 30px; font-size: 0.9375rem; }
@media (max-width: 40em) {
.сравнение-три th:first-child { width: 40%; }
.сравнение-три th, .сравнение-три td { padding: 8px 3px; }
}
@media (max-width: 40em) {
.сравнение.сравнение-три { table-layout: fixed; }
.сравнение-три .модуль-цена { white-space: normal; }
}
@media (max-width: 40em) { .сравнение-три thead th:first-child { position: sticky; top: 0; left: auto; } }
/* ── калькулятор по шкале Apple HIG (аудит 24.09.2026) ──
Кегль/интерлиньяж строго из шкалы: Caption1 12/16, Footnote 13/18,
Subhead 15/20, Callout 16/21, Headline 17/22, Title1 28/34. До аудита
было семь кеглей (в т.ч. 14 — его в шкале нет) и строка 1,55 от кегля:
15 px стоял на строке 23 px вместо 20, итог 28 px — на 43 вместо 34.
Отступы — кратные 4 (8-pt сетка). */
#счёт { line-height: 1.35; }
#счёт .выбор > legend, #счёт .счёт-модули > .подпись, #счёт .счёт-сумма > .подпись { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 620; margin-bottom: 8px; }
#счёт .срок label > span { font-size: 0.8125rem; line-height: 1.125rem; }
#счёт .срок small { font-size: 0.75rem; line-height: 1rem; margin-top: 0; }
#счёт .пункт-ряд .пункт > span { font-size: 1rem; line-height: 1.3125rem; }
#счёт .пункт-ряд .пункт small { font-size: 0.8125rem; line-height: 1.125rem; margin-top: 0; }
#счёт .пункт-ряд .пункт b { font-size: 0.8125rem; line-height: 1.125rem; }
#счёт .инфо { font-size: 0.75rem; line-height: 1rem; }
#счёт .инфо::after { inset: -9px -4px; }
#срок-подпись { font-size: 0.8125rem; line-height: 1.125rem; }
#счёт .сравнить { font-size: 0.9375rem; line-height: 1.25rem; }
#счёт .модуль > span:first-of-type, #счёт .филиалы > span { font-size: 0.9375rem; line-height: 1.25rem; }
#счёт .модуль b { font-size: 0.9375rem; line-height: 1.25rem; }
#счёт .модуль b s, #филиал-цена { font-size: 0.8125rem; line-height: 1.125rem; }
#счёт .модуль.бесплатно b { font-size: 0.8125rem; line-height: 1.125rem; }
#счёт .модуль.бесплатно b small { font-size: 0.75rem; line-height: 1rem; }
#счёт .модуль-про { font-size: 0.75rem; line-height: 1rem; }
#счёт .расшифровка { font-size: 0.9375rem; line-height: 1.25rem; }
#счёт .итог-строка > span { font-size: 1.0625rem; line-height: 1.375rem; }
#к-итог { font-size: 1.75rem; line-height: 2.125rem; }
#к-период, #к-выгода { font-size: 0.8125rem; line-height: 1.125rem; margin: 4px 0 0; }
#к-выгода { margin-bottom: 16px; }
#к-подключить { line-height: 1.375rem; }
#счёт .филиалы .счётчик button::after { content: ""; position: absolute; }
#счёт .филиалы .счётчик button { position: relative; }
@media (min-width: 75em) {
#счёт .расчёт-ввод { gap: 16px; }
#счёт .выбор { gap: 8px; }
#счёт .расчёт-ввод .пункт-ряд .пункт { row-gap: 4px; }
#счёт .счёт-модули { padding: 16px 20px; }
#счёт .модуль { padding: 8px 0; row-gap: 4px; }
#счёт .модуль.бесплатно { padding: 8px 0; }
#счёт .филиалы { padding: 8px 0; }
#счёт .счёт-сумма { padding: 16px 20px 20px; }
#счёт .расшифровка { gap: 8px; margin-top: 0; }
#счёт .итог-строка { margin-top: 16px; padding-top: 16px; }
}
/* узкая левая колонка: плашка цены и «Что входит» в одной строке без наезда */
@media (min-width: 75em) {
#счёт .расчёт-ввод { padding: 16px 12px; }
#счёт .расчёт-ввод .пункт-ряд .пункт { padding: 8px 10px; column-gap: 8px; }
#счёт .инфо { right: 8px; }
}
/* ── первый экран: три выгоды списком вместо абзаца (24.09.2026) ── */
.выгоды-первые { list-style: none; margin: 28px 0 0; padding: 0; display: grid;
color: var(--чернила); }
.выгоды-первые li { display: flex; gap: 12px; align-items: flex-start; }
.выгоды-первые li::before { content: ""; flex: none; border-radius: 50%; background: var(--тон-2);
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%; }
/* ── первый экран: пропорции и кегли (24.09.2026) ──
Заголовок в три строки, выгоды — основной текст HIG 17/24 в одну строку,
колонки почти поровну: на 1366×768 кнопки видны без прокрутки. */
@media (min-width: 63.8em) {
.первый .обёртка { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); }
}
.первый .h1 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; }
.выгоды-первые { margin-top: 24px; gap: 10px; font-size: 1.0625rem; line-height: 1.5rem; }
.выгоды-первые li::before { width: 22px; height: 22px; margin-top: 1px; }
/* подзаголовок первого экрана — H2 размером Title2 по HIG (22/28) */
.подзаголовок-первый { font-size: clamp(1.25rem, 1.7vw, 1.375rem); line-height: 1.75rem; font-weight: 560; text-wrap: balance; }
@media (min-width: 63.8em) { .первый .обёртка { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* подзаголовок — рукописной пометкой, как «цены — прямо из прайса кабинета»
(решение владельца). Остаётся H2: для поиска и чтения с экрана это подзаголовок. */
.подзаголовок-первый { margin: 18px 0 4px; font: 600 clamp(1.75rem, 2.4vw, 2.125rem)/1.08 "Caveat", "Segoe Print", cursive;
letter-spacing: 0; color: var(--акцент-текст); transform: rotate(-2deg); transform-origin: left center; }
/* стрелка «от руки» от подзаголовка к ролику; в одну колонку ролик ниже — стрелку прячем */
.подзаголовок-первый { position: relative; }
.подзаголовок-стрелка { position: absolute; left: calc(100% + 6px); top: 50%; width: 150px; transform: translateY(-40%);
fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
@media (max-width: 63.75em) { .подзаголовок-стрелка { display: none; } }
/* подзаголовок в две строки по ширине текста — стрелка начинается у конца строки
и остриём упирается в край ролика */
.подзаголовок-первый { width: max-content; max-width: 100%; }
.подзаголовок-стрелка { width: clamp(120px, 14vw, 190px); height: 64px; }
/* ── надпись-стикер под роликом первого экрана (24.09.2026) ──
Заменяет подзаголовок в левой колонке: та же рукописная пометка (Caveat,
зелёный, наклон), что «цены — прямо из прайса кабинета», стрелка вверх
к правому нижнему углу ролика. */
.ролик-колонка { position: relative; }
.пометка-ролика { position: relative; width: max-content; max-width: calc(100% - 48px); margin: 22px 56px 0 auto;
font: 600 clamp(1.625rem, 2.2vw, 2rem)/1.08 "Caveat", "Segoe Print", cursive; letter-spacing: 0; text-align: right;
transform: rotate(-3deg); transform-origin: right center; }
.пометка-ролика-стрелка { position: absolute; left: calc(100% + 4px); bottom: 10px; width: 48px; height: 68px;
fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
@media (max-width: 30em) { .пометка-ролика { margin-right: 44px; font-size: 1.5rem; } }
/* ── бенто «кому что» (24.09.2026) ──
Сетка на 12: три карточки ролей по 4, снизу две широкие 5 + 7.
Карточка: тонированный фон, крупный заголовок (Title1 28/34), текст,
факты, кусочек интерфейса внизу на белой подложке. Радиусы концентричные:
карточка 28 = подложка 16 + отступ 12. */
.бенто { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.плитка { grid-column: span 4; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 32px); border-radius: 28px; overflow: hidden; }
.плитка-тон { background: var(--тон); }
.плитка-камень { background: var(--камень); }
.плитка-широкая-1 { grid-column: span 5; }
.плитка-широкая-2 { grid-column: span 7; }
.плитка-заголовок { margin: 0 0 12px; font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.2; font-weight: 740; letter-spacing: -.025em; text-wrap: balance; }
.плитка > p { margin: 0; color: var(--графит); font-size: 1.0625rem; line-height: 1.5rem; max-width: 34em; }
.плитка-факты { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 0.9375rem; line-height: 1.25rem; }
.плитка-факты li { position: relative; padding-left: 26px; }
.плитка-факты li::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--лист);
background-image: url("data:image/svg+xml;utf8,"); }
.плитка .лоток { margin: auto 0 0; padding: 16px; min-height: 0; background: var(--лист); border-radius: 16px;
box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 12px 32px -16px rgba(28, 25, 23, .18); }
.плитка .плитка-факты + .лоток { margin-top: 24px; }
.плитка:has(.плитка-факты) .лоток { margin-top: auto; }
.плитка-факты { margin-bottom: 24px; }
.плитка-шапка { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.плитка-знак { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--лист); display: grid; place-items: center;
box-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 12px 32px -16px rgba(28, 25, 23, .18); }
.плитка-знак svg { width: 28px; height: 28px; fill: none; stroke: var(--акцент); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.платформы { list-style: none; margin: auto 0 0; padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.платформы li { padding: 8px 14px; border-radius: 999px; background: var(--лист); font-size: 0.9375rem; font-weight: 600;
box-shadow: 0 1px 2px rgba(28, 25, 23, .06); }
.лоток-деньги { margin-top: 24px; }
.мини-зарплата p { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline; margin: 0; padding: 8px 0;
border-bottom: 1px solid var(--линия-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.мини-зарплата p:last-child { border-bottom: 0; }
.мини-зарплата span:nth-child(2) { color: var(--тихий); }
.мини-зарплата b { font-weight: 680; }
@media (max-width: 64em) {
.бенто { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.плитка, .плитка-широкая-1, .плитка-широкая-2 { grid-column: span 1; }
.плитка:nth-child(3) { grid-column: span 2; }
}
@media (max-width: 40em) {
.бенто { grid-template-columns: minmax(0, 1fr); }
.плитка, .плитка:nth-child(3) { grid-column: auto; }
}
/* ── «кому что» в стиле remotion.dev (24.09.2026) ──
Без подложек у блоков. Иллюстрация — «кусочки»: белая деталь, обводка 2,5 px
цветом текста и сплошная тень вниз той же толщины, что даёт объём; акцент —
цвет палитры, поэтому иллюстрации перекрашиваются вместе со страницей. */
.ремо { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ремо-блок { display: flex; flex-direction: column; min-width: 0; }
.ремо-сцена { position: relative; }
.ремо-заголовок { margin: 0; font-size: clamp(1.625rem, 2.3vw, 1.875rem); line-height: 1.2; font-weight: 720; letter-spacing: -.025em; }
.ремо-блок > p { margin: 14px 0 0; font-size: 1.125rem; line-height: 1.6; color: var(--чернила); max-width: 22em; text-wrap: pretty; }
.ремо-факты { list-style: none; margin: 16px 0 0; padding: 0; display: grid; font-size: 1rem; line-height: 1.45; color: var(--графит); }
.ремо-ссылка { margin-top: 18px; display: inline-flex; align-items: center; width: fit-content;
text-decoration: none; }
.ремо-ссылка svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ремо-ссылка:hover { color: var(--акцент-текст); }
.ремо-ссылка:hover svg { transform: translateX(3px); }
.ремо-ссылка:focus-visible { outline: 3px solid var(--а-300); outline-offset: 2px; border-radius: 6px; }
.ил-кус { background: var(--лист); border-radius: 18px; color: var(--чернила); }
.ил-тёмная { background: #1b2536; border-radius: 16px; color: #efeae6; }
.ил-лента { position: absolute; left: 0; transform: rotate(-3deg); }
.ил-лента p { margin: 0; display: flex; align-items: center; gap: 10px; border-radius: 10px; font-weight: 560; }
.ил-лента p.выбрано { background: #2d3b54; }
.ил-лента svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #bdb5ae; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ил-выделение { position: absolute; right: 2%; padding: 10px; border: 1.5px solid var(--акцент); }
.ил-выделение > i { position: absolute; width: 10px; height: 10px; background: var(--лист); border: 1.5px solid var(--акцент); }
.ил-выделение > i:nth-of-type(1) { left: -6px; top: -6px; } .ил-выделение > i:nth-of-type(2) { right: -6px; top: -6px; }
.ил-выделение > i:nth-of-type(3) { left: -6px; bottom: -6px; } .ил-выделение > i:nth-of-type(4) { right: -6px; bottom: -6px; }
.ил-напоминание { background: var(--акцент); color: var(--на-акценте); }
.ил-напоминание b { display: block; }
.ил-напоминание span { opacity: .9; }
.ил-пилюля { position: absolute; left: 4%; top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
border-radius: 24px; }
.ил-пилюля b { font-weight: 760; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ил-пилюля span { flex: none; font-weight: 640; border-radius: 999px; background: var(--тон-2); color: var(--акцент-текст); }
.ил-файл svg { flex: none; fill: none; stroke: var(--чернила); stroke-width: 2; stroke-linejoin: round; }
.ил-окно { position: absolute; left: 4%; top: 12px; width: 84%; padding: 12px 18px 18px; }
.ил-точки { display: flex; gap: 6px; margin-bottom: 12px; }
.ил-точки i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ил-точки i:nth-child(2) { background: #febc2e; } .ил-точки i:nth-child(3) { background: #28c840; }
.ил-воронка p { display: flex; justify-content: space-between; margin: 10px 0 4px; font-size: 0.8125rem; font-weight: 560; }
.ил-воронка p:first-child { margin-top: 0; }
.ил-воронка > i { display: block; height: 10px; border-radius: 5px; background: var(--акцент); }
.ил-воронка > i:nth-of-type(2) { opacity: .7; } .ил-воронка > i:nth-of-type(3) { opacity: .45; }
.ил-кнопка { position: absolute; right: 0; bottom: 6px; padding: 12px 22px; color: var(--на-акценте);
font-size: 1.0625rem; font-weight: 700; }
.ил-кнопка-верх { top: 0; bottom: auto; right: 2%; transform: rotate(3deg); font-size: 0.9375rem; padding: 9px 16px; }
.ил-окно-деньги { top: 34px; }
.ил-окно-деньги p { display: flex; justify-content: space-between; margin: 0; padding: 9px 0; border-bottom: 1.5px solid var(--линия); font-variant-numeric: tabular-nums; }
.ил-окно-деньги p:last-child { border-bottom: 0; }
.ил-окно-деньги b { font-weight: 720; }
.ил-устройства { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 16px 12px; padding: 0 4%; }
.ил-чип { border-radius: 999px; font-weight: 720; }
.ил-чип:nth-child(odd) { transform: rotate(-3deg); } .ил-чип:nth-child(even) { transform: rotate(2deg); }
.ил-чип-тон { background: var(--акцент); color: var(--на-акценте); }
@media (max-width: 64em) { .ремо { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .ремо { grid-template-columns: minmax(0, 1fr); } .ремо-сцена { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .ремо-ссылка svg { transition: none; } }
/* врач: лента сверху, выделение снизу — строки ленты не перекрываются */
.ил-лента { top: 0; }
.ил-выделение { bottom: 0; }
.ил-лента { width: max-content; max-width: 70%; padding: 8px; }
.ил-выделение { width: max-content; }
.ил-напоминание span { white-space: nowrap; }
/* ── анимация иллюстраций «кому что» (24.09.2026) ──
Класс .ил-пуск ставит скрипт, когда блок входит в экран и при наведении.
Все анимации одноразовые, до 4 с, и кончаются в покое — в том же кадре,
что и без анимации. Двигаются только transform/opacity (и фон строки). */
.ил-готово { top: auto; right: 4%; font-size: 0.9375rem; padding: 9px 16px; transform: rotate(-2deg); }
@media (prefers-reduced-motion: no-preference) {
/* врач: строки загораются по очереди, выскакивает напоминание */
.ил-пуск .ил-лента p { animation: ил-строка 1.2s ease-in-out both; }
.ил-пуск .ил-лента p:nth-child(2) { animation-delay: .5s; }
.ил-пуск .ил-лента p:nth-child(3) { animation-delay: 1s; }
.ил-пуск .ил-напоминание { animation: ил-хлоп .6s cubic-bezier(.34, 1.56, .64, 1) 1.6s both; }
.ил-пуск .ил-выделение { animation: ил-проявление .3s ease-out 1.5s both; }
.ил-пуск .ил-выделение > i { animation: ил-хлоп .4s cubic-bezier(.34, 1.56, .64, 1) 2s both; }
/* администратор: заявки въезжают справа, метки хлопают */
.ил-пуск .ил-пилюля:not(.ил-файл) { animation: ил-въезд .7s cubic-bezier(.34, 1.4, .64, 1) .1s both; }
.ил-пуск .ил-пилюля-2:not(.ил-файл) { animation-delay: .45s; }
.ил-пуск .ил-пилюля:not(.ил-файл) span { animation: ил-хлоп .45s cubic-bezier(.34, 1.56, .64, 1) .8s both; }
.ил-пуск .ил-пилюля-2:not(.ил-файл) span { animation-delay: 1.15s; }
/* руководитель: полосы растут, кнопку нажимают */
.ил-пуск .ил-воронка > i { transform-origin: left center; animation: ил-рост .9s cubic-bezier(.22, 1, .36, 1) .2s both; }
.ил-пуск .ил-воронка > i:nth-of-type(2) { animation-delay: .45s; }
.ил-пуск .ил-воронка > i:nth-of-type(3) { animation-delay: .7s; }
.ил-пуск .ил-окно:not(.ил-окно-деньги) + .ил-кнопка { animation: ил-нажатие .5s ease-in-out 1.5s both; }
/* устройства: плашки падают и подпрыгивают (translate — чтобы не сбить наклон) */
.ил-пуск .ил-чип { animation: ил-падение .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.ил-пуск .ил-чип:nth-child(2) { animation-delay: .1s; } .ил-пуск .ил-чип:nth-child(3) { animation-delay: .2s; }
.ил-пуск .ил-чип:nth-child(4) { animation-delay: .3s; } .ил-пуск .ил-чип:nth-child(5) { animation-delay: .45s; }
/* деньги: строки проявляются, прилетает наклейка */
.ил-пуск .ил-окно-деньги p { animation: ил-подъём .5s ease-out both; }
.ил-пуск .ил-окно-деньги p:nth-of-type(1) { animation-delay: .2s; }
.ил-пуск .ил-окно-деньги p:nth-of-type(2) { animation-delay: .4s; }
.ил-пуск .ил-окно-деньги p:nth-of-type(3) { animation-delay: .6s; }
.ил-пуск .ил-кнопка-верх { animation: ил-наклейка .55s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }
/* переезд: файлы падают, появляется «Перенесено» */
.ил-пуск .ил-файл { animation: ил-падение .7s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.ил-пуск .ил-файл.ил-пилюля-2 { animation-delay: .4s; }
.ил-пуск .ил-готово { animation: ил-наклейка .55s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }
}
@keyframes ил-строка { 0%, 100% { background: transparent; } 35%, 65% { background: #2d3b54; } }
@keyframes ил-хлоп { 0% { opacity: 0; scale: .6; } 100% { opacity: 1; scale: 1; } }
@keyframes ил-проявление { from { opacity: 0; } to { opacity: 1; } }
@keyframes ил-въезд { 0% { opacity: 0; translate: 56px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes ил-рост { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ил-нажатие { 0%, 100% { translate: 0 0; box-shadow: 0 5px 0 0 var(--чернила); } 45% { translate: 0 4px; box-shadow: 0 1px 0 0 var(--чернила); } }
@keyframes ил-падение { 0% { opacity: 0; translate: 0 -36px; } 60% { opacity: 1; translate: 0 4px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes ил-подъём { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes ил-наклейка { 0% { opacity: 0; scale: 1.6; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
/* после пробежки по строкам возвращается подсветка «Стационара», как в покое */
@media (prefers-reduced-motion: no-preference) { .ил-пуск .ил-лента p { animation-fill-mode: backwards; } }
/* ── «Кабинет клиники» в объёмном стиле + сценки с преимуществами (24.09.2026) ── */
#кабинет .вкладки button {
padding: 0 20px; }
#кабинет .вкладки button:focus-visible { outline: 3px solid var(--а-300); outline-offset: 3px; }
#кабинет .кабинет { border-radius: 22px; }
#кабинет .показ-текст .h3 { font-size: clamp(1.625rem, 2.3vw, 1.875rem); line-height: 1.2; font-weight: 720; letter-spacing: -.025em; margin-bottom: 14px; }
#кабинет .показ-текст p { color: var(--чернила); font-size: 1.125rem; line-height: 1.6; }
#кабинет .показ-текст ul { margin-top: 16px; display: grid; gap: 6px; }
#кабинет .показ-текст li { border-top: 0; padding: 0; font-size: 1rem; line-height: 1.45; color: var(--графит); }
/* выноска-преимущество: зелёная наклейка с обводкой и тенью, как в блоках выше */
.якорь { position: relative; }
.выноска { position: absolute; z-index: 3; left: 30%; top: -30px; width: max-content;
background: var(--акцент); color: var(--на-акценте);
font-size: 0.8125rem; line-height: 1.2; font-weight: 680; rotate: -2deg; pointer-events: none; }
td.якорь .выноска { left: auto; right: 4px; top: -34px; }
.итог.якорь .выноска { left: auto; right: -4px; top: -42px; }
.итог .выноска-2 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
/* календарь: записи ложатся по очереди, приходит заявка, её подтверждают */
.ил-пуск .сетка-дня .запись { animation: ил-подъём .45s ease-out both; animation-delay: calc(var(--п, 0) * 90ms + 100ms); }
.ил-пуск .запись-подтверждение { animation: ил-заявка 3.4s ease-in-out both; animation-delay: .5s; }
.ил-пуск .запись-подтверждение .ждёт { animation: ил-гаснет 3.4s ease-in-out .5s both; }
.ил-пуск .запись-подтверждение .готово { display: block; }
.ил-пуск .сетка-дня .якорь .выноска { animation: ил-наклейка .5s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }
/* приём: поля, услуги по одной, счёт растёт, приём закрывают */
.ил-пуск .поле-макет { animation: ил-подъём .45s ease-out both; animation-delay: calc(var(--п, 0) * 120ms); }
.ил-пуск .счёт li { animation: ил-въезд .5s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--п, 0) * 260ms + 400ms); }
.ил-пуск .итог .выноска-1 { animation: ил-выноска-смена 3.6s ease-in-out 1.9s both; }
.ил-пуск .итог .выноска-2 { animation: ил-выноска-вторая .5s cubic-bezier(.34, 1.56, .64, 1) 3.3s both; }
.ил-пуск .счёт .мкнопка { animation: ил-нажатие-плоско .45s ease-in-out 2.9s both; }
/* стационар и склад: строки въезжают, выноска у метки */
.ил-пуск tbody tr { animation: ил-подъём .45s ease-out both; animation-delay: calc(var(--п, 0) * 140ms + 100ms); }
.ил-пуск .точки i { animation: ил-хлоп .35s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
.ил-пуск td.якорь .метка { animation: ил-пульс .8s ease-in-out 1.1s 2; }
.ил-пуск td.якорь .выноска { animation: ил-наклейка .5s cubic-bezier(.34, 1.56, .64, 1) 1.5s both; }
}
/* заявка: янтарная → на миг ярче (щелчок) → зелёная, «подтверждено» */
@keyframes ил-заявка {
0%, 55% { background: var(--янтарь-фон); border-left-color: var(--янтарь); scale: 1; }
62% { scale: .96; }
70%, 100% { background: var(--тон-2); border-left-color: var(--акцент); scale: 1; }
}
@keyframes ил-гаснет { 0%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes ил-зажигается { 0%, 62% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes ил-выноска-смена { 0% { opacity: 0; scale: 1.5; } 12% { opacity: 1; scale: .95; } 16%, 70% { opacity: 1; scale: 1; } 78%, 100% { opacity: 0; scale: 1; } }
@keyframes ил-выноска-вторая { 0% { opacity: 0; scale: 1.5; } 70% { opacity: 1; scale: .95; } 100% { opacity: 1; scale: 1; } }
@keyframes ил-нажатие-плоско { 0%, 100% { scale: 1; } 45% { scale: .92; } }
@keyframes ил-пульс { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
/* правки сценок: выноска в одну строку, «ждёт» и «подтверждено» в одной клетке,
выноски приёма — над списком услуг, под ними место */
.выноска { max-width: 320px; white-space: nowrap; }
.сетка-дня .якорь .выноска { left: 42%; top: -36px; }
.запись-подтверждение { display: grid; }
.запись-подтверждение b { grid-row: 1; }
.запись-подтверждение .ждёт, .запись-подтверждение .готово { grid-row: 2; grid-column: 1; }
.запись-подтверждение .готово { display: block; visibility: hidden; }
.счёт.якорь h4 { margin-top: 36px; }
.счёт.якорь .выноска { left: auto; right: 6px; top: 0; }
.счёт .выноска-2 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.ил-пуск .сетка-дня .запись.запись-подтверждение { animation: ил-подъём .45s ease-out both, ил-заявка 3.4s ease-in-out .5s both; animation-delay: calc(var(--п, 0) * 90ms + 100ms), .5s; }
.ил-пуск .запись-подтверждение .готово { position: static; visibility: visible; animation: ил-зажигается 3.4s ease-in-out .5s both; }
.ил-пуск .счёт .выноска-1 { animation: ил-выноска-смена 3.6s ease-in-out 1.9s both; }
.ил-пуск .счёт .выноска-2 { animation: ил-выноска-вторая .5s cubic-bezier(.34, 1.56, .64, 1) 3.3s both; }
}
/* ── преимущества (24.09.2026): объёмные карточки, как иллюстрации ниже ── */
.плюсы { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.плюс { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 32px); background: var(--лист);
border: 2.5px solid var(--чернила); border-radius: 22px; box-shadow: 0 6px 0 0 var(--чернила); }
.плюс h3 { margin: 4px 0 0; font-size: clamp(1.25rem, 1.8vw, 1.4375rem); line-height: 1.25; font-weight: 720; letter-spacing: -.02em; text-wrap: balance; }
.плюс p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--графит); text-wrap: pretty; }
.плюс-знак { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--акцент);
border: 2.5px solid var(--чернила); box-shadow: 0 3px 0 0 var(--чернила); }
.плюс-знак svg { width: 26px; height: 26px; fill: none; stroke: var(--на-акценте); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.плюс-широкий { grid-column: span 2; }
.плюс-метрики { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.плюс-метрики li { padding: 7px 13px; border-radius: 999px; background: var(--тон); border: 1.5px solid var(--чернила);
font-size: 0.9375rem; font-weight: 620; color: var(--чернила); }
.плюс-возврат { background: var(--тон); }
.плюс .плюс-цифра { font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--акцент-текст); }
.плюс-цифра small { display: block; margin-top: 6px; font-size: 0.9375rem; font-weight: 620; letter-spacing: 0; color: var(--чернила); }
.плюс-итог { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; background: var(--чернила); }
.плюс-итог p { color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
.плюс-итог .плюс-знак { flex: none; border-color: #fff; box-shadow: 0 3px 0 0 #fff; }
@media (max-width: 64em) { .плюсы { grid-template-columns: repeat(2, minmax(0, 1fr)); } .плюс-широкий { grid-column: 1 / -1; } }
@media (max-width: 40em) { .плюсы { grid-template-columns: minmax(0, 1fr); } .плюс-итог { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: no-preference) {
.плюсы.ил-пуск .плюс { animation: ил-подъём .5s ease-out both; animation-delay: calc(var(--п, 0) * 90ms); }
}
/* ── преимущества мягким бенто (по образцу владельца, 24.09.2026) ──
Карточки без обводок на тонированном фоне; иллюстрация — белые панели с
мягкой тенью, уходит за нижний/правый край карточки. */
.пр { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.пр-карта { grid-column: span 4; position: relative; overflow: hidden; display: flex; flex-direction: column;
border-radius: 28px; }
.пр-узкая { grid-column: span 5; }
.пр-широкая { grid-column: span 7; }
.пр-карта h3 { margin: 0 0 12px; line-height: 1.2; font-weight: 740; letter-spacing: -.025em; }
.пр-карта > p { margin: 0; max-width: 30em; font-size: 0.9688rem; color: var(--графит); text-wrap: pretty; }
.пр-карта > p b { color: var(--чернила); font-weight: 680; }
.пр-ил { position: relative; margin-top: auto; padding-top: 24px; }
.пр-панель { background: var(--лист); border-radius: 14px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 14px 30px -18px rgba(28, 25, 23, .3); }
.пр-чип { flex: none; font-style: normal; font-size: 0.75rem; font-weight: 660; padding: 3px 9px; border-radius: 999px; background: var(--тон-2); color: var(--акцент-текст); white-space: nowrap; }
.пр-чип-янтарь { background: var(--янтарь-фон); color: var(--янтарь); }
.пр-ил-задачи { display: grid; gap: 10px; margin-right: -32px; padding-bottom: 28px; }
.пр-ил-задачи .пр-панель { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 0.875rem; font-weight: 560; }
.пр-ил-задачи .пр-панель:nth-child(2) { margin-left: 18px; }
.пр-ил-задачи .пр-панель:nth-child(3) { margin-left: 36px; }
.пр-шаг { position: absolute; left: var(--x); top: calc(24px + var(--y)); padding: 7px 16px; border-radius: 10px; border: 1.5px solid var(--а-300);
background: var(--лист); color: var(--акцент-текст); font-size: 0.875rem; font-weight: 640; }
.пр-линии { position: absolute; width: 100%; fill: none; stroke: var(--а-400); stroke-width: 1.5; stroke-dasharray: 5 5; }
.пр-готово { position: absolute; left: 4%; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--акцент);
background: var(--лист); color: var(--акцент-текст); font-size: 0.875rem; font-weight: 700; }
.пр-ил-чат { display: grid; gap: 10px; padding-bottom: 28px; }
.пр-время { justify-self: center; font-size: 0.6875rem; color: var(--тихий); background: var(--лист); padding: 2px 10px; border-radius: 999px; }
.пр-сообщение { margin: 0; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--лист); font-size: 0.8125rem; line-height: 1.35;
box-shadow: 0 1px 2px rgba(28, 25, 23, .06); }
.пр-сообщение small { display: block; margin-top: 3px; text-align: right; font-size: 0.6875rem; color: var(--тихий); }
.пр-ответ { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--акцент); color: var(--на-акценте); }
.пр-ответ small { color: rgba(255, 255, 255, .8); }
.пр-ил-пуш { display: grid; gap: 10px; margin: 0 -12px; padding-bottom: 28px; }
.пр-уведомление { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px;
background: rgba(255, 255, 255, .92); border-radius: 18px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 14px 30px -18px rgba(28, 25, 23, .3); font-size: 0.8125rem; line-height: 1.35; }
.пр-уведомление b { display: block; font-size: 0.8125rem; }
.пр-уведомление small { color: var(--тихий); font-size: 0.6875rem; }
.пр-уведомление-2 { opacity: .75; scale: .96; }
.пр-значок { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--акцент); color: var(--на-акценте); font-weight: 800; }
.пр-ил-цифры { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; padding-bottom: 28px; }
.пр-метрика { display: grid; gap: 4px; padding: 14px 16px; }
.пр-метрика small, .пр-столбики small { font-size: 0.75rem; color: var(--тихий); }
.пр-метрика b { font-size: 1.375rem; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.пр-метрика .пр-чип { justify-self: start; }
.пр-столбики { padding: 14px 16px; }
.пр-столбики div { display: flex; align-items: flex-end; gap: 8px; height: 76px; margin-top: 8px; }
.пр-столбики i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--акцент); opacity: .85; }
.пр-столбики i:nth-child(even) { opacity: .5; }
.пр-призыв { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 32px 8px 8px; }
.пр-призыв p { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.25; font-weight: 740; letter-spacing: -.025em; text-wrap: balance; }
.пр-призыв .кнопка { min-width: 280px; }
@media (max-width: 64em) {
.пр { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.пр-карта, .пр-узкая, .пр-широкая { grid-column: span 1; }
.пр-широкая { grid-column: 1 / -1; }
.пр-карта:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 40em) {
.пр { grid-template-columns: minmax(0, 1fr); }
.пр-карта { min-height: 0; }
.пр-ил-цифры { grid-template-columns: 1fr 1fr; }
.пр-столбики { grid-column: 1 / -1; }
.пр-ил-задачи { margin-right: -24px; }
.пр-призыв .кнопка { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
.пр.ил-пуск > * { animation: ил-подъём .5s ease-out both; animation-delay: calc(var(--п, 0) * 90ms); }
.пр.ил-пуск .пр-сообщение { animation: ил-подъём .45s ease-out both; animation-delay: .6s; }
.пр.ил-пуск .пр-ответ { animation-delay: 1.2s; }
.пр.ил-пуск .пр-столбики i { transform-origin: bottom; animation: ил-рост-вверх .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.5s + var(--п, 0) * 0s); }
.пр.ил-пуск .пр-столбики i:nth-child(2) { animation-delay: .6s; } .пр.ил-пуск .пр-столбики i:nth-child(3) { animation-delay: .7s; }
.пр.ил-пуск .пр-столбики i:nth-child(4) { animation-delay: .8s; } .пр.ил-пуск .пр-столбики i:nth-child(5) { animation-delay: .9s; }
.пр.ил-пуск .пр-готово { animation: ил-наклейка .55s cubic-bezier(.34, 1.56, .64, 1) 1s both; }
.пр.ил-пуск .пр-уведомление:first-child { animation: ил-въезд .6s cubic-bezier(.34, 1.4, .64, 1) .6s both; }
}
@keyframes ил-рост-вверх { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.пр-ил-шаги { height: 280px; }
.пр-линии { inset: 24px 0 auto; height: 200px; }
.пр-готово { bottom: 28px; }
.пр-призыв p { max-width: 640px; }
/* ключевая кнопка на тёмном блоке «без CRM» — тоже зелёная */
.без-crm .кнопка { background: var(--кнопка); color: #ffffff; }
.без-crm .кнопка:hover { background: var(--кнопка-наведение); }
/* «Вся клиника в цифрах»: карточка с обводкой, плитки с обводкой, линейный график
выручки по месяцам вместо столбиков; линия прорисовывается при появлении. */
.пр-широкая { border: 1.5px solid var(--а-200); }
.пр-широкая .пр-панель { border: 1.5px solid var(--а-200); box-shadow: none; }
.пр-ил-цифры { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: stretch; margin-right: 0; }
.пр-плитки { display: grid; gap: 12px; }
.пр-плитки .пр-метрика { padding: 12px 14px; }
.пр-плитки .пр-метрика b { font-size: 1.25rem; }
.пр-график { position: relative; padding: 14px 16px 10px; color: var(--акцент); }
.пр-график small { font-size: 0.75rem; color: var(--тихий); }
.пр-график svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.пр-сетка { fill: none; stroke: var(--линия); stroke-width: 1; stroke-dasharray: 3 4; }
.пр-линия { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.пр-точка { fill: currentColor; stroke: var(--лист); stroke-width: 2.5; }
.пр-подписи text { font-size: 10px; fill: var(--тихий); text-anchor: middle; font-family: Onest, system-ui, sans-serif; }
.пр-подсказка { position: absolute; right: 10px; top: 30px; padding: 3px 9px; border-radius: 999px; background: var(--акцент); color: var(--на-акценте);
font-size: 0.75rem; font-weight: 680; font-variant-numeric: tabular-nums; }
@media (max-width: 40em) { .пр-ил-цифры { grid-template-columns: minmax(0, 1fr); margin-right: 0; } .пр-плитки { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: no-preference) {
.пр.ил-пуск .пр-линия { stroke-dasharray: 1; animation: пр-прорисовка 1.4s cubic-bezier(.45, 0, .25, 1) .4s both; }
.пр.ил-пуск .пр-площадь { animation: ил-проявление .6s ease-out 1.5s both; }
.пр.ил-пуск .пр-точка { transform-box: fill-box; transform-origin: center; animation: ил-хлоп .4s cubic-bezier(.34, 1.56, .64, 1) 1.7s both; }
.пр.ил-пуск .пр-подсказка { animation: ил-наклейка .5s cubic-bezier(.34, 1.56, .64, 1) 1.9s both; }
}
@keyframes пр-прорисовка { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* ══ проход по HIG и фирменному стилю (24.09.2026) ══════════════════════════ */
/* цвета: зелёный кнопок сдвинут к изумрудному (162°) — аналогичен голубому
(219°), контраст на белом 5,3; тёплый охряный (30°) — комплементарная пара
к голубому, только в малых дозах (рукописная пометка, «до +30%»). */
:root { --кнопка: #0F7A5A; --кнопка-наведение: #0B6446; --тёплый: #A8641F; }
/* первый экран: голубое свечение и ветеринарный узор из кабинета, тает книзу */
.первый { position: relative; isolation: isolate; }
.первый-фон { position: absolute; z-index: -1; inset: -120px 0 -80px; pointer-events: none;
background: radial-gradient(60% 55% at 78% 30%, var(--а-100), transparent 70%), radial-gradient(40% 40% at 10% 10%, var(--а-50), transparent 70%); }
.первый-фон::before { content: ""; position: absolute; inset: 0; background: var(--а-200); opacity: .55;
-webkit-mask: url(kartinki/uzor.webp) 0 0 / 420px auto repeat, linear-gradient(to bottom, #000 0%, transparent 85%);
-webkit-mask-composite: source-in;
mask: url(kartinki/uzor.webp) 0 0 / 420px auto repeat, linear-gradient(to bottom, #000 0%, transparent 85%);
mask-composite: intersect; }
.пометка-ролика { color: var(--тёплый); }
.пр-камень.пр-узкая > p b { color: var(--тёплый); }
/* разделение блоков: фоны чередуются, у белых — тонкая граница сверху и снизу */
.раздел-лист { border-block: 1px solid var(--линия-2); }
/* шкала кеглей HIG: 13/15/17/20/22/28 и крупные заголовки */
@media (min-width: 60em) { .вводный { font-size: 1.25rem; line-height: 1.6; } }
.h3 { font-size: 1.25rem; }
.вопросы summary, .ремо-блок > p, #кабинет .показ-текст p { font-size: 1.0625rem; }
.без-crm-лозунг { font-size: 1.375rem; }
.без-crm .h3, .ремо-заголовок, #кабинет .показ-текст .h3, .пр-призыв p { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.пакет-цена { font-size: 1.75rem; }
.пакет-цена small { font-size: 0.8125rem; }
.пр-карта h3 { font-size: 1.375rem; }
/* цели нажатия не меньше 44 px */
#счёт .сравнить { min-height: 44px; }
/* параллакс двигает только translate — плавно, без рывков */
[data-параллакс], .первый-фон { will-change: translate; }
/* ══ объём, воздух, тональность, наведение (24.09.2026) ══════════════════════ */
:root {
/* шкала мягких теней: 1 — строка/плашка, 2 — карточка, 3 — поднятая карточка */
--тень-1: 0 1px 2px rgba(15, 28, 46, .06), 0 3px 10px -4px rgba(15, 28, 46, .08);
--тень-2: 0 1px 2px rgba(15, 28, 46, .05), 0 14px 34px -14px rgba(15, 28, 46, .20);
--тень-3: 0 2px 6px rgba(15, 28, 46, .06), 0 30px 64px -26px rgba(15, 28, 46, .32);
--плавно: cubic-bezier(.2, .8, .2, 1);
}
/* воздух: больше отступов у разделов, между карточками и внутри них */
.раздел { padding-block: clamp(5.5rem, 11vw, 9.5rem); }
.заголовок-раздела { margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem); }
.пр { gap: 28px; }
.пр-карта { padding: 36px 36px 0; min-height: 360px; }
.пр-карта > p { line-height: 1.6; }
@media (max-width: 40em) { .пр { gap: 20px; } .пр-карта { padding: 26px 24px 0; } }
/* тональность: карточки в одном ключе — лёгкий градиент голубого, без плоских заливок */
.пр-тон { background: linear-gradient(160deg, var(--а-50) 0%, #e6f1fd 100%); }
.пр-камень { background: linear-gradient(160deg, #f5f8fc 0%, #e8eef6 100%); }
.пр-широкая { background: linear-gradient(160deg, #ffffff 0%, var(--а-50) 100%); }
/* объём: тени по ролям */
.пр-карта, .расчёт, .вопросы details, .окно { box-shadow: var(--тень-2); }
.без-crm { box-shadow: var(--тень-3); }
.вопросы details { background: var(--лист); padding-inline: 20px; margin-bottom: 10px; border: 1px solid var(--линия-2); }
.кнопка-тихая { box-shadow: var(--тень-1); }
/* наведение */
.пр-карта, .расчёт-ввод .пункт, .модуль, .вопросы details, .кнопка, .ремо-сцена, #кабинет .вкладки button, .меню a {
transition: transform .28s var(--плавно), box-shadow .28s var(--плавно), background-color .2s, border-color .2s, color .2s; }
@media (hover: hover) {
.пр-карта:hover { box-shadow: var(--тень-3); transform: translateY(-4px); }
.кнопка-главная:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(15, 122, 90, .6); }
.кнопка-тихая:hover { transform: translateY(-2px); box-shadow: var(--тень-2); border-color: var(--а-300); }
.расчёт-ввод .пункт:hover { border-color: var(--а-300); box-shadow: var(--тень-1); }
.модуль[data-модуль]:hover { background: linear-gradient(90deg, var(--а-50), transparent); }
.вопросы details:hover { border-color: var(--а-200); box-shadow: var(--тень-3); }
.меню a:hover { color: var(--акцент-текст); }
}
.кнопка-главная:active, .кнопка-тихая:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) {
.пр-карта:hover, .кнопка:hover, .ремо-блок:hover .ремо-сцена, #кабинет .вкладки button:hover { transform: none !important; }
}
/* кнопки действий — капсулы (HIG: крупные кнопки со скруглением на всю высоту);
в пару к круглым вкладкам и плашкам. Кнопки в макетах кабинета не трогаем —
они повторяют продукт. */
.кнопка { border-radius: 999px; padding-inline: 28px; }
.шапка .кнопка { border-radius: 999px; padding-inline: 20px; }
.действия .кнопка { padding-inline: 26px; }
/* ══ единый стиль от шапки до подвала (24.09.2026) ═══════════════════════════
Правило: на голубом разделе карточки белые, на белом — тонированные.
Радиусы: карточка 28, панель внутри 16–20, кнопки и плашки — капсулы.
Глубина — только мягкие тени --тень-1/2/3; чёрных обводок и «жёстких»
сплошных теней больше нет. Акцент один — голубой; ключевые кнопки зелёные;
тёплый — только рукописные пометки. */
/* шапка: при прокрутке — лёгкая тень */
.шапка.прокручено { box-shadow: var(--тень-1); }
/* «кому что»: блоки — белые карточки, иллюстрации мягкие */
.ремо { gap: 28px; row-gap: 28px; }
.ремо-блок { background: var(--лист); border-radius: 28px; padding: 28px 28px 24px; box-shadow: var(--тень-2);
transition: transform .28s var(--плавно), box-shadow .28s var(--плавно); }
.ремо-сцена { margin-bottom: 24px; }
@media (hover: hover) {
.ремо-блок:hover { transform: translateY(-4px); box-shadow: var(--тень-3); }
.ремо-блок:hover .ремо-сцена { transform: none; }
}
.ил-кус { border: 1px solid var(--линия-2); box-shadow: var(--тень-2); }
.ил-тёмная { border: 0; box-shadow: var(--тень-3); }
.ил-чип { box-shadow: var(--тень-1); }
.ил-чип-тон { border-color: transparent; }
.ил-напоминание { border: 0; box-shadow: var(--тень-2); }
.ил-кнопка { border: 0; border-radius: 999px; }
@keyframes ил-нажатие { 0%, 100% { translate: 0 0; box-shadow: 0 10px 22px -10px rgba(15, 122, 90, .55); } 45% { translate: 0 3px; box-shadow: 0 4px 10px -6px rgba(15, 122, 90, .5); } }
/* кабинет: сегментный переключатель вместо «объёмных» кнопок, рамка — тенью */
#кабинет .вкладки { background: var(--камень); padding: 4px; gap: 2px; border-radius: 999px; }
#кабинет .вкладки button { border: 0; border-radius: 999px; background: transparent; color: var(--графит); box-shadow: none; font-weight: 620; }
#кабинет .вкладки button[aria-selected="true"] { background: var(--лист); color: var(--чернила); box-shadow: var(--тень-1); }
@media (hover: hover) { #кабинет .вкладки button:not([aria-selected="true"]):hover { transform: none; background: rgba(255, 255, 255, .6); color: var(--чернила); } }
#кабинет .вкладки button:active { transform: none; box-shadow: none; }
#кабинет .кабинет { border: 1px solid var(--линия); box-shadow: var(--тень-3); }
.выноска { border: 0; border-radius: 999px; padding: 6px 13px; box-shadow: 0 10px 24px -10px rgba(61, 104, 185, .65); }
/* переезд: шаги и способы — карточки */
.шаг { background: var(--лист); border-radius: 28px; padding: 28px; box-shadow: var(--тень-2); }
.шаг::before { border: 0; background: var(--акцент); color: var(--на-акценте); }
.откуда { border-top: 0; gap: 20px; }
.откуда > div, .откуда > div + div { background: var(--лист); border: 0; border-radius: 20px; padding: 24px; margin-top: 0; box-shadow: var(--тень-1); }
/* рукописные пометки — везде тёплые, как на первом экране */
.пометка { color: var(--тёплый); }
/* радиусы крупных поверхностей — к общему 28 */
.расчёт { border-radius: 28px; }
.расчёт-ввод { border-radius: 28px 0 0 28px; }
@media (max-width: 53.75em) { .расчёт-ввод { border-radius: 28px 28px 0 0; } }
.без-crm, .окно, .форма { border-radius: 28px; }
.форма { box-shadow: var(--тень-3); }
.вопросы details { border-radius: 20px; }
.ролик { border-radius: 24px; }
/* иллюстрации внутри карточек «кому что» — под ширину карточки */
.ремо-сцена { height: 228px; }
.ил-пилюля { padding: 16px 18px; width: 88%; }
.ил-пилюля b { font-size: 1.125rem; }
.ил-пилюля span { font-size: 0.75rem; padding: 3px 8px; }
.ил-пилюля-2 { top: 112px; left: 8%; }
.ил-лента p { font-size: 0.875rem; padding: 6px 10px; }
.ил-выделение { max-width: 66%; }
.ил-напоминание { padding: 12px 14px; }
.ил-напоминание b { font-size: 1rem; white-space: nowrap; }
.ил-напоминание span { font-size: 0.75rem; }
.ил-чип { font-size: 1rem; padding: 10px 16px; }
.ил-окно-деньги p { font-size: 0.875rem; }
.ил-готово { bottom: 14px; }
.ил-файл svg { width: 26px; height: 26px; }
/* призыв в «Преимуществах» — последняя карточка бенто во всю ширину:
тёмно-синяя с фирменным узором, как блок заявки */
.пр-призыв { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 4vw, 44px); border-radius: 28px;
background: linear-gradient(135deg, var(--меню) 0%, #2d4470 100%); box-shadow: var(--тень-3);
transition: transform .28s var(--плавно), box-shadow .28s var(--плавно); }
.пр-призыв::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #ffffff; opacity: .06;
-webkit-mask: url(kartinki/uzor.webp) 0 0 / 380px auto repeat; mask: url(kartinki/uzor.webp) 0 0 / 380px auto repeat; }
.пр-призыв p { color: #ffffff; }
.пр-призыв .кнопка { box-shadow: 0 12px 26px -10px rgba(15, 122, 90, .7); }
@media (hover: hover) { .пр-призыв:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .пр-призыв:hover { transform: none; } }
/* ── «Приложение» и «Сайт»: заголовок сверху + бенто (24.09.2026) ──
Слева (у приложения — справа) большая карточка с макетом, рядом плитки
преимуществ 2 × 2 с иконками. На голубом разделе карточки белые, на белом —
тонированные, как везде. */
.сб { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.сб-зеркально { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.сб-карта { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 48px);
border-radius: 28px; box-shadow: var(--тень-2); }
.раздел-лист .сб-карта { background: linear-gradient(160deg, var(--а-50) 0%, #e6f1fd 100%); }
.раздел:not(.раздел-лист) .сб-карта { background: var(--лист); }
.сб-макет { width: 100%; }
.сб-плитки { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: stretch; }
.сб-плитка { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 24px; box-shadow: var(--тень-1);
transition: transform .28s var(--плавно), box-shadow .28s var(--плавно); }
.раздел-лист .сб-плитка { background: linear-gradient(160deg, #f5f8fc 0%, #e8eef6 100%); }
.раздел:not(.раздел-лист) .сб-плитка { background: var(--лист); }
.сб-плитка-широкая { grid-column: 1 / -1; }
.сб-плитка b { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.сб-плитка > span:last-child { font-size: 0.9375rem; line-height: 1.5; color: var(--графит); }
.сб-знак { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; display: grid; place-items: center; background: var(--акцент); }
.сб-знак svg { width: 22px; height: 22px; fill: none; stroke: var(--на-акценте); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .сб-плитка:hover, .сб-карта:hover { transform: translateY(-4px); box-shadow: var(--тень-3); } }
.сб-карта { transition: transform .28s var(--плавно), box-shadow .28s var(--плавно); }
@media (prefers-reduced-motion: reduce) { .сб-плитка:hover, .сб-карта:hover { transform: none; } }
@media (max-width: 64em) { .сб, .сб-зеркально { grid-template-columns: minmax(0, 1fr); } .сб-зеркально .сб-карта { order: -1; } }
@media (max-width: 34em) { .сб-плитки { grid-template-columns: minmax(0, 1fr); } .сб-карта { padding: 20px 12px; } }
/* без лишнего слоя: окно сайта и телефоны сами по себе объекты со своей тенью —
подложку-карточку вокруг них убираем */
.сб-карта, .раздел-лист .сб-карта, .раздел:not(.раздел-лист) .сб-карта { background: none; box-shadow: none; padding: 0; }
@media (hover: hover) { .сб-карта:hover { transform: none; box-shadow: none; } }
.сб-карта .сайт { box-shadow: var(--тень-3); }
/* пункты под описанием — с галочками, как выгоды на первом экране */
.ремо-факты li, #кабинет .показ-текст li { position: relative; padding-left: 28px; }
.ремо-факты li::before, #кабинет .показ-текст li::before { content: ""; position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%;
background: var(--тон-2) url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; }
.ремо-факты { gap: 8px; }
/* кнопки и наклейки внутри иллюстраций — голубые: зелёный оставлен только
настоящим нажимаемым действиям страницы, чтобы картинки с ними не спорили */
.ил-кнопка { background: var(--акцент); box-shadow: 0 10px 22px -10px rgba(61, 104, 185, .6); }
@keyframes ил-нажатие { 0%, 100% { translate: 0 0; box-shadow: 0 10px 22px -10px rgba(61, 104, 185, .6); } 45% { translate: 0 3px; box-shadow: 0 4px 10px -6px rgba(61, 104, 185, .5); } }
/* ── переезд бенто (24.09.2026) ── раздел голубой → карточки белые с лёгким градиентом */
.пз { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.пз-шаг { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 420px; padding: 32px 32px 0;
border-radius: 28px; background: linear-gradient(165deg, #ffffff 0%, #f1f7fe 100%); box-shadow: var(--тень-2);
transition: transform .28s var(--плавно), box-shadow .28s var(--плавно); }
@media (hover: hover) { .пз-шаг:hover { transform: translateY(-4px); box-shadow: var(--тень-3); } }
.пз-номер { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
background: var(--акцент); color: var(--на-акценте); font-weight: 760; font-size: 0.9375rem; box-shadow: 0 8px 18px -8px rgba(61, 104, 185, .7); }
.пз-шаг h3 { margin: 0 0 10px; font-size: 1.375rem; line-height: 1.2; font-weight: 740; letter-spacing: -.02em; }
.пз-шаг > p { margin: 0; font-size: 0.9688rem; line-height: 1.6; color: var(--графит); }
.пз-ил { padding-top: 26px; padding-bottom: 28px; }
.пз-форма { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; padding: 16px 18px; margin-right: -32px; }
.пз-форма small { font-size: 0.75rem; color: var(--тихий); }
.пз-форма b { font-size: 0.9375rem; font-weight: 640; padding-bottom: 6px; border-bottom: 1.5px solid var(--линия); }
.пз-кнопка { grid-column: 1 / -1; justify-self: start; margin-top: 8px; padding: 7px 16px; border-radius: 999px; background: var(--акцент); color: var(--на-акценте); font-size: 0.8125rem; font-weight: 680; }
.пз-отправлено { position: absolute; }
.пз-импорт { padding: 14px 16px; margin: 0 -32px 0 -4px; }
.пз-файл { display: flex; align-items: center; gap: 10px; }
.пз-файл svg { width: 22px; height: 22px; fill: none; stroke: var(--акцент); stroke-width: 1.8; stroke-linejoin: round; }
.пз-файл b { font-size: 0.9375rem; font-weight: 700; }
.пз-файл small { margin-left: auto; font-size: 0.75rem; color: var(--тихий); font-variant-numeric: tabular-nums; }
.пз-полоса { height: 6px; margin: 10px 0 8px; border-radius: 3px; background: var(--камень-2); overflow: hidden; }
.пз-полоса i { display: block; height: 100%; background: var(--акцент); border-radius: 3px; transform-origin: left; }
.пз-импорт p { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin: 0; padding: 7px 0; border-top: 1px solid var(--линия-2);
font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.пз-импорт p b { font-weight: 680; }
.пз-стойка { display: flex; align-items: center; gap: 14px; padding: 14px; margin-right: -32px; }
.пз-qr { flex: none; display: grid; grid-template-columns: repeat(9, 1fr); gap: 1.5px; width: 84px; height: 84px; padding: 6px; background: #fff; border-radius: 10px; border: 1px solid var(--линия-2); }
.пз-qr i { border-radius: 1px; }
.пз-qr i.т { background: var(--чернила); }
.пз-стойка b { display: block; font-size: 0.9375rem; }
.пз-стойка small { font-size: 0.75rem; color: var(--тихий); }
.пз-пуш { margin: 12px -12px 0 8px; }
.пз-откуда { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.пз-откуда .сб-плитка { background: var(--лист); }
@media (max-width: 64em) { .пз, .пз-откуда { grid-template-columns: minmax(0, 1fr); } .пз-шаг { min-height: 0; } }
@media (max-width: 40em) { .пз-шаг { padding: 26px 24px 0; } .пз-форма, .пз-стойка { margin-right: -24px; } .пз-импорт { margin-right: -24px; } }
@media (prefers-reduced-motion: no-preference) {
.пз.ил-пуск .пз-шаг { animation: ил-подъём .5s ease-out both; animation-delay: calc(var(--п, 0) * 110ms); }
.пз.ил-пуск .пз-отправлено { animation: ил-наклейка .55s cubic-bezier(.34, 1.56, .64, 1) .9s both; }
.пз.ил-пуск .пз-полоса i { animation: пз-загрузка 1.2s cubic-bezier(.45, 0, .25, 1) .5s both; }
.пз.ил-пуск .пз-импорт p { animation: ил-подъём .4s ease-out both; }
.пз.ил-пуск .пз-импорт p:nth-of-type(1) { animation-delay: 1.5s; } .пз.ил-пуск .пз-импорт p:nth-of-type(2) { animation-delay: 1.65s; }
.пз.ил-пуск .пз-импорт p:nth-of-type(3) { animation-delay: 1.8s; } .пз.ил-пуск .пз-импорт p:nth-of-type(4) { animation-delay: 2s; }
.пз.ил-пуск .пз-qr { animation: ил-хлоп .5s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
.пз.ил-пуск .пз-пуш { animation: ил-въезд .6s cubic-bezier(.34, 1.4, .64, 1) 1.2s both; }
}
@keyframes пз-загрузка { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* переезд: наклейка «Заявка отправлена» — у верхнего угла формы, не на кнопке */
.пз-отправлено { left: auto; right: -12px; bottom: auto; rotate: 3deg; background: var(--лист); }
/* ── приложение: телефоны в гамме страницы и оживление (24.09.2026) ──
Экраны — голубая палитра страницы вместо зелёной, рамка — тёмно-синяя. */
.телефон { --а-200: #C9E7FF; --акцент: #3D68B9; --акцент-текст: #325390; --тон: #F3FAFF; --тон-2: #E3F3FF; }
.телефон { background: #0f1c2e; box-shadow: var(--тень-3); }
.телефон-экран { background: #eef4fa; }
.пузырь-фото { background: linear-gradient(140deg, #cfe3f7, #7fa3d4); }
@media (prefers-reduced-motion: no-preference) {
.два-телефона.ил-пуск .телефон { animation: ил-подъём .6s cubic-bezier(.2, .8, .2, 1) both; }
.два-телефона.ил-пуск .телефон:last-child { animation-delay: .25s; }
.два-телефона.ил-пуск .напоминание { animation: ил-въезд .5s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(.5s + var(--п, 0) * 180ms); }
.два-телефона.ил-пуск .напоминание em:not(.ок) { animation: ил-пульс .8s ease-in-out 1.6s 2; }
.два-телефона.ил-пуск .пузырь { animation: ил-подъём .45s ease-out both; animation-delay: calc(var(--п, 0) * 550ms - 900ms); }
.два-телефона.ил-пуск .прил-кнопка { animation: ил-пульс .9s ease-in-out 1.4s 1; }
}
.пз-отправлено { top: -6px; }
/* заголовки разделов — по центру (решение владельца 24.09.2026); первый экран
остаётся слева — там заголовок в паре с роликом */
.заголовок-раздела { margin-inline: auto; text-align: center; }
.заголовок-раздела .вводный { margin-inline: auto; }
.заголовок-раздела .h2 { text-wrap: balance; }
.счёт-заголовок { text-align: center; }
.счёт-заголовок p { margin-inline: auto; }
#кабинет .вкладки { margin-inline: auto; }
.вопросы { margin-inline: auto; }
/* ровные уровни в карточках одного ряда: сцена, заголовок, абзац, список и
ссылка каждой карточки встают вровень с соседними (subgrid) */
@supports (grid-template-rows: subgrid) {
.ремо { grid-auto-flow: row dense; }
.ремо-блок { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.ремо-блок > p { margin-top: 14px; }
.ремо-блок > .ремо-факты { margin-top: 16px; align-self: start; }
.ремо-ссылка { align-self: end; }
.пз-шаг { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.пз-шаг > .пр-ил { align-self: end; }
}
/* галочка — по центру первой строки пункта: строка 16 × 1,45 ≈ 23 px, кружок 18 px */
.ремо-факты li::before, #кабинет .показ-текст li::before { top: calc((1.45em - 18px) / 2); }
/* ссылки в карточках «Удобно для всех» — кнопки в рамке со стрелкой в кружке */
.ремо-ссылка { gap: 12px; min-height: 44px; padding: 6px 6px 6px 20px; border: 1.5px solid var(--линия); border-radius: 999px;
background: var(--лист); font-size: 0.9375rem; font-weight: 640; color: var(--чернила);
transition: border-color .2s, background-color .2s, box-shadow .28s var(--плавно), color .2s; }
.ремо-ссылка svg { box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 50%; background: var(--акцент);
stroke: var(--на-акценте); stroke-width: 2.2; transition: transform .2s var(--плавно); }
@media (hover: hover) {
.ремо-ссылка:hover { color: var(--акцент-текст); border-color: var(--а-300); background: var(--а-50); box-shadow: var(--тень-1); }
.ремо-ссылка:hover svg { transform: translateX(3px); }
}
.ремо-ссылка { justify-self: center; align-self: end; margin-inline: auto; }
.сравнение .нет { font-size: 0.75rem; }
/* CTA в каждом разделе: зелёная «Записаться на демо» + «Посчитать стоимость» в рамке */
.cta-ряд { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-центр { justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.cta-ряд .кнопка { min-height: 52px; font-size: 1rem; }
#кабинет .показ-текст .cta-ряд .кнопка { min-height: 48px; font-size: 0.9375rem; padding-inline: 22px; }
@media (max-width: 30em) { .cta-ряд .кнопка { flex: 1 1 100%; } }
/* во вкладках кабинета колонка узкая: вторая кнопка — текстовой ссылкой рядом */
#кабинет .показ-текст .cta-ряд .кнопка-тихая { min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none;
color: var(--акцент-текст); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { #кабинет .показ-текст .cta-ряд .кнопка-тихая:hover { transform: none; box-shadow: none; color: var(--чернила); } }
@media (max-width: 30em) { #кабинет .показ-текст .cta-ряд .кнопка-тихая { flex: 0 0 auto; } }
/* рукописная пометка слева от кнопок, стрелка указывает на «Записаться на демо» */
.cta-с-пометкой { position: relative; }
.пометка-cta { position: absolute; right: calc(50% + 150px); top: -46px; width: max-content; text-align: right;
font: 600 clamp(1.5rem, 2vw, 1.75rem)/1.05 "Caveat", "Segoe Print", cursive; color: var(--тёплый); rotate: -4deg; pointer-events: none; }
.пометка-cta svg { position: absolute; right: -86px; top: 22px; width: 84px; height: 56px; fill: none; stroke: currentColor;
stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
@media (max-width: 64em) {
.пометка-cta { position: static; order: -1; flex-basis: 100%; text-align: center; rotate: -2deg; margin-bottom: 4px; }
.пометка-cta br { display: none; }
.пометка-cta svg { display: none; }
}
@media (min-width: 64.01em) {
.пометка-cta { right: calc(50% + 270px); top: -34px; }
.пометка-cta svg { right: -46px; top: 30px; width: 60px; height: 44px; }
}
/* вводный текст под центрованным заголовком — ровными строками, без висячих предлогов */
.заголовок-раздела .вводный { text-wrap: balance; }
/* стрелка внутри зелёных кнопок CTA — в белом кружке */
.кнопка-стрелка { box-sizing: content-box; width: 16px; height: 16px; padding: 5px; margin-right: -12px; border-radius: 50%;
background: rgba(255, 255, 255, .2); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--плавно); }
@media (hover: hover) { .кнопка:hover .кнопка-стрелка { transform: translateX(3px); } }
/* во вкладках кабинета: кнопка и ссылка — по центру колонки текста */
#кабинет .показ-текст .cta-ряд { flex-direction: column; align-items: center; gap: 10px; }
#кабинет .показ-текст .cta-ряд .кнопка { flex: 0 0 auto; }
/* стрелка в кнопках на светлом фоне — голубой кружок */
.кнопка-тихая .кнопка-стрелка { background: var(--акцент); }
.без-crm .кнопка .кнопка-стрелка { background: rgba(255, 255, 255, .2); }
.шапка .кнопка-стрелка { width: 14px; height: 14px; padding: 4px; margin-right: -8px; }
#кабинет .показ-текст .cta-ряд .кнопка-тихая .кнопка-стрелка { display: none; }
/* кнопка в узкой колонке калькулятора — в одну строку */
#к-подключить { white-space: nowrap; font-size: 0.9375rem; padding-inline: 18px 20px; gap: 10px; }
#к-подключить .кнопка-стрелка { margin-right: -8px; }
/* ── макет сайта клиники, нарядный (24.09.2026) ── */
.сайт-2 { max-width: 600px; border-radius: 20px; font-size: 0.8125rem; }
.сайт-2 .сайт-адрес { gap: 6px; }
.сайт-2 .сайт-адрес > i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.сайт-2 .сайт-адрес > i:nth-child(2) { background: #febc2e; } .сайт-2 .сайт-адрес > i:nth-child(3) { background: #28c840; }
.сайт-2 .сайт-адрес span { display: flex; align-items: center; gap: 6px; margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: var(--лист); }
.с2-герой { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; align-items: center; padding: 22px 20px;
background: linear-gradient(135deg, var(--а-50) 0%, var(--а-100) 100%); }
.с2-метка { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--лист); color: var(--акцент-текст); font-size: 0.6875rem; font-weight: 640; }
.с2-герой strong { display: block; margin-top: 10px; font-size: 1.5rem; line-height: 1.08; letter-spacing: -.03em; color: var(--чернила); }
.с2-герой p { margin: 8px 0 0; color: var(--графит); }
.с2-кнопки { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.с2-кнопка { padding: 9px 16px; border-radius: 999px; background: var(--акцент); color: #fff; font-weight: 680; box-shadow: 0 8px 18px -8px rgba(61, 104, 185, .6); }
.с2-рейтинг { font-size: 0.75rem; color: #f5a623; letter-spacing: 1px; }
.с2-рейтинг b { color: var(--чернила); letter-spacing: 0; margin-right: 2px; }
.с2-рейтинг small { display: block; letter-spacing: 0; color: var(--тихий); font-size: 0.6875rem; }
.с2-фото { aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center;
background: radial-gradient(circle at 30% 25%, #ffffff 0%, var(--а-200) 55%, var(--а-400) 100%); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .5); }
.с2-фото svg { width: 58%; height: 58%; fill: #ffffff; opacity: .95; filter: drop-shadow(0 6px 12px rgba(61, 104, 185, .35)); }
.с2-врачи { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 6px; }
.с2-врач { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
.с2-врач i { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.6875rem; font-weight: 700;
color: var(--акцент-текст); background: var(--а-100); }
.с2-врач b { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.с2-врач small { font-size: 0.6875rem; color: var(--тихий); }
.с2-услуги { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 20px 20px; }
.с2-услуга { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: var(--лист); border: 1px solid var(--линия-2); box-shadow: var(--тень-1); }
.с2-услуга em { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--тон-2); }
.с2-услуга svg { width: 16px; height: 16px; fill: none; stroke: var(--акцент); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.с2-услуга b { font-size: 0.75rem; }
.с2-услуга small { font-size: 0.8125rem; font-weight: 740; color: var(--чернила); font-variant-numeric: tabular-nums; }
@media (max-width: 30em) {
.с2-герой { grid-template-columns: 1fr; } .с2-фото { display: none; }
.с2-врачи { grid-template-columns: 1fr 1fr; } .с2-врач:nth-child(3) { display: none; }
.с2-услуги { grid-template-columns: 1fr 1fr; } .с2-услуга:nth-child(3) { display: none; }
}
/* пометка «цены прямо из прайса» — к карточкам услуг */
.пара-макет .пометка.сайта { right: -18px; bottom: -48px; }
/* шаг 3 переезда — сверка «было / стало» */
.пз-сверка { padding: 14px 16px; margin-right: -32px; }
.пз-сверка-шапка { display: grid; grid-template-columns: 1fr 64px 64px 30px; font-size: 0.6875rem; color: var(--тихий); }
.пз-сверка-шапка span:first-child { grid-column: 2; text-align: right; } .пз-сверка-шапка span:last-child { text-align: right; }
.пз-сверка p { display: grid; grid-template-columns: 1fr 64px 64px 30px; align-items: center; margin: 0; padding: 7px 0; border-top: 1px solid var(--линия-2);
font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.пз-сверка p b { text-align: right; font-weight: 640; } .пз-сверка p b + b { font-weight: 740; color: var(--акцент-текст); }
.пз-сверка p em { justify-self: end; }
.пз-сверка .пз-кнопка { display: inline-block; margin-top: 10px; }
.пз-сошлось { position: absolute; right: -12px; rotate: 3deg; background: var(--лист); }
@media (max-width: 40em) { .пз-сверка { margin-right: -24px; } }
@media (prefers-reduced-motion: no-preference) {
.пз.ил-пуск .пз-сверка p { animation: ил-подъём .4s ease-out both; }
.пз.ил-пуск .пз-сверка p:nth-of-type(1) { animation-delay: .6s; } .пз.ил-пуск .пз-сверка p:nth-of-type(2) { animation-delay: .75s; }
.пз.ил-пуск .пз-сверка p:nth-of-type(3) { animation-delay: .9s; }
.пз.ил-пуск .пз-сверка .пз-кнопка { animation: ил-пульс .8s ease-in-out 1.3s 1; }
.пз.ил-пуск .пз-сошлось { animation: ил-наклейка .55s cubic-bezier(.34, 1.56, .64, 1) 1.9s both; }
}
.пз-сошлось { left: auto; bottom: auto; top: -2px; width: max-content; }
@media (max-width: 64em) { .пз-сошлось { top: auto; bottom: 36px; right: -10px; } }
@media (max-width: 40em) { .пз-сверка { margin-bottom: 30px; } .пз-сошлось { bottom: 10px; right: 0; } }
/* переезд: одна плашка по центру раздела, как призыв в «Преимуществах» */
.пз-плашка { max-width: 1040px; margin-inline: auto; }
.пз-плашка p { font-size: clamp(1.25rem, 2.1vw, 1.625rem); }
.пз-плашка .кнопка { min-width: 0; white-space: nowrap; }
.пз-плашка p { max-width: 24em; font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
/* переезд: заголовок раздела — внутри плашки */
.пз-плашка .пз-текст .h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); text-align: left; }
.пз-плашка .пз-текст p { color: rgba(255, 255, 255, .85); font-weight: 500; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; letter-spacing: 0; max-width: 32em; }
#переезд .пз-плашка { margin-top: 0; }
.пз-текст { max-width: 560px; }
/* переезд — только плашка, без больших полей раздела сверху и снизу */
/* переезд — плашка без своей полосы фона: раздел белый, как соседи, отступы
между «Сайтом», плашкой и «Ценами» — небольшие и одинаковые */
#переезд { background: var(--лист); padding-block: 0; border: 0; }
#сайт { padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 0; }
#цены { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* переезд: чуть больше воздуха вокруг плашки, чтобы не слипалась с соседями */
#переезд { padding-block: clamp(2rem, 4vw, 3.5rem); }
/* ══ проход по HIG: отступы (24.09.2026) ══
Все отступы — по 8-pt сетке. Поля разделов 128 / 80 px (было 152 / 88):
легче листать, но воздух остаётся. Фоны снова строго чередуются:
… сайт (белый) · переезд (белый, плашка) · цены (голубой) · вопросы (белый) · заявка. */
.раздел { padding-block: clamp(5rem, 9vw, 8rem); }
#сайт { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
#цены { padding-top: clamp(5rem, 9vw, 8rem); border-top: 1px solid var(--линия-2); }
#переезд { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4rem, 7vw, 6rem); }
.заголовок-раздела { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* вопросы на белом — карточки светло-голубые */
.раздел-лист .вопросы details { background: var(--фон); }
/* цели нажатия ≥ 44 × 44: счётчик филиалов */
#счёт .филиалы .счётчик button::after { inset: -7px -6px; }
.ил-замок { display: inline-flex; align-items: center; gap: 8px; } .ил-замок svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* ── ролик первого экрана без рамки: прозрачный, элементы висят в воздухе ── */
.ролик-воздух { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.ролик-воздух video { object-fit: contain; }
/* Safari/iPhone: mp4 на цвете страницы — края растворяются в фоне */
.ролик-плоский video {
-webkit-mask: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-composite: source-in;
mask: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
mask-composite: intersect; }
.ролик-воздух .ролик-кнопка { background: rgba(15, 28, 46, .55); }
/* ссылка на обзорный ролик под кнопками первого экрана */
.ссылка-обзор { flex-basis: 100%; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content;
color: var(--акцент-текст); font-weight: 640; text-decoration: none; }
.ссылка-обзор svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ссылка-обзор svg path { fill: currentColor; }
.ссылка-обзор:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ── подвал по образцу vetmanager.ru (29.09.2026): знак и кнопка + три колонки ссылок ── */
.подвал { padding-block: 24px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 0.9375rem; color: var(--графит); }
.подвал .обёртка { display: grid; }
.подвал .подвал-сетка { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 36px 32px; align-items: start;
padding-block: 44px; border-top: 1px solid var(--линия); }
.подвал-первый { display: grid; gap: 14px; justify-items: start; }
.подвал-первый p { margin: 0; max-width: 30ch; line-height: 1.5; }
.подвал-первый .кнопка { min-height: 48px; padding: 0 22px; font-size: 1rem; border-radius: 12px; margin-top: 4px; }
.подвал .подвал-первый .кнопка { color: #fff; padding-block: 0; }
.подвал-колонка .подвал-заголовок { margin: 0 0 10px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--чернила); }
.подвал-колонка ul { list-style: none; margin: 0; padding: 0; display: grid; }
.подвал a, .подвал-ссылка { color: var(--графит); text-decoration: none; display: inline-block; padding-block: 7px; line-height: 1.35; }
.подвал-ссылка { font: inherit; line-height: 1.35; background: none; border: 0; padding-inline: 0; cursor: pointer; text-align: left; }
.подвал a:hover, .подвал-ссылка:hover { color: var(--чернила); text-decoration: underline; text-underline-offset: 3px; }
.подвал .подвал-все, .подвал .подвал-обзор { color: var(--акцент-текст); font-weight: 620; }
.подвал .знак { padding-block: 0; color: var(--чернила); }
.подвал-низ { padding-top: 20px; border-top: 1px solid var(--линия-2); font-size: 0.875rem; color: var(--тихий); }
@media (max-width: 60em) {
.подвал .подвал-сетка { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.подвал-первый { grid-column: 1 / -1; }
}
@media (max-width: 30em) {
.подвал .подвал-сетка { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 36px; }
}
/* старые правила подвала (flex у nav, inline-block у ссылок) новой сетке не нужны */
.подвал nav.подвал-колонка { display: block; margin: 0; }
.подвал a.знак { display: flex; }
.подвал a.кнопка { display: inline-flex; white-space: nowrap; }
.подвал .подвал-низ { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; align-items: center; }
.подвал-документы { display: flex; flex-wrap: wrap; gap: 0 20px; }
.подвал .подвал-низ a { color: var(--тихий); padding-block: 4px; }
.подвал a[aria-current="page"] { color: var(--чернила); font-weight: 620; }
/* ── форма регистрации клиники (29.09.2026): блок «Подключим» и всплывающее окно ── */
.форма input[type="email"] {
width: 100%; height: 50px; padding: 0 14px; border-radius: 12px;
border: 1.5px solid var(--линия); background: var(--фон); color: var(--чернила); font: inherit; font-size: 1rem;
}
.форма textarea { width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 12px; resize: vertical;
border: 1.5px solid var(--линия); background: var(--фон); color: var(--чернила); font: inherit; font-size: 1rem; line-height: 1.4; }
.форма textarea:focus { outline: none; border-color: var(--акцент); box-shadow: 0 0 0 3px color-mix(in srgb, var(--акцент) 22%, transparent); }
.форма label small { font-weight: 400; color: var(--тихий); margin-left: 4px; }
.форма .ряд { margin-bottom: 14px; }
.форма-заголовок { margin: 0 0 6px; }
.форма-подпись { margin: 0 0 18px; color: var(--графит); font-size: 0.9375rem; line-height: 1.45; }
.форма .кнопка { display: inline-flex; justify-content: center; gap: .4em; }
.ловушка { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.форма.отправлена > :not(.форма-готово):not(.ответ-формы) { display: none; }
.форма-готово { text-align: center; padding: 12px 0 4px; }
.форма-готово .лилла { position: static; display: block; width: 120px; margin: 0 auto 12px; }
.форма-готово .лилла img { width: 100%; height: auto; }
.форма-готово p { margin: 8px 0 0; color: var(--графит); }
.окно-заявка { width: min(560px, calc(100vw - 24px)); overflow: auto; }
.окно-заявка[open] { display: block; }
.окно-заявка .форма { box-shadow: none; border-radius: 0; padding-top: 28px; }
.окно-заявка .окно-закрыть { position: absolute; z-index: 1; }
.окно-заявка .форма-заголовок { padding-right: 48px; }
.форма .два-поля { gap: 0 12px; }
@media (max-width: 30em) { .форма .ряд { margin-bottom: 12px; } .форма input, .форма textarea { font-size: 16px; } }
/* компактная форма: всё видно без прокрутки окна (владелец 29.09.2026) */
.форма-заявки input[type="text"], .форма-заявки input[type="tel"], .форма-заявки input[type="email"] { height: 44px; border-radius: 10px; font-size: 0.9375rem; }
.форма-заявки label { margin-bottom: 5px; font-size: 0.8125rem; }
.форма-заявки .ряд { margin-bottom: 12px; }
.форма-заявки .форма-подпись { margin-bottom: 14px; font-size: 0.9062rem; }
.форма-заявки .согласие { margin: 2px 0 14px; font-size: 0.8125rem; }
.форма-заявки .кнопка { min-height: 48px; }
.окно-заявка .форма { padding: 24px 24px 20px; }
.окно-заявка .окно-закрыть { width: 36px; height: 36px; font-size: 1.25rem; top: 16px; right: 16px; }
@media (max-width: 30em) {
.форма-заявки .два-поля { grid-template-columns: 1fr 1fr; gap: 0 10px; }
.форма-заявки label small { display: none; }
.форма-заявки .ряд { margin-bottom: 10px; }
.форма-заявки input[type="text"], .форма-заявки input[type="tel"], .форма-заявки input[type="email"] { height: 42px; font-size: 16px; }
.окно-заявка .форма { padding: 20px 18px 16px; }
}
.заявка .форма-заявки { max-width: 560px; justify-self: end; width: 100%; }
/* согласие отдельно от политики (ч. 1 ст. 9 152-ФЗ с 01.09.2025, замечание юриста) */
.форма-заявки .согласие { margin-bottom: 6px; }
.форма-политика { margin: 0 0 14px 28px; font-size: 0.75rem; color: var(--тихий); }
.форма-политика a { color: inherit; }
/* ™: заявка на товарный знак № 2026808593 (® только после регистрации) */
.тм { font-size: .45em; font-weight: 600; vertical-align: super; margin-left: 1px; letter-spacing: 0; line-height: 0; }
/* знак ВетПлана (линия с собакой и кошкой) вместо плитки с лапой, 29.09.2026 */
.знак-картинка { display: block; width: auto; height: 40px; flex: none; }
.подвал .знак-картинка { height: 44px; }
/* полный логотип: «ВетПлан», под ним подпись разрядкой (как в фирменном логотипе) */
.знак-текст { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1; }
.знак-подпись { font-weight: 560; text-transform: uppercase; line-height: 1.3; color: var(--тихий); white-space: nowrap; }
/* название капсом, подпись под ним не шире названия (владелец 29.09.2026) */
.знак-слово { text-transform: uppercase; letter-spacing: .04em; }
.знак-подпись { font-size: 0.4375rem; letter-spacing: .035em; margin-top: 3px; }
.подвал .знак-подпись { font-size: 0.4375rem; }
/* P2 по итогам роя (29.09.2026): гарантия под модулями, ссылка на стационар */
.модули-гарантия { margin: 4px 0 6px; font-size: 0.75rem; line-height: 1.4; color: var(--тихий); }
.кабинет-стационар { margin-top: 10px; }
/* Digital: две группы — продвижение и сервисы для клиентов (владелец 30.09.2026) */
.без-crm-группа { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--а-300); }
.без-crm-состав .пакет-что + .без-crm-группа { margin-top: 26px; }
.без-crm-состав .пакет-что { gap: 10px 24px; }
/* Правки по аудиту 30.09.2026 */
.первый-под { margin: 14px 0 18px; max-width: 34em; font-size: 1.0625rem; line-height: 1.5; color: var(--графит); }
.расчёт-ввод .пункт-ряд .пункт small.платёж { grid-column: 2; margin-top: 0; font-weight: 500; }
.расчёт-ввод .пункт-ряд .пункт small.платёж:empty { display: none; }
.пз-текст .переезд-шаги { margin: 10px 0 0; padding-left: 1.2em; font-size: 0.9375rem; line-height: 1.5; }
.пз-текст .переезд-шаги li { margin: 2px 0; }
.пз-текст .переезд-сноска { margin-top: 8px; font-size: 0.8125rem; opacity: .8; }
.окно-заявка .ряд + .ряд, .окно-заявка .два-поля + .ряд { margin-top: 10px; }
.без-crm-сноска a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.пз-плашка .выгоды-первые.переезд-шаги { margin: 14px 0 0; gap: 8px; padding: 0; color: #fff; font-size: 1.0625rem; line-height: 1.4; }
.пз-плашка .выгоды-первые.переезд-шаги li { margin: 0; }
.заявка .вводный a { color: #fff; font-weight: 640; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.заявка .вводный a:hover { color: var(--тон-2); }
/* сумма платежа в карточке тарифа: две строки слева от «Что входит» (30.09.2026) */
.расчёт-ввод .пункт-ряд .пункт small.платёж { display: flex; flex-direction: column; gap: 1px; padding-right: 0; min-height: 0;
max-width: calc(100% - 104px); font-size: 0.75rem; line-height: 1.2; color: var(--графит); }
.расчёт-ввод .пункт-ряд .пункт small.платёж strong { font-size: 0.875rem; font-weight: 640; color: var(--чернила); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Раздел «Статьи» и кейсы продвижения (30.09.2026) */
.статья { max-width: 780px; padding-bottom: 56px; }
.статья .h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin: 6px 0 12px; }
.статья-источник { font-size: 0.875rem; color: var(--графит); margin: 0 0 28px; }
.статья-источник a, .статья-текст a { color: var(--акцент-текст, #3D68B9); text-decoration: underline; text-underline-offset: 2px; }
.статья-текст { font-size: 1.0625rem; line-height: 1.65; color: var(--чернила); }
.статья-текст h2 { font-size: 1.5rem; line-height: 1.25; margin: 40px 0 12px; }
.статья-текст h3 { font-size: 1.1875rem; margin: 28px 0 8px; }
.статья-текст p, .статья-текст ul, .статья-текст ol { margin: 0 0 14px; }
.статья-текст ul, .статья-текст ol { padding-left: 1.3em; }
.статья-текст li { margin: 4px 0; }
.статья-таблица { overflow-x: auto; margin: 18px 0 22px; border: 1px solid #D9E2EC; border-radius: 12px; }
.статья-таблица table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9375rem; line-height: 1.45; }
.статья-таблица th, .статья-таблица td { padding: 10px 12px; border-bottom: 1px solid #E6ECF2; text-align: left; vertical-align: top; }
.статья-таблица th { background: #F3F7FC; font-weight: 640; }
.статья-таблица tr:last-child td { border-bottom: 0; }
.статья-призыв { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-top: 40px; padding: 24px 28px; border-radius: 20px; background: #253656; color: #fff; }
.статья-призыв b { font-size: 1.25rem; }
.статья-призыв p { margin: 6px 0 0; opacity: .85; line-height: 1.5; }
.статья-призыв .кнопка { flex: none; }
@media (max-width: 40em) { .статья-призыв { flex-direction: column; align-items: flex-start; padding: 20px; } }
.статьи-рубрика { padding-block: 28px; }
.статьи-сетка, .кейсы-сетка { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.статьи-сетка a, .кейсы-сетка a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #E3EAF2; color: var(--чернила); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.статьи-сетка a:hover, .кейсы-сетка a:hover { box-shadow: 0 10px 28px rgba(37,54,86,.12); transform: translateY(-2px); }
.статьи-сетка b, .кейсы-сетка b { font-size: 1.0625rem; line-height: 1.35; }
.статьи-сетка span, .кейсы-сетка span { font-size: 0.875rem; line-height: 1.5; color: var(--графит); }
.кейсы-сетка small { margin-top: auto; font-size: 0.8125rem; font-weight: 600; color: var(--акцент-текст, #3D68B9); }
.заголовок-раздела .вводный a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.статьи-ещё { margin-top: 20px; text-align: center; font-weight: 600; }
.статьи-ещё a { color: var(--акцент-текст, #3D68B9); }
.ф-первый.статьи-первый { padding-bottom: 0; }
.ф-первый.статьи-первый .заголовок-раздела { margin-bottom: 8px; }
/* ── Лилла на лендинге: реплики в блоках и всплывающие плашки (30.09.2026) ──
Кадры из клипарта кабинета (frontend/clinic/public/lilla), те же эмоции,
что у плашек кабинета (useToastLilla). */
.лилла-реплика { display: flex; align-items: flex-end; gap: 10px; margin: 18px 0 0; max-width: 520px; }
.лилла-реплика-центр { margin: 22px auto 26px; justify-content: center; }
.лилла-реплика-лицо { flex: none; width: 76px; height: auto;
filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 8px rgba(28,25,23,.18)); }
.лилла-реплика-текст { position: relative; margin: 0 0 18px; padding: 12px 16px; border-radius: 18px 18px 18px 6px;
background: #fff; color: var(--чернила); font-size: 0.9375rem; line-height: 1.45; text-align: left;
box-shadow: 0 8px 24px rgba(37,54,86,.12); border: 1px solid #E3EAF2; }
.лилла-реплика-текст::before { content: ""; position: absolute; left: -7px; bottom: 10px; width: 14px; height: 14px; background: #fff;
border-left: 1px solid #E3EAF2; border-bottom: 1px solid #E3EAF2; transform: rotate(45deg); }
.лилла-реплика-текст a { color: var(--акцент-текст, #3D68B9); font-weight: 640; text-decoration: underline; text-underline-offset: 2px; }
.лилла-реплика-тёмная .лилла-реплика-текст { border-color: transparent; }
.лилла-реплика-тёмная .лилла-реплика-текст::before { border-color: transparent; }
@media (max-width: 40em) { .лилла-реплика-лицо { width: 60px; } .лилла-реплика-текст { font-size: 0.875rem; } }
.лилла-тосты { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: grid; gap: 10px; max-width: 380px; pointer-events: none; }
.лилла-тост { pointer-events: auto; display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 12px 12px 10px;
border-radius: 18px; background: #fff; border: 1px solid #E3EAF2; box-shadow: 0 16px 40px rgba(37,54,86,.18);
animation: лилла-тост-вход .35s cubic-bezier(.2,.9,.3,1.2) both; }
.лилла-тост.уходит { animation: лилла-тост-уход .25s ease-in both; }
.лилла-тост img { width: 64px; height: auto; }
.лилла-тост p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--чернила); }
.лилла-тост p b { display: block; font-size: 0.9375rem; margin-bottom: 2px; }
.лилла-тост .кнопка { margin-top: 8px; padding: 7px 14px; font-size: 0.8125rem; min-height: 0; }
.лилла-тост-закрыть { align-self: start; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #F3F6FA; color: #5B6B82; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.лилла-тост-закрыть:hover { background: #E6ECF3; }
@keyframes лилла-тост-вход { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes лилла-тост-уход { to { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .лилла-тост, .лилла-тост.уходит { animation: none; } }
@media (max-width: 40em) { .лилла-тосты { left: 16px; right: 16px; bottom: 16px; max-width: none; } }
.пз-плашка .лилла-реплика-текст { color: var(--чернила); font-size: 0.9375rem; line-height: 1.45; max-width: none; }
.пз-плашка .пз-текст p.лилла-реплика-текст { color: var(--чернила); font-size: 0.9375rem; line-height: 1.45; font-weight: 500; max-width: none; }
/* Лилла всегда в правом нижнем углу (01.10.2026): реплики появляются слева-сверху от неё */
.лилла-угол { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.лилла-угол .лилла-тосты { position: static; max-width: 340px; pointer-events: none; margin-bottom: 56px; }
.лилла-угол .лилла-тост { grid-template-columns: 1fr auto; border-radius: 18px 18px 6px 18px; position: relative; }
.лилла-угол .лилла-тост::after { content: ""; position: absolute; right: -7px; bottom: 14px; width: 14px; height: 14px; background: #fff;
border-right: 1px solid #E3EAF2; border-top: 1px solid #E3EAF2; transform: rotate(45deg); }
.лилла-кнопка { pointer-events: auto; flex: none; width: 92px; height: 92px; padding: 0; border: 0; background: none; cursor: pointer;
filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 12px rgba(28,25,23,.22));
transition: transform .2s; }
.лилла-кнопка:hover { transform: translateY(-3px) rotate(-3deg); }
.лилла-кнопка:focus-visible { outline: 3px solid var(--акцент); outline-offset: 4px; border-radius: 50%; }
.лилла-кнопка img { width: 100%; height: 100%; object-fit: contain; }
.лилла-угол.прыг .лилла-кнопка { animation: лилла-прыг .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes лилла-прыг { 0% { transform: translateY(0); } 40% { transform: translateY(-12px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .лилла-угол.прыг .лилла-кнопка, .лилла-кнопка { animation: none; transition: none; } }
@media (max-width: 40em) {
.лилла-угол { right: 12px; bottom: 12px; left: 12px; justify-content: flex-end; }
.лилла-кнопка { width: 64px; height: 64px; }
.лилла-угол .лилла-тосты { max-width: none; flex: 1; margin-bottom: 40px; }
}
/* плашка Лиллы: текст и кнопка столбиком (01.10.2026) */
.лилла-угол .лилла-тост { gap: 8px; padding: 14px 12px 14px 16px; width: 320px; max-width: 100%; box-sizing: border-box; }
.лилла-угол .лилла-тост p { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; font-size: 0.875rem; line-height: 1.45; max-width: none; }
.лилла-угол .лилла-тост p b { margin: 0; font-size: 0.9375rem; line-height: 1.3; }
.лилла-угол .лилла-тост p span { display: block; color: var(--графит); }
.лилла-угол .лилла-тост .кнопка { margin-top: 8px; padding: 8px 16px; font-size: 0.8125rem; min-height: 0; line-height: 1.2; }
@media (max-width: 40em) { .лилла-угол .лилла-тост { width: auto; } }
/* маленькое облачко «Нажмите на меня», пока Лилла молчит */
.лилла-зов { position: absolute; right: 70px; bottom: 78px; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: #fff;
border: 1px solid #E3EAF2; box-shadow: 0 6px 16px rgba(37,54,86,.14); font-size: 0.8125rem; font-weight: 600; color: var(--чернила);
white-space: nowrap; pointer-events: none; animation: лилла-зов 3s ease-in-out infinite; transition: opacity .2s; }
.лилла-угол.говорит .лилла-зов, .лилла-угол[hidden] .лилла-зов { opacity: 0; }
@keyframes лилла-зов { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .лилла-зов { animation: none; } }
@media (max-width: 40em) { .лилла-зов { right: 48px; bottom: 56px; font-size: 0.75rem; padding: 5px 10px; } }
/* обложки статей с Лиллой (01.10.2026) */
.статья-обложка { margin: 0 0 16px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(37,54,86,.12); }
.статья-обложка img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.статьи-сетка a img { display: block; height: auto; }
@media (max-width: 40em) { .лилла-угол.листает .лилла-зов { opacity: 0; } }
/* карточки статей: картинка на всю ширину без отрицательных полей (01.10.2026) */
.статьи-сетка a { padding: 0 0 20px; }
.статьи-сетка a > b, .статьи-сетка a > span { margin: 0 20px; }
.статьи-сетка a > b:first-child { margin-top: 20px; }
.статьи-сетка a img { width: 100%; max-width: 100%; margin: 0 0 8px; aspect-ratio: 16 / 9; object-fit: cover; }
/* оглавление статьи слева (01.10.2026) */
.статья-сетка { display: grid; grid-template-columns: 250px minmax(0, 780px); gap: 56px; align-items: start; }
.статья-сетка .статья { max-width: none; padding-bottom: 56px; }
.статья-оглавление { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; padding: 18px 16px; border-radius: 18px; background: #fff; border: 1px solid #E3EAF2; margin-top: 36px; }
.статья-оглавление-заголовок { margin: 0 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--графит); }
.оглавление-список { list-style: none; margin: 0; padding: 0; counter-reset: раздел; display: grid; gap: 2px; }
.оглавление-список li { counter-increment: раздел; }
.оглавление-список a { display: grid; grid-template-columns: 22px 1fr; padding: 6px 8px; border-radius: 10px; font-size: 0.8125rem; line-height: 1.35; color: var(--графит); text-decoration: none; }
.оглавление-список a::before { content: counter(раздел); font-weight: 700; color: #9AA8BC; }
.оглавление-список a:hover { background: #F3F7FC; color: var(--чернила); }
.оглавление-список a[aria-current] { background: #E8F1FC; color: var(--чернила); font-weight: 600; }
.оглавление-список a[aria-current]::before { color: var(--акцент-текст, #3D68B9); }
.оглавление-телефон { display: none; }
.статья-текст h2[id] { scroll-margin-top: 96px; }
@media (max-width: 64em) {
.статья-сетка { grid-template-columns: minmax(0, 1fr); }
.статья-оглавление { display: none; }
.оглавление-телефон { display: block; margin: 0 0 24px; border: 1px solid #E3EAF2; border-radius: 14px; background: #fff; }
.оглавление-телефон summary { padding: 12px 16px; font-weight: 640; cursor: pointer; }
.оглавление-телефон .оглавление-список { padding: 0 8px 10px; }
}
/* раздел «Статьи»: рубрики слева (01.10.2026) */
.статьи-раскладка { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 64px; }
.статьи-навигация { margin-top: 12px; }
.рубрики-список { counter-reset: none; }
.рубрики-список a { grid-template-columns: 1fr auto; gap: 8px; font-size: 0.875rem; }
.рубрики-список a::before { content: none; }
.рубрики-список small { font-weight: 700; color: #9AA8BC; }
.статьи-шапка { padding: 8px 0 12px; }
.статьи-шапка .h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 12px; }
.статьи-шапка .вводный a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.статьи-содержимое .статьи-рубрика { padding: 28px 0 8px; scroll-margin-top: 90px; }
.статьи-содержимое .статьи-рубрика .h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.рубрики-телефон { display: none; }
@media (max-width: 64em) {
.статьи-раскладка { grid-template-columns: minmax(0, 1fr); gap: 0; }
.статьи-навигация { display: none; }
.рубрики-телефон { overflow-x: auto; margin-top: 18px; }
.рубрики-телефон a { flex: none; background: #fff; border: 1px solid #E3EAF2; font-weight: 600; color: var(--чернила); text-decoration: none; }
}
.статьи-содержимое .статьи-сетка, .статьи-содержимое .кейсы-сетка { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 40em) { .статьи-содержимое .статьи-сетка, .статьи-содержимое .кейсы-сетка { grid-template-columns: minmax(0, 1fr); } }
/* дерево «рубрики и статьи» (01.10.2026) */
.дерево { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.дерево details > summary { list-style: none; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px; padding: 6px 8px 6px 4px; border-radius: 10px; cursor: pointer; }
.дерево details > summary::-webkit-details-marker { display: none; }
.дерево details > summary::before { content: ""; width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid #9AA8BC; border-bottom: 2px solid #9AA8BC; transform: rotate(-45deg); transition: transform .15s; }
.дерево details[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.дерево summary a, .дерево-лист > a { font-size: 0.875rem; font-weight: 640; color: var(--чернила); text-decoration: none; }
.дерево summary:hover { background: #F3F7FC; }
.дерево summary a.текущая, .дерево-лист > a.текущая { color: var(--акцент-текст, #3D68B9); }
.дерево small { font-size: 0.75rem; font-weight: 700; color: #9AA8BC; }
.дерево-лист { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 6px 8px 6px 26px; border-radius: 10px; }
.дерево details ol { list-style: none; margin: 2px 0 6px 13px; padding: 0 0 0 10px; border-left: 1px solid #E3EAF2; display: grid; gap: 1px; }
.дерево details ol a { display: block; padding: 5px 8px; border-radius: 8px; font-size: 0.8125rem; line-height: 1.35; color: var(--графит); text-decoration: none; }
.дерево details ol a:hover { background: #F3F7FC; color: var(--чернила); }
.дерево details ol a[aria-current] { background: #E8F1FC; color: var(--чернила); font-weight: 600; }
.статья-оглавление .дерево-блок { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E3EAF2; }
.статьи-навигация { max-height: calc(100vh - 120px); overflow: auto; }
/* Полосы прокрутки в стиле ВетПлана (01.10.2026): тонкие, скруглённые,
бегунок серо-голубой, при наведении зелёный акцент. Chromium (Яндекс
Браузер, Chrome, Edge) и Safari берут ::-webkit-scrollbar; Firefox -
scrollbar-color. Стандартное свойство для Chromium не ставим: оно
отключает ::-webkit-scrollbar, и скругления пропадают. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #EEF3F9; }
::-webkit-scrollbar-thumb { background: #B7C6DA; border-radius: 999px; border: 3px solid #EEF3F9; min-height: 48px; }
::-webkit-scrollbar-thumb:hover { background: var(--а-600); }
::-webkit-scrollbar-thumb:active { background: var(--а-700); }
::-webkit-scrollbar-corner { background: transparent; }
/* внутренние области: оглавление, таблицы, окна - полоса тоньше, без подложки */
.статья-оглавление::-webkit-scrollbar, .статья-таблица::-webkit-scrollbar, .окно-тело::-webkit-scrollbar,
.рубрики-телефон::-webkit-scrollbar, .сравнение-обёртка::-webkit-scrollbar, dialog::-webkit-scrollbar { width: 8px; height: 8px; }
.статья-оглавление::-webkit-scrollbar-track, .статья-таблица::-webkit-scrollbar-track, .окно-тело::-webkit-scrollbar-track,
.рубрики-телефон::-webkit-scrollbar-track, .сравнение-обёртка::-webkit-scrollbar-track, dialog::-webkit-scrollbar-track { background: transparent; }
.статья-оглавление::-webkit-scrollbar-thumb, .статья-таблица::-webkit-scrollbar-thumb, .окно-тело::-webkit-scrollbar-thumb,
.рубрики-телефон::-webkit-scrollbar-thumb, .сравнение-обёртка::-webkit-scrollbar-thumb, dialog::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: padding-box; background-color: #C9D5E5; }
.статья-оглавление::-webkit-scrollbar-thumb:hover, .статья-таблица::-webkit-scrollbar-thumb:hover, .окно-тело::-webkit-scrollbar-thumb:hover,
.сравнение-обёртка::-webkit-scrollbar-thumb:hover, dialog::-webkit-scrollbar-thumb:hover { background-color: var(--а-600); }
@supports (-moz-appearance: none) {
html { scrollbar-color: #B7C6DA #EEF3F9; }
* { scrollbar-width: thin; scrollbar-color: #C9D5E5 transparent; }
html { scrollbar-width: auto; }
}
/* полоса в скруглённом блоке навигации не выходит на углы: дорожка с отступами сверху и снизу */
.статья-оглавление::-webkit-scrollbar-track { margin: 18px 0; }
.статья-оглавление::-webkit-scrollbar { width: 6px; }
.статья-оглавление::-webkit-scrollbar-thumb { border: 0; border-radius: 999px; background-color: #D3DDEA; }
.статья-оглавление { scrollbar-gutter: stable; padding-right: 10px; }
/* «Читать» в углу карточки статьи: появляется при наведении (01.10.2026) */
.статьи-сетка a { position: relative; }
.статьи-сетка .читать { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px;
border-radius: 999px; background: var(--кнопка); color: #fff; font-style: normal; font-size: 0.8125rem; font-weight: 640;
opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; box-shadow: 0 6px 16px rgba(15,122,90,.28); }
.статьи-сетка .читать svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(255,255,255,.22);
fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.статьи-сетка a:hover .читать, .статьи-сетка a:focus-visible .читать { opacity: 1; transform: none; }
@media (hover: none) { .статьи-сетка .читать { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .статьи-сетка .читать { transition: none; } }
.дерево details ol a.текущая { background: #E8F1FC; color: var(--чернила); font-weight: 600; }
.статья-оглавление, .статьи-навигация { position: sticky; }
/* «Читать» сидит на нижней границе карточки (01.10.2026): карточка не обрезает
содержимое, скругление сверху держит сама картинка */
.статьи-сетка a { overflow: visible; padding-bottom: 32px; }
.статьи-сетка a img { border-radius: 17px 17px 0 0; }
.статьи-сетка .читать { bottom: -17px; right: 20px; }
.статьи-сетка, .статьи-содержимое .статьи-сетка { row-gap: 40px; }
.кейс-источник { margin-top: 28px; padding: 16px 20px; border-radius: 14px; background: #F3F7FC; border: 1px solid #E3EAF2; font-size: 0.9375rem; }
.кейс-источник p { margin: 0; }
.кейс-источник a { color: var(--акцент-текст, #3D68B9); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* форма в окне: два поля в строке стоят ровно, отступ только между строками */
.окно-заявка .два-поля .ряд + .ряд { margin-top: 0; }
.окно-заявка .два-поля { align-items: end; }
/* карточки кейсов в том же виде, что статьи */
.кейсы-сетка.статьи-сетка a { padding: 0 0 32px; }
.кейсы-сетка.статьи-сетка small { display: none; }
/* статья: заголовок на уровне верха навигации слева, рубрика только в хлебных крошках */
.статья-сетка .статья > .ф-надпись { display: none; }
.статья-сетка .статья-оглавление { margin-top: 0; }
.статья-сетка .статья .h1 { margin-top: 0; }
.статья-сетка { margin-top: 8px; }
.статья-сетка { justify-content: start; }
/* «Ещё по теме» - карусель (01.10.2026) */
.карусель-шапка { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.карусель-кнопки { display: flex; gap: 10px; }
.карусель-кнопки button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #E3EAF2; background: #fff; color: var(--чернила); cursor: pointer; box-shadow: 0 6px 16px rgba(37,54,86,.1); transition: background .15s, color .15s, opacity .15s; }
.карусель-кнопки button:hover:not(:disabled) { background: var(--акцент); color: #fff; border-color: var(--акцент); }
.карусель-кнопки button:disabled { opacity: .35; cursor: default; box-shadow: none; }
.карусель-кнопки svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.статьи-сетка.карусель { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 40px) / 3);
gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 34px; margin: 12px -2px 0; overscroll-behavior-x: contain; }
.статьи-сетка.карусель > li { scroll-snap-align: start; }
.статьи-сетка.карусель::-webkit-scrollbar { height: 8px; }
.статьи-сетка.карусель::-webkit-scrollbar-track { background: #EEF3F9; border-radius: 999px; margin: 0 2px; }
.статьи-сетка.карусель::-webkit-scrollbar-thumb { background: #C9D5E5; border: 0; border-radius: 999px; }
.статьи-сетка.карусель::-webkit-scrollbar-thumb:hover { background: var(--а-600); }
@media (max-width: 64em) { .статьи-сетка.карусель { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 40em) { .статьи-сетка.карусель { grid-auto-columns: 85%; } .карусель-кнопки button { width: 40px; height: 40px; } }
/* стрелки карусели по бокам ленты, по центру картинок (01.10.2026) */
.карусель-рамка { position: relative; --центр: 110px; }
.карусель-рамка .карусель-кнопки { display: contents; }
.карусель-рамка .карусель-кнопки[hidden] { display: none; }
.карусель-рамка button { position: absolute; z-index: 3; top: var(--центр); display: grid; place-items: center;
border-radius: 50%; border: 0; background: rgba(255,255,255,.96); color: var(--акцент); cursor: pointer;
box-shadow: 0 10px 28px rgba(37,54,86,.18), 0 0 0 1px rgba(227,234,242,.9); backdrop-filter: blur(6px);
transition: transform .2s, background .2s, color .2s, opacity .2s, box-shadow .2s; }
.карусель-рамка button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.карусель-рамка button:hover:not(:disabled) { background: var(--акцент); color: #fff; transform: scale(1.06); box-shadow: 0 12px 30px rgba(61,104,185,.32); }
.карусель-рамка .карусель-назад:hover:not(:disabled) svg { transform: translateX(-2px); }
.карусель-рамка .карусель-вперёд:hover:not(:disabled) svg { transform: translateX(2px); }
.карусель-рамка button:disabled { opacity: 0; pointer-events: none; }
.карусель-рамка button:focus-visible { outline: 3px solid var(--акцент); outline-offset: 3px; }
.карусель-рамка .статьи-сетка.карусель { margin-top: 20px; }
@media (max-width: 80em) { .карусель-рамка .карусель-назад { left: -12px; } .карусель-рамка .карусель-вперёд { right: -12px; } }
@media (max-width: 64em) { .карусель-рамка { --центр: 135px; } }
@media (max-width: 40em) { .карусель-рамка { --центр: 100px; } }
@media (prefers-reduced-motion: reduce) { .карусель-рамка button, .карусель-рамка button svg { transition: none; } }
/* стрелки карусели снаружи карточек, в полях страницы (01.10.2026) */
@media (max-width: 82em) { .карусель-рамка .карусель-назад { left: -68px; } .карусель-рамка .карусель-вперёд { right: -68px; } .карусель-рамка button { width: 52px; height: 52px; margin-top: -26px; } }
@media (max-width: 76em) { .карусель-рамка .карусель-назад { left: -12px; } .карусель-рамка .карусель-вперёд { right: -12px; } }
/* стрелки в собственных полях ленты, по середине карточки (01.10.2026): лента
сужается на ширину стрелок, поэтому они не заходят на карточки ни при какой ширине */
.карусель-рамка { padding: 0 72px; }
.карусель-рамка button, .карусель-рамка button:hover:not(:disabled) { top: calc(50% - 7px); }
.карусель-рамка .карусель-назад, .карусель-рамка .карусель-вперёд { left: auto; right: auto; }
.карусель-рамка .карусель-назад { left: 4px; }
.карусель-рамка .карусель-вперёд { right: 4px; }
.карусель-рамка button { width: 52px; height: 52px; margin-top: -26px; }
@media (max-width: 40em) {
.карусель-рамка { padding: 0; }
}
.ф-ещё .обёртка > .h2 { padding-left: 72px; }
@media (max-width: 40em) { .ф-ещё .обёртка > .h2 { padding-left: 0; } }
@media (max-width: 40em) {
.карусель-рамка button { top: -30px; width: 40px; height: 40px; margin-top: -20px; }
.карусель-рамка .карусель-назад { left: auto; right: 48px; }
.карусель-рамка .карусель-вперёд { right: 0; }
.карусель-рамка button:disabled { opacity: .35; pointer-events: none; }
}
/* бургер и выпадающее меню шапки до 60em (01.10.2026) */
.бургер { display: none; }
.меню .меню-доп { display: none; }
@media (max-width: 60em) {
.бургер { display: inline-grid; place-content: center; gap: 5px; flex: none; width: 44px; height: 44px; margin-left: 4px; padding: 0;
border: 1px solid #E3EAF2; border-radius: 12px; background: #fff; cursor: pointer; }
.бургер span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--чернила); transition: transform .2s, opacity .2s; }
.меню-открыто .бургер span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.меню-открыто .бургер span:nth-child(2) { opacity: 0; }
.меню-открыто .бургер span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.шапка .меню { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 70; flex-direction: column; gap: 2px; margin: 0;
padding: 10px; border-radius: 18px; background: #fff; border: 1px solid #E3EAF2; box-shadow: 0 18px 40px rgba(37,54,86,.18); }
.шапка.меню-открыто .меню { display: flex; animation: меню-вход .18s ease-out; }
.шапка .меню a, .шапка .меню .меню-доп { display: flex; justify-content: flex-start; padding: 10px 14px; border-radius: 12px; font-size: 1rem; font-weight: 600; color: var(--чернила); min-height: 44px; }
.шапка .меню a:hover, .шапка .меню a[aria-current] { background: var(--а-50); color: var(--акцент-текст); }
.шапка .меню .меню-доп:first-of-type { border-top: 0; }
.шапка .обёртка { position: relative; }
}
@keyframes меню-вход { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .шапка.меню-открыто .меню, .бургер span { animation: none; transition: none; } }
.меню .меню-кнопка { display: none; }
@media (max-width: 30em) {
.шапка .обёртка > .кнопка-главная { display: none; }
.бургер { margin-left: auto; }
.шапка .меню .меню-кнопка { display: flex; justify-content: center; margin-top: 8px; color: #fff; }
.шапка .меню .меню-кнопка:hover { color: #fff; background: var(--кнопка-наведение); }
}
.шапка .меню .меню-кнопка { margin-left: 0; width: 100%; box-sizing: border-box; border-radius: 12px; }
/* рубрики на телефоне: сетка кнопок в 2 колонки, без прокрутки вбок (01.10.2026) */
@media (max-width: 64em) {
.рубрики-телефон { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
.рубрики-телефон a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 14px;
white-space: normal; line-height: 1.25; font-size: 0.875rem; box-shadow: 0 4px 12px rgba(37,54,86,.06); }
.рубрики-телефон a small { flex: none; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #E8F1FC; color: var(--акцент-текст, #3D68B9); font-size: 0.75rem; font-weight: 700; text-align: center; }
.рубрики-телефон a:active { background: #F3F7FC; }
.рубрики-телефон a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 40.01em) and (max-width: 64em) { .рубрики-телефон { grid-template-columns: repeat(3, minmax(0, 1fr)); } .рубрики-телефон a:last-child:nth-child(odd) { grid-column: auto; } }
/* телефон: подзаголовок логотипа снова виден (кнопка ушла в меню), шапка плотная, текст под ней не просвечивает */
@media (max-width: 30em) {
.шапка .знак-подпись { display: block; font-size: 0.4375rem; letter-spacing: .04em; color: #5B6B82; }
.шапка { background: color-mix(in srgb, var(--фон) 97%, transparent); }
}
/* уведомление о cookie (01.10.2026) */
.куки { position: fixed; left: 20px; bottom: 20px; z-index: 65; display: flex; align-items: center; gap: 14px; max-width: 460px; padding: 12px 12px 12px 16px;
border-radius: 16px; background: #fff; border: 1px solid #E3EAF2; box-shadow: 0 12px 32px rgba(37,54,86,.16); }
.куки p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--графит); }
.куки a { color: var(--акцент-текст, #3D68B9); text-decoration: underline; text-underline-offset: 2px; }
.куки .кнопка { flex: none; min-height: 0; padding: 8px 16px; font-size: 0.8125rem; }
@media (max-width: 40em) {
.куки { left: 12px; right: 12px; bottom: 12px; max-width: none; }
.есть-куки .лилла-угол { bottom: 96px; }
}
/* Роли цветов (аудит 01.10.2026): зелёный (--кнопка) только у действий -
кнопки заявки, «Читать», «Понятно»; голубой акцент (--а-*) у навигации,
ссылок, выделения, полос прокрутки и стрелок. Третьего цвета не вводить. */
/* Аудит доступности 01.10.2026 */
/* ссылка «Перейти к содержанию»: видна только при переходе с клавиатуры */
.к-содержанию { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--меню, #253656); color: #fff; font-weight: 640; text-decoration: none; transition: top .15s; }
.к-содержанию:focus { top: 12px; outline: 3px solid var(--а-300); outline-offset: 2px; }
/* плавная прокрутка к якорям, кроме «уменьшить движение» */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:target { scroll-margin-top: 84px; }
/* серые цифры навигации: контраст 4,5+ на белом */
.оглавление-список a::before, .дерево small, .рубрики-список small { color: #5F6F86; }
/* цели для нажатия не меньше 24 px */
.дерево summary a, .дерево-лист > a { display: inline-block; padding-block: 3px; }
.согласие { min-height: 28px; align-items: center; }
.согласие input[type="checkbox"] { width: 20px; height: 20px; }
/* подписи разделов навигации - обычным регистром вместо заглавных */
.статья-оглавление-заголовок { text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 700; color: var(--чернила); }
.без-crm-группа { text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
/* страница 404 */
.нет-страницы { text-align: center; padding-block: 48px 72px; }
.нет-страницы-лилла { width: 160px; height: auto; margin: 0 auto 12px; display: block; filter: drop-shadow(0 8px 12px rgba(28,25,23,.18)); }
.нет-страницы-код { margin: 0; font-weight: 700; color: var(--акцент-текст); }
.нет-страницы .h1 { margin: 6px 0 12px; }
.нет-страницы .вводный { margin-inline: auto; }
.нет-страницы-кнопки { justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.нет-страницы-ссылки { list-style: none; padding: 0; margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 640px; }
.нет-страницы-ссылки a { color: var(--акцент-текст); font-weight: 600; text-decoration: none; padding: 4px 0; display: inline-block; }
.нет-страницы-ссылки a:hover { text-decoration: underline; }
/* калькулятор: предел филиалов и вторая ссылка (02.10.2026) */
.филиалы-предел { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--акцент-текст); }
.филиалы-предел:empty { display: none; }
.счётчик button:disabled { opacity: .35; cursor: not-allowed; }
.к-демо { display: block; margin-top: 12px; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--акцент-текст); text-decoration: underline; text-underline-offset: 3px; }
.форма.отправлена .ответ-формы { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.форма-готово h3:focus { outline: none; }
.форма-пока { margin-top: 10px; }
.форма-пока a { font-weight: 600; color: var(--акцент-текст); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 60em) { .шапка .обёртка > .кнопка-главная { order: 4; } .шапка .обёртка > .бургер { order: 5; } }
/* дерево: название рубрики - текст в summary (без вложенной ссылки) */
.дерево .дерево-рубрика { font-size: 0.875rem; font-weight: 640; color: var(--чернила); padding-block: 3px; }
.дерево .дерево-рубрика.текущая { color: var(--акцент-текст); }
/* мелочи доступности (аудит 02.10.2026) */
.пр-ответ > small { color: #fff; }
.форма input:focus-visible, .форма textarea:focus-visible, .форма select:focus-visible { outline: 3px solid var(--а-300); outline-offset: 1px; }
@media (max-width: 40em) { .кабинет-поле.прокрутка { overflow: hidden; } }
/* перелинковка: ссылки на страницы сайта в статьях и «Статьи по теме» */
.статья-текст a.ссылка-сайта { color: var(--акцент-текст); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--а-300); text-underline-offset: 3px; }
.ф-статьи .статьи-сетка { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* филиалы: подпись слева сжимается, счётчик всегда справа в той же строке (02.10.2026) */
#счёт .филиалы { flex-wrap: nowrap; align-items: center; }
#счёт .филиалы > span { flex: 1 1 auto; min-width: 0; }
#счёт .филиалы > .счётчик { flex: none; margin-left: auto; }
#счёт .филиалы > span small.филиалы-предел { display: block; margin: 4px 0 0; line-height: 1.35; }
/* стрелка в кнопках с текстом в span не сжимается (02.10.2026) */
.кнопка > .кнопка-стрелка { flex: none; }
#к-подключить { gap: 10px; }
#к-подключить > span { min-width: 0; }
#к-подключить { white-space: normal; height: auto; min-height: 52px; padding-block: 10px; text-align: center; line-height: 1.25; }
/* кнопка калькулятора: «Подключить» и тариф второй строкой, на всю ширину колонки */
#к-подключить { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px 10px 24px; text-align: left; white-space: normal; }
#к-подключить .к-подключить-текст { display: flex; flex-direction: column; font-size: 1rem; line-height: 1.2; }
#к-подключить .к-подключить-текст small { font-size: 0.8125rem; font-weight: 500; opacity: .85; }
#к-подключить > .кнопка-стрелка { margin-right: 0; }
/* название тарифа — одной строкой (02.10.2026): на компьютере колонка суммы
272 px, под подпись оставалось ~155 px, и «тариф «Крупная клиника»»
переносилось, кнопка вырастала с 57 до 72 px. Поджаты отступы слева и у
стрелки — самое длинное название помещается с запасом 10 px. */
#к-подключить { padding: 10px 12px 10px 18px; gap: 10px; }
#к-подключить .к-подключить-текст small { white-space: nowrap; }