/* Раскладка страницы. Компоненты из кита (tokens.css): первый экран,
     метки, баннер, шаги, тарифы, аккордеон. Своё здесь только то, чего
     в ките нет: сцена первого экрана и макет кабинета. */
  body { margin: 0; }

  /* ================= ПЕРВЫЙ ЭКРАН =================
     Волну убрали по просьбе владельца. Фон теперь неподвижный: два
     пятна фирменного света за сценой справа, тёплое и холодное. */
  .geroy { isolation: isolate; }
  .geroy::before {
    content: "";
    position: absolute; z-index: -1;
    inset: -10% -10% auto 40%;
    height: 120%;
    background:
      radial-gradient(38% 42% at 30% 45%, rgba(255, 138, 24, .22), transparent 70%),
      radial-gradient(40% 46% at 70% 55%, rgba(251, 69, 149, .24), transparent 70%),
      radial-gradient(30% 34% at 60% 20%, rgba(123, 92, 255, .16), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
  }
  .geroy .lv-kicker { color: var(--lv-text-2); }
  .geroy .lv-lead { max-width: 44ch; }
  .geroy .lv-display { font-size: clamp(38px, 4.3vw, 60px); }

  .plashki { display: flex; flex-wrap: wrap; gap: var(--lv-s2); margin-top: var(--lv-s6); }
  .plashki .lv-chip { pointer-events: none; gap: 6px; }
  .plashki .lv-ico { color: var(--lv-accent); }

  /* СЦЕНА: фото артиста, две обложки по бокам, карточка релиза снизу,
     вокруг метки с прослушиваниями, лайками и рублями. Всё это
     картинка, поэтому aria-hidden. */
  .scena {
    position: relative;
    width: min(440px, 100%);
    justify-self: center;
    aspect-ratio: 4 / 5;
    margin: var(--lv-s8) 0;
  }
  .scena__foto {
    position: absolute; inset: 0 8% 6% 8%;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--lv-border-1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  }
  .scena__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Низ фото уходит в темноту, на нём лежит карточка релиза. */
  .scena__foto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12, 11, 16, 0) 55%, rgba(12, 11, 16, .75) 100%);
  }
  .scena__cov {
    position: absolute;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--lv-border-1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }
  .scena__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .scena__cov--1 { top: 9%; left: -6%; transform: rotate(-8deg); }
  .scena__cov--2 { top: 38%; right: -7%; transform: rotate(7deg); width: 27%; }

  .scena__reliz {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0 auto;
    width: 88%;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--lv-s3);
    align-items: center;
    padding: 12px;
    border: 1px solid var(--lv-border-1);
    border-radius: 18px;
    background: rgba(21, 20, 27, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--lv-shadow-overlay);
  }
  .scena__reliz img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; display: block; }
  .scena__reliz b { display: block; font: 700 15px/1.25 var(--lv-font-head); color: var(--lv-text-1); }
  .scena__reliz small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--lv-font-ui); color: var(--lv-text-3); }
  .scena__ikonki { display: flex; gap: 6px; margin-top: 8px; color: var(--lv-text-2); }
  .scena__ikonki span {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--lv-surface-2);
  }

  /* Метки кита (.lv-metka) плавают сами, но показываются только внутри
     витрины. Здесь они видны сразу. */
  .scena .lv-metka { opacity: 1; }
  .scena .lv-metka b { font-weight: 800; }
  .scena .m-1 { top: 2%;  right: -2%; --dx: 8px;  --dy: -10px; --zaderzhka: 0s; }
  .scena .m-2 { top: 30%; left: -12%; --dx: -9px; --dy: 8px;   --zaderzhka: -2.2s; }
  .scena .m-3 { top: 62%; right: -10%; --dx: 10px; --dy: 9px;  --zaderzhka: -4s; }
  .scena .m-4 { top: 72%; left: -9%;  --dx: -7px; --dy: -8px;  --zaderzhka: -5.5s; }
  .scena .m-dengi svg { color: #F2B45D; }
  .scena .m-ok svg { color: var(--lv-success); }

  /* Анимацию первого экрана сняли по решению владельца 06.10.2026:
     искры и плавание меток выглядели суетливо. Метки стоят на месте. */
  .scena .lv-metka { animation: none; z-index: 3; }
  .scena__reliz { z-index: 3; }
  @media (max-width: 900px) {
    .scena { width: min(330px, 84vw); margin: var(--lv-s4) auto 0; }
    .scena .lv-metka { font-size: 12px; padding: 7px 11px; }
    .scena .m-2 { left: -6%; }
    .scena .m-4 { left: -4%; top: 63%; }
    .scena .m-3 { right: -5%; }
    .scena__cov--1 { left: -2%; }
    .scena__cov--2 { right: -3%; }
  }
  @media (min-width: 901px) {
    .lv-first__acts .lv-btn { height: 64px; padding: 0 40px; font-size: 19px; }
  }

  /* ================= ДОВОДЫ ================= */
  .dovod {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: var(--lv-s3);
    row-gap: var(--lv-s2);
    align-items: center;
    align-content: start;
    padding-top: var(--lv-s4);
    border-top: 1px solid var(--lv-border-2);
  }
  /* Значок без квадратной подложки (владелец 31.10.2026: квадраты вокруг
     значков — признак шаблонной ИИ-вёрстки). */
  .dovod__i {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px;
    color: var(--lv-accent);
  }
  .dovod__t { margin: 0; font: 700 clamp(19px, 2.2vw, 22px)/1.25 var(--lv-font-head); letter-spacing: -.01em; }
  .dovod__d { grid-column: 2; margin: 0; max-width: 42ch; }

  .lv-ticker__row > span { gap: 10px; }
  .lv-ticker__row .lv-ico { color: var(--lv-text-1); }

  .lv-steps { --lv-cols: 5; }
  @media (max-width: 1100px) { .lv-steps { --lv-cols: 3; } }

  /* ================= КАБИНЕТ =================
     Макет кабинета нарисован разметкой. Числа в нём иллюстрация,
     подпись под макетом это говорит прямо. */
  .kab {
    position: relative;
    justify-self: center;
    width: min(420px, 100%);
  }
  .kab__karta {
    position: relative; z-index: 1;
    padding: var(--lv-s6);
    border: 1px solid var(--lv-border-1);
    border-radius: 24px;
    background: var(--lv-surface-1);
    box-shadow: var(--lv-shadow-overlay);
  }
  .kab__verh { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lv-s4); }
  .kab__podp { font: 600 12px/1.2 var(--lv-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--lv-text-3); }
  .kab__summa { margin-top: 6px; font: 800 40px/1 var(--lv-font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .kab__vyvod {
    flex: none;
    height: 38px; padding: 0 16px;
    display: inline-flex; align-items: center;
    border-radius: var(--lv-r-full);
    background: var(--lv-grad);
    color: #fff;
    font: 700 13px/1 var(--lv-font-ui);
  }
  .kab__spisok { margin: var(--lv-s6) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
  .kab__spisok li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: var(--lv-s3);
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--lv-border-2);
    font: 600 14px/1.3 var(--lv-font-ui);
  }
  .kab__spisok li > span:first-child {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--lv-surface-2); color: var(--lv-text-1);
  }
  .kab__spisok small { display: block; font: 400 12px/1.3 var(--lv-font-ui); color: var(--lv-success); }
  .kab__spisok small.zhdet { color: var(--lv-warning); }
  .kab__spisok em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--lv-text-2); }
  .kab__primer { margin: var(--lv-s3) 0 0; text-align: center; font-size: 12px; color: var(--lv-text-3); }
  .kab .lv-metka { opacity: 1; animation: none; }
  .kab .k-1 { top: -5%; right: -8%; --dx: 8px; --dy: -8px; }
  .kab .k-2 { bottom: 15%; right: -10%; --dx: 8px; --dy: 9px; --zaderzhka: -3s; }
  .kab .k-1 svg { color: #F2B45D; }
  /* На планшете и узком ноутбуке метки уходили за край окна и давали
     горизонтальную прокрутку (замер: +21 px на 960). Прижимаем их и
     страхуемся обрезкой по секции. */
  #kabinet { overflow: hidden; }
  @media (max-width: 1180px) {
    .kab .k-1 { right: -2%; }
    .kab .k-2 { right: -2%; }
  }
  @media (max-width: 900px) {
    .kab .k-1 { right: -2%; }
    .kab .k-2 { right: -2%; }
    .kab .lv-metka { font-size: 12px; padding: 7px 11px; }
  }

  /* ================= ЦЕНЫ =================
     Средний тариф выделен: он крупнее, у него рамка и свет. На телефоне
     он идёт первым, чтобы его не пришлось искать. */
  /* Две карточки на ту же ширину, что раньше занимали три (1080px):
     по левому краю, как остальные блоки, и без пустоты справа. */
  /* Заголовок цен в две строки: вопрос, под ним цена (владелец 31.10.2026). */
  .cena-zag span { display: block; }
  @media (min-width: 901px) {
    #ceny .lv-section__head { max-width: none; }
    .cena-zag span:first-child { white-space: nowrap; }
  }
  .ceny { --lv-cols: 2; max-width: 1080px; align-items: stretch; }
  .ceny .lv-price__sum--text { font-size: 28px; line-height: 1.2; }
  .ceny .lv-price { transition: transform .3s; }
  .ceny .lv-price--hot {
    padding: var(--lv-s8) var(--lv-s6);
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(251, 69, 149, .16), transparent 70%),
      var(--lv-surface-1);
    box-shadow: 0 24px 70px rgba(251, 69, 149, .18);
  }
  /* Без увеличения: при двух карточках оно выталкивало левый край за
     линию заголовка. Выделение держат рамка и свет. */
  .ceny .lv-price__feats li b { color: var(--lv-text-1); font-weight: 700; }
  .ceny .za-trek { margin: 4px 0 0; font: 700 13px/1.3 var(--lv-font-ui); color: var(--lv-accent); }
  .ceny-note { margin: var(--lv-s8) 0 0; max-width: 68ch; color: var(--lv-text-3); font-size: 14px; }

  /* ================= СХЕМА ДОХОДА =================
     Полоса 100 ₽, поделённая в пропорции 20 / 8 / 72, под ней шаги
     с суммами. Цвета: площадка серая, мы тёплые, артист в градиенте. */
  .shema {
    max-width: 1080px;
    padding: var(--lv-s8);
    border: 1px solid var(--lv-border-1);
    border-radius: 24px;
    background: var(--lv-surface-1);
  }
  .shema__polosa { display: flex; gap: 4px; height: 56px; }
  .shema__ch {
    display: flex; align-items: center; justify-content: center;
    min-width: 0;
    border-radius: 12px;
    font: 800 15px/1 var(--lv-font-head);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
  }
  .shema__ch--pl { background: var(--lv-surface-2); color: var(--lv-text-2); }
  .shema__ch--my { background: rgba(242, 180, 93, .2); color: #F2B45D; }
  .shema__ch--vy { background: var(--lv-grad); color: #fff; font-size: 17px; }
  .shema__shagi {
    margin: var(--lv-s8) 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    gap: var(--lv-s3);
  }
  .shema__znak {
    align-self: start;
    margin-top: calc(var(--lv-s4) + 2px);
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--lv-surface-2);
    border: 1px solid var(--lv-border-1);
    font: 800 24px/1 var(--lv-font-head); color: var(--lv-text-1);
  }
  .shema__znak:last-of-type { background: var(--lv-grad); border-color: transparent; color: #fff; }
  /* Проверка счётом: те же числа тремя строчками, как на чеке. */
  .shema__schet {
    margin-top: var(--lv-s8);
    padding: var(--lv-s6);
    border-radius: 18px;
    background: var(--lv-surface-2);
    display: grid; gap: var(--lv-s3);
  }
  .shema__schet p {
    margin: 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
    font: 700 clamp(18px, 2.2vw, 22px)/1.2 var(--lv-font-head);
    font-variant-numeric: tabular-nums;
    color: var(--lv-text-1);
  }
  .shema__schet i { font-style: normal; color: var(--lv-text-3); }
  .shema__schet b { font-weight: 800; color: #F2B45D; }
  .shema__schet small { flex-basis: auto; font: 400 14px/1.3 var(--lv-font-ui); color: var(--lv-text-3); }
  .shema__schet .itog { padding-top: var(--lv-s3); border-top: 1px dashed var(--lv-border-1); }
  .shema__schet .itog b {
    padding: 2px 12px; border-radius: 10px;
    background: var(--lv-grad); color: #fff;
  }
  .shema__shag { padding-top: var(--lv-s4); border-top: 2px solid var(--lv-border-2); }
  .shema__shag--pl { border-color: var(--lv-text-3); }
  .shema__shag--my { border-color: #F2B45D; }
  .shema__shag--vy { border-color: var(--lv-accent); }
  .shema__sum { display: block; font: 800 clamp(28px, 3vw, 36px)/1 var(--lv-font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .shema__shag--vy .shema__sum { color: var(--lv-accent); }
  .shema__shag--vy {
    padding: var(--lv-s4) var(--lv-s3) var(--lv-s3);
    border-radius: 0 0 14px 14px;
    background: rgba(251, 69, 149, .1);
  }
  .shema__shag b { display: block; margin-top: var(--lv-s3); font: 700 16px/1.3 var(--lv-font-head); color: var(--lv-text-1); }
  .shema__shag p { margin: 6px 0 0; font: 400 14px/1.5 var(--lv-font-ui); color: var(--lv-text-2); }
  .shema__chisto {
    max-width: 1080px;
    margin: var(--lv-s6) 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lv-s4);
  }
  .shema__chisto li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--lv-s3); font: 400 15px/1.5 var(--lv-font-ui); color: var(--lv-text-2); }
  .shema__chisto .lv-ico { margin-top: 2px; color: var(--lv-success); }
  /* На планшете и телефоне шаги идут столбиком, знак действия
     стоит между ними по центру, как в столбике на бумаге. */
  @media (max-width: 900px) {
    .shema { padding: var(--lv-s6) var(--lv-s4); }
    .shema__shagi { grid-template-columns: minmax(0, 1fr); gap: var(--lv-s2); }
    .shema__znak { margin: 0 auto; width: 34px; height: 34px; font-size: 20px; }
    .shema__shag { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--lv-s3); align-items: baseline; }
    .shema__shag .shema__sum { grid-row: span 2; }
    .shema__shag b { margin-top: 0; }
    .shema__shag--vy { margin: 0; padding: var(--lv-s4) var(--lv-s3); border-radius: 14px; }
    .shema__chisto { grid-template-columns: minmax(0, 1fr); }
    .shema__schet { padding: var(--lv-s4); }
  }
  @media (max-width: 480px) {
    .shema__polosa { height: 48px; }
    .shema__ch { font-size: 13px; }
    .shema__ch--vy { font-size: 15px; }
    .shema__sum { font-size: 26px; }
    .shema__shag { grid-template-columns: 84px minmax(0, 1fr); }
    .shema__schet small { flex-basis: 100%; }
  }

  /* ================= ИИ ================= */
  /* Текст и список выровнены по центру друг друга (владелец 31.10.2026). */
  .ii { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--lv-s12); align-items: center; }
  .ii__spisok { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--lv-s4); }
  .ii__spisok li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--lv-s3); font: 400 16px/1.55 var(--lv-font-ui); color: var(--lv-text-2); }
  .ii__spisok li .lv-ico { margin-top: 2px; color: var(--lv-success); }
  .ii__spisok li.net .lv-ico { color: var(--lv-error); }
  .ii__spisok b { color: var(--lv-text-1); }

  .grid-3 { --lv-cols: 3; }
  @media (max-width: 900px) {
    .grid-3, .ceny { --lv-cols: 1; }
    .ii { grid-template-columns: minmax(0, 1fr); gap: var(--lv-s8); }
    .ceny .lv-price--hot { order: -1; }
    .ceny .lv-price--hot { margin-top: 11px; }
  }
  @media (max-width: 560px) {
    .lv-body, .lv-step__d { font-size: 15px; line-height: 1.6; }
  }
  @media (max-width: 700px) { .tolko-bolshoy { display: none; } }

  .v-telegram .lv-topbar { position: relative; }

  /* Надзаголовок: «Дистрибуция музыки» крупнее, площадки в скобках
     второй строкой обычным регистром. */
  .geroy .lv-first__h1 { font-size: 13px; line-height: 1.3; }
  .h1-pl { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }

  /* ================= ТЕЛЕФОН ================= */
  @media (max-width: 900px) {
    /* Свет за сценой: на узком экране он лежал полосой у правого края,
       теперь мягкое пятно под сценой. */
    .geroy::before { inset: 40% -30% 0 -30%; height: auto; }
    /* Девушку закрывала карточка релиза: фото чуть приближаем от низа,
       карточку опускаем ниже кадра. */
    .scena { margin-bottom: 9%; }
    .scena__foto img { transform: scale(1.14); transform-origin: 50% 95%; }
    .scena__reliz { bottom: -9%; }
    .scena .m-4 { top: 58%; }
    /* Метка «новых слушателей» налезала на строку МТС. */
    .kab .k-2 { display: none; }
    /* Парень на сцене во втором баннере уходил в затемнение. */
    .lv-banner__art--nizh img { object-position: center 85%; }
    .lv-banner__art--nizh { min-height: 230px; }
    .lv-banner__art::after { background: linear-gradient(0deg, var(--lv-surface-1) 0%, rgba(21, 20, 27, 0) 32%); }
  }
  @media (max-width: 560px) {
    .geroy .lv-first__h1 { font-size: 14px; }
    .h1-pl { font-size: 13px; }
    /* Плашки компактнее: мельче, без значков, в два ряда. */
    .plashki { gap: 6px; margin-top: var(--lv-s5, 20px); }
    .plashki .lv-chip { min-height: 0; height: 28px; padding: 0 10px; font-size: 12px; }
    .plashki .lv-chip .lv-ico { display: none; }
  }

  /* ================= НОВЫЕ БЛОКИ (INT-76) =================
     Карточки-ссылки «Что такое дистрибуция», кнопки «Песни ещё нет?»
     и ссылки внутри текста. Остальное оформление из кита. */
  /* Заголовки на телефоне по всей ширине: выравнивание строк по длине
     (text-wrap: balance) делало их узким столбиком (владелец 31.10.2026). */
  @media (max-width: 900px) {
    .lv-section__title, .lv-cta__title, .lv-display { text-wrap: pretty; }
  }
  @media (max-width: 480px) {
    .lv-section__title, .lv-cta__title { font-size: clamp(24px, 7.2vw, 31px); line-height: 1.12; }
    .sozdat__acts { gap: var(--lv-s2) var(--lv-s6); }
    .sozdat__acts .lv-btn--text { padding-inline: 0; height: 40px; }
  }
  /* Номер шага без кружка-подложки: крупная цифра акцентного цвета
     (владелец 31.10.2026: подложки под значками и цифрами — признак ИИ). */
  .lv-step__n { width: auto; height: auto; place-items: start; background: none; border: 0; border-radius: 0;
    font: 800 32px/1 var(--lv-font-head); color: var(--lv-accent); }
  @media (max-width: 900px) { .lv-step__n { width: auto; height: auto; font-size: 24px; } }
  /* «Что такое дистрибуция»: текст слева, картинка справа (владелец
     31.10.2026), на телефоне картинки нет. */
  .chto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--lv-s12); align-items: center; margin-bottom: var(--lv-s12); }
  .chto .lv-section__head { margin-bottom: 0; }
  .chto__k { margin: 0; justify-self: end; width: 100%; max-width: 400px; }
  .chto__k img { display: block; width: 100%; height: auto; border-radius: var(--lv-r-lg); }
  @media (max-width: 900px) {
    .chto { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--lv-s8); }
    .chto__k { display: none; }
  }
  .kuda { display: flex; align-items: center; gap: var(--lv-s3); min-height: 64px; font: 600 15px/1.35 var(--lv-font-ui); color: var(--lv-text-1); transition: border-color var(--lv-t-hover); }
  .kuda__t { flex: 1; }
  .kuda__s { display: contents; }
  .kuda__s .lv-ico { flex: none; transform: rotate(-90deg); color: var(--lv-text-3); }
  .kuda__i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--lv-accent); }
  @media (hover: hover) and (pointer: fine) { .kuda:hover { border-color: var(--lv-accent); } }
  .sozdat__acts { display: flex; flex-wrap: wrap; gap: var(--lv-s3); margin-top: var(--lv-s8); }
  /* Баннеры: у поющей девушки лицо и шея по центру, микрофон целиком. */
  /* Вертикальный кадр: голова у верхнего края баннера, лицо и шея целиком. */
  .lv-banner__art--vokal img { object-position: center 67%; }
  .lv-banner__art--work img { object-position: 40% 32%; }
  .ssylka { color: var(--lv-accent) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ================= ВЛОЖЕННЫЕ СТРАНИЦЫ /delivery/<имя> (INT-76) =================
   Выше — копия оформления /delivery (её <style>), ниже — блоки, которых
   в ките и на /delivery нет: хлебные крошки, короткий ответ, таблица,
   список с точками, одна карточка цены, два пути, план по дате. */
.geroy .podstr-h1 { margin: 12px 0 0; font-size: clamp(30px, 3vw, 44px); }
/* Вёрстка текста: заголовок блока в 1–2 строки, абзац — не шире 62 знаков. */
.lv-section__head { max-width: 760px; }
.lv-section__head .lv-section__lead, .ii .lv-section__lead { max-width: 62ch; }
.lv-section__lead, .lv-body, .otvet__t, .ii__spisok li, .tablica td { hanging-punctuation: first; text-wrap: pretty; }

/* Первый экран на телефоне: одна широкая картинка вместо сцены с метками. */
.odna { display: none; }
@media (max-width: 900px) {
  .geroy .scena { display: none; }
  .odna { display: block; position: relative; margin: var(--lv-s8) 0 0; aspect-ratio: 4 / 3; border-radius: var(--lv-r-lg); overflow: hidden; border: 1px solid var(--lv-border-2); }
  .odna img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .odna .lv-metka { position: absolute; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none; justify-content: flex-start; white-space: normal; animation: none; opacity: 1; font-size: 12.5px; }
  .odna .lv-metka { left: 12px; right: auto; bottom: 12px; }
  .odna .lv-metka.na-pravo { left: auto; right: 12px; }
  .odna .lv-metka b { font-weight: 800; }
  .odna .m-ok svg { color: var(--lv-success); }
  .odna .m-dengi svg { color: #F2B45D; }
}
.lv-section__title, .podstr-h1 { text-wrap: balance; }
/* На телефоне выравнивание строк по длине делало заголовок узким столбиком:
   строки заполняют ширину, переносится только последнее слово. */
@media (max-width: 900px) {
  .lv-section__title, .podstr-h1, .lv-cta__title { text-wrap: pretty; }
  .geroy .podstr-h1 { font-size: 34px; line-height: 1.1; }
}
@media (max-width: 480px) {
  .lv-section__title, .lv-cta__title { font-size: clamp(24px, 7.2vw, 31px); line-height: 1.12; }
  .geroy .podstr-h1 { font-size: clamp(26px, 7.7vw, 34px); }
}
.krohi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--lv-s4); font: 400 13px/1.4 var(--lv-font-ui); color: var(--lv-text-3); }
.krohi a { color: var(--lv-text-2); }
@media (hover: hover) and (pointer: fine) { .krohi a:hover { color: var(--lv-text-1); } }

/* Короткий ответ: без рамки, по общей левой линии, как остальные шапки. */
.otvet { max-width: 62ch; }
.lv-section--center .lv-section__lead { margin-inline: auto; }
.tablica--2 { max-width: 880px; }
/* Подстраницы: H2 заметно меньше H1, текст карточек не мельче 16 px на ПК. */
.lv-section__title { font-size: clamp(28px, 2.6vw, 36px); }
@media (min-width: 561px) { .dovod__d, .lv-step__d, .lv-price__feats li { font-size: 16px; line-height: 1.55; } }
/* Списки требований — без значков: одна сетка со значками на страницу. */
.podstr-kart--spisok .dovod { grid-template-columns: minmax(0, 1fr); }
.podstr-kart--spisok .dovod__i { display: none; }
.podstr-kart--spisok .dovod__d { grid-column: 1; }
/* Цели нажатия не меньше 44 px. */
.krohi a { display: inline-block; padding: 13px 0; margin: -13px 0; }
.cena__vse { padding: 12px 8px; }
.lv-btn--text { min-height: 44px; }
@media (max-width: 560px) {
  .lv-btn--primary { font-size: 16px; min-height: 48px; }
  .lv-section { padding: 48px 0; }
}
/* Сравнение на телефоне остаётся сравнением: две колонки рядом, названия
   колонок один раз сверху. В описаниях не повторяем подпись «Что это». */
@media (max-width: 700px) {
  .tablica--sravn thead { position: static; width: auto; height: auto; clip: auto; overflow: visible; display: block; }
  .tablica--sravn thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 var(--lv-s4) var(--lv-s2); border: 0; background: none; }
  .tablica--sravn thead th:first-child { display: none; }
  .tablica--sravn thead th { padding: 0; font: 600 12px/1.3 var(--lv-font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--lv-text-3); }
  .tablica--sravn tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .tablica--sravn tbody th { grid-column: 1 / -1; margin: 0 0 var(--lv-s2); }
  .tablica--sravn td + td { margin-top: 0; }
  .tablica--sravn td::before, .tablica--opis td:first-of-type::before { display: none !important; }
}
.otvet .lv-section__title { margin: 0; }
.otvet__t { margin: var(--lv-s4) 0 0; font: 400 18px/1.6 var(--lv-font-ui); color: var(--lv-text-1); text-wrap: pretty; }

/* Таблица: на телефоне прокручивается внутри себя, страница вбок не едет. */
.tablica { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--lv-border-2); border-radius: var(--lv-r-lg); }
.tablica table { width: 100%; min-width: 560px; border-collapse: collapse; font: 400 15px/1.5 var(--lv-font-ui); }
.tablica th, .tablica td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lv-border-2); }
.tablica thead th { font: 700 14px/1.3 var(--lv-font-ui); color: var(--lv-text-1); background: var(--lv-surface-1); }
.tablica tbody th { width: 24%; font-weight: 600; color: var(--lv-text-1); }
.tablica td { color: var(--lv-text-2); }
.tablica tbody tr:last-child > * { border-bottom: 0; }
/* Таблица на телефоне — стопка карточек: строка = карточка, её заголовок
   сверху, под ним значения с подписями столбцов. Вбок ничего не листается. */
.tablica--2 table { min-width: 0; }
@media (max-width: 700px) {
  .tablica { overflow: visible; border: 0; border-radius: 0; }
  .tablica table, .tablica tbody, .tablica tr, .tablica th, .tablica td { display: block; width: auto; min-width: 0; }
  .tablica thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tablica tbody { display: grid; gap: var(--lv-s3); }
  .tablica tr { padding: var(--lv-s4); border: 1px solid var(--lv-border-2); border-radius: var(--lv-r-lg); background: var(--lv-surface-1); }
  .lv-section--band .tablica tr { background: var(--lv-bg); }
  .tablica th, .tablica td { padding: 0; border: 0; }
  .tablica tbody th { width: auto; margin: 0 0 var(--lv-s3); font: 700 17px/1.3 var(--lv-font-head); color: var(--lv-text-1); }
  .tablica td + td { margin-top: var(--lv-s3); }
  .tablica td { font-size: 15px; line-height: 1.5; }
  .tablica td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 12px/1.3 var(--lv-font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--lv-text-3); }
  .tablica--2 td::before { display: none !important; }
}
.dalee-r { margin: var(--lv-s6) 0 0; }
@media (max-width: 560px) {
  .sozdat__acts, .banner__acts, .put__acts { gap: var(--lv-s2) var(--lv-s6); }
  .sozdat__acts .lv-btn--text, .banner__acts .lv-btn--text, .put__acts .lv-btn--text { padding-inline: 0; height: 40px; }
}
.dalee { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 15px/1.3 var(--lv-font-ui); color: var(--lv-accent); }
.dalee .lv-ico { transform: rotate(-90deg); }
.dalee-ryad { display: flex; flex-wrap: wrap; gap: 0 var(--lv-s6); }
.dve-temy { gap: var(--lv-s12); align-items: start; }
.dve-temy .lv-section__title { margin: 0 0 var(--lv-s4); }
.dve-temy .lv-section__lead { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .dalee:hover { text-decoration: underline; text-underline-offset: 3px; } }
.pod-tablicej { margin: var(--lv-s4) 0 0; max-width: 68ch; font: 400 14px/1.5 var(--lv-font-ui); color: var(--lv-text-3); }

.podstr-spisok { max-width: 780px; }
.ii__spisok li.tochka .lv-ico { color: var(--lv-accent); }
.spisok-itog { margin: var(--lv-s6) 0 0; max-width: 68ch; font: 400 16px/1.6 var(--lv-font-ui); color: var(--lv-text-2); }

.grid-2x { --lv-cols: 2; }
.tolko-pk-br { display: none; }
@media (min-width: 901px) { .tolko-pk-br { display: inline; } }
.grid-2x .dovod__d { max-width: 56ch; }
/* Карточки в сетке растягиваются по высоте соседа: строки — к верху, иначе
   заголовок короткой карточки съезжал вниз. */
.podstr-kart .dovod { align-content: start; }
.banner__acts { display: flex; flex-wrap: wrap; gap: var(--lv-s3); margin-top: var(--lv-s8); }

.cena-odna { --lv-cols: 1; max-width: 520px; margin: 0 auto; text-align: left; }
/* Цена на серой полосе: карточка темнее полосы, чтобы не сливалась. */
.lv-section--band .cena-odna .lv-price { background: var(--lv-bg); }
.cena-odna .za-trek { margin-top: var(--lv-s6); color: var(--lv-text-2); }
.cena__dop { margin: 0 0 var(--lv-s6); font: 600 14px/1.45 var(--lv-font-ui); color: var(--lv-text-1); }
.cena__vse { align-self: center; margin-top: var(--lv-s4); font: 600 14px/1.4 var(--lv-font-ui); }

.puti { gap: var(--lv-s8); }
.puti .put { display: flex; flex-direction: column; gap: var(--lv-s3); padding: var(--lv-s6); }
.puti .put .dovod__t { margin: 0; }
.put__acts { display: flex; flex-wrap: wrap; gap: var(--lv-s2); margin-top: auto; padding-top: var(--lv-s3); }

.plan__pole { display: grid; gap: var(--lv-s2); max-width: 360px; margin: 0 0 var(--lv-s6); }
.plan__metka { font: 600 14px/1.3 var(--lv-font-ui); color: var(--lv-text-1); }
.plan__data { height: 48px; padding: 0 16px; border: 1px solid var(--lv-border-1); border-radius: 12px; background: var(--lv-surface-1); color: var(--lv-text-1); font: 500 16px/1 var(--lv-font-ui); color-scheme: dark; }
.plan__data:focus-visible { outline: none; border-color: var(--lv-accent); box-shadow: var(--lv-ring); }
.plan__vnimanie { margin: 0; font: 400 14px/1.45 var(--lv-font-ui); color: var(--lv-warning); }

/* Текст и картинка рядом: короткий ответ, дата выхода, «Моя волна». */
.dvuh { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--lv-s12); align-items: center; }
.dvuh .lv-section__head { margin-bottom: 0; }
.dvuh__k { margin: 0; justify-self: end; width: 100%; max-width: 400px; }
.dvuh__k img { display: block; width: 100%; height: auto; border-radius: var(--lv-r-lg); }
.dvuh__k--ekran { max-width: 300px; }
.dvuh__k--ekran img { border-radius: 36px; border: 1px solid var(--lv-border-1); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
/* Баннеры: фото поющей девушки — лицо и шея по центру; предмет — целиком. */
.lv-banner__art--vokal img { object-position: center 67%; }
.lv-banner__art--work img { object-position: 40% 32%; }
.lv-banner__art--her img { object-position: center 30%; }

@media (max-width: 900px) {
  .dvuh { grid-template-columns: minmax(0, 1fr); gap: var(--lv-s8); }
  .dvuh__k { justify-self: start; max-width: 300px; }
  .dvuh__k--ekran { max-width: 240px; }
  .tolko-pk { display: none; }
  .ii { grid-template-columns: minmax(0, 1fr); gap: var(--lv-s8); }
  .otvet { padding: 0; }
  .otvet__t { font-size: 16px; }
  .grid-2x, .puti { --lv-cols: 1; }
}