/* главная-«Прибор»: слева H1 + прибор подбора, справа сцена изделия 55 % */
.hero{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);grid-template-rows:auto 1fr;grid-template-areas:'intro scene' 'instr scene';min-height:calc(100vh - var(--head-h) - 29px + 280px);border-bottom:1px solid var(--rule-2)}
.intro,.instr{grid-area:instr;padding:0 var(--s10) var(--s12) max(var(--s8),calc((100vw - 1360px)/2 + var(--s8)));min-width:0;background:var(--paper)}
.intro{grid-area:intro;padding-top:var(--s10);padding-bottom:0}
.scene{grid-area:scene}
/* H1 в два веса, как в режиме XGate: тонкая строка — что, жирная — как подбираем */
.intro h1{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.022em;max-width:13em}
.intro h1 span{display:block}
.intro h1 .h1a{font-weight:300;color:var(--ink-2)}
.intro h1 .h1b{font-weight:700;color:var(--ink)}
/* 16.10 xgatespb.ru (VERDICT_v2 п.2): H1 «Мультиюниты XGate Dental — Санкт-Петербург и Ленинградская область»; регион — вторая строка мельче */
.intro h1 .h1b{font-size:.6em;line-height:1.2;margin-top:.25em;letter-spacing:-.01em}
.intro .dealer{margin-top:var(--s3);max-width:36em;color:var(--ink-2);font-size:var(--t-s);line-height:1.45}
.intro .dealer a{color:inherit}
.intro h1::after{content:'';display:block;width:48px;height:1px;margin-top:var(--s5);background:var(--gold)}
.lead{margin-top:var(--s4);max-width:31em;color:var(--ink-2);font-size:var(--t-m)}
.lead b{color:var(--ink);font-weight:600}
.stepper{margin-top:var(--s6)}
/* степпер липкий: путь назад всегда на виду (замечание Петра 11.10); фон — бумага, чтобы контент шёл под ним */
.instr .stepper{position:sticky;top:var(--head-h);z-index:6;background:var(--paper);box-shadow:0 -8px 0 var(--paper)}

/* панель шага: одна активная, доезд 280 мс */
.stage-panel{position:relative;margin-top:var(--s6);outline:none}
.stage-panel h2{font-size:var(--t-l);font-weight:700;line-height:1.3}
.stage-panel h2:focus{outline:none}
.stage-panel .hint{margin-top:var(--s1);color:var(--ink-2);font-size:14px}
.stage-panel .body{margin-top:var(--s4)}
.stage-panel.in{animation:panelIn var(--d-2) var(--ez) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}}
.twin{margin-top:var(--s4)}

/* типы */
.types{display:grid;gap:var(--s2)}
.type{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--s4);min-height:76px;padding:var(--s2) var(--s4) var(--s2) var(--s3);background:var(--card);border:1px solid var(--rule-ctl);border-radius:var(--r2);text-align:left;transition:border-color var(--d-1) var(--ez),box-shadow var(--d-2) var(--ez),transform var(--d-2) var(--ez)}
.type:hover:not([aria-disabled=true]){border-color:var(--ink);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.type[aria-disabled=true]{border-color:var(--rule)}
.type img{height:60px;width:auto;margin:0 auto}
.type b{display:block;font-size:16px;font-weight:700}
.type b span{font-weight:400;color:var(--ink-2);margin-left:6px;font-variant-numeric:tabular-nums}
.type .d{display:block;margin-top:2px;font-size:13px;color:var(--ink-2);line-height:1.4}
.type .go{font-size:13px;font-weight:600;color:var(--ink-3)}
.type[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),inset 3px 0 0 var(--mag)}
.type[aria-disabled=true]{opacity:.55;cursor:not-allowed;background:repeating-linear-gradient(-45deg,transparent 0 6px,var(--rule-2) 6px 7px),var(--card)}
.fork{margin-top:var(--s4)}

/* шкала высот: чипы стоят на линейке */
.hscale{position:relative;padding-bottom:14px}
.hscale::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 8px) 0 100%/100% 4px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat}
.hscale .chip{min-width:64px}
@media (max-width:719px){
  /* шесть высот в один ряд, как шкала: равные доли, без переноса 4+2 */
  .hscale{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
  .hscale .chip{min-width:0;padding:0 4px;gap:5px}
  .hscale .chip .ring{width:10px;height:10px}
}
.why{min-height:20px;margin-top:var(--s2);font-size:13px;color:var(--warn-ink)}

/* итог шага 5 */
.result{display:grid;gap:var(--s4)}
.result .row1{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
.result .sku{font-size:13px;color:var(--ink-2)}
.result .buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.result .buy .btn-go{flex:1;min-width:220px;min-height:52px;font-size:16px}
/* десктоп/планшет: «Добавить · цена» липнет к низу окна, пока итог не доскроллен (вход по ссылке #s=, перезагрузка, «Назад» —
   кнопка в первом экране без автопрокрутки и рывков; на телефоне то же делает .cta) */
@media (min-width:720px){
  .result .buy{position:sticky;bottom:0;z-index:5;margin:calc(var(--s2) * -1) calc(var(--s3) * -1);padding:var(--s2) var(--s3);background:var(--paper);border-top:1px solid transparent;transition:border-color var(--d-1) var(--ez),box-shadow var(--d-1) var(--ez)}
  .result .buy.stuck{border-top-color:var(--rule-2);box-shadow:0 -10px 18px -12px rgba(30,40,50,.18)}
}
.result .after{font-size:14px;color:var(--ink-2)}
.result .after button{min-height:32px}
.facts{margin:0;padding:var(--s4) 0 0;border-top:1px solid var(--rule-2);display:grid;gap:var(--s2);font-size:13.5px;color:var(--ink-2);list-style:none}
.facts li{position:relative;padding-left:var(--s4)}
.facts li::before{content:'';position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--ink-3)}
.legal{font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* ---------- сцена изделия: студия ---------- */
/* слои снизу вверх: холодный градиент студии + прожектор над изделием → полигон XGate (брендбук, обесцвечен) по краю →
   пол ниже «золотой линии» с бликом горизонта → отражение и контактная тень → изделие → размерные слои и подписи */
.scene{--floor:66%;position:sticky;top:var(--head-h);height:calc(100vh - var(--head-h));min-height:560px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(46% 52% at 54% 40%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#f3f6f9 0,#e9eef3 var(--floor),#dfe5eb 100%)}
.scene::after{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:var(--floor);pointer-events:none;
  background:url(../img/xg-poly-cool.svg) 70% 30%/cover no-repeat;opacity:.9;
  -webkit-mask-image:radial-gradient(70% 80% at 52% 62%,transparent 0,transparent 38%,#000 85%);mask-image:radial-gradient(70% 80% at 52% 62%,transparent 0,transparent 38%,#000 85%)}
/* пол: глянец — светлый у горизонта, темнее к зрителю */
.scene::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:var(--floor);bottom:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 54% 0,rgba(255,255,255,.85) 0,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#f4f7f9 0,#e4eaef 22%,#d9e0e7 100%)}
/* золотая линия: золотая горизонталь 1 px; риски через 1 мм и 5 мм в масштабе изделия (--mm) */
.floor{position:absolute;left:0;right:0;top:var(--floor);height:14px;z-index:3;pointer-events:none;
  background:linear-gradient(var(--gold),var(--gold)) 0 0/100% 1px no-repeat,
             repeating-linear-gradient(90deg,var(--gold) 0 1px,transparent 1px calc(var(--mm,38px) * 5)) var(--mm0,0) 1px/100% 9px no-repeat,
             repeating-linear-gradient(90deg,var(--gold-soft) 0 1px,transparent 1px var(--mm,38px)) var(--mm0,0) 1px/100% 4px no-repeat}
.stage{position:absolute;left:0;right:0;top:0;height:var(--floor)}
.prod{position:absolute;left:50%;bottom:0;width:calc(var(--w,188px) * var(--k,1));height:calc(440px * var(--k,1));margin-left:calc(var(--w,188px) * var(--k,1) / -2)}
/* контактная тень: изделие стоит на полу, а не висит */
.prod::before,.lineup figure::before{content:'';position:absolute;left:18%;right:18%;bottom:-5px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,40,55,.32),rgba(30,40,55,0));pointer-events:none}
.prod img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:opacity var(--d-1) var(--ez)}
.prod img.out{opacity:0}
.prod img.draw{mix-blend-mode:multiply}
.prod svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mirror{position:absolute;left:50%;top:calc(var(--floor) + 1px);z-index:1;width:calc(var(--w,188px) * var(--k,1));height:calc(440px * var(--k,1));margin-left:calc(var(--w,188px) * var(--k,1) / -2);transform:scaleY(-1);opacity:.22;
  -webkit-mask-image:linear-gradient(0deg,#000 0,transparent 34%);mask-image:linear-gradient(0deg,#000 0,transparent 34%);pointer-events:none}
.mirror img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.mirror img.draw{display:none}

/* свечение за изделием в цвет головки выбранной высоты: шесть слоёв, виден один; смена — opacity ≤300 мс (reduced-motion — 0, tokens.css) */
.glow{position:absolute;left:-95%;right:-95%;top:-6%;bottom:-6%;pointer-events:none;transition:transform var(--d-2) var(--ez)}
.glow i{position:absolute;inset:0;opacity:0;background:radial-gradient(closest-side,var(--c) 0,var(--c) 18%,transparent 100%);transition:opacity var(--d-2) var(--ez)}
.glow i.on{opacity:.36}
.glow i.hc-0p5.on{opacity:.62}.glow i.hc-1.on{opacity:.44}.glow i.hc-5.on{opacity:.26}   /* светлые цвета на светлом фоне слабее — выравниваем на глаз */
.scene.compact .glow{left:-60%;right:-60%}
/* SVG-слой: размерная линия, платформа */
.ov .pl{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.ov .pl-t{fill:var(--ink-2);font:600 12px var(--f);letter-spacing:.04em;font-variant-caps:all-small-caps}
.ov .dim{stroke:var(--mag);stroke-width:1.25;vector-effect:non-scaling-stroke}
.ov .dim-g{transform-box:fill-box;transform-origin:50% 100%;transition:transform var(--d-2) var(--ez)}
.ov .tk{stroke:var(--mag);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7}
.ov .dim-t{fill:var(--mag);font:600 15px var(--f);font-variant-numeric:tabular-nums}
.ov .dim-s{font-size:11px;font-weight:600;letter-spacing:.04em;font-variant-caps:all-small-caps;fill:var(--ink-2)}
.ov .pl-s{fill:var(--ink-2);font:500 11px var(--f)}
.hc-0p5{--c:var(--h0p5);stroke:var(--h0p5)}.hc-1{--c:var(--h1);stroke:var(--h1)}.hc-2{--c:var(--h2);stroke:var(--h2)}
.hc-3{--c:var(--h3);stroke:var(--h3)}.hc-4{--c:var(--h4);stroke:var(--h4)}.hc-5{--c:var(--h5);stroke:var(--h5)}

/* .stage без z-index: иначе чертёж D (mix-blend-mode:multiply) смешивается с прозрачным слоем и даёт белый прямоугольник */
/* линейка высот V-type (первый экран): шесть рендеров встают по росту ≤ 1,2 с; под каждым — отражение и цвет-метка высоты */
.lineup{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-end;gap:calc(6px * var(--k,1))}
.lineup figure{position:relative;margin:0;width:calc(150px * var(--k,1));height:calc(440px * var(--k,1));transition:opacity var(--d-2) var(--ez)}
.lineup img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.lineup img.rf{position:absolute;left:0;top:calc(100% + 1px);transform:scaleY(-1);opacity:.2;pointer-events:none;
  -webkit-mask-image:linear-gradient(0deg,#000 0,transparent 30%);mask-image:linear-gradient(0deg,#000 0,transparent 30%)}
.lineup.go figure{animation:rise var(--d-4) var(--ez) both}
.lineup.go figure:nth-child(2){animation-delay:90ms}.lineup.go figure:nth-child(3){animation-delay:180ms}
.lineup.go figure:nth-child(4){animation-delay:270ms}.lineup.go figure:nth-child(5){animation-delay:360ms}.lineup.go figure:nth-child(6){animation-delay:450ms}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.lineup figcaption{position:absolute;z-index:3;left:-8px;right:-8px;top:calc(100% + 20px);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.lineup figcaption i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.lineup figcaption small{font-size:12px;font-weight:600;color:var(--ink-2);margin-left:1px}
.lineup figure.off{opacity:.22}
.lineup figure.off figcaption{text-decoration:line-through;text-decoration-thickness:1px}
.lcap{position:absolute;z-index:3;left:0;right:0;top:calc(var(--floor) + 52px);text-align:center;margin:0}

/* покой: подсказка следующего шага вместо пустых показаний */
.idle{position:absolute;z-index:4;left:var(--s10);right:var(--s8);bottom:var(--s10);display:flex;align-items:center;gap:var(--s3);max-width:34em;font-size:15px;line-height:1.45;color:var(--ink-2)}
.idle:empty,.idle[hidden]{display:none}
.idle::before{content:'';flex:none;width:32px;height:9px;background:linear-gradient(var(--ink-2),var(--ink-2)) 0 50%/100% 1px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) 0 0/1px 100% no-repeat}
.idle b{color:var(--ink);font-weight:600}

/* транспортир угла D */
.prot{position:absolute;z-index:4;left:var(--s10);top:150px;width:250px;height:165px}
.prot[hidden]{display:none}
/* видео Петра 11.10: угловой D — рендер (цвет головки = высота) ↔ чертёж по кнопке; без высоты — силуэт без цвета; наведение — предпросмотр */
.draw-btn{position:absolute;z-index:5;left:var(--s10);top:330px;min-height:36px;padding:0 var(--s4);background:var(--card);border:1px solid var(--rule-ctl);border-radius:var(--r1);font:600 13px var(--f);color:var(--ink);cursor:pointer}
.draw-btn:hover{border-color:var(--ink)}
.draw-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.draw-btn[hidden]{display:none}
.scene.noh .prod img,.scene.noh .mirror img{filter:grayscale(1) brightness(1.12) contrast(.82)}
.scene.noh .prod{opacity:.55}
.scene.pv .big .n{opacity:.42}
.scene.pv .glow{opacity:.6}
.prod,.big .n{transition:opacity var(--d-1) var(--ez)}
.prot .arc{fill:none;stroke:var(--ink-3);stroke-width:1}
.prot .tk{stroke:var(--ink-3);stroke-width:1}
.prot .tk.on{stroke:var(--ink);stroke-width:1.5}
.prot text{font:600 12px var(--f);fill:var(--ink-2);font-variant-numeric:tabular-nums}
.prot text.no{fill:var(--rule)}
.prot text.cur{fill:var(--mag);font-size:14px}
.prot .ndl{stroke:var(--mag);stroke-width:2;stroke-linecap:round;transform-origin:16px 116px;transition:transform var(--d-2) var(--ez)}
.prot .hub{fill:var(--mag)}
.prot .cap{font:600 12px var(--f);letter-spacing:.04em;font-variant-caps:all-small-caps;fill:var(--ink-2)}

/* показания: большие числа */
.readout[hidden]{display:none}
.readout{position:absolute;z-index:4;left:var(--s10);right:var(--s8);bottom:var(--s8);display:grid;grid-template-columns:auto 1fr;align-items:end;gap:var(--s2) var(--s10)}
.big{display:flex;flex-direction:column}
.big .n{font-size:var(--t-num);font-weight:300;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);display:flex;align-items:baseline;gap:.12em}
.big .n small{font-size:.32em;font-weight:500;letter-spacing:0}
.big[hidden],.minor>div[hidden]{display:none}
.big .sc{margin-top:var(--s2)}
.minor{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--s2) var(--s8);padding-bottom:6px}
.minor div{display:flex;flex-direction:column-reverse;gap:2px}
.minor b{font-size:var(--t-num-2);font-weight:300;line-height:1.05;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.minor b sup{font-size:.5em;font-weight:500;margin-left:2px;vertical-align:.6em}
.foot-n{grid-column:1/-1;max-width:46em;font-size:12px;color:var(--ink-2);line-height:1.45}
.cap-src{position:absolute;z-index:4;left:var(--s10);top:var(--s8);max-width:24em;font-size:12px;color:var(--ink-2);line-height:1.45}
.cap-src b{display:block;color:var(--ink);font-size:13px;font-weight:600}

/* Ø — в Montserrat нет, рисуем знак сами, в толщину Montserrat 300 */
.dia{position:relative;display:inline-block;width:.62em;height:.62em;margin-right:.08em;border:.07em solid currentColor;border-radius:50%;vertical-align:baseline;transform:translateY(-.02em)}
.dia::after{content:'';position:absolute;left:50%;top:50%;width:.07em;height:1.02em;background:currentColor;transform:translate(-50%,-50%) rotate(38deg)}

/* FLIP-призрак «Добавлено» */
.ghost{position:fixed;z-index:80;pointer-events:none;object-fit:contain;transform-origin:0 0}

/* липкая CTA (телефон) */
.cta{position:fixed;z-index:40;left:0;right:0;bottom:0;display:none;align-items:center;gap:var(--s3);padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--rule);box-shadow:0 -8px 24px rgba(30,40,50,.08)}
.cta .t{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta .t b{display:block;color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta .btn{min-height:48px;padding:0 var(--s4)}

/* ---------- адаптив ---------- */
@media (max-width:1099px){
  .hero{min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:'intro' 'scene' 'instr';min-height:0}
  .intro{padding:var(--s6) var(--s8) var(--s5)}
  .instr{padding:0 var(--s8) var(--s10)}
  .scene{position:relative;top:0;height:420px;min-height:0}
  .scene{--floor:70%}
  .readout{left:var(--s8);bottom:var(--s5)}
  /* планшет: сцена 420 px — транспортир не наезжает на крупную цифру, «Чертёж» справа сверху */
  .prot{top:118px;width:200px;height:132px}
  .draw-btn{left:auto;right:var(--s8);top:var(--s8)}
}
@media (max-width:719px){
  .intro{padding:var(--s4) var(--s4) var(--s3)}
  .intro h1{font-size:clamp(26px,7.4vw,32px);letter-spacing:-.02em}
  .intro h1::after{margin-top:var(--s3)}
  .lead{margin-top:var(--s2);font-size:14px}
  .intro .dealer{margin-top:var(--s2);font-size:12.5px}
  .lead .m-hide{display:none}
  .instr{padding:0 var(--s4) var(--s10)}
  .scene{height:250px;--floor:80%}
  .scene.compact .cap-src,.scene.compact .ov .pl-t,.scene.compact .ov .pl-s,.scene.compact .ov .dim-t{display:none}
  .result .buy .btn-go{display:none}
  .scene.compact{position:sticky;top:var(--head-h);z-index:20;height:200px;--floor:88%;box-shadow:0 1px 0 var(--rule-2)}
  .cap-src{left:var(--s4);top:var(--s3);font-size:11px;max-width:15em}
  .cap-src b{font-size:12px}
  .scene .plate{display:none}
  .readout{left:auto;right:var(--s4);top:var(--s4);bottom:auto;width:46%;grid-template-columns:1fr;gap:var(--s1)}
  .big .n{font-size:56px}
  .big .sc{margin-top:2px;font-size:11px}
  .minor{grid-template-columns:repeat(3,auto);gap:2px var(--s3)}
  .minor b{font-size:17px}
  .minor .sc{font-size:10px}
  .foot-n{display:none}
  /* транспортир D в компактной сцене — мини-шкала, см. order.css (пасхалка 90°) */
  .scene .prod{left:30%}
  .draw-btn{left:auto;right:8px;top:auto;bottom:calc(12% + 6px);min-height:32px;padding:0 var(--s3);font-size:12px}
  .scene .mirror{left:30%}
  .lineup figcaption{top:calc(100% + 8px);font-size:12px;gap:3px}
  .lineup figcaption i{width:7px;height:7px}
  .cta.on{display:flex}
  body.has-cta .stm-foot{padding-bottom:80px}
  .stepper{margin-top:var(--s1)}
  .pick-compact .instr .stepper{top:calc(var(--head-h) + 200px)}
}
@media (max-width:719px){.scene.lineup-mode .readout,.idle,.lcap{display:none}}
.scene:not(.lineup-mode) .lcap,.scene:not(.lineup-mode) .idle{display:none}
/* список систем открыт — популярные чипы уходят, результат сразу под полем (было: под чипами, ниже сгиба на 1280×800) */
.stage-panel .body:has(#list:not([hidden])) #pop{display:none}