/* Canonical site geometry: one content frame, one compact frame, capped wide media. */
:root {
  --site-frame-max: 1360px;
  --site-frame-compact: 1040px;
  --site-media-max: 1700px;
  --site-frame-gutter: clamp(10px, 2.5vw, 24px);
}

:is(
  body > .header,
  body > .footer,
  body > .resource-header,
  body > .resource-footer,
  body > .thankyou-page-header,
  .case-hero__inner,
  .case-shell,
  .case-cta-band__inner,
  .related-cases__inner,
  .case-final__inner,
  .remo-hero__inner,
  .remo-shell,
  .remo-cta-band__inner,
  .remo-final__inner,
  .resource-shell,
  .thankyou-shell,
  .legal-shell
) {
  box-sizing: border-box !important;
  width: min(calc(100vw - (2 * var(--site-frame-gutter))), var(--site-frame-max)) !important;
  max-width: var(--site-frame-max) !important;
  margin-inline: auto !important;
}

body > main#top:not(.portfolio-case) > :is(
  .hero,
  .proof,
  .section,
  .contact,
  .social-strip
) {
  box-sizing: border-box !important;
  width: min(calc(100vw - (2 * var(--site-frame-gutter))), var(--site-frame-max)) !important;
  max-width: var(--site-frame-max) !important;
  margin-inline: auto !important;
}

:is(.questionnaire-shell) {
  box-sizing: border-box !important;
  width: min(calc(100vw - (2 * var(--site-frame-gutter))), var(--site-frame-compact)) !important;
  max-width: var(--site-frame-compact) !important;
  margin-inline: auto !important;
}

body.case-page .case-kpis {
  box-sizing: border-box !important;
  width: min(calc(100vw - (2 * var(--site-frame-gutter))), var(--site-frame-max)) !important;
  max-width: var(--site-frame-max) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  border-radius: clamp(20px, 2vw, 30px) !important;
  overflow: hidden !important;
}

body > main#top:not(.portfolio-case) .comparison-layout {
  position: relative !important;
  left: 50% !important;
  box-sizing: border-box !important;
  width: min(100vw, 2400px) !important;
  max-width: 2400px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  transform: translateX(-50%) !important;
}

@media (min-width: 901px) {
  body > main#top:not(.portfolio-case) #comparison .comparison-layout {
    justify-content: flex-start !important;
  }

  body > main#top:not(.portfolio-case) #comparison .comparison-portrait::after {
    background: linear-gradient(90deg, rgba(232, 238, 243, .98) 0 31%, rgba(232, 238, 243, .7) 45%, rgba(232, 238, 243, .12) 67%, rgba(232, 238, 243, 0) 79%) !important;
  }

  body > main#top:not(.portfolio-case) #comparison .comparison-portrait img {
    object-fit: contain;
    object-position: right center;
    transform: none;
  }
}

body.legal-page .legal-site-header {
  box-sizing: border-box !important;
  padding-right: max(var(--site-frame-gutter), calc((100vw - var(--site-frame-max)) / 2)) !important;
  padding-left: max(var(--site-frame-gutter), calc((100vw - var(--site-frame-max)) / 2)) !important;
}

body.theme-vk :is(.case-kpis, body > .footer) {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

@media (max-width: 1408px) {
  :is(
    .remo-shell,
    .remo-cta-band__inner,
    .remo-final__inner
  ) {
    position: relative !important;
    left: 50% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 760px) {
  body.case-page .case-kpis {
    border-radius: 22px !important;
  }
}