/* Карточная оболочка для страниц услуг на старой разметке.
   Подключается после legacy-стилей и не затрагивает новые страницы. */
.legacy-service-redesign {
  --ls-red: #c92b22;
  --ls-red-dark: #a92019;
  --ls-ink: #1b1b1e;
  --ls-muted: #6f6d6a;
  --ls-bg: #f5f3ef;
  --ls-soft: #f5f2ef;
  --ls-cream: #fff3e6;
  --ls-line: #e7e4e0;
  --ls-shadow: 0 1px 2px rgba(27, 27, 30, .03), 0 10px 30px rgba(27, 27, 30, .045);
  background: var(--ls-bg);
  color: var(--ls-muted);
}

.legacy-service-redesign main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 80px;
}

.legacy-service-redesign main > div,
.legacy-service-redesign main > section {
  position: relative;
  width: 100% !important;
  max-width: 1180px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 18px !important;
  padding: clamp(22px, 4vw, 40px) !important;
  border: 1px solid var(--ls-line);
  border-radius: 24px;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: var(--ls-shadow);
  overflow: hidden;
}

.legacy-service-redesign main > .social-detail {
  padding: 0 !important;
}

.legacy-service-redesign main > .social-detail .social-detail-text {
  padding: clamp(22px, 4vw, 40px) !important;
}

.legacy-service-redesign main > .social-detail .header-banner {
  position: relative;
  width: 100%;
  height: clamp(190px, 28vw, 350px) !important;
  margin: 0 !important;
  overflow: hidden;
}

.legacy-service-redesign main > .social-detail .header-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legacy-service-redesign main .container,
.legacy-service-redesign main .wrapper,
.legacy-service-redesign main [class*="-wrapper"] {
  width: 100%;
  max-width: 100%;
}

.legacy-service-redesign main .row {
  margin-left: -10px;
  margin-right: -10px;
}

.legacy-service-redesign main [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

.legacy-service-redesign main h1,
.legacy-service-redesign main h2,
.legacy-service-redesign main h3,
.legacy-service-redesign main [class*="__heading"],
.legacy-service-redesign main [class*="__header"],
.legacy-service-redesign main [class*="__title"] {
  color: var(--ls-ink);
  font-family: 'Inter var', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-transform: none;
}

.legacy-service-redesign main h1,
.legacy-service-redesign main .social-detail-text__heading {
  max-width: 920px;
  margin: 14px 0 0 !important;
  font-size: clamp(30px, 5vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

.legacy-service-redesign main h2,
.legacy-service-redesign main [class*="__heading"]:not(.social-detail-text__heading),
.legacy-service-redesign main [class*="__title"]:not(.social-detail-text__heading) {
  margin-top: 0;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  font-weight: 750 !important;
}

.legacy-service-redesign main h3,
.legacy-service-redesign main [class*="__header"]:not(.social-detail-text__heading) {
  font-size: clamp(18px, 2.2vw, 22px) !important;
  font-weight: 700 !important;
}

.legacy-service-redesign main p,
.legacy-service-redesign main li,
.legacy-service-redesign main span:not([class*="icon"]),
.legacy-service-redesign main [class*="__text"] {
  font-family: 'Inter var', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

.legacy-service-redesign main p,
.legacy-service-redesign main [class*="__text"] {
  color: var(--ls-muted);
}

.legacy-service-redesign main ul,
.legacy-service-redesign main ol {
  padding-left: 24px;
}

.legacy-service-redesign main li::marker {
  color: var(--ls-red);
  font-weight: 700;
}

.legacy-service-redesign main .breadcrumbs,
.legacy-service-redesign main .crumbs {
  margin: 0 0 12px;
  padding: 0;
  font-size: 13px;
}

.legacy-service-redesign main .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legacy-service-redesign main .breadcrumbs li {
  float: none;
  margin: 0;
  padding: 0;
}

.legacy-service-redesign main .breadcrumbs li + li::before {
  content: '/';
  margin-right: 6px;
  color: var(--ls-muted);
}

.legacy-service-redesign main .social-offer .s-smm-group,
.legacy-service-redesign main .smm-bonus__wrap,
.legacy-service-redesign main .reason-wrapper,
.legacy-service-redesign main .service-faq__inner,
.legacy-service-redesign main .service-experts__inner {
  margin-top: 24px;
  padding: clamp(20px, 3vw, 30px) !important;
  border: 1px solid var(--ls-line);
  border-radius: 18px;
  background: var(--ls-soft) !important;
}

.legacy-service-redesign main .individual-offer,
.legacy-service-redesign main [class*="__item"],
.legacy-service-redesign main .item,
.legacy-service-redesign main .smm-bonus-b,
.legacy-service-redesign main .service-faq__item,
.legacy-service-redesign main .service-expert {
  height: auto !important;
  min-height: 0 !important;
  border-color: var(--ls-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.legacy-service-redesign main .individual-offer,
.legacy-service-redesign main .smm-bonus-b,
.legacy-service-redesign main .service-expert {
  padding: 22px !important;
  background-color: var(--ls-soft) !important;
  background-image: none !important;
}

.legacy-service-redesign main .about-number__item,
.legacy-service-redesign main .social-raiting__item,
.legacy-service-redesign main .what-doing__item,
.legacy-service-redesign main .how-work__item {
  margin-bottom: 12px;
  padding: 18px !important;
  background: var(--ls-soft) !important;
  color: var(--ls-ink) !important;
}

.legacy-service-redesign main .about-number-count,
.legacy-service-redesign main [class*="count"] {
  color: var(--ls-red) !important;
  font-weight: 900;
}

.legacy-service-redesign main a[class*="btn"],
.legacy-service-redesign main .btn,
.legacy-service-redesign main button,
.legacy-service-redesign main input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 14px 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ls-red) !important;
  color: #fff !important;
  font: 600 15px/1 'Inter var', 'Segoe UI', system-ui, sans-serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .15s ease;
}

.legacy-service-redesign main a[class*="btn"]:hover,
.legacy-service-redesign main .btn:hover,
.legacy-service-redesign main button:hover,
.legacy-service-redesign main input[type="submit"]:hover {
  background: var(--ls-red-dark) !important;
}

.legacy-service-redesign main .main-portfolio .item,
.legacy-service-redesign main .reviews [class*="col-"] {
  margin-bottom: 18px;
  padding: 14px !important;
  border: 1px solid var(--ls-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
}

.legacy-service-redesign main .main-portfolio img,
.legacy-service-redesign main .reviews img {
  width: 100%;
  border-radius: 12px;
}

.legacy-service-redesign main .smm-technology__content,
.legacy-service-redesign main .smm-busines__content,
.legacy-service-redesign main .social-raiting-wrap,
.legacy-service-redesign main .main-reason-items {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  height: auto !important;
}

.legacy-service-redesign main .smm-technology__img,
.legacy-service-redesign main .smm-busines__content > *,
.legacy-service-redesign main .main-reason-items > * {
  flex: 1 1 180px;
  float: none !important;
  margin: 0 !important;
}

.legacy-service-redesign main .smm-seo__header,
.legacy-service-redesign main .heading_h2,
.legacy-service-redesign main .main-portfolio__heading {
  margin: 28px 0 16px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ls-line);
}

.legacy-service-redesign main .service-faq,
.legacy-service-redesign main .service-experts {
  color: var(--ls-muted);
}

@media (max-width: 767px) {
  .legacy-service-redesign main {
    width: min(100% - 24px, 1180px);
    padding: 12px 0 56px;
  }

  .legacy-service-redesign main > div,
  .legacy-service-redesign main > section {
    margin-bottom: 12px !important;
    padding: 22px 18px !important;
    border-radius: 18px;
  }

  .legacy-service-redesign main > .social-detail {
    padding: 0 !important;
  }

  .legacy-service-redesign main > .social-detail .social-detail-text {
    padding: 22px 18px !important;
  }

  .legacy-service-redesign main [class*="col-"] {
    width: 100% !important;
    float: none !important;
  }

  .legacy-service-redesign main .row {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  .legacy-service-redesign main .social-offer .s-smm-group,
  .legacy-service-redesign main .smm-bonus__wrap,
  .legacy-service-redesign main .reason-wrapper,
  .legacy-service-redesign main .service-faq__inner,
  .legacy-service-redesign main .service-experts__inner {
    padding: 18px !important;
  }

  .legacy-service-redesign main a[class*="btn"],
  .legacy-service-redesign main .btn,
  .legacy-service-redesign main button,
  .legacy-service-redesign main input[type="submit"] {
    width: 100%;
  }
}