/* Общие стили трёх посадочных страниц wote.finance (A — /, B — /b/, C — /c/).
 *
 * Отдельный файл, а не <style> в каждой странице: ABC-тест сравнивает подачу,
 * а не оформление — кнопки, квиз, тарифы, подвал и полоса cookie обязаны
 * выглядеть одинаково, иначе разница в заявках объясняется вёрсткой.
 * Прод отдаёт CSP со `style-src 'self' 'unsafe-inline'`, внешний файл она пускает.
 *
 * Что лежит здесь: токены, типографика, кнопки, секции, кадры продукта, квиз,
 * тарифы, лид-магнит, вопросы, подвал, мобильная панель, полоса cookie.
 * Что остаётся в самой странице: раскладка первого экрана и то, что есть
 * только у неё (калькулятор у B, галерея у C).
 */

:root {
  /* семантические токены продукта — из app/src/tokens.css */
  --bg:#FAF9F5; --surface:#FFF; --surface-2:#F2F0E9; --surface-3:#E9E6DC;
  --ink:#1A1814; --muted:#6B655A; --faint:#857D6B; --line:#E6E2D6;
  --gold:#D9A62E; --gold-ink:#8A6420; --gold-soft:#F7EFDA; --gold-line:#E3CE9E;
  --pos:#1E7A46; --pos-soft:#E7F1EA; --neg:#B3383E; --neg-soft:#F7E6E7;
  --cta-bg:#1A1814; --cta-ink:#FFF;
  --dark:#17150F; --dark-2:#221E16; --on-dark:#F3F0E6; --on-dark-mute:#A9A292;
  --hair:rgba(26,24,20,.07);
  --radius:12px; --radius-s:9px; --dur:140ms;
  --font-ui:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --tint:26,24,20;
  --shadow:0 0 3px rgba(var(--tint),.08), 0 6px 10px rgba(var(--tint),.04),
           0 10px 16px rgba(var(--tint),.025);
  --shadow-pop:0 27px 40px -27px rgba(var(--tint),.28), 0 16px 32px -16px rgba(var(--tint),.10);
  color-scheme: light;
}

* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.wrap { max-width:1120px; margin:0 auto; padding:0 22px; }
.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.lbl { font:600 11.5px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); }
a { color:inherit; }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }
img { max-width:100%; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; }

/* ——— шапка ——— */
nav.top { display:flex; align-items:center; gap:18px; padding:20px 0; }
.wm { font-weight:800; font-size:19px; letter-spacing:-.02em; }
.wm b { color:var(--gold-ink); }
nav.top .links { margin-left:auto; display:flex; gap:22px; font-size:14.5px; }
nav.top a { color:var(--muted); text-decoration:none; transition:color var(--dur) ease; }
nav.top a:hover { color:var(--ink); }
nav.top a.btn { color:var(--cta-ink); }

/* ——— кнопки ——— */
.btn { display:inline-block; background:var(--cta-bg); color:var(--cta-ink);
  border-radius:var(--radius); padding:14px 26px; font-weight:700; font-size:15px;
  text-decoration:none; border:0; cursor:pointer; font-family:inherit; text-align:center;
  transition:transform var(--dur) ease, box-shadow var(--dur) ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(var(--tint),.18); }
.btn[disabled] { opacity:.55; cursor:default; transform:none; box-shadow:none; }
.btn.small { padding:9px 17px; font-size:13.5px; border-radius:var(--radius-s); }
.btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow:inset 0 0 0 1px var(--faint); }
.btn.gold { background:var(--gold); color:var(--dark); }
.btn.light { background:var(--surface); color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .btn:hover { transform:none; } }

/* ——— секции ——— */
section { padding:60px 0; }
h1 { font-size:clamp(30px,5.2vw,52px); line-height:1.05; font-weight:800; letter-spacing:-.028em;
  text-wrap:balance; }
h1 em { font-style:normal; color:var(--gold-ink); }
h2 { font-size:clamp(23px,3.4vw,33px); line-height:1.13; font-weight:800; letter-spacing:-.022em;
  margin-bottom:12px; text-wrap:balance; }
h3 { font-size:17px; letter-spacing:-.012em; }
.lede { color:var(--muted); max-width:66ch; margin-bottom:30px; font-size:16.5px; }
.kicker { display:inline-flex; align-items:center; gap:8px; background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--gold-line); color:var(--gold-ink); font-weight:700;
  font-size:13px; padding:6px 14px; border-radius:99px; margin-bottom:18px; }
.sub { margin:20px 0 0; font-size:19px; color:var(--muted); max-width:58ch; }
.sub b { color:var(--ink); font-weight:700; }
.hero-cta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:26px; }
.cta-note { font-size:13.5px; color:var(--faint); margin-top:13px; line-height:1.5; }
.cta-note b { color:var(--gold-ink); font-weight:600; }
.cta-note a { color:var(--gold-ink); }

/* ——— полоса цифр-якорей ———
 * Якорь читается боковым зрением на скролле: крупное значение и одна-две
 * строки подписи. Ровные колонки держатся равной длиной подписей (37–47
 * знаков), а не подпорками вроде min-height: текст разной длины даст рваные
 * колонки при любой высоте ячейки. Замер CDP: 1360 и 1024 px — по 2 строки
 * в каждой из четырёх подписей, 390 px — по 3. */
.anchors { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  box-shadow:inset 0 0 0 1px var(--line); border-radius:14px; overflow:hidden; margin-top:34px; }
.anchors > div { background:var(--bg); padding:20px 22px; }
.anchors .v { font-size:23px; font-weight:800; letter-spacing:-.025em; }
.anchors .l { font-size:13px; line-height:1.45; color:var(--muted); margin-top:6px;
  text-wrap:pretty; }

/* ——— карточки-вопросы ——— */
.qs { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.q-card { position:relative; background:var(--surface); border-radius:14px; padding:22px 24px;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow); }
.q-card b { display:block; font-size:17.5px; margin-bottom:8px; letter-spacing:-.012em; }
.q-card p { font-size:14.5px; color:var(--muted); }
.q-card .where { display:inline-block; margin-top:13px; font:600 11.5px/1 var(--font-mono);
  letter-spacing:.06em; color:var(--gold-ink); background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--gold-line); padding:5px 9px; border-radius:6px; }

/* ——— двухколоночник «как считают сейчас / как считаем мы» ——— */
.broken { display:grid; grid-template-columns:1fr 1fr; border-radius:18px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line); margin-top:16px; }
.bcol { padding:26px 28px; }
.bcol.l { background:var(--surface-2); }
.bcol.r { background:var(--dark); color:var(--on-dark); }
.bcol h3 { margin-bottom:16px; }
.bcol.r h3 { color:var(--gold); }
.bcol ul { list-style:none; padding:0; }
.bcol li { padding:11px 0 11px 28px; position:relative; font-size:15px;
  border-bottom:1px solid rgba(var(--tint),.07); }
.bcol.r li { border-bottom-color:rgba(243,240,230,.1); }
.bcol li:last-child { border-bottom:0; }
.bcol.l li::before { content:"✕"; position:absolute; left:0; top:11px; color:var(--neg); font-weight:700; }
.bcol.r li::before { content:"→"; position:absolute; left:0; top:11px; color:var(--gold); font-weight:700; }

/* ——— кадры продукта ——— */
.fig { background:var(--surface); border-radius:16px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow); margin-bottom:16px; }
.fig-head { padding:20px 24px 0; }
.fig-head b { font-size:17.5px; letter-spacing:-.012em; }
.fig-head p { font-size:14.5px; color:var(--muted); margin-top:6px; max-width:72ch; }
.fig img { display:block; width:100%; height:auto; margin-top:16px; }
.fig figcaption { padding:13px 24px 16px; font-size:13px; color:var(--faint);
  border-top:1px solid var(--surface-2); background:var(--bg); }
.fig.sm img { margin-top:0; }
.fig.sm figcaption { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  padding:13px 20px 15px; font-size:14px; color:var(--muted);
  border-top:1px solid var(--hair); background:var(--bg); }
.fig.sm figcaption b { color:var(--ink); font-size:15.5px; white-space:nowrap; }

/* мокап чата */
.chat-fig { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.chat-side { padding:26px 28px; }
.chat-side b { font-size:17.5px; }
.chat-side p { font-size:14.5px; color:var(--muted); margin-top:8px; }
.chat { padding:22px 24px; display:grid; gap:9px; background:var(--surface-2); align-content:center; }
.bub { max-width:88%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; }
.bub.me { justify-self:end; background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--gold-line); border-bottom-right-radius:4px; }
.bub.bot { justify-self:start; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line); border-bottom-left-radius:4px; }

/* ——— часы ——— */
.hours { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hcol { background:var(--surface); border-radius:16px; padding:24px 26px;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow); }
.hcol.accent { background:var(--gold-soft); box-shadow:inset 0 0 0 1px var(--gold-line); }
.hcol h3 { margin-bottom:15px; }
.hcol.accent h3 { color:var(--gold-ink); }
.hcol ul { list-style:none; padding:0; }
.hcol li { font-size:15px; padding:9px 0 9px 27px; position:relative;
  border-bottom:1px solid var(--hair); }
.hcol.accent li { border-bottom-color:var(--gold-line); }
.hcol li:last-child { border-bottom:0; }
.hcol li::before { content:"✓"; position:absolute; left:0; top:9px; color:var(--pos); font-weight:700; }
.hcol.accent li::before { content:"+"; color:var(--gold-ink); }
.hnote { margin-top:15px; padding-top:14px; border-top:1px solid var(--gold-line);
  font-size:13.5px; color:var(--gold-ink); }

/* ——— сравнение ——— */
.cmpwrap { overflow-x:auto; overflow-y:hidden; border-radius:16px; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line); }
.cmp { width:100%; border-collapse:collapse; font-size:14.5px; min-width:680px; }
.cmp th, .cmp td { padding:14px 16px; border-bottom:1px solid var(--surface-2); text-align:center; }
.cmp th:first-child, .cmp td:first-child { text-align:left; }
.cmp thead th { font:600 11.5px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); background:var(--surface-2); }
.cmp thead th.us { color:var(--gold-ink); background:var(--gold-soft); }
.cmp td.us { background:var(--gold-soft); }
.cmp tbody tr:last-child td { border-bottom:0; }
.cmp .y { color:var(--pos); font-weight:700; }
.cmp .n { color:var(--faint); }
.cmp .p { color:var(--gold-ink); font-size:13px; }

/* ——— тарифы ——— */
.period { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
  background:var(--surface-2); border-radius:12px; padding:5px; width:max-content; max-width:100%; }
.period button { border:0; background:transparent; cursor:pointer; font:600 13.5px/1 var(--font-ui);
  color:var(--muted); padding:9px 14px; border-radius:8px; white-space:nowrap;
  transition:background var(--dur) ease, color var(--dur) ease; }
.period button[aria-pressed="true"] { background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow); }
.period .off { color:var(--gold-ink); font-weight:700; }

.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch; }
.plan { background:var(--surface); border-radius:18px; padding:24px 22px;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow); display:flex; flex-direction:column; }
.plan.main { box-shadow:inset 0 0 0 2px var(--gold-line), var(--shadow); }
.plan-name { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.plan-name b { font-size:19px; letter-spacing:-.015em; }
.badge { font:600 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  background:var(--gold-soft); color:var(--gold-ink); padding:5px 9px; border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--gold-line); }
.price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:16px 0 4px; }
.price .v { font-size:38px; font-weight:800; letter-spacing:-.035em; line-height:1; }
.price .per { font-size:14px; color:var(--muted); }
.price .ask { font-size:27px; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.price .was { font-size:14px; color:var(--faint); text-decoration:line-through; }
.plan .why { font-size:14px; color:var(--muted); margin:6px 0 16px; }
.plan ul { list-style:none; padding:0; margin:0 0 20px; }
.plan li { font-size:14px; padding:6px 0 6px 24px; position:relative; }
.plan li::before { content:"✓"; position:absolute; left:0; color:var(--gold-ink); font-weight:700; }
.plan .foot { margin-top:auto; }
.plan .foot .btn { width:100%; }
.plan .note { font-size:12.5px; color:var(--faint); margin-top:10px; }

.price-frame { margin-top:18px; background:var(--surface-2); border-radius:16px; padding:26px 30px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.price-frame b { display:block; font-size:15.5px; margin-bottom:5px; }
.price-frame p { font-size:14px; color:var(--muted); }

/* ——— плашка триала над карточками ———
   Урок соседнего продукта: мелкая строка под блоком тарифов не читается —
   владелец не понял, что бесплатные две недели вообще есть. */
/* Один столбец, а не две колонки. Двухколоночный вариант равнялся по базовой
   линии ПЕРВОЙ строки абзаца: заголовок в одну строку висел сверху колонки
   в три, и блок читался кривым. Заголовок сверху, детали под ним — колонкам
   больше нечему разъезжаться, а порядок чтения совпадает со смыслом:
   сначала обещание, потом условия. */
.trial { margin-bottom:16px; background:var(--gold-soft); border-radius:16px;
  padding:18px 24px; box-shadow:inset 0 0 0 1px var(--gold-line); }
.trial b { display:block; font-size:19px; letter-spacing:-.02em; line-height:1.25; }
.trial p { margin:6px 0 0; font-size:14.5px; line-height:1.5; color:var(--muted);
  max-width:86ch; }
/* «Агентство» и его цена рвались по строкам: название оставалось на одной,
   сумма уезжала на следующую. Связываем пару целиком, а не только число. */
.trial .nb { white-space:nowrap; }
@media (max-width:820px){
  .trial { padding:16px 18px; }
  .trial b { font-size:17px; }
}

/* ——— лид-магнит ——— */
.audit { background:var(--dark); color:var(--on-dark); border-radius:20px; padding:36px 40px;
  display:grid; grid-template-columns:1.4fr .6fr; gap:32px; align-items:center; }
.audit h2 { color:#fff; margin-bottom:10px; }
.audit p { color:var(--on-dark-mute); font-size:15.5px; max-width:62ch; }
.audit ol { margin:16px 0 0; padding-left:20px; color:var(--on-dark-mute); font-size:14.5px; }
.audit li { padding:3px 0; }
.audit .side { display:grid; gap:10px; }
.audit .side .btn { width:100%; }
.audit .side small { font-size:12.5px; color:var(--on-dark-mute); line-height:1.5; }

/* ——— квиз ——— */
.quiz-wrap { background:var(--gold-soft); border-radius:20px; padding:34px 38px;
  box-shadow:inset 0 0 0 1px var(--gold-line); display:grid; grid-template-columns:.9fr 1.1fr;
  gap:36px; align-items:start; }
.quiz-wrap h2 { font-size:clamp(22px,3vw,29px); }
.quiz-wrap .lede { margin-bottom:0; }
.quiz-side ul { list-style:none; padding:0; margin:18px 0 0; }
.quiz-side li { font-size:14.5px; color:var(--muted); padding:6px 0 6px 24px; position:relative; }
.quiz-side li::before { content:"✓"; position:absolute; left:0; color:var(--gold-ink); font-weight:700; }

.quiz { background:var(--surface); border-radius:16px; padding:24px 26px;
  box-shadow:var(--shadow); }
.quiz-bar { display:flex; gap:6px; margin-bottom:18px; }
.quiz-bar i { flex:1; height:4px; border-radius:2px; background:var(--surface-3); }
.quiz-bar i.on { background:var(--gold); }
.quiz-step[hidden] { display:none; }
.quiz-q { font-size:19px; font-weight:700; letter-spacing:-.015em; margin-bottom:4px; }
.quiz-hint { font-size:13.5px; color:var(--faint); margin-bottom:16px; }
.opts { display:grid; gap:9px; }
.opt { text-align:left; border:0; cursor:pointer; font:500 15px/1.35 var(--font-ui); color:var(--ink);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--radius);
  padding:14px 16px; transition:box-shadow var(--dur) ease, background var(--dur) ease; }
.opt:hover { box-shadow:inset 0 0 0 1px var(--gold-line); background:var(--gold-soft); }
.opt[aria-pressed="true"] { background:var(--gold-soft); box-shadow:inset 0 0 0 2px var(--gold); }
.quiz-back { margin-top:16px; background:none; border:0; cursor:pointer; padding:0;
  font:500 13.5px/1 var(--font-ui); color:var(--faint); }
.quiz-back:hover { color:var(--ink); }

.fields { display:grid; gap:12px; }
.fields label { font:600 12px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:5px; display:block; }
.fields input[type=text], .fields input[type=tel], .fields input[type=email] {
  width:100%; padding:13px 14px; border-radius:var(--radius); border:0;
  box-shadow:inset 0 0 0 1px var(--line); background:var(--surface);
  font:400 15px/1.4 var(--font-ui); color:var(--ink); }
.fields input:focus { box-shadow:inset 0 0 0 2px var(--gold); outline:none; }
.chan { display:flex; gap:7px; flex-wrap:wrap; }
.chan label { margin:0; }
.chan input { position:absolute; opacity:0; width:0; height:0; }
.chan span { display:inline-block; cursor:pointer; font:600 13.5px/1 var(--font-ui); color:var(--muted);
  padding:10px 15px; border-radius:var(--radius-s); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow var(--dur) ease; }
.chan input:checked + span { color:var(--ink); box-shadow:inset 0 0 0 2px var(--gold);
  background:var(--gold-soft); }
.chan input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted);
  line-height:1.45; }
.consent input { margin:2px 0 0; width:17px; height:17px; flex:none; accent-color:var(--gold-ink); }
.consent a { color:var(--gold-ink); }
.form-msg { font-size:14.5px; padding:12px 14px; border-radius:var(--radius); display:none; }
.form-msg.ok { display:block; background:var(--pos-soft); color:var(--pos); }
.form-msg.err { display:block; background:var(--neg-soft); color:var(--neg); }
.form-msg.err a { color:var(--neg); font-weight:700; }
.quiz-note { font-size:12.5px; color:var(--faint); }
.quiz-note a { color:var(--gold-ink); }

/* маска телефона: библиотека лежит рядом (CSP запрещает внешние скрипты),
   поле должно выглядеть одинаково и без неё */
.iti { width:100%; }
.iti input[type=tel] { padding-left:calc(var(--iti-flag-width, 20px) + 32px) !important; }

/* ——— вопросы ——— */
.qa { border-top:1px solid var(--hair); max-width:800px; }
.qa details { border-bottom:1px solid var(--hair); }
.qa summary { list-style:none; cursor:pointer; padding:17px 34px 17px 0; position:relative;
  font-size:17px; font-weight:600; letter-spacing:-.01em; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:"+"; position:absolute; right:6px; top:15px; font-size:19px;
  font-weight:400; color:var(--faint); }
.qa details[open] summary::after { content:"−"; }
.qa summary:hover { color:var(--gold-ink); }
.qa .a { padding:0 34px 20px 0; }
.qa .a p { font-size:15.5px; color:var(--muted); max-width:70ch; }
.qa .a p + p { margin-top:10px; }
.qa .a b { color:var(--ink); font-weight:700; }
.qa .a a { color:var(--gold-ink); }

/* ——— финал и подвал ———
 * Последний экран закрывает сделку: одно главное действие крупной кнопкой,
 * под ней снятые возражения, запасное действие — ссылкой. Две кнопки
 * одинакового веса тут конкурировали, и главное было не видно. */
.final { text-align:center; padding:70px 0 40px; }
.final h2 { font-size:clamp(24px,3.6vw,34px); max-width:20ch; margin-left:auto;
  margin-right:auto; }
.final .lede { margin:14px auto 28px; max-width:58ch; }
.final .btn { padding:17px 36px; font-size:16.5px; }
.final-facts { list-style:none; padding:0; margin:22px auto 0; max-width:1000px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px;
  font-size:14px; color:var(--muted); }
/* разделитель идёт ПОСЛЕ пункта, а не перед следующим: точка перед следующим
   при переносе строки повисает в начале новой строки отдельным символом */
.final-facts li:not(:last-child)::after { content:"·"; color:var(--gold);
  margin-left:16px; font-weight:700; }
.final-alt { margin-top:22px; font-size:14.5px; color:var(--faint); }
.final-alt .linkish { font-size:14.5px; padding:6px 2px; }

footer { border-top:1px solid var(--hair); padding:38px 0 46px; font-size:14px; }
.fcols { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px; }
.fcols .lbl { margin-bottom:12px; display:block; }
.fcols a { display:block; color:var(--muted); text-decoration:none; padding:4px 0;
  transition:color var(--dur) ease; }
.fcols a:hover { color:var(--ink); }
.fcols p { color:var(--muted); margin-top:11px; max-width:34ch; font-size:14px; }
.fbottom { margin-top:30px; padding-top:22px; border-top:1px solid var(--hair);
  color:var(--faint); display:flex; gap:18px; flex-wrap:wrap; font-size:13px; }

/* ——— мобильная панель действия ——— */
.mobar { display:none; }

/* ——— полоса cookie (разметка — landing/_cookiebar.html) ——— */
.cb { position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 22px calc(13px + env(safe-area-inset-bottom));
  background:var(--surface); color:var(--ink);
  font:400 13.5px/1.5 var(--font-ui);
  box-shadow:0 -1px 0 var(--line), 0 -12px 28px rgba(26,24,20,.07); }
.cb[hidden] { display:none; }
.cb p { margin:0; max-width:74ch; }
.cb a { color:var(--gold-ink); }
.cb-act { margin-left:auto; display:flex; gap:10px; align-items:center; }
.cb-ok { flex:none; border:0; cursor:pointer; border-radius:9px;
  background:var(--cta-bg); color:var(--cta-ink);
  font:600 13.5px/1 var(--font-ui); padding:11px 20px;
  transition:transform 140ms ease; }
.cb-ok:hover { transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce) { .cb-ok:hover { transform:none; } }

/* ——— адаптив ——— */
@media (max-width:1080px){
  .plans { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px){
  .qs, .broken, .hours, .chat-fig, .quiz-wrap, .audit { grid-template-columns:1fr; }
  .quiz-wrap { gap:24px; }
  .audit { padding:28px 26px; }
  .fcols { grid-template-columns:1fr 1fr; }
  .price-frame { grid-template-columns:1fr; gap:18px; }
}
@media (max-width:820px){
  .anchors { grid-template-columns:1fr 1fr; }
  /* в две колонки на телефоне ячейка ~128px по тексту: 23px кегль ломает
     значения из двух слов вроде «48 часов» за границу колонки */
  .anchors .v { font-size:20px; }
  .anchors .l { font-size:12.5px; }
}
@media (max-width:720px){
  /* широкие кадры интерфейса не сжимаем в кашу — даём прокрутить в натуральную величину */
  .fig-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .fig-scroll img { width:auto; height:230px; max-width:none; border-radius:0; }

  .mobar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20; gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--surface);
    box-shadow:0 -1px 0 var(--line), 0 -10px 24px rgba(var(--tint),.07); }
  .mobar .btn { flex:1; padding:14px 12px; font-size:14px; }
  body { padding-bottom:78px; }        /* панель не должна закрывать подвал */
  /* панель занимает низ экрана — полоса cookie встаёт над ней, но только
     на страницах, где панель есть: :has() держит правило и разметку вместе */
  .cb { padding:12px 16px; font-size:13px; gap:10px; }
  body:has(.mobar) .cb { bottom:calc(70px + env(safe-area-inset-bottom)); }
  .cb-act { margin-left:0; width:100%; }
  .cb-ok { width:100%; padding:12px 16px; }
}
@media (max-width:600px){
  nav.top .links { display:none; }
  nav.top .btn.small { margin-left:auto; }
  section { padding:40px 0; }
  .qa summary { font-size:16px; }
  /* 16px — граница, ниже которой iOS зумит страницу при фокусе в поле */
  .fields input[type=text], .fields input[type=tel], .fields input[type=email] { font-size:16px; }
  /* ссылки подвала идут стопкой без зазора: 30px на строку — соседнюю задеваешь
     пальцем, поэтому на узком экране добираем до 40 */
  .fcols a { padding:9px 0; }
  .cb-ok { min-height:40px; }
  /* переключатель периода оплаты — четыре кнопки в ряд по 32px: на телефоне
     промахиваешься в соседнюю и видишь чужую цену */
  .period button { min-height:40px; }
  .btn.small { min-height:40px; }
  .sub { font-size:17px; }
  .hero-cta { flex-direction:column; align-items:stretch; }
  .plans { grid-template-columns:1fr; }
  .bcol, .plan, .hcol, .quiz, .quiz-wrap { padding:22px 20px; }
  .quiz-wrap { padding:24px 18px; }
  .audit { padding:24px 20px; }
  .price-frame { padding:22px 20px; }
  .price .v { font-size:34px; }
  .final .btn { display:block; margin:0 auto; max-width:340px; }
  .final-facts { flex-direction:column; align-items:center; gap:7px; }
  .final-facts li:not(:last-child)::after { display:none; }
  .fcols { grid-template-columns:1fr; gap:22px; }
}

/* ——— мелочи квиза ——— */
.linkish { background:none; border:0; cursor:pointer; padding:4px 0 0;
  font:500 13px/1.3 var(--font-ui); color:var(--gold-ink); text-decoration:underline;
  text-underline-offset:3px; }
.linkish[hidden] { display:none; }
.quiz-done[hidden] { display:none; }
.quiz-done p { font-size:15px; color:var(--muted); margin:6px 0 16px; max-width:44ch; }
.quiz-done .quiz-q { color:var(--pos); }
/* строка под боль, выбранную в квизе: скрипт снимает hidden с одной из них */
.quiz-done .pain { color:var(--ink); font-weight:600; }
.quiz-done .pain[hidden] { display:none; }

/* ловушка для ботов в форме заявки: вне экрана, не в табе; display:none боты обходят */
.quiz .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}