:root {
    --c-bg: #FFFFFF;
    --c-bg-soft: #F6F8F9;
    --c-dark: #111416;
    --c-text: #111418;
    --c-text-muted: #687078;
    --c-border: #E5E9EC;
    --c-border-strong: #D6DCE1;
    --c-blue-soft: #E7F5FA;
    --c-blue: #70BDD2;
    --c-blue-ink: #2C6E82;
    --c-green-soft: #E5F5EE;
    --c-green: #68B997;
    --c-green-ink: #2F6F55;
    --c-amber-soft: #FDF3E3;
    --c-amber-ink: #8A6420;
    --c-dark-text: #F4F6F7;
    --c-dark-muted: #A3ACB3;
    --c-dark-border: #2A3034;
    --c-dark-surface: #191D20;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-30: 120px;
    --r-sm: 9px;
    --r-md: 11px;
    --r-lg: 15px;
    --r-xl: 19px;
    --sh-card: 0 8px 30px rgba(17, 20, 24, .035);
    --sh-lift: 0 12px 34px rgba(17, 20, 24, .06);
    --t-h1: clamp(33px, calc(33px + 2.2vw), 64px);
    --t-h2: clamp(27px, calc(27px + 2.2vw), 46px);
    --t-h3: clamp(22px, calc(22px + 2.2vw), 30px);
    --t-card: clamp(19px, calc(19px + 2.2vw), 21px);
    --t-lead: clamp(17px, calc(17px + 2.2vw), 19px);
    --t-body: clamp(16px, calc(16px + 2.2vw), 17px);
    --t-small: clamp(14px, calc(14px + 2.2vw), 15px);
    --t-tiny: clamp(13px, calc(13px + 2.2vw), 13px);
    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --container: 1280px;
    --container-narrow: 820px;
}
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Якорь не должен уезжать под липкую шапку. */
    scroll-padding-top: 84px;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    /* clip, а не hidden: hidden на body отменяет position: sticky у шапки. */
    overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: var(--t-h1); letter-spacing: -0.033em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-border-strong); }
a:not([class]):hover { text-decoration-color: currentColor; }

/* Видимый фокус обязателен: по сайту ходят и клавиатурой. */
:focus-visible {
    outline: 2px solid var(--c-text);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--c-blue-soft); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--s-5); }
.narrow { max-width: var(--container-narrow); }

.muted { color: var(--c-text-muted); }
.lead { font-size: var(--t-lead); color: var(--c-text-muted); line-height: 1.55; }
.small { font-size: var(--t-small); }
.tiny { font-size: var(--t-tiny); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Крайняя защита от горизонтального вылета: min-width у flex- и
   grid-элементов по умолчанию auto, то есть «не уже содержимого», и
   одна длинная строка раздвигает страницу целиком. Ширину экрана
   не имеет права превышать ничто, кроме явных .scroll-x. */
.hdr__in > *, .row > *, .card, .msg, .panel, .rows__r, .flow__i {
    min-width: 0;
}
.msg__body, .rows__r span, .faq__q, .card p, .card h3 {
    overflow-wrap: anywhere;
}

/* Только для скринридера — «пропустить к содержимому» и подписи. */
.sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
    position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto;
    clip: auto; margin: 0; padding: 12px 18px; background: var(--c-text);
    color: #fff; border-radius: var(--r-md);
}
.sec { padding-block: clamp(56px, 8vw, 112px); }
.sec--soft { background: var(--c-bg-soft); }
.sec--tight { padding-block: clamp(44px, 6vw, 80px); }
.sec--dark { background: var(--c-dark); color: var(--c-dark-text); }
.sec--dark .muted, .sec--dark .lead { color: var(--c-dark-muted); }

.head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.head--center { margin-inline: auto; text-align: center; }
.head p { margin-top: var(--s-4); }

.eyebrow {
    display: inline-block; margin-bottom: var(--s-4);
    font-size: var(--t-tiny); font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--c-text-muted);
}

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--text { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }

.stack { display: grid; gap: var(--s-4); }
.stack--lg { gap: var(--s-6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Единственное, чему можно быть шире экрана, — и то в своём контейнере. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* --- Кнопки --------------------------------------------------------------
   Высота 50px, радиус из шкалы, без свечения и без scale на hover:
   прыгающая под пальцем кнопка на телефоне промахивается. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 20px;
    border-radius: var(--r-md); border: 1px solid transparent;
    font: inherit; font-size: var(--t-body); font-weight: 550; line-height: 1;
    cursor: pointer; text-align: center;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary { background: var(--c-dark); color: #fff; }
.btn--primary:hover { background: #000; }
.btn--secondary { background: var(--c-bg); color: var(--c-text); border-color: var(--c-border-strong); }
.btn--secondary:hover { background: var(--c-bg-soft); border-color: var(--c-text-muted); }
.btn--ghost { background: transparent; color: var(--c-text); padding-inline: 14px; min-height: 44px; }
.btn--ghost:hover { background: var(--c-bg-soft); }
.btn--light { background: #fff; color: var(--c-text); }
.btn--light:hover { background: var(--c-bg-soft); }
.btn--wide { width: 100%; }
.btn .ic { width: 18px; height: 18px; }

/* --- Карточки ------------------------------------------------------------
   Белая, серая рамка, чёрный текст. Цвет приходит только иконкой. */
.card {
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.card--soft { background: var(--c-bg-soft); border-color: transparent; }
.card--link:hover { border-color: var(--c-border-strong); transform: translateY(-2px); box-shadow: var(--sh-card); }
.card h3 { font-size: var(--t-card); margin-bottom: var(--s-3); }
.card p { color: var(--c-text-muted); }
.card__more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-5);
    font-size: var(--t-small); font-weight: 550; color: var(--c-text);
}
.card--link:hover .card__more .ic { transform: translateX(3px); }
.card__more .ic { width: 15px; height: 15px; transition: transform .16s ease; }

/* Контейнер иконки. Единственное место, где живёт акцентный цвет. */
.ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: var(--s-5);
    border-radius: var(--r-sm);
}
.ico .ic { width: 21px; height: 21px; }
.ico--blue { background: var(--c-blue-soft); color: var(--c-blue-ink); }
.ico--green { background: var(--c-green-soft); color: var(--c-green-ink); }
.ico--neutral { background: var(--c-bg-soft); color: var(--c-text); }

.ic { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }

/* --- Список фактов -------------------------------------------------------- */
.facts { display: grid; gap: var(--s-4); }
.fact { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.fact .ic { width: 20px; height: 20px; margin-top: 3px; color: var(--c-green-ink); }
.fact b { font-weight: 600; }
.fact span { color: var(--c-text-muted); }

/* --- Шаги ----------------------------------------------------------------- */
.step__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-bottom: var(--s-5);
    border-radius: var(--r-sm); background: var(--c-dark); color: #fff;
    font-size: var(--t-small); font-weight: 600;
}

/* --- Бейджи --------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    font-size: var(--t-tiny); font-weight: 550; line-height: 1.3;
}
.badge--blue { background: var(--c-blue-soft); color: var(--c-blue-ink); }
.badge--green { background: var(--c-green-soft); color: var(--c-green-ink); }
.badge--amber { background: var(--c-amber-soft); color: var(--c-amber-ink); }
.badge--quiet { background: var(--c-bg-soft); color: var(--c-text-muted); }

/* Требование к функции — не сноска и не tooltip: обычный читаемый текст. */
.needs {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: 16px 18px; border-radius: var(--r-md);
    background: var(--c-amber-soft); color: var(--c-amber-ink);
    font-size: var(--t-small); line-height: 1.5;
}
.needs .ic { width: 19px; height: 19px; margin-top: 1px; }
.hdr {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--c-border);
}
.hdr__in { display: flex; align-items: center; gap: var(--s-6); min-height: 66px; }
.hdr__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.02em; }
.hdr__brand .mark { width: 28px; height: 28px; border-radius: 8px; }
.hdr__nav { display: flex; gap: var(--s-2); margin-inline-start: auto; }
.hdr__nav a {
    padding: 9px 12px; border-radius: 9px;
    font-size: var(--t-small); color: var(--c-text-muted); font-weight: 500;
}
.hdr__nav a:hover { color: var(--c-text); background: var(--c-bg-soft); }
.hdr__cta { display: flex; gap: var(--s-2); align-items: center; }
.hdr__cta .btn { min-height: 42px; font-size: var(--t-small); padding-inline: 16px; }
.hdr__burger { display: none; }

/* Меню-drawer: details/summary, чтобы работало без JS. */
.drawer { display: none; }
.drawer > summary { list-style: none; cursor: pointer; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-md);
    border: 1px solid var(--c-border-strong); background: #fff;
}
.drawer__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--c-border);
    padding: var(--s-4) var(--s-5) var(--s-6);
    display: grid; gap: var(--s-2);
    box-shadow: var(--sh-card);
}
.drawer__panel a { padding: 13px 4px; font-size: var(--t-body); border-bottom: 1px solid var(--c-border); }
.drawer__panel a:last-of-type { border-bottom: 0; }
.drawer__panel .btn { margin-top: var(--s-3); }
.hero { padding-top: clamp(40px, 5vw, 76px); padding-bottom: clamp(52px, 6vw, 96px); }
.hero__grid {
    display: grid; gap: clamp(36px, 4.5vw, 60px); align-items: center;
    /* Почти поровну. Ширина текстовой колонки здесь не вкусовая: в неё
       обязаны поместиться ДВЕ кнопки в один ряд — перенесённая вторая
       читается как второстепенная, а это ровно тот путь, по которому
       смотрят демонстрацию. И H1 при 64px должен лечь в три строки, а не
       в четыре: четвёртая съедает первый экран на ноутбуке. */
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
}
.hero h1 { max-width: 17ch; }
.hero__sub { margin-top: var(--s-6); max-width: 46ch; }
.hero__cta { margin-top: var(--s-8); gap: var(--s-3); }
.hero__note { margin-top: var(--s-5); color: var(--c-text-muted); font-size: var(--t-small); }
/* --- Mockup телефона -------------------------------------------------------
   Не картинка: то же самое собирается разметкой, поэтому читается
   скринридером, масштабируется и не весит ничего. Место под настоящий
   GIF оставлено — см. `mockups.py`. */
.tg {
    background: var(--c-bg-soft); border: 1px solid var(--c-border);
    border-radius: var(--r-xl); padding: clamp(14px, 1.6vw, 20px);
}
.tg__bar { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; }
.tg__ava {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    background: var(--c-dark); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}
.tg__who { font-size: var(--t-small); font-weight: 600; line-height: 1.25; }
.tg__who span { display: block; font-weight: 400; color: var(--c-text-muted); font-size: var(--t-tiny); }
.tg__feed { display: grid; gap: 10px; }

.msg {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: 14px; border-top-left-radius: 5px;
    padding: 13px 15px; box-shadow: var(--sh-card);
}
.msg__top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.msg__top .ic { width: 16px; height: 16px; }
.msg__title { font-size: var(--t-small); font-weight: 600; }
.msg__time { margin-inline-start: auto; font-size: 11px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.msg__body { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.45; }
.msg__body b { color: var(--c-text); font-weight: 550; }
.msg--blue .msg__top .ic { color: var(--c-blue-ink); }
.msg--green .msg__top .ic { color: var(--c-green-ink); }

/* Лента событий НЕ появляется по очереди, и это решение, а не упущение.
   Красивый stagger держал события прозрачными до своей задержки, и
   всякий раз, когда анимация не успевала или не шла, главный экран
   оставался с пустой лентой — то есть без единственного, ради чего он
   есть. Снимок для превью, экономия энергии на телефоне, медленное
   устройство — и продавец видит серый прямоугольник.

   Осталось движение, которое ничего не прячет: у свежего события мягко
   дышит точка. Не видно её — не потеряно ничего. */
.msg--in { opacity: 1; }
.msg--live .msg__title::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: 6px; height: 6px; margin-inline-start: 7px; border-radius: 50%;
    background: var(--c-green);
}
@media (prefers-reduced-motion: no-preference) {
    .msg--live .msg__title::after { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* --- Mockup меню бота ------------------------------------------------------ */
.menu-mock { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.menu-mock__i {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 14px; border-radius: 11px;
    background: #fff; border: 1px solid var(--c-border);
    font-size: var(--t-small); font-weight: 500;
}
.menu-mock__i em { font-style: normal; font-size: 15px; line-height: 1; }

/* --- Mockup панели/статистики ---------------------------------------------- */
.panel {
    background: #fff; border: 1px solid var(--c-border);
    border-radius: var(--r-xl); padding: clamp(18px, 2vw, 26px);
    box-shadow: var(--sh-card);
}
.panel__hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s-5); }
.panel__hd h4 { margin: 0; font-size: var(--t-small); font-weight: 600; }
.panel__hd .badge { margin-inline-start: auto; }

.kpi { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.kpi__i { padding: 14px; border-radius: 11px; background: var(--c-bg-soft); }
.kpi__k { font-size: 11px; color: var(--c-text-muted); letter-spacing: .02em; }
.kpi__v { margin-top: 5px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.bars { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin-top: var(--s-5); }
.bars__b { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--c-blue-soft); }
.bars__b--hi { background: var(--c-blue); }
.bars__x { display: flex; gap: 7px; margin-top: 7px; }
.bars__x span { flex: 1; text-align: center; font-size: 10px; color: var(--c-text-muted); }

.rows { display: grid; gap: 1px; background: var(--c-border); border-radius: 11px; overflow: hidden; }
.rows__r { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; font-size: var(--t-small); }
.rows__r b { font-weight: 550; }
.rows__r .badge { margin-inline-start: auto; }
.rows__num { font-variant-numeric: tabular-nums; color: var(--c-text-muted); }

/* --- До/после --------------------------------------------------------------- */
.flow { display: grid; gap: 7px; }
.flow__i {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 10px;
    background: #fff; border: 1px solid var(--c-border); font-size: var(--t-small);
}
.flow__i .ic { width: 17px; height: 17px; color: var(--c-text-muted); }
.flow__i--bad { color: var(--c-text-muted); }
.flow__i--good .ic { color: var(--c-green-ink); }
.flow__arrow { justify-self: center; color: var(--c-border-strong); line-height: 1; }
/* --- Тарифы ---------------------------------------------------------------- */
.tiers { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0,1fr)); }
.tier { display: flex; flex-direction: column; }
.tier__t { font-size: var(--t-small); font-weight: 600; }
.tier__p { margin-top: var(--s-3); font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tier__m { margin-top: 4px; font-size: var(--t-tiny); color: var(--c-text-muted); }
.tier--hi { border-color: var(--c-text); }

/* --- FAQ: работает без JS, на details/summary ------------------------------- */
.faq { display: grid; gap: 1px; background: var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.faq__i { background: #fff; }
.faq__q {
    display: flex; align-items: flex-start; gap: var(--s-4);
    padding: 20px clamp(18px, 2vw, 26px); cursor: pointer;
    font-size: var(--t-card); font-weight: 550; line-height: 1.35;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: ""; flex: none; margin-inline-start: auto; margin-top: 7px;
    width: 9px; height: 9px;
    border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted);
    transform: rotate(45deg); transition: transform .18s ease;
}
.faq__i[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding: 0 clamp(18px, 2vw, 26px) 22px; color: var(--c-text-muted); max-width: 72ch; }
.faq__a p + p { margin-top: var(--s-3); }

/* --- Ограничения: аккуратный список, без красных крестов -------------------- */
.limits { display: grid; gap: 1px; background: var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.limits__i { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: var(--s-4); padding: 18px clamp(18px, 2vw, 24px); background: #fff; align-items: start; }
.limits__i .ic { width: 18px; height: 18px; margin-top: 4px; color: var(--c-text-muted); }
.limits__i b { font-weight: 550; }
.limits__i span { display: block; margin-top: 3px; color: var(--c-text-muted); font-size: var(--t-small); }
.crumbs { padding-block: var(--s-6) 0; font-size: var(--t-small); color: var(--c-text-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.crumbs li { display: flex; gap: 7px; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--c-border-strong); }

.ftr { background: var(--c-dark); color: var(--c-dark-muted); padding-block: clamp(48px, 6vw, 76px) var(--s-10); }
.ftr__grid { display: grid; gap: clamp(32px, 4vw, 48px); grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.ftr__brand { display: inline-flex; align-items: center; gap: 10px;
              color: var(--c-dark-text); font-weight: 600;
              white-space: nowrap; }
.ftr h4 { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .07em; color: var(--c-dark-text); margin-bottom: var(--s-4); }
.ftr ul { display: grid; gap: 11px; font-size: var(--t-small); }
.ftr a:hover { color: var(--c-dark-text); }
.ftr__note {
    margin-top: clamp(36px, 4vw, 56px); padding-top: var(--s-6);
    border-top: 1px solid var(--c-dark-border);
    font-size: var(--t-tiny); line-height: 1.6;
    display: grid; gap: var(--s-3);
}
@media (max-width: 1060px) {
    .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split--text, .split--even { grid-template-columns: minmax(0, 1fr); }
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    /* Визуальный Hero идёт ПОСЛЕ текста: на телефоне сначала суть. */
    .hero__art { order: 2; }
}

@media (max-width: 820px) {
    /* Шапка на телефоне — знак и меню, и больше ничего.
       Кнопка «Попробовать бесплатно» здесь не помещалась рядом с
       названием: ряд переставал влезать в 390px, страница становилась
       шире экрана, и обрезало её ЦЕЛИКОМ — заголовок, текст и макет.
       Сама кнопка при этом никуда не делась: она первая в выехавшем
       меню и вторым экраном в Hero. */
    .hdr__nav, .hdr__cta { display: none; }
    .hdr__burger { display: block; margin-inline-start: auto; }
    .drawer { display: block; }
    .hdr__in { gap: var(--s-3); }
    .hdr__brand { font-size: var(--t-small); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html { scroll-padding-top: 76px; }
}

@media (max-width: 560px) {
    .grid--2, .grid--3, .tiers, .menu-mock { grid-template-columns: minmax(0, 1fr); }
    .ftr__grid { grid-template-columns: minmax(0, 1fr); }
    .kpi { grid-template-columns: minmax(0, 1fr); }
    .container { padding-inline: var(--s-4); }
    /* Кнопки на всю ширину: попасть пальцем важнее вида в ряд. */
    .hero__cta .btn, .cta-final .btn { width: 100%; }
}

/* Анимация — удобство, а не смысл. Кто её отключил, обязан увидеть всё. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .hdr, .drawer, .cta-final { display: none; }
}