/* ===== Глиняный замок: живой разрез в калькуляторе, сравнение «глина — бетон — смесь» ===== */

/* Живой разрез: верховодка, швы и замок включаются от галочек */
.k-gz-cut { padding: 14px; border-radius: var(--r); background: var(--white); box-shadow: var(--sh-s); }
.k-gz-cut__svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.k-gz-cut__t { font: 700 20px/1 var(--f-h); fill: var(--ink); }
.k-gz-cut__flow path { fill: none; stroke: #2f7c86; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 10; animation: k-gz-flow 1.6s linear infinite; }
.k-gz-cut__away path { fill: none; stroke: #2f7c86; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 10; animation: k-gz-flow 1.6s linear infinite; }
#gzc-zamok, #gzc-germ, #gzc-flow, #gzc-away, #gzc-drops { transition: opacity var(--t) var(--ease-out); }
.k-gz-cut.is-zamok #gzc-flow { opacity: .12; }
.k-gz-cut:not(.is-zamok) #gzc-zamok, .k-gz-cut:not(.is-zamok) #gzc-away { opacity: 0; }
.k-gz-cut:not(.is-germ) #gzc-germ { opacity: 0; }
.k-gz-cut.is-zamok.is-germ #gzc-drops { opacity: 0; }
@keyframes k-gz-flow { to { stroke-dashoffset: -40; } }

/* Капли дождя на схеме */
.k-gz-svg__rain path { stroke: #9fd3db; stroke-width: 3; stroke-linecap: round; }

/* Глина, бетон или смесь: три карточки */
.k-gz-vs { background: var(--paper); }
.k-gz-vs__grid { display: grid; gap: 12px; }
.k-gz-vs__grid article { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border: 2px solid var(--line); border-radius: var(--r); background: var(--white); }
.k-gz-vs__grid article.is-on { border-color: var(--g-btn); box-shadow: 0 0 0 4px var(--g-ll); }
.k-gz-vs__grid h3 { font: 700 23px/1.15 var(--f-h); }
.k-gz-vs__grid p { font-size: 16px; line-height: 1.55; color: var(--mute); }
.k-gz-vs__tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--g-btn); color: var(--white); font: 700 14px/1.2 var(--f-h); }
.k-gz-vs__grid ul { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.k-gz-vs__grid li { position: relative; padding-left: 30px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.k-gz-vs__grid li::before { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; font: 800 14px/22px var(--f-b); text-align: center; }
.k-gz-vs__grid li.is-yes::before { content: "+"; background: var(--g-l); color: var(--g-dd); }
.k-gz-vs__grid li.is-no::before { content: "−"; background: #f6e3df; color: #a5302a; }

@media (min-width: 1100px) {
	.k-gz-vs__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.k-gz-vs__grid article { padding: 30px 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.k-gz-cut__flow path, .k-gz-cut__away path { animation: none; }
}