/* Слой демо поверх стилей сайта (lp/lp.css, генерируется scripts/extract-styles.ts): то, чего на сайте нет, -
   пузырь помощи, HUD, метки и анимации live-изменений, служебные страницы. Вёрстку блоков здесь не правим. */
:root { --jl-hud-width: 380px; --jl-mono: ui-monospace, Menlo, monospace; --jl-edge: #2a2e3f; }

/* Слоты вставки пустые и не должны давать высоту. */
#jl-slot:empty, #jl-form-slot:empty { display: none; }

/* Подгонка блоков сайта под демо. В шапке сайта пункты меню - кнопки мега-меню, у нас ссылки. */
.lp-SiteHeader-nav a, .lp-SiteHeader-mGroupLinks a { text-decoration: none; }
/* На сайте в форме одно поле, в анкете демо четыре: ряд переносится, многострочное поле выше. */
.lp-ContactSection-inputRow { flex-wrap: wrap; align-items: flex-start; }
textarea.lp-ContactSection-input { min-height: 96px; border-radius: 24px; resize: vertical; }
select.lp-ContactSection-input { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px; }
select.lp-ContactSection-input option { color: var(--color-text); }
/* Ширина видео hero в процентах даёт дробные пиксели (особенно в колонке рядом с HUD), и на левой кромке видео проступает светлая линия. Округляем вниз до целого. */
.lp-KassaHero-mediaBox { width: round(down, min(56.667%, 50% + 112px), 1px); }
/* Отраслевой первый экран на главной длиннее макета (надзаголовок и три буллета столбиком): даём воздух снизу, чтобы текст не упирался в скругление. */
.lp-KassaHero-hero:not([data-variant="default"]) .lp-KassaHero-stage { padding-bottom: 56px; }
/* Страница анкеты: первый экран компактный, чтобы форма была видна без прокрутки. */
main:has(> [data-block="form"][data-embedded="0"]) .lp-KassaHero-stage { min-height: 0; padding-bottom: 72px; }
/* Надзаголовок отраслевого первого экрана на главной (у hero сайта его нет). */
.jl-eyebrow { margin: 0 0 16px; font: 500 14px/1.3 var(--font-display); letter-spacing: 2px; text-transform: uppercase; color: var(--color-cyan); }

/* Служебные страницы без макета на сайте: 404 и "заявка записана". */
.jl-plain { padding: calc(var(--header-height) + 80px) max(24px, calc((100% - 1200px) / 2)) 100px; min-height: 60vh; background: var(--color-near-black); color: var(--color-white); }
.jl-plain h1 { margin: 0 0 16px; font: 500 clamp(30px, 4vw, 44px)/1.18 var(--font-display); letter-spacing: 1px; }
.jl-plain p { margin: 0 0 32px; max-width: 640px; font-size: 20px; color: var(--color-text-dim); }
.jl-plain ul { list-style: none; max-width: 720px; margin: 0; padding: 0; border-bottom: 1px solid var(--jl-edge); }
.jl-plain li { border-top: 1px solid var(--jl-edge); }
.jl-plain li a { display: block; padding: 20px 0; color: inherit; font-size: 20px; text-decoration: none; transition: color 0.3s; }
.jl-plain li a:hover { color: var(--color-cyan); }
.jl-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border: 1px solid transparent; border-radius: 1000px; background: var(--color-primary); color: var(--color-white); font: 600 16px/1.25 var(--font-display); text-decoration: none; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.jl-btn:hover { background: var(--color-cyan); color: var(--color-ink); }
.jl-btn-ghost { background: none; border-color: var(--color-card-border); color: inherit; }

/* Пузырь помощи */
.nudge { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: min(380px, calc(100vw - 32px)); padding: 28px; border-radius: 28px; background: var(--color-white); color: var(--color-text); box-shadow: 0 16px 56px rgba(0, 0, 0, 0.45); animation: jl-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.nudge h3 { margin: 0 40px 8px 0; font: 600 20px/1.3 var(--font-family); }
.nudge p { margin: 0; color: var(--color-gray-dark); }
.nudge .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.nudge .jl-btn { padding: 12px 22px; font-size: 14px; }
.nudge-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--color-card-light); color: var(--color-text); font: 600 14px/1 var(--font-family); cursor: pointer; }

/* Live-изменения: появление вставленного по тику и вспышка сменившейся подписи. Видно всем посетителям. */
@keyframes jl-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes jl-glow { from { box-shadow: inset 0 0 0 3px var(--color-cyan); } to { box-shadow: inset 0 0 0 3px transparent; } }
@keyframes jl-flash { 0%, 55% { background: var(--color-cyan); color: var(--color-ink); box-shadow: 0 0 0 10px rgba(53, 255, 238, 0.22); } 100% { box-shadow: 0 0 0 0 transparent; } }
.jl-in { animation: jl-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both, jl-glow 2.6s 0.3s ease-out both; }
.jl-flash { animation: jl-flash 1.8s ease-out both; }

/* Демо-режим (открыт HUD): метка на всём, что решил Jev, и лента тиков. Обычный посетитель этого не видит. */
body.with-hud [data-jl-live] { position: relative; }
body.with-hud [data-jl-live]::before { content: "Jev: " attr(data-jl-live); position: absolute; top: 12px; right: 24px; z-index: 5; padding: 6px 10px; border-radius: 1000px; background: var(--color-cyan); color: var(--color-ink); font: 600 11px/1 var(--jl-mono); letter-spacing: 0.3px; white-space: nowrap; pointer-events: none; }
body.with-hud section[data-block="hero"][data-jl-live]::before { top: calc(var(--header-height) + 12px); }
body.with-hud .nudge[data-jl-live] { position: fixed; }
body.with-hud .nudge[data-jl-live]::before { top: -11px; right: auto; left: 24px; }
.jl-toasts { position: fixed; left: 24px; bottom: 24px; z-index: 45; display: grid; gap: 8px; width: min(360px, calc(100vw - 48px)); pointer-events: none; }
body.with-hud .jl-toasts { left: calc(var(--jl-hud-width) + 24px); }
.jl-toast { pointer-events: auto; padding: 12px 16px; border: 1px solid var(--jl-edge); border-left: 3px solid var(--color-cyan); border-radius: 16px; background: #0a0c11; color: var(--color-white); font: 12px/1.5 var(--jl-mono); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); animation: jl-in 0.4s ease-out both; transition: opacity 0.4s; }
.jl-toast b { display: block; color: var(--color-cyan); font-weight: 600; }
.jl-toast.out { opacity: 0; }
.jl-toast button { padding: 0; border: 0; background: none; color: var(--color-cyan); font: inherit; text-decoration: underline; cursor: pointer; }

/* HUD: панель слева. Страница сдвигается на ширину панели, а стили сайта в этом режиме берутся из lp/lp-hud.css со сдвинутыми порогами. */
.hud { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--jl-hud-width); overflow: auto; scrollbar-width: thin; padding: 20px; border-right: 1px solid #333; background: rgba(2, 3, 4, 0.96); color: var(--color-white); font: 12px/1.5 var(--jl-mono); }
.hud h4 { margin: 16px 0 6px; color: var(--color-cyan); font: 600 12px/1.2 var(--jl-mono); text-transform: uppercase; }
.hud .bar { height: 6px; margin: 2px 0 6px; border-radius: 3px; background: #333; overflow: hidden; }
.hud .bar i { display: block; height: 100%; background: var(--color-cyan); }
.hud pre { margin: 0; color: var(--color-text-dim); font: inherit; white-space: pre-wrap; word-break: break-word; }
.hud .toolbar { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid #333; }
.hud .toolbar a, .hud summary { color: var(--color-cyan); }
.hud summary { margin-top: 12px; cursor: pointer; }
.hud-notes { margin: 12px 0 0; padding-left: 16px; color: var(--color-text-dim); }
body.with-hud { padding-left: var(--jl-hud-width); }
body.with-hud .lp-SiteHeader-header, body.with-hud .lp-SiteHeader-mMenu { left: var(--jl-hud-width); }

@media (width <= 900px) {
  .hud { position: static; width: auto; border-right: 0; border-top: 1px solid #333; }
  body.with-hud { padding-left: 0; }
  body.with-hud .lp-SiteHeader-header, body.with-hud .lp-SiteHeader-mMenu { left: 0; }
  body.with-hud .jl-toasts { left: 24px; }
}
@media (width <= 520px) { .nudge { right: 16px; bottom: 16px; } .jl-toasts { left: 16px; bottom: 16px; width: calc(100vw - 32px); } }
@media (prefers-reduced-motion: reduce) { .jl-in, .jl-flash, .nudge, .jl-toast { animation: none; } }