/* Адаптивные исправления поверх style.css (SCSS-исходников нет — правки только здесь) */

html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* --- Боковые отступы контейнера --- */
.container { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
@media screen and (max-width: 780px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* --- Шапка --- */
header .logo a { white-space: nowrap; }
header menu li a.gosite { white-space: nowrap; }
header .logo { flex-shrink: 0; }
header menu { flex-shrink: 1; min-width: 0; }
header menu li a { white-space: nowrap; }
/* меню не помещается: сжимаем отступы и шрифт, до 1040px оставляем только телефон */
@media screen and (min-width: 781px) and (max-width: 1279px) {
  header menu li a { font-size: 15px; }
  header menu li:not(:first-child):not(:last-child) { margin: 0 11px; }
  header menu li:first-child { margin-right: 11px; }
  header menu li:last-child { margin-left: 11px; }
  header menu li a.gosite { padding: 0 20px; height: 48px; }
}
@media screen and (min-width: 781px) and (max-width: 1040px) {
  header menu li:not(:last-child) { display: none; }
  header menu li:last-child { margin-left: 0; }
}
@media screen and (max-width: 780px) {
  header .container { align-items: center; gap: 8px; }
  header .logo a:first-child { margin-right: 0; }
  header menu { margin: 0; padding: 0; }
  header menu li:last-child { margin-left: 0; }
}
@media screen and (max-width: 400px) {
  header .container { padding-left: 12px; padding-right: 12px; }
  header .logo a { font-size: 15px; }
  header .logo a img { width: 28px; height: 28px; margin-right: 6px; }
  header menu li a.gosite { font-size: 14px; padding: 0 9px; height: 32px; border-radius: 10px; }
}
@media screen and (max-width: 340px) {
  header .logo a { font-size: 13px; }
  header menu li a.gosite { font-size: 13px; padding: 0 7px; }
}

/* --- Кнопка «Подробный юридический разбор...» --- */
.services_more_btn { box-sizing: border-box; max-width: 100%; text-align: center; }
@media screen and (max-width: 780px) {
  .services_more_btn {
    height: auto; min-height: 56px; padding: 10px 20px;
    font-size: 16px; line-height: 1.3; width: 100%;
  }
}

/* --- Ряды скриншотов: «Telegram и MAX» --- */
.webapp_showcase { box-sizing: border-box; }
@media screen and (max-width: 780px) {
  .webapp_showcase {
    margin: 0 -16px;
    padding: 12px 16px 20px;
    width: auto;
    gap: 14px;
    scroll-padding-left: 16px;
    scroll-snap-type: x proximity;
  }
  .webapp_showcase .swiper_screen { scroll-snap-align: start; width: 170px; min-width: 170px; }
  .webapp_benefits .benefit_pill { font-size: 14px; padding: 8px 14px; }
}
@media screen and (min-width: 781px) and (max-width: 1020px) {
  .webapp_showcase .swiper_screen { min-width: 0; max-width: none; }
}

/* --- Ряды скриншотов: зелёная секция --- */
@media screen and (max-width: 780px) {
  .mobile .mobile_screens_row { margin-left: 0; margin-right: 0; width: 100%; box-sizing: border-box; margin-top: 32px; padding-top: 32px; }
  .mobile_screens_row, .mobile_screens_title { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .mobile_screens_title { font-size: 20px; line-height: 26px; margin-bottom: 20px; }
  .mobile_screens_grid {
    margin: 0 -16px 24px; width: auto; max-width: none;
    padding: 12px 16px; scroll-snap-type: x proximity; scroll-padding-left: 16px;
    box-sizing: border-box;
  }
  .mobile_screen_item { width: 180px; scroll-snap-align: start; }
  .mobile_video_btn { font-size: 15px; padding: 12px 18px; text-align: left; }
  .mobile_video_box { padding: 0 4px; box-sizing: border-box; }
}
@media screen and (min-width: 781px) {
  .mobile_screens_grid { margin-left: 0; margin-right: 0; }
}

/* --- Тарифы --- */
.price .row { max-width: calc(100% + 24px); }
.price_items--item.popular .price_badge { white-space: nowrap; z-index: 2; }
.price_items--item_title { font-size: 24px; line-height: 30px; padding: 0 16px; margin: 36px 0 22px; box-sizing: border-box; }
.price_items--item_sum { font-size: 48px; line-height: 58px; }

@media screen and (min-width: 781px) {
  .price_items--item.popular .price_items--item_title { margin-top: 44px; }
}

.price_filter--item { padding: 0 8px; flex: 1 1 auto; width: auto; }

/* планшет: список сверху на всю ширину, карточки ниже */
@media screen and (min-width: 781px) and (max-width: 1020px) {
  .price_filter { width: 100%; max-width: 420px; }
  .price_info { width: calc(100% - 24px); }
  .price_info ul { columns: 2; column-gap: 32px; }
  .price_info ul li { break-inside: avoid; }
  .price_items { width: calc(100% - 24px); padding-top: 20px; }
  .price_items--item { margin: 0 6px; }
  .price_items--item_title { font-size: 20px; line-height: 26px; }
  .price_items--item_sum { font-size: 40px; line-height: 50px; }
}

@media screen and (max-width: 780px) {
  .price .contact--title span { font-size: 16px; line-height: 1.5; margin-top: 12px; display: block; }
  .price_info p { font-size: 16px; line-height: 1.5; }
  .price_filter { width: calc(100% - 24px); box-sizing: border-box; overflow: hidden; padding: 0 2px; }
  .price_filter--item { padding: 0 6px; font-size: 14px; flex: 1 1 0; width: auto; min-width: 0; }
  .price_items { padding-top: 20px; }
  .price_items .slick-list { overflow: hidden; padding-top: 20px !important; margin-top: -20px; }
  .price_items--item { margin: 0 8px; }
  .price_items--item_title { font-size: 24px; line-height: 30px; }
  .price_items--item.popular { margin-top: 0; }
}

/* ряд с кнопкой «юридический разбор»: убрать отрицательные поля .row */
.steps .row:last-child { margin-left: 0; margin-right: 0; }

/* --- Вертикальные отступы секций на мобильных --- */
@media screen and (max-width: 767px) {
  .head { margin-bottom: 40px; }
  .opportunity { margin-bottom: 48px; }
  .opportunity .row:first-child { margin-bottom: 48px; }
  .cms_videos { margin-bottom: 48px; }
  .webapp { padding: 36px 0; margin-bottom: 48px; }
  .steps { margin-bottom: 48px; }
  .steps--title { margin-bottom: 28px; }
  .mobile { margin-bottom: 48px; }
  .price { margin-bottom: 0; }
  .price > .container > .row:first-of-type { display: none; }
  .price .contact--title { margin-bottom: 24px; }
  .portfolio, .about, .faq { margin-bottom: 48px; }
  .contact { padding-top: 48px; }
}

/* --- Подвал --- */
@media screen and (max-width: 780px) {
  footer .container { text-align: center; }
  footer .copy { display: block; text-align: center; font-size: 13px; line-height: 18px; padding: 0 0 25px; }
  footer .logo { justify-content: center; }
}

/* --- Табы «Возможности для председателя»: 4 таба не влезают — сетка 2×2 --- */
@media screen and (max-width: 480px) {
  .opportunity_menu {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    width: 100%; height: auto; padding: 3px; overflow: visible;
  }
  .opportunity_menu--item { justify-content: center; height: 44px; padding: 0 8px; }
}

/* --- Табы тарифов: равные ячейки, на узких экранах сетка 2×2 --- */
@media screen and (max-width: 780px) {
  .price_filter {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    height: auto; padding: 3px; overflow: visible;
    width: calc(100% - 24px); max-width: none; margin-left: 12px; margin-right: 12px; flex: 0 0 auto;
  }
  .price_filter--item { padding: 0 6px; height: 44px; min-width: 0; }
}
@media screen and (max-width: 480px) {
  .price_filter { grid-template-columns: 1fr 1fr; }
  .price_filter--item { font-size: 15px; }
}

/* --- Скриншоты приложения: одинаковые пропорции у всех --- */
.mobile_screen_item img { aspect-ratio: 590 / 1280; object-fit: cover; object-position: center top; height: auto; }
@media screen and (max-width: 780px) { .price_title:empty { display: none; } }

/* --- «Скачать мобильное приложение»: на планшете/небольшом десктопе заголовок выезжал за зелёный фон --- */
@media screen and (min-width: 781px) and (max-width: 1279px) {
  .mobile { background-size: 100% 100%; padding-top: 40px; }
  .mobile--title { font-size: 32px; line-height: 40px; margin-bottom: 12px; }
  .mobile_text p { font-size: 20px; line-height: 26px; margin-bottom: 24px; }
}

/* --- Табы тарифов на десктопе: четвёртый таб вылезал из рамки --- */
@media screen and (min-width: 1021px) {
  .price_filter { width: auto; flex: 0 0 auto; align-self: flex-start; }
}

/* --- Бургер-меню (≤1040px): навигация в выпадающей панели --- */
.burger, .mnav { display: none; }
@media screen and (max-width: 1040px) {
  header .container { gap: 10px; }
  header menu { margin-left: auto; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin: 0;
    border: 1px solid rgba(47, 47, 51, 0.15); border-radius: 12px; background: #fff; cursor: pointer;
  }
  .burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #2F2F33; transition: transform .2s, opacity .2s; }
  .burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.is-open span:nth-child(2) { opacity: 0; }
  .burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .burger:focus-visible { outline: 2px solid #00D393; outline-offset: 2px; }
  .mnav { position: absolute; top: 100%; left: 0; width: 100%; height: calc(100vh - 56px); height: calc(100dvh - 56px); background: rgba(47, 47, 51, 0.45); }
  .mnav:not([hidden]) { display: block; }
  .mnav__panel {
    display: flex; flex-direction: column; box-sizing: border-box; max-height: 100%; overflow-y: auto;
    padding: 8px 24px 24px; background: #fff; box-shadow: 0 12px 24px rgba(47, 47, 51, 0.12);
  }
  .mnav__panel a { display: block; padding: 14px 0; font-size: 18px; color: #2F2F33; text-decoration: none; border-bottom: 1px solid rgba(47, 47, 51, 0.08); }
  .mnav__panel a:active { color: #00D393; }
  .mnav__panel a.mnav__phone { margin-top: 16px; padding: 14px 20px; text-align: center; color: #fff; background: #00D393; border: 0; border-radius: 12px; }
}
@media screen and (min-width: 781px) and (max-width: 1040px) {
  .mnav { height: calc(100vh - 80px); height: calc(100dvh - 80px); }
}
@media screen and (max-width: 400px) {
  header .container { gap: 6px; }
  .burger { width: 36px; height: 36px; gap: 4px; border-radius: 10px; }
  .burger span { width: 16px; }
  .burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}