/* =========================================================================
   beta.css — стили beta-лендинга. Изолированы: strict.css и styles.css
   не подключаются и не изменяются.

   Движение здесь — часть UX, а не украшение: длительности и кривые собраны
   в токены, всё уважает prefers-reduced-motion, ни одна анимация не удлиняет
   путь пользователя. Экран сменяется за 260 мс — быстрее, чем человек успевает
   заметить паузу, но достаточно, чтобы глаз проследил переход.
   ========================================================================= */
:root{
  --paper:#F4F1EA; --paper2:#FBF9F4; --paper3:#EFEBE1;
  --ink:#1C1B18; --ink2:#3F3D38; --ink3:#6A6760; --ink4:#8E8A80;
  --brass:#8A6D3B; --brass2:#6E5427; --brass-dim:rgba(138,109,59,.10);
  --line:rgba(28,27,24,.10); --line2:rgba(28,27,24,.18);
  --warn:#8a5a1f; --bad:#a33;

  --r:14px; --maxw:640px;

  /* Токены движения. Правится в одном месте — меняется весь ритм страницы. */
  --t-fast:140ms; --t-base:260ms; --t-slow:420ms;
  --e-out:cubic-bezier(.22,.61,.36,1);      /* вход: быстро стартует, мягко тормозит */
  --e-in-out:cubic-bezier(.45,.05,.25,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);   /* лёгкий «доводчик» для акцентов */

  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Резинка iOS не должна тянуть всю страницу за собой при свайпе внутри экрана. */
  overscroll-behavior-y:none;
}
body{
  background:radial-gradient(120% 55% at 50% -8%,rgba(138,109,59,.10),transparent 62%),var(--paper);
  color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Тап не должен подсвечиваться серым прямоугольником — это выдаёт «веб-страницу». */
  -webkit-tap-highlight-color:transparent;
  min-height:100vh;min-height:100dvh;   /* dvh: адресная строка iOS больше не дёргает вёрстку */
  display:flex;flex-direction:column;
}
.serif{font-family:var(--serif)}

/* Клавиатурная навигация видит фокус, мышь и палец — нет. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--maxw);margin:0 auto;
  padding:20px 18px calc(28px + env(safe-area-inset-bottom));flex:1;display:flex;flex-direction:column}
.stage{flex:1}

.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}
.brand{font-family:var(--serif);font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand span{color:var(--brass);margin:0 .15em}
@media(min-width:420px){.brand{font-size:19px;letter-spacing:.06em}}
.topbar__meta{font-size:11.5px;color:var(--ink4);text-align:right;line-height:1.35;
  opacity:0;transition:opacity var(--t-slow) var(--e-out)}
.topbar__meta.is-on{opacity:1}

/* --------------------------------- экраны -------------------------------- */
.screen{display:none}
.screen.is-active{display:block;animation:screen-in var(--t-base) var(--e-out) both}
@keyframes screen-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
/* Уход назад по истории ощущается как шаг назад, а не как новый экран. */
.screen.is-active.is-back{animation-name:screen-back}
@keyframes screen-back{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}

h1{font-family:var(--serif);font-weight:600;font-size:clamp(28px,7vw,42px);line-height:1.1;
  letter-spacing:-.01em;margin-bottom:12px;text-wrap:balance}
h1 em{font-style:italic;color:var(--brass2)}
.lead{font-size:16px;color:var(--ink2);margin-bottom:20px;max-width:34em;text-wrap:pretty}

.bullets{list-style:none;margin:0 0 22px}
.bullets li{position:relative;padding:9px 0 9px 30px;font-size:15px;color:var(--ink2);border-bottom:1px solid var(--line)}
.bullets li:last-child{border-bottom:0}
.bullets li::before{content:'';position:absolute;left:6px;top:17px;width:9px;height:9px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 0 4px var(--brass-dim)}
.bullets b{font-weight:600;color:var(--ink)}

/* -------------------------------- кнопки --------------------------------- */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:0;border-radius:12px;padding:17px 20px;
  font:600 16px/1.2 var(--sans);cursor:pointer;
  /* manipulation убирает 300 мс задержку двойного тапа на мобильных */
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:transform var(--t-fast) var(--e-out),background var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),opacity var(--t-fast) linear}
.btn--primary{background:var(--ink);color:var(--paper2);box-shadow:0 1px 2px rgba(28,27,24,.14)}
.btn--primary:hover{background:#000;box-shadow:0 4px 14px rgba(28,27,24,.16)}
.btn--brass{background:var(--brass2);color:var(--paper2);box-shadow:0 1px 2px rgba(110,84,39,.2)}
.btn--brass:hover{background:#5b4520;box-shadow:0 4px 14px rgba(110,84,39,.22)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn--ghost{background:transparent;color:var(--ink3);border:1px solid var(--line2);font-weight:500;padding:14px 20px;box-shadow:none}
.btn--ghost:hover{color:var(--ink);border-color:var(--line2);background:rgba(28,27,24,.03)}

.btn__spin{width:16px;height:16px;border:2px solid rgba(251,249,244,.35);border-top-color:#fff;border-radius:50%;
  display:none;animation:spin .7s linear infinite}
.btn.is-busy .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.note{font-size:12.5px;color:var(--ink4);margin-top:14px;line-height:1.5}
.note a{color:var(--ink3)}
.opt-mark{color:var(--ink4);font-weight:400}
.free{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--brass2);
  background:var(--brass-dim);border-radius:999px;padding:6px 13px;margin-bottom:16px}

/* ---------------------------------- квиз --------------------------------- */
.quiz__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.quiz__step{font-size:12.5px;color:var(--ink4);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.progress{height:3px;background:var(--paper3);border-radius:2px;overflow:hidden;margin-bottom:24px}
.progress__bar{height:100%;width:0;border-radius:2px;background:var(--brass);
  transition:width var(--t-slow) var(--e-out)}
.q__title{font-family:var(--serif);font-weight:600;font-size:clamp(23px,5.4vw,30px);line-height:1.2;
  margin-bottom:8px;text-wrap:balance}
.q__hint{font-size:13.5px;color:var(--ink3);margin-bottom:18px}
.q__hint[hidden]{display:none}

.opts{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;
  padding:14px 17px;border:1px solid var(--line2);border-radius:12px;background:var(--paper2);
  font:500 15.5px/1.35 var(--sans);color:var(--ink);text-align:left;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:border-color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),
             box-shadow var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out);
  /* Вход с лёгкой лесенкой: --i задаётся из JS для каждого варианта. */
  animation:opt-in var(--t-base) var(--e-out) both;
  animation-delay:calc(var(--i,0) * 32ms)}
@keyframes opt-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.opt:hover{border-color:var(--brass);background:#fff}
.opt:active{transform:scale(.99)}
.opt.is-on{border-color:var(--brass);background:#fff;box-shadow:inset 0 0 0 1px var(--brass)}
/* Подтверждение выбора: короткая вспышка, чтобы палец «почувствовал» отклик. */
.opt.is-picked{animation:opt-pick var(--t-base) var(--e-spring)}
@keyframes opt-pick{0%{transform:scale(1)}45%{transform:scale(.975)}100%{transform:scale(1)}}
.opt__count{font-size:12px;color:var(--ink4);font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.opt.is-on .opt__count{color:var(--brass2)}

/* Скелет на время загрузки конфига: место занято, прыжка не будет. */
.opt--skeleton{pointer-events:none;border-style:dashed;background:transparent;
  animation:skeleton 1.1s ease-in-out infinite}
@keyframes skeleton{0%,100%{opacity:.35}50%{opacity:.7}}

.quiz__nav{display:flex;gap:10px}
.quiz__nav .btn{flex:1}
.quiz__nav .btn[hidden]{display:none}

/* -------------------------------- подбор --------------------------------- */
.matching{text-align:center;padding:8px 0 4px}
.pulse{display:flex;gap:7px;justify-content:center;margin-bottom:18px}
.pulse span{width:8px;height:8px;border-radius:50%;background:var(--brass);opacity:.35;
  animation:pulse 1.15s var(--e-in-out) infinite}
.pulse span:nth-child(2){animation-delay:.14s}
.pulse span:nth-child(3){animation-delay:.28s}
@keyframes pulse{0%,100%{opacity:.28;transform:scale(.85)}45%{opacity:1;transform:scale(1)}}

.stages{list-style:none;margin:22px 0 0}
.stages li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line);
  animation:stage-in var(--t-base) var(--e-out) both}
.stages li:last-child{border-bottom:0}
@keyframes stage-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.stages__label{font-size:14.5px;color:var(--ink2)}
.stages__count{font-variant-numeric:tabular-nums;font-weight:600;font-size:16px;color:var(--ink)}
.stages li.is-final .stages__label{color:var(--ink)}
.stages li.is-final .stages__count{color:var(--brass2)}

/* -------------------------------- результат ------------------------------ */
.result{background:var(--paper2);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;margin-bottom:18px}
.result__big{font-family:var(--serif);font-size:clamp(40px,11vw,54px);line-height:1;color:var(--brass2);
  font-weight:600;font-variant-numeric:tabular-nums}
.result__sub{font-size:15px;color:var(--ink2);margin-top:6px}
.facts{list-style:none}
#facts{margin-top:18px;border-top:1px solid var(--line);padding-top:4px}
.facts li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;
  animation:fact-in var(--t-base) var(--e-out) both;animation-delay:calc(var(--i,0) * 40ms)}
.facts li:last-child{border-bottom:0}
@keyframes fact-in{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
.facts .k{color:var(--ink3)}
.facts .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
/* Блок статистики на первом экране: высота зарезервирована, содержимое въезжает. */
.facts--stats{margin-top:22px;border-top:1px solid var(--line);padding-top:4px;min-height:126px}
.facts--stats li{animation:none;opacity:.45;transition:opacity var(--t-slow) var(--e-out)}
.facts--stats.is-on li{opacity:1}
.checked{font-size:12px;color:var(--ink4);margin-top:14px;line-height:1.5}

.zero{border-left:2px solid var(--warn);padding-left:14px;margin:0 0 18px;font-size:14.5px;color:var(--ink2)}
.zero[hidden]{display:none}

/* --------------------------------- форма --------------------------------- */
.form{background:var(--paper2);border:1px solid var(--line2);border-radius:var(--r);padding:20px}
.form h2{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:6px;line-height:1.2}
.form p.sub{font-size:14px;color:var(--ink3);margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:6px}
.field input{width:100%;padding:15px 16px;border:1px solid var(--line2);border-radius:11px;background:#fff;
  font:400 16px var(--sans);color:var(--ink);   /* 16px — иначе iOS зумит форму при фокусе */
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out)}
.field input:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-dim)}
.field input.is-bad{border-color:var(--bad);box-shadow:0 0 0 3px rgba(170,51,51,.1);animation:shake 320ms var(--e-in-out)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.consent{display:flex;gap:11px;align-items:flex-start;margin:14px 0 16px;font-size:12.5px;color:var(--ink3);
  line-height:1.5;cursor:pointer;-webkit-tap-highlight-color:transparent}
.consent input{width:19px;height:19px;flex:0 0 19px;margin-top:1px;accent-color:var(--brass2);cursor:pointer}
.consent a{color:var(--brass2)}
.err{font-size:13px;color:var(--bad);margin-top:10px;display:none}
.err.is-on{display:block;animation:screen-in var(--t-fast) var(--e-out)}

/* -------------------------------- спасибо -------------------------------- */
.done{width:52px;height:52px;margin-bottom:16px}
.done svg{width:100%;height:100%;fill:none;stroke:var(--brass2);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.done__c{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .5s var(--e-out) .05s forwards;opacity:.35}
.done__t{stroke-dasharray:36;stroke-dashoffset:36;animation:draw .35s var(--e-out) .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.uid-row{margin-bottom:4px}
.uid{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--paper3);border-radius:7px;padding:5px 10px;color:var(--ink2);user-select:all}
.steps{list-style:none;counter-reset:s;margin:20px 0}
.steps li{counter-increment:s;position:relative;padding:11px 0 11px 38px;font-size:14.5px;color:var(--ink2);
  border-bottom:1px solid var(--line);
  animation:fact-in var(--t-base) var(--e-out) both;animation-delay:calc(var(--i,0) * 70ms + 250ms)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:11px;width:24px;height:24px;border-radius:50%;
  background:var(--brass-dim);color:var(--brass2);font-size:12px;font-weight:600;display:grid;place-items:center}

.legal{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink4);line-height:1.55}
.legal a{color:var(--ink4)}

/* --------------------------- уважение к настройкам ------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .facts--stats li{opacity:1}
}

/* =========================================================================
   Доверие. Блоки, отвечающие на вопросы, из-за которых номер не оставляют:
   кто вы, почему бесплатно, что я получу, что будет с моим номером.
   Стоят после кнопки, чтобы не топить первый экран, и повторяются
   у формы — там, где человек принимает решение.
   ========================================================================= */
.card{background:var(--paper2);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 16px;margin-top:16px}
.h-sub{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.25;margin-bottom:10px}
.p{font-size:14.5px;color:var(--ink2);margin-bottom:10px}
.p:last-child{margin-bottom:0}

.who__row{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.who__ava{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  background:var(--brass-dim);color:var(--brass2);font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:.04em}
.who__name{font-weight:600;font-size:16px}
.who__role{font-size:13px;color:var(--ink3)}
.who__acts{display:flex;gap:9px}
.who__acts .btn{flex:1;text-decoration:none;font-size:14.5px}

.checks,.nots{list-style:none}
.checks li,.nots li{position:relative;padding:8px 0 8px 26px;font-size:14.5px;color:var(--ink2);
  border-bottom:1px solid var(--line)}
.checks li:last-child,.nots li:last-child{border-bottom:0}
.checks li::before{content:'';position:absolute;left:4px;top:15px;width:9px;height:5px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}
.nots li::before{content:'';position:absolute;left:4px;top:17px;width:10px;height:2px;background:var(--ink4)}
.site-link{margin-top:16px}
.site-link a,.card .note a{color:var(--brass2)}

/* Что произойдёт после того, как человек оставит номер. */
.next{list-style:none;counter-reset:n;margin:0 0 18px;padding:14px 16px;
  background:var(--paper);border-radius:11px;border:1px solid var(--line)}
.next li{counter-increment:n;position:relative;padding:7px 0 7px 30px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.next li::before{content:counter(n);position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:50%;
  background:var(--brass-dim);color:var(--brass2);font-size:11px;font-weight:600;display:grid;place-items:center}

/* Что будет с номером — прямо под кнопкой отправки. */
.safety{list-style:none;margin:14px 0 0}
.safety li{position:relative;padding:6px 0 6px 22px;font-size:12.5px;color:var(--ink3);line-height:1.5}
.safety li::before{content:'';position:absolute;left:4px;top:13px;width:6px;height:6px;border-radius:50%;
  background:var(--brass);opacity:.55}
.safety b{color:var(--ink2);font-weight:600}
.alt-channel{font-size:13px;color:var(--ink3);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.alt-channel a{color:var(--brass2);font-weight:500}

.upsell .btn{margin-top:4px}
.upsell.is-done .btn{display:none}

/* Выбор времени звонка: чипы вместо селекта — один тап, видно все варианты. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:9px 15px;
  font:500 13.5px var(--sans);color:var(--ink2);cursor:pointer;touch-action:manipulation;
  transition:border-color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),
             color var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out)}
.chip:hover{border-color:var(--brass)}
.chip:active{transform:scale(.97)}
.chip.is-on{border-color:var(--brass);background:var(--brass-dim);color:var(--brass2);font-weight:600}

/* Возврат к незаконченному квизу. Показывается только тем, у кого есть
   сохранённые ответы, поэтому стоит выше кнопки и не мешает остальным. */
.resume{background:var(--paper2);border:1px solid var(--brass);border-radius:var(--r);
  padding:15px 16px;margin-bottom:14px}
.resume[hidden]{display:none}
.resume__text{font-size:14.5px;color:var(--ink2);margin-bottom:12px}
.resume__acts{display:flex;gap:9px}
.resume__acts .btn{flex:1;padding:13px 16px;font-size:15px}

/* Реквизиты оператора ПД. Человек соглашается на обработку данных —
   значит видит, кто именно их обрабатывает. Без этого страница
   неотличима от той, что собирает базы номеров. */
.req{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--ink3);line-height:1.6}
.req b{color:var(--ink2);font-weight:600}
.req a{color:var(--ink3)}
.req__row{display:block}

/* Отметка «бета». Стоит рядом с брендом, а не всплывает поверх контента:
   человек должен видеть статус сервиса сразу, но не спотыкаться об него. */
.beta{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;
  background:var(--brass-dim);color:var(--brass2);font-family:var(--sans);
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:middle;position:relative;top:-1px}