/* ==========================================================================
   BothTest — все стили сайта. Написано руками, без фреймворков и без CDN.
   Порядок: темы → сброс → типографика → кнопки и поля → шапка → главная →
   инструмент парного теста → результат → карточки тестов → FAQ → текстовые
   страницы → подвал → cookie → адаптив.

   ⛔ Внешних адресов в файле нет ни одного: ни шрифтов, ни картинок.
   ========================================================================== */

/* --- 1. Темы -------------------------------------------------------------- */

:root {
    /* Тёплая светлая тема. Два цвета мест — это несущая идея сайта:
       терракота — тот, кто начал, лесной зелёный — приглашённый. Они разной
       светлоты, поэтому различимы и в сером снимке, а не только по тону.
       Фиолетовый и бирюзовый отменены владельцем 05.08 (anti_ai_detect п.5). */
    --bg:            #f6f2ec;
    --bg-alt:        #ede6da;
    --surface:       #ffffff;
    --surface-2:     #fbf8f4;
    --surface-3:     #f2ece2;
    --text:          #17130e;
    --text-soft:     #443c31;
    /* 🔴 08.08.2026: было #766c5e. Замер по формуле WCAG: 4.38 на --surface-3,
       4.28 на плашке выбранного теста и 4.15 на --bg-alt — ниже порога ровно там,
       где этим цветом набрано описание теста, то есть то, по чему человек и
       выбирает. Стало 4.89 худшее. */
    --text-muted:    #6b6154;
    --border:        #e5dcce;
    --border-strong: #cabda6;

    --accent:          #b33a1e;   /* 5,9:1 на белом — им покрашены кнопка и ссылки */
    --accent-hover:    #942f17;
    --accent-soft:     #fbe6dd;
    --accent-contrast: #ffffff;

    --seat-a:      #b33a1e;
    --seat-a-soft: #fbe6dd;
    --seat-b:      #2e6b45;
    --seat-b-soft: #dcefe0;

    --ok:      #2e6b45;
    --ok-soft: #dcefe0;
    --warn:      #9a5b04;
    --warn-soft: #fdf0da;

    --focus: #ff8a1f;   /* контрастен обеим темам и не совпадает с акцентом */

    --shadow-1: 0 1px 2px rgba(52, 38, 26, .07), 0 8px 24px rgba(52, 38, 26, .06);
    --shadow-2: 0 2px 4px rgba(17, 22, 44, .08), 0 16px 40px rgba(17, 22, 44, .11);
    --shadow-3: 0 24px 60px rgba(12, 16, 34, .20);
    --hdr-bg: rgba(246, 242, 236, .86);

    --radius-sm: 9px;
    --radius-md: 15px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --maxw: 1160px;
    --maxw-text: 740px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
    /* Тёмная тема — свои значения, а не инверсия: фон уходит в сине-чернильный,
       акцент светлеет, тени становятся глубже и холоднее. */
    --bg:            #15120e;
    --bg-alt:        #1b1713;
    --surface:       #221d17;
    --surface-2:     #2b241c;
    --surface-3:     #352c22;
    --text:          #f3ece1;
    --text-soft:     #d4c7b6;
    /* Тёмная: было #a39685 — 4.73 на --surface-3, у самой границы. Стало 5.34. */
    --text-muted:    #ada08e;
    --border:        #382e25;
    --border-strong: #4e4133;

    --accent:          #f08a63;
    --accent-hover:    #f7a684;
    --accent-soft:     #3d2318;
    --accent-contrast: #1c130d;

    --seat-a:      #f08a63;
    --seat-a-soft: #3d2318;
    --seat-b:      #77c98d;
    --seat-b-soft: #1c3524;

    --ok:      #77c98d;
    --ok-soft: #1c3524;
    --warn:      #f0b866;
    --warn-soft: #3a2c12;

    --focus: #ffab5c;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .38);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .48);
    --shadow-3: 0 26px 66px rgba(0, 0, 0, .62);
    --hdr-bg: rgba(21, 18, 14, .86);
}

/* --- 2. Сброс и основа ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* 🔴 `hidden` обязан прятать. Атрибут даёт всего лишь `display: none` из стилей
   браузера, и ЛЮБОЕ наше правило с `display` его перебивает молча. Так плашка
   cookie (`.cookie { display: flex }`) не закрывалась вовсе: скрипт исправно
   ставил `hidden`, а она оставалась на экране — и до нажатия, и после, и после
   перезагрузки. Правило общее, а не заплатка на блок: то же самое уже случилось
   на proiznosim.com 07.08.2026, значит дефект не сайтовый, а этого приёма. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.62;
    color: var(--text);
    background: var(--bg);
    /* Мягкое свечение сверху — не картинка, а два радиальных градиента:
       фон перестаёт быть плоской заливкой, и страница читается как экран прибора. */
    background-image:
        radial-gradient(1100px 520px at 12% -8%, var(--accent-soft), transparent 62%),
        radial-gradient(900px 460px at 92% -14%, var(--seat-b-soft), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

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

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--accent-contrast);
    padding: 10px 18px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- 3. Типографика ------------------------------------------------------- */

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.018em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
h3 { font-size: 1.16rem; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
strong { font-weight: 650; }
small { font-size: .875rem; }

.muted { color: var(--text-muted); }
.soft  { color: var(--text-soft); }

.sect { padding: 46px 20px; }
.sect__title { margin-bottom: 8px; }
.sect__lead { color: var(--text-soft); max-width: var(--maxw-text); margin-bottom: 26px; }

.page { padding-bottom: 56px; }
.page__head { padding: 26px 20px 4px; max-width: var(--maxw); }
.page__lead { color: var(--text-soft); font-size: 1.06rem; max-width: var(--maxw-text); }

/* --- 4. Кнопки, поля, плашки ---------------------------------------------- */

.btn {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-weight: 600; line-height: 1.25;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-contrast);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(17, 22, 44, .16), 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-contrast); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(17, 22, 44, .2); }
.btn[disabled], .btn[aria-disabled="true"] {
    background: var(--surface-3); color: var(--text-muted);
    box-shadow: none; cursor: not-allowed; transform: none;
    border-color: var(--border);
}

.btn--ghost {
    background: var(--surface); color: var(--text);
    border-color: var(--border-strong); box-shadow: var(--shadow-1);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); }

/* 🔴 44 px — не украшение, а размер пальца. Замер 09.08.2026 (tests/dostupnost.js)
   на 390 px: маленькие кнопки «Начать этот» выходили 134×39, то есть в них
   промахиваются. Высоту задаём минимумом, а не отступами: при другом кегле
   отступы дают другую высоту, а минимум держит всегда. */
.btn--sm  { padding: 9px 18px; font-size: .93rem; min-height: 44px; }
.btn--big { padding: 16px 34px; font-size: 1.08rem; }
.btn--wide { width: 100%; }

.field {
    width: 100%; font: inherit; color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.field:hover { border-color: var(--accent); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
.field--code {
    font: 600 1.35rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .18em; text-align: center; text-transform: lowercase;
}
label { font-weight: 600; display: block; margin-bottom: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-pill); padding: 7px 15px;
    font-size: .9rem; font-weight: 550; color: var(--text-soft);
    box-shadow: var(--shadow-1);
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.chip__dot--b { background: var(--seat-b); }
.chip__dot--a { background: var(--seat-a); }

.note {
    border-left: 3px solid var(--accent);
    background: var(--surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 14px 18px; margin: 0 0 20px;
    color: var(--text-soft);
}
.note--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note--ok   { border-left-color: var(--ok);   background: var(--ok-soft); }
.note p:last-child { margin-bottom: 0; }

/* --- 5. Шапка ------------------------------------------------------------- */

.hdr {
    position: sticky; top: 0; z-index: 40;
    background: var(--hdr-bg);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.hdr__in { display: flex; align-items: center; gap: 16px; min-height: 62px; }

/* Знак сайта в шапке — самостоятельная цель (уводит на главную), поэтому тоже
   не мельче 44 px по высоте. Раньше выходило 30 px. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 44px; }
.brand__mark { display: inline-flex; }
.brand__name { font-weight: 750; font-size: 1.12rem; letter-spacing: -.02em; }
.brand:hover .brand__name { color: var(--accent); }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__link {
    display: block; padding: 8px 13px; border-radius: var(--radius-pill);
    text-decoration: none; color: var(--text-soft); font-weight: 550; font-size: .97rem;
    transition: background .16s ease, color .16s ease;
}
.nav__link:hover { background: var(--surface-3); color: var(--text); }
.nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .nav__link[aria-current="page"] { color: var(--accent-hover); }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; }
.burger__close { display: none; }

.theme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    background: var(--surface); color: var(--text-soft);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    cursor: pointer; box-shadow: var(--shadow-1);
    transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
.theme:hover { color: var(--accent); border-color: var(--accent); transform: rotate(-12deg); }
.theme__moon { display: none; }
:root[data-theme="dark"] .theme__sun { display: none; }
:root[data-theme="dark"] .theme__moon { display: block; }

/* --- 6. Крошки ------------------------------------------------------------ */

.crumbs { padding-top: 16px; font-size: .9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "·"; margin-right: 8px; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-soft); }

/* --- 7. Главная: первый экран --------------------------------------------- */

.hero { padding: 40px 20px 20px; }
/* Три ребёнка: вступление, прибор, шаги механики.
   На широком — две колонки, прибор справа во всю высоту.
   На узком — один столбец, и ПРИБОР ИДЁТ ВТОРЫМ, сразу под заголовком:
   иначе на 390 px он оказывается ниже 1800 px, а телефон здесь главный экран. */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto;
    gap: 30px 40px;
    align-items: start;
}
.hero__intro { grid-column: 1; grid-row: 1; }
.hero__grid > .flow { grid-column: 1; grid-row: 2; margin-top: 0; }
.hero__grid > .tool { grid-column: 2; grid-row: 1 / span 2; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .84rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
    color: var(--seat-b); background: var(--seat-b-soft);
    padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.hero h1 { margin-bottom: 14px; }
.hero__sub { font-size: 1.1rem; color: var(--text-soft); max-width: 38ch; margin-bottom: 22px; }

/* Схема механики: две дорожки и замок между ними. Рисует смысл, а не украшает. */
.flow { display: grid; gap: 10px; margin: 26px 0 0; }
.flow__step {
    display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 14px 16px;
    box-shadow: var(--shadow-1);
}
.flow__num {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .88rem; font-weight: 700;
    background: var(--accent-soft); color: var(--accent);
}
.flow__step--b .flow__num { background: var(--seat-b-soft); color: var(--seat-b); }
.flow__t { display: block; font-weight: 650; }
.flow__d { display: block; color: var(--text-muted); font-size: .93rem; }

/* --- 8. Прибор: карточка запуска ------------------------------------------ */

.tool {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.tool__top {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.tool__label { font-weight: 700; font-size: 1.02rem; }
.tool__hint { color: var(--text-muted); font-size: .88rem; }
.tool__body { padding: 22px 24px 24px; }

/* Выбор теста — радиокнопки, нарисованные карточками. */
.picks { display: grid; gap: 12px; margin: 0 0 20px; }
.pick { position: relative; display: block; margin: 0; }
.pick input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; margin: 0; cursor: pointer;
}
.pick__face {
    display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
    border: 1.5px solid var(--border); border-radius: var(--radius-md);
    padding: 15px 17px; background: var(--surface);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.pick:hover .pick__face { border-color: var(--accent); background: var(--surface-2); }
.pick input:checked + .pick__face {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.pick input:focus-visible + .pick__face { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick__mark {
    width: 21px; height: 21px; border-radius: 50%; margin-top: 2px;
    border: 2px solid var(--border-strong); background: var(--surface);
    display: grid; place-items: center; transition: border-color .16s ease;
}
.pick__mark::after {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); transform: scale(0); transition: transform .16s ease;
}
.pick input:checked + .pick__face .pick__mark { border-color: var(--accent); }
.pick input:checked + .pick__face .pick__mark::after { transform: scale(1); }
/* ⚠️ display: block обязателен. Оба были инлайновыми, и название теста слипалось
   с описанием в одну строку: «How Well Do You Know Each Other Answer for
   yourself, then guess…». На снимке 1280 это первое, что бросается в глаза. */
.pick__name { display: block; font-weight: 650; }
.pick__meta { display: block; color: var(--text-muted); font-size: .9rem; }

/* --- 9. Страница парной сессии -------------------------------------------- */

.seat-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin: 0 0 22px;
}
.seat {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-pill); padding: 8px 16px 8px 10px;
    box-shadow: var(--shadow-1); font-size: .93rem; font-weight: 550;
}
.seat__badge {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: .78rem; font-weight: 750; color: #fff; background: var(--seat-a);
}
.seat--b .seat__badge { background: var(--seat-b); }
.seat--waiting { color: var(--text-muted); }
.seat--waiting .seat__badge { background: var(--border-strong); }

/* Вопросы теста. Ширину ограничиваем: строка ответа во всю тысячу пикселей
   читается хуже, а глаз теряет начало следующей. */
.quiz { display: grid; gap: 18px; max-width: 860px; }
.q {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    padding: 20px 22px;
}
/* ⚠️ display: block у обоих. Внутри <legend> они инлайновые по умолчанию, и
   номер вопроса слипался с самим вопросом: «YOUR SIDE Who is more likely to be
   late?». Тот же класс дефекта, что у .pick__name — оба нашлись снимком. */
.q__n { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.q__t { display: block; font-size: 1.08rem; font-weight: 650; margin: 4px 0 14px; }
.q__sub {
    font-size: .84rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
    color: var(--seat-b); margin: 18px 0 10px;
}
.q__sub--self { color: var(--accent); }
.opts { display: grid; gap: 8px; }
.opt { position: relative; display: block; margin: 0; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.opt__face {
    display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: center;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: 11px 14px; background: var(--surface-2); font-size: .97rem;
    transition: border-color .15s ease, background .15s ease;
}
.opt:hover .opt__face { border-color: var(--accent); background: var(--surface-3); }
.opt input:checked + .opt__face { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.opt input:focus-visible + .opt__face { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt__mark {
    width: 17px; height: 17px; border-radius: 50%;
    border: 2px solid var(--border-strong); background: var(--surface);
    display: grid; place-items: center;
}
.opt__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .15s ease; }
.opt input:checked + .opt__face .opt__mark { border-color: var(--accent); }
.opt input:checked + .opt__face .opt__mark::after { transform: scale(1); }

/* Полоса заполненности — считает скрипт, но и без него форма отправляется. */
.progress { position: sticky; bottom: 0; z-index: 20; padding: 14px 0 18px; background: linear-gradient(to top, var(--bg) 62%, transparent); }
.progress__bar { height: 7px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; border: 1px solid var(--border); }
.progress__fill { height: 100%; width: 0%; background: var(--accent); transition: width .25s ease; }
.progress__row { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.progress__txt { color: var(--text-muted); font-size: .92rem; }

/* Ссылка-приглашение */
.invite {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
    padding: 24px; margin: 0 0 26px;
}
.invite__row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.invite__link {
    flex: 1 1 300px; min-width: 0;
    font: 500 .96rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--surface-2); border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text);
}
.invite__done { color: var(--ok); font-weight: 600; }

/* --- 10. Результат: сравнение --------------------------------------------- */

.score-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0 0 28px; }
.score {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    padding: 20px 22px;
}
.score__n { font-size: 2.4rem; font-weight: 750; line-height: 1; letter-spacing: -.03em; }
.score--a .score__n { color: var(--seat-a); }
.score--b .score__n { color: var(--seat-b); }
.score__l { color: var(--text-muted); font-size: .92rem; margin-top: 6px; }

.cmp { display: grid; gap: 12px; }
.cmp__row {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    padding: 16px 18px;
}
.cmp__row--match { border-left-color: var(--ok); }
.cmp__row--diff  { border-left-color: var(--warn); }
.cmp__q { font-weight: 650; margin-bottom: 12px; }
.cmp__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cmp__side { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.cmp__who {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--seat-a); margin-bottom: 4px;
}
.cmp__side--b .cmp__who { color: var(--seat-b); }
.cmp__what { font-weight: 550; }
.cmp__guess { font-size: .88rem; color: var(--text-muted); margin-top: 6px; }
.cmp__tag {
    display: inline-block; font-size: .78rem; font-weight: 700;
    padding: 2px 9px; border-radius: var(--radius-pill); margin-left: 8px;
}
.cmp__tag--hit  { background: var(--ok-soft);   color: var(--ok); }
.cmp__tag--miss { background: var(--warn-soft); color: var(--warn); }

/* Раскладка профиля: две колонки по группам */
.tally { display: grid; gap: 10px; }
.tally__row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 14px; align-items: center; }
.tally__name { font-weight: 600; }
.tally__bars { display: grid; gap: 5px; }
.tally__bar { height: 16px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; border: 1px solid var(--border); }
.tally__fill { height: 100%; background: var(--seat-a); border-radius: var(--radius-pill); transition: width .3s ease; }
.tally__fill--b { background: var(--seat-b); }

/* --- 11. Карточки тестов -------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
    padding: 24px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.card__kind {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 7px;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--accent-soft); color: var(--accent);
    padding: 5px 11px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.card__kind--b { background: var(--seat-b-soft); color: var(--seat-b); }
.card__kind--n { background: var(--surface-3); color: var(--text-soft); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-soft); }
.card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- 12. FAQ -------------------------------------------------------------- */

.faq { display: grid; gap: 10px; max-width: 860px; }
.faq__item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    overflow: hidden;
}
.faq__item summary {
    list-style: none; cursor: pointer;
    padding: 16px 54px 16px 20px; position: relative;
    font-weight: 650;
    transition: background .15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--surface-2); }
.faq__sign { position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.faq__sign::before, .faq__sign::after {
    content: ""; position: absolute; background: var(--accent); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.faq__sign::before { left: 0; top: 6px; width: 14px; height: 2px; }
.faq__sign::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.faq__item[open] .faq__sign::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 20px 18px; color: var(--text-soft); }
.faq__a p:last-child { margin-bottom: 0; }

/* --- 13. Текстовые страницы ----------------------------------------------- */

.prose { max-width: var(--maxw-text); }
.prose h2 { margin-top: 1.7em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent); }

/* Служебная страница обязана что-то ДЕЛАТЬ — контекстное действие внизу. */
.doer {
    margin-top: 34px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    padding: 22px 24px;
}
.doer h2 { margin-top: 0; font-size: 1.2rem; }
.doer__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.doer__row .field { flex: 1 1 220px; }

.rows { display: grid; gap: 10px; }
.row-item {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-1);
    text-decoration: none; color: inherit;
    transition: border-color .16s ease, transform .16s ease;
}
.row-item:hover { border-color: var(--accent); transform: translateX(3px); color: inherit; }
.row-item__t { font-weight: 620; }
.row-item__d { color: var(--text-muted); font-size: .92rem; }
.row-item__go { color: var(--accent); font-weight: 650; white-space: nowrap; }

/* Таблица — на телефоне скроллится внутри себя, а не рвёт страницу */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: 1px solid var(--border); }
.tbl { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .94rem; min-width: 520px; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.tbl th { background: var(--surface-2); font-weight: 650; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }

/* Записи «Что нового» — карточками, не таймлайном (таймлайн запрещён стратегией) */
.log-entry {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-1);
    padding: 20px 22px; margin-bottom: 14px;
}
.log-entry__date {
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted);
}
.log-entry h3 { margin: 5px 0 8px; }

/* --- 14. Подвал ----------------------------------------------------------- */

.ftr {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 42px 0 22px;
    margin-top: 40px;
}
.ftr__in {
    /* 🔴 Не grid, а flex — и это не вкусовщина. Колонок стало пять (добавилась
       ссылка на второй язык), а зашитое `repeat(3)` уводило пятую на новую строку.
       Попытка `grid-template-columns: 1.4fr repeat(auto-fit, minmax(140px,1fr))`
       ХУЖЕ: авто-повтор нельзя сочетать с `fr` в одном списке треков, правило
       становится невалидным целиком, и подвал молча схлопывается в ОДНУ колонку.
       Браузер об этом не сообщает никак — поймано замером пикселей на снимке
       09.08.2026, глазами по странице это место просто не смотрят.
       Flex переживает и четыре колонки (английский сайт, где соседа пока нет),
       и пять (русский). */
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.ftr__lead { flex: 1 1 260px; max-width: 34ch; }
.ftr__col  { flex: 1 1 140px; }
.ftr__brand { font-weight: 750; font-size: 1.1rem; margin-bottom: 8px; }
.ftr__tagline { color: var(--text-muted); font-size: .94rem; max-width: 34ch; }
.ftr__mail { font-weight: 600; font-size: .95rem; }
.ftr__title { font-weight: 700; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr__col a { color: var(--text-soft); text-decoration: none; font-size: .95rem; }
.ftr__col a:hover { color: var(--accent); text-decoration: underline; }

/* Ссылка на тот же продукт на другом языке. Подпись под ней объясняет, что там
   не перевод страницы, а второй сайт, — иначе переход выглядит как потеря места. */
.ftr__sibling-note { color: var(--text-muted); font-size: .84rem; margin: 8px 0 0; max-width: 22ch; }
.ftr__bottom {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border);
    color: var(--text-muted); font-size: .88rem;
}

/* --- 15. Плашка cookie ---------------------------------------------------- */

.cookie {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 14px; display: flex; justify-content: center;
    /* 🔴 Обёртка кликов НЕ ловит: иначе она забирает нажатие у видимых
       элементов под собой, ничего при этом не загораживая. */
    pointer-events: none;
}
.cookie__box {
    pointer-events: auto;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    max-width: 620px; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    /* ⚠️ Замер 05.08: на 390 px плашка занимала 22 % экрана телефона. */
    box-shadow: var(--shadow-3); padding: 10px 14px;
}
.cookie__box p { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text-soft); flex: 1 1 260px; }

/* --- 16. Ошибки ----------------------------------------------------------- */

.oops { text-align: center; padding: 60px 20px 30px; }
.oops__mark { margin: 0 auto 22px; width: 92px; height: 92px; }
.oops h1 { margin-bottom: 10px; }
.oops__lead { color: var(--text-soft); max-width: 46ch; margin: 0 auto 26px; }
.oops__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* --- 16а. Демонстрация правила на /how-it-works -----------------------------
   Целиком на :checked, без скрипта: если бы демонстрацию запрета рисовал JS,
   она отвалилась бы ровно там, где её и приходят проверять. */
.opt input[type="checkbox"] + .opt__face .opt__mark { border-radius: 5px; }
.opt input[type="checkbox"] + .opt__face .opt__mark::after { border-radius: 2px; }
#demo-out .demo-open { display: none; }
.demo:has(#demo-partner:checked) ~ #demo-out .demo-locked { display: none; }
.demo:has(#demo-partner:checked) ~ #demo-out .demo-open { display: block; }

/* --- 17. Адаптив ---------------------------------------------------------- */

@media (max-width: 980px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .hero__intro { grid-column: 1; grid-row: 1; }
    .hero__grid > .tool { grid-column: 1; grid-row: 2; }
    .hero__grid > .flow { grid-column: 1; grid-row: 3; }
    .hero__sub { max-width: none; }
    .ftr__lead { flex-basis: 100%; max-width: none; }
    .ftr__col  { flex: 1 1 40%; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .hdr__in { min-height: 56px; gap: 10px; }
    .nav { margin-left: 0; }

    .burger {
        display: inline-flex; align-items: center; justify-content: center;
        order: 3; margin-left: auto;
        width: 40px; height: 40px; flex: none;
        background: var(--surface); color: var(--text-soft);
        border: 1px solid var(--border); border-radius: var(--radius-pill);
        cursor: pointer;
    }
    /* Кнопка темы и бургер стоят ПАРОЙ справа. Когда margin-left: auto был у
       обеих, свободное место делилось между ними и тема оказывалась по центру. */
    .theme { order: 2; margin-left: auto; }
    .burger { margin-left: 8px; }
    .burger + .nav { order: 4; }

    .nav {
        display: none; order: 5; width: 100%;
        padding: 6px 0 12px; border-top: 1px solid var(--border);
    }
    .nav__list { flex-direction: column; gap: 2px; }
    .nav__link { padding: 11px 12px; border-radius: var(--radius-sm); }
    .nav-toggle:checked ~ .nav { display: block; }
    .nav-toggle:checked ~ .burger .burger__open { display: none; }
    .nav-toggle:checked ~ .burger .burger__close { display: inline; }
    .burger:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

    .hero { padding: 26px 16px 12px; }
    .wrap { padding: 0 16px; }
    .sect { padding: 34px 16px; }
    .tool__top, .tool__body, .invite, .card { padding-left: 18px; padding-right: 18px; }
    .q { padding: 16px 16px; }
    .cmp__pair { grid-template-columns: minmax(0, 1fr); }
    .tally__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .ftr__in { gap: 24px; }
    .ftr__col { flex-basis: 100%; }
    .score__n { font-size: 2rem; }
}

@media (max-width: 380px) {
    .brand__name { font-size: 1rem; }
    .btn { padding: 12px 20px; }
    .field--code { font-size: 1.15rem; letter-spacing: .12em; }
}


/* ⚠️ Высота плашки cookie мерена на 390 px, а не прикинута: она занимала
   17.2 % экрана телефона. Кнопка на узком экране уезжала на свою строку и
   добавляла ~40 px под сообщением, которое читают один раз. Держим её в строке
   с текстом; текст получает min-width: 0, иначе flex не даёт ему сжаться. */
@media (max-width: 640px) {
    .cookie__box { flex-wrap: nowrap; align-items: center; }
    .cookie__box > :first-child { min-width: 0; }
    .cookie__box > :last-child { flex: 0 0 auto; }
}

/* --- Ожидание партнёра ---------------------------------------------------- */

/* Подпись «ждём» с мигающей точкой. Без неё страница выглядит замершей, и человек
   идёт обновлять её руками, решив, что самообновление не работает. */
.waiting {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 14px; padding: 7px 14px 7px 12px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-soft);
    font-size: .92rem; font-weight: 600;
}
.waiting__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--seat-b); flex: none;
    animation: waiting-pulse 1.8s ease-in-out infinite;
}
@keyframes waiting-pulse {
    0%, 100% { opacity: .35; transform: scale(.82); }
    50%      { opacity: 1;   transform: scale(1); }
}
/* ⚠️ Кому движение мешает — тому его быть не должно. Это не украшение, а
   системная настройка человека, и уважать её обязательно. */
@media (prefers-reduced-motion: reduce) {
    .waiting__dot { animation: none; opacity: .9; }
}

/* Код пары в тексте: его диктуют вслух и переписывают с экрана, поэтому моноширинный,
   крупнее окружающего текста и с разрядкой между знаками. */
.code-shown {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.08em; letter-spacing: .08em;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; padding: 2px 8px; white-space: nowrap;
}

/* --- Цели для пальца ------------------------------------------------------ */

/* 🔴 Правило про 44 px — про КАСАНИЕ, а не про ширину экрана: на ноутбуке с мышью
   растягивать ссылки подвала незачем, а на телефоне в них промахиваются. Поэтому
   признак — `pointer: coarse` (палец), а не ширина окна. Замер 09.08.2026: ссылки
   подвала выходили 18 px в высоту.
   ⚠️ Отступ вертикальный, а расстояние между пунктами уменьшено на столько же —
   иначе подвал на телефоне вырастает вдвое. */
@media (pointer: coarse) {
    .ftr__col ul { gap: 0; }
    .ftr__col a,
    .ftr__mail {
        display: inline-flex; align-items: center;
        min-height: 44px;
    }
}