/* Inter variable (opsz, wght). WOFF2: subset Latin + Cyrillic (~−90% vs полный TTF). OFL: assets/fonts/inter/OFL.txt */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/Inter-opsz-wght-cyrillic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/Inter-Italic-opsz-wght-cyrillic.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
}

html {
  /* hidden + visible по другой оси даёт в движках overflow-y: auto → лишний скролл у «секции» */
  overflow-x: clip;
  overflow-y: visible;
}

body {
  overflow-x: clip;
  overflow-y: visible;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-optical-sizing: auto;
  color: #2f323b;
  -webkit-font-smoothing: antialiased;
}

/* Сброс UA: иначе у <a> остаётся синий/фиолетовый :link/:visited поверх наследования body */
a {
  color: inherit;
  text-decoration: none;
}

#scale-slot {
  position: relative;
  margin: 0 auto;
  overflow-x: clip;
  overflow-y: visible;
  /* 100vw шире окна, если уже есть вертикальный скролл — появляется второй (горизонтальный) трек */
  max-width: 100%;
  box-sizing: border-box;
}

#design-frame {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #fff;
}

/* Адаптив (≤900px): потоковая вёрстка без scale — см. page.css.
 * Правила дублируются под @media, чтобы первый paint не ждал site-core.js
 * (иначе #design-frame ~1450px → 390px и текст визуально «скачет»). */
html.responsive-layout #design-frame {
  position: relative;
  left: auto;
  top: auto;
  overflow-x: clip;
  overflow-y: visible;
  width: 100% !important;
  min-height: 0 !important;
  transform: none !important;
}

html.responsive-layout #scale-slot {
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {
  #design-frame {
    position: relative;
    left: auto;
    top: auto;
    overflow-x: clip;
    overflow-y: visible;
    width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
  }

  #scale-slot {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* >1800px: ширина макета = max(1800px, 85% vw) — см. site-core.js */
html.layout-scale-capped #scale-slot {
  max-width: 100%;
}

/*
 * Десктоп + scale: шапка и футер на всю ширину окна (внутри #design-root).
 * --layout-scale в site-core.js; компенсация transform.
 */
/* course.html: макет 1440 — clip по X, иначе карусель/absolute раздувают flex и футер уезжает */
html.layout-scale-active:not(.responsive-layout) #design-root:not(.design-root--course) {
  overflow-x: clip;
  overflow-y: visible;
}

html.layout-scale-active:not(.responsive-layout) #design-frame:not(:has(.design-root--course)) {
  overflow-x: clip;
  overflow-y: visible;
}

/* Шапка вынесена в body (site-core.js): тот же scale, что у #design-frame */
html.layout-scale-active:not(.responsive-layout) #design-root {
  padding-top: 80px;
}

html.layout-scale-active:not(.responsive-layout):not(.header-compact) .site-header[data-site-chrome-mount="outside"] {
  top: 0;
  left: 50%;
  right: auto;
  /* Полоса на всю ширину: 100% а не 100vw — в Firefox 100vw включает скроллбар и режет/даёт щель */
  width: calc(100% / var(--layout-scale, 1));
  max-width: none;
  min-height: 80px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: visible;
  transform: translateX(-50%) scale(var(--layout-scale, 1));
  transform-origin: top center;
}

html.layout-scale-active:not(.responsive-layout):not(.header-compact) .site-header[data-site-chrome-mount="outside"] .site-header__inner {
  width: min(1400px, calc(100% - 40px));
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  min-height: 80px;
  transform: none;
  box-sizing: border-box;
}

html.header-compact.layout-scale-active:not(.responsive-layout) #design-root {
  padding-top: 64px;
}

/* Без transform: иначе position:fixed у .site-header__nav привязан к шапке, бар пропадает */
html.header-compact.layout-scale-active:not(.responsive-layout) .site-header[data-site-chrome-mount="outside"] {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  min-height: 64px;
  transform: none;
  transform-origin: top center;
}

html.header-compact.layout-scale-active:not(.responsive-layout) .site-header[data-site-chrome-mount="outside"] .site-header__inner {
  width: min(1400px, calc(100% - 40px));
  max-width: min(1400px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
  min-height: 64px;
}

html.header-compact.responsive-layout .site-header[data-site-chrome-mount="outside"] .site-header__inner {
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto;
}

/* Футер: 100% #design-root (1440) минус 20px с каждой стороны, max 1400; без scale-формул */
html.layout-scale-active:not(.responsive-layout) #design-root .site-footer {
  position: relative;
  width: calc(100% - 40px);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  align-self: stretch;
  flex-shrink: 0;
  overflow: hidden;
}

html.layout-scale-active:not(.responsive-layout) .site-footer__inner {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ACF typography: --otido-fs only on desktop; mobile uses layout CSS, not admin px */
/* cache-bust: typography-mobile-fix 2026-08-17 */
@media (min-width: 901px) {
  #design-root [style*="--otido-fs"] {
    font-size: var(--otido-fs);
  }
}

/* Mobile: не задаём font-size для --otido-fs (var только в min-width:901 выше).
   inherit/unset здесь ломали hero: #design-root [style*="--otido-fs"] бился по специфичности
   с .hero-title / hub-hero и оставлял desktop 46–80px вместо 24–30px из layout CSS. */

@media (max-width: 900px) {
  /* WYSIWYG inline font-size в hero h1 — не пробивает mobile layout родителя */
  #design-root [class*="-hero__title"] [style*="font-size"],
  #design-root .hero-title [style*="font-size"] {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

/* Line-height из админки: только десктоп (как --otido-fs). На мобилке — CSS макета. */
@media (min-width: 901px) {
  #design-root [style*="--otido-lh"] {
    line-height: var(--otido-lh) !important;
  }

  /* WYSIWYG / списки: прокидываем LH на вложенный текст */
  #design-root [style*="--otido-lh"] :where(p, li, span, a, strong, em, b, i, u, small, div) {
    line-height: inherit !important;
  }
}

/* Когда клиент задал LH — сжимаем и отступы между буллитами (макет не трогаем) */
#design-root [style*="--otido-lh"] :where(
  .case-detail-list,
  .memo-detail-list,
  .decision-session__list--bullet,
  .decision-roadmap-stage__list,
  .decision-change-card__list,
  .pod-open-corporate-steps__bullets,
  .about-hero-card__list,
  .home-faq__bullets
),
#design-root :where(
  .case-detail-list,
  .memo-detail-list,
  .decision-session__list--bullet,
  .decision-roadmap-stage__list,
  .decision-change-card__list,
  .pod-open-corporate-steps__bullets,
  .about-hero-card__list,
  .home-faq__bullets
)[style*="--otido-lh"] {
  gap: 0.35em;
}

#design-root [style*="--otido-lh"] .case-detail-dot-list > li + li,
#design-root .case-detail-article__stack--situation[style*="--otido-lh"] .case-detail-dot-list > li + li,
#design-root .case-detail-dot-list[style*="--otido-lh"] > li + li {
  margin-top: 0.35em;
}

.manrope {
  font-family: Inter, system-ui, sans-serif;
}

.otido-lead-status {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #3b495c;
  background: rgba(59, 73, 92, 0.06);
}

.otido-lead-status[data-status="success"] {
  color: #1f7a3f;
  background: rgba(31, 122, 63, 0.1);
}

.otido-lead-status[data-status="error"] {
  color: #b42318;
}

.otido-lead-status[data-status="pending"] {
  color: #667085;
}

.otido-lead-status[hidden] {
  display: none !important;
}