/* =========================================================================
   v4 — надстройка под правки заказчика (03.11.2026).
   Правила взяты из дампа правок: убрать нумерацию блоков, точки, ховеры на
   неинтерактивном; выстроить иерархию заголовков; кнопки по центру со строкой
   статуса; слайдеры; карточка клиента по центральной оси; вертикальный расчёт
   цены; тарифы без обложек; деньги с точкой-разделителем.
   ========================================================================= */

/* ---------- 1. Иерархия заголовков ---------- */
.v4 h2 { font-size: clamp(32px, 4.3vw, 58px); line-height: 1.02; margin: 0 0 clamp(16px, 2vw, 28px) }
.v4 h3 { font-size: clamp(23px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.022em }
.v4 h4 { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px);
         line-height: 1.2; letter-spacing: -.012em; margin: 0 0 10px }
.v4 .sect { padding-top: var(--sect-y); padding-bottom: var(--sect-y) }
.v4 .sect__lead,
.v4 .h-lead { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 25px);
              line-height: 1.28; color: var(--ink); max-width: 46ch }
.v4 .sect--center .sect__head { text-align: center; margin-inline: auto; max-width: 74ch }
.v4 .sect--center .sect__head .h-lead { margin-inline: auto }

/* ---------- 2. Списки: точки строго в одну линию, выгоды крупнее ---------- */
.v4 .dots,
.v4 .dash { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.v4 .dots li,
.v4 .dash li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); column-gap: .35em;
               align-items: start; padding: 13px 0; border-top: 1px solid var(--line);
               font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.5; color: var(--ink-2) }
.v4 .dots li:last-child,
.v4 .dash li:last-child { border-bottom: 1px solid var(--line) }
.v4 .dots li::before { content: ""; position: static; align-self: start; margin-top: .62em;
                       width: 7px; height: 7px; border-radius: 50%; background: var(--accent-d) }
.v4 .dash li::before { content: "—"; position: static; color: var(--accent-d); line-height: 1.5 }
.v4 .worse .dots li { border-color: rgba(244,239,230,.16); color: rgba(244,239,230,.86) }
.v4 .worse .dots li::before { background: var(--accent-l) }

/* список выгод — жирнее и крупнее, как просили */
.v4 .hope__list li { font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; color: var(--ink) }
.v4 .hope__list li > span { font-weight: 600 }

/* регалии — списком через тире */
.v4 .trust__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px }
.v4 .trust__list li { position: relative; padding-left: 26px; font-size: clamp(16px, 1.35vw, 19px);
                      color: var(--ink-2); border: 0 }
.v4 .trust__list li::before { content: "—"; position: absolute; left: 0; color: var(--accent-d) }
.v4 .trust__list b { color: var(--ink) }

/* ---------- 3. Кнопки по центру + строка статуса под кнопкой ---------- */
.v4 .cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(22px, 2.6vw, 36px) }
.v4 .cta .btn { align-self: center }
.v4 .status { margin: 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--ink-3) }
.v4 .status b { color: var(--ink); font-weight: 600 }
.v4 .status .timer { font-family: var(--num); font-size: 17px; color: var(--accent-d); letter-spacing: .01em }
.v4 .sect--dark .status { color: rgba(244,239,230,.72) }
.v4 .sect--dark .status b { color: var(--paper) }
.v4 .sect--dark .status .timer { color: var(--accent-l) }

/* ---------- 4. Слайдер (нативный scroll-snap + стрелки) ---------- */
.v4 .slider { position: relative }
.v4 .slider__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
                     scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: thin }
.v4 .slider__track::-webkit-scrollbar { height: 6px }
.v4 .slider__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px }
.v4 .slider__item { flex: 0 0 auto; scroll-snap-align: start; margin: 0 }
.v4 .slider__item img { width: 100%; height: auto; object-fit: cover; border-radius: 14px }
.v4 .slider__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px }
.v4 .slider__btn { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; cursor: pointer;
                   border: 1px solid var(--line); background: var(--card); color: var(--ink);
                   font-size: 17px; line-height: 1; display: grid; place-items: center;
                   transition: background .2s, border-color .2s }
.v4 .slider__btn:hover { background: var(--paper-2); border-color: rgba(36,28,23,.3) }
.v4 .slider__btn:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 3px }
.v4 .slider__count { font-family: var(--num); font-size: 14px; color: var(--ink-3); min-width: 56px; text-align: center }
.v4 .sect--dark .slider__btn { background: rgba(244,239,230,.08); border-color: var(--line-d); color: var(--paper) }
.v4 .sect--dark .slider__count { color: rgba(244,239,230,.6) }

/* ---------- 5. Герой ---------- */
.v4 .hero__regalia--on-photo { position: absolute; left: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px); margin: 0; color: var(--paper); font-size: 13.5px; line-height: 1.45;
  letter-spacing: .01em; max-width: 34ch; text-shadow: 0 1px 14px rgba(0,0,0,.55) }
.v4 .hero__photo { position: relative }
.v4 .hero__photo::after { content: ""; position: absolute; inset: 55% 0 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(25,20,18,0) 0%, rgba(25,20,18,.62) 100%) }
.v4 .hero__facts { display: flex; gap: clamp(18px, 3vw, 42px); flex-wrap: wrap }
.v4 .fact b { font-family: var(--num); font-weight: 500 }

/* ---------- 6. «Узнаёшь себя» и «хуже»: эмодзи вместо цифр ---------- */
.v4 .scene__n { display: inline-grid; place-items: center; width: auto; height: auto; background: none;
                font-size: clamp(30px, 3vw, 42px); line-height: 1; margin-bottom: 10px; border: 0 }
.v4 .worse__rows { display: grid; gap: 0; margin: 26px 0 0 }
.v4 .worse__row { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); column-gap: .2em;
                  align-items: start; padding: 16px 0; border-top: 1px solid rgba(244,239,230,.16);
                  font-size: clamp(16px, 1.35vw, 19px); color: rgba(244,239,230,.88) }
.v4 .worse__row:last-child { border-bottom: 1px solid rgba(244,239,230,.16) }
.v4 .worse__row .em { font-size: 1.35em; line-height: 1.1 }

/* ---------- 7. «Почему это не работает» — двумя экранами ---------- */
.v4 .reason { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center }
@media (min-width: 900px) {
  .v4 .reason { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) }
  .v4 .reason--flip .reason__pic { order: -1 }
}
.v4 .reason__pic { margin: 0 }
.v4 .reason__pic img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line) }
.v4 .reason__pic figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-3); line-height: 1.45 }
.v4 .reason + .reason { margin-top: clamp(36px, 5vw, 78px) }

/* ---------- 8. Оффер «Но как?» ---------- */
.v4 .offer__in { display: grid; gap: clamp(22px, 3vw, 44px); align-items: center }
@media (min-width: 900px) { .v4 .offer__in { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) } }
.v4 .offer__pic { margin: 0 }
.v4 .offer__pic img { width: 100%; border-radius: 20px; aspect-ratio: 1 / 1; object-fit: cover;
                      object-position: 50% 22%; border: 1px solid rgba(244,239,230,.18) }
.v4 .offer__h2 { font-size: clamp(30px, 4vw, 54px) }
.v4 .offer__em { font-size: .82em; margin-right: .3em }

/* ---------- 9. Карточка клиента ---------- */
.v4 .client { padding: clamp(24px, 3vw, 44px) 0 clamp(30px, 3.4vw, 50px); border-top: 1px solid var(--line) }
.v4 .client:first-of-type { border-top: 2px solid var(--ink) }
.v4 .client__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 26px) }
.v4 .client__head h3 { margin: 0 }
.v4 .client__age { font-family: var(--num); font-size: 15px; color: var(--ink-3); letter-spacing: .04em }
.v4 .client .slider { max-width: 760px; margin-inline: auto }
.v4 .client__shots .slider__item { flex: 0 0 clamp(260px, 62%, 360px) }
.v4 .client__shots .slider__item img { aspect-ratio: 1 / 1; background: var(--paper-2) }
.v4 .client__shots figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); text-align: center }
.v4 .client__cols { display: grid; gap: clamp(16px, 2vw, 26px); margin-top: clamp(22px, 2.6vw, 36px) }
@media (min-width: 820px) { .v4 .client__cols { grid-template-columns: 1fr 1fr } }
.v4 .client__point { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
                     padding: clamp(18px, 2vw, 26px) }
.v4 .client__point--a { background: #F6F2EA }
.v4 .client__point--b { background: #FBF1EE; border-color: rgba(176,64,47,.22) }
.v4 .client__point h4 { font-size: clamp(19px, 1.8vw, 24px); color: var(--accent-d); text-transform: none }
.v4 .client__review { margin-top: clamp(22px, 2.6vw, 36px); text-align: center }
.v4 .client__ask { font-size: clamp(19px, 1.9vw, 25px); margin: 0 0 14px }
.v4 .client__review-slot { margin: 0 auto; max-width: 620px }
.v4 .client__review-slot img { width: 100%; border-radius: 16px; border: 1px solid var(--line) }
.v4 .cases__more { margin-top: clamp(26px, 3vw, 44px); text-align: center }

/* ---------- 10. Бонусы: обложка 9:16 слева, текст справа ---------- */
.v4 .gift { display: grid; gap: clamp(20px, 2.6vw, 36px); padding: clamp(26px, 3vw, 44px) 0;
            border-top: 1px solid var(--line); align-items: start }
@media (min-width: 860px) { .v4 .gift { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) } }
.v4 .gift:first-of-type { border-top: 2px solid var(--ink) }
.v4 .gift__cover { margin: 0 }
.v4 .gift__cover img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px;
                       border: 1px solid var(--line) }
.v4 .gift__title { font-size: clamp(21px, 2.1vw, 28px); margin: 0 0 14px }
.v4 .gift__lead { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.7vw, 22px);
                  margin: 0 0 clamp(24px, 2.6vw, 36px); color: var(--ink) }
.v4 .gift__price { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
                   font-family: var(--display); font-weight: 600; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink) }
.v4 .gift__price b { color: var(--accent-d) }
.v4 .bonuses__total { text-align: center; margin: clamp(28px, 3vw, 44px) 0 0;
                      font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 26px) }

/* ---------- 11. Расчёт цены: вертикально, по центру, со слайдерами ---------- */
.v4 .calc { display: grid; gap: clamp(30px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px) }
.v4 .calc__step { text-align: center; max-width: 860px; margin-inline: auto }
.v4 .calc__step h3 { margin: 0 0 12px }
.v4 .calc__step p { margin: 0 auto 14px; max-width: 66ch }
.v4 .calc__calc { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.8vw, 24px);
                  color: var(--ink); margin: 0 auto 18px }
.v4 .calc__calc b { color: var(--accent-d) }
.v4 .calc .slider { max-width: 720px; margin-inline: auto }
.v4 .calc .slider__item { flex: 0 0 clamp(240px, 88%, 640px) }
.v4 .calc .slider__item img { aspect-ratio: 16 / 10; object-fit: contain; background: var(--card) }
.v4 .calc__sum { max-width: 860px; margin: clamp(26px, 3vw, 44px) auto 0; text-align: center;
                 padding: clamp(22px, 2.8vw, 34px); border: 1px solid var(--line); border-radius: 18px;
                 background: var(--card) }
.v4 .calc__market { margin: 0 0 16px; font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-2) }
.v4 .calc__market b { text-decoration: underline; text-underline-offset: 3px }
.v4 .calc__mine { margin: 0 0 12px; font-family: var(--display); font-weight: 600;
                  font-size: clamp(18px, 1.9vw, 25px); line-height: 1.25 }
.v4 .calc__mine b { color: var(--accent-d); white-space: nowrap }
.v4 .calc__note { margin: 0; font-size: clamp(15px, 1.35vw, 17px); color: var(--ink-2) }
.v4 .calc__note b { text-decoration: underline; text-underline-offset: 3px; color: var(--ink) }

/* ---------- 12. «Первые 3 дня»: белая подложка + цена справа ---------- */
.v4 .deal__in { display: grid; gap: clamp(22px, 3vw, 40px); align-items: center }
@media (min-width: 900px) { .v4 .deal__in { grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) } }
.v4 .deal__lead { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 24px);
                  margin: 0 0 16px; color: var(--paper) }
.v4 .deal__plate { background: var(--paper); color: var(--ink); border-radius: 18px;
                   padding: clamp(20px, 2.4vw, 30px); margin: 18px 0 0 }
.v4 .deal__plate p { margin: 0 0 12px }
.v4 .deal__plate p:last-child { margin-bottom: 0 }
.v4 .deal__bonuses { list-style: none; margin: 10px 0 0; padding: 0 }
.v4 .deal__bonuses li { position: relative; padding-left: 20px; margin-bottom: 6px; color: var(--ink-2) }
.v4 .deal__bonuses li::before { content: "—"; position: absolute; left: 0; color: var(--accent-d) }
.v4 .deal__sum { margin: 16px 0 0; font-family: var(--display); font-weight: 700;
                 font-size: clamp(17px, 1.6vw, 21px); text-decoration: underline; text-underline-offset: 4px;
                 color: var(--paper) }
.v4 .deal__more { margin: 18px 0 0; color: var(--paper); font-family: var(--display); font-weight: 600;
                  font-size: clamp(17px, 1.6vw, 21px) }
.v4 .deal__price { text-align: center }
.v4 .deal__old { display: block; font-family: var(--num); font-size: clamp(20px, 2.2vw, 30px);
                 color: rgba(244,239,230,.62); text-decoration: line-through }
.v4 .deal__big { display: block; font-family: var(--num); font-weight: 500; line-height: .92;
                 font-size: clamp(64px, 11vw, 132px); color: var(--paper); margin: 6px 0 0 }
.v4 .deal__big-unit { display: block; font-family: var(--num); font-size: clamp(16px, 1.6vw, 20px);
                      letter-spacing: .12em; text-transform: uppercase; color: rgba(244,239,230,.7) }

/* ---------- 13. Тарифы ---------- */
.v4 .tariff__emoji { display: block; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; margin-bottom: 14px }
.v4 .tariff__price { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
                     margin: 18px 0 6px }
.v4 .tariff__price s { font-family: var(--num); font-size: clamp(16px, 1.5vw, 20px); color: var(--ink-3);
                       opacity: .85 }
.v4 .tariff__price b { font-family: var(--num); font-weight: 500; font-size: clamp(34px, 3.6vw, 46px);
                       line-height: 1; color: var(--ink) }
.v4 .tariff--hero .tariff__price b { color: var(--paper) }
.v4 .tariff__save { text-align: center; font-family: var(--display); font-weight: 600;
                    font-size: clamp(15px, 1.4vw, 18px); color: var(--accent-d); margin: 0 0 16px }
.v4 .tariff--hero .tariff__save { color: var(--accent-l) }
.v4 .tariff__badge { background: var(--accent-d); color: var(--paper) }
.v4 .tariffs__foot { margin: clamp(24px, 3vw, 38px) 0 0; text-align: center; font-size: 15px;
                     color: var(--ink-2); line-height: 1.7 }
.v4 .tariffs__foot .timer { display: inline-block; font-family: var(--num); font-weight: 500;
                           font-size: clamp(22px, 2.4vw, 30px); color: var(--accent-d); letter-spacing: .02em }
.v4 .tariff__btn { align-self: stretch; text-align: center; display: block }

/* ---------- 14. Отзывы: слайдер ---------- */
.v4 .reviews__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
                     padding-bottom: 10px; scrollbar-width: thin }
.v4 .reviews__track > .slot { flex: 0 0 clamp(220px, 26%, 300px); scroll-snap-align: start; margin: 0;
                             border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
                             background: var(--card) }
.v4 .reviews__track img { width: 100%; height: clamp(300px, 42vw, 460px); object-fit: cover; object-position: top }
.v4 .reviews__track figcaption { display: none }

/* ---------- 15. Ховеры на неинтерактивном — прочь ---------- */
.v4 .how__item,
.v4 .recap__row,
.v4 .question,
.v4 .path,
.v4 .slot,
.v4 .row-slot,
.v4 .case__shot,
.v4 .trust__list li { cursor: default !important }
.v4 .how__item:hover,
.v4 .recap__row:hover,
.v4 .question:hover,
.v4 .path:hover,
.v4 .trust__list li:hover { transform: none !important; box-shadow: none !important }
.v4 .how__item:hover .v3-how-icon { background: none !important; border-color: currentColor !important }
.v4 .slot:hover img,
.v4 .case__shot:hover img,
.v4 .row-slot:hover img { transform: none !important }

/* ---------- 16. Иконки-эмодзи в «формате» и «что получаешь» ---------- */
.v4 .how__item .how__emoji { display: block; font-size: clamp(30px, 2.6vw, 38px); line-height: 1; margin-bottom: 12px }
.v4 .recap__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center }
.v4 .recap__row .recap__emoji { font-size: clamp(30px, 2.8vw, 40px); line-height: 1 }
.v4 .how__grid { margin-top: clamp(22px, 3vw, 36px) }

/* ---------- 17. Три пути ---------- */
.v4 .paths__kicker { font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
                     font-size: clamp(26px, 3.4vw, 46px); line-height: 1.02; margin: 0 0 10px; color: var(--paper) }
.v4 .path__n { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display);
               font-weight: 600; letter-spacing: .01em }
.v4 .path__emoji { font-size: 1.35em }
.v4 .paths .cta { margin-top: clamp(28px, 3.4vw, 46px) }

/* ---------- 18. Прочее ---------- */
.v4 .sect--dark { --ink: #F4EFE6; --ink-2: rgba(244,239,230,.86); --ink-3: rgba(244,239,230,.66);
                  --line: rgba(244,239,230,.18); --card: rgba(244,239,230,.06); --paper-2: rgba(244,239,230,.1) }
.v4 .v32-case-heading { display: none }
.v4 .questions__slot,
.v4 .cases__hint,
.v4 .offer__hint,
.v4 .bonus-item__review,
.v4 .price__grid,
.v4 .tariff__cover,
.v4 .hero__brand { display: none }
.v4 .question__pic img { border-radius: 16px }

/* ---------- 19. Банк результатов ---------- */
.v4 .bank { background: var(--paper-2) }
.v4 .bank__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
                  gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(20px, 2.6vw, 34px) }
.v4 .bank__item { margin: 0 }
.v4 .bank__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px;
                      border: 1px solid rgba(36,28,23,.12) }
.v4 .hero__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start }
.v4 .calc__hint { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--ink-3) }
.v4 .client__review-slot figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3) }
.v4 .slider__btn:disabled { opacity: .4; cursor: default }

/* ---------- 20. Правки по цвету и центрированию ---------- */
.v4 .deal__plate { color: #241C17 }
.v4 .deal__plate b { color: var(--accent-d) }
.v4 .deal__bonuses li { color: #4C4038 }
.v4 .faq__in .cta { grid-column: 1 / -1 }
.v4 .start h2,
.v4 .start .start__lead,
.v4 .bank h2,
.v4 .bank .h-lead { text-align: center }
.v4 .start .start__list { max-width: 780px; margin-inline: auto }
.v4 .cases h2,
.v4 .reviews h2,
.v4 .bonuses h2,
.v4 .price h2,
.v4 .tariffs h2 { margin-bottom: 12px }

/* герой: фото — отдельная колонка сетки, а не вложенный блок */
.v4 .hero { display: grid; grid-template-columns: 1fr; align-items: stretch }
@media (min-width: 1024px) { .v4 .hero { grid-template-columns: 1.06fr .94fr } }
.v4 .hero__in { min-width: 0 }
.v4 .hero__photo { position: relative; min-height: 60svh; overflow: hidden }
.v4 .hero__photo picture { position: static; display: block; height: 100%; width: 100% }
.v4 .hero__photo img { width: 100%; height: 100%; min-height: 60svh; object-fit: cover; object-position: 50% 18% }
@media (max-width: 1023px) { .v4 .hero__photo { order: -1; min-height: 52svh; height: 52svh } }
.v4 .client__shots .slider__item img { height: auto }

/* ---------- 21. Картинки: атрибуты height/width не должны задавать высоту ---------- */
.v4 .gift__cover img,
.v4 .client__review-slot img,
.v4 .bank__item img,
.v4 .calc .slider__item img,
.v4 .offer__pic img,
.v4 .question__pic img,
.v4 .reason__pic img,
.v4 .trust__pic img { height: auto }
.v4 .client .slider__item { flex: 0 0 clamp(240px, 56%, 320px) }
.v4 .client .slider__item img { height: auto; aspect-ratio: 1 / 1; object-fit: cover }
.v4 .client__review-slot img { aspect-ratio: 4 / 5; object-fit: cover }

/* ---------- 22. Доводка после первого просмотра ---------- */
.v4 .tariff__badge { position: static; display: inline-block; margin: 0 0 14px; padding: 6px 12px;
                     border-radius: 999px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase }
.v4 .reviews__track > .slot { flex: 0 0 clamp(190px, 22%, 250px) }
.v4 .reviews__track img { height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center }
.v4 .client__ask { text-transform: none; letter-spacing: -.015em; color: var(--ink);
                   font-size: clamp(19px, 1.9vw, 25px); font-weight: 600 }
.v4 .gift__body h4 { margin-top: 22px }
.v4 .gift__body h4:first-of-type { margin-top: 4px }
.v4 .status { text-wrap: balance }
.v4 .status .timer { white-space: nowrap }
.v4 .calc__step > p { max-width: 62ch }
.v4 .bonus-item__price { display: none }
.v4 .recap__row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px }
@media (min-width: 760px) { .v4 .recap__row { grid-template-columns: auto minmax(0, 1fr); gap: 24px 32px } }
.v4 .recap__row h3 { margin-bottom: 6px }
.v4 .question::before,
.v4 .v32-question::before { content: none !important; display: none !important }
.v4 .question__pic { max-width: 420px; margin-inline: auto }

/* ---------- 23. Контраст на тёмных полях (a11y) ---------- */
.v4 .hero .status,
.v4 .deal .status,
.v4 .paths .status,
.v4 .sect--dark .status { color: rgba(244,239,230,.8) }
.v4 .hero .status b,
.v4 .deal .status b,
.v4 .paths .status b,
.v4 .sect--dark .status b { color: #F4EFE6 }
.v4 .hero .status .timer,
.v4 .deal .status .timer,
.v4 .paths .status .timer,
.v4 .sect--dark .status .timer { color: #F0B6A9 }
.v4 .deal__old { color: rgba(244,239,230,.9) }
.v4 .deal__big-unit { color: rgba(244,239,230,.88) }
.v4 .deal__sum,
.v4 .deal__more { color: #F4EFE6 }
.v4 .tariff--hero h3,
.v4 .tariff--hero h4,
.v4 .tariff--hero .tariff__for,
.v4 .tariff--hero .tariff__dur { color: #F4EFE6 }
.v4 .tariff--hero .dash li { color: rgba(244,239,230,.88); border-color: rgba(244,239,230,.2) }
.v4 .tariff--hero .dash li::before { color: #E8A79C }
.v4 .tariffs__foot { color: #4C4038 }
.v4 .client__shots figcaption { color: #5C5045 }
.v4 .hero__regalia--on-photo { text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.6) }

/* ---------- 24. Списки в «трёх путях» и тариф-хит: цвета из базы не перекрываем ---------- */
.v4 .paths .path:not(.path--good) .dash li { color: rgba(244,239,230,.85); border-color: rgba(244,239,230,.16) }
.v4 .paths .path--good .dash li { color: #4C4038; border-color: rgba(36,28,23,.13) }
.v4 .paths .path--good p { color: #4C4038 }
.v4 .tariff--hero .tariff__price s { color: rgba(244,239,230,.82) }
.v4 .deal__old { color: rgba(244,239,230,.96) }
.v4 .deal__big-unit { color: rgba(244,239,230,.96) }

/* ---------- 25. Слоты под фото — крупнее (просьба: «её просто там не видно») ---------- */
.v4 .hope__list .row-slot { width: clamp(120px, 16vw, 210px); flex: none; align-self: center }
.v4 .hope__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
                     padding: 16px 0; border-top: 1px solid rgba(36,28,23,.13) }
.v4 .hope__list li:last-child { border-bottom: 1px solid rgba(36,28,23,.13) }
.v4 .hope__list .row-slot img { border-radius: 12px }
.v4 .steps__list .row-slot--step { width: clamp(120px, 16vw, 200px) }
.v4 .row-slot { cursor: default }
.v4 .hope__list li { padding: 16px 0 16px 30px }
.v4 .hope__list li::before { top: 50%; transform: translateY(-50%) }

/* ---------- 26. Подпись на фото героя: читаемость ---------- */
.v4 .hero__photo::after { inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(25,20,18,.92) 0%, rgba(25,20,18,.55) 45%, rgba(25,20,18,0) 100%) }
.v4 .hero__regalia--on-photo { color: #F7F2EA; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.8) }

/* ---------- 27. Пруф-документ: скриншот статьи PubMed ---------- */
.v4 .proof { margin: 0 }
.v4 .proof__frame { background: #FFFFFF; border: 1px solid rgba(36,28,23,.18); border-radius: 16px;
                    padding: 10px; overflow: hidden }
.v4 .proof__frame img { width: 100%; height: auto; border-radius: 10px; cursor: zoom-in; display: block }
.v4 .proof__quote { margin: 18px 0 10px; padding: 0 0 0 18px; border-left: 4px solid var(--accent-d);
                    font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.7vw, 23px);
                    line-height: 1.3; letter-spacing: -.015em; color: var(--ink) }
.v4 .proof__src { font-size: 13.5px; color: var(--ink-3); line-height: 1.5 }
.v4 .proof__src a { color: var(--accent-d); text-decoration: underline; text-underline-offset: 3px }
.v4 .proof__src a:hover { color: #8E3225 }

/* ---------- 28. Кейс: слева фотографии до/после (цикл), справа точки А/Б, снизу отзыв ---------- */
.v4 .client__grid { display: grid; gap: clamp(18px, 2.4vw, 30px); align-items: start }
@media (min-width: 900px) {
  .v4 .client__grid { grid-template-columns: minmax(0, 44%) minmax(0, 56%) }
}
.v4 .client__gallery { margin: 0 }
.v4 .fade { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
            background: var(--paper-2); border: 1px solid var(--line) }
.v4 .fade__slide { position: absolute; inset: 0; margin: 0; opacity: 0;
                   transition: opacity .9s cubic-bezier(.4,0,.2,1) }
.v4 .fade__slide.is-on { opacity: 1 }
.v4 .fade__slide img { width: 100%; height: 100%; object-fit: cover; display: block }
.v4 .fade__dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px }
.v4 .fade__dot { width: 9px; height: 9px; min-width: 9px; padding: 0; border: 0; border-radius: 50%;
                 background: rgba(36,28,23,.22); cursor: pointer; transition: background .25s, transform .25s }
.v4 .fade__dot.is-on { background: var(--accent-d); transform: scale(1.15) }
.v4 .fade__dot:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 4px }
.v4 .client__points { display: grid; gap: clamp(12px, 1.6vw, 18px) }
.v4 .client__review { margin-top: clamp(22px, 2.8vw, 34px); padding-top: clamp(18px, 2.2vw, 26px);
                      border-top: 1px solid var(--line); text-align: center }
.v4 .client__kicker { margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-size: 12.5px;
                      letter-spacing: .18em; text-transform: uppercase; color: var(--accent-d) }
.v4 .client__ask { margin: 0 0 16px }
.v4 .client__review-slot { margin: 0 auto; max-width: 560px }
.v4 .client__review-slot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
                               border-radius: 14px; border: 1px solid var(--line) }
.v4 .client__review-slot figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3) }
@media (prefers-reduced-motion: reduce) { .v4 .fade__slide { transition: none } }

.v4 .client__gallery { align-self: center }
.v4 .client__review-slot img { aspect-ratio: auto; max-height: 640px; object-fit: contain;
                               background: var(--paper-2); padding: 10px }

/* ---------- 29. Кейс: фото листаются свайпом/кнопками, отзыв — под фото ---------- */
.v4 .client__grid { display: grid; gap: clamp(20px, 2.6vw, 34px); align-items: start }
@media (min-width: 940px) {
  .v4 .client__grid { grid-template-columns: minmax(0, 46%) minmax(0, 54%) }
}
.v4 .client__media { display: grid; gap: 18px; margin: 0 }
.v4 .client__photos { margin: 0 }
.v4 .client__photos .slider__track { gap: 0; scroll-snap-type: x mandatory; border-radius: 16px;
                                     border: 1px solid var(--line); background: var(--paper-2) }
.v4 .client__photos .slider__item { flex: 0 0 100%; scroll-snap-align: center }
.v4 .client__photos .slider__item img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; cursor: zoom-in }
.v4 .client__photos .slider__nav { margin-top: 10px }
.v4 .client__review { text-align: left; margin: 0; padding: 0; border: 0 }
.v4 .client__ask { font-size: clamp(17px, 1.5vw, 20px); margin: 0 0 12px }
.v4 .client__review-slot { margin: 0; max-width: none }
.v4 .client__review-slot img { width: 100%; height: auto; max-height: none; object-fit: contain;
                               background: var(--paper-2); padding: 8px; border-radius: 14px;
                               border: 1px solid var(--line) }
.v4 .client__review-slot figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); text-align: left }
.v4 .client__points { display: grid; gap: clamp(12px, 1.6vw, 18px); align-content: start }
.v4 .client__kicker { display: none }
.v4 .client__photos { width: 100%; max-width: none; margin-inline: 0 }
.v4 .client__photos .slider__track { width: 100% }

/* ---------- 30. «Не всё потеряно»: крупные фото и жирные точки не у края ---------- */
.v4 .hope__list .row-slot { width: clamp(160px, 22vw, 260px); flex: none; align-self: center }
.v4 .hope__list .row-slot img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; width: 100% }
.v4 .hope__list li { padding-left: 46px }
.v4 .hope__list li::before { left: 14px; width: 11px; height: 11px; border: 0; background: var(--accent-d);
                            top: 50%; transform: translateY(-50%) }
.v4 .hope__list li > span { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45 }
@media (max-width: 599px) {
  .v4 .hope__list li { padding-left: 34px; grid-template-columns: minmax(0, 1fr) auto; gap: 14px }
  .v4 .hope__list li::before { left: 8px; width: 9px; height: 9px }
  .v4 .hope__list .row-slot { width: 122px }
}
.v4 .hope__list li { align-items: start }
.v4 .hope__list .row-slot { align-self: start }
.v4 .hope__list li > span { padding-top: 4px }

/* ---------- 31. «Не всё потеряно»: точка в строке текста, фото крупное справа ---------- */
.v4 .hope__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
                     column-gap: 18px; align-items: start; padding: 18px 0; border-top: 1px solid rgba(36,28,23,.14) }
.v4 .hope__list li::before { content: ""; position: static; align-self: start; margin-top: .5em;
                             width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--accent-d);
                             transform: none; left: auto; top: auto }
.v4 .hope__list li > span { padding-top: 0 }
.v4 .hope__list .row-slot { width: clamp(170px, 20vw, 250px); margin: 0; align-self: start }
.v4 .hope__list .row-slot img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px;
                                height: clamp(200px, 24vw, 300px); width: 100% }
@media (max-width: 599px) {
  .v4 .hope__list li { grid-template-columns: auto minmax(0, 1fr); padding: 16px 0 }
  .v4 .hope__list .row-slot { grid-column: 1 / -1; width: 100%; margin-top: 12px }
  .v4 .hope__list .row-slot img { aspect-ratio: 16 / 10; height: auto; object-position: center 28% }
}
.v4 .hope__list .row-slot img { height: clamp(190px, 19vw, 250px) }
.v4 .hope__list .row-slot { width: clamp(160px, 18vw, 220px) }

/* ---------- 32. «Не всё потеряно»: точка живёт в строке текста, текст по центру строки ---------- */
.v4 .hope__list li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px }
.v4 .hope__list li::before { display: none }
.v4 .hope__list li > span { position: relative; display: block; padding-left: 26px }
.v4 .hope__list li > span::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent-d) }
@media (max-width: 599px) {
  .v4 .hope__list li { grid-template-columns: 1fr }
  .v4 .hope__list li > span { align-self: start }
}

/* ---------- 33. Слайдер кейса: без полосы прокрутки, отзыв — кадром ---------- */
.v4 .client__photos .slider__track { scrollbar-width: none; -ms-overflow-style: none }
.v4 .client__photos .slider__track::-webkit-scrollbar { width: 0; height: 0; display: none }
.v4 .client__shot--review img { object-fit: contain; background: var(--paper-2); padding: 10px }
.v4 .client__shot--review figcaption { margin: 8px 0 0; font-size: 13px; color: var(--ink-3);
                                       text-align: center; line-height: 1.4 }
.v4 .client__review, .v4 .client__ask, .v4 .client__review-slot { display: none }

/* ---------- 34. Банк результатов: широкий циклический слайдер ---------- */
.v4 .bank__slider { margin-top: clamp(20px, 2.6vw, 32px) }
.v4 .bank__slider .slider__track { gap: 12px; scrollbar-width: none; -ms-overflow-style: none }
.v4 .bank__slider .slider__track::-webkit-scrollbar { width: 0; height: 0; display: none }
.v4 .bank__slider .slider__item { flex: 0 0 clamp(150px, 13.6vw, 210px); scroll-snap-align: start }
.v4 .bank__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px;
                      border: 1px solid rgba(36,28,23,.12); cursor: zoom-in }
.v4 .bank__slider .slider__nav { margin-top: 16px }
@media (max-width: 599px) {
  .v4 .bank__slider .slider__item { flex: 0 0 42vw }
}

/* ---------- 35. Все слайдеры — одного вида, без полос прокрутки ---------- */
.v4 .slider__track,
.v4 .reviews__track { scrollbar-width: none; -ms-overflow-style: none }
.v4 .slider__track::-webkit-scrollbar,
.v4 .reviews__track::-webkit-scrollbar { width: 0; height: 0; display: none }
.v4 .slider__nav { margin-top: 16px }
.v4 .reviews__track .slider__item { flex: 0 0 clamp(180px, 20%, 240px) }
.v4 .reviews__track .slider__item img { height: clamp(280px, 34vw, 400px); width: 100%;
                                       object-fit: cover; object-position: top center; border-radius: 14px;
                                       border: 1px solid var(--line); background: var(--card); cursor: zoom-in }
.v4 #price .slider__item img { border-radius: 14px }
@media (max-width: 599px) {
  .v4 .reviews__track .slider__item { flex: 0 0 64vw }
  .v4 .reviews__track .slider__item img { height: 320px }
}

/* ---------- 36. Сертификаты слайдером, увеличение фото в реальном размере ---------- */
.v4 .trust__certs { margin-top: 18px; width: 100% }
.v4 .trust__certs .slider__item { flex: 0 0 clamp(220px, 30%, 340px) }
.v4 .trust__diplom { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
                     padding: 10px; margin: 0 }
.v4 .trust__diplom img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; cursor: zoom-in }
.v4 .trust__diplom figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); text-align: center }
.v4 img.v3-zoomable { cursor: zoom-in }
.v4 .v3-lightbox img { max-height: 82vh; width: auto; max-width: 94vw; object-fit: contain }
.v4 .v3-lightbox .zoom-nav { display: flex; align-items: center; justify-content: center; gap: 14px;
                             margin-top: 16px }
.v4 .v3-lightbox .zoom-nav[hidden] { display: none }
.v4 .zoom-nav__btn { width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
                     border: 1px solid rgba(244,239,230,.35); background: rgba(244,239,230,.08);
                     color: var(--paper); font-size: 17px; line-height: 1; display: grid; place-items: center }
.v4 .zoom-nav__btn:hover { background: rgba(244,239,230,.18) }
.v4 .zoom-nav__btn:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 3px }
.v4 .zoom-nav__count { font-family: var(--num); font-size: 14px; color: rgba(244,239,230,.75); min-width: 56px;
                       text-align: center }

/* ---------- 37. Лайтбокс: фото в реальном размере + навигация внутри ---------- */
.v4 .v3-lightbox { display: flex; flex-direction: column; align-items: center; gap: 10px;
                   position: relative; padding: 56px 24px 20px; overflow: hidden }
.v4 .v3-lightbox img { max-height: 68vh; max-width: 100%; width: auto; height: auto; object-fit: contain }
.v4 .v3-lightbox__caption { margin: 0; }
.v4 .v3-lightbox__close { position: absolute; top: 12px; right: 12px; float: none; }
.v4 .v3-lightbox .zoom-nav { margin-top: 4px }
@media (max-width: 599px) {
  .v4 .v3-lightbox { padding: 52px 12px 14px; width: min(96vw, 920px) }
  .v4 .v3-lightbox img { max-height: 62vh }
}

/* ---------- 38. «Не всё потеряно»: крупные фото, на мобиле фото сверху ---------- */
/* десктоп: фото заметно больше, текст по центру кадра */
.v4 .hope__list li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 26px;
                     padding: 22px 0 }
.v4 .hope__list .row-slot { width: clamp(210px, 24vw, 300px); margin: 0 }
.v4 .hope__list .row-slot img { width: 100%; height: clamp(240px, 26vw, 360px); aspect-ratio: auto;
                                object-fit: cover; border-radius: 16px }
.v4 .hope__list li > span { max-width: 54ch; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5 }

/* мобиле: фото первым, во всю ширину, текст под ним */
@media (max-width: 599px) {
  .v4 .hope__list li { grid-template-columns: 1fr; row-gap: 14px; padding: 18px 0 22px }
  .v4 .hope__list .row-slot { order: -1; width: 100%; margin: 0 }
  .v4 .hope__list .row-slot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: center 30% }
  .v4 .hope__list li > span { order: 1; max-width: none; font-size: 17.5px; line-height: 1.45;
                              padding-left: 24px }
  .v4 .hope__list li > span::before { width: 9px; height: 9px; top: .58em }
}

/* «Не всё потеряно» на десктопе: убираем пустоту между текстом и кадром */
.v4 .hope__list { max-width: 1080px }
.v4 .hope__list li { padding: 18px 0; column-gap: 32px }
.v4 .hope__list li > span { max-width: 46ch }
.v4 .hope__list .row-slot { width: clamp(200px, 22vw, 290px) }
.v4 .hope__list .row-slot img { height: clamp(230px, 24vw, 340px) }
@media (max-width: 599px) {
  .v4 .hope__list { max-width: none }
  .v4 .hope__list .row-slot { width: 100% }
  .v4 .hope__list .row-slot img { height: auto; aspect-ratio: 4 / 3 }
}

.v4 .hope__list .row-slot img { background: var(--paper-2) }

/* ---------- 39. «И дальше будет только хуже»: без вертикальной линии слева ---------- */
.v4 .worse__rows p,
.v4 .worse__rows p.v3-in,
.v4 .worse__row {
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* ---------- 40. «Почему это не работает»: фото сразу под заголовком ---------- */
.v4 .reason { display: grid; grid-template-columns: 1fr; gap: 16px }
.v4 .reason__h { margin: 0 }
@media (min-width: 900px) {
  .v4 .reason { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
                grid-template-areas: "h pic" "text pic";
                column-gap: clamp(24px, 3vw, 44px); row-gap: 14px; align-items: start }
  .v4 .reason__h { grid-area: h }
  .v4 .reason__text { grid-area: text }
  .v4 .reason > figure { grid-area: pic; align-self: start; margin: 0 }
  .v4 .reason--flip { grid-template-areas: "pic h" "pic text" }
}
@media (max-width: 899px) {
  .v4 .reason { gap: 14px }
  .v4 .reason__text { display: grid; gap: 12px }
}

/* мобиле: заголовок → фото → текст */
@media (max-width: 899px) {
  .v4 .reason,
  .v4 .reason--flip { grid-template-columns: 1fr; grid-template-areas: "h" "pic" "text" }
  .v4 .reason__h { grid-area: h }
  .v4 .reason > figure { grid-area: pic }
  .v4 .reason__text { grid-area: text }
}

/* ---------- 41. «Но ты не виновата»: только эмодзи, без точек списка ---------- */
.v4 .accuse__list li { padding-left: 0 }
.v4 .accuse__list li::before { display: none }
.v4 .accuse__list li .em { margin-right: .45em; font-size: 1.15em; line-height: 1 }

/* ---------- 42. Первый экран на мобиле: фото фоном, всё по центру ---------- */
@media (max-width: 1023px) {
  .v4 .hero { position: relative; min-height: 100svh; overflow: hidden; display: block }
  .v4 .hero__photo { position: absolute; inset: 0; z-index: 0; min-height: 0 }
  .v4 .hero__photo picture { position: absolute; inset: 0; width: 100%; height: 100% }
  .v4 .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; min-height: 0 }
  .v4 .hero__photo::after {
    inset: 0; height: auto;
    background:
      linear-gradient(180deg, rgba(25,20,18,.62) 0%, rgba(25,20,18,.80) 42%, rgba(25,20,18,.95) 72%, #191412 100%)
  }
  .v4 .hero__regalia--on-photo { display: none }
  .v4 .hero__in {
    position: relative; z-index: 1; min-height: 100svh;
    justify-content: center; align-items: center; text-align: center;
    gap: 20px; padding: 56px 20px 48px
  }
  .v4 .hero__main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px }
  .v4 .hero__main .eyebrow { align-self: center }
  .v4 .hero h1 { max-width: 22ch; margin-inline: auto }
  .v4 .hero__sub, .v4 .hero__under { max-width: 40ch; margin-inline: auto }
  .v4 .hero .cta { align-items: center; width: 100% }
  .v4 .hero__btns { justify-content: center; width: 100% }
  .v4 .hero__btns .btn { min-width: min(260px, 100%) }
  .v4 .hero .status { max-width: 32ch; margin-inline: auto; text-align: center }
}
@media (max-width: 1023px) {
  .v4 .hero__photo img { object-position: 50% 12% }
  .v4 .hero__photo::after {
    background:
      linear-gradient(180deg, rgba(25,20,18,.30) 0%, rgba(25,20,18,.62) 34%, rgba(25,20,18,.92) 66%, #191412 100%)
  }
}

/* ---------- 43. Итоговая ценность бонусов: цена на овальной подложке ---------- */
.v4 .bonuses__total { display: flex; flex-direction: column; align-items: center; gap: 14px;
                      margin: clamp(30px, 3.4vw, 46px) 0 0; padding: 0; border: 0 }
.v4 .bonuses__total-label { font-family: var(--display); font-weight: 600; font-size: 12.5px;
                            letter-spacing: .18em; text-transform: uppercase; color: var(--accent-d);
                            text-align: center }
.v4 .bonuses__total-price { display: inline-flex; align-items: center; justify-content: center;
                            font-family: var(--num); font-weight: 500; font-size: clamp(30px, 3.2vw, 44px);
                            line-height: 1; color: var(--ink); white-space: nowrap;
                            background: var(--card); border: 1px solid rgba(36,28,23,.18);
                            border-radius: 999px; padding: 16px 40px;
                            box-shadow: 0 0 0 6px rgba(36,28,23,.03) }
@media (max-width: 599px) {
  .v4 .bonuses__total-price { font-size: 30px; padding: 14px 30px }
}

.v4 .bonuses__total-price { padding: 16px 46px 16px 40px }
@media (max-width: 599px) { .v4 .bonuses__total-price { padding: 14px 36px 14px 30px } }

/* ---------- 44. «Сколько всё это стоит»: одно выравнивание, фото под заголовком ---------- */
.v4 .calc { gap: clamp(34px, 4vw, 56px) }
.v4 .calc__step { text-align: left; max-width: none; margin: 0 }
.v4 .calc__step h3 { text-align: left; margin: 0 0 16px }
.v4 .calc__step p { text-align: left; margin: 0 0 14px; max-width: 62ch }
.v4 .calc__calc { text-align: left; margin: 4px 0 16px }
.v4 .calc .slider { max-width: none; margin: 0 0 14px }
.v4 .calc .slider__item { flex: 0 0 100% }
.v4 .calc .slider__item img { width: 100%; height: auto; max-height: none; aspect-ratio: auto;
                              object-fit: contain; background: var(--paper-2); border-radius: 16px;
                              border: 1px solid var(--line) }
.v4 .calc__hint { text-align: left; margin: 0 0 16px; font-size: 13px; color: var(--ink-3) }
.v4 .calc__sum { text-align: left; max-width: 720px; margin-inline: 0 }
.v4 .calc__sum p { max-width: none }
@media (min-width: 900px) { .v4 .calc .slider { max-width: 960px } }
.v4 .calc__calc b,
.v4 .calc__sum b,
.v4 .calc__step .nb { white-space: nowrap }

.v4 .calc__sum b { white-space: normal }
.v4 .calc__sum { overflow-wrap: anywhere }

/* ---------- 45. Итоговая плашка цены: без рваных переносов ---------- */
.v4 .calc__mine, .v4 .calc__note { text-wrap: pretty }
.v4 .calc__mine b, .v4 .calc__note b { white-space: nowrap }
.v4 .calc__market { text-wrap: balance }
.v4 .calc__sum { text-align: left }

/* ---------- 46. «Первые 3 дня»: цена выше, подпись не наезжает, порядок на мобиле ---------- */
.v4 .deal__in { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px) }
.v4 .deal__in > * { margin: 0 }
.v4 .deal__plate { margin: 0 }
.v4 .deal__big { line-height: 1.02; margin: 8px 0 12px }
.v4 .deal__big-unit { margin: 0; letter-spacing: .14em }
.v4 .deal__price { text-align: center }
.v4 .deal__sum { margin: clamp(6px, 1vw, 10px) 0 0 }
.v4 .deal__more { margin: 0 }

@media (max-width: 899px) {
  .v4 .deal__in > h2 { order: 1 }
  .v4 .deal__lead { order: 2 }
  .v4 .deal__plate { order: 3 }
  .v4 .deal__price { order: 4; margin: clamp(18px, 4vw, 28px) 0 clamp(6px, 1.4vw, 12px) }
  .v4 .deal__sum { order: 5; text-align: center }
  .v4 .deal__more { order: 6; text-align: center }
}

@media (min-width: 900px) {
  .v4 .deal__in {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    grid-template-areas: "h price" "lead price" "plate price" "sum price" "more price";
    column-gap: clamp(24px, 3vw, 40px); row-gap: 14px; align-items: start
  }
  .v4 .deal__in > h2 { grid-area: h }
  .v4 .deal__lead { grid-area: lead }
  .v4 .deal__plate { grid-area: plate }
  .v4 .deal__sum { grid-area: sum; text-align: left }
  .v4 .deal__more { grid-area: more; text-align: left }
  .v4 .deal__price { grid-area: price; align-self: center }
}

/* ---------- 47. Строка статуса и счётчик: без рванья на «7 из / 10» ---------- */
.v4 .status,
.v4 .tariffs__foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 6px 16px; text-align: center
}
.v4 .status__item,
.v4 .tariffs__foot .status__item { white-space: nowrap }
.v4 .status__item .timer,
.v4 .tariffs__foot .timer { white-space: nowrap }
.v4 .status__item + .status__item::before,
.v4 .tariffs__foot .status__item + .status__item::before {
  content: "·"; margin-right: 12px; opacity: .55
}
@media (max-width: 599px) {
  .v4 .status,
  .v4 .tariffs__foot { flex-direction: column; align-items: center; gap: 8px }
  .v4 .status__item + .status__item::before,
  .v4 .tariffs__foot .status__item + .status__item::before { content: none; margin: 0 }
}

/* ---------- 48. Ультравайд: текст героя не уезжает вправо ---------- */
@media (min-width: 1900px) {
  .v4 .hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) }
  .v4 .hero__in {
    margin-left: 0; margin-right: auto;
    width: min(100%, 900px);
    padding-left: clamp(48px, 4vw, 96px);
    padding-right: clamp(16px, 2vw, 40px)
  }
  .v4 .hero__main { max-width: 680px }
  .v4 .hero h1 { font-size: clamp(54px, min(3.6vw, 5.1vh), 84px) }
}

/* ---------- 49. Ультравайд: возвращаем композицию дизайнера, правим только кадр фото ---------- */
@media (min-width: 1900px) {
  .v4 .hero__in {
    margin-left: auto; margin-right: 0;
    width: min(100%, 860px);
    padding-left: clamp(40px, 3.4vw, 72px);
    padding-right: clamp(16px, 1.6vw, 32px)
  }
  .v4 .hero__main { max-width: 660px }
  /* фото не режем в узкую полоску: держим пропорцию и показываем фигуру целиком */
  .v4 .hero__photo img { object-position: 50% 8%; }
}

/* ---------- 50. Фото героя не растягивает первый экран (это и было «фото ушло вниз») ---------- */
@media (min-width: 1024px) {
  .v4 .hero { min-height: 100svh }
  .v4 .hero__photo { position: relative; overflow: hidden; min-height: 100svh; height: auto }
  .v4 .hero__photo picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
  .v4 .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%;
                         min-height: 0; object-fit: cover; object-position: 50% 18% }
}
@media (min-width: 1900px) {
  .v4 .hero h1 { font-size: clamp(54px, min(3.8vw, 5.25vh), 73px) }
  .v4 .hero__photo img { object-position: 50% 14% }
}

/* ---------- 51. Первый экран: кадр 4:5 без обрезки, текст по центру (любой монитор) ---------- */
@media (min-width: 1024px) {
  .v4 .hero { align-items: center; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) }
  .v4 .hero__in { justify-content: center; min-height: 100svh; height: auto; gap: 0 }
  .v4 .hero__main { gap: 18px }

  .v4 .hero__photo {
    position: relative; min-height: 100svh; overflow: visible;
    display: flex; align-items: center; justify-content: flex-end;
    background: var(--night);
    padding: clamp(20px, 3vh, 48px) clamp(24px, 3.4vw, 64px) clamp(20px, 3vh, 48px) 0
  }
  /* рамка ровно в пропорции кадра — фото видно целиком, обрезки нет */
  .v4 .hero__photo picture {
    position: relative; inset: auto; display: block;
    height: clamp(380px, 78svh, 780px); width: auto; aspect-ratio: 4 / 5;
    max-width: 100%; border-radius: 22px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,.45)
  }
  .v4 .hero__photo img { position: static; width: 100%; height: 100%; min-height: 0;
                         object-fit: cover; object-position: 50% 20%;
                         border-radius: 22px }
  .v4 .hero__photo::after { display: none }
  .v4 .hero__regalia--on-photo { display: none }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .v4 .hero__photo { padding-right: clamp(16px, 2vw, 32px) }
  .v4 .hero__photo picture { height: clamp(340px, 72svh, 640px) }
}
@media (min-width: 1024px) {
  .v4 .hero__photo { justify-content: center; padding: clamp(20px,3vh,48px) clamp(16px,2vw,40px) }
  .v4 .hero__photo picture { height: clamp(380px, 80svh, 800px) }
}

/* ---------- 52. «Почему это не работает»: без провала и с уменьшенным скрином ---------- */
@media (min-width: 900px) {
  .v4 .reason {
    display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    grid-template-areas: none; column-gap: clamp(28px, 3.4vw, 56px);
    align-items: start
  }
  .v4 .reason__col { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
  .v4 .reason > figure { grid-column: 2; align-self: start; margin: 0; justify-self: end;
                         max-width: min(100%, 545px) }
  .v4 .reason--flip > figure { justify-self: start }
  .v4 .reason--flip { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) }
  .v4 .reason--flip .reason__col { grid-column: 2; grid-row: 1 }
  .v4 .reason--flip > figure { grid-column: 1; grid-row: 1 }
  .v4 .reason .reason__h, .v4 .reason .reason__text { grid-area: auto }
  /* сам скриншот-пруф компактнее */
  .v4 .reason .proof img { max-height: 62vh; width: auto; max-width: 100% }
  .v4 .reason .proof__quote { font-size: clamp(17px, 1.5vw, 21px) }
}
@media (max-width: 899px) {
  .v4 .reason__col { display: contents }
}
@media (min-width: 900px) {
  .v4 .reason > figure { grid-row: 1; grid-column: 2 }
  .v4 .reason--flip > figure { grid-row: 1; grid-column: 1 }
  .v4 .reason--flip .reason__col { grid-row: 1; grid-column: 2 }
  .v4 .reason__col { grid-row: 1; grid-column: 1 }
}
@media (min-width: 900px) {
  .v4 .reason .proof img { max-height: 44vh }
  .v4 .reason > figure { max-width: min(100%, 520px) }
  .v4 .reason .proof__quote { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.45 }
  .v4 .reason .proof__src { font-size: 12.5px }
}

/* ---------- 53. Герой на десктопе: текст по центру, статус без висящей точки ---------- */
@media (min-width: 1024px) {
  .v4 .hero__in { align-items: center; text-align: center }
  .v4 .hero__main { align-items: center; text-align: center; gap: 16px }
  .v4 .hero .eyebrow { justify-content: center; align-self: center }
  .v4 .hero h1 { max-width: 21ch; margin-inline: auto; text-wrap: balance }
  .v4 .hero__sub, .v4 .hero__under { max-width: 48ch; margin-inline: auto }
  .v4 .hero__btns { justify-content: center }
  .v4 .hero .status { justify-content: center; text-align: center; max-width: 46ch; margin-inline: auto }
}
/* разделитель — после пункта, а не перед: при переносе точки в начале строки больше нет */
.v4 .status__item + .status__item::before,
.v4 .tariffs__foot .status__item + .status__item::before { content: none; margin: 0 }
.v4 .status__item:not(:last-child)::after,
.v4 .tariffs__foot .status__item:not(:last-child)::after {
  content: "·"; margin-left: 12px; opacity: .55
}
/* точки-разделители убираем совсем: при переносе они висели в конце строки */
.v4 .status__item::after,
.v4 .tariffs__foot .status__item::after,
.v4 .status__item::before,
.v4 .tariffs__foot .status__item::before { content: none !important; margin: 0 !important }
.v4 .status, .v4 .tariffs__foot { gap: 8px 20px }

/* ---------- 54. Лайтбокс: фиксированное окно, страница не прыгает в начало ---------- */
.v4 .v3-lightbox {
  position: fixed; inset: 0; margin: auto;
  width: min(94vw, 920px); max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 56px 24px 20px; overflow: hidden
}
.v4 .v3-lightbox[open] { display: flex }
@media (max-width: 599px) {
  .v4 .v3-lightbox { width: min(96vw, 920px); padding: 52px 12px 14px }
}
/* закрытый диалог не должен занимать экран и перехватывать клики */
.v4 .v3-lightbox:not([open]) { display: none !important }

/* ---------- 55. «Но ты не виновата»: убираем пустоту под текстом ---------- */
@media (min-width: 1000px) {
  .v4 .accuse__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                    gap: clamp(32px, 3.6vw, 56px); align-items: center }
  .v4 .accuse__lead { max-width: 34ch }
  .v4 .accuse__big { max-width: 20ch }
}
.v4 .accuse__list li { padding: 11px 0 }
.v4 .accuse__list li:last-child { border-bottom: 1px solid rgba(255,248,244,.26) }

/* ---------- 56. «Почему это не работает»: колонки одной высоты ---------- */
@media (min-width: 900px) {
  /* текст крупнее — левая колонка догоняет по высоте правую */
  .v4 .reason__text { font-size: clamp(16.5px, 1.28vw, 18.5px); line-height: 1.62; display: grid; gap: 16px }
  .v4 .reason__col { gap: 18px }
  /* фото встаёт по центру своей колонки, без свисающих пустот */
  .v4 .reason > figure { align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 12px }
  .v4 .reason--flip > figure { align-self: center; width: 100%; max-width: 100%; justify-self: stretch }
  .v4 .reason--flip .reason__pic img { width: 100%; height: auto }
  .v4 .reason .proof__quote { margin: 0 }
}
/* мем оформлен как карточка, чтобы читался частью блока, а не случайной вставкой */
.v4 .reason--flip .reason__pic img {
  width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(36,28,23,.10)
}
@media (min-width: 900px) {
  .v4 .reason--flip .reason__pic { max-width: 100% }
}

/* ---------- 57. «Не всё потеряно»: чередование фото, отступ у точек, плотнее текст ---------- */
@media (min-width: 600px) {
  .v4 .hope__list li {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 18px clamp(14px, 1.6vw, 28px);
    column-gap: 28px
  }
  .v4 .hope__list li > .row-slot { grid-column: 1; grid-row: 1; order: -1 }
  .v4 .hope__list li > span { grid-column: 2; grid-row: 1; max-width: 46ch;
                              font-size: clamp(16px, 1.22vw, 18px); line-height: 1.45 }
  /* чётные строки — фото справа, текст слева */
  .v4 .hope__list li:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) auto
  }
  .v4 .hope__list li:nth-child(even) > .row-slot { grid-column: 2; order: 0 }
  .v4 .hope__list li:nth-child(even) > span { grid-column: 1; order: -1; justify-self: start }
  .v4 .hope__list li > span { align-self: center }
  .v4 .hope__list li > span::before { left: -22px }
}
@media (min-width: 600px) {
  .v4 .hope__list li,
  .v4 .hope__list li:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(20px, 2.6vw, 44px);
    padding: 16px clamp(14px, 1.6vw, 28px);
    align-items: center
  }
  .v4 .hope__list .row-slot { width: 100%; align-self: center }
  .v4 .hope__list .row-slot img { width: 100%; height: clamp(230px, 25vw, 330px);
                                  aspect-ratio: auto; object-fit: cover; object-position: 50% 30% }
  .v4 .hope__list li > span { max-width: 40ch; justify-self: start; align-self: center }
  .v4 .hope__list li:nth-child(even) > span { justify-self: end }
  .v4 .hope__list li:nth-child(even) > span::before { left: auto; right: -22px }
}
/* точка всегда слева от текста — одинаково в обеих раскладках */
.v4 .hope__list li:nth-child(even) > span::before { left: -22px; right: auto }
/* позиционированием ленты владеет JS: браузерный scroll-snap конфликтует со сбросом на копию */
.v4 [data-slider-track] { scroll-snap-type: none }
.v4 [data-slider-track] .slider__item { scroll-snap-align: none }
/* снэп ведёт JS: убираем браузерный, чтобы два движка не спорили за позицию */
.v4 .slider__track[data-slider-track],
.v4 .slider__track[data-slider-track] .slider__item { scroll-snap-type: none; scroll-snap-align: none }

/* ---------- 58. Банк результатов: крупные превью ---------- */
.v4 .bank__slider .slider__item { flex: 0 0 clamp(210px, 21vw, 300px) }
.v4 .bank__item img { aspect-ratio: 3 / 4; border-radius: 14px }
.v4 .bank__slider { margin-top: clamp(18px, 2.2vw, 26px) }
@media (max-width: 599px) {
  .v4 .bank__slider .slider__item { flex: 0 0 76vw }
  .v4 .bank__item img { aspect-ratio: 3 / 4 }
}
@media (min-width: 1600px) {
  .v4 .bank__slider .slider__item { flex: 0 0 clamp(260px, 17vw, 340px) }
}
/* исходники банка квадратные — рамка тоже 1:1, иначе режем коллажи «до/после» */
.v4 .bank__item img, .v4 .bank__slider .bank__item img { aspect-ratio: 1 / 1; object-fit: cover }

/* ---------- 59. Бонусы: одна полоса, стоимость — белым на красном ---------- */
.v4 .gift__price {
  margin: 18px 0 0; padding: 14px 22px; border-top: 0; border-radius: 12px;
  background: var(--accent-d); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.35
}
.v4 .gift__price b { color: #fff; font-weight: 700 }
@media (max-width: 599px) {
  .v4 .gift__price { padding: 13px 18px; font-size: 17px }
}
/* под плашкой стоимости лишняя линия не нужна — она и есть разделитель */
.v4 .gift .dash li:last-child,
.v4 .gift ol.num li:last-child { border-bottom: 0 }

/* ---------- 60. «Сколько всё это стоит»: один ритм, пруф справа карточкой ---------- */
.v4 .calc { margin-top: clamp(20px, 2.4vw, 30px); gap: clamp(34px, 4vw, 52px) }
.v4 .calc .h-lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; max-width: 56ch }
.v4 .calc__step { max-width: none; text-align: left; margin: 0 }
.v4 .calc__step h3 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.25; margin: 0 0 14px; text-align: left }
.v4 .calc__step p { font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.6; color: var(--ink-2);
                    max-width: 52ch; margin: 0 0 14px; text-align: left }
.v4 .calc__step .calc__calc { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.5vw, 21px);
                              line-height: 1.4; color: var(--ink); max-width: 46ch; margin: 2px 0 16px }
.v4 .calc__step .calc__calc b { color: var(--accent-d) }
.v4 .calc__hint { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); margin: 0 0 16px; text-align: left }

@media (min-width: 900px) {
  .v4 .calc__step {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    column-gap: clamp(28px, 3.6vw, 56px); align-items: start; row-gap: 0
  }
  .v4 .calc__step > h3 { grid-column: 1; grid-row: 1 }
  .v4 .calc__step > .slider { grid-column: 2; grid-row: 1 / span 8; align-self: start; margin: 0 }
  .v4 .calc__step > p,
  .v4 .calc__step > .calc__calc,
  .v4 .calc__step > .calc__hint { grid-column: 1 }
  .v4 .calc__step .slider__item { flex: 0 0 100% }
  .v4 .calc__step .slider__item img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px }
  .v4 .calc__step .slider__nav { margin-top: 12px }
}
@media (min-width: 900px) {
  .v4 .calc__step { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px) }
}
.v4 .calc__sum { text-align: left; padding: 24px clamp(20px, 2.4vw, 34px) }

/* ---------- 61. Таймер и строка статуса: заметный блок ---------- */
.v4 .timer {
  font-family: var(--num); font-weight: 600;
  font-size: 1.5em; letter-spacing: .01em; color: var(--accent-d);
  font-variant-numeric: tabular-nums; white-space: nowrap
}
/* под тарифами — полоса-карточка: её видно, она держит внимание */
.v4 .tariffs__foot {
  display: block; margin: clamp(22px, 2.6vw, 32px) auto 0;
  width: fit-content; max-width: 100%;
  padding: 16px clamp(18px, 2.2vw, 30px);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(36, 28, 23, .07);
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.5; color: var(--ink-2);
  text-align: center
}
.v4 .tariffs__foot .status__item { display: inline; white-space: nowrap }
.v4 .tariffs__foot .status__item + .status__item::before {
  content: "·"; margin: 0 12px; color: var(--ink-3); opacity: .7
}
.v4 .tariffs__foot .timer { font-size: clamp(20px, 1.9vw, 26px); margin-left: 6px }
@media (max-width: 599px) {
  .v4 .tariffs__foot { display: block; padding: 14px 16px; font-size: 14.5px }
  .v4 .tariffs__foot .status__item { display: block; white-space: normal }
  .v4 .tariffs__foot .status__item + .status__item::before { content: none; margin: 0 }
  .v4 .tariffs__foot .status__item + .status__item { margin-top: 8px }
  .v4 .tariffs__foot .timer { display: inline-block; margin: 4px 0 0; font-size: 24px }
}
/* разделители в полосе — тонкие линии, а не точки (точки отключены глобально) */
.v4 .tariffs__foot .status__item + .status__item {
  margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line)
}
@media (max-width: 599px) {
  .v4 .tariffs__foot .status__item + .status__item { margin-left: 0; padding-left: 0; border-left: 0 }
}

/* ---------- 62. «Но в чём подвох»: читаемый текст в общем масштабе сайта ---------- */
.v4 .catch h2 .em { font-size: .82em; line-height: 1; vertical-align: -2px }
.v4 .catch__lead { font-size: clamp(22px, 2vw, 28px); margin: 0 0 18px }
.v4 .catch p {
  font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.65; color: var(--ink-2);
  max-width: 62ch; margin: 0 0 18px
}
.v4 .catch p:last-of-type { margin-bottom: 8px }
.v4 .catch .catch__strong {
  font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.5; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent-d);
  border-radius: 12px; padding: 16px 20px; margin: 22px 0 6px; max-width: 62ch
}
/* мелкие абзацы в остальных блоках подтягиваем к тому же масштабу */
.v4 #steps p, .v4 #how p, .v4 .recap p, .v4 .faq p, .v4 #deal p {
  font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.6
}

/* ---------- 63. Отзывы: лента без тормозов, заметная кнопка, крупный таймер ---------- */
/* элементы вне экрана не раскладываются и не рисуются — лента из 10 высоких скриншотов
   перестаёт «залипать» при перелистывании */
.v4 .slider__item { content-visibility: auto; contain-intrinsic-size: auto 460px }

/* главная кнопка выразительнее */
.v4 .btn--clay,
.v4 .cta .btn--clay {
  padding: 18px 40px; font-weight: 700; font-size: clamp(16px, 1.25vw, 18px);
  letter-spacing: .01em; border-radius: 999px;
  box-shadow: 0 14px 32px rgba(176, 64, 47, .30), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease
}
.v4 .btn--clay:hover,
.v4 .cta .btn--clay:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(176, 64, 47, .38), inset 0 1px 0 rgba(255, 255, 255, .26)
}
.v4 .btn--clay:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(176, 64, 47, .3) }

/* таймер крупный во всех строках статуса */
.v4 .status .timer {
  font-family: var(--num); font-weight: 600;
  font-size: clamp(19px, 1.55vw, 23px); color: var(--accent-d);
  font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap
}
.v4 .hero .status .timer,
.v4 .deal .status .timer,
.v4 .paths .status .timer,
.v4 .sect--dark .status .timer { color: #F6C6B8 }
/* скриншоты отзывов показываем с начала сообщения, а не серединой */
.v4 #reviews .slider__item img,
.v4 .reviews .slider__item img { object-fit: cover; object-position: 50% 0 }
/* на мобиле пункт статуса может переноситься, таймер — нет (иначе строка вылезает) */
@media (max-width: 599px) {
  .v4 .status .status__item { white-space: normal; overflow-wrap: anywhere }
  .v4 .status .timer { white-space: nowrap; display: inline-block }
  .v4 .status { max-width: 100%; padding-inline: 4px }
}

/* ---------- 64. Горизонтальное переполнение на мобиле/планшете ---------- */
.v4 .calc { grid-template-columns: minmax(0, 1fr) }
.v4 .calc__step { min-width: 0 }
.v4 .calc .slider,
.v4 .calc .slider__track,
.v4 .calc__sum { min-width: 0; max-width: 100% }
.v4 #cases .client,
.v4 #cases .client__media,
.v4 #cases .client .slider,
.v4 #cases .client__points { min-width: 0; max-width: 100% }

/* ---------- 65. «И ещё раз, что ты получаешь»: в общей вёрстке сайта ---------- */
.v4 .recap__row::before { display: none }                 /* красные полосы убраны */
.v4 .recap__row { border-top-color: rgba(36, 28, 23, .14); padding: 20px 0 }
.v4 .recap__row:last-child { border-bottom-color: rgba(36, 28, 23, .14) }
.v4 .recap__row h3 { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.3; margin: 0 0 6px }
.v4 .recap__row p { font-size: clamp(15.5px, 1.15vw, 16.5px); line-height: 1.55; color: var(--ink-3) }
.v4 .recap__row .recap__emoji { font-size: clamp(26px, 2.2vw, 32px) }

/* ---------- 66. «Три пути»: фон карточки не должен пропадать ни в каком состоянии ---------- */
.v4 .paths .path--good,
.v4 .paths .path--good:hover,
.v4 .paths .path--good:focus-within { background: var(--paper) }
.v4 .paths .path--good h3,
.v4 .paths .path--good p,
.v4 .paths .path--good li { color: var(--ink) }
.v4 .paths .path--good p,
.v4 .paths .path--good li { color: #4C4038 }

/* ---------- 67. Просмотр фото: без подписей под изображением ---------- */
.v4 .v3-lightbox__caption { display: none !important }

/* ---------- 68. Полоса внизу страницы: у body оставался отступ под удалённую плашку ---------- */
.v4 body,
body.v4 { padding-bottom: 0 !important }
.v4 main { padding-bottom: 0; margin-bottom: 0 }

/* ---------- 69. «Узнаёшь себя?»: без серой сетки и красных линий, заголовки по центру ---------- */
.v4 .scenes__grid { border-top: 0; border-bottom: 0 }
.v4 .scene { border: 0 !important; padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.6vw, 38px) !important }
.v4 .scene:nth-child(odd),
.v4 .scene:nth-child(even) { border-right: 0 !important; border-left: 0 !important }
.v4 .scene::before { display: none !important }              /* красная вертикальная полоса */
.v4 .scene .scene__emoji,
.v4 .scene .scene__n { align-self: center; margin-inline: auto }
.v4 .scene h3 { text-align: center; max-width: 30ch; margin-inline: auto }
.v4 .scene .dots { margin-top: 4px }
.v4 .scene .dots li { border-bottom: 0 !important; padding-top: 9px; padding-bottom: 9px }
.v4 .scene { align-items: stretch }
@media (min-width: 900px) {
  .v4 .scenes__grid { column-gap: clamp(20px, 2.6vw, 40px) }
}
/* линии между пунктами тоже убираем: остаётся воздух и точки */
.v4 .scene .dots li,
.v4 .scene .dots > li.v32-scene-final { border-top: 0 !important; border-bottom: 0 !important }

/* ---------- 70. Центрируем заголовок БЛОКА, а заголовки карточек оставляем слева ---------- */
.v4 #scenes h2 { text-align: center; margin-inline: auto }
.v4 #scenes .scenes__head { max-width: 780px; margin-inline: auto; text-align: center }
.v4 .scene h3 { text-align: left; margin-inline: 0; max-width: 30ch }

/* ---------- 71. «Но не всё потеряно»: без красных точек, текст и заголовки по центру ---------- */
.v4 .hope__list li > span::before,
.v4 .hope__list li > span::after { display: none !important }
.v4 .hope__list li > span { padding-left: 0 !important; text-align: center; justify-self: center !important;
                             margin-inline: auto; max-width: 34ch }
.v4 .hope h2,
.v4 .hope .hope__lead,
.v4 .hope__head { text-align: center; margin-inline: auto }
.v4 .hope h2 { max-width: 26ch }
@media (max-width: 599px) {
  .v4 .hope__list li > span { text-align: center; max-width: 32ch; margin-inline: auto }
}

/* ---------- 74. Заголовок и лид блока «Как именно мы придём к результату?» по центру ---------- */
.v4 .steps__head { text-align: center; margin-inline: auto; max-width: 900px }
.v4 .steps__head h2,
.v4 #steps h2 { text-align: center; margin-inline: auto }
.v4 .steps__head .h-lead,
.v4 .steps__lead,
.v4 #steps .h-lead { text-align: center; margin-inline: auto; max-width: 62ch }

/* ---------- 75. Пакет точечных правок от 03.11.2026 (вечер) ---------- */
/* заголовки блоков по центру: «А как итог», «Как устроено…», бонусы, вопросы, тарифы, «И ещё раз…» */
.v4 .cmp h2,
.v4 .cmp h3,
.v4 #how h2,
.v4 #how .how__lead,
.v4 #bonuses h2,
.v4 #bonuses .h-lead,
.v4 #questions h2,
.v4 #questions .h-lead,
.v4 #tariffs h2,
.v4 #tariffs .h-lead,
.v4 #recap h2 { text-align: center; margin-inline: auto; max-width: 60ch }
.v4 #how .how__lead,
.v4 #bonuses .h-lead { max-width: 56ch }

/* иконка тарифа — в строке с названием */
.v4 .tariff h3 { display: flex; align-items: center; gap: 10px; justify-content: flex-start }
.v4 .tariff h3 .tariff__emoji { display: inline-block; font-size: 1.1em; line-height: 1; margin: 0 }
.v4 .tariff--hero h3 { color: var(--paper) }

/* «И ещё раз, что ты получаешь»: без линий и ховера */
.v4 .recap__row { border-top: 0 !important; border-bottom: 0 !important }
.v4 .recap__row:hover,
.v4 .recap__row:focus-within { background: transparent !important; box-shadow: none !important }
.v4 .recap__row::before,
.v4 .recap__row::after { display: none !important }

/* блок цены: заголовок сверху, ниже «фото | текст», фото крупнее */
.v4 .calc__step { display: block; text-align: left }
.v4 .calc__step h3 { text-align: left; margin: 0 0 18px }
.v4 .calc__row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
                 gap: clamp(24px, 3vw, 48px); align-items: center }
.v4 .calc__media { min-width: 0 }
.v4 .calc__media .slider { max-width: none; margin: 0 }
.v4 .calc__text { min-width: 0 }
.v4 .calc__text p { max-width: 46ch }
.v4 .calc__hint { text-align: left; margin: 10px 0 0 }
.v4 .calc__step--media-right .calc__media { grid-column: 2; grid-row: 1 }
.v4 .calc__step--media-right .calc__text { grid-column: 1; grid-row: 1 }
@media (max-width: 899px) {
  .v4 .calc__row { grid-template-columns: 1fr; gap: 18px }
  .v4 .calc__step--media-right .calc__media,
  .v4 .calc__step--media-right .calc__text { grid-column: auto; grid-row: auto }
}
/* content-visibility был нужен только ленте отзывов (её удалили) —
   на остальных слайдерах он мешал раскладке картинок */
.v4 .slider__item { content-visibility: visible; contain-intrinsic-size: none }
/* добираем заголовки, у которых нет id */
.v4 .recap h2,
.v4 .questions h2,
.v4 .questions .h-lead,
.v4 .paths h2,
.v4 .paths .paths__kicker { text-align: center; margin-inline: auto; max-width: 60ch }
.v4 .paths .paths__kicker { max-width: none }

/* ---------- 76. «Как устроено моё сопровождение»: заголовок по центру экрана, иконки в строке ---------- */
.v4 .how__in { display: block }
.v4 .how__head { max-width: none; text-align: center; margin-inline: auto }
.v4 .how__head h2 { text-align: center; margin-inline: auto; max-width: 26ch }
.v4 .how__lead { text-align: center; margin-inline: auto; max-width: 56ch }
.v4 .how__item h3 { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap }
.v4 .how__item .how__emoji { display: inline-block; font-size: 1.05em; line-height: 1.2; margin: 0 }
.v4 .how__grid { margin-top: clamp(22px, 3vw, 34px) }
/* иконка — часть текстовой строки заголовка, а не отдельный флекс-элемент */
.v4 .how__item h3 { display: block !important; text-align: left }
.v4 .how__item .how__emoji { display: inline-block; margin-right: 8px; vertical-align: -1px }

/* ---------- 77. «И дальше будет только хуже»: заголовок, лид и финальный абзац по центру ---------- */
.v4 .worse h2,
.v4 .worse .worse__lead,
.v4 .worse .worse__note { text-align: center; margin-inline: auto }
.v4 .worse h2 { max-width: 26ch; margin-bottom: 14px }
.v4 .worse .worse__lead { max-width: 54ch; margin: 0 auto clamp(20px, 2.4vw, 28px) }
.v4 .worse .worse__note { max-width: 62ch; margin-top: clamp(24px, 2.8vw, 34px) }

/* ---------- 78. «Результаты моих подопечных»: шапка и имена клиенток по центру ---------- */
.v4 #cases h2,
.v4 #cases .h-lead,
.v4 #cases .cases__head { text-align: center; margin-inline: auto }
.v4 #cases h2 { max-width: 30ch }
.v4 #cases .h-lead { max-width: 54ch }
.v4 .client__head { justify-content: flex-start !important; column-gap: 10px !important; text-align: left }
.v4 .client__head h3 { text-align: left; margin: 0 }
.v4 .client__head .client__age { text-align: left }

/* ==========================================================================
   79. Первый экран — правки заказчика 04.11.2026
   1) текст по левому краю (десктоп);
   2) подпись про сопровождение — на фотографии, внизу;
   3) строка с таймером — общим шрифтом и размером, заметно выделенная;
   4) новый кадр героя (серый комплект) в рамке 4:5.
   ========================================================================== */

/* --- 79.1. Текст влево, кнопки и статус тоже --- */
@media (min-width: 1024px) {
  .v4 .hero__in { align-items: flex-start; text-align: left }
  .v4 .hero__main { align-items: flex-start; text-align: left }
  .v4 .hero .eyebrow { justify-content: flex-start; align-self: flex-start }
  .v4 .hero h1 { margin-inline: 0; max-width: none; text-wrap: balance }
  .v4 .hero__sub, .v4 .hero__under { margin-inline: 0 }
  .v4 .hero .cta { align-items: flex-start }
  .v4 .hero__btns { justify-content: flex-start }
  .v4 .hero .status { justify-content: flex-start; text-align: left; margin-inline: 0; max-width: none; column-gap: 26px }
}

/* --- 79.2. Рамка кадра: фото + подпись поверх нижнего края --- */
.v4 .hero__frame {
  position: relative; display: block; margin: 0; overflow: hidden;
  height: clamp(380px, 80svh, 800px); width: auto; aspect-ratio: 4 / 5; max-width: 100%;
  border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.45)
}
.v4 .hero__frame picture {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  aspect-ratio: auto; border-radius: 0; overflow: hidden; box-shadow: none
}
.v4 .hero__frame img {
  position: static; inset: auto; display: block; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; object-position: 50% 24%; border-radius: 0
}
@media (max-width: 1023px) {
  .v4 .hero__frame {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; border-radius: 0; box-shadow: none; overflow: hidden
  }
}
@media (min-width: 1024px) {
  .v4 .hero__frame::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(25,20,18,.93) 0%, rgba(25,20,18,.66) 38%, rgba(25,20,18,0) 100%)
  }
  .v4 .hero__regalia--on-photo {
    display: block; position: absolute; z-index: 2; margin: 0; padding: 0; border: 0;
    left: clamp(18px, 2vw, 30px); right: clamp(18px, 2vw, 30px); bottom: clamp(16px, 2.2vh, 26px);
    max-width: 36ch; color: #F7F2EA; font-size: 13.5px; line-height: 1.5; letter-spacing: .005em;
    text-shadow: 0 1px 3px rgba(0,0,0,.8)
  }
}

/* --- 79.3. Таймер: подпись и цифры — один шрифт, один размер, крупнее прочих пунктов --- */
/* только строки статуса (.status); полоса под тарифами — своя, там таймер крупный по замыслу */
/* таймер уходит на свою строку: он и должен читаться отдельно, а не приклеенным к «местам» */
.v4 .status { column-gap: 26px }
.v4 .status .status__item--timer { flex: 1 0 100%; margin-top: 2px;
  font-weight: 600; font-size: 16px; color: var(--ink) }
.v4 .status .status__item--timer .timer {
  font-family: inherit; font-size: inherit; font-weight: 600; letter-spacing: .01em;
  color: var(--accent-d); font-variant-numeric: tabular-nums
}
.v4 .sect--dark .status .status__item--timer,
.v4 .hero .status .status__item--timer,
.v4 .deal .status .status__item--timer,
.v4 .paths .status .status__item--timer { color: var(--paper) }
.v4 .sect--dark .status .status__item--timer .timer,
.v4 .hero .status .status__item--timer .timer,
.v4 .deal .status .status__item--timer .timer,
.v4 .paths .status .status__item--timer .timer { color: #F0B6A9 }
@media (max-width: 599px) {
  .v4 .status .status__item--timer { font-size: 15px }
}

/* ==========================================================================
   80. «Результаты моих подопечных» — правки 04.11.2026
   1) фото «до/после» — по центральной оси напротив стопки «Точка А / Точка Б»;
   2) имя и возраст — в левой колонке, по центру пустого поля над фото
      (по вертикали — середина полосы над кадром, по горизонтали — середина колонки);
   3) возраст подопечной — крупнее (было 15 px, терялось рядом с именем).
   ========================================================================== */
@media (min-width: 820px) {
  .v4 .client__grid { align-items: stretch }
  /* три строки: полоса над фото (1fr) · кадр (auto) · полоса под ним (1fr).
     Полосы равны, поэтому кадр стоит по центральной оси, а имя центрируется в верхней. */
  .v4 .client__media { display: grid; grid-template-rows: 1fr auto 1fr; gap: 0; align-self: stretch }
  .v4 .client__media .client__head { align-self: center; justify-self: center;
    justify-content: center !important; text-align: center; column-gap: 10px !important; margin: 0 }
  .v4 .client__media .client__head h3,
  .v4 .client__media .client__head .client__age { text-align: center }
}
.v4 .client__media .client__head { margin-bottom: 0 }
.v4 .client__age {
  font-family: var(--num); font-size: clamp(20px, 1.7vw, 24px); font-weight: 500;
  letter-spacing: .02em; color: var(--ink-2); line-height: 1
}
@media (max-width: 819px) {
  .v4 .client__age { font-size: 19px }
}

/* ==========================================================================
   81. «Как именно мы придём к результату?» — правки 04.11.2026
   1) подзаголовок — заголовок 3-го уровня, крупнее и заметнее;
   2) вторая часть подзаголовка («— без травм, режима фитнес-блогера…») убрана;
   3) фото напротив шага — крупнее (было clamp(120px, 16vw, 200px) — «ничего не видно»).
   ========================================================================== */
.v4 .steps__lead {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(21px, 2.05vw, 30px); line-height: 1.28; letter-spacing: -.01em;
  margin: clamp(14px, 1.6vw, 20px) auto 0; max-width: 44ch; text-wrap: balance
}
@media (max-width: 599px) {
  .v4 .steps__lead { font-size: 20px; line-height: 1.32 }
}
/* третья колонка в v32.css была minmax(180px, 265px) — это и был потолок «ничего не видно» */
@media (min-width: 900px) {
  .v4 .steps__list > li { grid-template-columns: 58px minmax(0, 1fr) minmax(240px, 400px) }
  .v4 .steps__list .row-slot--step { width: 100%; max-width: 400px }
}
/* скриншоты шагов не режем в 4:5 — иначе от таблиц и чатов остаётся середина */
.v4 .steps__list .row-slot--step img {
  margin-left: auto; aspect-ratio: auto; width: auto; max-width: 100%; height: auto; max-height: 460px;
  object-fit: contain; border-radius: 14px; background: var(--paper-2)
}

/* ==========================================================================
   82. «Как устроено моё онлайн-сопровождение?» — правки 04.11.2026
   1) лид — подзаголовком: крупнее, жирнее, без точки в конце;
   2) карточка «Длительность — 1, 3 или 6 месяцев» одна в ряду — по центру экрана,
      её текст тоже по центру; с неё снята анимация появления.
   ========================================================================== */
.v4 .how__lead {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: clamp(20px, 1.95vw, 28px); line-height: 1.34; letter-spacing: -.01em;
  margin: clamp(12px, 1.5vw, 20px) auto 0; max-width: 52ch; text-align: center;
  text-wrap: balance
}
.v4 .how__grid > .how__item:last-child { text-align: center; align-items: center }
.v4 .how__grid > .how__item:last-child h3 { text-align: center !important; justify-content: center }
.v4 .how__grid > .how__item:last-child p { text-align: center }
@media (min-width: 760px) {
  .v4 .how__grid > .how__item:last-child {
    grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 560px
  }
}
@media (max-width: 599px) {
  .v4 .how__lead { font-size: 19px; line-height: 1.36 }
}
/* анимация этой карточки снята в motion-v33.js (assign идёт по .how__item:not(:last-child)) */

/* ==========================================================================
   83. Бонусы: «Итоговая ценность бонусов» — крупнее (правка 04.11.2026)
   было 12.5 px — на фоне цены 8.500 ₽ подпись терялась.
   ========================================================================== */
.v4 .bonuses__total-label {
  font-size: clamp(18px, 1.7vw, 26px); letter-spacing: .09em; line-height: 1.25; max-width: none
}
@media (max-width: 599px) {
  .v4 .bonuses__total-label { font-size: 17px; letter-spacing: .07em }
}

/* ==========================================================================
   84. «Сколько всё это стоит?» — правки 04.11.2026
   1) подписи под слайдерами убраны (обе);
   2) заголовок шага перенесён в текстовую колонку — «2. Нутрициолог» и его текст
      больше не разъезжаются на пол-экрана;
   3) текст и слайдер выровнены по общей горизонтальной оси: навигация слайдера
      выведена из потока, поэтому центрируется сам кадр, а не «кадр + стрелки»;
   4) итог цены — по центру.
   ========================================================================== */
@media (min-width: 900px) {
  .v4 .calc__media { position: relative }
  .v4 .calc__media .slider__nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0 }
  .v4 .calc__step { padding-bottom: 56px }
}
.v4 .calc__text h3 { margin: 0 0 12px }
.v4 .calc__text p:last-child { margin-bottom: 0 }
.v4 .calc__sum { text-align: center }
.v4 .calc__sum p { margin-inline: auto; max-width: 62ch }

/* колонки шагов цены: DOM всегда «текст → слайдер», сторона задаётся сеткой */
@media (min-width: 900px) {
  .v4 .calc__step--media-left .calc__text { grid-column: 2; grid-row: 1 }
  .v4 .calc__step--media-left .calc__media { grid-column: 1; grid-row: 1 }
  .v4 .calc__step--media-right .calc__text { grid-column: 1; grid-row: 1 }
  .v4 .calc__step--media-right .calc__media { grid-column: 2; grid-row: 1 }
}

/* ==========================================================================
   85. Блок цены: заголовок и лид по центру, шаги — без нумерации, текст по центру колонки
   (правка 04.11.2026)
   ========================================================================== */
.v4 #price > .wrap > h2 { text-align: center }
.v4 #price .h-lead { text-align: center; margin-inline: auto; max-width: 58ch }
.v4 .calc__text { text-align: center }
.v4 .calc__text h3 { text-align: center }
.v4 .calc__text p { text-align: center; margin-inline: auto }
.v4 .calc__step .calc__calc { text-align: center; margin-inline: auto }
@media (max-width: 899px) {
  .v4 .calc__text p { margin-bottom: 14px }
}

/* ==========================================================================
   86. «3 вопроса» — правки 04.11.2026
   вопрос 1: кадр, где видно ягодицы (R6__1960, порезан в 4:5 под слот);
   вопрос 3: фото убрано, оставлен пустой слот под будущее фото еды.
   ========================================================================== */
.v4 .question__pic--empty {
  width: 100%; aspect-ratio: 4 / 5; border: 1px dashed rgba(244,239,230,.42);
  border-radius: 18px; background: rgba(244,239,230,.06)
}
@media (max-width: 899px) {
  .v4 .question__pic--empty { aspect-ratio: 16 / 10 }
}

/* ==========================================================================
   87. «Тарифы и стоимость» — правки 04.11.2026
   1) заголовок чуть выше от карточек;
   2) бонусы в тарифах — с 💝 вместо тире;
   3) таймер и подпись в полосе — один цвет, шрифт, размер;
   4) подложка полосы статуса становится единой для всех CTA сайта.
   ========================================================================== */
.v4 #tariffs h2 { margin-bottom: clamp(22px, 2.6vw, 34px) }
.v4 .tariffs__grid { margin-top: 0 }
.v4 .tariff__bonus::before { content: none !important; display: none !important }
.v4 .tariff__gift { display: inline-block; margin-right: 8px; font-size: 1em; line-height: 1 }

/* 3. таймер не отличается от подписи ничем, кроме табличных цифр
   (селекторы не короче прежних правил с акцентным цветом, иначе цвет остаётся красным) */
.v4 .status .timer,
.v4 .tariffs__foot .timer,
.v4 .status .status__item--timer .timer,
.v4 .tariffs__foot .status__item--timer .timer,
.v4 .sect--dark .status .status__item--timer .timer,
.v4 .hero .status .status__item--timer .timer,
.v4 .deal .status .status__item--timer .timer,
.v4 .paths .status .status__item--timer .timer {
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
  color: inherit; letter-spacing: normal; margin: 0; display: inline;
  font-variant-numeric: tabular-nums; white-space: nowrap
}

/* 4. единая подложка строки статуса — как полоса под тарифами */
.v4 .status {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 6px 18px; width: fit-content; max-width: 100%;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding: 14px clamp(16px, 1.8vw, 26px);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(36,28,23,.07);
  font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.5; color: var(--ink-2); text-align: center
}
.v4 .status__item--timer { flex: 0 1 auto; margin-top: 0 }
.v4 .hero .status,
.v4 .deal .status,
.v4 .paths .status,
.v4 .sect--dark .status {
  background: rgba(244,239,230,.07); border-color: rgba(244,239,230,.18);
  color: rgba(244,239,230,.86); box-shadow: none
}
.v4 .hero .status b,
.v4 .deal .status b,
.v4 .paths .status b,
.v4 .sect--dark .status b { color: #F4EFE6 }

/* ==========================================================================
   88. Таймер: шрифт и размер — как у подписи, но цветом выделен (правка 04.11.2026)
   ========================================================================== */
.v4 .status .status__item--timer .timer,
.v4 .tariffs__foot .status__item--timer .timer { color: var(--accent-d) }
.v4 .hero .status .status__item--timer .timer,
.v4 .deal .status .status__item--timer .timer,
.v4 .paths .status .status__item--timer .timer,
.v4 .sect--dark .status .status__item--timer .timer { color: #F0B6A9 }

/* ==========================================================================
   89. «Но не всё потеряно» — правки 04.11.2026
   1) первый кадр больше не лежит на боку: поворот берётся из EXIF (DSC02139), ручной rotate убран;
   2) блок не «теряет центр»: его текстовая колонка (1100 px) центрируется в обёртке,
      заголовок и список встают на ось страницы, как у соседних секций.
   ========================================================================== */
.v4 .hope__txt { margin-inline: auto }

/* ==========================================================================
   90. Строка статуса — ровно как полоса под тарифами (правка 04.11.2026):
   одна карточка-подложка, пункты в строку, тонкие разделители, таймер в общем стиле.
   ========================================================================== */
.v4 .status {
  display: block; width: fit-content; max-width: 100%;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  padding: 16px clamp(18px, 2.2vw, 30px);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(36,28,23,.07);
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.5; color: var(--ink-2);
  text-align: center
}
.v4 .status .status__item { display: inline; white-space: nowrap; font-weight: 400 }
.v4 .status .status__item + .status__item {
  margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line)
}
.v4 .status .status__item--timer { flex: none; margin: 0; font-size: inherit; font-weight: 400 }
.v4 .status b { font-weight: 600; color: var(--ink) }
@media (max-width: 599px) {
  .v4 .status { padding: 14px 16px; font-size: 14.5px }
  .v4 .status .status__item { display: block; white-space: normal }
  .v4 .status .status__item + .status__item { margin: 8px 0 0; padding: 0; border: 0 }
}
/* тёмные экраны — та же подложка, но полупрозрачная светлая */
.v4 .hero .status,
.v4 .deal .status,
.v4 .paths .status,
.v4 .sect--dark .status {
  background: rgba(244,239,230,.07); border-color: rgba(244,239,230,.18);
  color: rgba(244,239,230,.82); box-shadow: none
}
.v4 .hero .status .status__item + .status__item,
.v4 .deal .status .status__item + .status__item,
.v4 .paths .status .status__item + .status__item,
.v4 .sect--dark .status .status__item + .status__item { border-left-color: rgba(244,239,230,.2) }
.v4 .hero .status b, .v4 .deal .status b, .v4 .paths .status b, .v4 .sect--dark .status b { color: #F4EFE6 }
/* на первом экране плашка держится левого края — текст там тоже слева */
.v4 .hero .status { margin-left: 0; margin-right: auto }

/* кэтч: колонка текста узкая (688 px) — пункты статуса не влезают в строку,
   поэтому здесь плашка та же, но пункты идут с зазором и без висячих разделителей */
.v4 .catch .status {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 4px 20px; width: auto; max-width: 100%;
  font-size: clamp(14.5px, 1.15vw, 16.5px)
}
.v4 .catch .status .status__item + .status__item { margin: 0; padding: 0; border: 0 }

/* ==========================================================================
   91. Точечные правки 04.11.2026: «Готова достичь фигуры мечты?», «Ты ещё здесь?»,
   «Но ты не виновата!»
   ========================================================================== */
/* лид «Тогда жми на кнопку ниже…» был центрирован внутри блока, но сам блок стоял слева */
.v4 .start__lead { margin-inline: auto; text-align: center }
/* «Три пути»: строка над последней кнопкой */
.v4 .paths__last {
  margin: clamp(20px, 2.4vw, 30px) 0 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(17px, 1.45vw, 22px); line-height: 1.35; color: var(--paper);
  text-align: center; text-wrap: balance
}
/* «Но ты не виновата!»: финальная строка — по центру и с подчёркиванием */
.v4 .accuse__note {
  text-align: center; margin-inline: auto;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: rgba(255,255,255,.85); text-decoration-skip-ink: none
}

/* ==========================================================================
   92. Мобильный первый экран — правки 04.11.2026
   1) фоном идёт присланный кадр (hero-4), десктопный hero-3 остаётся в рамке;
   2) подпись про сопровождение — сверху экрана, прямо на фотографии.
   ========================================================================== */
@media (max-width: 1023px) {
  .v4 .hero__photo img { object-position: 50% 38% }
  .v4 .hero__regalia--on-photo {
    display: block; position: absolute; z-index: 3;
    top: calc(18px + env(safe-area-inset-top, 0px)); bottom: auto;
    left: 18px; right: 18px; margin: 0; padding: 0; border: 0;
    max-width: none; text-align: center; pointer-events: none;
    font-size: 12.5px; line-height: 1.45; letter-spacing: .005em;
    color: rgba(244,239,230,.94); text-shadow: 0 1px 4px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.45)
  }
  /* подпись занимает верх — контенту оставляем место, чтобы не наезжал */
  .v4 .hero__in { padding-top: 92px }
}
@media (max-width: 400px) {
  .v4 .hero__regalia--on-photo { font-size: 11.5px; left: 14px; right: 14px }
}

/* мобильный первый экран: кадр прислан горизонтальным — на узком экране он режется
   до середины. Показываем его целиком полосой по пропорции кадра. */
@media (max-width: 1023px) {
  .v4 .hero__photo { height: auto; min-height: 0; aspect-ratio: 958 / 539 }
  .v4 .hero__photo img { object-position: 50% 50% }
}
@media (max-width: 599px) {
  /* таймер на мобиле переносится, но строки выравниваются — без «огрызка» из двух слов */
  .v4 .status .status__item--timer { white-space: normal; text-wrap: balance; font-size: 14px }
}

/* ==========================================================================
   93. «Но как?» на мобиле — правка 04.11.2026
   фото уменьшено и обрезано в круг, заголовок и подзаголовок встают справа от него,
   остальной текст — по центру под этой парой.
   ========================================================================== */
@media (max-width: 899px) {
  .v4 .offer__in {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px; row-gap: 10px; align-items: center
  }
  .v4 .offer__in > div { display: contents }
  .v4 .offer__pic {
    grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: start;
    width: clamp(96px, 27vw, 124px); height: clamp(96px, 27vw, 124px);
    border-radius: 50%; overflow: hidden; margin: 0; aspect-ratio: 1
  }
  .v4 .offer__pic img {
    width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
    object-position: 50% 22%; border-radius: 50%; border: 1px solid rgba(244,239,230,.18)
  }
  .v4 .offer__h2 {
    grid-column: 2; grid-row: 1; align-self: end; margin: 0;
    font-size: clamp(26px, 7.4vw, 32px); line-height: 1.1
  }
  .v4 .offer__in .sect__lead {
    grid-column: 2; grid-row: 2; align-self: start; margin: 0;
    font-size: clamp(14.5px, 3.9vw, 16px); line-height: 1.45
  }
  .v4 .offer__lead {
    grid-column: 1 / -1; grid-row: 3; margin: clamp(10px, 2vw, 16px) 0 0;
    text-align: center
  }
  .v4 .offer__note { grid-column: 1 / -1; grid-row: 4; margin: 0; text-align: center }
}

/* ==========================================================================
   94. Кейсы на мобиле: имя и возраст — по центру над фото (правка 04.11.2026)
   ========================================================================== */
@media (max-width: 819px) {
  .v4 .client__media .client__head {
    justify-content: center !important; text-align: center; column-gap: 10px !important; margin: 0 0 12px
  }
  .v4 .client__media .client__head h3,
  .v4 .client__media .client__head .client__age { text-align: center }
}

/* ==========================================================================
   95. «Как именно мы придём к результату?» на мобиле — правка 04.11.2026
   порядок в шаге: номер · заголовок · фото · «Что делаем» · «Результат».
   Фото — во всю ширину текстовой колонки, как подложки блоков, без обрезки.
   ========================================================================== */
@media (max-width: 899px) {
  .v4 .steps__lead { font-size: 21px; line-height: 1.3 }
  .v4 .steps__list > li {
    display: grid; grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px; row-gap: 14px; align-items: start
  }
  .v4 .steps__list .v32-step-copy { display: contents }
  .v4 .steps__list .steps__n { grid-column: 1; grid-row: 1; align-self: start; font-size: 30px }
  .v4 .steps__list > li h3 { grid-column: 2; grid-row: 1; margin: 0 }
  .v4 .steps__list .row-slot--step {
    grid-column: 2; grid-row: 2; width: 100%; max-width: 100%; margin: 0; display: block
  }
  .v4 .steps__list .row-slot--step img {
    width: 100%; height: auto; max-height: none; aspect-ratio: auto;
    object-fit: contain; border-radius: 14px; background: var(--paper-2)
  }
  .v4 .steps__list .v32-step-action { grid-column: 2; grid-row: 3; margin: 0 }
  .v4 .steps__list .v32-step-result { grid-column: 2; grid-row: 4; margin: 0 }
}

/* ==========================================================================
   96. «Как устроено сопровождение»: подзаголовок на мобиле — крупнее (04.11.2026)
   (сам перенос в <h3> и снятая точка сделаны раньше, §82)
   ========================================================================== */
@media (max-width: 599px) {
  .v4 .how__lead { font-size: 21px; line-height: 1.34 }
}

/* ==========================================================================
   97. «Как устроено сопровождение» на мобиле: карточки по центру (правка 04.11.2026)
   — только для одноколоночной сетки (≤759 px), на планшете/десктопе остаётся как было.
   ========================================================================== */
@media (max-width: 759px) {
  .v4 .how__grid > .how__item { text-align: center; align-items: center }
  .v4 .how__grid > .how__item h3 { text-align: center !important; justify-content: center }
  .v4 .how__grid > .how__item p { text-align: center; margin-inline: auto; max-width: 34ch }
}

/* ==========================================================================
   98. «Почему мне можно доверять?» на мобиле — правка 04.11.2026
   порядок: заголовок · фото · «Пак Екатерина, сертифицированный…» · список.
   Только одноколоночная раскладка (≤999 px), на десктопе фото остаётся справа.
   ========================================================================== */
@media (max-width: 999px) {
  .v4 .trust__in { grid-template-columns: 1fr; gap: 16px }
  .v4 .trust__txt { display: contents }
  .v4 #trust-h { order: 1; margin: 0 }
  .v4 .trust__pic { order: 2; margin: 0 }
  .v4 .trust__pic img { width: 100%; height: auto; max-height: 62vh; object-fit: cover; object-position: 50% 20% }
  .v4 .trust__lead { order: 3; margin: 0 }
  .v4 .trust__list { order: 4; margin-top: 6px }
}

/* ==========================================================================
   99. «Итоговая ценность бонусов» — жирнее и крупнее (правка 04.11.2026)
   было 12.5 → 24 px (десктоп) и 17 px (мобилка); вес 600 → 700, на мобиле 20 px.
   ========================================================================== */
.v4 .bonuses__total-label { font-weight: 700; letter-spacing: .07em }
@media (max-width: 599px) {
  .v4 .bonuses__total-label { font-size: 19px; letter-spacing: .02em; line-height: 1.3 }
}

/* ==========================================================================
   100. «3 вопроса» на мобиле — правка 04.11.2026
   порядок: фото · текст · «Стоило бы это 28.400 руб.?»;
   кадр возвращён в 4:5, чтобы ягодицы остались в кадре (было 16/10 с обрезкой).
   ========================================================================== */
@media (max-width: 767px) {
  .v4 .questions__list .question__pic { order: -1; margin: 0 }
  .v4 .questions__list .question__pic img {
    aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%
  }
  .v4 .questions__list .question__pic--empty { aspect-ratio: 4 / 5 }
}

/* ==========================================================================
   101. Блок скидки на мобиле: заголовок по центру (правка 04.11.2026)
   ========================================================================== */
@media (max-width: 899px) {
  .v4 .deal h2 { text-align: center; margin-inline: auto }
}

/* ==========================================================================
   102. «Тарифы и стоимость» на мобиле: заголовок чуть выше от карточек (04.11.2026)
   ========================================================================== */
@media (max-width: 899px) {
  .v4 #tariffs h2 { margin-bottom: 34px }
}

/* ==========================================================================
   103. «Но в чём подвох?» на мобиле: весь текст блока по центру (правка 04.11.2026)
   Строка статуса и таймер центрируются вместе с ним (плашка уже по центру, §90).
   ========================================================================== */
@media (max-width: 899px) {
  .v4 .catch h2,
  .v4 .catch__lead,
  .v4 .catch p,
  .v4 .catch__strong { text-align: center; margin-inline: auto }
  .v4 .catch h2 { max-width: none }
}
@media (max-width: 599px) {
  /* в узкой колонке «подвоха» пункты идут столбиком и центрируются как строки */
  .v4 .catch .status { flex-direction: column; align-items: center; gap: 6px }
}

/* ==========================================================================
   104. «Вопросы, которые боятся произносить вслух» — правка 04.11.2026
   «И ответы на них» стал подзаголовком; на мобиле шапка и подзаголовок — по центру.
   На десктопе внешний вид подзаголовка не меняем (прежние 16 px, приглушённый цвет).
   ========================================================================== */
.v4 .faq__lead { margin: 0; font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ink-2) }
@media (max-width: 899px) {
  .v4 .faq__head { text-align: center; margin-inline: auto; max-width: none }
  .v4 .faq__head h2 { margin-inline: auto; text-align: center }
  .v4 .faq__lead {
    font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.3;
    color: var(--ink); margin: 10px 0 0; text-align: center
  }
}

/* ==========================================================================
   105. Сертификаты: настоящие документы вместо заглушек (04.11.2026)
   Кадры вертикальные и горизонтальные вперемешку — показываем целиком (contain),
   а не режем в 4:3; по тапу открывается лайтбокс в полном размере.
   ========================================================================== */
.v4 .trust__diplom img {
  height: 380px; width: 100%; aspect-ratio: auto; object-fit: contain;
  background: var(--paper-2); cursor: zoom-in
}
@media (max-width: 599px) {
  .v4 .trust__diplom img { height: 320px }
  .v4 .trust__certs .slider__item { flex: 0 0 80% }
}

/* ==========================================================================
   106. Блок отзывов после «Но в чём подвох?» (правка 04.11.2026)
   Слайдер скриншотов: карточки одинаковой ширины, кадры не режутся (contain),
   по тапу — лайтбокс. Кнопка и строка статуса — как под тарифами.
   ========================================================================== */
.v4 .reviews { padding-top: clamp(40px, 5vw, 72px) }
.v4 .reviews h2 { text-align: center; margin-inline: auto; max-width: 26ch }
.v4 .reviews .h-lead { text-align: center; margin-inline: auto; max-width: 40ch }
.v4 .reviews__track { align-items: flex-start; gap: 16px }
.v4 .reviews .reviews__item { flex: 0 0 clamp(260px, 30%, 360px); margin: 0 }
.v4 .reviews .reviews__item img {
  width: 100% !important; height: 600px !important; max-height: 600px !important;
  aspect-ratio: auto !important; object-fit: contain !important; object-position: top center !important;
  background: transparent; border: 0; border-radius: 12px; cursor: zoom-in; box-shadow: none
}
@media (max-width: 599px) {
  .v4 .reviews .reviews__item { flex: 0 0 86% }
  /* на телефоне виден один отзыв — держим кадр ниже, чтобы слайдер не растягивался */
  .v4 .reviews .reviews__item img { height: 520px !important; max-height: 520px !important }
}

/* ==========================================================================
   107. Сердечки у бонусов: выровнять по строке (правка 04.11.2026)
   Эмодзи стоял выше текста — прижимаем его к середине строки и убираем
   лишний межстрочный запас внутри спана.
   ========================================================================== */
.v4 .tariff__gift {
  display: inline-block; vertical-align: middle;
  line-height: 1; font-size: 1em; margin-right: 8px;
  transform: translateY(0.22em)
}

/* ==========================================================================
   108. Таймер: подпись «До повышения цены осталось» и цифры — одним акцентным
   цветом из палитры (правка 04.11.2026). На светлых плашках терракота, на тёмных
   — коралл; шрифт и размер остаются как у остальной строки.
   ========================================================================== */
.v4 .status .status__item--timer { color: var(--accent-d) }
.v4 .status .status__item--timer .timer { color: inherit }
.v4 .tariffs__foot .status__item--timer { color: var(--accent-d) }
.v4 .tariffs__foot .status__item--timer .timer { color: inherit }
.v4 .hero .status .status__item--timer,
.v4 .deal .status .status__item--timer,
.v4 .paths .status .status__item--timer,
.v4 .sect--dark .status .status__item--timer { color: #F0B6A9 }

/* ---------- 79. Первый экран на мобиле: плашка статуса по центру ---------- */
@media (max-width: 599px) {
  .v4 .hero .status {
    margin-left: auto !important; margin-right: auto !important;
    max-width: min(100%, 340px); width: 100%
  }
  .v4 .hero .status .status__item { text-align: center }
}

/* ==========================================================================
   109. Мобильный первый экран: плашка статуса по центру (правка 04.11.2026)
   На десктопе она держится левого края (текст там слева), на мобиле контент
   центрирован — плашка тоже должна стоять по центру.
   ========================================================================== */
@media (max-width: 1023px) {
  .v4 .hero .status { margin-left: auto; margin-right: auto }
}

/* ==========================================================================
   110. Строка таймера — жирнее остальных пунктов (правка 04.11.2026)
   Подпись «До повышения цены осталось» и цифры идут одним полужирным блоком.
   ========================================================================== */
.v4 .status .status__item--timer,
.v4 .tariffs__foot .status__item--timer { font-weight: 600 }

/* ==========================================================================
   111. Карточки «как устроено» на мобиле: убрать правое поле, из-за которого
   текст стоял на 20 px левее оси (правка 04.11.2026)
   ========================================================================== */
@media (max-width: 759px) {
  .v4 .how__grid > .how__item { padding-left: 0; padding-right: 0 }
  .v4 .how__grid > .how__item h3 { padding-right: 0 }
}

/* ==========================================================================
   112. Блок скидки на мобиле: подзаголовок «Я не буду брать с тебя 28.400 рублей»
   тоже по центру (правка 04.11.2026) — раньше центрировался только заголовок.
   ========================================================================== */
@media (max-width: 899px) {
  .v4 .deal__lead { text-align: center; margin-inline: auto }
}

/* ==========================================================================
   113. Ультравайд: в первом экране текстовая колонка узкая (760 px), и плашка
   со строкой статуса вылезала под фото. Таймер уводим на свою строку (правка 04.11.2026).
   ========================================================================== */
.v4 .hero .status .status__item--timer {
  display: block; border-left: 0; margin-left: 0; padding-left: 0; margin-top: 2px
}

/* ==========================================================================
   114. Отзывы в кейсах (04.11.2026): слайд отзыва шире коллажа и не режет
   скриншот — кадр целиком на подложке, по тапу открывается в лайтбоксе.
   ========================================================================== */
/* один отзыв — один слайд: во всю ширину колонки, кадр по центру и без полей */
.v4 .client__photos .slider__item.client__shot--review { flex: 0 0 100% }
.v4 .client__photos .slider__item.client__shot--review img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: var(--paper-2);
  padding: 8px;
  border-radius: 14px;
  cursor: zoom-in;
}

/* ==========================================================================
   115. Бонусные PDF-гайды — полоса сразу под первым экраном (05.11.2026).
   Усиление оффера: три названия гайдов со смайликами, без ссылок и стрелок.
   Бумага-2 связывает тёмный герой со светлой страницей.
   ========================================================================== */
.v4 .gift-shelf { background: var(--paper-2); padding: clamp(30px, 3.2vw, 46px) 0 }
.v4 .gift-shelf__h { margin: 0 0 clamp(18px, 2.2vw, 26px); text-align: center;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -.01em }
.v4 .gift-shelf__plus { margin-right: .42em; font-weight: 800; color: var(--accent-d) }
.v4 .gift-shelf__h > span[aria-hidden] { margin-right: .4em }
.v4 .gift-shelf__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none }
@media (min-width: 900px) {
  .v4 .gift-shelf__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
}
.v4 .gift-shelf__item { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 16px; align-items: center }
.v4 .gift-shelf__cover { margin: 0 }
.v4 .gift-shelf__cover img { display: block; width: 76px; height: 133px; object-fit: cover;
  border: 4px solid #fff; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(36,28,23,.16), 0 8px 18px rgba(36,28,23,.14) }
.v4 .gift-shelf__t { margin: 0; text-align: center; text-wrap: pretty; font-family: var(--text);
  font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink-2) }
@media (max-width: 899px) {
  .v4 .gift-shelf__cover img { width: 64px; height: 112px; border-width: 3px }
  .v4 .gift-shelf__item { gap: 13px }
  .v4 .gift-shelf__t { font-size: 14.5px }
}

/* ==========================================================================
   116. Веер обложек на фото первого экрана (05.11.2026).
   Как в макете 1: три гайда веером у нижнего края фото, острые белые рамки,
   круглая наклейка «Бонус». Работает и на мобиле: там первый экран становится
   выше на 140 px, чтобы веер встал под строкой статуса, а не поверх неё.
   ========================================================================== */
.v4 .hero__fan { position: absolute; z-index: 3; left: 50%; bottom: 18px;
  transform: translateX(-50%); display: flex; align-items: flex-end; pointer-events: none }
.v4 .hero__fan .hero__fan-item { width: 92px; aspect-ratio: 9 / 16; height: auto;
  margin: 0 0 0 -12px; padding: 0; border: 3px solid #FFFDF8; border-radius: 0;
  overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.55) }
.v4 .hero__fan .hero__fan-item:first-child { margin-left: 0; transform: rotate(-5deg) translateY(5px) }
.v4 .hero__fan .hero__fan-item:nth-child(2) { position: relative; z-index: 2; transform: translateY(-7px) }
.v4 .hero__fan .hero__fan-item:nth-child(3) { transform: rotate(5deg) translateY(5px) }
.v4 .hero__fan .hero__fan-item picture { display: block; width: 100%; height: 100% }
.v4 .hero__fan .hero__fan-item img { display: block; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; object-position: 50% 0 }
.v4 .hero__fan-badge { position: absolute; right: -20px; top: -24px; width: 68px; height: 68px;
  border-radius: 50%; background: var(--accent-d); color: #F7F2EA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--display); font-weight: 700; font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; box-shadow: 0 12px 26px rgba(0,0,0,.45) }
.v4 .hero__fan-badge svg { width: 17px; height: 17px }

@media (max-width: 1023px) {
  .v4 .hero { min-height: calc(100svh + 140px) }
  /* фото — фоном на всю высоту героя (иначе остаётся высота 52svh и веер
     прилипает к её низу, поверх заголовка) */
  .v4 .hero__photo { height: auto; min-height: 0; aspect-ratio: auto }
}

@media (min-width: 1024px) {
  .v4 .hero__fan { bottom: 6px }
  .v4 .hero__fan .hero__fan-item { width: clamp(104px, 8.6vw, 132px); margin-left: -14px }
  .v4 .hero__fan-badge { right: -34px; top: -30px; width: 88px; height: 88px; font-size: 10px }
  .v4 .hero__fan-badge svg { width: 20px; height: 20px }
  /* подпись про сопровождение — наверх: низ фото отдан вееру */
  .v4 .hero__regalia--on-photo { top: clamp(18px, 2vw, 28px); bottom: auto; max-width: 22ch }
  .v4 .hero__photo::after {
    inset: 0; height: auto;
    background:
      linear-gradient(180deg, rgba(25,20,18,.6) 0%, rgba(25,20,18,0) 22%),
      linear-gradient(0deg, rgba(25,20,18,.5) 0%, rgba(25,20,18,0) 24%)
  }
}

/* полоса под героем теперь без обложек на всех ширинах — они в веере */
.v4 .gift-shelf__cover { display: none }
.v4 .gift-shelf__item { display: block }