/*
 * Смешанный кейс «сайт + продвижение» (макет designs/id-result-case-mixed, mixed-v3).
 * Секции — готовые компоненты услуг из child.css (id-svc-dir, id-svc-process, id-svc-steps, id-svc-gift),
 * отзывы — паттерн главной id-theme/reviews, форма — id-theme/form-cf7. Фон экранов чередуется как на
 * страницах услуг: фон страницы / .id-svc.is-tint. Здесь только вид этих компонентов в кейсе.
 */

.id-case-mixed h2 span,
.id-case-mixed h3 span { color: var(--id-result-blue); }

/* ── 01 · Первый экран на всю высоту окна без шапки ── */
.id-case-mixed .id-case-hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--id-header-height));
  padding-block: 24px !important;
}
.admin-bar .id-case-mixed .id-case-hero { min-height: calc(100svh - var(--id-header-height) - 32px); }
.id-case-mixed .id-case-hero > .alignwide { width: min(calc(100% - 36px), calc(50% + var(--id-result-container) / 2)); }
.id-case-mixed .id-case-head h1 { font-size: clamp(38px, 3.9vw, 66px); }
.id-case-head .id-case-head__sub {
  max-width: 34ch;
  margin: 8px 0 0;
  color: var(--id-result-muted) !important;
  font-family: inherit;
  font-size: clamp(19px, 1.7vw, 28px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}
.id-case-head__label {
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--id-result-accent);
  color: var(--id-result-muted) !important;
  font-size: 18px;
}
/* Прозрачная иллюстрация вместо превью: без рамки, тени и кадрирования, по высоте окна */
.id-case-head.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.id-case-head.has-art .id-case-head__img { align-self: center; overflow: visible; border-radius: 0; box-shadow: none; }
.id-case-head.has-art .id-case-head__img img { max-height: calc(100svh - var(--id-header-height) - 80px); object-fit: contain; }
@media (max-width: 1180px) { .id-case-head.has-art { grid-template-columns: minmax(0, 1fr); } }
.id-mixed-art { margin: 0; }
.id-mixed-art img { display: block; width: 100%; height: auto; }

/* ── 02 · Результат: слева заголовок и крупная цифра, справа описание и итоги в карточке ── */
/* «Результат»: заголовок слева — по верхнему краю правой карточки (и скана) */
.id-mixed-result .id-svc-dir__grid { align-items: start; }
.id-mixed-result .id-svc-dir__grid:has(.id-svc-checklist.is-unseparated) { align-items: start; }
/* Скан отзыва клиента по центру «Результата»: результат подтверждён письмом */
.id-mixed-result .id-svc-dir__grid:has(> .id-mixed-scan) { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr); align-items: start; gap: clamp(24px, 3vw, 48px); }
.id-mixed-scan { margin: 0; padding: 12px; border: 1px solid #dce8f6; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgb(8 106 216 / 14%); transform: rotate(-2deg); }
.id-mixed-scan img { display: block; width: 100%; height: auto; border-radius: 6px; cursor: zoom-in; }
.id-mixed-kpi { padding: clamp(24px, 3vw, 44px); border: 1px solid #fff; border-radius: 30px; background: #fff; box-shadow: 0 24px 60px rgb(8 106 216 / 10%); }
.id-mixed-kpi .id-svc-head__lead { margin-top: 0; }
/* Все абзацы карточки результата — одного размера и цвета: вводный (lead) не крупнее остальных */
.id-mixed-kpi p, .id-mixed-kpi li { font-size: clamp(18px, 1.3vw, 20px); font-weight: 400; line-height: 1.5; }
.id-mixed-kpi .id-svc-head__lead { color: inherit !important; }
/* Итоги по каналам (Поиск и РСЯ) — две колонки рядом; на телефоне друг под другом */
.id-mixed-kpi__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.id-mixed-kpi__col > :first-child { margin-top: 0; }
.id-mixed-kpi__col > :is(ul, ol) + p { margin-top: 20px; } /* вторая группа в колонке — отступ от списка выше */
.id-mixed-kpi__cols:not(:first-child) { margin-top: 20px; }
@media (max-width: 600px) { .id-mixed-kpi__cols { grid-template-columns: minmax(0, 1fr); } }
/* .is-aligned: подзаголовки колонок (год, города) — одна строка сетки, списки начинаются на одном уровне,
   даже если города в одной колонке в две строки, в другой в одну (кейс 330: «ВКонтакте» 2017 напротив «Яндекса» 2016) */
@media (min-width: 601px) {
  .id-mixed-kpi__cols.is-aligned { grid-template-rows: auto auto; row-gap: 0; }
  .id-mixed-kpi__cols.is-aligned > .id-mixed-kpi__col { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
}
.id-mixed-bignum {
  margin: 18px 0 0;
  font-size: clamp(30px, 3vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}
.id-mixed-bignum strong {
  display: block;
  color: var(--id-result-blue);
  font-size: clamp(120px, 15vw, 240px);
  line-height: .9;
  letter-spacing: -.06em;
}
.id-mixed-bignum__pre { margin-right: .12em; font-size: .4em; letter-spacing: 0; } /* «в» перед крупной цифрой — на одной строке с ней */
.id-mixed-result .id-svc-checklist li { padding-block: 10px; padding-left: 46px; border-bottom: 0; } /* пункты без разделительных линий */
.id-mixed-result .id-svc-checklist li:last-child { border-bottom: 0; }
.id-mixed-result .id-svc-checklist.is-unseparated li { border-bottom: 0; }
.id-mixed-result .id-svc-checklist li::before { top: 9px; width: 30px; height: 30px; border-radius: 50%; }

/* ── 03 · Клиент и задачи: логотип в карточке, задачи «номер | черта | текст» ── */
.id-mixed-client .id-svc-dir__grid { align-items: start; }
.id-case-problem-box { margin-top: 32px; padding: 22px 26px; border-left: 4px solid #ff6b5b; border-radius: 4px 18px 18px 4px; background: #fff3f1; }
.id-case-problem-box > p { margin: 10px 0 0; }
h3.id-case-problem { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(20px, 1.6vw, 24px); }
h3.id-case-problem::before { content: "!"; display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ff6b5b; box-shadow: 0 6px 16px rgb(255 107 91 / 30%); color: #fff; font-size: 20px; font-weight: 800; line-height: 1; }
/* Логотип клиента — небольшая квадратная карточка у правого края колонки, рядом с подписью и названием */
.id-mixed-client .id-svc-dir__copy:has(> .id-mixed-logo) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-content: start; }
.id-mixed-client .id-svc-dir__copy:has(> .id-mixed-logo) > * { grid-column: 1 / -1; }
.id-mixed-client .id-svc-dir__copy:has(> .id-mixed-logo) > .id-kicker,
.id-mixed-client .id-svc-dir__copy:has(> .id-mixed-logo) > h2 { grid-column: 1; }
.id-mixed-client .id-svc-dir__copy > .id-kicker { grid-row: 1; }
.id-mixed-client .id-svc-dir__copy > h2 { grid-row: 2; }
.id-mixed-logo { grid-column: 2 !important; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 140px; height: 140px; margin: 0; padding: 8px; border: 1px solid #e3eefa; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgb(8 106 216 / 12%); }
/* в сетке 140×140 max-height:100% не работает — высокий знак вылезал из карточки; потолок высоты явный, пропорции сохраняются */
.id-mixed-logo img { display: block; max-width: 100%; max-height: 108px; width: auto !important; height: auto; object-fit: contain; }
/* светлый знак на прозрачном фоне (класс ставит case_sections.client_section по light_logo) — тёмная карточка */
.id-mixed-logo.is-dark { border-color: #13284a; background: #13284a; }
.id-mixed-client h3.wp-block-heading { margin-top: 18px; font-size: clamp(22px, 1.8vw, 30px); }
/* абзацы колонок «Клиент и задача» не слипаются: отступ как у .id-svc-head__lead (14px); список задач — свой 18px */
.id-mixed-client .id-svc-dir__copy > p:not(.id-kicker) + :is(p, ul, ol):not(.id-mixed-tasks) { margin-top: 14px; }
.id-mixed-client .id-svc-dir__copy > :is(ul, ol) + p { margin-top: 14px; }
.id-mixed-tasks { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: mx-task; }
.id-mixed-tasks li {
  display: grid;
  grid-template-columns: 136px 1fr;
  align-items: center;
  padding: 26px 0;
  font-size: 20px;
  line-height: 1.4;
  counter-increment: mx-task;
}
.id-mixed-tasks li + li { border-top: 1px solid #d6e6f8; }
.id-mixed-tasks li::before {
  content: counter(mx-task, decimal-leading-zero);
  margin-right: 32px;
  padding-right: 28px;
  border-right: 2px solid #cfe0f5;
  color: var(--id-result-blue);
  font-size: clamp(44px, 4vw, 66px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
}
/* .is-years: вместо номера 01, 02 — год из разметки (<strong>2016</strong> в начале пункта), колонка подписи по ширине года */
.id-mixed-tasks.is-years li { grid-template-columns: auto 1fr; }
.id-mixed-tasks.is-years li::before { content: none; display: none; }
.id-mixed-tasks.is-years li > strong:first-child {
  box-sizing: content-box;
  min-width: 2.2em; /* 2016 и 2017 одной ширины — текст пунктов с одной линии */
  margin-right: 32px;
  padding-right: 28px;
  border-right: 2px solid #cfe0f5;
  color: var(--id-result-blue);
  font-size: clamp(44px, 4vw, 66px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
}

/* ── 04 · Этапы маршрутом (и все колонки «Результата» — короткая едет рядом с длинной): заголовок слева едет при прокрутке, этапы по два, крупные бледные номера ── */
.id-mixed-route { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.id-mixed-route > .id-svc-head,
.id-mixed-site__copy,
.id-mixed-result .id-svc-dir__grid > *,
.id-mixed-client .id-svc-dir__copy:first-child { position: sticky; top: calc(var(--id-header-height, 90px) + 40px); }
.id-mixed-process .id-svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4svh, 48px) clamp(32px, 4vw, 64px); }
/* Кейс без экрана «Сайт»: панель технологий в секции этапов (фоны соседних секций чередуются) */
.id-mixed-process__tech { margin-top: clamp(48px, 6vw, 96px); }
.id-mixed-process__tech .id-mixed-tech__main { justify-content: center; }
/* Видео в свободной ячейке сетки этапов (кейс 199): этап рядом с видео — полоса по своему тексту, не до низа видео */
.id-mixed-process .id-svc-step:has(+ .id-case-step-video) { align-self: start; }
.id-mixed-process .id-svc-step { padding: 0 0 0 34px; border-left: 2px solid #c5dbf6; border-radius: 0; background: none; box-shadow: none; }
.id-mixed-process .id-svc-step::after {
  content: "";
  display: block;
  top: clamp(78px, 7.6vw, 112px);
  right: auto;
  left: -11px;
  width: 20px;
  height: 20px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--id-result-blue);
  box-shadow: 0 4px 12px rgb(8 106 216 / 25%);
}
.id-mixed-process .id-svc-step:nth-child(4n)::after { background: var(--id-result-accent); }
.id-mixed-process .id-svc-step__num {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 -.18em;
  border-radius: 0;
  background: linear-gradient(180deg, #b8d5f6, #e6f1fd) text;
  -webkit-background-clip: text;
  color: transparent !important;
  font-size: clamp(84px, 8.4vw, 130px);
  line-height: 1;
  letter-spacing: -.06em;
}
.id-mixed-process .id-svc-step h3.wp-block-heading { position: relative; font-size: clamp(20px, 1.6vw, 26px); }
.id-mixed-process .id-svc-step > p:not(.id-svc-step__num) { margin-top: 14px; font-size: 17px; line-height: 1.55; }

/* ── 05 · Технологии и работы: одна панель ── */
.id-mixed-tech__panel {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 3.4vw, 56px);
  border: 1px solid #fff;
  border-radius: 36px;
  background: rgb(255 255 255 / 75%);
  box-shadow: 0 30px 80px rgb(8 106 216 / 10%);
}
.id-mixed-tech__aside .id-svc-head { margin-bottom: 28px; }
.id-mixed-tech .id-svc-dir__adv-grid { grid-template-columns: 1fr; gap: 14px; margin: 0; }
.id-mixed-tech .id-svc-dir__adv-item.has-icon { flex-direction: row; align-items: center; gap: 22px; padding: 0; border: 0; background: none; }
.id-mixed-tech .id-svc-dir__adv-icon { width: 84px; height: 84px; margin: 0; padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px rgb(8 106 216 / 10%); }
.id-mixed-tech .id-svc-dir__adv-item h3 { font-size: 20px; }
/* Правая колонка тянется на высоту панели; если левая (список технологий) выше — «Работы» с полосой долей
   по центру по вертикали, ссылка на сайт (absolute) остаётся в правом верхнем углу */
.id-mixed-tech__main { position: relative; display: flex; flex-direction: column; justify-content: center; padding-left: clamp(0px, 3vw, 48px); border-left: 1px solid #d6e6f8; }
.id-mixed-site-link { position: absolute; top: 0; right: 0; margin: 0; }
.id-mixed-site-link a { font-size: clamp(20px, 1.6vw, 28px); font-weight: 800; text-underline-offset: 6px; }
.id-mixed-tech__main .id-mixed-art { align-self: center; width: min(100%, 560px); margin-top: 24px; }
.id-mixed-tech .id-svc-dir__adv-title { margin-top: 40px; font-size: clamp(34px, 3vw, 52px); letter-spacing: -.04em; }
/* Полоса долей: подписи без разрыва слов; если соседние не помещаются, case-mixed.js опускает подпись на следующий
   уровень (--mx-line: длина выноски), сдвигает её от краёв полосы (--mx-left) и задаёт место под подписями (--mx-pad). */
.id-mixed-shares { display: flex; margin: 28px 0 0; padding-bottom: var(--mx-pad, 140px); }
.id-mixed-share { position: relative; flex: var(--mx-share, 1) 1 0; min-width: 64px; text-align: center; --mx-line: 32px; }
.id-mixed-share::before { content: ""; position: absolute; top: 80px; left: 50%; width: 2px; height: var(--mx-line); background: var(--mx-color); }
.id-mixed-share::after { content: ""; position: absolute; top: calc(80px + var(--mx-line) - 4px); left: 50%; width: 14px; height: 14px; margin-left: -6px; border-radius: 50%; background: var(--mx-color); }
.id-mixed-share__value { display: grid; place-items: center; height: 80px; margin: 0; background: var(--mx-color); color: #fff !important; font-size: clamp(16px, 1.5vw, 26px); font-weight: 800; }
.id-mixed-share:first-child .id-mixed-share__value { border-radius: 40px 0 0 40px; }
.id-mixed-share:last-child .id-mixed-share__value { border-radius: 0 40px 40px 0; color: var(--id-result-blue) !important; }
.id-mixed-share:nth-child(1) { --mx-color: #086ad8; }
.id-mixed-share:nth-child(2) { --mx-color: #3d8ff0; }
.id-mixed-share:nth-child(3) { --mx-color: #1fc7b6; }
.id-mixed-share:nth-child(4) { --mx-color: #6fdbe1; }
.id-mixed-share:nth-child(5) { --mx-color: #a9d4fb; }
.id-mixed-share:nth-child(6) { --mx-color: #d4e8fc; }
.id-mixed-share:nth-child(7) { --mx-color: #e6f1fd; }
.id-mixed-share:nth-child(n+5) .id-mixed-share__value { color: var(--id-result-blue) !important; }
/* 5+ технологий — список в две колонки, чтобы левая часть панели не вытягивалась вниз */
.id-mixed-tech .id-svc-dir__adv-grid:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.id-mixed-tech .id-svc-dir__adv-grid:has(> :nth-child(5)) .id-svc-dir__adv-item.has-icon { gap: 14px; }
.id-mixed-tech .id-svc-dir__adv-grid:has(> :nth-child(5)) .id-svc-dir__adv-icon { width: 64px; height: 64px; padding: 8px; border-radius: 16px; }
.id-mixed-tech .id-svc-dir__adv-grid:has(> :nth-child(5)) h3 { font-size: 17px; }
@media (min-width: 1101px) { .id-mixed-tech__panel:has(.id-svc-dir__adv-grid > :nth-child(5)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); } }
@media (max-width: 781px) { .id-mixed-tech .id-svc-dir__adv-grid:has(> :nth-child(5)) { grid-template-columns: minmax(0, 1fr); } }
.id-mixed-share__label { position: absolute; top: calc(80px + var(--mx-line) + 18px); left: var(--mx-left, 50%); margin: 0; transform: var(--mx-shift, translateX(-50%)); width: max-content; max-width: 200px; font-size: clamp(14px, 1.15vw, 19px); line-height: 1.25; text-align: center; overflow-wrap: normal; hyphens: none; }
.id-mixed-share__label strong { display: block; margin-top: 4px; font-size: clamp(18px, 1.6vw, 26px); font-weight: 800; }

/* ── 06 · Сайт: заголовок | главная было/стало | «Наши работы» — по трети ── */
.id-mixed-site { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.id-mixed-site__copy { margin: 0; }
.id-mixed-works-art { max-width: 300px; margin-top: 32px; }
.id-mixed-viewer { position: relative; padding: 14px 16px 16px; border: 1px solid #dce8f6; border-radius: 26px; background: #fff; box-shadow: 0 24px 60px rgb(8 106 216 / 12%); }
.id-mixed-viewer__labels { display: flex; justify-content: space-between; gap: 12px; padding: 2px 6px 10px; font-size: 18px; font-weight: 800; }
.id-mixed-viewer__labels p { margin: 0; }
.id-mixed-viewer__labels p:only-child { flex: 1; text-align: center; }
.id-mixed-viewer__labels p:nth-child(2):not(:last-child) { color: var(--id-result-blue); }
.id-mixed-viewer .id-svc-browser__bar { height: 34px; margin: 0 0 10px; padding: 0 6px; border-bottom: 1px solid #e3edf8; }
.id-mixed-viewer .id-svc-browser__bar span,
.id-mixed-viewer .id-svc-browser__bar b { visibility: hidden; }
.id-mixed-viewer > figure { margin: 0; overflow: hidden; border: 1px solid #e3edf8; border-radius: 10px; }
.id-mixed-works img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.id-mixed-viewer__stage { height: calc(100svh - var(--id-header-height, 90px) - 200px); min-height: 420px; overflow-y: auto; border: 1px solid #e3edf8; border-radius: 10px; background: #eef4fb; overscroll-behavior: contain; scrollbar-width: thin; }
.id-mixed-compare { position: relative; --mx-pos: 50%; touch-action: pan-y; user-select: none; }
.id-mixed-compare.is-ready > figure { position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
.id-mixed-compare img { display: block; width: 100%; height: auto; pointer-events: none; }
.id-mixed-compare .id-mixed-before { clip-path: inset(0 calc(100% - var(--mx-pos)) 0 0); }
.id-mixed-compare .id-mixed-after { clip-path: inset(0 0 0 var(--mx-pos)); }
.id-mixed-handle { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--mx-pos); width: 3px; margin-left: -1.5px; background: var(--id-result-blue); cursor: ew-resize; }
.id-mixed-handle::after { content: "↔"; position: sticky; top: 40%; display: grid; place-items: center; width: 44px; height: 44px; margin: 120px 0 0 -20.5px; border: 3px solid var(--id-result-blue); border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgb(8 106 216 / 25%); color: var(--id-result-blue); font-size: 20px; font-weight: 800; }
.id-mixed-compare:focus-within .id-mixed-handle::after { outline: 3px solid var(--id-result-blue); outline-offset: 3px; }
.id-mixed-scroll {
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--id-result-blue);
  box-shadow: 0 10px 24px rgb(8 106 216 / 35%);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  animation: id-mixed-nudge 1.6s ease-in-out infinite;
}
.id-mixed-scroll.is-end { transform: rotate(180deg); animation: none; }
@keyframes id-mixed-nudge { 50% { translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .id-mixed-scroll { animation: none; } }

/* ── 07 · Динамика: подпись и крупная таблица рядом, по центру ── */
.id-mixed-dyn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px clamp(32px, 4vw, 64px); }
.id-mixed-dyn-row .id-svc-dir__copy { max-width: 380px; }
.id-mixed-dyn-row .id-svc-dir__media { flex: 0 1 900px; padding: clamp(16px, 2vw, 32px); }
.id-mixed-cabinet { margin: 0; }
.id-mixed-cabinet img { width: 100% !important; }

/* ── 08 · Подарок после формы: обложка, текст, форма. Колонка формы — той же ширины, что у формы
   «Обсудим вашу задачу» (.id-form-columns: доли .95 / .75 / 1.1, зазор 28px; до 1180px — 1 / .8 / 1) ── */
.id-mixed-gift.id-svc-gift {
  grid-template-columns: minmax(160px, 280px) minmax(0, 1fr) calc((100% - 56px) * 1.1 / 2.8);
  gap: 28px;
  align-items: center;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.id-mixed-gift .id-svc-gift__cover img { border: 10px solid #fff; border-radius: 6px; box-shadow: 0 20px 44px rgb(8 106 216 / 16%); }
.id-mixed-gift .id-kicker { color: var(--id-result-accent) !important; font-size: 22px; letter-spacing: 0; text-transform: none; }
.id-mixed-gift h3.wp-block-heading { margin: 4px 0 0; font-size: clamp(34px, 3.4vw, 60px); line-height: 1; letter-spacing: -.045em; }
.id-mixed-gift .id-svc-gift__text { margin: 18px 0 0; color: var(--id-result-muted) !important; font-size: 19px; font-weight: 400; line-height: 1.5; }
.id-mixed-gift__form { padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgb(8 106 216 / 12%); }
.id-mixed-gift__form .id-result-demo-form { display: grid; gap: 14px; }
.id-mixed-gift__form input[type="email"] { width: 100%; min-height: 64px; padding: 10px 22px; border: 1px solid #c9daef; border-radius: 16px; background: #fff; font: inherit; font-size: 18px; }
.id-mixed-gift__form button,
.id-mixed-gift__form input[type="submit"] { width: 100%; min-height: 64px; border: 0; border-radius: 16px; background: var(--id-result-accent); color: var(--id-result-ink); font: inherit; font-size: 20px; font-weight: 750; cursor: pointer; }

@media (max-width: 1180px) {
  .id-mixed-gift.id-svc-gift { grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) calc((100% - 56px) / 2.8); }
}
@media (max-width: 1100px) {
  .id-mixed-result .id-svc-dir__grid:has(> .id-mixed-scan) { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); }
  .id-mixed-result .id-mixed-kpi { grid-column: 1 / -1; }
  .id-mixed-route,
  .id-mixed-tech__panel { grid-template-columns: minmax(0, 1fr); }
  .id-mixed-site { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .id-mixed-site__copy { grid-column: 1 / -1; position: static; }
  .id-mixed-works-art { display: none; }
  .id-mixed-route > .id-svc-head,
  .id-mixed-result .id-svc-dir__grid > *,
  .id-mixed-client .id-svc-dir__copy:first-child { position: static; }
  .id-mixed-tech__main { padding-left: 0; border-left: 0; }
}
@media (max-width: 781px) {
  .id-mixed-result .id-svc-dir__grid:has(> .id-mixed-scan) { grid-template-columns: minmax(0, 1fr); }
  .id-mixed-scan { max-width: 260px; justify-self: center; }
  .id-mixed-logo { width: 104px; height: 104px; padding: 6px; }
  .id-mixed-logo img { max-height: 80px; }
  .id-mixed-tasks li { grid-template-columns: 84px 1fr; font-size: 18px; }
  .id-mixed-tasks li::before { margin-right: 18px; padding-right: 14px; }
  .id-mixed-tasks.is-years li > strong:first-child { margin-right: 18px; padding-right: 14px; }
  .id-mixed-process .id-svc-steps { grid-template-columns: minmax(0, 1fr); }
  .id-mixed-site-link { position: static; }
  .id-mixed-shares { flex-direction: column; gap: 8px; }
  .id-mixed-share { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; text-align: left; }
  .id-mixed-share .id-mixed-share__value { height: 44px; border-radius: 12px !important; }
  .id-mixed-shares { padding-bottom: 0; }
  .id-mixed-share__label { position: static; padding: 0; transform: none; white-space: normal; text-align: left; }
  .id-mixed-share::before,
  .id-mixed-share::after { display: none; }
  .id-mixed-share__label strong { display: none; }
  .id-mixed-site { grid-template-columns: minmax(0, 1fr); }
  .id-mixed-viewer__stage { height: 70svh; }
  .id-mixed-gift.id-svc-gift { grid-template-columns: minmax(0, 1fr); }
  .id-mixed-gift .id-svc-gift__cover { max-width: 220px; }
}

/* Форма «Обсудим вашу задачу» внутри кейса — голубой экран, чтобы фон чередовался с похожими кейсами и подарком */
.id-case-mixed .id-result-contact {
  background: radial-gradient(circle, rgb(8 106 216 / 8%) 1.3px, transparent 1.7px) 0 0 / 24px 24px, linear-gradient(180deg, #e8f2fd, #f1f7fe);
  box-shadow: inset 0 1px 0 #d6e6f8, inset 0 -1px 0 #d6e6f8;
}
/* Отступы от краёв экрана сверху и снизу одинаковые: похожие кейсы — как над заголовком, форма — 90px */
.id-case-mixed .id-result-portfolio { padding-block: clamp(48px, 7svh, 88px) !important; }
.id-case-mixed .id-result-contact { padding-block: 90px !important; }
@media (max-width: 781px) { .id-case-mixed .id-result-contact { padding-block: 56px !important; } }

/* ── Варианты семейства (build-mixed-case.py): вехи результата, этапы со списками, несколько страниц сайта, графики ── */
/* Колонка подписей — по самой длинной подписи (не уже 136px и не шире 55%), строки выровнены общей сеткой (subgrid). */
.id-mixed-milestones { display: grid; grid-template-columns: fit-content(55%) minmax(0, 1fr); column-gap: 16px; margin: 18px 0; padding: 0; list-style: none; }
.id-mixed-milestones li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #d6e6f8; font-size: 17px; line-height: 1.45; }
.id-mixed-milestones li > strong { min-width: 136px; }
.id-mixed-milestones li:last-child { border-bottom: 0; }
/* Пункт итогов без подписи (вывод одной фразой) — на всю ширину карточки, а не в колонку подписи */
.id-mixed-milestones li:not(:has(> strong)) { grid-template-columns: minmax(0, 1fr); }
.id-mixed-milestones strong { color: var(--id-result-blue); font-size: 20px; font-weight: 800; }
.id-mixed-process .id-svc-step ul { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 20px; color: var(--id-result-muted); font-size: 16px; line-height: 1.5; }
.id-mixed-site.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.id-mixed-site.is-many > .id-mixed-site__copy { grid-column: 1 / -1; position: static; }
.id-mixed-page img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.id-mixed-scroll[hidden] { display: none; }
.id-mixed-charts { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.id-mixed-charts > .id-svc-dir__media { flex: 1 1 380px; max-width: 680px; padding: 20px; }
.id-mixed-chart { margin: 0; }
.id-mixed-chart img { cursor: zoom-in; }
.id-mixed-chart__cap { margin: 14px 4px 0; color: var(--id-result-muted) !important; font-size: 16px; text-align: center; }
@media (max-width: 1100px) { .id-mixed-site.is-many { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 781px) { .id-mixed-milestones { grid-template-columns: minmax(0, 1fr); } .id-mixed-milestones li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ── Страницы сайта «ноутбук + превью» (case-mixed.js, 2+ окна): слева ноутбук с одной страницей и прокруткой,
   справа вертикальные превью страниц — клик переключает экран ── */
.id-mixed-site.has-showcase { display: block; }
.id-mixed-site.has-showcase > .id-mixed-site__copy { position: static; margin-bottom: clamp(24px, 3svh, 40px); }
.id-mixed-showcase { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.id-mixed-showcase.is-single { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin-inline: auto; } /* одна страница — ноутбук по центру */
.id-mixed-laptop { --mx-screen: clamp(380px, calc(100svh - var(--id-header-height, 90px) - 260px), 640px); }
/* Ноутбук: крышка — тёмная рамка с камерой и «подбородком»; база — алюминий с контуром, бликом и выемкой под палец,
   под ней отдельная мягкая тень (база читается и на tint, и на фоне страницы). */
.id-mixed-laptop { position: relative; isolation: isolate; }
.id-mixed-laptop__screen { position: relative; padding: 22px 16px 26px; border: 1px solid #0a0f16; border-radius: 22px 22px 4px 4px; background: linear-gradient(160deg, #2c3746 0%, #161d27 55%, #0f141c 100%); box-shadow: inset 0 0 0 2px #3b4757, inset 0 1px 0 3px rgb(255 255 255 / 6%), 0 26px 50px -18px rgb(8 34 74 / 35%); }
.id-mixed-laptop__screen::before { content: ""; position: absolute; top: 8px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4d6a8a 0 18%, #0a0f15 45%); box-shadow: 0 0 0 1.5px #2a3442; }
.id-mixed-laptop__screen::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 10px; border-radius: 0 0 3px 3px; background: linear-gradient(#0d1219, #232c38); }
.id-mixed-laptop__base { position: relative; height: clamp(20px, 2vw, 30px); margin: 0 -7%; border: 1px solid #6f7b89; border-top-color: #9aa6b3; border-radius: 3px 3px 26px 26px / 3px 3px 16px 16px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0) 6%, rgb(255 255 255 / 65%) 30%, rgb(255 255 255 / 0) 50%), linear-gradient(180deg, #f8fafc 0%, #e1e6ec 22%, #c3ccd6 58%, #98a4b1 82%, #6f7b89 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -4px 0 rgb(40 52 68 / 28%), 0 1px 0 #55606d; }
.id-mixed-laptop__base::before { content: ""; position: absolute; top: -1px; left: 50%; width: 15%; height: 45%; margin-left: -7.5%; border-radius: 0 0 12px 12px; background: linear-gradient(#9ea9b5, #c8d0d9); box-shadow: inset 0 2px 3px rgb(20 30 45 / 30%), 0 1px 0 rgb(255 255 255 / 70%); }
.id-mixed-laptop__base::after { content: ""; position: absolute; z-index: -1; right: 3%; bottom: -18px; left: 3%; height: 22px; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(8 34 74 / 34%) 0, rgb(8 34 74 / 12%) 45%, rgb(8 34 74 / 0) 72%); }
.id-mixed-laptop .id-mixed-viewer { padding: 0; border: 0; border-radius: 8px; background: #fff; box-shadow: none; overflow: hidden; }
.id-mixed-laptop .id-mixed-viewer:not(.is-active) { display: none; }
.id-mixed-laptop .id-mixed-viewer__labels { padding: 10px 16px; border-bottom: 1px solid #e3edf8; font-size: 16px; }
.id-mixed-laptop .id-svc-browser__bar { display: none; }
.id-mixed-laptop .id-mixed-viewer__stage { height: var(--mx-screen); min-height: 0; border: 0; border-radius: 0; }
.id-mixed-laptop .id-mixed-viewer > figure { height: var(--mx-screen); overflow-y: auto; border: 0; border-radius: 0; }
.id-mixed-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.id-mixed-thumb { display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--id-result-ink); font: inherit; text-align: left; cursor: pointer; }
.id-mixed-thumb__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid #dce8f6; border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgb(8 106 216 / 10%); transition: border-color .2s, transform .2s; }
.id-mixed-thumb__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.id-mixed-thumb__label { font-size: 14px; font-weight: 700; line-height: 1.25; }
.id-mixed-thumb:hover .id-mixed-thumb__img { transform: translateY(-3px); border-color: #9cc3ee; }
.id-mixed-thumb.is-active .id-mixed-thumb__img { border-color: var(--id-result-blue); }
.id-mixed-thumb.is-active .id-mixed-thumb__label { color: var(--id-result-blue); }
.id-mixed-thumb:focus-visible { outline: 3px solid var(--id-result-blue); outline-offset: 4px; border-radius: 14px; }
@media (min-width: 1101px) { .id-mixed-thumbs:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; } }
.id-mixed-thumbs:has(> :nth-child(5)) .id-mixed-thumb__label { font-size: 13px; }
.id-mixed-laptop .id-mixed-works img { width: 100% !important; max-height: none; }
/* Узкий исходник (max-width = натуральная ширина ставит case-mixed.js) — по центру, поля экрана нейтральные. */
.id-mixed-laptop .id-mixed-viewer img.id-mixed-capped { margin-inline: auto; }
.id-mixed-laptop .id-mixed-viewer__stage,
.id-mixed-laptop .id-mixed-viewer > figure { background: #eceff3; }
@media (max-width: 1100px) {
  .id-mixed-showcase { grid-template-columns: minmax(0, 1fr); }
  .id-mixed-thumbs { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
  .id-mixed-thumb { flex: 0 0 120px; }
}
/* Ноутбук целиком в своей колонке: база (−7% от крышки) по левому краю выровнена с заголовком, справа не заходит
   в gap к превью и не вылезает за край окна. Крышку сужаем на вынос базы: 7% / (100% + 2 × 7%) ≈ 6.15%. */
.id-mixed-laptop { padding-inline: 6.15%; }
@media (max-width: 781px) { .id-mixed-laptop { --mx-screen: 60svh; } .id-mixed-laptop__screen { padding: 16px 8px 18px; border-radius: 16px 16px 3px 3px; } .id-mixed-laptop__screen::before { top: 5px; width: 5px; height: 5px; margin-left: -2.5px; } .id-mixed-laptop__screen::after { height: 7px; } .id-mixed-laptop__base { height: 14px; margin: 0 -3%; } .id-mixed-laptop { padding-inline: 2.84%; } }

/* ── Результаты продвижения с итогами (кейсы продвижения): слева заголовок и цифры крупно, справа отчёт ── */
.id-case-promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.id-case-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: clamp(20px, 3svh, 36px) 0 0; padding: 0; list-style: none; }
.id-case-stats li { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-top: 1px solid #d6e6f8; font-size: 17px; font-weight: 600; line-height: 1.35; }
.id-case-stats li:first-child { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
.id-case-stats strong { color: var(--id-result-blue); font-size: clamp(44px, 4.4vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.id-case-stats li:first-child strong { font-size: clamp(64px, 7vw, 112px); }
.id-case-stats span { color: var(--id-result-muted); font-size: 15px; font-weight: 400; }
.id-mixed-charts.is-aside { flex-direction: column; align-items: stretch; }
.id-mixed-charts.is-aside > .id-svc-dir__media { flex: none; max-width: none; }
@media (max-width: 1100px) { .id-case-promo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 781px) { .id-case-stats strong { font-size: 44px; } .id-case-stats li:first-child strong { font-size: 64px; } }