/* Страницы lab/: процедуры, подбор, учебный центр, салоны. Поверх дизайн-кода iPRO MINI (lab/ipro-mini/style.css). */

/* blocks appear as they scroll in; without JS everything is simply visible */
.js [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* page hero */
.ph__h1 { margin: 0; max-width: 16ch; font-size: clamp(40px, 5.2vw, 80px); font-weight: 200; line-height: 1.02; letter-spacing: -.04em; }
.ph .lead { margin-top: 20px; }
.ph .facts b { white-space: nowrap; font-size: clamp(24px, 2.2vw, 34px); }
.ph__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3svh, 32px); }
.ph__media img { width: 100%; height: auto; max-height: 68svh; object-fit: cover; border-radius: var(--radius); background: var(--paper); }

/* a row head: title left, lead right */
.sec-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.sec-row > div { flex: 1 1 520px; }
.sec-row .lead { flex: 0 1 400px; margin: 0; }

/* three (or four) numbered steps */
.steps3 { counter-reset: st; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin: clamp(28px, 4svh, 48px) 0 0; padding: 0; }
.steps3--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps3 li { counter-increment: st; padding: 20px 0 8px; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 20%, transparent); }
.steps3 li::before { content: "0" counter(st); display: block; margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .2em; opacity: .55; }
.steps3 b { display: block; font-size: clamp(22px, 1.9vw, 28px); font-weight: 300; letter-spacing: -.02em; }
.steps3 span { display: block; margin-top: 8px; max-width: 34ch; font-size: 15px; line-height: 1.55; opacity: .72; }

/* recommended prices */
.ptable__k { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.ptable td { text-align: right; font-variant-numeric: tabular-nums; }
.ptable__note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }

/* device cards */
.devcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(24px, 4svh, 44px); }
.devcard { display: flex; flex-direction: column; padding: 12px 12px 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); transition: border-color .4s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease); }
.devcard:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(0, 0, 0, .28); }
.devcard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--radius) - 8px); background: var(--paper); }
.devcard__img img { width: 100%; height: 100%; object-fit: cover; }
.devcard__name { margin: 16px 10px 0; font-size: clamp(24px, 2vw, 30px); font-weight: 300; letter-spacing: -.02em; }
.devcard__sub { margin: 6px 10px 0; font-size: 14px; color: var(--ink-2); }
.devcard__rent { margin: 14px 10px 0; font-size: 15px; font-weight: 500; }
.devcard__go { margin: 14px 10px 0; font-size: 14px; font-weight: 500; }

/* videos */
.vids__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); margin: clamp(24px, 4svh, 44px) 0 0; padding: 0; }

/* academy: two directions */
.dirs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(24px, 4svh, 40px); }
.dirs2 article { padding: clamp(22px, 2.6vw, 34px); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); }
.dirs2 h3 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.02em; }
.dirs2 p { margin: 12px 0 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* quiz */
.quiz__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: start; gap: clamp(28px, 4vw, 64px); margin-top: 8px; }
.qset { margin: clamp(18px, 3svh, 28px) 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qset legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; font-weight: 500; }
.qset legend b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; }
.qopt input { position: absolute; opacity: 0; pointer-events: none; }
.qopt span { display: inline-block; padding: 11px 16px; border: 1px solid var(--rule); border-radius: 999px; font-size: 15px; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.qopt span:hover { border-color: var(--ink); }
.qopt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--white); }
.qopt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.quiz__res { position: sticky; top: calc(var(--nav-h) + 24px); padding: clamp(22px, 2.6vw, 34px); border-radius: var(--radius); background: var(--graphite); color: var(--white); }
.quiz__k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.quiz__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; margin-top: 16px; border-radius: 14px; background: #fff; }
.quiz__name { margin: 18px 0 0; font-size: clamp(30px, 3vw, 44px); font-weight: 200; letter-spacing: -.03em; }
.quiz__why { margin: 8px 0 0; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.quiz__price { margin: 14px 0 0; font-size: 18px; font-weight: 500; }
.quiz__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }

.med-warn { margin: 0 auto; padding-top: 20px; padding-bottom: 20px; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }

/* comparison tables: scroll sideways on phones instead of squeezing */
.tbl-scroll { overflow-x: auto; margin-top: clamp(24px, 4svh, 40px); -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.cmp th, .cmp td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.cmp thead th { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmp tbody th { font-weight: 400; color: var(--ink-3); }
.cmp .is-us { font-weight: 600; }
.s--dark .cmp th, .s--dark .cmp td { border-bottom-color: rgba(255, 255, 255, .14); }
.s--dark .cmp thead th, .s--dark .cmp tbody th { color: rgba(255, 255, 255, .55); }
.s--dark .ph__act { align-items: center; }

/* proof line under a loud claim: what exactly and since when */
.proof { margin: 18px 0 0; padding-left: 14px; max-width: 640px; border-left: 2px solid var(--red); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.s--dark .proof { color: rgba(255, 255, 255, .72); }

/* timeline */
.tl { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin: clamp(24px, 4svh, 44px) 0 0; padding: 0; }
.tl li { padding-top: 18px; border-top: 1px solid var(--rule); }
.tl b { display: block; font-size: clamp(30px, 2.8vw, 44px); font-weight: 200; letter-spacing: -.03em; }
.tl span { display: block; margin-top: 8px; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* fact we are still waiting for from the founders */
.todo { padding: 1px 6px; border-radius: 6px; background: #fff1a8; color: #5e4d00; }

.rent__sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.ct__addr { margin: 28px 0 0; line-height: 1.6; color: var(--ink-2); }
.ct__addr b { font-weight: 500; color: var(--ink); }
.map { display: block; width: 100%; aspect-ratio: 4 / 3.4; border: 0; border-radius: var(--radius); background: var(--paper); }

/* product pages: handle cards are not links */
.devcard--static:hover { border-color: var(--rule); transform: none; box-shadow: none; }
.devcard__list { margin: 12px 10px 0; gap: 6px; }
.devcard__list li { font-size: 14px; color: var(--ink-2); }

/* procedure chips */
.ptags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(24px, 4svh, 40px) 0 0; padding: 0; }
.ptags a, .ptags span { display: inline-block; padding: 12px 18px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 15px; }
.ptags a { transition: border-color .3s var(--ease); }
.ptags a:hover { border-color: var(--ink); }

/* photo grid */
.pgal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(24px, 4svh, 40px); }
.pgal figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper); aspect-ratio: 3 / 2; }
.pgal img { width: 100%; height: 100%; object-fit: cover; }

/* faq hub and legal text */
.faq__group { margin: clamp(32px, 5svh, 56px) 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 300; letter-spacing: -.02em; }
.legal h2 { margin: 36px 0 12px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.legal p { margin: 0 0 12px; max-width: 760px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 899px) {
  .ph__media img { max-height: 34svh; }
  .steps3, .steps3--4, .devcards, .vids__grid, .dirs2, .quiz__grid { grid-template-columns: 1fr; }
  .steps3 li { padding-top: 14px; }
  .quiz__res { position: static; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .tl li { padding-bottom: 20px; }
  .map { aspect-ratio: 1; }
  .pgal { grid-template-columns: 1fr; }
  .ph .facts b { white-space: normal; font-size: 22px; line-height: 1.15; }
}

/* ═════════ v2: редакционный дизайн контентных страниц ═════════ */

/* sections size to their content: no half-empty full screens */
.pg .s { min-height: 0; display: block; padding: clamp(96px, 11vw, 176px) 0; }
.pg .s.ph { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 112px)); }
.pg .h2 { max-width: 18ch; font-size: clamp(36px, 5vw, 76px); }
.pg .split .h2 { font-size: clamp(32px, 3.8vw, 58px); }
.pg .split--top > .split__text { position: sticky; top: calc(var(--nav-h) + 72px); }
.pg .lead { max-width: 560px; }

/* hero: the photo takes the whole first screen */
.phx { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--white); background: var(--graphite); }
.phx__media { position: absolute; inset: 0; margin: 0; will-change: transform; }
.phx__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.08); transition: transform 2.6s var(--ease); }
.phx.is-in .phx__media img { transform: scale(1); }
.phx__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 20%), linear-gradient(90deg, rgba(10, 10, 10, .74) 0%, rgba(10, 10, 10, .42) 42%, rgba(10, 10, 10, 0) 72%), linear-gradient(0deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, 0) 42%); }
.phx__copy { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + 40px); }
.phx .crumbs { margin-bottom: 18px; color: rgba(255, 255, 255, .62); }
.phx .updated { margin: 0 0 clamp(28px, 6svh, 72px); color: rgba(255, 255, 255, .52); }
.phx .label { color: rgba(255, 255, 255, .62); }
.phx__h1 { margin: 0; max-width: 12ch; font-size: clamp(52px, 7vw, 124px); font-weight: 200; line-height: .92; letter-spacing: -.05em; }
.phx__lead { margin: clamp(20px, 3svh, 30px) 0 0; max-width: 540px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .82); }
.phx .proof { max-width: 540px; color: rgba(255, 255, 255, .72); }
.phx .ph__act { margin-top: clamp(24px, 4svh, 40px); }
.phx__bottom { position: relative; z-index: 2; padding-bottom: clamp(28px, 5svh, 48px); }
.phx__facts { --fgap: clamp(20px, 3vw, 56px); container-type: inline-size; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--fgap); margin: clamp(40px, 8svh, 96px) 0 0; padding: 0; }
.phx__facts li { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .26); }
.phx__facts b { display: block; font-size: clamp(26px, 2.7vw, 44px); font-weight: 200; letter-spacing: -.035em; white-space: nowrap; }
.phx__facts span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .62); }

/* light hero: white photos bleed off the right edge, text stays dark */
.phx--light { color: var(--ink); background: var(--white); }
/* граница фото: 44% экрана, но колонке текста не меньше 450px — на 1024 кнопки в ряд, на 1920+ колонка не сжимается */
.phx--light { --lx-l: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); --lcol: min(600px, max(calc(44vw - var(--lx-l) - 48px), 450px)); }
.phx--light .phx__media { left: max(44%, calc(var(--lx-l) + 498px)); top: var(--nav-h); }
.phx--light .phx__media img { object-fit: contain; object-position: var(--pos, 50% 60%); }
.phx--light .phx__shade { display: none; }
.phx--light .crumbs, .phx--light .label { color: var(--ink-3); }
.phx--light .updated { color: var(--ink-3); }
.phx--light .phx__copy > *, .phx--light .phx__facts { max-width: var(--lcol); }
.phx--light .phx__lead { color: var(--ink-2); }
.phx--split .phx__media img { object-fit: cover; }
.phx--light .phx__h1 { font-size: clamp(48px, 6.2vw, 112px); }
.phx--light .phx__facts { --fgap: clamp(16px, 2vw, 32px); }
.phx--light .phx__facts b { font-size: clamp(16px, min(max(22px, 2vw), (100cqi - var(--fgap) / 2) / 15.6), 32px); }
.phx--light .proof { color: var(--ink-2); }
.phx--light .phx__facts li { border-top-color: var(--rule); }
.phx--light .phx__facts span { color: var(--ink-3); }

/* sticky product subnav */
.lnav { position: sticky; top: var(--nav-h); z-index: 9; border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); }
.lnav__in { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); height: 54px; }
.lnav__name { flex: none; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.lnav__links { display: flex; gap: clamp(16px, 2vw, 28px); margin-left: auto; overflow-x: auto; scrollbar-width: none; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.lnav__links a { transition: color .3s var(--ease); }
.lnav__links a:hover, .lnav__links a.is-on { color: var(--ink); }
.lnav .btn { flex: none; padding: 9px 18px; font-size: 13px; }

/* statement: one big sentence, words light up as you scroll */
.stmt { padding: clamp(96px, 12vw, 200px) 0; }
.stmt__text { margin: 0; max-width: 20ch; font-size: clamp(36px, 5.6vw, 92px); font-weight: 200; line-height: 1.02; letter-spacing: -.045em; }
.stmt__text .m { color: var(--ink-3); }
.js .stmt__text[data-words] .w { color: #cfcfcb; transition: color .5s var(--ease); }
.js .stmt__text[data-words] .w.is-on { color: var(--ink); }
.js .stmt__text[data-words] .m .w.is-on { color: var(--ink-3); }
.s--dark .stmt__text .m { color: rgba(255, 255, 255, .42); }

/* big numbers */
.nums { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin: clamp(48px, 8svh, 96px) 0 0; padding: 0; }
.nums li { padding-top: 20px; border-top: 1px solid var(--rule); }
.nums b { display: block; font-size: clamp(48px, 6.2vw, 108px); font-weight: 200; line-height: 1; letter-spacing: -.055em; white-space: nowrap; }
.nums span { display: block; margin-top: 14px; max-width: 26ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.s--dark .nums li { border-top-color: rgba(255, 255, 255, .18); }
.s--dark .nums span { color: rgba(255, 255, 255, .66); }

/* feature rows: big image on one side, text on the other, alternating */
.frows { margin-top: clamp(40px, 6svh, 72px); }
.frow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--rule); }
.frow:nth-child(even) .frow__media { order: 2; }
.frow__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.frow__media img { width: 100%; height: 100%; object-fit: cover; }
.frow__media--contain { background: #f7f7f5; }
.frow__media--contain img { object-fit: contain; padding: 4%; mix-blend-mode: multiply; }
.frow__k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.frow__h { margin: 12px 0 0; font-size: clamp(32px, 3.6vw, 56px); font-weight: 200; line-height: 1.02; letter-spacing: -.04em; }
.frow__p { margin: 16px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.frow__facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 28px 0 0; padding: 0; }
.frow__facts li { padding-top: 12px; border-top: 1px solid var(--rule); }
.frow__facts b { display: block; font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; letter-spacing: -.02em; }
.frow__facts span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }

/* bento gallery */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 21vw, 330px); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(32px, 5svh, 56px); }
.bento figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.bento figure:first-child { grid-column: span 2; grid-row: span 2; }
.bento--2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: clamp(280px, 36vw, 560px); }
.bento--2 figure:first-child { grid-column: auto; grid-row: auto; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.bento figure:hover img { transform: scale(1.04); }
.bento figcaption { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .86); font-size: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* steps as panels instead of thin lists */
.pg .steps3 { gap: clamp(12px, 1.4vw, 20px); }
.pg .steps3 li { display: flex; flex-direction: column; min-height: clamp(200px, 20vw, 280px); padding: clamp(22px, 2.4vw, 34px); border: 0; border-radius: var(--radius); background: var(--paper); }
.pg .s--paper .steps3 li { background: var(--white); }
.pg .s--dark .steps3 li { background: rgba(255, 255, 255, .06); }
.pg .steps3 li::before { content: counter(st, decimal-leading-zero); margin-bottom: auto; font-size: clamp(34px, 3.2vw, 52px); font-weight: 200; letter-spacing: -.04em; opacity: .32; }
.pg .steps3 b { margin-top: 28px; font-size: clamp(22px, 1.8vw, 28px); }
.pg .steps3 span { max-width: 30ch; }

/* chips get more weight */
.pg .ptags { gap: 12px; }
.pg .ptags a, .pg .ptags span { padding: 16px 24px; font-size: clamp(15px, 1.2vw, 18px); }
.pg .ptags a::after { content: " →"; color: var(--ink-3); }

/* image reveal: a curtain lifts and the picture settles */
.js [data-reveal="img"] { opacity: 1; translate: none; clip-path: inset(18% 0 0 0 round var(--radius)); transition: clip-path 1.4s var(--ease); }
.js [data-reveal="img"] img { transform: scale(1.12); transition: transform 1.8s var(--ease); }
.js [data-reveal="img"].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js [data-reveal="img"].is-in img { transform: scale(1); }
/* children of a group appear one after another */
.js [data-stagger] > * { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-stagger].is-in > * { opacity: 1; translate: 0 0; }

/* procedure list: big numbered rows */
.plist { list-style: none; margin: clamp(40px, 6svh, 72px) 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.plist li { border-top: 1px solid var(--rule); }
.plist a, .plist div { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 32px; align-items: baseline; gap: 16px; padding: clamp(18px, 2.2vw, 28px) 0; }
.plist__n { font-size: 13px; letter-spacing: .12em; color: var(--ink-3); }
.plist__name { font-size: clamp(24px, 2.8vw, 44px); font-weight: 200; letter-spacing: -.035em; transition: translate .6s var(--ease); }
.plist__tag { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.plist__go { justify-self: end; font-size: 20px; color: var(--ink-3); transition: color .4s var(--ease), translate .6s var(--ease); }
.plist a:hover .plist__name { translate: 10px 0; }
.plist a:hover .plist__go { color: var(--red); translate: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .phx__media img, .js [data-reveal="img"], .js [data-reveal="img"] img, .js [data-stagger] > * { transition: none; transform: none; clip-path: none; opacity: 1; translate: none; }
}

@media (max-width: 899px) {
  .pg .s { padding: clamp(72px, 16vw, 112px) 0; }
  .pg .split--top > .split__text { position: static; }
  .phx { min-height: 94svh; }
  .phx__shade { background: linear-gradient(0deg, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .5) 52%, rgba(10, 10, 10, .18) 100%); }
  .phx__h1 { font-size: clamp(48px, 14vw, 72px); }
  .phx .updated { margin-bottom: 20px; }
  .phx__facts { --fgap: 14px; margin-top: 32px; }
  .phx__facts b { font-size: 22px; white-space: normal; line-height: 1.15; }
  .phx__facts span { font-size: 12px; }
  .phx--light { justify-content: flex-start; }
  .phx--light .phx__media { position: relative; inset: auto; height: 46svh; margin-top: var(--nav-h); }
  .phx--light .phx__copy { padding-top: 28px; }
  .phx--light .phx__copy > *, .phx--light .phx__facts { max-width: none; }
  .lnav__name { display: none; }
  .lnav__links { margin-left: 0; }
  .lnav .btn { display: none; }
  .nums { grid-template-columns: 1fr; }
  .nums b { font-size: clamp(56px, 17vw, 84px); }
  .frow { grid-template-columns: 1fr; gap: 24px; }
  .frow:nth-child(even) .frow__media { order: 0; }
  .bento, .bento--2 { grid-template-columns: 1fr; grid-auto-rows: 68vw; }
  .bento figure:first-child { grid-column: auto; grid-row: auto; }
  .pg .steps3 li { min-height: 0; }
  .pg .steps3 b { margin-top: 18px; }
  .plist a, .plist div { grid-template-columns: 36px minmax(0, 1fr) 20px; }
  .plist__tag { grid-column: 2; grid-row: 2; margin-top: -6px; font-size: 11px; }
  .plist__go { grid-column: 3; grid-row: 1; }
}

/* первый экран — ровно в экран устройства: размеры зависят и от высоты окна, кнопки и цифры видны без прокрутки */
.phx { height: 100svh; min-height: 0; justify-content: safe flex-end; }
.phx__copy { padding-top: calc(var(--nav-h) + clamp(10px, 3svh, 40px)); }
.phx .crumbs { margin-bottom: clamp(6px, 1.4svh, 18px); }
.phx .updated { margin-bottom: clamp(12px, 3.4svh, 72px); }
/* заголовок держит ширину блока, а не число знаков: на невысоком окне шрифт мельче, а строк меньше (длинный H1 не выталкивает крошки под шапку) */
.phx__h1 { max-width: max(12ch, min(48.6vw, 860px)); font-size: clamp(40px, min(7vw, 11svh, 14.3svh - 30px), 124px); }
.phx--light .phx__h1 { font-size: clamp(40px, min(6.2vw, 10svh, 13svh - 27px), 112px); }
.phx__lead { margin-top: clamp(12px, 2.4svh, 30px); font-size: clamp(15px, min(1.35vw, 2.3svh), 21px); }
.phx .ph__act { margin-top: clamp(14px, 3svh, 40px); }
.phx__facts { margin-top: clamp(16px, 4.4svh, 96px); }
.phx__facts li { padding-top: clamp(8px, 1.6svh, 16px); }
/* цифры: кегль ограничен шириной колонки (container query): цифра до 5,2 em заходит в промежуток не больше чем на половину и на соседнюю не залезает; короткие цифры на 1440 — прежнего кегля */
.phx__facts b { font-size: clamp(16px, min(2.7vw, 4.6svh, (100cqi - var(--fgap) / 2) / 15.6), 44px); }
.phx__bottom { padding-bottom: clamp(14px, 3.6svh, 48px); }
/* невысокие окна ноутбуков: отступы первого экрана плотнее, чтобы крошки стояли под шапкой с воздухом */
@media (min-width: 900px) and (max-height: 940px) {
  .phx .updated { margin-bottom: clamp(10px, 2svh, 20px); }
  .phx .label { margin-bottom: 10px; }
  .phx__lead { margin-top: clamp(10px, 2svh, 20px); }
  .phx .proof { margin-top: clamp(12px, 1.8svh, 18px); }
  .phx .ph__act { margin-top: clamp(12px, 2.4svh, 24px); }
  .phx__facts { margin-top: clamp(14px, 3svh, 28px); }
  .phx__bottom { padding-bottom: clamp(14px, 3svh, 28px); }
}
@media (min-width: 900px) and (max-height: 760px) {
  .phx .ph__act .btn { height: 44px; }
}
/* совсем невысокие окна (≤580 px: 1280×720 с панелью задач и закладками): H1 в 4 строки (татуировки, пилинг, аудитория) не уводит цифры за нижний край */
@media (min-width: 900px) and (max-height: 580px) {
  .phx .updated { margin-bottom: 6px; }
  .phx .label { margin-bottom: 6px; }
  .phx__lead { margin-top: 8px; font-size: 14px; line-height: 1.45; }
  .phx .proof { margin-top: 8px; }
  .phx .ph__act { margin-top: 10px; }
  .phx .ph__act .btn { height: 40px; }
  .phx__facts { margin-top: 10px; }
  .phx__facts li { padding-top: 6px; }
  .phx__bottom { padding-bottom: 10px; }
}
@media (max-width: 899px) {
  .phx { height: 100svh; min-height: 0; }
  .phx__h1 { max-width: 12ch; font-size: clamp(34px, min(14vw, 7.4svh), 72px); }
  .phx .updated { margin-bottom: clamp(10px, 2.2svh, 20px); }
  .phx__facts { margin-top: clamp(14px, 3svh, 32px); }
  .phx__facts b { font-size: clamp(15px, min(2.7svh, (100cqi - 2 * var(--fgap)) / 15.4), 22px); }
  .phx--light .phx__facts b { font-size: 22px; }
  .phx--light .phx__media { height: auto; flex: 1 1 0; min-height: 18svh; }
  .phx--light .phx__copy { padding-top: clamp(12px, 2.6svh, 28px); }
}
@media (max-width: 899px) and (max-height: 780px) {
  /* невысокие телефоны: крошки и дата уступают место главному; крошки остаются в разметке BreadcrumbList */
  .phx .crumbs, .phx .updated { display: none; }
  .phx--light .phx__media { min-height: 12svh; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .phx__lead { font-size: 14px; line-height: 1.42; }
  .phx .ph__act .btn { height: 42px; padding: 0 20px; }
  .phx__facts span { font-size: 11px; }
}

/* первый экран с рентгеном: экран держится, пока прокрутка перематывает видео */
.phx-pin { height: 240svh; }
.phx-pin > .phx { position: sticky; top: 0; }
.phx--xray { background: #000; }
.phx__xray { position: absolute; top: var(--nav-h); right: 0; bottom: 0; width: 54%; margin: 0; display: flex; align-items: center; justify-content: center; }
.phx__xray video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* текст не заходит на рентген: колонка до левого края видео (46%) */
.phx--xray { --xcol: calc(46vw - max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))) - 32px); }
.phx--xray .phx__h1 { max-width: min(12ch, var(--xcol)); }
.phx--xray .phx__lead, .phx--xray .proof, .phx--xray .ph__act { max-width: min(540px, var(--xcol)); }
.phx--xray .phx__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .5) 36%, rgba(0, 0, 0, 0) 58%), linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 32%); }
/* блок «Производство»: ролик сборки фоном, затемнён под текстом */
.pg .s.asm { position: relative; display: flex; align-items: center; min-height: 86svh; overflow: hidden; }
.asm__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.asm__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .72) 40%, rgba(10, 10, 10, .38) 100%); }
.asm__copy { position: relative; z-index: 1; }
.asm__copy > * { max-width: 640px; }
@media (max-width: 899px) {
  .phx-pin { height: 200svh; }
  .phx__xray { left: 0; right: 0; width: auto; bottom: auto; height: 36svh; }
  .phx--xray { --xcol: 100vw; }
  .phx--xray .crumbs, .phx--xray .updated { display: none; }
  .pg .s.asm { min-height: 80svh; }
  .asm__shade { background: linear-gradient(0deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .72) 55%, rgba(10, 10, 10, .5) 100%); }
  .phx--xray .phx__shade { background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .66) 46%, rgba(0, 0, 0, 0) 68%); }
}
@media (prefers-reduced-motion: reduce) {
  .phx-pin { height: auto; }
  .phx-pin > .phx { position: relative; }
}

/* документы: номера РУ — ссылки на карточки госреестра */
.cmp td a, .note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cmp td small { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.note { margin: 14px 0 0; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* SEO-аудит 18.10.2026: надзаголовок как первая строка H1 — H1 несёт запрос («Аппарат для лазерной эпиляции 1S PRO»),
   а выглядит как раньше: мелкая подпись + крупное название. Разметка: <h1 class="phx__h1"><span class="h1-pre">…</span> Название</h1> */
.h1-pre { display: block; margin: 0 0 16px; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.phx .h1-pre { color: rgba(255, 255, 255, .62); }
.phx--light .h1-pre { color: var(--ink-3); }