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

   Типографика здесь намеренно другая, чем на остальном сайте: заголовки набраны
   Georgia с курсивом во второй строке, а не фирменным Artegra. Так задумано в
   макете — эти страницы человек видит один раз, придя из письма, и спокойная
   книжная подача уместнее рекламной.

   Сами шрифты берутся из основного CSS сайта (@font-face с сабсетами Georgia),
   поэтому страницы обязаны подключать nicotine-detox.webflow.css перед этим
   файлом — иначе Georgia подхватится системная и метрики поедут.
   ───────────────────────────────────────────────────────────────────────────── */

/* Georgia 700.
   В общем CSS сайта объявлены только Georgia 400 и 400 italic: жирное
   начертание живёт в <style> внутри статей и до этих страниц не достаёт.
   Без объявления браузер рисовал кнопкам синтетический жирный — проверено,
   ширина строки в 700 в точности совпадала с 400.
   Сабсеты и unicode-range те же, что у остальных шрифтов сайта. */
@font-face{font-family:Georgia;src:url(../fonts/Georgia-Bold.cyr.woff2?v=5)format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0462-0463,U+046A-046B,U+0472-0475,U+048C-048D,U+0490-0493,U+0496-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04D0-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9,U+2116}
@font-face{font-family:Georgia;src:url(../fonts/Georgia-Bold.lat.woff2?v=5)format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2015,U+2017-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+2070,U+2074-2079,U+2080-2089,U+20AC,U+2122,U+2212,U+2248,U+2260,U+2264-2265,U+2500,U+2514}
@font-face{font-family:Georgia;src:url(../fonts/Georgia-Bold.latext.woff2?v=5)format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-017F}

:root{
  /* Палитра взята из макета. Она мягче фирменной (--ink #000c24): заголовок
     и текст здесь сине-серые, чтобы длинная страница не давила контрастом. */
  --lp-bg:#e8ecf4;
  --lp-ink:#000c24;        /* заголовки секций, фон кнопки */
  --lp-head:#2c3a49;       /* заголовок первого экрана */
  --lp-sub:#4a5866;        /* подзаголовок под ним */
  --lp-body:#3f4d5b;       /* текст секций */
  --lp-mute:#6b7987;       /* «Или скачать:», сноски */
  --lp-link:#33405c;       /* ссылки футера */
  --lp-line:#dfe4ea;
  --lp-card:rgba(255,255,255,.72);
  --lp-onink:#f2f6fa;      /* текст на тёмной кнопке */
  --lp-green:#6afa18;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--lp-bg);
  color:var(--lp-body);
  font-family:Georgia,serif;
  line-height:165%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:38rem;margin:0 auto;padding:0 1.25rem}

/* ── Первый экран ──
   svh/dvh вместо vh: на мобильных vh не учитывает адресную строку, и первый
   экран уезжает под сгиб ровно там, где прокрутки быть не должно. */
.hero{
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:2.5rem 0;
}

/* margin auto по горизонтали обязателен: .wrap — обычный блок, и без него
   иконка прижимается к левому краю, хотя текст внутри центрирован. */
.mark{width:56px;height:56px;margin:0 auto 1.75rem;display:block}
.mark svg{width:100%;height:100%;display:block}

h1{
  margin:0 0 1rem;
  color:var(--lp-head);
  font-size:2.0625rem;      /* 33px */
  font-weight:400;
  line-height:112%;
  letter-spacing:-.015em;
}
/* Вторая строка заголовка — курсивом. Это несущий приём макета: он делит
   «что произошло» и «что вы получили». */
h1 em{font-style:italic;display:block}
/* Курсив внутри строки, а не второй строкой: нужен там, где выделено слово
   в середине фразы («Получите первую часть книги»). */
h1 i{font-style:italic}

.sub{
  margin:0 auto 2rem;
  max-width:30rem;
  color:var(--lp-sub);
  font-size:.9375rem;       /* 15px */
  line-height:155%;
}

/* ── Кнопка ── */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  width:100%;
  background:var(--lp-ink);
  color:var(--lp-onink);
  text-decoration:none;
  border-radius:10px;
  /* Кнопка чуть выше, чем была (1.15rem): владелец попросил прибавить
     высоты, 13.09.2026.
     Верхний и нижний отступы намеренно разные. У Artegra базовая линия
     стоит на 0.74em от верха строки при line-height 100%, а высота
     заглавных — 0.70em, поэтому капитель садится на ~0.1em выше центра
     кнопки. Сдвигаем текст вниз ровно на эту величину; значок компенсируем
     обратно (ниже), иначе он уедет вместе с текстом. */
  padding:calc(1.3rem + .1em) 1.5rem calc(1.3rem - .1em);
  /* Artegra Semi Bold — вес 600. Семейство подключено основным CSS сайта.
     Заголовки и текст остаются книжными (Georgia): на кнопке фирменный
     гротеск читается лучше, особенно в разрядку и капителью. */
  font-family:Artegra,Verdana,sans-serif;
  /* Кегль меньше, чем был у Georgia: Artegra заметно шире в наборе, и на том
     же размере надпись капителью выглядела огромной, а длинные — «ЗАБРОНИРОВАТЬ
     ЧЕРЕЗ TELEGRAM» — рвались на две строки. Разрядку тоже поджали: на широком
     гротеске .1em растягивает строку сильнее, чем на серифе. */
  font-size:.75rem;         /* 12px */
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:100%;
  transition:background-color .25s ease-out,transform .15s ease-out;
}
.cta:hover{background:#0a1836}
.cta:active{transform:scale(.99)}
.cta svg{flex:none;width:17px;height:17px;transform:translateY(-.1em)} /* см. про отступы в .cta */

/* ── Файлы книги ── */
.files-row{display:flex;align-items:center;gap:.6rem;width:100%;margin-top:1.1rem}
.files-label{flex:none;color:var(--lp-mute);font-size:.78rem;font-weight:500}
.files{display:flex;gap:.6rem;flex:1}
.file{
  flex:1;
  display:block;
  background:var(--lp-card);
  color:var(--lp-head);
  text-decoration:none;
  text-align:center;
  border-radius:8px;
  padding:.85rem .5rem;
  font-size:.8125rem;       /* 13px */
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:100%;
  transition:background-color .25s ease-out;
}
.file:hover{background:#fff}
/* Выключенная кнопка: span вместо ссылки, с подписью «скоро».
   На русских страницах файлы уже подключены (/files/), is-off остался только на
   английской /thank-you — вся английская версия скрыта и ждёт запуска. */
.file.is-off{background:#0000;color:#8b95a5;box-shadow:inset 0 0 0 1px var(--lp-line);pointer-events:none}
.file.is-off small{display:block;margin-top:.25rem;font-size:.62rem;font-weight:400;letter-spacing:.04em;text-transform:none}

.fine{margin:1.15rem auto 0;max-width:32rem;color:var(--lp-mute);font-size:.78rem;line-height:160%}
/* Звёздочка сноски — фирменным зелёным. Красноватая читалась как
   предупреждение, хотя сноска почти всегда говорит о хорошем. */
.fine .star{color:var(--lp-green)}

/* ── Секции ниже первого экрана ── */
.sec{padding:3.25rem 0;border-top:1px solid var(--lp-line)}
.sec-num{display:block;margin-bottom:.7rem;color:var(--lp-mute);font-size:.7rem;font-weight:700;letter-spacing:.18em}
.sec h2{
  margin:0 0 1.15rem;
  color:var(--lp-ink);
  font-size:1.625rem;       /* 26px */
  font-weight:400;
  line-height:118%;
  letter-spacing:-.01em;
}
.sec p{margin:0 0 1rem;font-size:.9375rem;line-height:165%}
.sec p:last-child{margin-bottom:0}

/* Список «что будет дальше»: слева метка срока, справа текст. */
.steps{display:grid;gap:1.15rem;margin:0}
.step{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:start}
.step dt{color:var(--lp-mute);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:170%}
.step dd{margin:0;font-size:.9375rem;line-height:165%}

.note{
  display:flex;align-items:center;gap:.6rem;
  margin-top:1.75rem;padding:.9rem 1.1rem;
  background:var(--lp-card);border-radius:10px;
  color:var(--lp-mute);font-size:.8rem;line-height:150%;
}
.note svg{flex:none;width:16px;height:16px}

/* ── Футер ── */
footer{padding:2.25rem 0 2.75rem;border-top:1px solid var(--lp-line);text-align:center;color:var(--lp-mute);font-size:.75rem;line-height:170%}
footer .brand{margin-bottom:.6rem;color:var(--lp-head);font-size:.8rem}
footer a{color:var(--lp-link);text-decoration:none;border-bottom:1px solid var(--lp-line)}
footer a:hover{border-bottom-color:var(--lp-mute)}
footer .legal{margin-top:.55rem}
footer .legal a{margin:0 .2rem}

@media (min-width:768px){
  .mark{width:64px;height:64px;margin:0 auto 2rem}
  h1{font-size:3.375rem}          /* 54px */
  .sub{font-size:1.09rem}         /* 17.5px */
  .cta{padding:calc(1.45rem + .1em) 2rem calc(1.45rem - .1em);font-size:.8125rem}    /* 13px; про разные отступы — у базового .cta */
  .files-label{font-size:.8rem}
  .sec{padding:4rem 0}
  .sec h2{font-size:2.125rem}     /* 34px */
  .sec p,.step dd{font-size:1.0625rem;line-height:165%}
  .fine{font-size:.8rem}
  footer{font-size:.78rem}
}