/*
 * Дизайн-правки офлайн-копии (чтобы не было 1:1 с оригиналом).
 * Цвета намеренно НЕ трогаем. Меняем только форму/поведение элементов.
 * Правки идут по блокам. Файл подключён последним — переопределяет исходные стили.
 *
 * ┌─ ШАПКА ───────────────────────────────────────────────────────────┐
 */

/* Навигация: анимированное подчёркивание при наведении (в оригинале его нет) */
#header .header__anchors a {
  position: relative;
  letter-spacing: 0.01em;
}
#header .header__anchors a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
  pointer-events: none;
}
#header .header__anchors a:hover::after,
#header .header__anchors a:focus-visible::after {
  transform: scaleX(1);
}

/* Кнопка «стать курьером»: не «таблетка», а мягкий прямоугольник + лёгкий подъём */
#header .header-reg-btn {
  border-radius: 14px !important;
  transition: transform 160ms ease, background-color 250ms ease,
    box-shadow 160ms ease, color 250ms ease !important;
}
#header .header-reg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(35, 15, 10, 0.18);
}
#header .header-reg-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Белый фон шапки — всегда, включая над hero (десктоп).
   Плавающая белая «пилюля»: меню слева, логотип по центру, город + кнопка справа.
   Без тени. Hero-фото открывается во всю ширину сверху. */
@media (min-width: 768px) {
  /* сама шапка — прозрачная подложка, клики проходят мимо пустых зон */
  #header {
    background: transparent !important;
    pointer-events: none !important;
  }
  #header::before {
    display: none !important;
  }

  /* плавающая белая пилюля */
  #header .header__container {
    position: relative !important;
    pointer-events: auto !important;
    margin: 18px auto 0 !important;
    max-width: 1320px !important;
    width: calc(100% - 40px) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    padding: 12px 14px 12px 32px !important;
    background: #ffffff !important;
    border-radius: 100px !important;
  }

  /* логотип — по центру пилюли */
  #header .header__container > a {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
  #header .header__logo.min768 {
    width: 150px !important;
    height: auto !important;
  }

  /* меню — слева */
  #header .header__anchors {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    margin: 0 auto 0 0 !important;
    white-space: nowrap !important;
  }

  /* правый блок: город + кнопка */
  #header .header__btns {
    margin-left: auto !important;
    width: auto !important;
    gap: 10px !important;
  }
  #header .header__btns > div {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
  }

  /* выбор города — как пилюля-селектор (вместо языка) */
  #header .location__btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 48px !important;
    padding: 0 18px !important;
    border-radius: 100px !important;
    background: #f2eee8 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease !important;
  }
  #header .location__btn:hover {
    background: #e9e3da !important;
  }
  #header .location__btn img,
  #header .location__btn svg {
    width: 22px !important;
    height: 22px !important;
  }
  #header .location-city {
    font-weight: 600 !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  /* кнопка «стать курьером» — в поток, пилюлей, рядом с городом */
  #header .header-reg-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    height: 48px !important;
    padding: 0 22px !important;
    border-radius: 100px !important;
  }

  /* тёмный логотип/текст на белом */
  #header .dark {
    visibility: hidden !important;
    opacity: 0 !important;
  }
  #header .light {
    visibility: visible !important;
    opacity: 1 !important;
  }
  #header .theme-color,
  #header .header__anchors a,
  #header .location-city {
    color: #230f0a !important;
  }

  /* При скролле оригинал включает state2: сдвигает город (margin-right:110px)
     и прячет название (width:55px; opacity:0). Наша шапка белая всегда —
     нейтрализуем: город стоит на месте, название видно, город выбирается.
     Селектор с .header__btns — чтобы перебить инлайновый <style> из body
     (он идёт позже в документе; при равной специфичности выигрывал бы он). */
  #header.state2 .header__btns .location__btn {
    margin-right: 0 !important;
  }
  #header.state2 .header__btns .location-city {
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
}

/* На узких десктопах (<1360px) длинное меню наезжало бы на центр-лого —
   переносим логотип влево (обычная раскладка), пилюля остаётся. */
@media (min-width: 768px) and (max-width: 1359px) {
  #header .header__container {
    justify-content: flex-start !important;
  }
  #header .header__container > a {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }
  #header .header__anchors {
    margin: 0 0 0 32px !important;
  }
  #header .header__btns {
    margin-left: auto !important;
  }
}

/*
 * ┌─ МОБИЛЬНАЯ ШАПКА + HERO ────────────────────────────┐
 * Без бургер-меню. Белая шапка-пилюля: лого слева, город справа.
 * Hero — сплошной жёлтый фон (как на десктопе), пока без картинки.
 */
@media (max-width: 767px) {
  /* — убираем бургер-меню целиком — */
  .header__btn.max767,
  .window,
  .window-bg,
  #header-btn {
    display: none !important;
  }

  /* — белая шапка-пилюля — */
  #header {
    background: transparent !important;
    height: auto !important;
  }
  #header::before {
    display: none !important;
  }
  /* оригинал прячет шапку при скролле вниз (класс .hide) — из-за этого нельзя
     выбрать город во время прокрутки. Держим шапку всегда видимой. */
  #header.hide {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #header .header__container {
    margin: 12px !important;
    padding: 8px 10px 8px 18px !important;
    background: #ffffff !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 6px 20px rgba(35, 15, 10, 0.08) !important;
    box-sizing: border-box !important;
  }

  /* лого слева: показываем тёмный (для светлого фона) логотип */
  #header .header__container > a {
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 0 !important;
  }
  #header .header__logo.max767,
  #header .header__logo.min768.dark {
    display: none !important;
  }
  #header .header__logo.min768.light {
    display: block !important;
    width: 116px !important;
    height: auto !important;
  }

  /* правый блок: только выбор города (кнопка/бургер скрыты) */
  #header .header__btns {
    width: auto !important;
    gap: 0 !important;
    margin-left: auto !important;
  }
  #header .header__btns > div {
    display: none !important;
  }

  /* выбор города — пилюля-селектор справа */
  #header .location__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 100px !important;
    background: #f2eee8 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  #header .location__btn .dark {
    display: none !important;
  }
  #header .location__btn .light {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
  }
  #header .location__btn .light path {
    fill: #230f0a !important;
  }
  #header .location-city {
    display: inline !important;
    color: #230f0a !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    width: auto !important;
    opacity: 1 !important;
  }
  /* В оригинале логотип и пин «для светлого фона» показываются только при
     скролле (state-переключение visibility). У нас шапка белая всегда —
     форсируем их видимость. */
  #header .header__logo.min768.light,
  #header .location__btn .light,
  #header .location-city {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* — HERO: сплошной жёлтый фон, без картинки — */
  #flex-center-pc-max-width-hero-bg-hero-backgrounds
    .lc-multi-background__background {
    background-color: #ffdf33 !important;
  }
  #hero_grid {
    background: #ffdf33 !important;
    border-radius: 0 !important;
  }
  #hero_grid ~ .lc-borders__shadow,
  #hero_grid ~ .lc-borders__border {
    display: none !important;
  }

  /* компактная раскладка: исходный грид имел ряды 844px/176px/104px —
     заголовок и доход разъезжались на весь экран. Переводим в flex-колонку. */
  #hero_grid > .lc-offsets {
    padding: 24px !important;
  }
  #hero_grid .lc-grid2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-template-rows: none !important;
    row-gap: 16px !important;
  }
  #hero_grid .lc-grid2-item {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    align-self: flex-start !important;
    justify-self: start !important;
  }

  /* текст тёмный (читаемо на жёлтом) + адекватные размеры для телефона */
  #hero_title .lc-text-block,
  #hero_title .lc-styled-text__text {
    --color: #1a0d08 !important;
    color: #1a0d08 !important;
  }
  #hero_title .lc-text-block {
    --font-size: clamp(44px, 13vw, 60px) !important;
  }
  #hero_subtitle .lc-text-block,
  #hero_subtitle .lc-styled-text__text {
    --color: #4a3226 !important;
    color: #4a3226 !important;
  }
  #hero_subtitle .lc-text-block {
    --font-size: 20px !important;
    --font-weight: 500 !important;
  }
  /* доход стоит близко к заголовку, кнопка — с отступом побольше */
  #hero_grid .lc-grid2-item:has(#hero_subtitle) {
    margin-top: 4px !important;
  }
  #hero_grid .lc-grid2-item:has(#hero_button) {
    margin-top: 12px !important;
  }

  /* кнопка «стать курьером» — чёрная пилюля, белый текст */
  #hero_button a.lc-button2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 58px !important;
    padding: 0 36px !important;
    background: #000000 !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #hero_button .lc-button2__under {
    display: none !important;
  }
  #hero_button .lc-button2__text {
    position: relative !important;
  }
  #hero_button .lc-button2__text,
  #hero_button .lc-styled-text__text {
    color: #ffffff !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
}

/*
 * ┌─ HERO (десктоп) — пока просто жёлтый фон, без картинки ───────────┐
 * Цвет #FFDF33 (взят из фото eda-yandex-rabota.jpg — картинку убрали
 * по просьбе пользователя, вернём/подберём другую позже).
 * Кнопка — чёрная с белым текстом. Заголовок/доход тёмные,
 * иначе белый текст оригинала не читается на жёлтом.
 */
@media (min-width: 768px) {
  /* hero — во всю ширину экрана: снимаем max-width у обёртки-секции
     (в оригинале 1272px по центру → отсюда тёмные поля-«рамка») */
  .lc-multi-background:has(> .lc-multi-background__section-container > #hero) {
    max-width: none !important;
    padding: 0 !important;
  }

  /* блок «узнайте условия работы» поднят выше. В оригинале этот блок
     (3-й .visibility-actions в #main) наезжает на hero через margin-top:-60px;
     делаем -109px, чтобы кремовая секция поднялась ещё выше. */
  [id^="main"] > div > div > div > div.visibility-actions:nth-child(3) {
    margin-top: -109px !important;
  }
  /* тёмный фон секции больше не нужен — красим в жёлтый
     (страховка от зазоров по краям) */
  #flex-center-pc-max-width-hero-bg-hero-backgrounds
    .lc-multi-background__background {
    background-color: #ffdf33 !important;
  }
  /* прячем рамку/тень скруглённой «карточки» (были у оригинала, радиус 45px) */
  #hero_grid ~ .lc-borders__shadow,
  #hero_grid ~ .lc-borders__border {
    display: none !important;
  }

  /* сам hero_grid — во всю ширину, один сплошной жёлтый фон, без картинки.
     Центрируем контент здесь же (flex на самом hero_grid), а не на вложенном
     .lc-offsets — там height:100% не резолвился из-за родителей с
     height:min-content, и текст «прилипал» к верху блока. */
  #hero_grid {
    display: flex !important;
    align-items: center !important;
    background: #ffdf33 !important;
    border-radius: 0 !important;
    position: relative !important;
    min-height: min(760px, 92vh) !important;
  }

  #hero_grid > .lc-offsets {
    width: 100% !important;
    padding: 0 64px 0 120px !important;
  }

  /* картинка курьеров справа (eda.webp — прозрачный фон, привязка к низу-правому
     краю: люди «стоят» на нижней кромке блока). Абсолют, чтобы не смещать текст. */
  #hero_grid::after {
    content: "";
    position: absolute !important;
    right: 0;
    bottom: 0;
    width: 52%;
    height: 90%;
    background: url("../images/eda.webp") right bottom / contain no-repeat;
    pointer-events: none;
    z-index: 1;
  }
  /* текст держим над картинкой */
  #hero_grid > .lc-offsets {
    position: relative !important;
    z-index: 2 !important;
  }

  /* текстовая колонка — держим комфортную длину строки, не во всю ширину */
  #hero_grid .lc-grid2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 0 !important;
    max-width: 640px !important;
  }
  #hero_grid .lc-grid2-item {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    /* КРИТИЧНО: у заголовка инлайн align-self:center — в flex-column это
       центрировало бы его по горизонтали (заголовок «уезжал вправо»).
       Форсируем всем ячейкам левое выравнивание в одну колонку. */
    align-self: flex-start !important;
    justify-self: start !important;
  }

  /* заголовок — крупнее и плотнее, это тезис блока */
  #hero_title .lc-text-block {
    --font-size: clamp(64px, 6vw, 104px) !important;
  }
  #hero_title .lc-styled-text__text {
    text-wrap: balance;
  }

  /* доход — смысловое продолжение заголовка: приглушённый тон, стоит близко */
  #hero_grid .lc-grid2-item:has(#hero_subtitle) {
    margin-top: 20px !important;
  }
  #hero_subtitle .lc-text-block {
    --font-size: 32px !important;
    --font-weight: 500 !important;
  }
  #hero_subtitle .lc-styled-text__text {
    color: #4a3226 !important;
  }

  /* заголовок и доход — тёмные (читаемо на жёлтом) */
  #hero_title .lc-text-block,
  #hero_title .lc-styled-text__text {
    --color: #1a0d08 !important;
    color: #1a0d08 !important;
  }
  #hero_subtitle .lc-text-block {
    --color: #4a3226 !important;
  }

  /* кнопка — отдельное действие, поэтому отступ от текста заметно больше */
  #hero_grid .lc-grid2-item:has(#hero_button) {
    margin-top: 44px !important;
  }

  /* кнопка «стать курьером» — чёрная пилюля.
     Компонент Яндекса берёт размеры из размеров grid-ячейки, которую мы
     обнулили, поэтому НЕ полагаемся на его CSS-переменные, а стилизуем сам
     <a> напрямую: явные высота, паддинги, фон, радиус. Слой .__under
     (визуальный фон компонента) прячем, красим фон прямо на ссылке. */
  #hero_button .lc-button-component,
  #hero_button .lc-button-component > span {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }
  #hero_button a.lc-button2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 64px !important;
    padding: 0 44px !important;
    background: #000000 !important;
    border-radius: 100px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: transform 160ms ease, box-shadow 160ms ease,
      background-color 200ms ease !important;
  }
  #hero_button a.lc-button2:hover {
    background: #1a1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
  }
  #hero_button .lc-button2__under {
    display: none !important;
  }
  #hero_button .lc-button2__text {
    position: relative !important;
  }
  #hero_button .lc-button2__text,
  #hero_button .lc-styled-text__text {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
}

/* на узких десктопах (<1000px) уменьшаем заголовок и отступы блока */
@media (min-width: 768px) and (max-width: 999px) {
  #hero_title .lc-text-block {
    --font-size: clamp(48px, 8vw, 64px) !important;
  }
  #hero_subtitle .lc-text-block {
    --font-size: 26px !important;
  }
  #hero_grid > .lc-offsets {
    padding: 0 32px 0 64px !important;
  }
}

/*
 * ┌─ «узнайте условия работы» — БЕНТО-сетка вместо слайдера ──────────┐
 * Слайдер отключён (см. правку в custom-js/38758.js). Карточки-перки
 * раскладываем сеткой: два крупных тайла слева (деньги + маршрут),
 * жёлтый тайл «чаевые 100%» — единственный акцент. Тексты и картинки
 * оригинальные. Картинка сверху, заголовок+описание снизу.
 */
#carousel-features,
#carousel-features .carousel__wrapper {
  display: block !important;
  padding: 0 !important;
}
#carousel-features .carousel__nav,
#carousel-features .carousel__dots {
  display: none !important;
}
#carousel-features .carousel__viewport {
  overflow: visible !important;
  width: auto !important;
}
#carousel-features .carousel__track {
  display: grid !important;
  transform: none !important;
  width: auto !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  gap: 16px !important;
  /* базово (планшет) — 2 колонки; бенто включаем на широких экранах ниже */
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: 300px !important;
}

/* карточка-тайл */
#carousel-features .carousel__item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 26px !important;
  background: #ffffff !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#carousel-features .carousel__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 34px rgba(26, 13, 8, 0.1) !important;
}

/* картинка сверху (растёт, заполняет верх карточки) */
#carousel-features .carousel__item img {
  order: -1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 0 8px !important;
}

/* тексты */
#carousel-features .carousel__item h3 {
  margin: 0 0 6px !important;
  font-family: "YS Geo", "YS Text", sans-serif !important;
  font-weight: 700 !important;
  font-size: 23px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: #1a0d08 !important;
}
#carousel-features .carousel__item p {
  margin: 0 !important;
  font-family: "YS Text", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: #7a6656 !important;
}

/* тег «new» */
#carousel-features .carousel__tag {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  padding: 5px 13px !important;
  background: #1a0d08 !important;
  color: #fffaf5 !important;
  font-family: "YS Text", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: 100px !important;
  z-index: 2 !important;
}

/* жёлтый акцентный тайл — «чаевые 100% ваши» (4-я карточка в DOM) */
#carousel-features .carousel__item:nth-child(4) {
  background: #ffdf33 !important;
}
#carousel-features .carousel__item:nth-child(4) p {
  color: #5a4736 !important;
}

/* ── БЕНТО (десктоп ≥1024): 4 колонки, два крупных тайла слева ── */
@media (min-width: 1024px) {
  #carousel-features .carousel__track {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 300px !important;
  }
  /* DOM: 1 district, 2 by-way, 3 no-weight, 4 tips, 5 clothes, 6 places */
  #carousel-features .carousel__item:nth-child(4) { /* чаевые (жёлтый) */
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
  }
  #carousel-features .carousel__item:nth-child(1) { grid-column: 3; grid-row: 1; } /* по району */
  #carousel-features .carousel__item:nth-child(3) { grid-column: 4; grid-row: 1; } /* без тяжестей */
  #carousel-features .carousel__item:nth-child(2) { /* заказы по пути */
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
  }
  #carousel-features .carousel__item:nth-child(5) { grid-column: 3; grid-row: 2; } /* одежда */
  #carousel-features .carousel__item:nth-child(6) { grid-column: 4; grid-row: 2; } /* отдых */

  /* в крупных тайлах картинка крупнее */
  #carousel-features .carousel__item:nth-child(2) img,
  #carousel-features .carousel__item:nth-child(4) img {
    max-width: 70% !important;
    margin: 0 auto 8px !important;
  }
}

/* ── Мобилка: одна колонка ── */
@media (max-width: 767px) {
  #carousel-features .carousel__track {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }
  #carousel-features .carousel__item {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 260px !important;
    padding: 22px !important;
  }
}

/*
 * ┌─ ФИКС СКРОЛЛА на мобилке (важно) ─┐
 * В инлайновом <style> самого index.html блоки #calculator и #carousel-features
 * получали `touch-action: none` (изначально — чтобы слайдеры/карусель тащились
 * без прокрутки страницы). Побочка: палец, попавший на этот блок, полностью
 * блокировал вертикальный скролл страницы — «калькулятор залипает, не даёт
 * листать». Возвращаем `pan-y`: браузер снова листает страницу вертикально,
 * а горизонтальный драг слайдера по-прежнему обрабатывает JS (он читает clientX
 * и не вызывает preventDefault). touch-action действует и на потомков (слайдеры),
 * поэтому одного правила на #calculator достаточно.
 */
#calculator,
#carousel-features {
  touch-action: pan-y !important;
  overscroll-behavior: auto !important;
}

/*
 * ┌─ «рассчитайте доход курьера» — светлая карточка, доход жёлтым баннером ─┐
 * Новая раскладка (не серый пузырь справа): белая карточка на кремовой
 * секции; сверху жёлтый баннер с суммой и CTA; ниже контролы — строка
 * «город + транспорт», два слайдера БОК О БОК, строка рефералов.
 * JS/логику не трогаем — только внешний вид (бегунок двигает скрипт).
 */
#calculator .calculator__wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "income"
    "btns"
    "sliders"
    "ref" !important;
  gap: 30px !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 40px 44px !important;
  background: #ffffff !important;
  border-radius: 34px !important;
  box-shadow: 0 24px 60px rgba(26, 13, 8, 0.07) !important;
  box-sizing: border-box !important;
  color: #1a0d08 !important;
}

/* ── ДОХОД — жёлтый баннер сверху ── */
#calculator .income_text_container {
  grid-area: income !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  padding: 30px 36px !important;
  background: #ffdf33 !important;
  border-radius: 26px !important;
  box-sizing: border-box !important;
  color: #1a0d08 !important;
  font-family: "YS Text", sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
#calculator #income {
  color: #1a0d08 !important;
  font-family: "YS Geo", sans-serif !important;
  font-size: 72px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
#calculator .income_text_container a.reg-btn,
#calculator .income_text_container a.header-reg-btn {
  align-self: center !important;
  margin: 0 0 0 auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
  height: 60px !important;
  padding: 0 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1a0d08 !important;
  color: #fffaf5 !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}
#calculator .income_text_container a.reg-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(26, 13, 8, 0.25) !important;
}

/* ── строка «город + транспорт» ── */
#calculator .transport-city-btns {
  grid-area: btns !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
#calculator .dropdown {
  background: #f6f2ec !important;
  border: 1px solid #ece5db !important;
  border-radius: 100px !important;
  overflow: visible !important;
}
#calculator .dropdown__input,
#calculator .dropdown__input.label-text {
  color: #1a0d08 !important;
}
#calculator .dropdown__input::placeholder {
  color: #1a0d08 !important;
  opacity: 1 !important;
}
#calculator .dropdown__arrow path {
  fill: #1a0d08 !important;
  stroke: #1a0d08 !important;
}
#calculator .dropdown__options {
  background: #ffffff !important;
  color: #1a0d08 !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(26, 13, 8, 0.12) !important;
}
/* транспорт: неактивные — белые с обводкой, активная — чёрная пилюля */
#calculator .transport-button {
  background: #ffffff !important;
  color: #1a0d08 !important;
  border: 1px solid #ece5db !important;
  border-radius: 100px !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
#calculator .transport-button svg,
#calculator .transport-button svg path {
  fill: currentColor !important;
}
#calculator .transport-button:hover {
  border-color: #d9cfc2 !important;
}
#calculator .transport-button.active {
  background: #1a0d08 !important;
  color: #fffaf5 !important;
  border-color: #1a0d08 !important;
}

/* ── слайдеры БОК О БОК ── */
#calculator .calculator__sliders {
  grid-area: sliders !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 22px 44px !important;
  background: transparent !important;
}
#calculator .slider {
  background: transparent !important;
}
#calculator .slider__text,
#calculator .slider__text.label-text {
  color: #7a6656 !important;
  font-weight: 500 !important;
}
#calculator .slider__track-bg {
  background-color: #ece5db !important;
}
#calculator .slider__track {
  background-color: #ffdf33 !important;
}
#calculator .slider__thumb {
  background-color: #ffdf33 !important;
}

/* ── рефералы ── */
#calculator .refferal-block {
  grid-area: ref !important;
  background: transparent !important;
  color: #1a0d08 !important;
}
#calculator .refferal-title {
  color: #7a6656 !important;
}
#calculator .refferal-income {
  color: #1a0d08 !important;
}
#calculator .refferal-buttons {
  background: #ffffff !important;
  border: 1px solid #ece5db !important;
  border-radius: 100px !important;
}
#calculator .minus-btn,
#calculator .plus-btn {
  background: transparent !important;
}
#calculator .minus-btn svg path,
#calculator .plus-btn svg path {
  fill: #1a0d08 !important;
}
#calculator .refferal-count {
  color: #1a0d08 !important;
}

/* ── Мобилка: всё в столбик, доход-баннер вертикальный, слайдеры в 1 колонку ── */
@media (max-width: 767px) {
  #calculator .calculator__wrapper {
    padding: 24px 18px !important;
    border-radius: 26px !important;
    gap: 22px !important;
  }
  #calculator .income_text_container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 24px 22px !important;
  }
  #calculator #income {
    font-size: 54px !important;
  }
  #calculator .income_text_container a.reg-btn {
    margin: 14px 0 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  #calculator .calculator__sliders {
    grid-template-columns: 1fr !important;
  }
}

/* ── Блок «новости» удалён (по просьбе пользователя) ──
   Прячем всю обёртку .visibility-actions, содержащую #news (заголовок
   «новости» + карусель статей #carousel-news) вместе с её отступами. */
.visibility-actions:has(> .lc-multi-background > #news-backgrounds) {
  display: none !important;
}

/*
 * ┌─ ФИКС СКРОЛЛА на мобилке: вложенный скролл-контейнер вокруг бонусов ─┐
 * Блок «открывайте бонусы и скидки» лежит внутри секции
 * #blur-dragmax-width-scrollable-folder-mob-info. В инлайновом <style>
 * index.html её внутренний .lc-group__content на мобилке получает
 * `max-height: 100dvh; overflow: auto; overscroll-behavior: none` — то есть
 * СВОЙ отдельный скролл. Отсюда «тормозит» (двойная вложенная прокрутка с
 * инерцией) и «не даёт назад» (overscroll-behavior:none не пускает прокрутку
 * обратно на страницу, когда упёрся в верх внутреннего контейнера).
 * Разворачиваем контейнер в нормальный поток страницы.
 */
@media (max-width: 767px) {
  [id*="scrollable-folder-mob"] > div > div > .lc-group__content {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
}

/*
 * ┌─ «открывайте бонусы и скидки» — коллаж «открытки-купоны» ─────────┐
 * Слайдер отключён (см. правку в custom-js/38758.js). Каждая карточка —
 * цельная картинка на своём пастельном --bg. Раскладываем сеткой, но с
 * лёгким наклоном и вертикальным «зигзагом» — как купоны/открытки,
 * раскиданные на столе. При наведении карточка выпрямляется и всплывает.
 */
#carousel-bonus,
#carousel-bonus .carousel__wrapper {
  display: block !important;
  padding: 0 !important;
}
#carousel-bonus .carousel__nav,
#carousel-bonus .carousel__dots {
  display: none !important;
}
#carousel-bonus .carousel__viewport {
  overflow: visible !important;
  width: auto !important;
}
#carousel-bonus .carousel__track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px 34px !important;
  transform: none !important;
  width: auto !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 34px 40px 70px !important;
}

/* карточка-купон */
#carousel-bonus .carousel__item {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg, #fff) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(26, 13, 8, 0.09) !important;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.28s ease !important;
  will-change: transform !important;
}
#carousel-bonus .carousel__item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 28px !important;
}

/* наклон + вертикальный зигзаг (нечётные выше, чётные ниже) */
#carousel-bonus .carousel__item:nth-child(1) { transform: rotate(-2.5deg) translateY(0) !important; }
#carousel-bonus .carousel__item:nth-child(2) { transform: rotate(1.5deg) translateY(20px) !important; }
#carousel-bonus .carousel__item:nth-child(3) { transform: rotate(-1deg) translateY(6px) !important; }
#carousel-bonus .carousel__item:nth-child(4) { transform: rotate(2deg) translateY(16px) !important; }
#carousel-bonus .carousel__item:nth-child(5) { transform: rotate(-1.5deg) translateY(0) !important; }
#carousel-bonus .carousel__item:nth-child(6) { transform: rotate(1deg) translateY(18px) !important; }

/* наведение — выпрямляем и приподнимаем */
#carousel-bonus .carousel__item:hover {
  transform: rotate(0deg) translateY(-12px) !important;
  box-shadow: 0 22px 48px rgba(26, 13, 8, 0.16) !important;
  z-index: 5 !important;
}

/* ── Мобилка: 2 колонки, без наклона (чтобы не тесно) ── */
@media (max-width: 767px) {
  #carousel-bonus .carousel__track {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding: 20px 16px 30px !important;
  }
  #carousel-bonus .carousel__item,
  #carousel-bonus .carousel__item:nth-child(1),
  #carousel-bonus .carousel__item:nth-child(2),
  #carousel-bonus .carousel__item:nth-child(3),
  #carousel-bonus .carousel__item:nth-child(4),
  #carousel-bonus .carousel__item:nth-child(5),
  #carousel-bonus .carousel__item:nth-child(6) {
    transform: none !important;
    border-radius: 20px !important;
  }
  #carousel-bonus .carousel__item img {
    border-radius: 20px !important;
  }
}

/* ── Блок «что вам ближе» удалён (по просьбе пользователя) ──
   Прячем всю обёртку .visibility-actions с #type-coop (заголовок
   «что вам ближе» + карусель #carousel-type-coop) вместе с отступами. */
.visibility-actions:has(> .lc-multi-background > #type-coop-backgrounds) {
  display: none !important;
}

/*
 * ┌─ «доставляйте заказы легко» — текстовый индекс (без картинок) ────┐
 * Было: свайпер карточек-фич приложения с картинками. Стало: без картинок,
 * не слайдер — редакционный спек-лист 8 возможностей приложения. Сетка
 * 2 колонки, у каждой фичи жёлтый квадрат-маркер + крупный заголовок +
 * приглушённое описание, разделены тонкими линиями. Слайдер (local-slider)
 * нейтрализуем через CSS: transform форсируем в none, ленту делаем сеткой.
 */
/* прячем картинки, QR и логотип */
#yndx-pro-app .lc-features__image,
#yndx-pro-app [data-spacer-id="image"],
#yndx-pro-app .lc-features__title .logo,
#yndx-pro-app .lc-features__title .qr-code {
  display: none !important;
}
/* прячем управление слайдером */
#yndx-pro-app .swiper-pagination,
#yndx-pro-app .lc-carousel__controls,
#yndx-pro-app .swiper-button-prev,
#yndx-pro-app .swiper-button-next {
  display: none !important;
}

/* лента → статическая сетка */
#yndx-pro-app .swiper-container {
  overflow: visible !important;
}
#yndx-pro-app .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  column-gap: 60px !important;
  row-gap: 0 !important;
  transform: none !important;
  transition: none !important;
  width: auto !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 6px 40px 30px !important;
  will-change: auto !important;
}
#yndx-pro-app .swiper-slide {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

/* карточка-строка — убираем серую карточку/скругление/место под картинку */
#yndx-pro-app .lc-features__item {
  height: auto !important;
  min-height: 0 !important;
  padding: 26px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(26, 13, 8, 0.12) !important;
  transition: border-color 0.2s ease !important;
}
#yndx-pro-app .lc-features__item:hover {
  border-color: #ffdf33 !important;
}
#yndx-pro-app .lc-features__item-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#yndx-pro-app .lc-features__item-wrap,
#yndx-pro-app .lc-features__spacer-wrapper {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}
#yndx-pro-app .lc-features__spacer {
  display: none !important;
}

/* заголовок фичи + жёлтый квадрат-маркер */
#yndx-pro-app .lc-features__title {
  margin: 0 0 8px !important;
}
#yndx-pro-app .lc-features__title .lc-text-block {
  --font-size: 25px !important;
  --color: #1a0d08 !important;
  --font-weight: 700 !important;
  line-height: 1.05 !important;
}
#yndx-pro-app .lc-features__title .lc-styled-text__text {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#yndx-pro-app .lc-features__title .lc-styled-text__text::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: #ffdf33;
  border-radius: 4px;
  transition: transform 0.2s ease;
}
#yndx-pro-app .lc-features__item:hover .lc-features__title .lc-styled-text__text::before {
  transform: rotate(45deg) scale(1.15);
}

/* описание */
#yndx-pro-app .lc-features__description {
  margin: 0 0 0 25px !important;
}
#yndx-pro-app .lc-features__description .lc-text-block {
  --font-size: 16px !important;
  --color: #7a6656 !important;
  line-height: 1.35 !important;
}

/* ── Мобилка: одна колонка ── */
@media (max-width: 767px) {
  #yndx-pro-app .swiper-wrapper {
    grid-template-columns: 1fr !important;
    padding: 4px 18px 24px !important;
  }
  #yndx-pro-app .lc-features__item {
    padding: 20px 0 !important;
  }
  #yndx-pro-app .lc-features__title .lc-text-block {
    --font-size: 22px !important;
  }
}


/*
 * ┌─ «станьте курьером на раз-два» (#start-easy) — новый адаптивный дизайн ─┐
 * Было: сетка 60/40 (бежевая карточка с 3 шагами + карточка-CTA). Иконки
 * шагов (140×140) — нерабочие ленивые плейсхолдеры React, не грузятся; на
 * мобилке сетка не схлопывалась → текст ломался по буквам.
 * Стало: концепт «раз-два-три» — 3 пронумерованных шага (жёлтые бейджи с
 * цифрами вместо картинок) в белой карточке слева + ЖЁЛТАЯ карточка-CTA
 * справа с чёрной кнопкой. Десктоп — 2 колонки равной высоты, мобилка —
 * одна колонка. Только CSS, HTML/JS не трогаем.
 */

/* — секция и заголовок — */
#start-easy {
  background: #FFFAF5 !important;
}
#start-easy #h2 > .lc-offsets {
  padding: 76px 20px 40px !important;
}
#start-easy #h2 .lc-styled-text__text {
  color: #1A0D08 !important;
  font-size: clamp(34px, 6vw, 58px) !important;
  line-height: 1.02 !important;
}

/* — внешняя сетка 60/40 → адаптив, карточки равной высоты — */
#start-easy-grid > .lc-offsets {
  padding: 0 20px 96px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
#start-easy-grid > .lc-offsets > .lc-grid2 {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 24px !important;
  align-items: stretch !important;
}
/* оба верхних элемента + вся цепочка обёрток — на всю высоту строки */
#start-easy-grid > .lc-offsets > .lc-grid2 > .lc-grid2-item {
  grid-row: auto !important;
  grid-column: auto !important;
  align-self: stretch !important;
  height: 100% !important;
}
#start-easy-grid > .lc-offsets > .lc-grid2 > .lc-grid2-item .lc-multi-background_inLcGrid2,
#start-easy-grid > .lc-offsets > .lc-grid2 > .lc-grid2-item .lc-multi-background__section-container,
#start-easy-grid > .lc-offsets > .lc-grid2 > .lc-grid2-item .lc-borders__advanced-borders-wrapper,
#start-easy-grid > .lc-offsets > .lc-grid2 > .lc-grid2-item .lc-borders__component-wrapper,
#start-easy #left-wrapper,
#start-easy #right-wrapper {
  height: 100% !important;
}

/* — карточки: свои фоны, единый радиус, убрать штатные фон-слои/бордеры — */
#start-easy #left-wrapper-backgrounds .lc-multi-background__background,
#start-easy #right-wrapper-backgrounds .lc-multi-background__background {
  background: transparent !important;
}
#start-easy .lc-borders__advanced-borders-wrapper,
#start-easy .lc-borders__component-wrapper,
#start-easy .lc-borders__shadow,
#start-easy .lc-borders__border {
  border-radius: 32px !important;
  border: none !important;
  box-shadow: none !important;
}
#start-easy #left-wrapper,
#start-easy #right-wrapper {
  border-radius: 32px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#start-easy #left-wrapper {
  background: #FFFFFF !important;
  box-shadow: 0 18px 44px rgba(26, 13, 8, 0.06) !important;
}
#start-easy #right-wrapper {
  background: #FFDF33 !important;
}

/* — левая карточка: паддинги + разделители между шагами — */
#start-easy #left-wrapper > .lc-offsets {
  padding: 40px 40px !important;
}
#start-easy #left-wrapper > .lc-offsets > .lc-grid2 {
  row-gap: 0 !important;
}
#start-easy #left-item-1 { padding: 0 0 22px !important; }
#start-easy #left-item-2,
#start-easy #left-item-3 {
  border-top: 1px solid rgba(26, 13, 8, 0.09) !important;
  padding: 22px 0 !important;
}
#start-easy #left-item-3 { padding-bottom: 0 !important; }

/* — иконки шагов → жёлтые бейджи с цифрами (1-2-3) — */
#start-easy #left-img-1 .lc-image-lpc,
#start-easy #left-img-2 .lc-image-lpc,
#start-easy #left-img-3 .lc-image-lpc,
#start-easy #left-img-1 img,
#start-easy #left-img-2 img,
#start-easy #left-img-3 img {
  display: none !important;
}
#start-easy #left-img-1,
#start-easy #left-img-2,
#start-easy #left-img-3 {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: #FFDF33 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#start-easy #left-img-1::before,
#start-easy #left-img-2::before,
#start-easy #left-img-3::before {
  font: 700 25px/1 "YS Geo", Helvetica, Arial, sans-serif;
  color: #1A0D08;
}
#start-easy #left-img-1::before { content: "1"; }
#start-easy #left-img-2::before { content: "2"; }
#start-easy #left-img-3::before { content: "3"; }
/* колонка иконки поуже, бейдж по верху текста */
#start-easy #left-item-1 > .lc-offsets > .lc-grid2,
#start-easy #left-item-2 > .lc-offsets > .lc-grid2,
#start-easy #left-item-3 > .lc-offsets > .lc-grid2 {
  grid-template-columns: 54px 1fr !important;
  column-gap: 18px !important;
  align-items: center !important;
}

/* — тексты шагов — */
#start-easy [id^="left-title-"] .lc-styled-text__text {
  color: #1A0D08 !important;
  font-size: 22px !important;
  line-height: 1.06 !important;
}
#start-easy [id^="left-subtitle-"] .lc-styled-text__text {
  color: rgba(26, 13, 8, 0.55) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* — правая карточка (CTA): контент по центру по вертикали — */
#start-easy #right-wrapper > .lc-offsets {
  padding: 44px 40px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
}
#start-easy #right-wrapper > .lc-offsets > .lc-grid2 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  width: 100% !important;
  height: 100% !important;
}
#start-easy #right-wrapper > .lc-offsets > .lc-grid2 > .lc-grid2-item {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
#start-easy #right-title .lc-styled-text__text {
  color: #1A0D08 !important;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.05 !important;
}

/* — кнопка → чёрная пилюля во всю ширину — */
#start-easy #right-btn,
#start-easy #right-btn .lc-button-component,
#start-easy #right-btn .lc-button2 {
  width: 100% !important;
  min-width: 0 !important;
}
#start-easy #right-btn .lc-button2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 62px !important;
  padding: 0 28px !important;
  background: #1A0D08 !important;
  border-radius: 100px !important;
}
#start-easy #right-btn .lc-button2:hover {
  background: #000000 !important;
}
/* штатный жёлтый слой поверх кнопки — убираем, чтобы был виден тёмный фон */
#start-easy #right-btn .lc-button2__under {
  background: transparent !important;
}
#start-easy #right-btn .lc-button2 .lc-styled-text__text {
  color: #FFFFFF !important;
  font-size: 19px !important;
}

/* ── Мобилка: одна колонка ── */
@media (max-width: 767px) {
  #start-easy #h2 > .lc-offsets {
    padding: 44px 18px 26px !important;
  }
  #start-easy-grid > .lc-offsets {
    padding: 0 16px 60px !important;
  }
  #start-easy-grid > .lc-offsets > .lc-grid2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #start-easy #left-wrapper > .lc-offsets {
    padding: 26px 22px !important;
  }
  #start-easy #right-wrapper > .lc-offsets {
    padding: 34px 22px !important;
  }
  #start-easy #left-img-1,
  #start-easy #left-img-2,
  #start-easy #left-img-3 {
    width: 46px !important;
    height: 46px !important;
  }
  #start-easy #left-img-1::before,
  #start-easy #left-img-2::before,
  #start-easy #left-img-3::before {
    font-size: 21px;
  }
  #start-easy #left-item-1 > .lc-offsets > .lc-grid2,
  #start-easy #left-item-2 > .lc-offsets > .lc-grid2,
  #start-easy #left-item-3 > .lc-offsets > .lc-grid2 {
    grid-template-columns: 46px 1fr !important;
    column-gap: 14px !important;
  }
  #start-easy #right-btn .lc-button2 {
    height: 56px !important;
  }
}

/*
 * ┌─ «отвечаем на вопросы» (#faq) — аккордеон, все вопросы сразу ─┐
 * Вопрос раскрывается по клику (accordion.js, класс .lc-spoiler-item_open).
 * БЕЗ кнопки «показать ещё»: все 12 вопросов видны сразу (свёрнутыми),
 * каждый разворачивается отдельно.
 *  • #faq-button скрыт;
 *  • перебиваем штатный лимит .closed nth-child(n+5){display:none} — все пункты
 *    видны независимо от класса .closed (его вешает faq-модуль на загрузке);
 *  • ответ по умолчанию свёрнут (платформенное height:0/opacity:0), при .open
 *    раскрывается (платформа + наш fade).
 * Стиль: белые карточки на кремовом, стрелка — круглый жёлтый бейдж (поворот),
 * одна колонка.
 */

/* секция + заголовок + ширина колонки */
#faq {
  background: #FFFAF5 !important;
}
#faq #h2 .lc-styled-text__text {
  color: #1A0D08 !important;
}
#faq-accordion,
#faq-accordion .lc-spoiler {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* убрать кнопку «показать ещё» и показать ВСЕ вопросы */
#faq-button {
  display: none !important;
}
[id^="faq"] .lc-spoiler-item {
  display: block !important;
}

/* карточка вопроса */
[id^="faq"] .lc-spoiler-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 13, 8, 0.08) !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
  box-shadow: 0 6px 20px rgba(26, 13, 8, 0.04) !important;
  overflow: hidden !important;
  transition: box-shadow 0.22s ease, transform 0.18s ease,
    border-color 0.22s ease !important;
}
[id^="faq"] .lc-spoiler-item:hover {
  border-color: rgba(26, 13, 8, 0.16) !important;
  box-shadow: 0 12px 30px rgba(26, 13, 8, 0.08) !important;
  transform: translateY(-2px) !important;
}
[id^="faq"] .lc-spoiler-item_open {
  border-color: rgba(26, 13, 8, 0.12) !important;
  box-shadow: 0 14px 34px rgba(26, 13, 8, 0.07) !important;
}
[id^="faq"] .lc-spoiler-item_open:hover {
  transform: none !important;
}

/* шапка вопроса — кликабельная */
[id^="faq"] .lc-spoiler-item__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
}
[id^="faq"] .lc-spoiler-item_open .lc-spoiler-item__header {
  padding-bottom: 12px !important;
}
[id^="faq"] .lc-spoiler-item__title {
  padding-right: 0 !important;
}
[id^="faq"] .lc-spoiler-item__title,
[id^="faq"] .lc-spoiler-item__title .lc-styled-text__text {
  font-weight: 600 !important;
  color: #1A0D08 !important;
  font-size: 18px !important;
  line-height: 1.32 !important;
}

/* стрелка → круглый жёлтый бейдж, поворот при открытии */
[id^="faq"] .lc-spoiler-item__arrow {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #FFDF33 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease !important;
}
[id^="faq"] .lc-spoiler-item__header:hover .lc-spoiler-item__arrow {
  background: #FFE86B !important;
}
[id^="faq"] .lc-spoiler-item_open .lc-spoiler-item__arrow {
  transform: rotate(180deg) !important;
}
[id^="faq"] .lc-spoiler-item__arrow .lc-icon {
  color: #1A0D08 !important;
}
[id^="faq"] .lc-spoiler-item__arrow svg {
  width: 15px !important;
  height: 15px !important;
}

/* ответ: свёрнут по умолчанию, при раскрытии — с fade */
[id^="faq"] .lc-spoiler-item__text {
  padding: 0 24px !important;
  transform: translateY(-4px);
}
[id^="faq"] .lc-spoiler-item_open .lc-spoiler-item__text {
  padding: 2px 24px 22px !important;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s ease !important;
}
[id^="faq"] .lc-spoiler-item__text,
[id^="faq"] .lc-spoiler-item__text .lc-styled-text__text {
  color: rgba(26, 13, 8, 0.6) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ── Мобилка ── */
@media (max-width: 767px) {
  #faq-accordion,
  #faq-accordion .lc-spoiler {
    max-width: 100% !important;
  }
  [id^="faq"] .lc-spoiler-item__header {
    padding: 16px 18px !important;
  }
  [id^="faq"] .lc-spoiler-item_open .lc-spoiler-item__header {
    padding-bottom: 10px !important;
  }
  [id^="faq"] .lc-spoiler-item__title,
  [id^="faq"] .lc-spoiler-item__title .lc-styled-text__text {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  [id^="faq"] .lc-spoiler-item__arrow {
    width: 32px !important;
    height: 32px !important;
  }
  [id^="faq"] .lc-spoiler-item__arrow svg {
    width: 13px !important;
    height: 13px !important;
  }
  [id^="faq"] .lc-spoiler-item_open .lc-spoiler-item__text {
    padding: 2px 18px 18px !important;
  }
  [id^="faq"] .lc-spoiler-item__text,
  [id^="faq"] .lc-spoiler-item__text .lc-styled-text__text {
    font-size: 15px !important;
  }
}

/*
 * ┌─ «доставляйте заказы легко» (#yndx-pro-app) — жёлтый фон как hero ─┐
 * Красим блок в фирменный жёлтый #FFDF33 во всю ширину экрана (full-bleed,
 * как hero). Контент (заголовок + спек-лист) остаётся центрированным.
 * На жёлтом подстраиваем контраст: маркеры и hover-акцент — тёмные,
 * описания — темнее, линии-разделители — заметнее.
 */
#yndx-pro-app {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #FFDF33 !important;
  padding: 54px 0 62px !important;
  box-sizing: border-box !important;
}
/* заголовок — тёмный на жёлтом */
#yndx-pro-app h2.lc-styled-text__text {
  color: #1A0D08 !important;
}
/* квадрат-маркер и hover-акцент — тёмные (жёлтый на жёлтом не виден) */
#yndx-pro-app .lc-features__title .lc-styled-text__text::before {
  background: #1A0D08 !important;
}
#yndx-pro-app .lc-features__item {
  border-top-color: rgba(26, 13, 8, 0.2) !important;
}
#yndx-pro-app .lc-features__item:hover {
  border-color: #1A0D08 !important;
}
/* описания — темнее для читаемости на жёлтом */
#yndx-pro-app .lc-features__description .lc-text-block {
  --color: rgba(26, 13, 8, 0.72) !important;
}

/*
 * ┌─ Анимация появления блоков при скролле ─┐
 * Классы навешивает assets/local-reveal.js (IntersectionObserver):
 * при загрузке добавляет .reveal-init (прячет), при попадании блока во
 * вьюпорт — .reveal-in (плавно проявляет со сдвигом снизу).
 * Если JS не сработает — класс .reveal-init не добавится, блоки видны как есть.
 */
.reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-in {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*
 * ┌─ ПОДВАЛ (#…futer) — компактный аккуратный редизайн ─┐
 * Проблема прошлой версии: контент подвала лежит в LPC-гриде, где юр.текст
 * (#note-text) и ссылка на компанию (#company-link) в ОДНОЙ строке
 * накладывались → «криво»; большие row-gap 40px и крупный заголовок делали
 * подвал громоздким. Решение: берём полный контроль — единый инсет на
 * контент-группе, грид → простой блок-поток, компактные отступы, заголовок →
 * маленький лейбл, аккуратная нижняя строка. Фон брендовый тёмный #1A0D08.
 */

/* фон подвала → тёмный (перекрываем серый слой) */
#ignore-width-footer-offset-max-width-futer-backgrounds .lc-multi-background__background {
  background-color: #1A0D08 !important;
}

/* единый инсет для всего содержимого подвала */
#ignore-width-footer-offset-max-width-futer > .lc-offsets > .lc-group > .lc-group__content {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 0 32px 30px !important;
  box-sizing: border-box !important;
}

/* грид #note → простой вертикальный поток (снимаем наложение элементов) */
#ignore-width-footer-offset-max-width-futer #note,
#ignore-width-footer-offset-max-width-futer #note > .lc-offsets {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
#ignore-width-footer-offset-max-width-futer #note > .lc-offsets > .lc-grid2 {
  display: block !important;
}
#ignore-width-footer-offset-max-width-futer #note > .lc-offsets > .lc-grid2 > .lc-grid2-item {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* CTA-строка: лого + кнопка, тонкий разделитель снизу */
.lf-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 0 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lf-cta__logo {
  font-family: "YS Geo", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.lf-cta__logo span {
  color: #ffdf33;
}
/* наш логотип в подвале (эмблема + «Партнёр Еды») вместо текста «Яндекс Еда» */
.lf-cta__logo.brand-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.lf-cta__logo.brand-logo .brand-logo__word {
  font-family: "YS Text", "Yandex Sans Text", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.lf-cta__logo.brand-logo .brand-logo__emblem {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: block;
}
.lf-cta__tag {
  margin-top: 7px;
  font-family: "YS Text", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.45);
}
.lf-cta__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 100px;
  background: #ffdf33;
  color: #1a0d08 !important;
  font-family: "YS Geo", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}
.lf-cta__btn:hover {
  background: #ffe86b;
  transform: translateY(-1px);
}

/* раздел «курьеры также ищут» (заголовок + чипсы-ссылки) — убран по просьбе */
#note-title,
#note-chips {
  display: none !important;
}

/* юр.текст — мелкий, приглушённый; идёт сразу под CTA (у неё свой разделитель) */
#note-text {
  margin-top: 22px !important;
}
#note-text,
#note-text .lc-styled-text__text,
#note-text #autojs_futer,
#note-text #autojs_futer * {
  color: rgba(255, 255, 255, 0.34) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
}

/* нижняя ссылка «Проект компании Яндекс» */
/* Блок «Проект компании Яндекс» удалён полностью — скрываем секцию и её фон */
#company-link,
[id="company-link-backgrounds"] {
  display: none !important;
}
#company-link .lc-styled-text__text {
  text-align: right !important;
}
#company-link a {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 12.5px !important;
  border-bottom: none !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
#company-link a:hover {
  color: #ffdf33 !important;
}

/* ── Мобилка ── */
@media (max-width: 767px) {
  #ignore-width-footer-offset-max-width-futer > .lc-offsets > .lc-group > .lc-group__content {
    padding: 0 20px 26px !important;
  }
  .lf-cta {
    padding: 24px 0 18px !important;
    gap: 16px;
  }
  .lf-cta__logo {
    font-size: 22px;
  }
  .lf-cta__btn {
    width: 100%;
    height: 48px;
  }
  #chips a {
    font-size: 12.5px !important;
    padding: 7px 12px !important;
  }
  #company-link {
    text-align: left !important;
  }
  #company-link .lc-styled-text__text {
    text-align: left !important;
  }
}

/*
 * ┌─ АУДИТ МОБИЛЬНОЙ ВЕРСИИ — корректные размеры под телефон ─┐
 * Проблемы на 390px: секционные заголовки (h2) 64px рвали слова
 * («открывайт|е», «рассчитайт|е»); hero-подзаголовок 42px крупный;
 * hero-секция растягивалась на 100vh (grid-template-rows:100vh на внешнем
 * гриде) → большие пустоты сверху/снизу. Здесь всё приводим под мобилку.
 */
@media (max-width: 767px) {
  /* секционные заголовки — компактные, не рвут слова */
  h2.lc-styled-text__text {
    font-size: 32px !important;
    line-height: 1.08 !important;
  }

  /* заголовки фич в жёлтом блоке — не как секционный заголовок, компактнее
     (задаём напрямую: --font-size перебивался breakpoint-переменной) */
  #yndx-pro-app .lc-features__title .lc-styled-text__text {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }

  /* hero-подзаголовок (доход): размер задаём напрямую —
     переменная --font-size перебивалась breakpoint-размером и давала 42px */
  #hero_subtitle .lc-styled-text__text {
    font-size: 26px !important;
    line-height: 1.16 !important;
  }

  /* hero: снять растяжку на весь экран. Два механизма 100vh:
     1) внешний .lc-group / .lc-group__content секции hero (grid-rows:100vh,
        min-height:100vh) — из-за него контент прижимался к низу;
     2) внутренний .lc-grid2 (grid-template-rows:100vh).
     Обнуляем оба → секция по высоте контента, без пустот. */
  [id*="hero-bg-hero"] .lc-group,
  [id*="hero-bg-hero"] .lc-group__content,
  .lc-grid2:has(#hero_grid) {
    grid-template-rows: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
  #hero_grid > .lc-offsets {
    padding-top: 104px !important;
    padding-bottom: 46px !important;
  }
}

/*
 * ┌─ НОВЫЙ ЛОГОТИП: «Партнёр» · [эмблема Яндекс Еды] · «Еды» ─┐
 * Картинки старого лого убраны, вместо них <a.brand-logo> из
 * трёх частей: текст «Партнёр», жёлтая эмблема-«улитка», текст «Еды».
 * images/logo-emblem.svg — вырезанный из исходного лого кружок.
 */
#header .header__container > a.brand-logo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
#header .brand-logo__word {
  font-family: "YS Text", "Yandex Sans Text", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: #1a0d08;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
#header .brand-logo__emblem {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 auto !important;
  display: block !important;
}

@media (max-width: 767px) {
  #header .header__container > a.brand-logo {
    gap: 6px !important;
  }
  #header .brand-logo__word {
    font-size: 16px;
  }
  #header .brand-logo__emblem {
    width: 26px !important;
    height: 26px !important;
  }
}