/* Сайт «Отзывчиво» — обычные HTML и CSS без сборки: гость не грузит бандл кабинета (решение 138). Палитра «Малахит», шрифт
   Golos Text и правила вида — решения 209–211: без подложек под иконками, надзаголовок только на первом экране, у карточки
   рамка или тень, рукописные пометки — почти только в «Чтобы не стыдно». Шрифты — со своего сервера (/fonts), без CDN. */
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/golos-text-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/golos-text-latin.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Знак рубля — один глиф из latin-ext: весь набор ради него грузить незачем */
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/golos-text-rouble.woff2') format('woff2');
    unicode-range: U+20BD;
}

/* Пометки «от руки» (красная ручка): Caveat 600, только кириллица и знаки, без альтернатив — 22 КБ */
@font-face {
    font-family: 'Caveat Notes';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/caveat-notes.woff2') format('woff2');
}

/* Контраст — по APCA Bronze (решение 243): абзацы от Lc 75, прочий текст от 60, крупнее 36px — от 45; светлый крупный текст на
   тёмном — не выше 90 (`--ink-display`, `--on-dark-display`), в светлой теме заголовки остаются чернилами. Пары проверяют
   frontend/src/test/siteContrast.test.ts и backend/tests/test_site_contrast.py, отрисованные страницы —
   frontend/scripts/contrast-audit.mjs. */
:root {
    --brand: #0b7a62;
    --brand-deep: #075e4b;
    --brand-soft: #eaf5f0;
    --brand-text: #075e4b;
    --plate-dark: #0b2b24;
    --on-dark: #faf6ef;
    --on-dark-display: #eae6df;
    --on-dark-soft: #d3ebe1;
    --on-dark-accent: #84ccb0;
    --ink: #14211e;
    --ink-display: #14211e;
    --ink-soft: #4a5552;
    --ink-faint: #66706d;
    --warn-ink: #8a5a00;
    --paper: #ffffff;
    --backdrop: #faf6ef;
    --line: #e6ded0;
    --amber: #f5a524;
    --amber-soft: #ffe7b3;
    --pen: #d93a2b;
    --pen-soft: #fbe3df;
    --bad-ink: #b42318;
    --wb-ink: #a3108a;
    --wb-soft: #f8e3f4;
    --ozon-ink: #0047cc;
    --ozon-soft: #e3ecff;
    /* Круг под псом на первом экране — малахитовый; под псом в призыве, в статьях и на 404 — светлый (`--mascot-plate`):
       платок у пса малахитовый и на тёмной плите растворился бы, а в тёмной теме коричневые уши тонут без светлого круга */
    --hero-circle: #0b7a62;
    --mascot-plate: #eaf5f0;
    --shadow-raised: 0 8px 24px -8px rgb(20 33 30 / 10%);
    --shadow-float: 0 14px 32px -8px rgb(20 33 30 / 16%);
    --radius: 24px;
    --radius-m: 16px;
    --radius-s: 12px;
    --shell: min(1200px, calc(100vw - 40px));
    --plate: min(1320px, calc(100vw - 40px));
    --font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-hand: 'Caveat Notes', 'Segoe Print', 'Bradley Hand', cursive;
}

* {
    box-sizing: border-box;
}

/* Переход по якорю: блок встаёт под закреплённой шапкой (72 px и линия) с зазором 24 px. Отступ задан только здесь —
   scroll-margin у целей сложился бы с ним (так на юридических страницах выходило 184 px). */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--backdrop);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    text-wrap: balance;
}

h1 {
    font-size: clamp(34px, 5vw, 56px);
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -0.028em;
}

h3 {
    font-size: 20px;
    letter-spacing: -0.012em;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: inherit;
}

img,
svg {
    max-width: 100%;
}

.shell {
    width: var(--shell);
    margin: 0 auto;
}

/* Надзаголовок — только на первом экране (и «Ошибка 404»): маленькие заглавные с янтарной точкой */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-text);
}

.eyebrow::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
}

/* Рукописная пометка: красная ручка — правка, малахит — пояснение */
.pen-note {
    font-family: var(--font-hand);
    font-weight: 600;
    font-size: 23px;
    line-height: 1.1;
    color: var(--pen);
}

/* ---- шапка ----
   Одно меню на оба размера: на телефоне `<details class="menu">` раскрывается бургером без JS (статьям свои скрипты
   запрещены, полей ввода на сайте нет); на широком экране, где браузер понимает `::details-content`, ссылки стоят в строку. */
.top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(250 246 239 / 92%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--ink);
}

.logo-mark {
    flex: none;
    width: 32px;
    height: 32px;
}

.menu > summary {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border-radius: var(--radius-s);
    list-style: none;
    cursor: pointer;
    color: var(--ink);
}

.menu > summary::-webkit-details-marker {
    display: none;
}

.menu > summary::before {
    content: '';
    width: 20px;
    height: 14px;
    background:
        linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
        linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
        linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
    border-radius: 1px;
}

.menu[open] > summary::before {
    width: 18px;
    height: 18px;
    background:
        linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

.menu > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Раскрытое меню на телефоне — панель под шапкой во всю ширину */
.top-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 24px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--backdrop);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-float);
}

.top-nav a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}

.top-nav .btn {
    margin-top: 20px;
    padding: 14px 20px;
    font-size: 17px;
}

@supports selector(::details-content) {
    @media (min-width: 921px) {
        .menu > summary {
            display: none;
        }

        .menu::details-content {
            display: contents;
            content-visibility: visible;
        }

        .top-nav {
            position: static;
            flex-direction: row;
            align-items: center;
            gap: 32px;
            max-height: none;
            overflow: visible;
            padding: 0;
            background: none;
            border: 0;
            box-shadow: none;
        }

        .top-nav a:not(.btn) {
            padding: 0;
            border: 0;
            font-size: 15px;
            font-weight: 500;
        }

        .top-nav a:not(.btn):hover {
            color: var(--brand-text);
        }

        .top-nav .btn {
            margin: 0 0 0 4px;
            padding: 11px 20px;
            font-size: 15px;
        }
    }
}

/* ---- кнопки ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-s);
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}

.btn-lg {
    padding: 16px 28px;
    font-size: 17px;
}

.btn-primary {
    background: var(--brand);
    color: #fff;
}

.btn-primary:hover {
    background: var(--brand-deep);
}

.btn-ghost {
    border-color: rgb(20 33 30 / 18%);
    background: transparent;
    color: var(--ink);
}

.btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand-text);
}

.btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* ---- значки площадок, чипы, звёзды: кусочки интерфейса кабинета ---- */
.mp {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.mp-wb {
    background: var(--wb-soft);
    color: var(--wb-ink);
}

.mp-ozon {
    background: var(--ozon-soft);
    color: var(--ozon-ink);
}

.stars {
    color: var(--amber);
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}

.stars-off {
    color: var(--ink-faint);
    opacity: 0.45;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.chip::before {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: var(--chip-icon) center / contain no-repeat;
    mask: var(--chip-icon) center / contain no-repeat;
}

.chip-ok {
    background: var(--brand-soft);
    color: var(--brand-text);
    --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chip-bad {
    background: var(--pen-soft);
    color: var(--bad-ink);
    --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.chip-wait {
    background: var(--paper);
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 1px var(--line);
    --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6 3.8V6l1.4 1' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.chip-amber {
    background: var(--amber-soft);
    color: var(--ink);
}

.chip-amber::before {
    display: none;
}

/* Знак в строку с заголовком — линейный, без подложки (решение 211) */
.ico {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--brand);
}

.with-ico {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---- первый экран ---- */
.hero {
    padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 88px);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}

/* Главный заголовок — запрос целиком; голый `<h1>` без тегов внутри, поэтому янтарная черта «от руки» — после него */
.hero h1 {
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.hero h1::after {
    content: '';
    display: block;
    width: min(100%, 8.4em);
    height: 0.2em;
    margin-top: 0.06em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C50 3 120 2 198 6' fill='none' stroke='%23F5A524' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")
        left center / 100% 100% no-repeat;
}

.hero-lead {
    margin-top: 24px;
    max-width: 32em;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.5;
    color: var(--ink-soft);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero-note {
    margin-top: 20px;
    max-width: 36em;
    font-size: 14px;
    color: var(--ink-faint);
}

/* Сцена: пёс на малахитовом круге и разговор — отзыв приходит, ответ уходит (живая карточка, landing.js) */
.scene {
    position: relative;
    min-height: 700px;
}

.scene::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(76%, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--hero-circle);
    transform: translate(-50%, -50%);
}

.scene-dog {
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(64%, 360px);
    height: auto;
    transform: translate(-48%, -46%);
}

.bubble {
    position: absolute;
    z-index: 1;
    width: min(300px, 62%);
    padding: 16px 18px;
    border-radius: var(--radius-m);
    background: var(--paper);
    box-shadow: var(--shadow-float);
    font-size: 15px;
    line-height: 1.45;
}

.bubble::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 30% 100%);
}

.bubble-review {
    top: 4%;
    left: 0;
}

.bubble-review::after {
    right: 34px;
    bottom: -12px;
}

.bubble-answer {
    bottom: 0;
    right: 0;
    background: var(--brand-soft);
}

.bubble-answer::after {
    left: 34px;
    top: -12px;
    transform: scaleY(-1);
}

.bubble-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.demo-kind {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

.bubble-review .demo-body {
    min-height: var(--review-h, auto);
}

.demo-product {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-faint);
}

.demo-text {
    margin-top: 4px;
    color: var(--ink);
}

.demo-answer-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
}

/* Место под самый длинный пример: высоту меряет landing.js (--answer-h), ответ печатается, а пузырь не прыгает */
.demo-answer {
    min-height: var(--answer-h, 8.7em);
    margin-top: 6px;
    color: var(--ink);
}

.demo-sign {
    display: inline-block;
    margin-top: 6px;
    color: var(--ink-soft);
}

.bubble-answer .chip {
    margin-top: 10px;
    background: var(--paper);
}

/* Курсор печати: мигает, пока ответ набирается */
.caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--brand);
    animation: caret-blink 1s steps(2) infinite;
}

@keyframes caret-blink {
    50% {
        opacity: 0;
    }
}

/* Стикер — янтарный, чуть наклонён */
.sticker {
    position: absolute;
    z-index: 2;
    display: grid;
    padding: 12px 16px 14px;
    border-radius: var(--radius-s);
    background: var(--amber);
    color: var(--ink);
    box-shadow: var(--shadow-float);
    font-weight: 800;
    line-height: 1.05;
    transform: rotate(5deg);
}

.sticker small {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
}

.scene .sticker {
    top: 1%;
    right: 4%;
    font-size: 30px;
}

/* Полоса фактов: одна плашка, знак в строку с заголовком, колонки через тонкие линии */
.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(40px, 5vw, 72px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.fact {
    padding: 24px 24px 24px 28px;
}

.fact + .fact {
    border-left: 1px solid var(--line);
}

.fact-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.fact p:last-child {
    margin-top: 6px;
    font-size: 16px;
    color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
    .caret {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---- секции ---- */
/* Сверху — поле, а не внутренний отступ: якорь (#how, #price…) ведёт к верху рамки секции, и с padding над заголовком
   или плитой оставалось ещё до 112 px пустоты. Фона у секций нет, снизу padding — поля соседей не схлопываются. */
.section {
    margin-top: clamp(64px, 8vw, 112px);
    padding-bottom: clamp(64px, 8vw, 112px);
}

.section-head {
    max-width: 960px;
    margin-bottom: clamp(36px, 4.5vw, 64px);
}

.section-head p,
.lead {
    margin-top: 20px;
    max-width: 40em;
    font-size: clamp(17px, 1.5vw, 19px);
    color: var(--ink-soft);
}

/* Карточка на бумаге — рамка без тени */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* ---- «Что вы получаете»: бенто — в каждой карточке кусочек интерфейса вместо иконки ---- */
.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.bento .card {
    grid-column: span 5;
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.bento .card-wide {
    grid-column: span 7;
}

.frame {
    display: grid;
    place-items: center;
    min-height: 184px;
    padding: 24px;
    border-radius: calc(var(--radius) - 8px);
    background: var(--brand-soft);
}

.frag {
    width: min(100%, 460px);
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow-float);
    font-size: 15px;
    line-height: 1.45;
}

.frag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.frag-row + .frag-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.frag-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
}

.frag-label-brand {
    color: var(--brand-text);
}

.frag-quote {
    margin-top: 10px;
}

.frag-answer {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--brand);
    font-size: 13px;
    color: var(--ink-soft);
}

.frag-answer b {
    color: var(--ink);
}

.frag s {
    color: var(--pen);
    text-decoration-thickness: 2px;
}

.frag .chip {
    margin-top: 10px;
}

.frag-row .chip {
    margin-top: 0;
}

.frag-tg {
    border-bottom-left-radius: 4px;
}

.frag-time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    text-align: right;
    color: var(--ink-faint);
}

.count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--amber-soft);
    font-size: 13px;
    font-weight: 700;
}

.card-text {
    padding: 20px 20px 28px;
}

.card-text p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.card h3 {
    font-size: 22px;
}

/* ---- «Как работает»: семь шагов путём, на плите-дымке ---- */
.plate {
    width: var(--plate);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4.5vw, 60px);
    border-radius: 32px;
    background: var(--brand-soft);
}

.how-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.how-side {
    position: sticky;
    top: 112px;
}

.how-legend {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    font-size: 15px;
    color: var(--ink-soft);
}

.how-legend li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.how-legend li::before {
    content: '';
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    background: var(--paper);
}

.how-legend li + li::before {
    background: var(--brand);
}

.how-dog {
    display: block;
    width: 200px;
    height: auto;
    margin-top: 40px;
}

.steps {
    position: relative;
    display: grid;
    gap: 16px;
    padding-left: 72px;
    counter-reset: step;
}

.steps::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: var(--on-dark-accent);
}

.step {
    position: relative;
    padding: 24px 28px;
    border-radius: 20px;
    background: var(--paper);
}

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: -72px;
    top: 22px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    background: var(--paper);
    color: var(--brand-text);
    font-size: 17px;
    font-weight: 700;
}

/* Шаги 6–7 — публикация: круг залит */
.step:nth-of-type(n + 6)::before {
    background: var(--brand);
    color: #fff;
}

.step p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Черта между пятым и шестым шагом: до неё покупатели ничего не видят */
.steps-line {
    position: relative;
    margin: 8px 0 8px -72px;
    padding-left: 72px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-hand);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
    color: var(--brand-text);
}

.steps-line::before,
.steps-line::after {
    content: '';
    height: 0;
    border-top: 2px dashed var(--brand);
}

.steps-line::before {
    position: absolute;
    left: 0;
    width: 64px;
}

.steps-line::after {
    flex: 1;
}

/* ---- «Кабинет»: плитки-фрагменты на демо-данных (вместо снимков экрана) ---- */
.tiles {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}

.tile {
    padding: 28px 32px 32px;
}

.tile-feed {
    grid-column: span 7;
}

.tile-side {
    grid-column: span 5;
    display: grid;
    gap: 24px;
}

.tile-half {
    grid-column: span 6;
}

.tile h3 {
    font-size: 22px;
}

.tile > p {
    margin-top: 10px;
    font-size: 15px;
    color: var(--ink-soft);
}

.window {
    margin-top: 20px;
    padding: 12px;
    border-radius: var(--radius-m);
    background: var(--brand-soft);
    font-size: 15px;
}

.tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-s);
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}

.tabs span {
    padding: 6px 12px;
    border-radius: 9px;
}

.tabs .on {
    background: var(--brand-soft);
    color: var(--brand-text);
}

.entry {
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: var(--radius-s);
    background: var(--paper);
    border: 1px solid var(--line);
}

.entry-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-faint);
}

.entry-head .chip {
    margin-left: auto;
}

.entry-product {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-faint);
}

.entry-text {
    margin-top: 4px;
}

.entry hr {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.entry-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
}

.entry-answer {
    margin-top: 10px;
}

.entry-sign {
    margin-top: 6px;
    color: var(--ink-soft);
}

.entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* Кнопки внутри фрагментов — не ссылки и не кнопки: это картинка интерфейса */
.ui-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1.5px solid rgb(20 33 30 / 18%);
    font-size: 14px;
    font-weight: 600;
}

.ui-btn-primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.entry-short .entry-text {
    margin-top: 8px;
}

.demo-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ink-soft);
}

.demo-note::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

.rows {
    margin-top: 16px;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 15px;
}

.row:first-child {
    border-top: 0;
}

.row small {
    display: block;
    font-size: 13px;
    color: var(--ink-faint);
}

.row-value {
    text-align: right;
    color: var(--ink-soft);
}

.status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.status::before {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.kpis p {
    padding: 12px 14px;
    border-radius: var(--radius-s);
    background: var(--brand-soft);
    font-size: 14px;
    color: var(--ink-soft);
}

.kpis b {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.kpis .kpi-warn {
    color: var(--warn-ink);
}









.settings {
    margin-top: 20px;
    padding: 4px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.settings .row > span:first-child {
    flex: none;
}

.token {
    min-width: 0;
    text-align: right;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--on-dark-accent);
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text);
}

.seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 14px;
    color: var(--ink-soft);
}

.seg span {
    padding: 4px 10px;
    border-radius: 8px;
}

.seg .on {
    background: var(--brand-soft);
    color: var(--brand-text);
    font-weight: 600;
}

.toggle {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--brand);
}

.toggle::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
}

.version {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-s);
    background: var(--brand-soft);
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-text);
}

.version small {
    display: block;
    font-weight: 400;
    color: var(--ink-soft);
}

.before-after {
    margin-top: 20px;
    display: grid;
    gap: 14px;
}

.ba-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

.ba-label-new {
    color: var(--brand-text);
}

.ba-label .pen-note {
    font-size: 22px;
    color: var(--brand-text);
}

.ba-box {
    margin-top: 8px;
    padding: 14px 18px;
    border-radius: var(--radius-s);
    border: 1px solid var(--line);
    background: var(--paper);
}

.ba-box-new {
    border: 0;
    background: var(--brand-soft);
}

.ba-box .entry-sign {
    margin-top: 8px;
}

/* ---- «Чтобы не стыдно»: лист правки красной ручкой ---- */
.safety-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}

.points {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.points li {
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.points h3 {
    font-size: 20px;
}

.points p {
    margin-top: 8px;
    padding-left: 32px;
    font-size: 16px;
    color: var(--ink-soft);
}

.sheet-stack {
    position: relative;
    padding-top: 56px;
}

/* Пёс выглядывает из-за верхнего края листа */
.sheet-dog {
    position: absolute;
    right: 56px;
    top: -36px;
    width: 128px;
    height: auto;
}

.sheet {
    position: relative;
    z-index: 1;
    padding: 36px 260px 36px 40px;
    border-radius: 20px;
    background: var(--paper);
    box-shadow: var(--shadow-float);
}

/* Поля тетради — красная линия, правее — пометки */
.sheet::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 236px;
    width: 1.5px;
    background: var(--pen);
}

/* Лист под листом — стопка корректуры */
.sheet-stack::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -12px;
    height: 40px;
    border-radius: 20px;
    background: var(--paper);
    box-shadow: var(--shadow-raised);
    transform: rotate(-1deg);
}

.sheet-part + .sheet-part {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.sheet-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.sheet-label .chip {
    letter-spacing: 0;
    text-transform: none;
}

/* Пометка — на полях, правее красной линии: от правого края колонки текста (родитель строки) на ширину отступа листа */
.sheet .pen-note {
    position: absolute;
    left: calc(100% + 44px);
    width: 196px;
}

.sheet-line {
    position: relative;
    margin-top: 10px;
}

.sheet-line s {
    color: var(--ink-soft);
    text-decoration-color: var(--pen);
    text-decoration-thickness: 2px;
}

/* Короткая стрелка от пометки к строке — без JS. С JS длинные стрелки до конца строки рисует landing.js (.sheet-marks).
   Рисунок ручки — маской, цвет — `--pen`: в тёмной теме ручка светлее */
.sheet-line .pen-note::before {
    content: '';
    position: absolute;
    left: -34px;
    top: 0.45em;
    width: 26px;
    height: 12px;
    background: var(--pen);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M25 6H3M8 1L2 6l6 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M25 6H3M8 1L2 6l6 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.sheet-line .pen-note {
    top: -2px;
}

/* Пометка в две строки — выше зачёркнутого: стрелка от первой строки изгибается вниз к строке (как в макете) */
.sheet-line .pen-note-up {
    top: -1.25em;
}

.sheet-line .pen-note-up::before {
    top: 1.55em;
}

.sheet-review {
    position: relative;
}

.sheet-review .pen-note {
    top: 0;
}

.circled {
    position: relative;
    display: inline-block;
    padding: 4px 10px;
}

.circled::after {
    content: '';
    position: absolute;
    inset: -4px -6px;
    background: var(--pen);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 56' preserveAspectRatio='none'%3E%3Cpath d='M18 10C60 0 140 2 154 22C164 40 120 54 70 52C24 50 2 40 6 26C9 16 30 8 58 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 56' preserveAspectRatio='none'%3E%3Cpath d='M18 10C60 0 140 2 154 22C164 40 120 54 70 52C24 50 2 40 6 26C9 16 30 8 58 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
}

.sheet mark {
    padding: 1px 2px;
    border-radius: 3px;
    background: var(--amber-soft);
    color: inherit;
}

.sheet-review p {
    margin-top: 12px;
}

.sheet-final {
    position: relative;
}

.sheet-final .pen-note {
    top: 50%;
    transform: translateY(-50%);
}

/* Скобка на полях: приветствие и подпись ставит сервис */
.sheet-final::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 52px;
    bottom: 4px;
    width: 12px;
    border: 2px solid var(--pen);
    border-left: 0;
    border-radius: 0 6px 6px 0;
}

.sheet-final .sign {
    margin-top: 10px;
    color: var(--ink-soft);
}

/* Приветствие — верхний конец скобки «ставит сервис»: подчёркнуто ручкой (стрелка скобки — к концу этой строки) */
.frame-greet {
    position: relative;
    white-space: nowrap;
}

.frame-greet::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -3px;
    bottom: -4px;
    height: 6px;
    background: var(--pen);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4C18 2 34 5 52 3.4S84 2.6 99 3.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4C18 2 34 5 52 3.4S84 2.6 99 3.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
}

/* Стрелки и скобка на полях (landing.js): тонкая кривая «от руки» от пометки до конца строки, наконечник — на строку.
   Пока скрипт их нарисовал, короткие запасные стрелки и скобка из CSS не нужны */
.sheet-marks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    color: var(--pen);
}

.sheet-marks path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sheet.is-marked .sheet-line .pen-note::before,
.sheet.is-marked .sheet-final::after {
    display: none;
}

/* ---- тариф ---- */
.price-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.price-intro {
    margin-top: 20px;
    color: var(--ink-soft);
}

.price-grid h3 {
    margin-top: 36px;
    font-size: 18px;
}

.price-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.price-list li {
    position: relative;
    padding-left: 30px;
    color: var(--ink);
}

.price-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    background: var(--brand-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.4l3.6 3.4 7.4-7.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.4l3.6 3.4 7.4-7.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.price-card {
    position: relative;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-float);
}

.price-tag {
    font-size: clamp(72px, 9vw, 120px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--ink-display);
}

.price-tag small {
    margin-left: 0.1em;
    font-size: 0.22em;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
}

.price-example {
    margin-top: 24px;
    padding: 16px 22px;
    border-radius: var(--radius-m);
    background: var(--brand-soft);
    font-size: 20px;
    color: var(--ink-soft);
}

.price-example b {
    color: var(--ink);
}

.price-note {
    margin: 24px 0 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--ink-soft);
}

.price-note a {
    color: var(--brand-text);
}

.price-card .btn {
    width: 100%;
}

.price-card .sticker {
    top: -26px;
    right: -14px;
    max-width: 250px;
    font-size: 18px;
    transform: rotate(4deg);
}

.price-card .sticker small {
    font-size: 14px;
    font-weight: 600;
}

/* ---- вопросы ---- */
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.faq-side {
    position: sticky;
    top: 112px;
}

.faq-side p {
    margin-top: 28px;
    color: var(--ink-soft);
}

.faq-side .btn {
    margin-top: 16px;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Плюс и минус — знаком, без круга-подложки */
.faq-item summary::after {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    background:
        linear-gradient(var(--brand) 0 0) center / 100% 2px no-repeat,
        linear-gradient(var(--brand) 0 0) center / 2px 100% no-repeat;
}

.faq-item[open] summary::after {
    background: linear-gradient(var(--brand) 0 0) center / 100% 2px no-repeat;
}

.faq-item p {
    max-width: 44em;
    padding: 0 40px 24px 0;
    color: var(--ink-soft);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

/* ---- призыв «Попробуйте бесплатно»: тёмная малахитовая плита, пёс — на светлом круге ---- */
/* Сверху поле, как у .section: якорь #try ведёт прямо к плите */
.cta {
    margin-top: clamp(24px, 4vw, 56px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

.cta-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    width: var(--plate);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 80px) clamp(24px, 5vw, 60px);
    border-radius: 32px;
    background: var(--plate-dark);
    color: var(--on-dark);
}

.cta-inner h2 {
    font-size: clamp(32px, 4.4vw, 52px);
    color: var(--on-dark-display);
}

.cta-lead {
    margin-top: 18px;
    max-width: 32em;
    font-size: clamp(17px, 1.6vw, 19px);
    color: var(--on-dark-soft);
}

.cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 32px;
}

.cta-note {
    font-size: 15px;
    color: var(--on-dark-accent);
}

.cta .btn-primary {
    background: var(--on-dark);
    color: var(--plate-dark);
}

.cta .btn-primary:hover {
    background: #fff;
}

.cta .btn:focus-visible {
    outline-color: var(--on-dark-accent);
}

.cta-art {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(220px, 26vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--mascot-plate);
}

/* Пёс крупнее круга: уши и искры выглядывают за край, как наклейка */
.cta-art img {
    display: block;
    width: 108%;
    max-width: none;
    height: auto;
    margin-top: -16%;
}

.cta-art .sticker {
    top: -6px;
    left: -40px;
    font-size: 26px;
    transform: rotate(-6deg);
}

.cta-art .sticker small {
    font-size: 14px;
}

.cta-draft {
    position: absolute;
    left: -64px;
    bottom: 10%;
    padding: 12px 16px;
    border-radius: var(--radius-m);
    background: var(--paper);
    box-shadow: var(--shadow-float);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.cta-draft .chip {
    display: flex;
    width: max-content;
    margin-bottom: 8px;
}

/* ---- подвал: одна строка на всех страницах сайта (тесты сверяют побайтно) ---- */
.foot {
    border-top: 1px solid var(--line);
    padding: 56px 0 32px;
}

.foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
}

.foot .logo {
    margin-bottom: 14px;
}

.foot-note {
    margin-top: 6px;
    max-width: 30em;
    font-size: 15px;
    color: var(--ink-soft);
}

.foot-note + .foot-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--ink-faint);
}

.foot-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    font-size: 15px;
}

.foot-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.foot-title {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.foot-col a {
    color: var(--ink-soft);
    text-decoration: none;
}

.foot-col a:hover {
    color: var(--brand-text);
}

.foot-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-faint);
}

/* ---- плашка о cookie (metrika.js) ----
   Внизу и компактно; пока она открыта, страница получает снизу отступ высотой с плашку, чтобы кнопки подвала и призыва
   можно было докрутить из-под неё. Закрывается «Понятно» и больше не показывается. */
.cookie-note-open body {
    padding-bottom: calc(var(--cookie-note-space, 0px) + 12px);
}

.cookie-note {
    position: fixed;
    left: 50%;
    bottom: 12px;
    z-index: 30;
    transform: translateX(-50%);
    width: min(780px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 12px 12px 18px;
    background: var(--paper);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-float);
    font-size: 14px;
    line-height: 1.45;
}

.cookie-note-text {
    flex: 1;
    min-width: 0;
    text-wrap: pretty;
}

.cookie-note a {
    color: var(--brand-text);
}

.cookie-note-ok {
    flex: none;
    padding: 8px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cookie-note a:focus-visible,
.cookie-note-ok:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .cookie-note-open body {
        padding-bottom: var(--cookie-note-space, 0px);
    }

    .cookie-note {
        left: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 0;
        font-size: 13px;
        line-height: 1.4;
    }

    .cookie-note-ok {
        padding: 8px 14px;
    }
}

@media print {
    .cookie-note,
    .menu > summary {
        display: none;
    }

    /* Стрелки листа правки нарисованы по экранной ширине; лист при печати раскладывается заново — без них */
    .sheet-marks {
        display: none;
    }
}

/* ---- планшет и телефон ---- */
@media (max-width: 1080px) {
    .sheet {
        padding-right: 40px;
    }

    .sheet::before,
    .sheet-final::after,
    .sheet-line .pen-note::before {
        display: none;
    }

    .sheet .pen-note {
        position: static;
        display: block;
        width: auto;
        margin-top: 4px;
        font-size: 21px;
        transform: none;
    }

    .sheet-review .pen-note {
        margin-top: 8px;
    }

    .sheet-final .pen-note {
        margin-top: 12px;
    }
}

/* Узкая колонка сцены на 921–1080: пузыри выше — и сцене нужно больше места */
@media (min-width: 921px) and (max-width: 1080px) {
    .scene {
        min-height: 780px;
    }
}

@media (max-width: 920px) {
    .hero-grid,
    .how-grid,
    .safety-grid,
    .price-grid,
    .faq-grid,
    .foot-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .scene {
        min-height: 640px;
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .scene::before {
        width: min(74%, 300px);
    }

    .scene-dog {
        width: min(58%, 240px);
    }

    .bubble {
        width: min(280px, 78%);
        font-size: 14px;
    }


    .scene .sticker {
        font-size: 24px;
    }

    .facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .fact + .fact {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .fact {
        padding: 18px 20px;
    }

    .fact-title {
        font-size: 18px;
    }

    .bento .card,
    .bento .card-wide,
    .tile-feed,
    .tile-side,
    .tile-half {
        grid-column: 1 / -1;
    }

    /* На телефоне кадры-примеры остаются у «Претензии» и «Видно», остальное — текстом */
    .bento .card:not(.keep-frame) .frame {
        display: none;
    }

    .how-side,
    .faq-side {
        position: static;
    }

    .how-dog {
        width: 150px;
        margin-top: 24px;
    }

    .foot-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .cta-art {
        order: -1;
        justify-self: center;
        width: 220px;
    }

    .cta-draft {
        left: -48px;
    }
}

@media (max-width: 640px) {
    .shell {
        width: calc(100vw - 40px);
    }

    .plate,
    .cta-inner {
        width: 100%;
        border-radius: 0;
    }

    .plate {
        padding: 56px 20px;
    }

    .cta-inner {
        padding: 48px 20px 56px;
    }

    .cta {
        margin-top: 0;
        padding-bottom: 0;
    }

    .hero-actions .btn,
    .cta-actions .btn,
    .faq-side .btn {
        width: 100%;
    }

    /* Надзаголовок первого экрана — в одну строку и на 375 px */
    .eyebrow {
        letter-spacing: 0.03em;
    }

    .scene {
        min-height: 660px;
    }

    .bubble-review {
        top: 2%;
    }

    .steps {
        padding-left: 52px;
    }

    .steps::before {
        left: 17px;
    }

    .step {
        padding: 20px;
    }

    .step::before {
        left: -52px;
        top: 18px;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .steps-line {
        margin-left: -52px;
        padding-left: 52px;
        font-size: 22px;
    }

    .steps-line::before {
        width: 44px;
    }

    .tile {
        padding: 22px 18px 24px;
    }

    .window {
        padding: 8px;
    }

    .settings {
        padding: 2px 14px;
    }

    .sheet {
        padding: 28px 20px;
    }

    .sheet-dog {
        right: 24px;
        width: 104px;
        top: -24px;
    }

    .points p {
        padding-left: 0;
    }

    .price-card .sticker {
        right: -4px;
        top: -30px;
        font-size: 16px;
    }

    .foot-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-item p {
        padding-right: 0;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand: #0b7a62;
        --brand-deep: #096650;
        --brand-soft: #14302a;
        --brand-text: #84ccb0;
        --plate-dark: #10392f;
        --ink: #e8efec;
        --ink-display: #dde4e1;
        --ink-soft: #c9d7d1;
        --ink-faint: #afbeb8;
        --warn-ink: #ffb84d;
        --paper: #15211d;
        --backdrop: #0e1714;
        --line: #26352f;
        --amber-soft: #4a3714;
        --pen: #ff9b8b;
        --pen-soft: #3a1f1b;
        --bad-ink: #fca092;
        --wb-ink: #f897e6;
        --wb-soft: #3a1735;
        --ozon-ink: #9db9ff;
        --ozon-soft: #172440;
        --mascot-plate: #d8eee5;
        --shadow-raised: 0 8px 24px -8px rgb(0 0 0 / 50%);
        --shadow-float: 0 14px 32px -8px rgb(0 0 0 / 60%);
    }

    /* Светлый крупный текст на тёмном — не выше Lc 90: заголовки чуть тише чернил абзацев */
    h1,
    h2 {
        color: var(--ink-display);
    }

    /* Пустая звезда — значок: от Lc 30 (при 0,45 в тёмной теме было 21) */
    .stars-off {
        opacity: 0.65;
    }

    .top {
        background: rgb(14 23 20 / 92%);
    }

    .btn-ghost,
    .top-nav .btn,
    .ui-btn {
        border-color: rgb(232 239 236 / 22%);
    }

    .chip-amber,
    .count,
    .sticker {
        color: #14211e;
    }

    .chip-amber,
    .count {
        background: var(--amber);
    }

    .cookie-note {
        box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
    }

    .cta-inner {
        box-shadow: inset 0 0 0 1px var(--line);
    }

    .cta-draft {
        color: var(--ink);
    }
}