/* ===== Бурение под кольца: полоса цены по зонам глубины, сравнение способов ===== */

/* Полоса «зоны глубины»: кольца раскрашены по ступеням доплаты */
.k-bu-zones { padding: 18px; border-radius: var(--r); background: var(--white); box-shadow: var(--sh-s); }
.k-bu-zones__h { margin-bottom: 12px; font: 700 18px/1.25 var(--f-h); }
.k-bu-zones__bar { display: flex; gap: 3px; height: 56px; }
.k-bu-zones__bar span { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; border-radius: 6px; background: var(--z); color: var(--zc, var(--white)); font: 700 12px/1 var(--f-h); animation: k-bu-in .35s var(--ease) both; }
.k-bu-zones__bar span.z1 { --z: var(--g-l); --zc: var(--g-dd); }
.k-bu-zones__bar span.z2 { --z: var(--g); }
.k-bu-zones__bar span.z3 { --z: var(--g-d); }
.k-bu-zones__bar span.z4 { --z: var(--ink); }
.k-bu-zones__key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 14px; font-size: 14px; line-height: 1.3; color: var(--mute); }
.k-bu-zones__key li { display: flex; align-items: center; gap: 8px; }
.k-bu-zones__key i { flex: 0 0 14px; height: 14px; border-radius: 4px; }
.k-bu-zones__key i.z1 { background: var(--g-l); }
.k-bu-zones__key i.z2 { background: var(--g); }
.k-bu-zones__key i.z3 { background: var(--g-d); }
.k-bu-zones__key i.z4 { background: var(--ink); }
@keyframes k-bu-in { from { opacity: 0; transform: scaleY(.4); } to { opacity: 1; transform: none; } }

/* Сравнение «бурение — ручная копка» */
.k-bu-vs { background: var(--paper); }
.k-bu-vs__box { border-radius: var(--r); background: var(--white); box-shadow: var(--sh-s); overflow: hidden; }
.k-bu-vs__t { width: 100%; border-collapse: collapse; }
.k-bu-vs__t th, .k-bu-vs__t td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 16px; line-height: 1.45; }
.k-bu-vs__t thead th { padding-top: 18px; font: 700 17px/1.2 var(--f-h); }
.k-bu-vs__t thead th.is-on { background: var(--ink); color: var(--white); }
.k-bu-vs__t tbody th { font-weight: 800; color: var(--ink); }
.k-bu-vs__t td.is-on { background: var(--g-ll); }
.k-bu-vs__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.k-bu-vs__note { padding: 16px; font-size: 16px; color: var(--mute); }

/* Лента роликов клиента: вертикальные видео с подписью */
.k-bu-vid { flex: none; width: 200px; scroll-snap-align: start; }
.k-bu-vid video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; background: var(--ink-3); object-fit: cover; }
.k-bu-vid figcaption { margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--mute); }
@media (min-width: 700px) { .k-bu-vid { width: 230px; } }

/* Телефон: строки сравнения — карточками «признак → два ответа» */
@media (max-width: 699px) {
	.k-bu-vs__t thead { display: none; }
	.k-bu-vs__t tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
	.k-bu-vs__t th, .k-bu-vs__t td { border: 0; }
	.k-bu-vs__t tbody th { grid-column: 1 / -1; padding-bottom: 4px; }
	.k-bu-vs__t td { padding-top: 8px; font-size: 15px; }
	.k-bu-vs__t td::before { display: block; margin-bottom: 4px; font: 700 13px/1.2 var(--f-h); color: var(--mute); }
	.k-bu-vs__t td.is-on::before { content: "Машиной"; color: var(--g-dd); }
	.k-bu-vs__t td:not(.is-on)::before { content: "Вручную"; }
}
@media (min-width: 700px) {
	.k-bu-vs__t th, .k-bu-vs__t td { padding: 18px 22px; }
	.k-bu-vs__t tbody th { width: 24%; }
	.k-bu-vs__note { padding: 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.k-bu-zones__bar span { animation: none; }
}