/* Стили публичной главной OKADAR (все языковые версии, генерируются из scripts/landing/). Разметка - scripts/landing/
   {template,visuals}.mjs; токены шкалы главной (--pub-*) - platform/theme.css, шапка/футер/кнопки - scripts/shared/chrome.mjs.
   Визуальная система - ТЗ 2026-09-30 §5/§23/§24: industrial / architectural / premium B2B - пространство, крупная
   типографика, реальные интерфейсы, размеры и материалы; минимум декоративных эффектов, карточки - только там, где
   элементы действительно независимы (варианты старта, цены), остальное - композиции на тонких линиях. */

/* Контейнер, секции, полосы, шапки секций, кегли, карточки (.start/.price), шаги (.steps) и список .ticks - общие для
   всех публичных страниц: platform/site.css (подключается раньше этого файла). */
.lp-band--demo { background: var(--bg-section, var(--surface-3)); border-block: 1px solid var(--line); }


/* ============================ 1 · ПЕРВЫЙ ЭКРАН ============================ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); align-items: center;
  padding-block: clamp(40px, 6.5vw, 104px) clamp(56px, 7vw, 112px); }
.hero h1 { margin: 0; font-size: var(--pub-h1); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
/* Слоган - две строки (владелец 30.09): «Ваш конфигуратор.» / «Ваш визуализатор.» - каждое предложение с новой строки и
   в одну строку колонки: кегль H1 по --w (самая длинная строка в долях кегля, scripts/landing/template.mjs heroTitleW) -
   не больше --pub-h1 и не меньше 28 px (длинные слова финского, литовского, итальянского на телефоне). */
.hero__text { container-type: inline-size; }
.hero h1[style] { font-size: clamp(28px, calc(100cqi / (var(--w) * 1.02)), var(--pub-h1)); }
.hero h1 .hero__l { display: block; }
.hero__lead { margin: 24px 0 0; font-size: var(--pub-lead); line-height: 1.55; color: var(--muted); max-width: 34em; text-wrap: pretty; }
/* Ряд кнопок .hero-cta - общий: platform/site.css. */
/* Строка отличий (§7): компактная строка под кнопками, не карточки. */
.trust { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .ic { width: 18px; height: 18px; color: var(--accent); }
/* HeroVisual (§6): контейнер задаёт размер, положение, фон и пропорции; внутри - демо-модель demo-01 и кружки реек. */
.hero-visual { position: relative; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 1 / 1; }
.hero-visual__frame { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-visual__frame > .hv { width: 100%; height: 100%; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .hero__text { grid-column: 1 / span 6; }
  .hero-visual { grid-column: 7 / span 6; justify-self: end; }
}

/* Сауна demo-01 в первом экране: снимок настоящего конфигуратора на мягкой подложке (лист как у карточек сайта) и
   полоса выбора реек фасада - подпись группы, кружки дерева (как у конфигуратора), название выбранного. */
.hv { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 24px; padding: 14px; }
.hv__stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 38%, rgba(var(--accent-rgb), .10), transparent 70%), var(--surface); }
.hv__img { display: block; width: 88%; height: 88%; object-fit: contain; }
.hv__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 12px 4px 2px; }
.hv__t { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hv__sws { display: inline-flex; gap: 8px; }
.hv__sw { width: 34px; height: 34px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; overflow: hidden; cursor: pointer;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow .15s ease; }
.hv__sw img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv__sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.hv__sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .hv__sw:not([aria-pressed="true"]):hover { box-shadow: 0 0 0 2px var(--muted-light); } }
.hv__name { min-width: 9ch; font-size: 14px; font-weight: 700; color: var(--text); }

/* ============================ 2 · ЧТО МОЖНО ДОБАВИТЬ (§8) ============================
   Сетка шести возможностей на тонких линиях (не карточки): схема языком чертежа (ТЗ 30.09 - одна возможность на схему),
   номер и категория, заголовок, одно предложение. Схема - 300 × 120 в масштабе 1:1 (подписи 12 px), не шире колонки. */
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px); }
/* Ряд карточек - общие строки (subgrid, владелец 30.09 «всё ровно»): схема, надпись, заголовок и текст соседних
   карточек начинаются на одной высоте, даже если у соседа заголовок или текст длиннее. Раньше карточка растягивалась
   до высоты соседа, и лишняя высота делилась между её строками - надписи и заголовки съезжали на 7-15 px. Без subgrid
   (старые браузеры) - align-content: start: строки не растягиваются. */
.feat { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; row-gap: 12px; padding: 26px 0 30px;
  border-top: 1px solid var(--line-strong); }
.feat__drw { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 4px; overflow: visible; }
/* Схема вписана в общую полосу масштабом --k (visuals.mjs featureDrawing): подписи - те же 12 px, что у всех схем. */
.feat__drw .dw-t, .feat__drw .dim text, .feat__drw .dw-scale text { font-size: calc(12px / var(--k, 1)); }
.feat__k { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.feat__k span { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.feat h3 { margin-top: 6px; }
.feat p:last-child { margin: 0; color: var(--muted); max-width: 40ch; }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================ 3 · ДЕМОНСТРАЦИЯ (§9) ============================
   Мини-страница изделия: модель ~65 %, панель конфигурации ~35 % (--wac-panel-basis конфигуратора); на телефоне
   конфигуратор сам ставит модель сверху, панель - снизу. Высота сцены задана заранее - модель не сдвигает страницу. */
.demo-stage { position: relative; height: clamp(520px, 68vh, 760px); border-radius: 24px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); container-type: size; }
/* Снимок сауны над нижней полосой сообщений и кнопок (.demo-stage__ui до ~120 px): ширина - по высоте сцены без этой
   полосы и пропорции снимка (670 × 693), не шире 520 px. */
.demo-stage__poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 24px 128px; }
.demo-stage__img { display: block; width: min(100cqw - 48px, (100cqh - 152px) * .967, 520px); height: auto; }
.demo-stage__live { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.demo-stage__live webar-configurator { display: block; width: 100%; height: 100%; --wac-panel-basis: 35%; }
.demo-stage.is-live .demo-stage__live { opacity: 1; pointer-events: auto; }
.demo-stage.is-live .demo-stage__poster, .demo-stage.is-live .demo-stage__ui { visibility: hidden; }
.demo-stage__ui { position: absolute; left: 16px; right: 16px; bottom: 24px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.demo-stage__ui > * { pointer-events: auto; }
.demo-stage:not(.can-3d) .demo-stage__go, .demo-stage.is-loading .demo-stage__go, .demo-stage.is-failed .demo-stage__go { display: none; }
.demo-stage__msg { margin: 0; max-width: 480px; padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.95); color: #0b1220;
  font-size: 15px; line-height: 1.45; text-align: center; box-shadow: 0 10px 24px -12px rgba(18,20,30,.35); }
.demo-stage__msg p { margin: 0; }
.demo-stage__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px !important; }
.demo-stage__acts .lp-btn { background: #fff; color: #0b1220; border-color: rgba(11,18,32,.18); }
.demo-stage__msg p + p:not(.demo-stage__acts) { margin-top: 4px; }
.demo-why { margin-top: 8px; font-size: 12.5px; color: #4b5563; }
.demo-why summary { cursor: pointer; font-weight: 600; }
.demo-why summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.demo-why__code { display: block; margin-top: 4px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.demo-stage.is-loading .demo-stage__msg[data-msg="loading"] { animation: demo-wait 1.6s ease-in-out infinite; }
@keyframes demo-wait { 50% { opacity: .62; } }
/* Действий под сценой нет (владелец 30.09): AR, QR, размеры, ссылка и параметры - внутри самого конфигуратора. */
@media (max-width: 767px) {
  .demo-stage { height: clamp(560px, 86svh, 780px); border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .demo-stage__live { transition: none; } .demo-stage.is-loading .demo-stage__msg[data-msg="loading"] { animation: none; } }

/* ============================ Композиции «текст + визуал» (§24) ============================ */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); align-items: center; }
.split .sec-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .split__text { grid-column: 1 / span 5; }
  .split__visual { grid-column: 7 / span 6; }
  .split--rev .split__text { grid-column: 8 / span 5; grid-row: 1; }
  .split--rev .split__visual { grid-column: 1 / span 6; grid-row: 1; }
}

/* Язык чертежа (ТЗ владельца 30.09) - общий для схем возможностей, вариантов, размеров, WebAR: тонкие монохромные
   контуры, размерные линии с выносными линиями и засечками, подписи 12 px, прозрачный фон. Толщина - в px экрана при любом
   масштабе SVG (non-scaling-stroke): контур 1.4 > детали 0.9 > размерные линии и штриховка 0.8. --dw-paper - цвет листа
   под проёмами (штриховка обшивки не идёт через дверь и окно), задаётся по фону блока. Цвета - токены темы. */
:root { --dw-ink: var(--text); --dw-dim: var(--muted); --dw-faint: var(--muted-light); --dw-mat: color-mix(in srgb, var(--text) 30%, transparent);
  --dw-paper: var(--bg); }
.dw-1, .dw-2, .dw-3, .dw-h, .dw-g, .dw-a, .dw-l, .dw-p, .dim line, .dw-plus circle, .dw-plus path, .dw-scale rect { fill: none; vector-effect: non-scaling-stroke; }
.dw-1 { stroke: var(--dw-ink); stroke-width: 1.4; stroke-linejoin: round; }
.dw-2 { stroke: var(--dw-ink); stroke-width: .9; stroke-linejoin: round; }
.dw-3 { stroke: var(--dw-mat); stroke-width: .8; }
.dw-h { stroke: var(--dw-ink); stroke-width: .9; stroke-dasharray: 4 3; }
.dw-g { stroke: var(--dw-faint); stroke-width: .8; stroke-dasharray: 2 3; }
.dw-p { stroke: var(--dw-faint); stroke-width: .8; stroke-dasharray: 3 3; }
.dw-a { stroke: var(--accent); stroke-width: 1.4; }
.dw-l { stroke: var(--accent); stroke-width: .9; }
.dw-bg { fill: var(--dw-paper); }
.dw-dot { fill: var(--accent); }
.dw-dot--ink { fill: var(--dw-ink); }
.dw-t, .dim text, .dw-scale text { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dw-t, .dim text { fill: var(--dw-dim); }
.dw-t--a { fill: var(--accent-text); }
.dw-t--b { font-weight: 800; }
.dw-plus circle { stroke: var(--accent); stroke-width: 1.2; fill: var(--dw-paper); }
.dw-plus path { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.dw-scale rect { stroke: var(--accent); stroke-width: 1.2; fill: var(--dw-paper); }
.dw-scale text { fill: var(--accent-text); font-weight: 800; }
.dim line { stroke: var(--dw-dim); stroke-width: .8; }
.dim .dim__t { stroke-width: 1.2; }
.dim--accent line { stroke: var(--accent); }
.dim--accent text { fill: var(--accent-text); }

/* ============================ 4 · ОДНА МОДЕЛЬ - МНОГО ВАРИАНТОВ (§11) ============================ */
.vseq { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* align-content: start - подпись сразу под схемой: номера кадров одного ряда на одной высоте, даже если подпись соседа
   в две строки (раньше лишняя высота делилась между схемой и подписью). */
.vseq__step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 8px; align-items: baseline;
  padding: 12px 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
/* Кадр - снимок demo-01 в одной и той же рамке 5:4: снимок вписан и стоит на нижней кромке (у всех карточек одна высота
   рамки - подписи на одной линии). База, материал, размер и итог сняты в одном масштабе (scripts/tools/demo_renders.mjs,
   группа var) - длина 2700 видна длиннее. */
.vseq__pic { position: relative; grid-column: 1 / -1; aspect-ratio: 5 / 4; margin-bottom: 8px; }
.vseq__pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.vseq__ok { position: absolute; top: 0; right: 0; width: 24px; height: 24px; }
.vseq__ok svg { display: block; width: 100%; height: 100%; }
.vseq__step, .sizefig { --dw-paper: var(--surface-2); }
/* Тёмная тема: --surface-2 полупрозрачный - лист под схемой = его итоговый цвет на фоне страницы, без «заплаток». */
:root[data-theme="dark"] .vseq__step, :root[data-theme="dark"] .sizefig { --dw-paper: #0b1329; }
.vseq__step.is-final { border-color: rgba(var(--accent-rgb), .55); }
.vseq__step:last-child { grid-column: 1 / -1; }
.vseq__n { font-size: 12px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.vseq__t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.vseq__ok circle { fill: var(--accent); }
.vseq__ok path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) { .vseq { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vseq__step:last-child { grid-column: auto; } }
@media (min-width: 1024px) {
  .vseq { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .vseq__step { position: relative; padding: 16px 16px 18px; }
  .vseq__step + .vseq__step::before { content: ''; position: absolute; left: -15px; top: 42%; width: 9px; height: 9px; border-top: 1.5px solid var(--muted-light);
    border-right: 1.5px solid var(--muted-light); transform: rotate(45deg); }
  .vseq__t { font-size: 15px; }
}

/* ============================ 5 · РАЗМЕРЫ (§10) ============================ */
.cats__t { margin: 28px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Чип ниши - ссылка на её страницу «Отрасли» (/<lang>/industries/<ниша>/). */
.cats li { font-size: 14px; line-height: 1.3; border: 1px solid var(--line-strong); border-radius: 999px; }
.cats a { display: block; padding: 7px 12px; border-radius: inherit; color: var(--text); text-decoration: none; }
@media (hover: hover) { .cats li:hover { border-color: var(--accent); } .cats a:hover { color: var(--accent-text); } }
.cats a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sizefig { border: 1px solid var(--line); border-radius: 24px; background: var(--surface-2); padding: clamp(14px, 2vw, 24px); }
.sizefig__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.seg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; }
.seg__l { padding: 0 8px 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg__b { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 14.5px;
  font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.seg__b[aria-pressed="true"] { background: #0868FF; color: #fff; }   /* как основная кнопка - в обеих темах (4,7:1) */
.seg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .seg__b:not([aria-pressed="true"]):hover { color: var(--accent-text); } }
/* Чертёж размеров: снимки спереди и сбоку - <img> в процентах viewBox, размерные линии - SVG поверх. */
.sizefig__draw { position: relative; width: 100%; }
.sizefig__img { position: absolute; display: block; object-fit: fill; }
.sizefig__img[hidden] { display: none; }
.sizefig__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.sizefig__svg .dim { transition: opacity .25s ease; }
.sizefig__svg:not(.is-dims) .dim { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sizefig__svg .dim { transition: none; } }

/* ============================ 6 · WebAR (§12) ============================
   Как в конфигураторе (ТЗ-5.8): по устройству, а не по ширине окна - сенсорный экран: «Открыть в AR», иначе кнопка
   QR-окна самого конфигуратора демонстрации (отдельного QR рядом с телефоном нет - владелец 30.09). */
.ar__acts { margin-top: 32px; }
.ar .ar__btn--phone { display: none; }
.ar__note { margin: 20px 0 0; max-width: 60ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ar__visual { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
/* Телефон - чертёж тонкой линией (контур, экран, пол в перспективе, изделие 1:1 на метке размещения, размеры). */
.phone { position: relative; width: min(240px, 62vw); aspect-ratio: 220 / 420; }
.phone svg { display: block; width: 100%; height: 100%; overflow: visible; }
.phone__img { position: absolute; display: block; object-fit: fill; }
/* Телефон и планшет - после базовых правил блока (иначе базовое правило перебило бы скрытие). */
@media (hover: none) and (pointer: coarse) { .ar .ar__btn--phone { display: inline-flex; } .ar .ar__btn--desk { display: none; } }

/* ============================ 7 · ПОСЛЕ ПОДКЛЮЧЕНИЯ (§13) ============================ */
.vals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.val { padding: 26px 0 30px; border-top: 1px solid var(--line-strong); }
.val::before { content: ''; display: block; width: 32px; height: 3px; margin: -27.5px 0 24px; background: var(--accent); }
.val p { margin: 10px 0 0; color: var(--muted); }
@media (min-width: 640px) { .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================ 8 · КАК ЭТО РАБОТАЕТ (§14) ============================ */
.flow { list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Поток «3D-модель → Studio → сайт → WebAR». Без сценария и при «уменьшить движение» выделен этап Studio (is-studio).
   Сценарий (visuals.mjs flowDiagramJs, класс flow--run) проводит ОДИН проход, когда поток появляется в окне: активный этап
   (is-on) - синий контур и ореол, фон значка чуть насыщеннее; по стрелке к следующему этапу проходит синяя линия: is-in -
   входит слева и доходит до стрелки, is-out - уходит дальше (на телефоне стрелка вертикальная - сверху вниз). Линия - три
   трети фона (серая / синяя / серая), сдвиг background-position. Меняются только цвета и тень - размеры не прыгают. */
.flow__n { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface-2); font-weight: 700; transition: border-color .5s ease, box-shadow .5s ease; }
.flow__n.is-studio { border-color: rgba(var(--accent-rgb), .55); }
.flow--run .flow__n.is-studio { border-color: var(--line); }
.flow--run .flow__n.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
.flow__ic { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; flex: 0 0 auto;
  background: rgba(var(--accent-rgb), .10); color: var(--accent); transition: background-color .5s ease; }
.flow--run .flow__n.is-on .flow__ic { background-color: rgba(var(--accent-rgb), .2); }
.flow__ic svg { width: 24px; height: 24px; }
.flow__ic .dw-ic-h { stroke-dasharray: 2 2; opacity: .7; }
.flow__t { font-size: 16px; line-height: 1.3; }
.flow__n + .flow__n::before { content: ''; position: absolute; left: 39px; top: -15px; width: 1.5px; height: 14px;
  background: linear-gradient(180deg, var(--muted-light) 33.333%, var(--accent) 0 66.667%, var(--muted-light) 0) 0 100% / 100% 300% no-repeat;
  transition: background-position .6s cubic-bezier(.4, 0, .2, 1); }
.flow__n.is-in::before { background-position: 0 50%; }
.flow__n.is-in.is-out::before { background-position: 0 0; }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .flow__n + .flow__n::before { left: -32px; top: 50%; width: 32px; height: 1.5px;
    background-image: linear-gradient(90deg, var(--muted-light) 33.333%, var(--accent) 0 66.667%, var(--muted-light) 0);
    background-size: 300% 100%; background-position: 100% 0; }
  .flow__n.is-in::before { background-position: 50% 0; }
  .flow__n.is-in.is-out::before { background-position: 0 0; }
  .flow__n + .flow__n::after { content: ''; position: absolute; left: -9px; top: calc(50% - 4px); width: 7px; height: 7px; border-top: 1.5px solid var(--muted-light);
    border-right: 1.5px solid var(--muted-light); transform: rotate(45deg); transition: border-color .25s ease; }
  .flow__n.is-in::after { border-color: var(--accent); transition-delay: .35s; }
  .flow__n.is-in.is-out::after { border-color: var(--muted-light); transition-delay: .3s; }
}
/* Шаги «Как это работает» - общий компонент .steps / .step (platform/site.css). */

/* ============================ 9 · С ЧЕГО НАЧАТЬ (§15) и 12 · ЦЕНЫ (§18) ============================
   Карточки вариантов и цен (.starts/.start, .prices/.price) и подпись НДС - общие с «Ценами»: platform/site.css. */
/* Строка под ценами - во всю ширину (владелец 30.09: «место есть»). */
.prices__keep { margin: 32px 0 0; font-size: var(--pub-lead); font-weight: 700; line-height: 1.45; text-wrap: balance; }
.prices__more { margin: 18px 0 0; }
.prices__more .lp-btn--tertiary { margin-inline-start: -6px; }   /* текстовая кнопка - по краю колонки */

/* ============================ 10 · OKADAR STUDIO (§16) ============================ */
.studio .hero-cta { margin-top: 32px; }
.shot { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 40px 80px -40px rgba(6,12,30,.45); }
.shot__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.shot__bar span { margin-left: 8px; }
.shot img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) { .studio .split__visual { grid-column: 6 / span 7; } }
/* Снимок по теме сайта: светлая тема (и страница без data-theme) - светлый снимок Studio, тёмная - тёмный. Скрытый снимок
   с loading="lazy" браузер не загружает. */
.shot { position: relative; }
.shot__media { position: relative; }
.shot__media--themed .shot__img--light { display: none; }
:root:not([data-theme="dark"]) .shot__media--themed .shot__img--light { display: block; }
:root:not([data-theme="dark"]) .shot__media--themed .shot__img--dark { display: none; }
/* R11: анимация поверх снимка - видео области модели, кадр нижней панели (выбранный образец и цена) и курсор; координаты
   - доли снимка 1440 × 900 (scripts/landing/studioShot.mjs). До первого кадра видео слой скрыт - виден снимок. Видео
   масштабируется под рамку модели снимка и может быть шире окна (.shot__win) - окно обрезает его до белой сцены. */
.shot__anim { position: absolute; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.shot__media.is-live .shot__anim { visibility: visible; }
.shot__win { position: absolute; overflow: hidden; }
.shot__vid { position: absolute; display: block; max-width: none; object-fit: fill; }
.shot__panel { position: absolute; overflow: hidden; }
.shot .shot__panel img { display: block; width: 100%; max-width: none; will-change: transform; }
.shot__cur { position: absolute; width: clamp(11px, 1.6%, 18px); transform: translate(-12%, -6%); transition: transform .12s ease; }
.shot__cur svg { display: block; width: 100%; height: auto; fill: #fff; stroke: #0b1220; stroke-width: 1.3; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.shot__cur i { position: absolute; left: 12%; top: 6%; width: 220%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent);
  transform: translate(-50%, -50%) scale(.3); opacity: 0; }
.shot__cur.is-down { transform: translate(-12%, -6%) scale(.86); }
.shot__cur.is-down i { animation: shot-press .5s ease-out; }
@keyframes shot-press { from { opacity: .9; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
/* Пауза анимации - в заголовке «окна» (WCAG 2.2.2), не поверх интерфейса на снимке. */
.shot__pp { position: absolute; top: 5px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.shot__pp:hover { color: var(--text); border-color: var(--line-strong); }
.shot__pp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shot__pp .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shot__pp .shot__pp-play { fill: currentColor; stroke: none; }
.shot__pp-play, .shot__pp.is-held .shot__pp-pause { display: none; }
.shot__pp.is-held .shot__pp-play { display: block; }

/* ============================ 11 · МОДЕЛЬ ОСТАЁТСЯ У ВАС (§17) ============================ */
.own { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.own__keep { padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 18px; background: var(--surface-2); }
.own__keep p { margin: 12px 0 0; color: var(--muted); }
@media (min-width: 1024px) {
  .own { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .own__main { grid-column: 1 / span 6; }
  .own__keep { grid-column: 8 / span 5; }
}

/* ============================ 13 · ВОПРОСЫ ============================
   Компонент .lp-faq - общий для главной и «Цен» (один стиль вопросов на сайте): scripts/shared/chrome.mjs, chromeCss(). */

/* ============================ 14 · ФИНАЛЬНЫЙ ПРИЗЫВ (§19) ============================ */
/* Блок .lp-final (по центру, подзаголовок по предложению на строку) - общий: platform/site.css. */
.lp-final__note { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }

/* ============================ Телефон (§27) ============================ */
@media (max-width: 639px) {
  .trust { gap: 8px 18px; font-size: 14.5px; }
  .hero-visual { max-width: min(100%, 420px); }
  .seg { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .seg__l { padding: 0 4px 0 10px; }
  .seg__b { flex: 1 1 0; padding-inline: 8px; }
  .sizefig__dims { width: 100%; }
}