/* ==================================================================
   Kelpie_v2 — Почему важно до начала работ, фронтенд
   «Закрытые» стили: блок изолирован от глобальных стилей сайта и темы.
   База зафиксирована через !important + сброс наследования, поэтому
   чистка/перетряска глобального CSS не должна ломать вид блока.
   Все правила скоупированы внутри .kbv2-why.

   ── Брейкпоинты адаптива ──────────────────────────────────────
   • ≤900px: двухколоночный .kbv2-why__edi → одна колонка; заголовок 26px;
             уменьшаются внутренние отступы карточки-подложки.
   • ≤768px: нижний межблочный отступ 88px → 56px (глобальный ритм #15).
   • ≤560px: заголовок 22px; подзаголовок резюме 17px; ещё компактнее padding.
   • ≤420px: заголовок 20px; padding 16px; tag переносится; нет горизонтального
             скролла на 320/360/420 (внутри ничего фиксированного шире вьюпорта).
   ================================================================== */

/* ── Защитный сброс ───────────────────────────────────────────── */
.kbv2-why,
.kbv2-why *,
.kbv2-why *::before,
.kbv2-why *::after {
	box-sizing: border-box !important;
}

/* ── typography firewall: вернуть наследование голым элементам, чтобы темовые `p{font-size}` / `h*{}` не продавливали блок; классовые правила ниже всё равно выигрывают ── */
.kbv2-why :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,figure,figcaption,small,strong,em,b,i,span,a,button,input,label) { font-size: inherit; line-height: inherit; font-family: inherit; }


.kbv2-why {
	--why-ink:#16243B;
	--why-ink-soft:#34425C;
	--why-mute:#727C8C;
	--why-paper:#FFFFFF;
	--why-line:#E5E9F1;
	--why-orange:#FF6B1A;
	--why-orange-deep:#E85B0E;
	--why-orange-soft:#FFEADD;
	--why-orange-line:#F8D2BA;
	--why-blue:#0088C4;
	--why-blue-deep:#006F9F;
	--why-blue-soft:#E2F2F9;
	--why-blue-line:#CDE8F4;
	--why-grid:#D9E4F2;

	max-width:1200px !important;
	margin:0 auto 88px !important;
	padding:0 20px !important;
	font-family:'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size:16px !important;
	line-height:1.5 !important;
	text-align:left !important;
	color:var(--why-ink) !important;
	background:none !important;
}

/* Сброс наследуемых элементов, чтобы тема не «протекала» */
.kbv2-why h2,
.kbv2-why h3,
.kbv2-why h4,
.kbv2-why p {
	margin:0 !important;
	padding:0 !important;
	font-family:'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.kbv2-why a {
	color:var(--why-blue) !important;
	text-decoration:underline !important;
}
.kbv2-why strong, .kbv2-why b { font-weight:800 !important; }

/* ── Подложка-«карточка» (на фронте каркас прозрачный, по гл. оверрайду #16,
   но базу держим закрытой на случай standalone-вставки) ─────────── */
.kbv2-why__block {
	position:relative !important;
	overflow:hidden !important;
	background:var(--why-paper) !important;
	border:1px solid var(--why-line) !important;
	border-radius:28px !important;
	padding:32px 34px 36px !important;
	box-shadow:0 1px 0 rgba(22,36,59,.03), 0 26px 52px -34px rgba(22,36,59,.22) !important;
}
.kbv2-why__block::before {
	content:"" !important;
	position:absolute !important;
	inset:0 !important;
	pointer-events:none !important;
	background-image:linear-gradient(var(--why-grid) 1px,transparent 1px),linear-gradient(90deg,var(--why-grid) 1px,transparent 1px) !important;
	background-size:34px 34px !important;
	opacity:.5 !important;
	-webkit-mask-image:radial-gradient(120% 130% at 90% 0%,#000 20%,transparent 64%) !important;
	        mask-image:radial-gradient(120% 130% at 90% 0%,#000 20%,transparent 64%) !important;
}

/* ── Надзаголовок ─────────────────────────────────────────────── */
.kbv2-why__eyebrow {
	position:relative !important;
	z-index:1 !important;
	font-weight:700 !important;
	font-size:12px !important;
	letter-spacing:2px !important;
	color:var(--why-mute) !important;
	text-transform:uppercase !important;
	margin:0 0 12px !important;
}

/* ── Заголовок ────────────────────────────────────────────────── */
.kbv2-why__head {
	position:relative !important;
	z-index:1 !important;
	margin:0 0 40px !important;
	font-weight:800 !important;
	font-size:31px !important;
	line-height:1.14 !important;
	letter-spacing:-.4px !important;
	color:var(--why-ink) !important;
	text-wrap:balance;
	max-width:820px !important;
}
.kbv2-why__head strong,
.kbv2-why__head b {
	color:var(--why-blue) !important;
	font-weight:800 !important;
}

/* ── Сетка резюме + список ────────────────────────────────────── */
.kbv2-why__edi {
	position:relative !important;
	z-index:1 !important;
	display:grid !important;
	grid-template-columns:0.82fr 1fr !important;
	gap:34px !important;
	align-items:start !important;
}

/* ── Резюме ───────────────────────────────────────────────────── */
.kbv2-why__sum-title {
	margin:0 !important;
	font-weight:600 !important;
	font-size:18px !important;
	line-height:1.45 !important;
	letter-spacing:-.1px !important;
	color:var(--why-ink-soft) !important;
	text-wrap:balance;
}
.kbv2-why__sum-text {
	margin:14px 0 0 !important;
	font-size:15px !important;
	line-height:1.6 !important;
	color:var(--why-mute) !important;
}

/* ── Список сценариев ─────────────────────────────────────────── */
.kbv2-why__list {
	display:grid !important;
	gap:18px !important;
	min-width:0 !important;
}
.kbv2-why__item {
	border-left:3px solid var(--why-line) !important;
	padding:2px 0 2px 20px !important;
	min-width:0 !important;
}
.kbv2-why__item--blue { border-left-color:var(--why-blue) !important; }
.kbv2-why__item--orange { border-left-color:var(--why-orange) !important; }

.kbv2-why__lbl {
	display:flex !important;
	flex-direction:column !important;
	align-items:flex-start !important;
	gap:9px !important;
	margin-bottom:9px !important;
}
.kbv2-why__tag {
	font-weight:700 !important;
	font-size:10.5px !important;
	letter-spacing:1px !important;
	text-transform:uppercase !important;
	border-radius:999px !important;
	padding:5px 11px !important;
	white-space:nowrap !important;
	display:inline-block !important;
}
.kbv2-why__item--blue .kbv2-why__tag {
	background:var(--why-blue-soft) !important;
	color:var(--why-blue-deep) !important;
	border:1px solid var(--why-blue-line) !important;
}
.kbv2-why__item--orange .kbv2-why__tag {
	background:var(--why-orange-soft) !important;
	color:var(--why-orange-deep) !important;
	border:1px solid var(--why-orange-line) !important;
}
.kbv2-why__item-title {
	margin:0 !important;
	font-weight:700 !important;
	font-size:16.5px !important;
	line-height:1.2 !important;
	letter-spacing:-.2px !important;
	color:var(--why-ink) !important;
}
.kbv2-why__item-text {
	margin:0 !important;
	font-size:15px !important;
	line-height:1.6 !important;
	color:var(--why-ink-soft) !important;
}

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width:900px) {
	.kbv2-why__block { padding:26px 22px 28px !important; border-radius:22px !important; }
	.kbv2-why__head { font-size:26px !important; }
	.kbv2-why__edi { grid-template-columns:1fr !important; }
}

@media (max-width:768px) {
	.kbv2-why { margin:0 auto 56px !important; }
}

@media (max-width:560px) {
	.kbv2-why__block { padding:22px 16px 24px !important; border-radius:18px !important; }
	.kbv2-why__head { font-size:22px !important; }
	.kbv2-why__sum-title { font-size:17px !important; }
}

@media (max-width:420px) {
	.kbv2-why { padding:0 14px !important; }
	.kbv2-why__block { padding:18px 14px 20px !important; }
	.kbv2-why__head { font-size:20px !important; }
	.kbv2-why__item { padding-left:16px !important; }
	.kbv2-why__tag { white-space:normal !important; }
}


/* ── Заключение + CTA ─────────────────────────────────────────── */
.kbv2-why__concl {
	position:relative !important;
	z-index:1 !important;
	margin-top:26px !important;
	background:var(--why-blue-soft) !important;
	border:1px solid var(--why-blue-line) !important;
	border-radius:18px !important;
	padding:20px 26px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	gap:24px !important;
	flex-wrap:wrap !important;
}
.kbv2-why__concl-tx {
	margin:0 !important;
	font-size:15.5px !important;
	line-height:1.6 !important;
	color:var(--why-ink-soft) !important;
	max-width:560px !important;
}
.kbv2-why__concl-tx b,
.kbv2-why__concl-tx strong { color:var(--why-ink) !important; font-weight:700 !important; }

.kbv2-why__btn {
	cursor:pointer !important;
	display:inline-flex !important;
	align-items:center !important;
	gap:11px !important;
	flex:0 0 auto !important;
	background:var(--why-orange) !important;
	color:#fff !important;
	text-decoration:none !important;
	border:none !important;
	font-family:'Manrope', system-ui, sans-serif !important;
	font-weight:800 !important;
	font-size:15px !important;
	line-height:1 !important;
	padding:15px 30px !important;
	border-radius:999px !important;
	box-shadow:0 14px 30px -12px rgba(255,107,26,.55) !important;
	transition:transform .16s, box-shadow .16s, background .16s !important;
	white-space:nowrap !important;
}
.kbv2-why__btn:hover,
.kbv2-why__btn:focus {
	background:var(--why-orange-deep) !important;
	color:#fff !important;
	transform:translateY(-2px) !important;
	box-shadow:0 18px 34px -12px rgba(255,107,26,.68) !important;
}
.kbv2-why__ar { display:inline-flex !important; transition:transform .16s !important; }
.kbv2-why__btn:hover .kbv2-why__ar { transform:translateX(3px) !important; }

@media (max-width:560px) {
	.kbv2-why__concl { flex-direction:column !important; align-items:stretch !important; padding:18px 16px !important; }
	.kbv2-why__btn { width:100% !important; justify-content:center !important; }
}


/* === фронт: каркас-карточка плоский — без рамки, сетки-фона, тени (как в макете на странице) === */
.kbv2-why__block { background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; overflow:visible !important; }
.kbv2-why__block::before { display:none !important; }

/* гарантированный отступ заголовок→контент (через класс сетки, иммунно к теме) */
.kbv2-why .kbv2-why__edi { margin-top:48px !important; }


/* === опциональная рамка с сеткой (тумблер в админке, по умолчанию выкл) === */
.kbv2-why.is-framed { background:#fff !important; border:none !important; border-radius:24px !important; padding:32px 34px !important; box-shadow:none !important; overflow:hidden !important; position:relative !important; }
.kbv2-why.is-framed > * { position:relative !important; z-index:1 !important; }
.kbv2-why.is-framed::before { content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; z-index:0 !important; border-radius:24px !important; background-image:linear-gradient(#D9E4F2 1px,transparent 1px),linear-gradient(90deg,#D9E4F2 1px,transparent 1px) !important; background-size:34px 34px !important; opacity:.55 !important; -webkit-mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; }
@media (max-width:768px){ .kbv2-why.is-framed { padding:22px 18px !important; } }