/* Технология IPLASER: страница-витрина. Поверх lab/ipro-mini/style.css и lab/pages.css, только для этой страницы. */

.ipx { --hp-bg: #0b0d11; }

/* ── первый экран: рукоятка в темноте, окно излучателя даёт три вспышки ── */
.ipx-hero { background: var(--hp-bg); isolation: isolate; }
/* высота рендера ограничена шириной: на 1920+ и 2560 рукоятка не заходит под текст (левый край не ближе 480px от начала колонки) */
.ipx-hero__media { position: absolute; z-index: 0; top: var(--nav-h); right: max(0px, calc((100vw - 1240px) / 2 - 20px)); height: min(calc(100svh - var(--nav-h)), calc((100vw - max(0px, calc((100vw - 1240px) / 2 - 20px)) - max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))) - 480px) * 1.25)); aspect-ratio: 4 / 5; margin: 0; pointer-events: none; will-change: transform; }
.ipx-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* окно излучателя: координаты из кадра рендера (1200 × 1500) */
.ipx-hero__win { position: absolute; left: 36.6%; top: 16.7%; width: 28.4%; height: 6.1%; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 70, 40, .26), rgba(255, 60, 33, .12)); mix-blend-mode: screen; }
.ipx-hero__win i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #ffd2c4 0%, #ff6a4a 38%, #ff3c21 70%, #b8160a 100%); box-shadow: 0 0 18px 4px rgba(255, 90, 60, .95), 0 0 70px 24px rgba(255, 60, 33, .55), 0 0 160px 70px rgba(255, 60, 33, .22); opacity: 0; }
.ipx-hero__win i::after { content: ""; position: absolute; left: 5%; right: 5%; top: 43%; height: 13%; border-radius: 99px; background: #fff7f3; box-shadow: 0 0 6px 2px rgba(255, 225, 210, .95), 0 0 18px 6px rgba(255, 120, 90, .7); }
.ipx-hero__bloom { position: absolute; left: 50.8%; top: 19.7%; width: 150%; aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 70, 40, .62), rgba(255, 60, 33, .22) 38%, rgba(255, 60, 33, 0) 72%); mix-blend-mode: screen; opacity: 0; }
.ipx-hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--hp-bg) 0%, rgba(11, 13, 17, .86) 30%, rgba(11, 13, 17, 0) 54%), linear-gradient(0deg, rgba(11, 13, 17, .9) 0%, rgba(11, 13, 17, 0) 26%); }
.ipx-hero .phx__copy > *, .ipx-hero .phx__facts { max-width: min(620px, 46vw); }
.ipx-hero .phx__h1 { max-width: 11ch; font-size: clamp(40px, min(5.6vw, 8.6svh), 100px); }
.ipx-hero .phx__h1 .w { display: inline-block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; vertical-align: top; }
.ipx-hero .phx__h1 .w > span { display: inline-block; }
.ipx-hero .claim { margin-top: clamp(14px, 2.6svh, 28px); }
.ipx-hero .claim b { font-size: clamp(22px, min(2.3vw, 3.9svh), 36px); }
.ipx-hero .claim span { margin-top: clamp(6px, 1.2svh, 12px); font-size: clamp(13px, min(1.05vw, 1.8svh), 15px); }
.ipx-hero .phx__lead { max-width: min(560px, 46vw); }
.ipx-hero .claim { max-width: min(560px, 46vw); }
.ipx-hero__bottom { z-index: 2; }

/* живой след вспышки: три импульса, как на осциллографе */
.ipx-trace { position: absolute; z-index: 2; right: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); bottom: clamp(28px, 6svh, 64px); width: clamp(220px, 20vw, 300px); margin: 0; color: rgba(255, 255, 255, .62); pointer-events: none; }
/* на невысоком окне рендер уже, рукоятка сдвигается вправо: левый край графика не заходит на неё (край рукоятки — 31% ширины кадра; те же размеры, что у .ipx-hero__media). На 1440×900 и выше ширина прежняя (QA 18.10.2026) */
.ipx-trace { --tr-ro: max(0px, calc((100vw - 1240px) / 2 - 20px)); --tr-lx: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); --tr-rh: min(calc(100svh - var(--nav-h)), calc((100vw - var(--tr-ro) - var(--tr-lx) - 480px) * 1.25)); width: clamp(200px, min(20vw, calc(.552 * var(--tr-rh) + var(--tr-ro) - var(--tr-lx) - 24px)), 300px); }
.ipx-trace__s { white-space: nowrap; }
.ipx-trace__k, .ipx-trace__s { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.ipx-trace__s { margin-top: 10px; letter-spacing: .06em; text-transform: none; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .45); }
.ipx-trace__plot { position: relative; height: 64px; margin-top: 30px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ipx-trace__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 0 0 0); }
.ipx-trace__base { stroke: rgba(255, 255, 255, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ipx-trace__line { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255, 60, 33, .8)); }
.ipx-trace__plot span { position: absolute; left: var(--x); top: -2px; translate: -50% -100%; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .5); }

/* ритм одной вспышки: 3,6 с на цикл, импульсы через ~330 мс, потом пауза */
@keyframes ipx-flash { 0%, 2.7% { opacity: 0; } 3.1% { opacity: 1; } 7.6% { opacity: 0; } 11.9% { opacity: 0; } 12.3% { opacity: 1; } 16.8% { opacity: 0; } 21.1% { opacity: 0; } 21.5% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ipx-bloom { 0%, 2.7% { opacity: .06; } 3.1% { opacity: .5; } 8.6% { opacity: .14; } 11.9% { opacity: .12; } 12.3% { opacity: .56; } 17.8% { opacity: .18; } 21.1% { opacity: .16; } 21.5% { opacity: .62; } 30% { opacity: .06; } 100% { opacity: .06; } }
@keyframes ipx-trace { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 30% { clip-path: inset(0 0 0 0); opacity: 1; } 80% { clip-path: inset(0 0 0 0); opacity: 1; } 92%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes ipx-num { 0%, 2.9% { color: rgba(255, 255, 255, .3); } 3.2%, 80% { color: var(--white); } 92%, 100% { color: rgba(255, 255, 255, .3); } }
.ipx-hero.is-live .ipx-hero__win i { animation: ipx-flash 3.6s linear infinite; }
.ipx-hero.is-live .ipx-hero__bloom { animation: ipx-bloom 3.6s linear infinite; }
.ipx-hero.is-live .ipx-trace__plot svg { animation: ipx-trace 3.6s linear infinite; }
.ipx-hero.is-live .ipx-trace__plot span { animation: ipx-num 3.6s linear infinite; }
.ipx-hero.is-live .ipx-trace__plot span:nth-of-type(2) { animation-name: ipx-num2; }
.ipx-hero.is-live .ipx-trace__plot span:nth-of-type(3) { animation-name: ipx-num3; }
@keyframes ipx-num2 { 0%, 12.1% { color: rgba(255, 255, 255, .3); } 12.4%, 80% { color: var(--white); } 92%, 100% { color: rgba(255, 255, 255, .3); } }
@keyframes ipx-num3 { 0%, 21.3% { color: rgba(255, 255, 255, .3); } 21.6%, 80% { color: var(--white); } 92%, 100% { color: rgba(255, 255, 255, .3); } }
.ipx-hero.is-paused * { animation-play-state: paused !important; }
html:not(.js) .ipx-hero__win i { opacity: .7; }

/* ── общий заголовок блока: название слева, пояснение справа ── */
.ipx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 56px; }
.ipx-head > div { flex: 1 1 520px; }
.ipx-head > .lead { flex: 0 1 460px; margin: 0; }

/* ── история: спектр ── */
.ipx-story .split { margin-bottom: clamp(48px, 7vw, 96px); }
.spec { position: relative; margin: 0; padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.4vw, 36px) clamp(20px, 2.4vw, 30px); border-radius: var(--radius); background: var(--hp-bg); color: var(--white); overflow: hidden; }
.spec::before { content: ""; position: absolute; inset: -40% -10% auto; height: 80%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 60, 33, .14), rgba(255, 60, 33, 0)); pointer-events: none; }
.spec__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.spec__k { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.spec__tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.spec__tab { appearance: none; border: 0; padding: 10px 16px; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .7); font: 500 14px/1 "Manrope", sans-serif; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease); }
.spec__tab:hover { color: var(--white); }
.spec__tab[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.spec__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.spec__svg { position: relative; display: block; width: 100%; height: auto; max-height: calc(100svh - var(--spec-off, 150px) - var(--spec-chrome, 230px)); margin-top: clamp(10px, 2vw, 24px); overflow: visible; }
.spec__grid line { stroke: rgba(255, 255, 255, .06); }
.spec__area { opacity: .95; }
.spec__curve { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2; }
.spec__ax { stroke: rgba(255, 255, 255, .3); }
.spec__t { fill: rgba(255, 255, 255, .9); font: 500 15px "Manrope", sans-serif; }
.spec__t--cut { font-size: 17px; font-weight: 600; fill: var(--white); }
.spec__t--sub { font-size: 13px; font-weight: 400; fill: rgba(255, 255, 255, .62); }
.spec__t--band { font-size: 17px; font-weight: 600; fill: var(--white); }
.spec__t--wide { font-size: 15px; fill: rgba(255, 255, 255, .8); }
.spec__edge line { stroke: var(--red); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255, 60, 33, .9)); }
.spec__edge circle { fill: var(--red); }
.spec[data-mode="560"] .spec__edge line { stroke: var(--amber); filter: drop-shadow(0 0 6px rgba(245, 184, 0, .9)); }
.spec[data-mode="560"] .spec__edge circle { fill: var(--amber); }
.spec__band line { stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
.spec__ticks text, .spec__zones text { fill: rgba(255, 255, 255, .55); font: 500 14px "Manrope", sans-serif; }
.spec__zones text { font-size: 12px; font-weight: 400; letter-spacing: .08em; fill: rgba(255, 255, 255, .38); }
.spec__nm { opacity: .35; transition: opacity .4s var(--ease); }
.spec__ticks .spec__nm.is-on { opacity: 1; fill: var(--white); font-weight: 600; }
.spec__note { position: relative; margin: clamp(8px, 1.4vw, 16px) 0 0; max-width: 760px; min-height: 3.1em; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .74); }

/* ── три импульса ── */
.ipx-pulses .pulse { margin-top: clamp(32px, 5svh, 64px); }
.ipx-pulses .pulse__panel { padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px) clamp(16px, 1.6vw, 22px); }

/* ── CoolSense: блок держится на экране, пока прокрутка просвечивает рукоятку ── */
@media (min-width: 900px) {
  .pg .s.ipx-cool { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 54px) 0 32px; }
  .ipx-cool .cool__media { width: min(100%, calc((100svh - var(--nav-h) - 110px) * .8)); }
}
.ipx-cool .ticks li { font-size: 16px; }
.pg .s.ipx-frost { padding-top: clamp(40px, 6vw, 96px); }
.ipx-frost__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 6vw, 104px); }
.ipx-frost__media { margin: 0; width: min(100%, calc(78svh * .8)); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: #f6f6f6; }
.ipx-frost__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 18%; }
.ipx-frost .claim { margin-top: 0; }
.ipx-frost .claim b { font-size: clamp(34px, 4.4vw, 68px); line-height: 1; }
.ipx-frost .claim span { margin-top: 18px; font-size: clamp(16px, 1.3vw, 19px); }

/* ── устройство: схема рукоятки ── */
.ipx-inside { background: #07080a; }
.hp { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); align-items: center; gap: clamp(28px, 4vw, 72px); margin-top: clamp(32px, 5svh, 64px); }
.hp__fig { margin: 0; }
.hp__svg { display: block; width: 100%; height: auto; overflow: visible; }
.hp__cap { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .4); }
.hp__shell { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .32); stroke-width: 1.5; }
.hp__tube { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.hp__el { fill: rgba(255, 255, 255, .22); }
.hp__core { stroke: #ffe9df; stroke-width: 4; stroke-linecap: round; opacity: .35; filter: drop-shadow(0 0 6px rgba(255, 140, 110, .9)); }
.hp__broad, .hp__narrow, .hp__beam { opacity: .14; }
.hp__filter { fill: rgba(255, 60, 33, .55); stroke: rgba(255, 140, 110, .8); stroke-width: 1; }
.hp__sapphire { fill: rgba(150, 200, 255, .12); stroke: rgba(170, 210, 255, .6); stroke-width: 1.2; }
.hp__frame { fill: #8e959c; }
.hp__wire { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; stroke-dasharray: 3 4; }
.hp__epi { fill: rgba(236, 196, 172, .5); }
.hp__derm { fill: rgba(205, 140, 118, .14); }
.hp__hairs path { stroke: rgba(40, 24, 18, .9); stroke-width: 3; stroke-linecap: round; }
.hp__hairs path:nth-child(n + 4) { opacity: .5; }
.hp__bulbs circle[data-hp-bulb] { opacity: .25; }
.hp__bulb--off { fill: rgba(60, 34, 26, .9); }
.hp__tc-dot { fill: var(--red); }
.hp__tc-ring { fill: none; stroke: var(--red); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hp-ping 1.8s ease-out infinite; }
@keyframes hp-ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.hp__leads line { stroke: rgba(255, 255, 255, .3); stroke-width: 1; stroke-dasharray: 2 4; }
.hp__marks circle { fill: var(--hp-bg); stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
.hp__marks text { fill: var(--white); font: 600 17px "Manrope", sans-serif; }
.hp__lbl { fill: rgba(255, 255, 255, .5); font: 500 14px "Manrope", sans-serif; letter-spacing: .04em; }
.hp__pulse circle { fill: rgba(255, 255, 255, .16); }
.hp__list { counter-reset: hp; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hp__list li { counter-increment: hp; position: relative; padding: 18px 0 18px 52px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hp__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hp__list li::before { content: counter(hp); position: absolute; left: 0; top: 16px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; font-size: 14px; font-weight: 600; }
.hp__list b { display: block; font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; letter-spacing: -.01em; }
.hp__list span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .66); }
@media (prefers-reduced-motion: reduce) {
  .hp__tc-ring { animation: none; opacity: 0; }
  .hp__broad, .hp__narrow, .hp__beam { opacity: .6; }
  .hp__bulbs circle[data-hp-bulb] { opacity: .8; }
  .hp__core { opacity: 1; }
}

/* ── управление ── */
.ipx-smart .split { align-items: center; }
.ipx-smart__media { overflow: hidden; border-radius: var(--radius); background: #eceeef; }
.ipx-smart__media img { width: 100%; height: auto; }
.lvls__k { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ipx-smart .lvl i { background: #e2e2de; }
.ipx-smart .steps3 { margin-top: clamp(40px, 6svh, 72px); }

/* ── Nd:YAG ── */
.ipx-yag { background: #050506; }
.ipx-yag__media { overflow: hidden; border-radius: var(--radius); background: #fff; }
.ipx-yag__media img { width: 100%; height: auto; }
.ipx-yag__tasks { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ipx-yag__tasks a { display: inline-block; padding: 14px 22px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-size: clamp(15px, 1.2vw, 17px); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.ipx-yag__tasks a::after { content: " →"; color: rgba(255, 255, 255, .5); }
.ipx-yag__tasks a:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }

/* ── аппараты ── */
.ipx-devcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ipx-devcards .devcard__img { aspect-ratio: 4 / 3; }
.ipx-devcards .devcard__name { font-size: clamp(22px, 1.8vw, 28px); }
.ipx-devcards .devcard__sub { flex: 1; line-height: 1.5; }
.ipx-devcards .devcard:nth-child(3) .devcard__img img { object-position: 0% 50%; }
.ipx-devcards .devcard:nth-child(4) .devcard__img img { object-position: 50% 100%; }

/* ── видео ── */
.ipx-vids .vids__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }

@media (max-width: 1099px) {
  .ipx-devcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipx-trace { display: none; }
}

@media (max-width: 899px) {
  .ipx-hero__media { top: calc(var(--nav-h) - 3svh); right: -20vw; width: 116vw; height: auto; }
  .ipx-hero__shade { background: linear-gradient(0deg, var(--hp-bg) 0%, rgba(11, 13, 17, .94) 48%, rgba(11, 13, 17, .55) 60%, rgba(11, 13, 17, 0) 74%); }
  .ipx-hero .phx__copy > *, .ipx-hero .phx__facts { max-width: none; }
  .ipx-hero .phx__h1 { max-width: none; font-size: clamp(32px, min(10.6vw, 6.2svh), 60px); }
  .ipx-hero .phx__lead { display: none; }
  .ipx-hero .crumbs, .ipx-hero .updated { display: none; }
  .ipx-hero .claim b { font-size: clamp(20px, 3svh, 26px); }
  .ipx-hero .claim span { font-size: 13px; line-height: 1.45; }
  .ipx-hero .ph__act { margin-top: clamp(12px, 2.2svh, 22px); }
  .ipx-head { gap: 14px; }
  .ipx-head > .lead { margin: 0; }
  .ipx-story .split { margin-bottom: 40px; }
  .spec { padding: 16px 14px 18px; }
  .spec__tabs { width: 100%; flex-wrap: nowrap; }
  .spec__tab { flex: 1 1 auto; padding: 10px 10px; font-size: 13px; white-space: nowrap; }
  .spec__pre { display: none; }
  .hp { grid-template-columns: 1fr; gap: 20px; }
  .hp__list li { padding: 14px 0 14px 46px; }
  .hp__list li::before { top: 12px; width: 30px; height: 30px; font-size: 13px; }
  .hp__list span { font-size: 14px; }
  .ipx-frost__grid { grid-template-columns: 1fr; gap: 24px; }
  .ipx-frost__media { width: 100%; aspect-ratio: 4 / 3.4; }
  .ipx-frost__media img { object-position: 20% 22%; }
  .ipx-smart__media { order: -1; }
  .ipx-vids .vids__grid { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .spec__t--sub, .spec__zones { display: none; }
  .spec__t--cut { font-size: 30px; }
  .spec__t--band { font-size: 30px; }
  .spec__t--wide { font-size: 28px; }
  .spec__ticks text { font-size: 28px; }
  .spec__edge circle { r: 8; }
  .spec__note { font-size: 14px; min-height: 7.8em; }
  .hp__marks text { font-size: 28px; }
  .hp__marks circle { r: 24; }
  .hp__lbl { font-size: 24px; }
  .hp__lbl--sm { display: none; }
  .ipx-devcards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ipx-devcards::-webkit-scrollbar { display: none; }
  .ipx-devcards .devcard { scroll-snap-align: start; }
  .ipx-yag__tasks a { padding: 12px 18px; }
}

@media (max-width: 899px) and (max-height: 700px) {
  .ipx-hero__media { top: calc(var(--nav-h) - 8svh); width: 100vw; right: -12vw; }
  .ipx-hero .claim span { font-size: 12px; line-height: 1.4; }
  .ipx-hero .phx__facts span { font-size: 11px; }
}

/* невысокие окна ноутбуков: заголовок в две строки, колонка шире — первый экран целиком под шапкой (QA 18.10.2026) */
@media (min-width: 900px) and (max-height: 760px) {
  .ipx-hero .phx__copy > *, .ipx-hero .phx__facts, .ipx-hero .phx__lead { max-width: min(620px, 52vw); }
  .ipx-hero .phx__h1 { max-width: max(11ch, min(52vw, 620px)); font-size: clamp(36px, min(5.6vw, 8.6svh, 11.2svh - 23px), 100px); }
  .ipx-hero .claim { margin-top: clamp(10px, 2svh, 20px); }
  .ipx-hero .claim b { font-size: clamp(20px, min(2.3vw, 3.4svh), 36px); }
}
/* дата прячется только на узком невысоком окне (1024×600): на 1100+ при той же высоте ей хватает места (QA 18.10.2026) */
@media (min-width: 900px) and (max-width: 1099px) and (max-height: 640px) {
  .ipx-hero .updated { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ipx-hero * { animation: none !important; }
  .ipx-hero__win i { opacity: .75; }
  .ipx-hero__bloom { opacity: .5; }
  .ipx-trace__plot span { color: var(--white); }
}

/* pinned spectrum: on mid widths the longest note runs to three lines */
@media (min-width: 600px) and (max-width: 1100px) { .spec__note { min-height: 4.7em; } }

/* «Путь света в рукоятке» по скроллу: блок закреплён и помещается в один экран, пункты мягко выплывают по очереди */
.hp.is-story { align-items: center; }
.hp.is-story .hp__svg { max-height: calc(100svh - var(--hp-off, 110px) - 70px); width: 100%; }
.hp.is-story .hp__cap { margin-top: 6px; }
.hp.is-story .hp__list li { padding: 12px 0 12px 48px; opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.hp.is-story .hp__list li::before { top: 10px; }
.hp.is-story .hp__list b { font-size: clamp(17px, 1.3vw, 20px); }
.hp.is-story .hp__list span { margin-top: 4px; font-size: 14px; line-height: 1.5; }
.hp.is-story .hp__list li.is-shown { opacity: .5; transform: none; }
.hp.is-story .hp__list li.is-on { opacity: 1; }
.hp__list li.is-on::before { border-color: var(--red); background: var(--red); }
.hp__list .hp__list-pulses { counter-increment: none; }
.hp__list .hp__list-pulses::before { content: ""; background: radial-gradient(circle, var(--red) 0 4px, transparent 5px) 6px 50% / 10px 10px no-repeat, radial-gradient(circle, var(--red) 0 4px, transparent 5px) 15px 50% / 10px 10px no-repeat, radial-gradient(circle, var(--red) 0 4px, transparent 5px) 24px 50% / 10px 10px no-repeat; }
.hp__marks circle, .hp__marks text { transition: fill .35s ease, stroke .35s ease; }
.hp__marks g.is-on circle { fill: var(--red); stroke: var(--red); }
.hp__now { display: none; }
@media (max-width: 899px) {
  .hp.is-story .hp__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hp.is-story .hp__svg { max-height: 46svh; }
  .hp__now { display: block; min-height: 7.5em; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
  .hp__now b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 400; color: var(--white); }
  .hp__now.is-in { animation: hp-now .55s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes hp-now { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* узкие экраны: блок «Путь света» закреплён целиком — заголовок, схема и текущий шаг на одном экране */
@media (max-width: 899px) {
  .ipx-inside.is-held { min-height: 100vh; min-height: 100svh; padding-bottom: 16px; }
  .ipx-inside.is-held .hp { margin-top: 14px; }
  .ipx-inside.is-held .hp__cap { margin-top: 4px; font-size: 12px; }
  .ipx-inside.is-held .hp__now { margin-top: 8px; min-height: 6.2em; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .ipx-inside.is-held .ipx-head .lead { display: none; }
}

/* «Путь света» закреплён целиком и на десктопе: заголовок, схема и список на одном экране */
.pg .s.ipx-inside.is-held { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--nav-h) + 28px); padding-bottom: 20px; }
.ipx-inside.is-held .hp { margin-top: clamp(16px, 3svh, 40px); }
.ipx-inside.is-held .hp__cap { margin-top: 4px; }
@media (min-width: 900px) and (max-height: 860px) {
  .ipx-inside.is-held .h2 { font-size: clamp(34px, 6.4svh, 64px); }
  .ipx-inside.is-held .ipx-head .lead { font-size: 15px; }
  .ipx-inside.is-held .hp__list li { padding: 9px 0 9px 46px; }
  .ipx-inside.is-held .hp__list span { font-size: 13px; }
}

/* CoolSense — блок 1 в 1 со страницы iPRO MINI: секция на весь экран, как .s в /lab/ipro-mini/style.css */
.pg .s#coolsense { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 24px) 0 clamp(40px, 6svh, 72px); }