/*
 * Библиотека блоков кейса-лендинга, префикс .dgcase.
 *
 * Подключается только на кейсах, собранных без Elementor (inc/dg-cases.php).
 * Разметку собирает scripts/12-case-build.py из pages/cases/*.html и *.json,
 * поведение — cases/dgcase.js. Как устроено — docs/cases.md.
 *
 * Режим дизайн-системы — «каркас» (спокойный): сетка и шрифты строгие,
 * скругления 20/30, зелёный — заливка, а не текст на белом, розовый — только
 * пометка от руки. Цвета — токены из ../About us/design/tokens.json и служебные
 * оттенки из docs/design-system.md, 1.1. Новые оттенки — только с записью туда.
 *
 * Префикс .dgc занят блоком на GEO-странице (style.css) — поэтому .dgcase.
 */

/* ---------- основа ---------- */

.dgcase {
	/* Тема Hub кладёт запись без Elementor в .container шириной 1140:
	   блок растянут на всю ширину. Горизонтальной прокрутки нет,
	   потому что у html стоит overflow-x: hidden. */
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;

	--ink: #250C3D;
	--accent: #21F276;
	--paper: #FFFFFF;
	--muted: #5B5266;
	--muted-dark: #B9B0C6;
	--line: #E9E5EE;
	--surface: #F4F2F7;
	--display: "Unbounded", Arial, sans-serif;
	--text: "Manrope", Arial, sans-serif;

	font-family: var(--text);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}
.dgcase *, .dgcase *::before, .dgcase *::after { box-sizing: border-box; }
.dgcase-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.dgcase p { margin: 0 0 20px; font-family: var(--text); font-size: 16px; line-height: 1.6; color: inherit; }
.dgcase p:last-child { margin-bottom: 0; }
.dgcase h1, .dgcase h2, .dgcase h3 {
	margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.2;
	color: inherit; letter-spacing: 0; text-transform: none;
}
/* заголовки переносятся ровно, без одного слова на последней строке */
.dgcase h1, .dgcase h2, .dgcase h3, .dgcase h4 { text-wrap: balance; }
.dgcase h1 { font-size: 52px; margin-bottom: 25px; }
.dgcase h2 { font-size: 40px; margin-bottom: 40px; }
.dgcase h3 { font-size: 25px; margin-bottom: 20px; }
.dgcase strong, .dgcase b { font-weight: 700; }
.dgcase a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dgcase a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.dgcase img { max-width: 100%; height: auto; }
/* :where — чтобы сброс не перебивал правила блоков ниже */
.dgcase :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.dgcase :where(li) { margin: 0; }
.dgcase button { font-family: var(--text); text-transform: none; letter-spacing: 0; box-shadow: none; }

/* ---------- секции и сетка ---------- */

.dgcase-band { padding: 80px 0; }
.dgcase-band--tight { padding: 60px 0; }
.dgcase-band--soft { background: var(--surface); }
.dgcase-band--tight + .dgcase-band--tight { padding-top: 0; }

/* Текст шире графиков: на 1280 колонка текста 665 px, 10–11 слов в строке.
   До 07.10.2026 было 5 : 6 — 518 px и 8 слов, читалось тяжело (владелец).
   Схема, которой мало 475 px, ставится под текст: .dgcase-stack */
.dgcase-row {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 60px;
	align-items: start;
}
.dgcase-stack > * + * { margin-top: 30px; }
.dgcase-row + .dgcase-row, .dgcase-row + .dgcase-stack,
.dgcase-stack + .dgcase-row, .dgcase-stack + .dgcase-stack { margin-top: 60px; }
.dgcase-vis--center { align-self: center; }
.dgcase-text { max-width: 700px; }
.dgcase-stack > .dgcase-text { max-width: 820px; }
/* Текст для длинного чтения — 18 px, ступень шкалы body-read (владелец, 08.10.2026).
   16 — нижняя граница; при 18 в колонке 820 px около 75 знаков, рядом со схемой — 60.
   На телефоне 16 (правило ниже) */
.dgcase .dgcase-text p, .dgcase .dgcase-text li { font-size: 18px; }
/* Схема под коротким текстом — шириной текста. Рядом с текстом в 3–5 строк
   высокая схема оставляла пустоту слева (владелец, 07.10.2026: «что за дырка?»).
   Правило: схема выше текста рядом больше чем на ~200 px — она под текстом */
.dgcase-stack > .dgcase-vis { max-width: 820px; }
.dgcase-stack > .dgcase-text--cols { max-width: none; columns: 2; column-gap: 50px; }
.dgcase-text--cols p { break-inside: avoid; }
.dgcase-list { margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.dgcase-list li { margin-bottom: 10px; }
.dgcase-list li::marker { color: var(--ink); }

.dgcase-box {
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: 30px;
	background: var(--paper);
}
.dgcase .dgcase-chart-h { margin: 0 0 15px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--muted); }
.dgcase-chart { position: relative; }
.dgcase-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- первый экран ---------- */

.dgcase-hero { padding: 25px 0 90px; background: var(--ink); color: var(--paper); overflow: hidden; }
.dgcase-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 50px; align-items: center; }
/* 40, а не 52: длинное «высококонкурентном» при 52 шире колонки героя */
.dgcase .dgcase-hero h1 { font-size: 40px; }
.dgcase-crumbs { margin-bottom: 50px; font-size: 14px; line-height: 1.4; color: var(--muted-dark); }
.dgcase-crumbs a { color: var(--muted-dark); text-decoration: none; }
.dgcase-crumbs a:hover { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; }
.dgcase-crumbs i { margin: 0 8px; font-style: normal; }
.dgcase .dgcase-lead { max-width: 640px; margin-bottom: 40px; font-size: 20px; color: var(--muted-dark); }
.dgcase-meta { display: flex; flex-wrap: wrap; gap: 15px 40px; margin: 0; }
.dgcase-meta div { margin: 0; }
.dgcase-meta dt { margin: 0 0 5px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--muted-dark); }
.dgcase-meta dd { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; }

.dgcase-hero-art { position: relative; padding: 70px 0 30px; }
.dgcase-hero-art--plain { padding: 0; }

/* первый экран как обложка кейса: значок «1 место» с лучиками, плитка Алисы, искра
   (метка hero_art с hero.art = "medal"). Раскладка — с обложки кейса страховой
   компании, в процентах от квадрата; лучики на тёмном фоне — белые, как на тёмных
   слайдах той же серии. Размер цифры — от ширины квадрата (cqw). */
.dgcase-hero-art--medal { padding: 0; }
.dgcase-medal-wrap { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.dgcase-medal {
	position: absolute; left: 14.3%; top: 14.3%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 71.4%; height: 71.4%; border-radius: 50%; background: var(--accent); color: var(--ink); transform: rotate(-8deg);
}
.dgcase-medal b { font-family: var(--display); font-size: 35cqw; font-weight: 700; line-height: .85; }
.dgcase-medal span { margin-top: 2.4cqw; font-family: var(--text); font-size: 9.5cqw; font-weight: 800; line-height: 1; }
.dgcase-medal-rays { position: absolute; z-index: 1; height: auto; filter: brightness(0) invert(1); pointer-events: none; }
.dgcase-medal-rays--l { left: 1.2%; top: 3.1%; width: 28%; transform: rotate(-30deg); }
.dgcase-medal-rays--r { left: 76%; top: 6.9%; width: 24.5%; transform: rotate(40deg) scaleX(-1); }
.dgcase-medal-alice {
	position: absolute; left: 2.9%; top: 72%; z-index: 3; display: flex; align-items: center; justify-content: center;
	width: 18.1%; aspect-ratio: 1; border-radius: 22%; background: var(--paper); box-shadow: 1.4cqw 1.4cqw 0 var(--accent); transform: rotate(-12deg);
}
.dgcase-medal-alice img { width: 72%; height: auto; }
.dgcase-medal-sparkle { position: absolute; left: 81%; top: 69%; z-index: 3; width: 15%; height: auto; transform: rotate(10deg); pointer-events: none; }

/* данные о клиенте под первым экраном, на светлом */
.dgcase-metabar { padding: 30px 0; border-bottom: 1px solid var(--line); }
.dgcase-metabar .dgcase-meta { gap: 15px 60px; }
.dgcase-metabar .dgcase-meta dt { color: var(--muted); }
.dgcase-metabar .dgcase-meta dd { color: var(--ink); }
.dgcase-deco { position: absolute; display: block; pointer-events: none; }
.dgcase-deco--tiles { top: 0; left: -10px; width: 150px; transform: rotate(-8deg); }
.dgcase-deco--pill { right: -40px; bottom: -40px; width: 130px; transform: rotate(12deg); }
.dgcase .dgcase-ask {
	position: relative; z-index: 2; width: fit-content; margin: 0 0 20px auto;
	padding: 14px 22px; border-radius: 26px 26px 6px 26px;
	background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 700;
}
.dgcase-answer { position: relative; z-index: 1; padding: 30px; border-radius: 30px; background: var(--paper); color: var(--ink); }
.dgcase .dgcase-answer-h { margin-bottom: 20px; font-size: 16px; font-weight: 600; }
.dgcase-answer li { position: relative; display: flex; align-items: center; gap: 16px; height: 56px; }
.dgcase-answer-n { flex: 0 0 26px; font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; color: var(--muted-dark); }
.dgcase-answer li.is-client .dgcase-answer-n { color: var(--ink); }
.dgcase-answer-mask { width: 34%; height: 34px; border-radius: 6px; background: var(--ink); }
.dgcase-answer-pill { padding: 7px 16px; border-radius: 50px; background: var(--accent); font-size: 14px; font-weight: 700; white-space: nowrap; }
.dgcase-answer-bar { width: var(--w); height: 20px; border-radius: 10px; background: var(--line); }
.dgcase-scribble { position: absolute; left: 30px; right: -12px; top: -4px; width: calc(100% - 18px); height: 64px; overflow: visible; }
/* та же карточка внутри рамки .dgcase-choice-card — для «Проблемы» */
/* двойной класс: иначе мобильный отступ .dgcase-answer ниже по файлу перебивает */
.dgcase-answer.dgcase-answer--plain { padding: 0; border-radius: 0; }

/* первый экран кейса только про Алису: плитка Алисы и значок «1 место» вместо плиток нейросетей и таблетки */
.dgcase-deco--alice {
	top: 6px; left: 0; display: flex; align-items: center; justify-content: center;
	width: 100px; height: 100px; border-radius: 24px; background: var(--paper);
	box-shadow: 6px 6px 0 var(--accent); transform: rotate(-8deg);
}
.dgcase-deco--alice img { width: 72px; height: 72px; }
.dgcase-badge {
	z-index: 3; right: -26px; bottom: -36px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 124px; height: 124px; border-radius: 50%; background: var(--accent); color: var(--ink);
	font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 1; transform: rotate(-8deg);
}
.dgcase-badge b { font-size: 56px; line-height: .9; }

/* ---------- экран ответа нейросети (нарисован, не скриншот) ---------- */

/* .dgcase-qa — та же рамка экрана, внутри карточка ответа .dgcase-answer (блок answer) */
.dgcase-choice, .dgcase-qa { width: 100%; max-width: 500px; margin-left: auto; }
.dgcase .dgcase-choice .dgcase-ask, .dgcase .dgcase-qa .dgcase-ask { background: var(--surface); }
.dgcase-choice-card, .dgcase-qa-card { padding: 28px; border: 6px solid var(--ink); border-radius: 36px; background: var(--paper); }
.dgcase .dgcase-choice-h { margin-bottom: 18px; font-weight: 700; }
.dgcase-choice li { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 14px; padding: 18px; border: 2px solid var(--line); border-radius: 20px; }
.dgcase-choice-img { flex: none; width: 60px; height: auto; }
.dgcase-choice li b { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.dgcase-choice li span { display: block; font-size: 14px; color: var(--muted); }
.dgcase .dgcase-choice li .dgcase-choice-btn { display: inline-block; margin-top: 8px; padding: 5px 14px; border-radius: 50px; background: var(--accent); font-size: 14px; font-weight: 700; color: var(--ink); }
.dgcase .dgcase-choice li .dgcase-choice-btn.is-in { background: var(--ink); color: var(--accent); }
.dgcase-choice-arrow { position: absolute; right: -34px; top: 18px; width: 84px; height: auto; pointer-events: none; }
.dgcase .dgcase-choice-note { margin: 8px 0 0; font-size: 14px; font-weight: 600; text-align: center; color: var(--muted); }

/* ---------- кнопка ---------- */

/* через .dgcase: иначе общий отступ абзацев .dgcase p обнуляет верхний */
.dgcase .dgcase-cta-row { margin-top: 40px; }
.dgcase a.dgcase-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 60px; padding: 0 40px; border-radius: 50px;
	background: var(--accent); color: var(--ink);
	font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2;
	text-decoration: none; transition: background-color .2s, color .2s;
}
.dgcase a.dgcase-btn:hover, .dgcase a.dgcase-btn:focus-visible { background: var(--ink); color: var(--accent); }
.dgcase a.dgcase-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* CTA-блок вместо одиночной кнопки (владелец, 08.10.2026: кнопка «скромненькая…
   не вписывается»). Тёмная плашка 30, текст — из согласованного текста формы,
   кнопка зелёная; наведение на тёмном — белая заливка (design-system.md, «Кнопка») */
.dgcase-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	margin-top: 40px; padding: 45px 50px; border-radius: 30px; background: var(--ink); color: var(--paper);
}
.dgcase .dgcase-cta-h { margin: 0 0 10px; font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1.25; color: var(--paper); text-wrap: balance; }
.dgcase .dgcase-cta-text { margin: 0; font-size: 18px; color: var(--muted-dark); }
.dgcase-cta a.dgcase-btn { flex: none; }
.dgcase .dgcase-cta a.dgcase-btn:hover, .dgcase .dgcase-cta a.dgcase-btn:focus-visible { background: var(--paper); color: var(--ink); }
.dgcase .dgcase-cta a.dgcase-btn:focus-visible { outline-color: var(--accent); }
.dgcase .dgcase-btn-sm {
	display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 22px;
	border: 1.5px solid var(--ink); border-radius: 50px; background: var(--paper); color: var(--ink);
	font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
	transition: background-color .2s, color .2s;
}
.dgcase .dgcase-btn-sm:hover { background: var(--ink); color: var(--accent); }
.dgcase .dgcase-btn-sm:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- цифры ---------- */

.dgcase-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dgcase-stats--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dgcase-stats--5 > * { grid-column: span 2; }
.dgcase-stats--5 > :nth-child(n+4) { grid-column: span 3; }
.dgcase-stat { padding: 30px; border-radius: 20px; background: var(--surface); }
.dgcase .dgcase-stat-big,
.dgcase .dgcase-fact-big { margin: 0 0 12px; font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.dgcase .dgcase-stat-text { margin: 0; }
/* четыре карточки (кейс 6803 с 07.10.2026): 2×2, число и подпись крупнее,
   первая — тёмная, за неё цепляется взгляд */
.dgcase-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dgcase-stats--4 .dgcase-stat { padding: 40px; }
.dgcase .dgcase-stats--4 .dgcase-stat-big { margin-bottom: 15px; font-size: 56px; }
.dgcase .dgcase-stats--4 .dgcase-stat-text { font-size: 20px; line-height: 1.4; }
.dgcase-stat--lead { background: var(--ink); color: var(--paper); }
.dgcase .dgcase-stat--lead .dgcase-stat-big { color: var(--accent); }
.dgcase .dgcase-stat-note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.dgcase .dgcase-stat--lead .dgcase-stat-note { color: var(--muted-dark); }
.dgcase-facts { display: grid; gap: 30px; }
.dgcase-facts--row { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; margin-top: 30px; }
.dgcase-facts--row .dgcase-fact-big { font-size: 32px; }
.dgcase .dgcase-fact-text { margin: 0; color: var(--muted); }
.dgcase-facts > div { padding-top: 15px; border-top: 1px solid var(--line); }

/* ---------- задача ---------- */

.dgcase-task { padding: 50px; border: 2px solid var(--accent); border-radius: 30px; }
.dgcase .dgcase-pill {
	display: inline-block; margin-bottom: 30px; padding: 10px 22px;
	border: 1.5px solid var(--ink); border-radius: 50px; font-size: 16px;
}
.dgcase-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 40px; }
.dgcase-scale-item {
	display: inline-flex; flex-direction: column; padding: 12px 14px;
	border-radius: 20px; background: var(--surface); font-size: 13px; line-height: 1.3; color: var(--muted);
}
.dgcase-scale-item b { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.dgcase-scale-item--total { background: var(--accent); }
.dgcase-scale-eq { display: flex; align-items: center; gap: 10px; }
/* формула под абзацем о масштабе — крупно, на серой плашке во всю ширину (08.10.2026) */
.dgcase-stack > .dgcase-scale { margin-bottom: 0; padding: 30px; border-radius: 20px; background: var(--surface); }
.dgcase-stack > .dgcase-scale .dgcase-scale-item:not(.dgcase-scale-item--total) { background: var(--paper); }
.dgcase-scale-note { max-width: 180px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.dgcase-scale-item--total b { font-size: 18px; white-space: nowrap; }
.dgcase-scale-op { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--muted); }

.dgcase-hbars li, .dgcase-progress li {
	display: grid; grid-template-columns: 130px minmax(0, 1fr) 72px; align-items: center; gap: 15px;
	padding: 8px 0; font-size: 15px;
}
.dgcase-hbar-l { font-weight: 600; }
.dgcase-hbar-track { position: relative; height: 16px; border-radius: 8px; background: var(--line); }
.dgcase-hbar { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 8px; background: var(--muted-dark); }
.dgcase-hbars li.is-hl .dgcase-hbar, .dgcase-progress li.is-hl .dgcase-hbar { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dgcase-hbars li.is-hl .dgcase-hbar-l { font-weight: 800; }
.dgcase-hbar-v { font-family: var(--display); font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
.dgcase-progress li { grid-template-columns: minmax(0, 1fr) 60px; row-gap: 6px; }
.dgcase-progress-l { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.dgcase-progress li.is-hl .dgcase-progress-l { color: var(--ink); font-weight: 700; }

/* ответы клетками: зелёная — бренд назван первым; досчёт — dgcase.js */
.dgcase-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin-bottom: 15px; }
.dgcase-dots li {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
	border: 2px solid var(--muted-dark); border-radius: 14px 14px 14px 4px; background: var(--surface);
	font-size: 12px; font-weight: 700; line-height: 1; color: var(--muted);
}
.dgcase-dots li.is-on {
	border-color: var(--ink); background: var(--accent); color: var(--ink); font-family: var(--display); font-size: 18px;
	transition: background-color .3s, border-color .3s, color .3s; transition-delay: calc(var(--i) * 90ms);
}
.dgcase-dots.is-wait li.is-on { border-color: var(--muted-dark); background: var(--surface); color: transparent; }
.dgcase-dots-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); }
.dgcase-dots-legend li { display: flex; align-items: center; gap: 8px; }
.dgcase-dots-legend span { width: 18px; height: 14px; border: 2px solid var(--muted-dark); border-radius: 6px 6px 6px 2px; background: var(--surface); }
.dgcase-dots-legend span.is-on { border-color: var(--ink); background: var(--accent); }

/* «было → стало» на шкале 0–100%: серая точка — было, зелёная — стало (у плана — контур) */
.dgcase-db-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.dgcase-db-legend li { display: flex; align-items: center; gap: 8px; }
.dgcase-db li { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 15px; padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
.dgcase-db li:last-child { border-bottom: 0; }
.dgcase-db-l { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dgcase-db li.is-total .dgcase-db-l { font-weight: 800; }
.dgcase-db-track { position: relative; height: 28px; margin-right: 56px; background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 2px no-repeat; }
.dgcase-db-seg { position: absolute; top: 50%; left: var(--a); width: calc(var(--b) - var(--a)); height: 4px; margin-top: -2px; border-radius: 2px; background: var(--ink); }
.dgcase-db-track .dgcase-db-a, .dgcase-db-track .dgcase-db-b { position: absolute; top: 50%; left: var(--x); transform: translate(-50%, -50%); }
.dgcase-db-a, .dgcase-db-b { display: inline-block; flex: none; border: 2px solid var(--ink); border-radius: 50%; }
.dgcase-db-a { width: 14px; height: 14px; background: var(--line); }
.dgcase-db-b { width: 20px; height: 20px; background: var(--accent); }
.dgcase-db--plan .dgcase-db-b, .dgcase-db-legend:has(+ .dgcase-db--plan) .dgcase-db-b { border-style: dashed; background: var(--paper); }
.dgcase-db-track i { position: absolute; font-style: normal; white-space: nowrap; }
.dgcase-db-a i { bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--muted); }
.dgcase-db-b i { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); }

/* план и факт по месяцам: столбец — факт, пунктир — план; строка без плана — старт, серым */
.dgcase-pf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-top: 34px; }
.dgcase-pf-col { position: relative; display: block; height: 230px; }
.dgcase-pf-bar { position: absolute; left: 18%; right: 18%; bottom: 0; height: var(--f); border-radius: 10px 10px 0 0; background: var(--accent); }
.dgcase-pf li.is-start .dgcase-pf-bar { background: var(--muted-dark); }
.dgcase-pf-bar b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font-family: var(--display); font-size: 20px; font-weight: 700; white-space: nowrap; }
.dgcase-pf-plan { position: absolute; left: 6%; right: 6%; bottom: var(--p); border-top: 3px dashed var(--ink); }
.dgcase-pf-plan span { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.dgcase-pf-l { display: block; padding: 10px 4px 0; border-top: 2px solid var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }
.dgcase-pf li.is-start .dgcase-pf-l { color: var(--muted); }

/* ---------- решение: этапы ---------- */

.dgcase-step { margin-top: 30px; padding: 50px; border-radius: 30px; background: var(--paper); }
.dgcase-step:first-of-type { margin-top: 0; }
.dgcase-step-head { display: flex; align-items: flex-start; gap: 20px; max-width: 820px; margin-bottom: 35px; }
.dgcase-num {
	flex: 0 0 56px; display: flex; align-items: center; justify-content: center; height: 56px;
	border-radius: 10px; background: var(--accent);
	font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1; color: var(--ink);
}
.dgcase .dgcase-step-head h3 { margin: 0; padding-top: 12px; }
/* часть этапа со своим подзаголовком — когда в этапе несколько тем */
.dgcase-sub { margin-top: 60px; padding-top: 50px; border-top: 1px solid var(--line); }
.dgcase .dgcase-sub h4 { max-width: 820px; margin: 0 0 30px; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: 0; text-transform: none; }
.dgcase-step .dgcase-box { border-color: var(--line); }

/* команда */
.dgcase-team { display: grid; gap: 25px; }
.dgcase-team-row { padding: 25px; border-radius: 20px; background: var(--surface); }
.dgcase .dgcase-team-n { margin: 0; font-size: 15px; color: var(--muted); }
.dgcase-team-n b { font-family: var(--display); font-size: 36px; font-weight: 700; line-height: 1; color: var(--ink); margin-right: 6px; }
.dgcase .dgcase-team-l { margin: 4px 0 15px; font-size: 14px; font-weight: 700; }
.dgcase-team ul { display: flex; flex-wrap: wrap; gap: 8px; }
.dgcase-team li { padding: 7px 14px; border: 1.5px solid var(--ink); border-radius: 50px; background: var(--paper); font-size: 14px; font-weight: 600; line-height: 1.3; }
.dgcase-team li.is-old { border-color: var(--line); color: var(--muted); }
.dgcase-team li.is-new { border-color: var(--accent); background: var(--accent); }

/* конвейер */
.dgcase-conv { overflow-x: auto; }
.dgcase-conv-grid { display: grid; gap: 10px; min-width: 500px; }
.dgcase-conv-head, .dgcase-conv-row { display: grid; grid-template-columns: 62px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; }
.dgcase-conv-role { padding: 14px 10px; border-radius: 20px; background: var(--surface); text-align: center; }
.dgcase-conv-role b { display: block; font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.25; }
.dgcase-conv-role span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.dgcase-conv-step { font-size: 14px; font-weight: 800; }
.dgcase-conv-row { transition: opacity .3s; }
.dgcase-conv-row.is-future { opacity: .15; }
.dgcase-conv-uc {
	display: block; padding: 10px 6px; border: 2px solid var(--ink); border-radius: 50px; background: var(--paper);
	font-family: var(--display); font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap;
}
.dgcase-conv-uc.is-first { background: var(--ink); color: var(--paper); }
.dgcase-conv-ctrl { display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.dgcase-conv-ctrl[hidden] { display: none; }
.dgcase-conv-state { font-size: 14px; color: var(--muted); }

/* схема «Работа с use-кейсом» */
.dgcase-flow { padding: 35px; border: 1px solid var(--line); border-radius: 30px; }
.dgcase-flow-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 35px; }
.dgcase-flow-stage { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: var(--accent); font-size: 14px; line-height: 1.45; }
.dgcase-flow-stage.is-last { background: var(--ink); color: var(--paper); }
.dgcase-flow-n { font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1; }
.dgcase-flow-stage b { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.2; }
.dgcase-par { overflow-x: auto; }
.dgcase .dgcase-par-h { margin-bottom: 15px; font-size: 15px; }
.dgcase-par-row { display: grid; grid-template-columns: 100px repeat(6, minmax(56px, 1fr)); gap: 6px; align-items: center; min-width: 560px; margin-bottom: 6px; }
.dgcase-par-head span { font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.dgcase-par-l { font-size: 14px; font-weight: 700; }
.dgcase-par-seg { display: block; height: 32px; border-radius: 8px; background: var(--accent); font-family: var(--display); font-size: 13px; font-weight: 600; line-height: 32px; text-align: center; }
.dgcase-par-seg.is-hold { background: var(--ink); color: var(--paper); }
.dgcase .dgcase-par-note { margin: 15px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- таблицы ---------- */

.dgcase-table { width: 100%; border-collapse: collapse; margin: 0; border: 0; background: transparent; font-size: 14px; line-height: 1.35; color: var(--ink); }
.dgcase .dgcase-table tr, .dgcase .dgcase-table tbody, .dgcase .dgcase-table thead { background: transparent; border: 0; }
.dgcase .dgcase-table th, .dgcase .dgcase-table td { padding: 11px 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; vertical-align: middle; }
.dgcase .dgcase-table thead th { padding-top: 0; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.dgcase .dgcase-table tbody tr:last-child > * { border-bottom: 0; }
.dgcase .dgcase-table tbody tr:hover > * { background: var(--surface); }
.dgcase .dgcase-table tbody th { font-weight: 700; }
.dgcase-td-title { min-width: 240px; font-weight: 600; }
.dgcase-td-num { text-align: center; }
.dgcase-td-muted { color: var(--muted); }
.dgcase-site { display: inline-block; padding: 4px 12px; border-radius: 50px; background: var(--surface); font-size: 13px; font-weight: 700; white-space: nowrap; }
.dgcase-pos { display: inline-block; min-width: 54px; padding: 5px 10px; border-radius: 50px; background: var(--surface); color: var(--muted); font-family: var(--display); font-size: 13px; font-weight: 700; text-align: center; }
.dgcase-pos.is-top { background: var(--accent); color: var(--ink); }

.dgcase-table--heat th:not(:first-child), .dgcase-table--heat td { text-align: center; }
.dgcase-table--heat tbody th { min-width: 190px; font-weight: 600; }
.dgcase-table--heat tr.is-total th { font-weight: 800; }
.dgcase-heat {
	display: block; min-width: 50px; padding: 7px 4px; border-radius: 8px;
	background: color-mix(in srgb, var(--accent) calc(var(--p) * 100%), var(--paper));
	font-family: var(--display); font-size: 13px; font-weight: 600;
}
.dgcase-table--heat tr.is-total .dgcase-heat { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* полоса 110 px, доля --w от 0 до 1 задаётся в разметке */
.dgcase-mini { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.dgcase-mini::before { content: ""; width: 110px; height: 12px; border-radius: 6px; background: var(--line); }
.dgcase-mini-bar { position: absolute; left: 0; top: 50%; width: calc(110px * var(--w)); height: 12px; margin-top: -6px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dgcase-mini b { font-family: var(--display); font-size: 13px; }
.dgcase-dec { display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.dgcase-dec--ok { background: var(--ink); color: var(--paper); }
.dgcase-dec--agg { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dgcase-dec--no { background: var(--surface); color: var(--muted); }

.dgcase-table--ranks tbody th { min-width: 170px; font-weight: 600; }
.dgcase .dgcase-table--ranks thead th { white-space: normal; }
.dgcase .dgcase-table--ranks th, .dgcase .dgcase-table--ranks td { padding-left: 6px; padding-right: 6px; }
.dgcase-table--ranks td, .dgcase-table--ranks thead th:not(:first-child) { text-align: center; }
.dgcase-rank {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px;
	border-radius: 8px; font-family: var(--display); font-size: 13px; font-weight: 700;
}
.dgcase-rank--1 { background: var(--accent); }
.dgcase-rank--top { background: color-mix(in srgb, var(--accent) 35%, var(--paper)); }
.dgcase-rank--low { background: var(--surface); color: var(--muted); }
.dgcase-rank--none { color: var(--muted-dark); }
.dgcase-rank--na { border: 1.5px dashed var(--muted-dark); }
.dgcase-rank-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.dgcase-rank-legend li { display: flex; align-items: center; gap: 8px; }
/* группа строк: заголовок над первой строкой группы */
.dgcase .dgcase-table--ranks tr.is-group th { padding: 18px 6px 4px; border-bottom: 0; font-family: var(--display); font-size: 14px; font-weight: 600; }
.dgcase .dgcase-table--ranks tbody tr:first-child.is-group th { padding-top: 6px; }
.dgcase .dgcase-table--ranks tbody tr.is-group:hover > * { background: transparent; }
/* места по датам: колонок много, ячейки уже */
.dgcase .dgcase-table--dates th, .dgcase .dgcase-table--dates td { padding-left: 3px; padding-right: 3px; }
.dgcase .dgcase-table--dates thead th { font-size: 12px; }
.dgcase-table--dates tbody th { min-width: 130px; }
.dgcase-table--dates .dgcase-rank { width: 34px; }
/* на телефоне таблица листается вбок — подпись строки остаётся на месте */
.dgcase .dgcase-table--dates thead th:first-child, .dgcase .dgcase-table--dates tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.dgcase .dgcase-table--dates tbody tr:hover th[scope="row"] { background: var(--surface); }
.dgcase-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- вкладки ---------- */

/* скругление 24, а не 50: в узкой колонке кнопки уходят во второй ряд,
   и «таблетка» срезала их углы — кнопки торчали поверх фона (владелец, 07.10.2026) */
.dgcase-tablist { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 25px; padding: 4px; border-radius: 24px; background: var(--surface); }
.dgcase .dgcase-tablist button {
	min-height: 40px; margin: 0; padding: 0 18px; border: 0; border-radius: 50px;
	background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
	transition: background-color .2s, color .2s;
}
.dgcase .dgcase-tablist button:hover { background: var(--paper); }
.dgcase .dgcase-tablist button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.dgcase .dgcase-tablist button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dgcase-tabs:not(.is-ready) .dgcase-tablist { display: none; }
.dgcase-tabs.is-ready .dgcase-panel-h { display: none; }
.dgcase .dgcase-panel-h { margin: 25px 0 12px; font-family: var(--display); font-size: 16px; font-weight: 600; }
.dgcase-panel[hidden] { display: none; }

/* ---------- сравнение источников ---------- */

.dgcase .dgcase-verdict { margin-bottom: 20px; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.3; }
.dgcase-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.dgcase-ans { padding: 25px; border: 1px solid var(--line); border-radius: 20px; }
.dgcase .dgcase-ans-q {
	width: fit-content; max-width: 100%; margin: 0 0 20px auto; padding: 10px 18px;
	border-radius: 20px 20px 6px 20px; background: var(--surface); font-size: 14px; font-weight: 700;
}
.dgcase .dgcase-ans-h { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dgcase-src li {
	display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 12px 15px;
	border: 1.5px solid var(--line); border-radius: 12px; cursor: default; outline: none;
	transition: border-color .2s, background-color .2s;
}
.dgcase-src li:last-child { margin-bottom: 0; }
.dgcase-src-t { font-size: 14px; font-weight: 600; line-height: 1.35; }
.dgcase-src-d { font-size: 13px; color: var(--muted); }
.dgcase-src li.is-common { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.dgcase-src-same { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 50px; background: var(--accent); font-size: 12px; font-weight: 700; }
.dgcase-src li.is-lit { border-color: var(--ink); }
.dgcase .dgcase-shot-link { margin: 20px 0 0; font-size: 14px; }

/* ---------- выделенный абзац ---------- */

.dgcase-callout {
	display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: center;
	padding: 35px 40px; border-radius: 30px; background: var(--surface);
}
.dgcase .dgcase-callout p { margin: 0; font-size: 20px; line-height: 1.6; }
.dgcase-callout ul { display: grid; gap: 12px; }
.dgcase-callout li { padding: 18px 22px; border-radius: 20px; background: var(--paper); }
.dgcase-callout li b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1.2; }
.dgcase-callout li span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- цитата ---------- */

.dgcase-quote { margin: 0; padding: 40px 45px; border-radius: 30px; background: var(--ink); color: var(--paper); }
.dgcase-quote blockquote { margin: 0; padding: 0; border: 0; background: none; font-style: normal; quotes: none; }
.dgcase-quote blockquote::before { content: "«"; display: block; height: 48px; margin-bottom: 8px; font-family: var(--display); font-size: 64px; font-weight: 700; line-height: 1; color: var(--accent); }
.dgcase-quote blockquote::after { content: none; }
.dgcase .dgcase-quote blockquote p { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--paper); }
.dgcase-quote figcaption { display: flex; align-items: center; gap: 15px; margin-top: 28px; }
.dgcase .dgcase-quote-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.dgcase-quote figcaption b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.dgcase-quote figcaption b + span { display: block; font-size: 14px; line-height: 1.4; color: var(--muted-dark); }

/* ---------- ярлыки, сравнение «было / у нас» ---------- */

.dgcase-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dgcase-chips li { padding: 10px 18px; border: 1.5px solid var(--ink); border-radius: 50px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.dgcase-box--kb .dgcase-chips li:last-child { border-color: var(--accent); background: var(--accent); }
/* две группы ярлыков: на что повлиять нельзя (серым) и с чего начали (зелёным) */
.dgcase .dgcase-pick-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.dgcase-pick + .dgcase-pick { margin-top: 25px; }
.dgcase-pick--off .dgcase-chips li { border-color: var(--line); color: var(--muted); }
.dgcase-pick--on .dgcase-chips li { border-color: var(--accent); background: var(--accent); }
.dgcase-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dgcase-vs-card { padding: 30px; border: 2px solid var(--accent); border-radius: 20px; }
.dgcase-vs-card.is-muted { border-color: var(--line); }
.dgcase-vs-card.is-muted .dgcase-fact-big { color: var(--muted-dark); }
.dgcase .dgcase-vs .dgcase-fact-big { white-space: nowrap; }

/* Итог шага под текстом: площадки слева, крупные числа справа (07.10.2026).
   Раньше — колонка справа от текста, числа 32 px в три узкие колонки */
.dgcase-sumup {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 50px; align-items: center;
	padding: 40px 50px; border-radius: 30px; background: var(--surface);
}
.dgcase-sumup .dgcase-chips li { background: var(--paper); }
.dgcase-sumup .dgcase-facts--row { margin-top: 0; gap: 30px; }
.dgcase-sumup .dgcase-facts > div { padding-top: 0; border-top: 0; }
.dgcase .dgcase-sumup .dgcase-fact-big { margin-bottom: 6px; font-size: 40px; white-space: nowrap; }

/* два графика рядом вместо вкладок (доля голосов и видимость брендов) */
.dgcase-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.dgcase .dgcase-box-h { margin: 0 0 10px; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.3; }

/* ---------- пьедестал ---------- */

.dgcase-pod { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 25px; align-items: end; }
.dgcase-pod-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.dgcase-pod-cols li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dgcase-pod-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.dgcase-pod-v { margin: 2px 0 10px; font-family: var(--display); font-size: 22px; font-weight: 700; }
.dgcase-pod-step {
	display: flex; align-items: flex-start; justify-content: center; width: 100%; padding-top: 12px;
	border-radius: 16px 16px 0 0; background: var(--line);
	font-family: var(--display); font-size: 36px; font-weight: 700; line-height: 1; color: var(--muted);
}
.dgcase-pod-1 .dgcase-pod-step { height: 170px; background: var(--accent); color: var(--ink); }
.dgcase-pod-2 .dgcase-pod-step { height: 125px; }
.dgcase-pod-3 .dgcase-pod-step { height: 95px; }
.dgcase-pod-rest { font-size: 14px; color: var(--muted); }
.dgcase .dgcase-pod-rest p { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.dgcase-pod-rest li { margin-bottom: 4px; }
/* в узкой колонке «Дальше» не помещается сбоку — уходит под подиум строкой */
.dgcase-chart--pod { container-type: inline-size; }
@container (max-width: 480px) {
	.dgcase-pod { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.dgcase-pod-rest ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
	.dgcase-pod-rest li { margin-bottom: 0; }
}

/* ---------- графики ---------- */

.dgcase .dgcase-line-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 5px 15px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.dgcase-line-h b { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink); }
.dgcase-line-h strong { color: var(--ink); }
.dgcase-line { display: block; width: 100%; height: auto; overflow: visible; }
.dgcase-grid { stroke: var(--line); stroke-width: 1; }
.dgcase-axis { font-family: var(--text); font-size: 12px; fill: var(--muted); }
.dgcase-area { fill: var(--accent); fill-opacity: .45; }
.dgcase-stroke { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.dgcase-pt { cursor: pointer; outline: none; }
.dgcase-pt-hit { fill: transparent; }
.dgcase-pt-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; transition: r .15s; }
.dgcase-pt.is-last .dgcase-pt-dot { fill: var(--ink); }
.dgcase-pt:hover .dgcase-pt-dot, .dgcase-pt:focus-visible .dgcase-pt-dot, .dgcase-pt.is-on .dgcase-pt-dot { r: 8; fill: var(--accent); }
.dgcase-val { font-family: var(--display); font-size: 20px; font-weight: 700; fill: var(--ink); }
.dgcase-tip {
	position: absolute; z-index: 5; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--paper);
	font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; pointer-events: none;
	transform: translate(-50%, calc(-100% - 12px));
}

.dgcase-vbars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; height: 260px; }
.dgcase-vbars li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.dgcase-vbar-v { font-family: var(--display); font-size: 13px; font-weight: 700; white-space: nowrap; }
.dgcase-vbar { width: 100%; max-width: 56px; height: calc(var(--h) * .72); margin: 6px 0 8px; border-radius: 8px 8px 0 0; background: var(--accent); transition: background-color .2s; }
.dgcase-vbars li:hover .dgcase-vbar { background: var(--ink); }
.dgcase-vbar-l { font-size: 12px; color: var(--muted); }

/* ---------- результаты ---------- */

.dgcase-note { margin-bottom: 20px; padding: 40px 50px; border-radius: 30px; background: var(--surface); }
/* врезка сразу под ключевыми результатами, а не в начале «Результатов» */
.dgcase-stats + .dgcase-note { margin: 20px 0 0; }
.dgcase-in > h2 + .dgcase-res { margin-top: 0; }
.dgcase .dgcase-note h3 { font-size: 20px; margin-bottom: 20px; }
/* заголовок слева, текст справа одной колонкой: в три колонки читать нельзя (владелец, 07.10.2026) */
.dgcase-note--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 50px; }
.dgcase .dgcase-note--split h3 { margin: 0; }
.dgcase-text--cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.dgcase-text--cols3 p { margin: 0; }
.dgcase-res { margin-top: 70px; }
.dgcase .dgcase-res > h3 { position: relative; max-width: 820px; margin-bottom: 30px; padding-left: 50px; }
.dgcase-res > h3::before {
	content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 32px; border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.6' fill='none' stroke='%23250C3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ---------- картинки и галереи ---------- */

.dgcase-fig { margin: 0; }
.dgcase-res .dgcase-fig, .dgcase-res .dgcase-gal, .dgcase-step .dgcase-gal, .dgcase-step .dgcase-fig { margin-top: 40px; }
.dgcase-fig img, .dgcase-slide img { display: block; width: 100%; border: 1px solid var(--line); border-radius: 20px; }
.dgcase-fig a, .dgcase-slide a { display: block; text-decoration: none; cursor: zoom-in; }
.dgcase-cap { margin: 15px 0 0; max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.dgcase .dgcase-cap { margin: 15px 0 0; font-size: 14px; color: var(--muted); }
.dgcase-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 20px; outline-offset: 4px; }
.dgcase-track::-webkit-scrollbar { display: none; }
.dgcase-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.dgcase-gal-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 15px; }
.dgcase .dgcase-gal-bar .dgcase-cap { margin: 0; }
.dgcase-nav { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.dgcase .dgcase-nav button {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0;
	border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); line-height: 1; cursor: pointer;
	transition: background-color .2s, color .2s;
}
.dgcase .dgcase-nav button:hover { background: var(--ink); color: var(--accent); }
.dgcase .dgcase-nav button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dgcase .dgcase-nav button:disabled { opacity: .35; cursor: default; background: var(--paper); color: var(--ink); }
.dgcase-nav svg { width: 18px; height: 18px; }
.dgcase-count { min-width: 52px; font-family: var(--display); font-size: 14px; font-weight: 600; text-align: center; }

.dgcase-lb { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.dgcase-lb::backdrop { background: rgba(23, 7, 33, .92); }
.dgcase-lb img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: calc(100vw - 40px); max-height: calc(100vh - 100px); border-radius: 12px; }
.dgcase .dgcase-lb button {
	position: absolute; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
	background: var(--paper); color: var(--ink); cursor: pointer;
}
.dgcase .dgcase-lb button:hover { background: var(--accent); }
.dgcase-lb svg { width: 20px; height: 20px; }

/* ---------- похожие кейсы ---------- */

.dgcase-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.dgcase a.dgcase-card {
	display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--accent); border-radius: 20px;
	background: var(--paper); color: var(--ink); text-decoration: none; transition: transform .25s;
}
.dgcase a.dgcase-card:hover { transform: translateY(-4px); }
.dgcase-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.dgcase-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dgcase-tags { position: absolute; top: 15px; left: 15px; display: flex; flex-wrap: wrap; gap: 5px; }
.dgcase-tags span { padding: 5px 12px; border-radius: 50px; background: var(--paper); font-size: 12px; line-height: 1.2; }
.dgcase-card-body { padding: 20px 25px 25px; }
.dgcase .dgcase-card-co { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.dgcase .dgcase-card h3 { margin: 0; font-size: 20px; }

/* ---------- форма заявки ---------- */

.dgcase-form { padding: 80px 0; background: var(--ink); color: var(--paper); scroll-margin-top: 90px; }
.dgcase-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.dgcase .dgcase-form h2 { margin-bottom: 25px; color: var(--accent); }
.dgcase-form-art { display: block; width: 100%; max-width: 420px; margin-top: 40px; }
.dgcase-form .wpcf7 form { margin: 0; }
.dgcase-form .wpcf7 .row { display: block; margin: 0; }
.dgcase-form .wpcf7 [class*="col-"] { width: 100%; max-width: none; flex: none; padding: 0; }
.dgcase .dgcase-form .wpcf7 p { margin: 0 0 15px; }
.dgcase-form .wpcf7-form-control-wrap { display: block; }
.dgcase-form .wpcf7 input[type="text"], .dgcase-form .wpcf7 input[type="email"], .dgcase-form .wpcf7 input[type="tel"],
.dgcase-form .wpcf7 input[type="url"], .dgcase-form .wpcf7 textarea {
	display: block; width: 100%; height: 60px; margin: 0; padding: 0 25px;
	border: 2px solid var(--accent); border-radius: 10px; background: var(--paper); box-shadow: none; outline: none;
	font-family: var(--text); font-size: 16px; font-weight: 400; color: var(--ink);
}
.dgcase-form .wpcf7 textarea { height: 120px; padding: 18px 25px; resize: vertical; }
.dgcase-form .wpcf7 input::placeholder, .dgcase-form .wpcf7 textarea::placeholder { color: var(--muted); opacity: 1; }
.dgcase-form .wpcf7 input:focus, .dgcase-form .wpcf7 textarea:focus { border-color: var(--paper); }
.dgcase-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.dgcase-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--muted-dark); cursor: pointer; }
.dgcase-form .wpcf7 input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.dgcase-form .wpcf7 input[type="submit"] {
	display: block; width: 100%; height: 60px; margin: 5px 0 0; padding: 0 30px; border: 0; border-radius: 50px;
	background: var(--accent); box-shadow: none; color: var(--ink);
	font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer;
	transition: background-color .2s;
}
.dgcase-form .wpcf7 input[type="submit"]:hover, .dgcase-form .wpcf7 input[type="submit"]:focus-visible { background: var(--paper); }
.dgcase-form .wpcf7-not-valid-tip { margin-top: 5px; font-size: 13px; color: var(--paper); }
.dgcase-form .wpcf7 form .wpcf7-response-output { margin: 15px 0 0; padding: 12px 20px; border: 1.5px solid var(--accent); border-radius: 10px; font-size: 14px; color: var(--paper); }

/* ---------- колонка чтения по центру: .dgcase[data-layout="center"] ---------- */

/* Вариант А (владелец, 08.10.2026; пока только кейс 6803 — «на одном сначала»).
   Заголовки, текст и узкие схемы шагов, «Задачи» и «Результатов» — колонкой
   820 px по центру, как в лонгридах: пустота по бокам одинаковая и читается
   как поля, а не как дыра справа. Таблицы, слайды, формула, пара графиков,
   плашки — на всю ширину. Схема рядом с текстом в шагах уходит под текст.
   «Клиент» и «Проблема» остаются в две колонки. Включается атрибутом,
   а не вторым классом: inc/dg-cases.php ищет в записи ровно class="dgcase" */
.dgcase[data-layout="center"] .dgcase-step-head,
.dgcase[data-layout="center"] .dgcase-sub h4,
.dgcase[data-layout="center"] .dgcase-res > h3,
.dgcase[data-layout="center"] .dgcase-task > h2,
.dgcase[data-layout="center"] .dgcase-stack > .dgcase-text,
.dgcase[data-layout="center"] .dgcase-stack > .dgcase-vis { margin-left: auto; margin-right: auto; }
.dgcase[data-layout="center"] .dgcase-task > h2 { max-width: 820px; }
.dgcase[data-layout="center"] .dgcase-step .dgcase-row,
.dgcase[data-layout="center"] .dgcase-res .dgcase-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.dgcase[data-layout="center"] .dgcase-step .dgcase-row > *,
.dgcase[data-layout="center"] .dgcase-res .dgcase-row > * { width: 100%; max-width: 820px; margin-left: auto; margin-right: auto; }
/* кнопка «Хочу так же» — по центру колонки, а не у левого края (владелец, 08.10.2026) */
.dgcase[data-layout="center"] .dgcase-cta-row { text-align: center; }
/* Плашка UGC и конвейер — по ширине текста: во всю ширину они смотрелись
   слишком крупно (владелец, 08.10.2026). Плашка в колонке — площадки сверху,
   числа строкой под ними: три числа по 40 px рядом с площадками не помещаются */
.dgcase[data-layout="center"] .dgcase-stack > .dgcase-conv,
.dgcase[data-layout="center"] .dgcase-stack > .dgcase-sumup { max-width: 820px; margin-left: auto; margin-right: auto; }
.dgcase[data-layout="center"] .dgcase-stack > .dgcase-sumup { grid-template-columns: minmax(0, 1fr); gap: 30px; }
/* крупные факты под текстом шага — рядом, а не столбиком (шаг 3 страховой: «100%» и «топ-3») */
.dgcase[data-layout="center"] .dgcase-step .dgcase-facts { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* команда под текстом — «пилот» и «через пару месяцев» рядом, а не столбиком */
.dgcase[data-layout="center"] .dgcase-team { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: stretch; }

/* ---------- адаптив ---------- */

@media (max-width: 1024px) {
	.dgcase h1 { font-size: 40px; }
	.dgcase h2 { font-size: 32px; }
	.dgcase-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.dgcase-hero-art { max-width: 520px; }
	.dgcase-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.dgcase-callout { grid-template-columns: minmax(0, 1fr); gap: 25px; }
	.dgcase-text { max-width: 720px; }
	.dgcase-stack > .dgcase-text--cols { columns: 1; }
	.dgcase-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgcase-stats--5 > *, .dgcase-stats--5 > :nth-child(n+4) { grid-column: auto; }
	.dgcase-stats--5 > :first-child { grid-column: 1 / -1; }
	.dgcase-flow-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgcase-text--cols3 { grid-template-columns: minmax(0, 1fr); gap: 15px; }
	.dgcase-note--split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.dgcase-sumup { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.dgcase-pair { grid-template-columns: minmax(0, 1fr); }
	.dgcase-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgcase-form-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.dgcase-form-art { display: none; }
}

@media (max-width: 767px) {
	.dgcase-in { padding: 0 16px; }
	/* 25, а не 32 шкалы: «высококонкурентном» при 32 не помещается в 343 px */
	.dgcase h1, .dgcase .dgcase-hero h1 { font-size: 25px; overflow-wrap: break-word; }
	.dgcase h2 { font-size: 25px; margin-bottom: 25px; }
	.dgcase h3 { font-size: 20px; }
	.dgcase .dgcase-lead { font-size: 16px; }
	.dgcase .dgcase-text p, .dgcase .dgcase-text li { font-size: 16px; }
	.dgcase[data-layout="center"] .dgcase-team { grid-template-columns: minmax(0, 1fr); }
	.dgcase[data-layout="center"] .dgcase-step .dgcase-facts { grid-auto-flow: row; }
	.dgcase-cta { flex-direction: column; align-items: stretch; gap: 25px; padding: 30px 20px; border-radius: 20px; }
	.dgcase .dgcase-cta-h { font-size: 20px; }
	.dgcase .dgcase-cta-text { font-size: 16px; }
	.dgcase-band { padding: 60px 0; }
	.dgcase-band--tight { padding: 45px 0; }
	.dgcase-hero { padding-bottom: 60px; }
	.dgcase-crumbs { margin-bottom: 30px; }
	.dgcase-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dgcase-deco--tiles { width: 110px; }
	.dgcase-deco--pill { width: 90px; right: -16px; }
	.dgcase-deco--alice { width: 76px; height: 76px; border-radius: 18px; }
	.dgcase-medal-wrap { max-width: 300px; }
	.dgcase-deco--alice img { width: 54px; height: 54px; }
	.dgcase-badge { right: -10px; bottom: -30px; width: 92px; height: 92px; font-size: 12px; }
	.dgcase-badge b { font-size: 40px; }
	.dgcase-dots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.dgcase-db li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.dgcase-pf-col { height: 190px; }
	.dgcase-pf-bar { left: 12%; right: 12%; }
	.dgcase-pf-bar b { font-size: 14px; }
	.dgcase-pf-plan { left: 0; right: 0; }
	.dgcase-pf-plan span { font-size: 10px; }
	.dgcase-pf-l { font-size: 12px; }
	.dgcase-answer { padding: 22px; border-radius: 20px; }
	.dgcase-choice-card, .dgcase-qa-card { padding: 18px; border-width: 5px; border-radius: 26px; }
	.dgcase-choice-arrow { right: -8px; width: 64px; }
	.dgcase-stats { grid-template-columns: minmax(0, 1fr); }
	.dgcase .dgcase-stat-big, .dgcase .dgcase-fact-big { font-size: 32px; }
	.dgcase-stat, .dgcase-stats--4 .dgcase-stat { padding: 25px; }
	.dgcase .dgcase-stats--4 .dgcase-stat-big { margin-bottom: 10px; font-size: 36px; }
	.dgcase .dgcase-stats--4 .dgcase-stat-text { font-size: 18px; }
	.dgcase-task, .dgcase-step, .dgcase-note { padding: 30px 20px; border-radius: 20px; }
	.dgcase-box, .dgcase-flow { padding: 20px; border-radius: 20px; }
	.dgcase-num { flex-basis: 44px; height: 44px; font-size: 20px; }
	.dgcase .dgcase-step-head h3 { padding-top: 9px; }
	.dgcase-sub { margin-top: 40px; padding-top: 35px; }
	.dgcase-quote { padding: 30px 22px; border-radius: 20px; }
	.dgcase-callout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 25px 20px; border-radius: 20px; }
	.dgcase .dgcase-callout p { font-size: 16px; }
	.dgcase .dgcase-quote blockquote p { font-size: 18px; }
	.dgcase .dgcase-sub h4 { font-size: 18px; margin-bottom: 20px; }
	.dgcase .dgcase-res > h3 { padding-left: 44px; }
	.dgcase-res { margin-top: 50px; }
	.dgcase-flow-stages { grid-template-columns: minmax(0, 1fr); }
	.dgcase-hbars li { grid-template-columns: 100px minmax(0, 1fr) 60px; gap: 10px; }
	.dgcase-cmp-grid, .dgcase-vs { grid-template-columns: minmax(0, 1fr); }
	.dgcase-pod { grid-template-columns: minmax(0, 1fr); }
	.dgcase-facts--row { grid-auto-flow: row; }
	.dgcase-scale-eq { flex-wrap: wrap; flex-basis: 100%; }
	.dgcase-scale-note { flex-basis: 100%; max-width: none; }
	.dgcase-sumup { padding: 25px 20px; border-radius: 20px; }
	.dgcase-sumup .dgcase-facts--row { gap: 15px; }
	.dgcase .dgcase-sumup .dgcase-fact-big { font-size: 32px; }
	.dgcase-tablist { border-radius: 24px; }
	.dgcase-step .dgcase-box { padding: 0; border: 0; border-radius: 0; }
	.dgcase-ans { padding: 16px; }
	.dgcase-vbars { height: 220px; gap: 4px; }
	.dgcase-vbar-v { font-size: 10px; }
	.dgcase-fig img, .dgcase-slide img, .dgcase-track { border-radius: 12px; }
	.dgcase-gal-bar { flex-direction: column-reverse; }
	.dgcase-nav { margin-left: 0; }
	.dgcase-rel-grid { grid-template-columns: minmax(0, 1fr); }
	.dgcase-form { padding: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dgcase *, .dgcase *::before, .dgcase *::after { transition: none !important; }
}