/* Пример продукта на странице услуги — стили (движок assets/pv.js). Всё внутри .pvx, макет внутри .pvt — своя тема. */
.pvx{--pin:#2FB383;--pin-add:#E3A33B}
.pvx .pvh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pvx .pvh .sub{max-width:760px}
.pvleg{display:flex;gap:16px;font-size:13px;color:var(--muted)}
.pvleg span{display:inline-flex;align-items:center;gap:7px}
.pvleg .pin{position:static;width:14px;height:14px;font-size:0;box-shadow:none;animation:none}
.pvw{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;margin-top:18px}
.pvs{position:sticky;top:96px;min-width:0}
.pvl{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:none}
.pvl li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 14px;border:1px solid var(--line-soft,rgba(255,255,255,.08));border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.pvl li:hover,.pvl li.on-pin{border-color:var(--pin);transform:translateX(-2px)}
.pvl li.add:hover,.pvl li.add.on-pin{border-color:var(--pin-add)}
.pvl li .pin{position:static;animation:none}
.pvl b{font:600 14px/1.3 var(--font-ui);color:var(--ink)}
.pvl p{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.pvl .pm{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font-size:12px}
.pvl .pm span{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.pvl .pm .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.pvl .pm .in{color:var(--green-ink,#1F7A58);font-weight:600}
:root:not([data-theme="light"]) .pvl .pm .in{color:#5ED3A5}
.pvl .pm .ad{color:#C9861F;font-weight:600}
.pvf{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
@media (max-width:1000px){.pvw{grid-template-columns:1fr}.pvs{position:static}}

/* точки в списке справа */
.pvx .pin{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pin);color:#fff;font:700 13px/1 Inter,system-ui,sans-serif;font-style:normal}
.pvx .pin.add{background:var(--pin-add)}
/* ---------- рамки ---------- */
.fr{position:relative;min-width:0}
.fr.pvbrowser{border-radius:16px;overflow:hidden;background:#1d1f22;box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.fr .chrome{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#26292d}
.fr .chrome > i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.fr .chrome > i+i{background:#febc2e}.fr .chrome > i+i+i{background:#28c840}
.fr .url{display:flex;align-items:center;gap:6px;margin:0 auto;min-width:40%;justify-content:center;height:24px;padding:0 14px;border-radius:7px;background:#1b1d20;color:#b9bdc2;font:500 12px Inter,system-ui,sans-serif}
.fr .url .ic{width:11px;height:11px;stroke:#8fd3b1;fill:none;stroke-width:2.4}
.fr .vp{position:relative;max-height:680px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.fr .host{display:block;transform-origin:0 0}
.fr.pvphone{width:100%;max-width:300px;margin:0 auto;padding:10px;border-radius:44px;background:#121315;box-shadow:0 30px 70px -25px rgba(0,0,0,.65),inset 0 0 0 2px #2b2e33}
.fr.pvphone .vp{border-radius:34px;max-height:600px;scrollbar-width:none}
.fr.pvphone .vp::-webkit-scrollbar{display:none}
.fr.pvphone .notch{position:absolute;z-index:8;top:18px;left:50%;width:86px;height:24px;margin-left:-43px;border-radius:14px;background:#000}
.duo{position:relative;padding-right:170px}
.duo .fr.pvphone{position:absolute;right:0;bottom:-30px;width:210px;max-width:none}
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;align-items:start}
.phones .fr.pvphone{max-width:270px}
@media (max-width:700px){.duo{padding-right:0}.duo .fr.pvphone{position:relative;bottom:0;margin-top:16px;width:70%}}
.fr.pvboard .host{width:100%}
.fr.pvboard{border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}

/* слайдер каркас ↔ дизайн */
.pvx .anx{position:relative}
.pvx .anx .lay{position:absolute;inset:0}
.pvx .anx .lay.dz{clip-path:inset(0 0 0 var(--cut,50%))}
.pvx .anx .cut{position:absolute;z-index:9;top:0;bottom:0;left:var(--cut,50%);width:2px;margin-left:-1px;background:#5ED3A5;box-shadow:0 0 14px rgba(94,211,165,.8);cursor:ew-resize;touch-action:none}
.pvx .anx .cut b{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#5ED3A5;color:#062;font:700 18px/1 Inter,sans-serif;box-shadow:0 0 0 6px rgba(94,211,165,.25)}
.pvx .anx .cut span{position:absolute;top:14px;white-space:nowrap;font:700 11px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff}
.pvx .anx .cut span.l{right:12px}.pvx .anx .cut span.r{left:12px}
.pvx .pvtg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line-soft,rgba(255,255,255,.08));margin-top:12px}
.pvx .pvtg button{border:0;background:none;padding:7px 14px;border-radius:999px;font:600 13px var(--font-ui);color:var(--muted);cursor:pointer}.pvx .pvtg button.on{background:var(--ink);color:var(--bg)}
.pvx .anx .vp{position:relative}
.pvx .anx .host.dz{position:absolute;top:0;left:0;clip-path:inset(0 0 0 var(--cut,30%))}
.pvx .anx .cut{top:38px}
.pvx .pvleg .pin{width:14px;height:14px;font-size:0}
.pvx .ic{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.pvl .pm .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.pvx .anx .cut span{top:auto;bottom:calc(50% + 34px)}
.pvx .fr .vp{max-height:min(760px,calc(100vh - 150px))}

.pvx .phones{justify-items:center}
.pvx .duo{margin-bottom:40px}
.pvx .duo .fr.pvphone .notch{top:14px;width:54px;height:15px;margin-left:-27px}
.pvx .duo .fr.pvphone{padding:7px;border-radius:32px}.pvx .duo .fr.pvphone .vp{border-radius:26px}

/* ===== статичный пример продукта (26.10.2026): 1–3 варианта, низ растворяется, ниже — плитки ===== */
.pvs2 .pvg{display:grid;gap:22px;margin-top:22px;align-items:start}
.pvs2 .pvg.g3{grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);grid-template-areas:"a c" "b c"}
.pvs2 .pvg.g1{grid-template-columns:minmax(0,1fr)}
.pvs2 .pvg.gp{grid-template-columns:repeat(auto-fit,minmax(220px,300px));justify-content:center}
.pvs2 figure{margin:0;min-width:0;display:grid;gap:10px}
.pvs2 .va{grid-area:a}.pvs2 .vb{grid-area:b}.pvs2 .vc{grid-area:c}
.pvs2 .pvg.g1 .va,.pvs2 .pvg.gp figure{grid-area:auto}
.pvs2 figcaption{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pvs2 figcaption b{font:600 13px var(--font-ui);color:var(--ink)}
/* окно: показываем верх страницы, низ уходит в никуда (последние ~10%) */
.pvs2 .fr .vp{overflow:hidden!important;max-height:none!important;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
.pvs2 .fr.big .vp{aspect-ratio:16/10.5}
.pvs2 .fr.low .vp{aspect-ratio:16/7.4}
.pvs2 .fr.pvphone.tall{max-width:none}
.pvs2 .fr.pvphone.tall .vp{aspect-ratio:9/18.6}
.pvs2 .pvg.g3 .vc .fr.pvphone{max-width:300px;margin:0 auto}
.pvs2 .fr.pvbrowser{-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent);mask-image:linear-gradient(to bottom,#000 90%,transparent);border-radius:16px 16px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.pvs2 .fr.pvphone{-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent);mask-image:linear-gradient(to bottom,#000 90%,transparent);box-shadow:inset 0 0 0 2px #2b2e33}
.pvs2 .fr.pvboard{max-height:760px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent);mask-image:linear-gradient(to bottom,#000 90%,transparent)}
.pvs2 .fr.pvboard .host{pointer-events:none}
@media (max-width:900px){.pvs2 .pvg.g3{grid-template-columns:1fr;grid-template-areas:"a" "c" "b"}.pvs2 .pvg.g3 .vc .fr.pvphone{max-width:260px}}

/* плитки «что здесь есть»: тёмные со свечением, как на главной; маркер — стрелка из логотипа */
.pvcap{margin-top:34px}
.pvcap h3{font:600 clamp(20px,2.4vw,26px)/1.2 var(--font-display);color:var(--ink);margin:0 0 16px}
.pvcap h4{font:600 16px var(--font-ui);color:var(--ink);margin:26px 0 12px}
.gtl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.gtl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.gtl{grid-template-columns:1fr}}
.gt{position:relative;overflow:hidden;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:12px;padding:18px 18px 16px;border-radius:18px;color:#E7EEEA;
  background:radial-gradient(70% 60% at 18% 0%,rgba(98,196,152,.26),transparent 70%),radial-gradient(90% 70% at 100% 120%,rgba(6,16,12,.8),transparent 70%),linear-gradient(165deg,#1E4135 0%,#132C24 55%,#0A1813 100%);
  box-shadow:0 18px 36px -18px rgba(10,24,19,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.gt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.07),transparent 40%);pointer-events:none}
.gt.add{background:radial-gradient(70% 60% at 18% 0%,rgba(227,163,59,.26),transparent 70%),radial-gradient(90% 70% at 100% 120%,rgba(20,12,4,.8),transparent 70%),linear-gradient(165deg,#3A3020 0%,#272014 55%,#16110A 100%)}
.gt .ar{width:20px;height:20px;margin-top:2px;fill:none;stroke:#E3F04A;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 0 6px rgba(227,240,74,.45))}
.gt.add .ar{stroke:#F0B45A;filter:drop-shadow(0 0 6px rgba(240,180,90,.45))}
.gt b{display:block;font:600 15px/1.3 var(--font-ui);color:#fff}
.gt p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#B9CBC2}
.gt .pm{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px}
.gt .pm span{display:inline-flex;align-items:center;gap:5px;color:#9FB4AA}
.gt .pm .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.gt .pm .in{color:#7EE2B8;font-weight:600}.gt .pm .ad{color:#F5C77E;font-weight:600}