/* UltraPixel — price page. Movement follows the homepage: masks that open, lines that draw, numbers that settle. No bounce. */
.quote .split{align-items:start}
.quote .mi{display:block}
.quote [hidden]{display:none!important}
.qhero .mega{font-size:clamp(38px,8.4vw,150px)}
.qhero .mega span{display:block;color:var(--tgl)}

/* 01 — the stage: demo scan, then the visitor's own label */
.qdrop{position:relative;margin-top:18px;min-height:clamp(220px,34vw,440px);display:grid;place-items:center;border:1px solid transparent;
  background:linear-gradient(var(--white),var(--white)) padding-box,linear-gradient(90deg,var(--hair) 0 30%,#22B8D6 38%,#6F5BE8 46%,#D9438F 54%,#EBA43A 62%,var(--hair) 70% 100%) 0 0/300% 100% border-box;animation:qedge 9s linear infinite}
.qdrop.over{animation-duration:1.2s}
@keyframes qedge{to{background-position:0 0,300% 0}}
.qpick{display:grid;gap:14px;justify-items:center;padding:clamp(18px,3vw,34px);text-align:center;width:100%}
.qbtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.qpick .cta{cursor:pointer;font-family:var(--mono)}
.quote.mouse .only-touch,.quote:not(.mouse) .only-mouse{display:none}
.qdemo{position:relative;width:min(100%,460px);aspect-ratio:4/3;--t:5.6s}
.qdemo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.qdemo .lb{fill:var(--sheet);stroke:var(--tg);stroke-width:1}
.qdemo .fo{fill:none;stroke:url(#qmet);stroke-width:5}.qdemo .fo.i{stroke-width:1.5}
.qdemo .tx{stroke:var(--tg);stroke-width:2;fill:none}.qdemo .em{stroke:var(--ink);stroke-width:5;fill:none}
.qdemo .dm,.qdemo .ld{stroke:var(--ink);stroke-width:1;fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.qdemo .dm{animation:qdraw var(--t) cubic-bezier(.2,.7,.1,1) infinite}
.qdemo .tag{position:absolute;white-space:nowrap;font-size:10px;color:var(--ink);opacity:0;animation:qtag var(--t) linear infinite}
.qdemo .t1{left:50%;top:94%;transform:translateX(-50%);animation-name:qtag1}
.qdemo .t2{right:78.5%;top:47%;animation-delay:calc(var(--t)*.07)}.qdemo .l2{animation:qld var(--t) linear infinite;animation-delay:calc(var(--t)*.07)}
.qdemo .t3{left:74.5%;top:31.6%;animation-delay:calc(var(--t)*-.08)}.qdemo .l3{animation:qld var(--t) linear infinite;animation-delay:calc(var(--t)*-.08)}
.qdemo .t4{left:74.5%;top:59%;animation-delay:calc(var(--t)*.14)}.qdemo .l4{animation:qld var(--t) linear infinite;animation-delay:calc(var(--t)*.14)}
@keyframes qtag{0%,30%{opacity:0;transform:translateY(4px)}36%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes qtag1{0%,66%{opacity:0}72%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes qld{0%,29%{stroke-dashoffset:1}36%,86%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:1}}
@keyframes qdraw{0%,58%{stroke-dashoffset:1}72%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
.beam{position:absolute;left:6%;right:6%;top:0;height:2px;background:var(--spec);box-shadow:0 0 18px 2px rgba(111,91,232,.35);opacity:0;pointer-events:none}
.qdemo .beam{animation:qbeam var(--t) cubic-bezier(.45,0,.55,1) infinite}
@keyframes qbeam{0%{top:10%;opacity:0}6%{opacity:1}60%{top:88%;opacity:1}68%,100%{top:88%;opacity:0}}
.qdemo-cap{margin:0;max-width:40ch;color:var(--gra);font-size:14px;line-height:1.5}

.qprev{margin:0;width:100%;display:grid}
.qshot{position:relative;overflow:hidden;background:var(--sheet-2)}
.qshot img{display:block;width:100%;max-height:70vh;object-fit:contain;transition:filter .6s}
.qprev.pdf .qshot{min-height:200px}
.qprev.scan .qshot img{filter:saturate(.75) contrast(1.04)}
.qprev.scan .beam{left:0;right:0;animation:qscan 1.5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes qscan{from{top:2%;opacity:1}to{top:98%;opacity:1}}
.cn{position:absolute;width:22px;height:22px;border:1px solid var(--ink);opacity:0;transition:opacity .4s,inset .7s cubic-bezier(.2,.7,.1,1)}
.cn.a{inset:22% auto auto 22%;border-right:0;border-bottom:0}.cn.b{inset:22% 22% auto auto;border-left:0;border-bottom:0}
.cn.c{inset:auto auto 22% 22%;border-right:0;border-top:0}.cn.d{inset:auto 22% 22% auto;border-left:0;border-top:0}
.qprev.scan .cn,.qprev.done .cn{opacity:1}
.qprev.scan .cn.a,.qprev.done .cn.a{inset:14px auto auto 14px}.qprev.scan .cn.b,.qprev.done .cn.b{inset:14px 14px auto auto}
.qprev.scan .cn.c,.qprev.done .cn.c{inset:auto auto 14px 14px}.qprev.scan .cn.d,.qprev.done .cn.d{inset:auto 14px 14px auto}
.quote .qdim{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--cer);padding:8px 12px;font-size:11px;white-space:nowrap}
.qprev figcaption{padding:14px 16px;border-top:1px solid var(--hair)}
.qprev .cta,.qchips button{background:none;border:0;cursor:pointer;padding:0;color:inherit}
.qhint{margin-top:14px;line-height:1.7;max-width:46ch}

/* reading */
.qstate ul{list-style:none;margin:18px 0 0;padding:0}
.quote .qstate li{display:flex;align-items:center;padding:16px 0;border-top:1px solid var(--hair);color:var(--tg);opacity:.35;transition:opacity .4s,color .4s}
.qstate li:last-child{border-bottom:1px solid var(--hair)}
.qstate li .dot{background:var(--tg);transition:background .3s}
.qstate li b{margin-left:auto;height:1px;width:0;background:var(--spec);transition:width .5s cubic-bezier(.2,.7,.1,1)}
.qstate li.on{opacity:1;color:var(--ink)}.qstate li.on b{width:34%}
.qstate li.ok .dot{background:#3E7D5A}.qstate li.ok b{width:52%}

/* 02 / 03 — what we see, how many */
@keyframes qin{from{clip-path:inset(0 0 100% 0);transform:translateY(14px)}to{clip-path:inset(-10%);transform:none}}
#q-form.in>*{animation:qin .8s cubic-bezier(.2,.7,.1,1) both}
#q-form.in>:nth-child(2){animation-delay:.06s}#q-form.in>:nth-child(3){animation-delay:.14s}#q-form.in>:nth-child(4){animation-delay:.3s}#q-form.in>:nth-child(5){animation-delay:.38s}
.qsub{margin:10px 0 22px;color:var(--gra);max-width:46ch}
.qf{margin-bottom:8px}
.qchecks{display:flex;flex-wrap:wrap;gap:10px}
.form .qc{display:inline-flex;grid-template-columns:none;align-items:center;gap:0;cursor:pointer}
.qc input{position:absolute;opacity:0;width:1px;height:1px}
.qc span{display:block;border:1px solid var(--tg);border-radius:999px;padding:11px 16px;font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gra);transition:background .3s,color .3s,border-color .3s}
.qc input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--cer)}
.qc input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.qc.off{opacity:.35;cursor:default}
.qs3{margin-top:34px}
.qchips{display:flex;flex-wrap:wrap;gap:8px 20px}
.qchips button{padding:10px 0;border-bottom:1px solid var(--hair);color:var(--gra);transition:color .2s,border-color .2s}
.qchips button:hover{color:var(--ink);border-color:var(--ink)}

/* the price */
.qprice{margin-top:34px;padding-top:26px;scroll-margin-top:70px}
.qprice.in>*{animation:qin .8s cubic-bezier(.2,.7,.1,1) both}
.qprice.in>:nth-child(3){animation-delay:.5s}.qprice.in>:nth-child(4){animation-delay:.62s}.qprice.in>:nth-child(5){animation-delay:.74s}.qprice.in>:nth-child(6){animation-delay:1s}.qprice.in>:nth-child(7){animation-delay:1.1s}
.qbig{position:relative;margin:8px 0 6px;padding-bottom:18px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.qbig b{font:600 clamp(60px,10.5vw,150px)/.9 var(--display);font-stretch:76%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.qline{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spec);transform:scaleX(0);transform-origin:0 50%}
.qprice.in .qline{animation:qgrow 1.3s cubic-bezier(.2,.7,.1,1) .1s both}
@keyframes qgrow{to{transform:scaleX(1)}}
.qcfg{margin:22px 0 0;line-height:1.5}
.qcfg .mi{display:inline;margin-right:6px}
.qtab{margin-top:26px}
.qtab .facts{display:grid;grid-template-columns:auto 1fr;gap:0 24px;margin-top:10px}
.qtab .facts dt,.qtab .facts dd{border-top:1px solid var(--hair);padding:12px 0;margin:0;animation:qin .6s cubic-bezier(.2,.7,.1,1) both;animation-delay:calc(.1s + var(--i,0)*.09s)}
.qtab .facts dd{text-align:right;font-variant-numeric:tabular-nums}
.qtab .facts dd small{display:block;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tgt);margin-top:4px}
.qtab .facts .cur{color:var(--ink);font-weight:600}
.qnote{margin:22px 0 26px;color:var(--tgt);font-size:14px;line-height:1.55;max-width:60ch}
@media(max-width:900px){.quote .split>.b{margin-top:34px;scroll-margin-top:70px}.qdrop{min-height:200px;scroll-margin-top:66px}.qshot img{max-height:46vh}}
@media(max-width:600px){.qdemo .tag{font-size:9px;line-height:1.35}.qdemo .t2,.qdemo .t3,.qdemo .t4{white-space:normal;max-width:24%}.qdemo .t2{text-align:right;top:44%}.qdemo .t3{top:29%}.qdemo .t4{top:56%}}
@media(prefers-reduced-motion:reduce){.qdemo .tag,.qdemo .t1{opacity:1}.qdemo .dm,.qdemo .ld{stroke-dashoffset:0}.qline{transform:none}.cn{opacity:1}}