/* Секции 1 и 5 главной /ru — стили из свежего экспорта Webflow.
 * 15.09.2026: секция 1 сверена с nicotine-detox.webflow.io/ru заново (новый
 * адаптив: на ≤991px одна колонка — книга сверху, текст снизу; новые размеры
 * заголовка, подзаголовка, кнопки; абзацы «Как работает» получили классы
 * .ruu/.ruj как в макете). Сюда же перенесён размер .author-text-main.
 *
 * Файл подключается ПОСЛЕ css/nicotine-detox.webflow.css и добивает разницу
 * между старым экспортом (лежит в основном файле) и текущим макетом:
 * новые классы (.xx, .xxddz, .xxzxz, .div-block-258, .disc-blockfdf, .bcccb,
 * .b-disc, .text-block1.sizing-copy, .disclamer-blue.frezz) и изменившиеся
 * значения у старых. Отдельным файлом, а не правкой 250-килобайтного экспорта:
 * так видно, что именно поменялось, и откат — это снять один <link>.
 *
 * Порядок медиазапросов повторяет экспорт Webflow (min-width сверху вниз,
 * потом max-width) — при равной специфичности выигрывает то, что ниже.
 */

.text-block1.sizing-copy { grid-column-gap: 1.25rem; grid-row-gap: 1.25rem; flex: 0 auto; padding-left: 3.5rem; }
/* Пропорция обложки (1206x1600 у файла). Нужна, чтобы место под картинку было
 * известно ДО её загрузки: иначе на телефоне, где задана только ширина, высота
 * до приезда файла равна нулю и весь первый экран прыгает вниз (сдвиг 0,484
 * в замере 10.09.2026).
 *
 * Почему не атрибуты width/height в теге, как советуют везде: они работают ещё
 * и как подсказка размера. На телефоне ширина задана в CSS и подсказка молчит,
 * а на десктопе задана ТОЛЬКО высота — и в ширину подставляется 1206px, обрезанное
 * по контейнеру. Книга растягивается вширь: коробка 455x394 вместо 297x394,
 * а object-fit:fill послушно её плющит. Проверено на боевом 10.09.2026.
 *
 * aspect-ratio таким свойством не обладает: ширина остаётся auto и считается
 * от высоты, как и раньше. */
.book { height: 38.5vw; aspect-ratio: 1206 / 1600; }
.book-block { padding-top: 5.35rem; padding-bottom: 4rem; }
.circle { width: 29vw; height: 29vw; }
.book-text { font-size: .85rem; }
.book-text.ruj { font-size: .85rem; }
.disclamer-blue.frezz { width: 36rem; height: auto; margin-bottom: 1.25rem; }
.center-block { padding-left: 2rem; padding-right: 2rem; }
.retail-descriprion { max-width: 80%; margin-bottom: 2.75rem; margin-left: auto; margin-right: auto; font-weight: 300; }
.subtitle-headerr { font-size: 2.3vw; }
.email-send-mx { display: none; }
.description-final { max-width: 36rem; margin-bottom: 2.25rem; margin-left: auto; margin-right: auto; font-size: .9rem; }
.h2-final { font-size: 3rem; }
.final-button-1 { background-color: var(--black); height: 4rem; justify-content: center; align-items: center; padding: 1.25rem 3rem; font-size: .7rem; display: flex; }
.final-button-1:hover { background-color: var(--blue); }
.final-button-2 { background-color: var(--no-work); height: 4rem; justify-content: center; align-items: center; padding: 1.25rem 3rem; font-size: .7rem; display: flex; }
.final-button-2:hover { background-color: var(--blue); }
.final-button { grid-column-gap: .75rem; grid-row-gap: .75rem; flex-flow: wrap; }
.xx { background-color: var(--black); max-width: 21rem; height: 4rem; color: var(--white); border-radius: 50rem; flex: none; justify-content: center; align-items: center; padding-top: 10px; padding-left: 3rem; padding-right: 3rem; font-size: .7rem; font-weight: 600; transition: background-color .25s ease-in-out, color .25s ease-in-out; display: flex; }
.xx:hover { background-color: var(--blue); color: var(--white); font-weight: 600; }
.button-header { grid-column-gap: 2rem; grid-row-gap: 2rem; display: flex; }
.xxzxz { max-width: 80%; color: var(--text-article); text-align: left; margin-bottom: 1rem; margin-right: auto; font-family: Artegra, Verdana, sans-serif; font-size: 1.35vw; font-style: italic; font-weight: 300; line-height: 180%; }
.bcccb { color: var(--dark-gray); font-size: .7rem; }
.xxddz { background-color: var(--white); height: 4rem; color: var(--blue); border-radius: 50rem; flex: none; justify-content: center; align-items: center; padding-top: 10px; padding-left: 3rem; padding-right: 3rem; font-size: .7rem; font-weight: 600; transition: background-color .25s ease-in-out, color .25s ease-in-out; display: flex; transform: skew(-8deg); }
.xxddz:hover { background-color: var(--green); color: var(--black); font-weight: 600; }
.bfd { display: inline-flex; }
.disc-blockfdf { grid-column-gap: .25rem; grid-row-gap: .25rem; justify-content: flex-start; align-items: center; height: 4rem; display: flex; position: static; }
.b-disc { display: inline-flex; }

@media screen and (min-width:1280px) {
  .description-final { max-width: 38rem; font-size: .935rem; }
  .xxzxz { font-size: 1.05rem; }
  .xxddz { padding-left: 3rem; padding-right: 3rem; }
}

@media screen and (min-width:1440px) {
  .text-block1.sizing-copy { margin-left: auto; margin-right: auto; padding-left: 12%; padding-right: 2rem; }
  .book-block { padding-top: 6.5rem; }
  .book-text { font-size: .96vw; }
  .book-text.ruj { font-size: .96vw; }
  .author-text-main { font-size: .98vw; }
  .disclamer-blue.frezz { width: 42rem; }
  .center-block { padding-left: 3rem; padding-right: 3rem; }
  .retail-descriprion { max-width: 85%; }
  .subtitle-headerr { font-size: 2.15vw; }
  .description-final { max-width: 40rem; font-size: 1rem; }
  .h2-final { font-size: 3.25rem; }
  .final-button-1 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .final-button-2 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .xx { height: 4.5rem; font-size: .8rem; }
  .xxzxz { max-width: 90%; font-size: 1.25rem; }
  .bcccb { font-size: .75rem; }
  .disc-blockfdf { right: 3rem; }
}

@media screen and (min-width:1920px) {
  .text-block1.sizing-copy { padding-left: 14%; }
  .book { height: 36vw; }
  .circle { width: 27.5vw; height: 27.5vw; }
  .retail-descriprion { max-width: 79%; }
  .subtitle-headerr { font-size: 2.05vw; }
  .description-final { max-width: 45rem; font-size: 1.125rem; }
  .h2-final { font-size: 3.5rem; }
  .final-button-1 { height: 4.5rem; font-size: .85rem; }
  .final-button-2 { height: 4.5rem; font-size: .85rem; }
  .final-button { grid-column-gap: 1rem; grid-row-gap: 1rem; }
  .xx { max-width: 22rem; height: 4.5rem; font-size: .85rem; }
  .xxzxz { margin-bottom: 1.5rem; font-size: 1.5rem; }
  .xxddz { height: 4.5rem; font-size: .85rem; }
  .author-text-main { font-size: .98vw; }
}

@media screen and (max-width:991px) {
  /* Одна колонка: книга (правый блок) первой строкой, текст — второй. */
  .section-1 { grid-template-columns: 1.85fr; }
  #w-node-a3c9c58d-56c3-2908-5866-bbea87e0ad4b-9999fb2a { grid-area: 2 / 1 / 3 / 2; }
  #w-node-b8313f4a-0aba-285e-4a9b-810297154496-e2abd52c { grid-area: 1 / 1 / 2 / 2; }
  .left-block { padding-top: 0; }   /* в макете правила нет; старый экспорт даёт 11rem */
  .text-block1.sizing-copy { align-self: flex-start; margin-left: 5%; margin-right: 5%; padding-bottom: 4rem; padding-left: 0; }
  .book { width: 50vw; height: auto; position: relative; transform: none; }   /* старый экспорт: sticky + rotate(-9deg) */
  .book-block { padding-top: 7.5rem; padding-bottom: 3rem; padding-left: 0%; position: static; }
  .circle { width: 50vw; height: 50vw; left: auto; }   /* старый экспорт: left:.3rem */
  .about-book { border-top: 1px solid var(--line); }
  .h2 { font-size: 3.8vw; }
  .book-text { font-size: .85rem; }
  .book-text.margin.ruu { font-size: .935rem; }
  .book-text.ruj { font-size: .935rem; }
  .author-text-main { font-size: .935rem; }
  .disclamer-blue.frezz { justify-content: center; align-items: center; width: 90%; }
  .retail-descriprion { max-width: 90%; }
  .subtitle-headerr { text-align: center; font-size: 4.35vw; }
  .description-final { max-width: 90%; font-size: 1.85vw; }
  .h2-final { font-size: 5.6vw; }
  .final-button-1 { height: 4rem; }
  .final-button-2 { height: 4rem; }
  .xx { max-width: 25rem; height: 4.5rem; padding-left: 4rem; padding-right: 4rem; font-size: .75rem; }
  .button-header { align-self: center; }
  .xx.eng { padding-left: 2rem; padding-right: 2rem; }
  .xxzxz { text-align: center; max-width: 90%; margin-bottom: .5rem; margin-left: auto; margin-right: auto; font-size: 2.5vw; }
  .xxddz { padding-left: 2rem; padding-right: 2rem; }
  .xxddz.eng { padding-left: 2rem; padding-right: 2rem; }
  .disc-blockfdf { height: auto; left: 1rem; right: 1rem; }
  .b-disc { display: inline; }
}

@media screen and (max-width:767px) {
  /* .section-1, #w-node-…, .book{position:static}: значения базового экспорта
     для этой ширины, повторены здесь, иначе их перебивает блок @991 выше. */
  .section-1 { grid-template-columns: 1.25fr; }
  #w-node-a3c9c58d-56c3-2908-5866-bbea87e0ad4b-9999fb2a { grid-row: 2 / 3; }
  #w-node-b8313f4a-0aba-285e-4a9b-810297154496-e2abd52c { grid-area: 1 / 1 / 2 / 2; }
  .left-block { padding-top: 0; }
  .text-block1.sizing-copy { margin-left: auto; margin-right: auto; padding-bottom: 3rem; padding-left: 0%; }
  .book { width: 55vw; height: auto; position: static; }
  .book-block { padding-top: 7.5rem; padding-bottom: 3rem; padding-left: 0%; }
  .circle { width: 56vw; height: 56vw; }
  .about-book { border-top: 1px solid var(--line); }
  .h2 { font-size: 4vw; }
  .center-block { padding-top: 0; padding-left: 1.5rem; padding-right: 1.5rem; }
  .retail-descriprion { margin-bottom: 2.5rem; }
  .subtitle-headerr { font-size: 4.5vw; }
  .description-final { margin-bottom: 2.25rem; font-size: 2.5vw; }
  .h2-final { font-size: 6.5vw; }
  .final-button-1 { padding-left: 3rem; padding-right: 3rem; }
  .final-button-2 { height: 4rem; padding-left: 3rem; padding-right: 3rem; }
  .final-button { grid-column-gap: .5rem; grid-row-gap: .5rem; }
  .xx { padding-left: 3rem; padding-right: 3rem; }
  .button-header { align-self: center; }
  .xxzxz { text-align: center; align-self: center; font-size: 2.8vw; }
  .bcccb { font-size: .65rem; }
}

@media screen and (max-width:479px) {
  .text-block1.sizing-copy { grid-column-gap: .85rem; grid-row-gap: .85rem; }   /* правка владельца: 0.85rem вместо 1rem из макета */
  .book { width: 78vw; }
  .book-block { padding-top: 6.8rem; padding-bottom: 2rem; }
  .circle { width: 16rem; height: 16rem; }
  .about-book { padding: 3rem 1.5rem; }
  .h2 { font-size: 7vw; line-height: 150%; }   /* базовый экспорт; иначе перебьёт 4vw из @767 */
  .book-text { font-size: .85rem; }
  .book-text.margin.ruu { font-size: .85rem; }
  .book-text.ruj { font-size: .85rem; }
  .author-text-main { font-size: .85rem; }
  .disclamer-blue.frezz { width: 95%; }
  .center-block { padding-left: 1.5rem; padding-right: 1.5rem; }
  .retail-descriprion { max-width: none; margin-bottom: 1.5rem; }
  .subtitle-headerr { font-size: 5.6vw; }
  .description-final { max-width: none; margin-bottom: 1.5rem; font-size: 4vw; }
  .h2-final { font-size: 8.4vw; }
  .final-button-1 { width: 100%; height: 4rem; padding: 1.35rem .5rem; font-size: .75rem; }
  .final-button-2 { width: 100%; height: 4rem; padding: 1.35rem .5rem; font-size: .75rem; }
  .final-button { grid-column-gap: .75rem; grid-row-gap: .75rem; flex-flow: column; width: 100%; }
  .xx { align-self: stretch; width: 100%; max-width: none; height: 4rem; }
  .xx.eng { height: 3.5rem; padding-left: 1.75rem; padding-right: 1.75rem; }
  .button-header { grid-column-gap: 1rem; grid-row-gap: 1rem; flex-flow: column; justify-content: center; align-items: center; width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
  .xxzxz { max-width: none; margin-bottom: .5rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 3.9vw; line-height: 160%; }
  .xxddz { align-self: stretch; }
  .xxddz.eng { height: 3.5rem; padding-left: 1.75rem; padding-right: 1.75rem; }
  .bfd { display: inline; }
  .disc-blockfdf { height: auto; }
}

/* В новом макете инлайновой формы в первом экране нет — её роль играет кнопка
   «Получите Часть I — бесплатно», ведущая на /ru/part1. Разметка формы оставлена
   на месте (она заморожена, см. css/service-notice.css): чтобы вернуть форму,
   достаточно убрать это правило. */
.email-send-mx { display: none; }

/* Кнопки нижнего блока ведут на живые страницы воронки, поэтому здесь снимается
   заморозка из css/service-notice.css: он гасит их по классу (серая заливка,
   серый текст) и режет клики через pointer-events. Заодно возвращаем цвет текста
   и состояния :hover — значения из макета Webflow. Файл подключён только в ru.html
   и только последним, так что на английской главной кнопки остаются погашенными. */
.final-button-1,
.final-button-2 {
  pointer-events: auto;
  cursor: pointer;
  border: 0;   /* в макете у кнопок рамки нет, а в старом экспорте она была */
}
.final-button-1 { color: var(--white); }
.final-button-2 { color: var(--black); }
.final-button-1:hover { background-color: var(--blue); color: var(--white); }
.final-button-2:hover { background-color: var(--blue); color: var(--white); }

/* Ниже 480px в макете кнопки идут колонкой на всю ширину, а в старом экспорте
   у них осталось `flex:1;width:auto` под раскладку строкой. Ширину и отступы
   генератор уже перенёс, а `flex` Webflow не задаёт — гасим его здесь. */
@media screen and (max-width:479px) {
  .final-button-1,
  .final-button-2 { flex: none; }
}

/* Переносы слов (hyphens:auto) на телефоне для .book-text ставились 15.09.2026
 * и в тот же день сняты по требованию владельца: «ку-рить», «пред-сказуемая»
 * выглядят хуже, чем дыры от выравнивания по ширине. Не возвращать. */
/* Вместо переносов — выравнивание по левому краю на телефоне (в экспорте
 * text-align:justify), чтобы не было дыр между словами. */
@media (max-width: 767px) {
  .book-text { text-align: left; }
}

/* Заголовок первого экрана: «обещаний.» должно уходить на третью строку.
 * В Webflow это держится на волоске: строка «— без силы воли и пустых
 * обещаний.» шириной 22.51em при ширине блока 22.48em на 1920px. У нас потолок
 * body в 1920px снят (правка 28.07.2026), и на экранах шире 1920 слово влезает
 * во вторую строку. Потолок 21em: третья строка «обещаний. Только нейронаука.»
 * (19.05em) помещается, вторая с «обещаний.» — нет, на любой ширине от 992px.
 * Ниже 992 заголовок центрирован и переносится сам — не трогаем. 16.09.2026 */
@media (min-width: 992px) {
  .subtitle-headerr { max-width: 21em; }
}