/* 5 · «План лечения» (/variant-2/, 06.11) — разметка: delo-src/partials/v2-plan.html, движение: assets/js/b5.js
   Один приём — путь, который рисуется прокруткой: пунктир маршрута слева от этапов, синяя линия идёт по нему вслед за
   прокруткой (b5.js: scaleY и точка-перо — только transform), дошла до узла — узел загорается (синий кружок проступает
   поверх белого: opacity + scale), этап проявляется (opacity + подъём). Финал — линия приходит в фирменный знак.
   Фон секции прозрачный — за ней размытая девушка; всё читаемое — на стекле (телефон — без backdrop-filter) */
.v2-plan { position: relative; z-index: 3; color: var(--ink); }
/* --axis — где линия, --nd — узел, --gut — отступ этапов от края, --cpt — верхнее поле этапа, --h3/--h3f — заголовок этапа
   и финала (узел — по центру первой строки заголовка), --fin — знак в конце */
.pl-in { --axis: 19px; --nd: 34px; --gut: 46px; --cpt: 16px; --h3: 22px; --h3f: 28px; --nf: 16px; --fin: 46px; }

/* ── заголовок: «10» крупно синим, рядом три строки «визитов / до чистой / кожи» ── */
.pl-t { display: flex; align-items: center; gap: 0.16em; margin: 0; font-family: var(--head), var(--font); font-weight: 600; color: var(--ink); }
.pl-ten { flex: none; font-size: var(--ten, 112px); line-height: 0.74; letter-spacing: -0.045em; color: var(--blue); padding-right: 0.02em; }
.pl-tt { display: flex; flex-direction: column; font-size: var(--tt, 26px); line-height: 1.02; letter-spacing: -0.01em; }
.pl-tt > span { display: block; white-space: nowrap; }
.pl-lead { margin-top: 16px; font-size: 16px; line-height: 1.45; color: var(--ink2); text-wrap: pretty; }
.pl-act { display: flex; }
.pl-act .more { margin-top: 0; }

/* ── маршрут ── */
.pl-route { position: relative; }
.pl-path { position: static; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap, 12px); }
.pl-st { position: relative; padding-left: var(--gut); }
/* пунктир — путь впереди; синяя линия — пройденный (высоту и начало ставит b5.js: от центра первого узла до знака) */
.pl-line { position: absolute; z-index: 1; left: calc(var(--axis) - 1px); top: 0; width: 2px; height: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(39, 93, 167, 0.34) 0 5px, transparent 5px 11px); }
.pl-fill, .pl-tip { position: absolute; display: block; font-style: normal; }
.pl-fill { inset: 0; border-radius: 2px; background: var(--blue); transform-origin: 50% 0; transform: scaleY(0); }
.pl-tip { left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.86); }
.pl-run .pl-fill, .pl-run .pl-tip { will-change: transform; }

/* узел: белый кружок с номером; загорелся — поверх проступает синий */
.pl-node { position: absolute; z-index: 2; left: calc(var(--axis) - var(--nd) / 2); top: calc(var(--cpt) + var(--h3) * 0.56 - var(--nd) / 2);
  width: var(--nd); height: var(--nd); }
.pl-node b, .pl-node i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font: 600 var(--nf)/1 var(--head), var(--font); font-style: normal; }
.pl-node b { background: rgba(252, 249, 244, 0.96); color: rgba(39, 93, 167, 0.6); box-shadow: inset 0 0 0 1.5px rgba(39, 93, 167, 0.3), 0 8px 18px -12px rgba(22, 41, 74, 0.5); }
.pl-node i { background: var(--blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(39, 93, 167, 0.9); }
.pl-live .pl-node i { opacity: 0; transform: scale(0.5); transition: opacity 0.3s ease, transform 0.6s var(--ease); }
.pl-live .pl-st.on .pl-node i { opacity: 1; transform: none; }

/* этап — на стекле */
.pl-card { padding: var(--cpt) 18px 18px; border-radius: 22px;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0.62) 0%, rgba(250, 246, 239, 0.74) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.pl-card h3 { margin: 0; font-family: var(--head), var(--font); font-weight: 600; font-size: var(--h3); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.pl-card p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--ink2); text-wrap: pretty; }
.pl-live .pl-card { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.5s ease, transform 0.8s var(--ease); }
.pl-live .pl-st.on .pl-card { opacity: 1; transform: none; }
/* следующий этап проступает заранее, наполовину (b5.js, .pl-pre; 06.11 вечер — «снизу пустое пространство») */
.pl-live .pl-st.pl-pre:not(.on) .pl-card { opacity: 0.45; transform: translate3d(0, 12px, 0); }

/* финал: линия приходит в фирменный знак, этап крупнее */
.pl-fin .pl-node { --nd: var(--fin); top: calc(var(--cpt) + var(--h3f) * 0.56 - var(--fin) / 2); }
.pl-fin .pl-node b::before, .pl-fin .pl-node i::before { content: ''; width: 58%; height: 58%; background: currentColor;
  -webkit-mask: url(../brand/mark.svg) center / contain no-repeat; mask: url(../brand/mark.svg) center / contain no-repeat; }
.pl-fin .pl-node b { color: rgba(39, 93, 167, 0.42); }
.pl-fin h3 { font-size: var(--h3f); color: var(--blue); }

/* спокойный режим (?calm): весь путь пройден сразу */
.pl-calm .pl-fill { transform: none; }
.pl-calm .pl-tip { display: none; }
.pl-calm .pl-node i, .pl-calm .pl-card { transition: none; }

/* ── компьютер: слева закреплены «10 визитов» и запись, справа путь. Отступ сверху маленький (5vh): закреплённая раскладка
   «Результатов» (b4.js) гаснет, пока верх этого блока проходит первые 0,45 экрана, — стекло «10 визитов» въезжает ей на
   смену, без кадра «только размытая девушка» ── */
@media (min-width: 761px) {
  .pl-in { --axis: 24px; --nd: 44px; --gut: 76px; --cpt: 24px; --nf: 19px; --fin: 60px; --gap: 18px; --h3: clamp(23px, 1.75vw, 27px); --h3f: clamp(30px, 2.4vw, 38px);
    max-width: 1360px; margin: 0 auto; padding: 5vh var(--pad) 9vh; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 96px); align-items: start; }
  .pl-side { align-self: stretch; }
  .pl-head { position: sticky; top: calc(var(--hdr) + 7vh); --ten: clamp(132px, 12.4vw, 186px); --tt: clamp(30px, 2.75vw, 42px);
    padding: clamp(28px, 2.6vw, 46px); border-radius: 28px;
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.4) 0%, rgba(250, 246, 239, 0.46) 50%, rgba(250, 246, 239, 0.56) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05);
    box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
  .pl-head .label { margin-bottom: clamp(22px, 3vh, 34px); }
  .pl-lead { margin-top: clamp(20px, 3vh, 30px); font-size: clamp(17px, 1.3vw, 20px); }
  .pl-act-d { flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(22px, 3.4vh, 34px); }
  .pl-act-m { display: none; }
  .pl-route { padding-top: 6px; }
  .pl-card { padding: var(--cpt) 30px 26px; border-radius: 26px;
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.46) 0%, rgba(250, 246, 239, 0.58) 100%);
    -webkit-backdrop-filter: blur(4px) saturate(1.05); backdrop-filter: blur(4px) saturate(1.05); }
  .pl-card p { margin-top: 10px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; }
  .pl-fin .pl-card p { font-size: clamp(17px, 1.3vw, 20px); }
  .pl-live .pl-card { transform: translate3d(0, 30px, 0); }
}
/* невысокий экран ноутбука: «10 визитов» и запись помещаются в закреплённую колонку */
@media (min-width: 761px) and (max-height: 760px) {
  .pl-head { top: calc(var(--hdr) + 3vh); --ten: clamp(112px, 10vw, 150px); --tt: clamp(26px, 2.3vw, 34px); padding: 30px 34px; }
  .pl-head .label { margin-bottom: 18px; }
  .pl-lead { margin-top: 16px; }
  .pl-act-d { margin-top: 20px; }
}

/* ── телефон: стекло с «10 визитов» → путь → запись ── */
@media (max-width: 760px) {
  .pl-in { padding: 9svh 14px 6svh; }
  .pl-head { --ten: clamp(100px, 29vw, 120px); --tt: clamp(24px, 6.9vw, 28px); padding: 22px 20px 20px; border-radius: 26px;
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0.6) 0%, rgba(250, 246, 239, 0.72) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 20px 50px -34px rgba(66, 47, 25, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  .pl-head .label { margin-bottom: 18px; font-size: clamp(12.5px, 3.5vw, 14px); letter-spacing: 0.11em; gap: 10px; white-space: nowrap; }
  .pl-head .label::before { width: 20px; height: 20px; }
  /* «Ощутимый результат —» / «уже через 2–3 месяца»: перенос — после тире (сборка приклеивает тире к соседям) */
  .pl-lead { font-size: 17px; line-height: 1.4; }
  .pl-l2 { display: block; }
  .pl-act-d { display: none; }
  .pl-route { margin-top: 22px; }
  .pl-act-m { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; }
  .pl-act-m .cta { width: 100%; height: 54px; padding: 0 16px; font-size: 16px; }
  .pl-act-m .more { align-self: center; }
}