/* ─────────────────────────────────────────────────────────────────────────────
   Страницы воронки: получение Части I и список ожидания.

   Дополнение к letter-pages.css, а не замена: раскладка, типографика, футер и
   кнопка .cta берутся оттуда. Здесь только то, чего на «письменных» страницах
   раньше не было, — формы, состояния и блоки-офферы.

   Подключать строго ПОСЛЕ letter-pages.css.

   Состояния страниц (W0…W5, P0…P6, C1…C3, S1…S3, T1…T4) описаны в
   tools/waitlist-part1-tz.md, п. 5. В разметке они помечены data-state.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --lp-err:#b4483f;
  --lp-tg:#2ea0da;
}

/* ── Переключение состояний ──
   Блок состояния скрыт, пока JS не решит, какое показывать. Так страница не
   мигает: иначе при загрузке на долю секунды видны сразу все варианты.
   Обратная сторона — без JS не видно ничего, поэтому в <noscript> каждой
   страницы включается вариант с data-default. */
.st{display:none}
/* Появление, а не рывок. Состояние определяется после ответа api/me.php —
   до этого экран пуст, и без плавности переход со страницы на страницу
   выглядел как вспышка. */
.st.is-on{display:block;animation:lp-in .18s ease-out}
@keyframes lp-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.st.is-on{animation:none}}

/* ── Блок кнопок первого экрана ──
   Кнопки идут колонкой во всю ширину .wrap: на первом экране их максимум две,
   и рядом на мобильном они не помещаются. */
.actions{display:flex;flex-direction:column;gap:.7rem;width:100%}

/* Вторичная кнопка (Telegram, «другой способ»). Тот же силуэт, что у .cta,
   но светлая: на первом экране должна быть ровно одна тёмная кнопка. */
.cta.is-ghost{
  background:var(--lp-card);
  color:var(--lp-head);
  box-shadow:inset 0 0 0 1px var(--lp-line);
}
.cta.is-ghost:hover{background:#fff}
.cta.is-ghost .tg{color:var(--lp-tg)}

/* Кнопка в момент отправки. Текст остаётся на месте (иначе кнопка прыгает по
   ширине), гасится прозрачностью, поверх — вращающееся кольцо. */
.cta.is-busy{position:relative;pointer-events:none;opacity:.85}
.cta.is-busy > *{visibility:hidden}
.cta.is-busy::after{
  content:"";position:absolute;width:18px;height:18px;
  border:2px solid currentColor;border-right-color:#0000;border-radius:50%;
  animation:lp-spin .7s linear infinite;
}
@keyframes lp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cta.is-busy::after{animation-duration:2s}}

/* ── Форма ── */
.lp-form{display:flex;flex-direction:column;gap:.7rem;width:100%;margin:0}
.field{
  width:100%;
  background:#fff;
  color:var(--lp-head);
  border:1px solid var(--lp-line);
  border-radius:10px;
  /* Верхний отступ больше нижнего не случайно. У Artegra базовая линия
     стоит на 0.74em от верха строки (line-height 100%), высота заглавных
     0.70em, а в адресе почти нет выносных вниз — и текст садится на ~0.11em
     выше центра поля. Сдвигаем его вниз ровно на столько. */
  padding:calc(.95rem + .11em) 1.15rem calc(.95rem - .11em);
  /* Artegra Regular. Семейство подключено сайтом (nicotine-detox.webflow.css),
     Regular — это вес 400. Плейсхолдеру шрифт задаём отдельно: в Safari он
     не наследуется от поля. */
  font-family:Artegra,Verdana,sans-serif;
  font-weight:400;
  /* 16 px — и меньше на телефоне делать нельзя: Safari на iOS сам приближает
     страницу, как только палец попадает в поле с более мелким текстом, и
     обратно она уже не отъезжает. Поле поэтому ужато отступами, а не кеглем;
     кегль уменьшается ниже, в правиле для широких экранов. */
  font-size:1rem;
  line-height:100%;
  text-align:center;
  transition:border-color .2s ease-out,box-shadow .2s ease-out;
}
.field::placeholder{color:#9aa4b2;font-family:Artegra,Verdana,sans-serif;font-weight:400}
.field:focus{outline:none;border-color:var(--lp-head);box-shadow:0 0 0 3px #2c3a4914}
.field.has-err{border-color:var(--lp-err)}

/* Поля, где человек пишет не одно слово, а фразу: адрес для ответа и описание
   проблемы. По центру такой текст читается плохо — глазу негде зацепиться
   за начало строки. Стоит только в формах поддержки; в формах заявки поле
   одно и короткое, там центр уместен. */
.field.is-left,.field.is-left::placeholder{text-align:left}

/* Ловушка для ботов. Не display:none — часть заполнялок такие поля пропускает;
   поле остаётся в потоке, но вынесено за пределы экрана. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Текст согласия под формой. Ссылки подчёркнуты — это юридически значимый
   текст, человек должен видеть, что по ним можно перейти. */
.consent{margin:.15rem 0 0;color:var(--lp-mute);font-size:.75rem;line-height:155%;text-align:center}
.consent a{color:var(--lp-link);text-decoration:none;border-bottom:1px solid var(--lp-line)}
.consent a:hover{border-bottom-color:var(--lp-mute)}

.err{
  display:none;
  margin:.15rem 0 0;
  color:var(--lp-err);
  font-size:.8rem;
  line-height:155%;
  text-align:center;
}
.err.is-on{display:block}

/* ── Подсказка про опечатку в адресе ──
   Отдельно от .err и намеренно другим цветом: ошибка красная и означает
   «так нельзя», а здесь мы всего лишь спрашиваем — «может, вы имели в виду».
   Запрета тут нет, и выглядеть это должно соответственно.

   Класс НЕ `.hint`: это имя занято подсказкой про уход в Telegram (ниже
   в этом же файле, ею правит js/tg-link.js). Первый заход я так и назвал —
   и получил чужое оформление карточкой, чужой display:flex и риск, что
   телеграм-подсказка покажет не тот блок. Имя должно быть своим. */
.typo{
  display:none;
  margin:.35rem 0 0;
  color:var(--lp-sub);
  font-size:.8rem;
  line-height:165%;
  text-align:center;
}
.typo.is-on{display:block}
.typo b{color:var(--lp-head);font-weight:400}
.typo-fix, .typo-keep{
  display:inline-block;margin:.15rem .1rem 0 .45rem;
  background:none;border:0;padding:0;
  color:var(--lp-link);font-family:inherit;font-size:.8rem;line-height:150%;
  border-bottom:1px solid var(--lp-line);cursor:pointer;
}
.typo-keep{color:var(--lp-mute)}
.typo-fix:hover, .typo-keep:hover{border-bottom-color:var(--lp-mute)}

/* ── Опознанный адрес ──
   Адрес всегда в маске: устройство может быть чужим. */
.known{margin:0 0 .9rem;color:var(--lp-sub);font-size:.875rem;line-height:150%}
.known b{color:var(--lp-head);font-weight:400;font-style:italic}
.linkish{
  display:inline-block;margin-top:.9rem;
  background:none;border:0;padding:0;
  color:var(--lp-mute);font-family:Georgia,serif;font-size:.8rem;line-height:150%;
  text-decoration:none;border-bottom:1px solid var(--lp-line);cursor:pointer;
}
.linkish:hover{color:var(--lp-head);border-bottom-color:var(--lp-mute)}

/* ── Подсказка после ухода в Telegram ──
   Страница по замыслу не меняется, поэтому это не экран, а строка под кнопкой. */
.hint{
  display:none;
  align-items:flex-start;gap:.55rem;
  margin-top:1rem;padding:.85rem 1rem;
  background:var(--lp-card);border-radius:10px;
  color:var(--lp-sub);font-size:.8rem;line-height:155%;text-align:left;
}
.hint.is-on{display:flex}
.hint svg{flex:none;width:16px;height:16px;margin-top:.15rem;color:var(--lp-tg)}
.hint a{color:var(--lp-link)}

/* ── «Письмо не пришло» ── */
.details{width:100%;margin-top:1.35rem;text-align:left}
.details summary{
  list-style:none;cursor:pointer;
  color:var(--lp-mute);font-size:.8rem;line-height:150%;text-align:center;
}
.details summary::-webkit-details-marker{display:none}
.details summary span{border-bottom:1px solid var(--lp-line)}
.details summary:hover span{color:var(--lp-head);border-bottom-color:var(--lp-mute)}
.details-body{
  margin-top:.9rem;padding:1.1rem 1.25rem;
  background:var(--lp-card);border-radius:10px;
  color:var(--lp-sub);font-size:.85rem;line-height:165%;
}
.details-body p{margin:0 0 .7rem}
.details-body p:last-child{margin-bottom:0}
.details-body ul{margin:0 0 .7rem;padding-left:1.1rem}
.details-body li{margin-bottom:.35rem}

/* ── Блок-оффер второй воронки ──
   Классы намеренно с приставкой cross-: .offer и .tag уже заняты в
   nicotine-detox.webflow.css (ссылки нижнего блока и рамка-пилюля), и без
   приставки чужие правила протекали бы сюда. То же с .lp-form вместо .form.
   Ставится в конце страницы: человек уже получил своё, и только после этого
   ему предлагается вторая половина. */
.cross-offer{border-top:1px solid var(--lp-line);padding:3.25rem 0}
.cross-offer .card{
  background:var(--lp-card);
  border-radius:14px;
  padding:1.75rem 1.5rem;
  text-align:center;
}
.cross-offer .cross-tag{
  display:block;margin-bottom:.7rem;
  color:var(--lp-mute);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.cross-offer h2{
  margin:0 0 .8rem;color:var(--lp-ink);
  font-size:1.5rem;font-weight:400;line-height:120%;letter-spacing:-.01em;
}
.cross-offer h2 em{font-style:italic}
.cross-offer p{margin:0 0 1.4rem;color:var(--lp-body);font-size:.9375rem;line-height:160%}
.cross-offer .cta{width:auto;min-width:min(22rem,100%)}

/* Узкие экраны (320–380 px): «ПОЛУЧИТЬ ПЕРВУЮ ЧАСТЬ» — самая длинная надпись
   на кнопке, в разрядку она упирается в края. Ужимаем трекинг и кегль, чтобы
   строка не рвалась. */
/* Телефоны (до 430 px). «ЗАБРОНИРОВАТЬ ЧЕРЕЗ TELEGRAM» — самая длинная надпись
   на сайте, и она ложилась во вторую строку, из-за чего соседние кнопки
   отличались по высоте.
   
   Порог именно 430 px, а не 380: прежнее правило не доставало до нынешних
   iPhone — у 12/13/14 Pro ширина 390, у 15 Pro Max 430, и на них кнопка
   разъезжалась, хотя на 375 всё было в порядке.
   
   Цифры на 390 px: при кегле 12 px надпись занимает 287 px против 275 px
   свободных. Уменьшаем до 11 px (265 px) и отыгрываем ещё три десятка
   пикселей на отступах, значке и промежутке — запас выходит около 12%,
   чтобы другой шрифтовой движок не разорвал строку снова. */
@media (max-width:430px){
  .cta{font-size:.6875rem;letter-spacing:.05em;padding-left:.85rem;padding-right:.85rem;gap:.45rem}
  .cta svg{width:15px;height:15px}
  /* Значок Telegram возвращён: после уменьшения кегля надпись помещается
     в строку вместе с ним. Прятать его было вынужденной мерой, а значок
     полезен — он сразу говорит, куда ведёт кнопка. */
}

@media (min-width:768px){
  .field{font-size:.875rem;padding:calc(1.05rem + .11em) 1.35rem calc(1.05rem - .11em)}   /* 14px, вровень с кнопкой; про отступы — у базового .field */
  .known{font-size:.95rem}
  .consent{font-size:.78rem}
  .cross-offer{padding:4rem 0}
  .cross-offer .card{padding:2.5rem 2.25rem}
  .cross-offer h2{font-size:2rem}
  .cross-offer p{font-size:1.0625rem}
}

/* ── Плашка с номером брони ──
   Номер человек ищет глазами: он один в этом экране несёт «это про меня».
   Поэтому не строкой в тексте, а отдельной плашкой под заголовком. */
.badge{
  display:inline-block;margin:.35rem auto 1.5rem;
  background:var(--lp-card);border-radius:999px;
  padding:.5rem 1.1rem;
  color:var(--lp-sub);font-size:.85rem;line-height:150%;
}
.badge b{color:var(--lp-head);font-weight:700;font-style:normal}

/* ── Пояснение без звёздочки ──
   .fine со звёздочкой читается как сноска-предупреждение. Там, где текст
   успокаивает («бронь ни к чему не обязывает»), звёздочка мешает. */
.plain{margin:1.15rem auto 0;max-width:32rem;color:var(--lp-mute);font-size:.78rem;line-height:160%}

/* ── Форма обращения в поддержку ──
   Стоит на экранах отказа: человеку отказали, и единственное, что он может
   сделать, — написать. Заставлять его открывать почтовый клиент — терять его. */
.support{display:flex;flex-direction:column;gap:.7rem;width:100%;margin:0}
.support textarea.field{
  min-height:7.5rem;resize:vertical;
  text-align:left;line-height:155%;padding-top:.95rem;padding-bottom:.95rem;
}
.support .ok-note{
  display:none;margin:.15rem 0 0;
  color:var(--lp-head);font-size:.85rem;line-height:155%;text-align:center;
}
.support.is-sent .ok-note{display:block}
.support.is-sent textarea,.support.is-sent input,.support.is-sent button{display:none}

@media (min-width:768px){
  .badge{font-size:.9rem}
  .plain{font-size:.8rem}
}

/* ── Врезка-предложение внутри первого экрана ──
   Пришла на смену .cross-offer: тот стоял отдельной секцией ниже сгиба,
   а вторых экранов у страниц воронки больше нет. Здесь то же предложение,
   но карточкой под основным текстом — на том же экране. */
.card-offer{
  width:100%;margin:1.6rem 0 0;
  background:var(--lp-card);border-radius:14px;
  padding:1.5rem 1.35rem;text-align:center;
}
.card-offer .cross-tag{
  display:block;margin-bottom:.6rem;
  color:var(--lp-mute);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.card-offer h2{
  margin:0 0 .7rem;color:var(--lp-ink);
  font-size:1.375rem;font-weight:400;line-height:120%;letter-spacing:-.01em;
}
.card-offer h2 em{font-style:italic}
.card-offer p{margin:0 0 1.2rem;color:var(--lp-body);font-size:.9375rem;line-height:160%}

@media (min-width:768px){
  .card-offer{padding:2rem 1.9rem}
  .card-offer h2{font-size:1.75rem}
  .card-offer p{font-size:1.0625rem}
}

/* ── Заголовок ровно в две строки ──
   Вторая строка задаётся курсивом (<em> в макете переносится сам), а первая
   должна поместиться целиком. «Забронируйте экземпляр» при обычном кегле
   занимает 623 px против 568 px контейнера — и разрывалась пополам, давая
   третью строку. Кегль подобран по самой длинной первой строке — «Забронируйте
   экземпляр» — с запасом в несколько процентов: на 48 px она вставала ровно
   по ширине контейнера, и любой другой шрифтовой движок снова разорвал бы её
   пополам. */
h1.is-two{font-size:1.6875rem}      /* 27px */
@media (min-width:768px){
  h1.is-two{font-size:2.875rem}     /* 46px */
}

/* Узкие Android (до 380 px). Заголовки, которые должны читаться одной строкой
   («Первая часть — ваша»), на 33 px в них не помещаются: 323 px против 320 px
   свободных. Ступень вниз — и строка цела. */
@media (max-width:380px){
  h1{font-size:1.875rem}            /* 30px вместо 33 */
  h1.is-two{font-size:1.5625rem}    /* 25px: у этих первая строка ещё длиннее */
}

/* Самые узкие экраны (до 345 px) — старые iPhone SE и подобные. Места
   под «ЗАБРОНИРОВАТЬ ЧЕРЕЗ TELEGRAM» не хватает даже на 11 px, поэтому здесь
   значок Telegram уступает место надписи: слово «TELEGRAM» в ней и так есть,
   значок его только повторял. */
@media (max-width:345px){
  .cta{font-size:.625rem;letter-spacing:.04em}
  .cta.is-ghost .tg{display:none}
  h1{font-size:1.625rem}            /* 26px */
  h1.is-two{font-size:1.375rem}     /* 22px */
}