/* MindFlow — страницы кейсов на зеркале (v10.2): оглавление слева и логотип клиента в шапке. */
.mf10-toc {
  box-sizing: border-box;
  margin: 0 0 28px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--r-line, #dbe4ef);
  border-radius: 16px;
}
.mf10-toc-label {
  margin: 0 0 8px;
  color: #0e87c8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mf10-toc ol { list-style: none; margin: 0; padding: 0; }
.mf10-toc li { margin: 0; }
.mf10-toc a {
  display: block;
  padding: 7px 0;
  color: #33425f;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.mf10-toc a:hover { color: var(--r-navy, #2d2d78); }
.mf10-toc a:focus-visible { outline: 3px solid var(--r-cyan, #09a5d4); outline-offset: 2px; border-radius: 4px; }
.mf10-toc .mf10-toc-back {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid #e6edf6;
  color: #008cc1;
  font-weight: 700;
}
.mf10-article .article-body h2 { scroll-margin-top: 120px; }

@media (min-width: 1240px) {
  .article.mf10-article {
    width: min(1200px, 100%);
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }
  .article.mf10-article > * { grid-column: 2; min-width: 0; }
  .article.mf10-article > .mf10-toc {
    grid-column: 1;
    grid-row: 1 / span 10;
    position: sticky;
    top: 120px;
    margin: 0;
  }
}

/* Логотип клиента в правой части шапки */
.page-top[data-mf-visual] .mf-hero-art[data-type="mark"] img { object-fit: contain; }
@media (max-width: 900px) {
  .page-top[data-mf-visual] .mf-hero-art[data-type="mark"] {
    width: calc(100% - 40px) !important;
    max-width: 580px;
    aspect-ratio: 2.1 !important;
  }
}
@media (max-width: 650px) {
  .page-top[data-mf-visual] .mf-hero-art[data-type="mark"] { width: calc(100% - 32px) !important; }
}

/* Финальный призыв и кнопки (в стилях зеркала для .buttons/.btn правил нет) */
.article .buttons.mf10-cta {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin: 44px 0 0;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--r-line, #dbe4ef);
  border-radius: 18px;
  box-shadow: 0 15px 45px rgba(17, 29, 67, .04);
}
.article .buttons.mf10-cta .mf10-cta-q {
  flex: 1 1 100%;
  margin: 0 0 4px;
  color: #111d3a;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.article .buttons.mf10-cta .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.article .buttons.mf10-cta .btn:not(.btn-ghost) {
  background: var(--r-navy, #2d2d78);
  color: #fff;
  box-shadow: 0 10px 24px rgba(45, 45, 120, .22);
}
.article .buttons.mf10-cta .btn:not(.btn-ghost)::after { content: "→"; transition: transform .2s; }
.article .buttons.mf10-cta .btn:not(.btn-ghost):hover {
  background: var(--r-cyan, #09a5d4);
  box-shadow: 0 14px 30px rgba(9, 165, 212, .30);
  transform: translateY(-1px);
}
.article .buttons.mf10-cta .btn:not(.btn-ghost):hover::after { transform: translateX(4px); }
.article .buttons.mf10-cta .btn-ghost {
  background: transparent;
  color: var(--r-navy, #2d2d78);
  border-color: var(--r-line, #dbe4ef);
}
.article .buttons.mf10-cta .btn-ghost:hover { border-color: var(--r-navy, #2d2d78); }
.article .buttons.mf10-cta .btn:focus-visible { outline: 3px solid var(--r-cyan, #09a5d4); outline-offset: 3px; }
@media (max-width: 650px) {
  .article .buttons.mf10-cta { padding: 20px; }
  .article .buttons.mf10-cta .mf10-cta-q { font-size: 18px; }
  .article .buttons.mf10-cta .btn { width: 100%; }
  .article .buttons.mf10-cta .btn:not(.btn-ghost) { order: 1; }
  .article .buttons.mf10-cta .btn-ghost { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .article .buttons.mf10-cta .btn, .article .buttons.mf10-cta .btn::after { transition: none; transform: none !important; }
}

/* Заголовок шапки не должен заходить на картинку справа.
   Правило зеркала body.mf-branded-inner>.page-top h1 растягивает его до 83% ширины, поэтому
   ограничиваем ширину местом слева от .mf-hero-art (те же формулы, по которым зеркало её ставит). */
@media (min-width: 901px) {
  body > .page-top[data-mf-visual]:not(.mf-hero-clean) h1,
  body.mf-branded-inner > .page-top[data-mf-visual]:not(.mf-hero-clean) h1 {
    font-size: clamp(36px, 4.2vw, 64px) !important;
    line-height: 1.08 !important;
    max-width: calc(62vw - 80px) !important;
  }
  body > .page-top[data-mf-visual]:not(.mf-hero-clean) p.lead,
  body.mf-branded-inner > .page-top[data-mf-visual]:not(.mf-hero-clean) p.lead {
    max-width: calc(62vw - 80px) !important;
  }
}
@media (min-width: 1201px) {
  body > .page-top[data-mf-visual]:not(.mf-hero-clean) h1,
  body.mf-branded-inner > .page-top[data-mf-visual]:not(.mf-hero-clean) h1,
  body > .page-top[data-mf-visual]:not(.mf-hero-clean) p.lead,
  body.mf-branded-inner > .page-top[data-mf-visual]:not(.mf-hero-clean) p.lead {
    max-width: calc(100vw - max(4vw, (100vw - 1320px) / 2) - min(32vw, 440px) - max(32px, (100vw - 1200px) / 2) - 56px) !important;
  }
}