/* ═══════════════════════════════════════════════════════════════
   quiz.css · пошаговая диагностика по ЭММ, dmitryrost.ru/quiz

   Дизайн-система НЕ выбирается заново. Страница обязана выглядеть как соседняя
   /diagnostics/, поэтому берутся действующие токены сайта: пара Lora плюс Inter,
   охра единственным акцентом, радиус 3px, два уровня контура --hair и --edge.
   Решения зафиксированы в сайт/ЖУРНАЛ_РЕШЕНИЙ_сайт-v2.md, «Реестр решений».

   Главный принцип вёрстки: экран шага помещается в окно без прокрутки. Всё,
   что не помещается, либо сокращается, либо уходит в модалку пояснения.
   Правка Дмитрия 21.08.2026 дословно: «ему не надо скроллить, он просто выбирает».
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#FAF8F4; --fog:#F2EFE8; --card:#FFFFFF; --wash:rgba(168,84,31,.07);
  --ink:#0F0E0C; --text:#3F3A34; --stone:#6B665E; --ash:#726B62;
  --hair:#C6BDAB; --edge:#8F8471;
  --ochre:#A8541F; --ochre-deep:#7A3A12; --ok:#4E8C5F;
  --shadow:rgba(168,84,31,.26);
  --r:3px;
  --qz-top:64px;   /* высота шапки, от неё считается высота рабочей области */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font:400 clamp(.95rem,1.02vw,1.06rem)/1.6 Inter,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  min-height:100vh;min-height:100dvh;
}
h1,h2,h3,.serif{font-family:Lora,Georgia,serif;font-weight:500}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* ── шапка: только опознание и телефон ───────────────────────────
   Навигации по сайту здесь нет намеренно. Любая ссылка со страницы квиза это
   выход из воронки, а задача страницы одна: довести до конца. */
.qz-head{
  position:fixed;top:0;left:0;right:0;z-index:40;height:var(--qz-top);
  display:flex;align-items:center;
  background:var(--paper);border-bottom:1px solid var(--hair);
}
.qz-head .in{
  width:100%;max-width:1100px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:14px;
}
.qz-head .ava{width:34px;height:34px;border-radius:50%;flex:none}
.qz-head .nm{font:600 .96rem/1.1 Inter,sans-serif}
.qz-head .ds{font-size:.76rem;color:var(--stone);line-height:1.25}
.qz-head .sp{margin-left:auto}
.qz-head .tel{font-size:.94rem;text-decoration:none;color:var(--ink);white-space:nowrap}
@media(max-width:620px){.qz-head .ds,.qz-head .tel{display:none}}

/* ── полоса прогресса под шапкой ─────────────────────────────────
   Сегментами, а не сплошной: 14 делений показывают КОНЕЧНОСТЬ пути. Сплошная
   полоса на 7% выглядит как «ещё очень долго», четырнадцать делений как
   «четырнадцать кликов». Это разное ощущение при одинаковой цифре. */
.qz-prog{
  position:fixed;top:var(--qz-top);left:0;right:0;z-index:39;
  background:var(--paper);border-bottom:1px solid var(--hair);
}
.qz-prog .in{max-width:1100px;margin:0 auto;padding:10px 20px 12px}
.qz-seg{display:flex;gap:3px}
.qz-seg i{
  flex:1;height:4px;border-radius:2px;background:var(--hair);
  transition:background .25s ease;
}
.qz-seg i.on{background:var(--ochre)}
.qz-seg i.cur{background:var(--ochre-deep)}
.qz-meta{
  margin-top:8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);
}
.qz-meta b{color:var(--ink);font-weight:600}
.qz-meta .mod{color:var(--ochre-deep)}

/* ── рабочая область ─────────────────────────────────────────────
   Отступ сверху равен шапке плюс полоса, снизу под кнопку «назад». */
.qz-main{
  max-width:840px;margin:0 auto;
  padding:calc(var(--qz-top) + 74px) 20px 96px;
}
/* На телефоне нижний отступ урезан: после закрепления высоты шапки самый
   длинный блок (14-й) перестал помещаться в окно на 13 px, и появлялась
   прокрутка ровно на одном шаге из четырнадцати. Кнопка «назад» занимает
   снизу 60 px вместе с отступом, поэтому 76 px её не задевают. Замер, а не
   подбор: _tools/quiz-pass.mjs проверяет все 14 шагов на попадание в окно. */


/* Экран входа и итог полосы прогресса не показывают, но отступ под неё
   резервировался всегда: 74 px пустоты сверху. На телефоне из-за этого кнопка
   уходила ниже сгиба. Класс ставит скрипт в той же функции, что прячет полосу,
   поэтому отступ и полоса не могут разъехаться.
   Правка Дмитрия 23.08.2026: «убрать пустоту вверху». */
.qz-main.no-prog{padding-top:calc(var(--qz-top) + 16px)}
/* На экране входа и на итоге кнопка «назад» скрыта, поэтому нижний отступ под
   неё тоже лишний. Те же 60 px, что она занимает, на входе просто пустота. */
.qz-main.no-prog{padding-bottom:24px}
.qz-step{display:none}
.qz-step.on{display:block;animation:qzIn .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes qzIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .qz-step.on{animation:none}
  .qz-seg i{transition:none}
}

/* ── экран входа ─────────────────────────────────────────────── */
.qz-hero .ask{
  font:500 .88rem/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  color:var(--stone);display:block;
}
.qz-hero h1{
  margin-top:12px;
  font:500 clamp(1.9rem,4.4vw,3.2rem)/1.03 Lora,Georgia,serif;
  letter-spacing:-.02em;max-width:18ch;
}
.qz-hero .sub{margin-top:18px;color:var(--stone);max-width:52ch;font-size:1.06rem}
.qz-facts{
  margin-top:26px;display:grid;gap:14px;
  border-top:1px solid var(--hair);padding-top:22px;
}
@media(min-width:700px){.qz-facts{grid-template-columns:1fr 1fr;gap:26px}}

/* Телефон: экран входа обязан помещаться целиком, вместе с кнопкой.
   Требование Дмитрия дословно: «всё должно уместиться на одном экране
   мобильного телефона». Мерится не по высоте устройства, а по видимой области:
   панель браузера съедает снизу 150-250 px, и именно там пряталась кнопка.
   Значения сняты замером на 360x600, 390x664 и 412x700, а не подобраны. */


/* Отдельная ступень для самых узких телефонов (iPhone SE, старые Android).
   Их видимая область 600 px и меньше, и длинный заголовок там уходит в четыре
   строки. Ступень вынесена отдельно, чтобы не трогать кегль на обычных
   телефонах: на 390 и 412 всё помещается и без неё. */

.qz-facts div b{
  display:block;font:500 1.5rem/1.1 Lora,Georgia,serif;color:var(--ochre);
}
.qz-facts div span{display:block;margin-top:4px;color:var(--stone);font-size:.92rem}

/* ── шаг вопроса ─────────────────────────────────────────────────
   Высота шапки закреплена намеренно. Заголовки блоков и подсказки разной
   длины, и без резерва варианты ответа съезжают между шагами на 61 px на
   десктопе и на 98 px на телефоне. В квизе, который проходят быстрыми
   кликами, это значит промах: человек метит в «нет», а попадает в «слабо».
   Пустота под короткой подсказкой это плата за то, что цель не двигается.
   Значения сняты замером по всем 14 шагам, а не подобраны на глаз. */
/* Резерв высоты остаётся ТОЛЬКО на широком экране. Там прижатия к низу нет:
   экран высокий, и прижатие увело бы вопрос в подвал. Значение 224px это
   фактический максимум по всем 14 шагам (замер на 1440 дал 219), а не круглое
   число. Прежние 176px были меньше реального максимума, поэтому цель всё равно
   съезжала на 43px.
   На телефоне резерва НЕТ: там стабильность держит прижатие всего блока к низу,
   а резерв только создавал дыру между кнопкой пояснения и вариантами. Правка
   Дмитрия 24.08.2026 «убрать пустоту». */
/* Резерв уменьшен с 224px до 168px 25.08.2026: замер на 1140px показал 89px
   пустоты между кнопкой пояснения и вариантами. Совсем убирать нельзя, иначе
   список ответов прыгает вверх-вниз при разной длине вопроса и человек мажет
   мимо. 168px это высота самой длинной шапки из четырнадцати. */
@media(min-width:760px){.qz-q-h{min-height:168px}}

.qz-q h2{
  font:500 clamp(1.35rem,2.6vw,1.95rem)/1.18 Lora,Georgia,serif;
  /* 24ch резали «Допродажи (Upsell / Cross-sell)» на две строки при том, что
     на десктопе места хватает с запасом. 34ch держит самый длинный из
     четырнадцати заголовков в одну строку. На телефоне ограничение и так
     задаёт ширина экрана, поэтому мобильная вёрстка не меняется. */
  letter-spacing:-.01em;max-width:34ch;
}
.qz-q .ask-t{margin-top:10px;color:var(--text);max-width:56ch}
/* Подсказка в одну строку. Всегда видна: это тот минимум, без которого человек
   не может честно выбрать. Всё остальное пояснение живёт за кнопкой. */
.qz-hint{
  margin-top:14px;padding-left:14px;border-left:2px solid var(--ochre);
  color:var(--stone);font-size:.94rem;max-width:60ch;
}

/* ── варианты ответа ─────────────────────────────────────────────
   Здесь главное решение всей страницы. Вариантами служат формулировки уровней
   зрелости из поля scale, а не цифры «1 2 3 4 5». Человек выбирает предложение
   про свой бизнес и читает половину пояснения прямо в момент выбора.
   Цифра остаётся слева мелко: она нужна для понимания шкалы, но не для выбора. */
.qz-opts{margin-top:22px;display:grid;gap:9px}
.qz-opt{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  padding:15px 17px;background:var(--card);
  border:1px solid var(--edge);border-radius:var(--r);
  transition:border-color .15s ease,background .15s ease,transform .08s ease;
}
.qz-opt:hover{border-color:var(--ink);background:var(--fog)}
.qz-opt:active{transform:translateY(1px)}
.qz-opt:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.qz-opt .n{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--fog);border:1px solid var(--edge);
  font:600 .82rem/1 Inter,sans-serif;color:var(--stone);
}
.qz-opt .t{flex:1;min-width:0;line-height:1.45}
.qz-opt.sel{border-color:var(--ochre);background:var(--wash)}
.qz-opt.sel .n{background:var(--ochre);border-color:var(--ochre);color:#FAF8F4}
.qz-opt.sel .t{color:var(--ink);font-weight:500}

/* ── Перелив на кнопке пояснения, первые два шага ────────────────────
   Правка Дмитрия 24.08.2026. Приём тот же, что на раскрывашках диагностики:
   он не украшение, а обучение. Показывает, что серую плашку можно нажать.
   Держится на двух шагах, а не на всех четырнадцати: после второго человек
   уже знает про кнопку, и дальше блик перестаёт учить и начинает мешать
   читать вопрос. Класс ставит скрипт в renderQ по номеру шага. */
.qz-why{position:relative;overflow:hidden;isolation:isolate}
.qz-why::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 0%, transparent 38%,
    rgba(168,84,31,.18) 47%,
    rgba(168,84,31,.34) 50%,
    rgba(168,84,31,.18) 53%,
    transparent 62%, transparent 100%);
  background-size:260% 100%;background-position:180% 0;
}
.qz-why.pulse::after{animation:qzSheen 3.4s ease-in-out infinite}
@keyframes qzSheen{
  0%   {background-position:180% 0}
  38%  {background-position:-80% 0}
  100% {background-position:-80% 0}   /* пауза длиннее прохода */
}
/* Нашли и нажали: блик своё дело сделал. */
.qz-why:hover::after,.qz-why:focus-visible::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){
  .qz-why.pulse::after{animation:none}
  .qz-why::after{opacity:0}
}

/* кнопка пояснения */
/* display:flex, а не inline-flex. Строчный элемент сидит на базовой линии, и под
   ним остаётся «хвост» интерлиньяжа родителя: здесь это давало 14 px пустоты,
   которые не убирались никаким margin. Дмитрий назвал этот зазор пустотой
   дважды, и оба раза правка отступа его не брала, потому что причина была не в
   отступе. Найдено замером: фактический зазор 22 px при заданных 8 px.
   width:fit-content нужен, чтобы блочный flex не растянулся на всю ширину. */
.qz-why{
  margin-top:12px;display:flex;width:fit-content;align-items:center;gap:9px;
  padding:9px 15px;background:var(--fog);
  border:1px solid var(--edge);border-radius:var(--r);
  color:var(--ochre);font:500 .92rem/1.2 Inter,sans-serif;
}
.qz-why:hover{background:var(--wash);border-color:var(--ochre)}
.qz-why .i{
  width:17px;height:17px;flex:none;border-radius:50%;background:var(--ochre);
  color:#FAF8F4;display:grid;place-items:center;font-size:.84rem;line-height:1;
}

/* ── шаг выручки ─────────────────────────────────────────────── */
.qz-f{display:grid;gap:6px;margin-top:22px;max-width:460px}
.qz-f label{font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-deep);font-weight:600}
.qz-f input{
  width:100%;font:inherit;color:var(--ink);background:var(--fog);
  border:1.5px solid var(--ink);border-radius:var(--r);padding:14px 16px;
  font-family:Lora,Georgia,serif;font-size:1.3rem;
}
.qz-f input::placeholder{font-family:Inter,sans-serif;font-size:1rem;color:var(--ash)}
.qz-f input:focus{outline:2px solid var(--ochre);outline-offset:2px}
/* Адрес сайта: типографика без засечек, потому что это URL, а не число. Рамка
   и метка при этом такие же, как у выручки: оба поля обязательные, и разный
   контур читался бы как разный статус. */
.qz-f.url input{font-family:Inter,sans-serif;font-size:1.05rem}
.qz-f-note{color:var(--ash);font-size:1rem;line-height:1.45}

/* Ошибка поля. Красный не единственный носитель смысла: рядом знак и текст,
   иначе при дальтонизме подсказка пропадает (WCAG 1.4.1). */
.qz-f-err{
  color:#a3231b;font-size:1rem;line-height:1.4;font-weight:600;
  display:flex;gap:6px;align-items:baseline;
}
.qz-f-err::before{content:"!";flex:0 0 auto;font-weight:700}
.qz-f-err[hidden]{display:none}
.qz-f input.bad{border-color:#a3231b;background:#fdf5f4}
.qz-f input.bad:focus{outline-color:#a3231b}

/* ── кнопки действия ─────────────────────────────────────────── */
/* Подпись под кнопкой это второй ряд, а не сосед по строке. При строчном
   направлении flex делал <small> соседом, и на телефоне «Начать, первый вопрос»
   разваливалось на три строки, а подпись уезжала вбок. Найдено на боевой
   на ширине 390. */
.qz-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:15px 30px;border-radius:var(--r);text-decoration:none;text-align:center;
  font-weight:500;font-size:1.12rem;border:1px solid transparent;
}
.qz-btn-p{background:var(--ochre);color:#FAF8F4;box-shadow:0 14px 34px var(--shadow)}
.qz-btn-p:hover{filter:brightness(1.06)}
.qz-btn-s{background:transparent;color:var(--ink);border-color:var(--edge)}
.qz-btn-s:hover{border-color:var(--ink);background:var(--fog)}
.qz-btn:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.qz-btn small{display:block;font-size:.9rem;font-weight:400;opacity:.85;margin-top:2px}
.qz-acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── «назад» ──────────────────────────────────────────────────
   Живёт в строке прогресса, а не в закрепе внизу. В закрепе она держала под
   собой 76 px отступа, и ровно из-за них шаги вопросов не помещались в экран
   телефона с панелью браузера. Здесь она стоит рядом с номером блока и не
   занимает вертикали вовсе. */
.qz-back{
  display:none;margin-left:auto;align-items:center;gap:6px;
  padding:5px 11px;background:var(--paper);
  border:1px solid var(--edge);border-radius:var(--r);
  color:var(--stone);font:500 .78rem/1.2 Inter,sans-serif;
  letter-spacing:normal;text-transform:none;
}
.qz-back.on{display:inline-flex}
.qz-back:hover{color:var(--ink);border-color:var(--ink)}

/* ── модалка пояснения ───────────────────────────────────────────
   Одна реализация на все ширины: на телефоне шторка снизу, на десктопе
   панель по центру. Два отдельных механизма означали бы два набора ошибок. */
.qz-sheet[hidden]{display:none}
.qz-sheet{
  position:fixed;inset:0;z-index:60;display:flex;
  align-items:flex-end;justify-content:center;
}
@media(min-width:760px){.qz-sheet{align-items:center}}
.qz-scrim{position:absolute;inset:0;background:rgba(15,14,12,.42)}
.qz-sheet-b{
  position:relative;width:100%;max-width:640px;max-height:86vh;max-height:86dvh;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--edge);
  border-radius:14px 14px 0 0;
  animation:qzUp .26s cubic-bezier(.2,.7,.3,1) both;
}
@media(min-width:760px){
  .qz-sheet-b{border-radius:var(--r);max-height:80vh}
}
@keyframes qzUp{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.qz-sheet-b{animation:none}}
.qz-sheet-h{
  flex:none;display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px 14px;border-bottom:1px solid var(--hair);
}
.qz-sheet-h p{
  font:500 .88rem/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  color:var(--stone);
}
.qz-sheet-h b{display:block;margin-top:5px;font:500 1.12rem/1.3 Lora,Georgia,serif;color:var(--ink)}
.qz-x{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:var(--r);
  border:1px solid var(--edge);display:grid;place-items:center;
  color:var(--stone);font-size:1.1rem;line-height:1;
}
.qz-x:hover{border-color:var(--ink);color:var(--ink)}
.qz-sheet-c{padding:18px 20px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.qz-sheet-c .simple{color:var(--text);line-height:1.62}
.qz-sheet-c dl{margin-top:18px;display:grid;gap:12px}
.qz-sheet-c dt{
  font:500 .84rem/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;
  color:var(--stone);
}
.qz-sheet-c dd{margin-top:3px;color:var(--text)}
.qz-sheet-c dd.bad{color:var(--ochre-deep)}

/* ── итог ────────────────────────────────────────────────────── */
.qz-res .ask{
  font:500 .88rem/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ochre);display:block;
}
.qz-res h2{margin-top:12px;font:500 clamp(1.8rem,4vw,2.9rem)/1.05 Lora,Georgia,serif;letter-spacing:-.02em}
.qz-nums{
  margin-top:24px;display:grid;gap:18px;
  border-top:1px solid var(--hair);padding-top:22px;
}
@media(min-width:620px){.qz-nums{grid-template-columns:repeat(3,1fr);gap:30px}}
.qz-nums .lab{
  font:500 .84rem/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;
  color:var(--stone);display:block;
}
.qz-nums .val{
  display:block;margin-top:5px;white-space:nowrap;
  font:500 clamp(1.5rem,3.4vw,2.3rem)/1 Lora,Georgia,serif;
  letter-spacing:-.02em;color:var(--ochre);
}
.qz-lvl{margin-top:28px;padding-top:22px;border-top:1px solid var(--hair)}
.qz-lvl .name{display:block;margin-top:5px;font:500 clamp(1.3rem,2.4vw,1.8rem)/1.2 Lora,Georgia,serif;color:var(--ink)}
.qz-lvl .desc{margin-top:12px;max-width:70ch;color:var(--text)}
.qz-lvl .sense{margin-top:16px;max-width:70ch;color:var(--text);border-left:2px solid var(--ochre);padding-left:16px}

.qz-mods{margin-top:28px;padding-top:22px;border-top:1px solid var(--hair)}
.qz-mods-l{margin-top:16px;display:grid;gap:14px}
@media(min-width:700px){.qz-mods-l{grid-template-columns:1fr 1fr;gap:16px 34px}}
.qz-mb .nm{font:500 1.02rem/1.3 Inter,sans-serif;color:var(--ink)}
.qz-mb .sc{margin-top:3px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--stone);font-size:.94rem}
.qz-mb .vd{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.qz-mb .vd-bad{color:var(--ochre)}
.qz-mb .vd-mid{color:var(--ochre-deep)}
.qz-mb .vd-ok{color:var(--stone)}
.qz-mb .vd-top{color:var(--ok)}
.qz-mb .bar{margin-top:8px;height:6px;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.qz-mb .bar i{display:block;height:100%;background:var(--ochre)}
.qz-next{margin-top:20px;max-width:74ch;color:var(--ink);font-size:1.04rem;line-height:1.6}

.qz-weak{margin-top:28px;padding-top:22px;border-top:1px solid var(--hair)}
.qz-weak-l{margin-top:16px;display:grid;gap:12px}
.qz-wi{
  background:var(--card);border:1px solid var(--hair);border-left:3px solid var(--ochre);
  border-radius:var(--r);padding:16px 18px;
}
.qz-wi .r{font:500 .84rem/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--stone)}
.qz-wi .nm{margin-top:4px;font:500 1.08rem/1.3 Lora,Georgia,serif;color:var(--ink)}
.qz-wi .sc{margin-top:6px;display:inline-block;padding:2px 10px;background:var(--wash);border:1px solid var(--hair);border-radius:100px;font-size:.84rem;color:var(--ochre-deep)}
.qz-wi .ls{margin-top:8px;font-size:.94rem;color:var(--text)}
.qz-wi .ls b{color:var(--ochre-deep)}
.qz-wi .st{margin-top:8px;font-size:.94rem;color:var(--text)}
.qz-wi .st b{color:var(--ink)}

.qz-cta{
  margin-top:32px;padding:26px 24px;background:var(--fog);
  border:1px solid var(--edge);border-radius:var(--r);
}
.qz-cta h3{font:500 clamp(1.25rem,2.2vw,1.6rem)/1.2 Lora,Georgia,serif;color:var(--ink);max-width:24ch}
.qz-cta p{margin-top:10px;color:var(--text);max-width:60ch}
/* Строка снятия главного страха под целевой кнопкой, стандарт 76.
   Берётся из фактуры страницы, а не из шаблона. */
.qz-cta .fear{margin-top:12px;color:var(--stone);font-size:.92rem}
.qz-method{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair);color:var(--text);white-space:pre-line;max-width:74ch;font-size:.95rem}
.qz-method h3{font:500 1.1rem/1.3 Lora,Georgia,serif;color:var(--ink);margin-bottom:10px}
.qz-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--hair);display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem}
.qz-foot a{color:var(--stone);text-decoration:underline;text-underline-offset:3px}
.qz-foot a:hover{color:var(--ochre-deep)}

/* ═══════════════════════════════════════════════════════════════
   ТЕЛЕФОН. Этот раздел стоит В КОНЦЕ ФАЙЛА намеренно.

   До 24.08.2026 мобильные переопределения были в середине, ДО объявления
   базовых правил разделов «варианты ответа» и «шаг вопроса». Специфичность
   у медиа-запроса и у обычного селектора одинаковая, поэтому выигрывало то,
   что ниже, то есть базовое правило. Мобильные значения молча не применялись.

   Дважды за два дня это стоило круга правок: сначала не снимался резерв
   высоты шапки вопроса, потом не уменьшался зазор над вариантами. Оба раза
   правка выглядела корректной в diff и не работала в браузере.

   Правило: любые переопределения под телефон живут ниже всего базового.
   Добавляете новый раздел базовых стилей, добавляйте его ВЫШЕ этой линии.
   ═══════════════════════════════════════════════════════════════ */

@media(max-width:759px){
  .qz-main{padding-bottom:76px}
}

@media(max-width:759px){
  /* Заголовок стал длиннее по правке Дмитрия 24.08 («ваша строительная компания
     прямо сейчас» вместо «ваша стройка»), и на 360 px это четыре строки. Кегль
     чуть уменьшен только у заголовка: он самый крупный на экране, запас там есть,
     а кегль текста и вариантов ответа не тронут. */
  .qz-hero h1{margin-top:8px;font-size:clamp(1.62rem,6.7vw,2.1rem);line-height:1.06}
  .qz-hero .sub{margin-top:12px;font-size:1.12rem}
  .qz-facts{margin-top:16px;padding-top:14px;gap:9px}
  .qz-facts div b{font-size:1.28rem}
  .qz-facts div span{margin-top:2px;font-size:1rem;line-height:1.4}
  .qz-acts{margin-top:18px}
  .qz-btn{padding:14px 22px;width:100%}

  /* Шаг вопроса на телефоне. Обещание страницы «не надо скроллить» до 23.08
     проверялось только на 390x844, где панели браузера нет, поэтому на живом
     телефоне оно не выполнялось: не помещалось до 250 px. Значения ниже сняты
     замером на 360x600, 390x664 и 412x700. */
  /* Шапка на телефоне ниже: в ней только аватар и имя, 64 px там роскошь. */
  :root{--qz-top:52px}
  .qz-head .ava{width:30px;height:30px}
  .qz-head .nm{font-size:.9rem}
  .qz-prog .in{padding:7px 20px 8px}
  .qz-meta{margin-top:6px;font-size:.86rem}
  .qz-q h2{font-size:clamp(1.3rem,5vw,1.52rem);line-height:1.16}
  .qz-q .ask-t{margin-top:6px;font-size:1.18rem;line-height:1.34}
  .qz-hint{margin-top:6px;padding-left:11px;font-size:1rem;line-height:1.38}
  .qz-why{margin-top:6px;padding:7px 12px;font-size:.94rem}
  .qz-opts{margin-top:8px;gap:6px}
  .qz-opt{padding:8px 12px;gap:10px}
  .qz-opt .n{width:26px;height:26px;font-size:.88rem}
  .qz-opt .t{font-size:1.15rem;line-height:1.32}

  /* ── Шапка и полоса на телефоне НЕ плавающие ──────────────────────────
     До 24.08 они были `position:fixed`, а отступ под них задавался числом.
     Полоса прогресса меняет высоту: у длинных названий модулей («Удержание и
     повторные продажи») строка переносится, и полоса вырастает с 53 до 82 px.
     Отступ при этом оставался прежним, и заголовок вопроса уезжал под полосу.
     Замер: срезано 28 px на ВОСЬМИ шагах из четырнадцати, то есть больше чем на
     половине. На коротком названии дефекта не видно, поэтому он и жил.
     Обычный поток чинит это навсегда: сколько бы строк ни заняла полоса,
     содержимое начнётся под ней. Прокрутки на шаге нет, поэтому фиксация здесь
     не нужна вовсе, она решала несуществующую задачу. */
  .qz-head{position:static}
  .qz-prog{position:static}
  .qz-main{padding-top:14px;padding-bottom:8px}
  .qz-main.no-prog{padding-top:14px;padding-bottom:20px}

  /* ── Цель не двигается, но резерва высоты больше нет ──────────────────
     Раньше стабильность цели держал `min-height` шапки вопроса. Он работал,
     но создавал пустоту: реальная высота шапки 142-167 px на двенадцати шагах
     из четырнадцати, а резерв стоял по самому длинному, 232 px. Эти 70 px
     пустоты и мешали уместить шаг в экран телефона.
     Стало: шаг это колонка высотой в видимую область, варианты прижаты к её
     низу. Верх первого варианта теперь стоит на месте АВТОМАТИЧЕСКИ, при любой
     длине вопроса, а лишняя высота уходит вверх, где её никто не замечает.
     Побочная польза: варианты оказываются под большим пальцем, а не под глазами. */
  /* Контент прижат ВВЕРХ, пустота уходит вниз под варианты.
     История решения, чтобы не ходить по кругу третий раз:
       23.08 стоял резерв высоты шапки. Цель не двигалась, но на коротких
             вопросах между кнопкой пояснения и вариантами зияла дыра.
       24.08 прижали к низу. Дыра ушла из середины, но переехала наверх и
             выросла до 250 px: экран выглядел незагруженным.
       24.08 прижали вверх, резерва нет. Пустоты не видно вовсе, она внизу под
             последним вариантом, где читается как обычный отступ.
     Стало возможно только после того, как мобильные переопределения наконец
     заработали: шапка вопроса ужалась со 142-232 px до 102-178, варианты с 326
     до 224, и всё стало помещаться с запасом 140 px.
     Цена названа вслух: верх первого варианта гуляет между шагами, замер даёт
     16 px на обычном телефоне и 35 px на самом узком. Это меньше половины
     кнопки, промахом не грозит. */
  /* Свободная высота отдаётся кнопкам ответа, а не остаётся пустотой.
     Это третий и последний заход по одной и той же пустоте:
       23.08 резерв высоты шапки  -> дыра между кнопкой пояснения и вариантами;
       24.08 прижатие к низу      -> дыра переехала наверх, до 250 px;
       24.08 прижатие вверх       -> дыра переехала вниз, под последний вариант;
       24.08 растяжение вариантов -> дыры нет нигде, место занято кнопками.
     Побочная польза важнее косметики: кнопки становятся выше, и по ним проще
     попасть пальцем. Именно промах по кнопке был причиной, по которой сюда
     вообще вводили стабилизацию цели.
     Границы заданы, чтобы кнопка не выродилась на маленьком экране и не стала
     полосой на большом. */
  .qz-step.qz-q.on{
    display:flex;flex-direction:column;
    /* 127 px это сумма по замеру: шапка 52 + полоса прогресса 53 + отступы
       рабочей области 14 сверху и 8 снизу. Не круглое число и не на глаз. */
    min-height:calc(100vh - 127px);
    min-height:calc(100dvh - 127px);
  }
  .qz-opts{flex:1;grid-auto-rows:minmax(44px,1fr)}
  .qz-opt{align-items:center}
  /* Пустота уходит НАВЕРХ, а не встаёт между кнопкой пояснения и вариантами.
     23.08 прижатие к низу поставили только вариантам, и вся свободная высота
     схлопнулась в один зазор ровно посередине экрана: на коротких вопросах это
     читалось как дыра. Правка Дмитрия 24.08 «убрать пустоту». Прижимается блок
     целиком, зазор между шапкой и вариантами фиксированный. Цель по-прежнему
     стоит на месте, потому что к низу прижато всё содержимое сразу. */
  .qz-q-h{min-height:0}
  /* Зазор между кнопкой пояснения и вариантами сведён к минимуму: 24.08 он был
     22 px, и Дмитрий во второй раз назвал это пустотой. Кнопка пояснения и
     варианты работают как одна группа выбора, разделять их воздухом незачем.
     Вся свободная высота уходит наверх, под полосу прогресса. */
  .qz-opts{margin-top:8px}
}

@media(max-width:380px){
  .qz-hero h1{font-size:1.46rem;line-height:1.05}
  .qz-hero .sub{margin-top:10px;font-size:1.04rem;line-height:1.4}
  .qz-facts{margin-top:13px;padding-top:12px;gap:7px}
  .qz-facts div b{font-size:1.18rem}
  .qz-facts div span{font-size:.94rem;line-height:1.35}
  .qz-acts{margin-top:12px}
  .qz-btn{padding:12px 18px}
  .qz-hero .ask{font-size:.8rem}
  .qz-opts{margin-top:6px}
}



/* ── окно «сайт не найден» ────────────────────────────────────── */
.qz-modal[hidden]{display:none}
.qz-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.qz-modal .scrim{position:absolute;inset:0;background:rgba(28,25,23,.55)}
.qz-modal .box{
  position:relative;width:100%;max-width:420px;background:var(--paper);
  border:1.5px solid var(--ink);border-radius:var(--r);padding:26px 24px 22px;
  box-shadow:0 18px 50px rgba(28,25,23,.28);text-align:center;
}
.qz-modal .ic{
  width:46px;height:46px;margin:0 auto 14px;border-radius:50%;
  background:#a3231b;color:#fff;display:grid;place-items:center;
  font:700 26px/1 Inter,sans-serif;
}
.qz-modal h3{font:600 1.32rem/1.25 Lora,Georgia,serif;color:var(--ink)}
.qz-modal p{margin-top:10px;color:var(--text);font-size:1.02rem;line-height:1.5}
.qz-modal p b{color:var(--ink);word-break:break-all}
.qz-modal .qz-btn{margin-top:20px;width:100%;justify-content:center}
/* Второе действие намеренно тише первого: продолжить с неверным адресом можно,
   но это выбор, а не путь наименьшего сопротивления. */
.qz-modal-alt{
  display:block;width:100%;margin-top:12px;padding:8px;
  color:var(--stone);font-size:.98rem;text-decoration:underline;
  text-underline-offset:3px;background:none;border:0;cursor:pointer;
}
.qz-modal-alt:hover{color:var(--ochre-deep)}
.qz-modal-alt:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}

/* ── размер шрифта: выбор посетителя ──────────────────────────────
   Вся типографика квиза задана в rem, поэтому крупный режим это одна строка:
   меняется размер корня, остальное пересчитывается само. Отдельной «версии
   для слабовидящих» не заводится: вторая страница с тем же текстом разошлась
   бы с первой на первой же правке.

   Замер 24.08.2026 до правки: главный текст вопроса был 14,7px. Аудитория
   квиза это собственники за сорок, у которых зрение уже начало меняться.
   Обычный режим теперь даёт 18,9px, крупный 26px. */
html.qz-big{font-size:22px}

/* Служебная строка растёт медленнее содержания. Замер 24.08.2026: при общем
   росте «БЛОК 1 ИЗ 14 · ЛИДОГЕНЕРАЦИЯ» и «Назад» переставали помещаться в
   строку, полоса становилась двухэтажной и съедала высоту у самого текста,
   ради которого крупный режим и включили. Читаемости это не вредит: номер
   блока считывается мельком, а не читается. */
html.qz-big .qz-meta{font-size:.72rem}
/* На узком экране слово «Блок» уходит: «1 из 14» читается так же, а строка
   перестаёт переноситься. Замер 24.08.2026: после подъёма кегля служебной
   строки «Назад» переставало помещаться и полоса становилась двухэтажной. */
.qz-meta i{font-style:normal}
@media(max-width:430px){
  .qz-meta i{display:none}
  .qz-meta{gap:8px}
}
html.qz-big .qz-meta i{display:none}
/* Крупный режим на самом узком экране: втроём «1 из 14», название модуля и
   «Назад» в строку не помещаются. Уходит название модуля, а не кнопка:
   модуль это контекст, кнопка это действие, и человек, включивший крупный
   шрифт, тем более не должен искать её на второй строке. */
@media(max-width:400px){
  html.qz-big .qz-meta .mod{display:none}
}
html.qz-big .qz-back{font-size:.76rem;padding:6px 10px}

/* Кегль кнопки задан в px намеренно: это единственное место, которое не
   должно расти вместе со страницей, иначе переключатель разъезжает шапку и
   в крупном режиме перестаёт помещаться рядом с именем. */
.qz-zoom{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  margin-left:auto;min-height:44px;padding:0 13px 0 10px;
  border:1.5px solid var(--ochre);border-radius:8px;
  background:var(--paper);color:var(--ochre-deep);cursor:pointer;
  font:600 13px/1 Inter,sans-serif;white-space:nowrap;
}
/* 44px это минимальная цель касания. Для кнопки, которой пользуется человек с
   плохим зрением, занижать её нельзя: у него, как правило, и попадание пальцем
   хуже. Замер 24.08.2026 показал 33px. */
.qz-zoom .a{
  font:700 17px/1 Inter,sans-serif;
  /* Буква растёт вместе с действием: до нажатия маленькая, после большая.
     Это единственная подсказка о текущем состоянии, кроме самого текста. */
}
html.qz-big .qz-zoom .a{font-size:12px}
.qz-zoom:hover{background:var(--ochre);border-color:var(--ochre);color:#fff}
.qz-zoom:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
html.qz-big .qz-zoom{font-size:13px;min-height:44px;padding:0 13px 0 10px}
/* Имя автора на узком экране не переносится: перенос делал шапку двухэтажной
   (49px против 33px на 360px) и отъедал высоту у самого квиза. */
.qz-head .nm{white-space:nowrap}
/* В крупном режиме имя растёт медленнее содержания. Замер 24.08.2026: при
   общем росте оно выталкивало кнопку размера за правый край на 360 и 390px,
   то есть крупный режим ломал ровно ту кнопку, которой его выключают. */
html.qz-big .qz-head .nm{font-size:.72rem}
/* Крайний случай: 360px и крупный режим. Замер 24.08.2026: имени и кнопке
   вместе не хватает 8px, кнопка уезжает за правый край. Уходит имя, а не
   кнопка: лицо в аватаре остаётся, а кнопка это единственный способ вернуть
   шрифт обратно, и потерять её нельзя. */
@media(max-width:400px){
  html.qz-big .qz-head .nm{display:none}
  html.qz-big .qz-head .in{gap:10px}
}

/* ── шаг выручки на телефоне ──────────────────────────────────
   Шаг стал выше: поле сайта из второстепенного стало равным выручке, и под
   каждым полем зарезервировано место под ошибку. Замер 24.08.2026: с двумя
   показанными ошибками кнопка уходила под сгиб на всех трёх размерах, то есть
   человек нажимал и не видел ни результата, ни причины. Отступы и внутренние
   поля ужаты здесь, а не в базовых правилах, чтобы на большом экране
   осталась прежняя воздушность. */
@media (max-width:759px){
  /* Подпись «зачем адрес» переехала под заголовок и больше не прячется при
     ошибке, поэтому шаг стал выше на полсотни пикселей и кнопка ушла под сгиб
     на всех трёх размерах. Возвращаем высоту отступами, а не кеглем: кегль
     здесь уже на нижней границе читаемости. */
  #step-rev .qz-f{margin-top:10px;gap:4px}
  #step-rev .qz-f input{padding:9px 13px;font-size:1.12rem}
  #step-rev .qz-f-note{font-size:.94rem;line-height:1.35}
  #step-rev .ask-t{margin-top:4px}
  #step-rev .qz-hint{margin-top:4px}
  #step-rev .qz-f.url input{font-size:1rem}
  #step-rev .qz-acts{margin-top:10px}
  /* Правило, прятавшее подсказку при показе ошибки, снято 24.08.2026. Оно
     убирало причину «зачем вписывать адрес» ровно в тот момент, когда человек
     решает, вписать настоящий адрес или что придётся. Теперь причина стоит над
     полем и не конкурирует с ошибкой за место. */
}