/* Варианты блока «Как всё устроено» для сравнения (21.10.2026). Общие куски — how-it-works.css и how-konsilium.css */
.hv .how-number{flex:none}
.hv .hv-4 .how-number{background:#f4cf65;color:#2e3b30}
.hv figure{margin:0}
.hv .kons-karta{max-width:none}
.hv .how-cta{width:100%}

/* A. Ступени: четыре шага в ряд, под ними два визуала одного размера */
.hv-a__shagi{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;margin:8px 0 34px;padding:0}
.hv-a__shagi::before{content:"";position:absolute;top:16px;left:16px;right:16px;height:1px;background:#cfdac7}
.hv-a__shagi li{position:relative;display:block}
.hv-a__shagi .how-number{position:relative;margin-bottom:14px}
.hv-a__shagi h3{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.03em;margin:0 0 6px}
.hv-a__shagi p{font-size:15px;line-height:1.5;color:var(--ink-soft);margin:0}
.hv-a__vizual{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hv-a__vizual figcaption{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#607055}
.hv-a .kons-karta{height:328px}
.hv-a__knopka{display:flex;justify-content:center;margin-top:28px}
.hv-a__knopka .how-cta{width:auto;min-width:360px;margin-top:0}

/* B. Два уровня: две равные карточки */
.hv-b__ryad{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.hv-b__karta{display:flex;flex-direction:column;padding:24px;border:1px solid #dfe4dc;border-radius:20px;background:#fbfcf9}
.hv-b__karta--2{background:#fffbea;border-color:#f1e3a8}
.hv-b__metka{align-self:flex-start;padding:4px 10px;border-radius:8px;background:#e8efe0;color:#2e3b30;font-size:12.5px;font-weight:600}
.hv-b__metka--2{background:#f8ebb5}
.hv-b__z{margin:10px 0 16px;font-size:24px;font-weight:600;letter-spacing:-.03em}
.hv-b .how-photo,.hv-b .kons-karta{height:300px}
.hv-b .kons-karta .messenger-bubble:nth-child(4){display:none}
.hv-b .how-steps{margin-top:22px}
.hv-b .how-cta{margin-top:auto}
.hv-b__karta .how-steps+.how-cta{margin-top:24px}
.hv-b__prim{margin:14px 0 0;font-size:14px;color:#786a6d}

/* C. Шаги и сцена: картинка справа сменяется (сама раз в 6 с, по шагу или переключателю) */
.hv-c__ryad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:48px;align-items:center;margin-top:8px}
.hv-c__shagi li{cursor:pointer;transition:opacity .35s}
.hv-c__shagi li .how-number{transition:transform .35s,box-shadow .35s}
/* активная группа шагов яркая, другая приглушённая */
.hv-c[data-pokaz="chat"] .hv-c__shagi li.hv-4,.hv-c[data-pokaz="kons"] .hv-c__shagi li:not(.hv-4){opacity:.42}
.hv-c[data-pokaz="kons"] .hv-c__shagi li.hv-4 .how-number{transform:scale(1.12);box-shadow:0 0 0 5px #f8efc6}
.hv-c__shagi li:hover{opacity:1!important}
.hv-c .how-cta{margin-top:28px}
.hv-c__prav{display:flex;flex-direction:column;gap:12px}
.hv-c__vybor{position:relative;align-self:flex-start;display:flex;padding:4px;border-radius:12px;background:#edf1e5}
.hv-c__vybor button{position:relative;z-index:1;padding:7px 14px;border:0;border-radius:9px;background:none;font:550 14px/1 Inter,Arial,sans-serif;color:#51464a;cursor:pointer}
.hv-c__vybor button[aria-selected="true"]{background:#fff;color:#282326;box-shadow:0 1px 3px #2733291a}
.hv-c__vybor button[data-pokaz="kons"][aria-selected="true"]{background:#fbf3d3}
/* полоска хода автосмены под переключателем */
.hv-c__hod{position:absolute;left:8px;right:8px;bottom:-6px;height:2px;border-radius:2px;background:#cfdac7;transform-origin:left;animation:hvhod 6s linear infinite}
.hv-c--ruchnoj .hv-c__hod{display:none}
@keyframes hvhod{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hv-c__scena{position:relative;height:360px}
.hv-c__sloj{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;pointer-events:none}
.hv-c__sloj.is-on{opacity:1;transform:none;pointer-events:auto}
.hv-c .how-photo,.hv-c .kons-karta{height:100%}
.hv-c .kons-karta .messenger-history{justify-content:center;gap:8px}
.hv-c .kons-karta .messenger-bubble{font-size:14px}
@media(max-width:900px){
  .hv-a__shagi{grid-template-columns:1fr 1fr}.hv-a__shagi::before{display:none}
  .hv-b__ryad,.hv-c__ryad{grid-template-columns:1fr}
}
/* на телефоне карточку консилиума не показываем (Никита 21.10) */
@media(max-width:760px){
  .hv-a__shagi{grid-template-columns:1fr}.hv-a__vizual{grid-template-columns:1fr}.hv-a__vizual figure:last-child{display:none}
  .hv-a__knopka .how-cta{min-width:0;width:100%}
  .hv-b .kons-karta{display:none}.hv-b__karta{padding:18px}
  .hv-c__scena{height:220px}.hv-c__vybor{display:none}.hv-c__sloj[data-sloj="kons"]{display:none}.hv-c__sloj[data-sloj="chat"]{opacity:1;transform:none}.hv-c[data-pokaz] .hv-c__shagi li{opacity:1!important}.hv-c[data-pokaz] .hv-c__shagi li .how-number{transform:none;box-shadow:none}.hv-c__prav{order:-1}
}

/* ответ врача на фото — зелёный, как в кабинете (Никита 21.10) */
.how-answer{background:#2e3b30}
.how-answer small{color:#cfe0c2}