/* P12 Ecommerce Back Office — storefront / backstage */
.page-ecom main>section{overflow-x:clip}
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--p3)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--mut);margin-bottom:22px}
.crumbs a:hover{color:var(--p3)}.crumbs b{color:var(--p3);font-weight:600}
:root{--ok:#1c9d61;--okb:#e6f7ee;--ex:#c2570c;--exb:#fff4e6;--red:#c8324f}

/* hero */
.ec-hero{position:relative;padding:56px 0 100px;background:radial-gradient(800px 500px at 80% 40%,#f1e9ff,transparent 70%),linear-gradient(180deg,#fff,var(--lav2))}
.ec-hero:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,var(--p) 0 40px,#fff 40px 80px);opacity:.9}
.ec-hin{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.ec-hin>*{min-width:0}
.ec-h1{font-size:clamp(32px,3.5vw,50px);margin:18px 0 22px;max-width:640px}
.tagw{position:relative;display:inline-block;color:var(--p3);padding:0 .18em;margin:0 -.06em}
.tagw:before{content:"";position:absolute;inset:.08em 0 .02em;border:2px dashed #cdb6fb;border-radius:12px;z-index:-1;opacity:0;animation:tagIn .6s var(--ease) 1.05s forwards}
.tagw.t2:before{border-color:#9fdcbf;animation-delay:1.3s}.tagw.t2{color:#157a4c}
.ec-h1 .ln{position:relative;z-index:0}
@keyframes tagIn{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}
.ec-stage{position:relative;padding:0 0 30px}
.viewtog{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin:0 0 16px 32%;background:#fff;border:1px solid var(--line);border-radius:30px;padding:4px;box-shadow:0 8px 20px rgba(60,30,130,.08)}
.vt-b{position:relative;z-index:1;padding:8px 16px;border-radius:24px;font-size:13px;font-weight:700;color:var(--mut);transition:color .3s}
.vt-b.on{color:#fff}
.vt-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:24px;background:var(--p);transition:transform .45s var(--ease)}
.viewtog.back .vt-pill{transform:translateX(100%);background:var(--ink)}
.flip{perspective:1400px;margin-left:32%}
.flip-in{display:grid;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.6,.05,.25,1)}
.flip.back .flip-in{transform:rotateY(180deg)}
.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 60px rgba(64,30,140,.15);overflow:hidden}
.face.back{transform:rotateY(180deg);background:#fcfbff;padding:18px}
.pimg{position:relative;height:190px;background:linear-gradient(135deg,#efe6ff,#e2d3ff);display:grid;place-items:center}
.pimg svg{width:120px;height:120px}
.bag-b{fill:var(--p)}.bag-s{fill:var(--p3)}.bag-h{fill:none;stroke:var(--p3);stroke-width:6;stroke-linecap:round}
.pimg svg{transition:filter .4s}
.sale{position:absolute;top:14px;left:14px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:14px}
.pinfo{padding:16px 18px 18px}
.pinfo small{font-size:12px;color:var(--mut)}
.pinfo b{display:block;font-size:18px;margin-top:2px}
.price{font-size:20px;font-weight:800;color:var(--p3);margin:6px 0 10px}
.vars{display:flex;gap:8px}
.sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.sw.on{box-shadow:0 0 0 2px var(--p)}
.s1{background:var(--p)}.s2{background:#d9c7a4}.s3{background:#2a2a3a}
.sizes{display:flex;gap:6px;margin:10px 0 14px}
.sizes span{min-width:34px;text-align:center;padding:5px 0;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:700}
.sizes .on{background:var(--ink);color:#fff;border-color:var(--ink)}
.atc{display:block;text-align:center;padding:11px;border-radius:12px;background:var(--p);color:#fff;font-weight:700;font-size:14px}
.rec-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rec-top em{font-style:normal;font-size:11px;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:12px;padding:3px 8px}
.rfield{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 10px;border-radius:10px;font-size:13px;border:1px solid transparent;opacity:0;transform:translateX(12px);transition:.45s var(--ease)}
.rfield span{color:var(--mut);font-size:12px}.rfield b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flip.back .rfield{opacity:1;transform:none}
.flip.back .rfield:nth-child(2){transition-delay:.55s}.flip.back .rfield:nth-child(3){transition-delay:.65s}.flip.back .rfield:nth-child(4){transition-delay:.75s}.flip.back .rfield:nth-child(5){transition-delay:.85s}.flip.back .rfield:nth-child(6){transition-delay:.95s}.flip.back .rfield:nth-child(7){transition-delay:1.05s}
.rfield:nth-child(odd){background:#fff;border-color:var(--line)}
.rfield.lock{background:var(--exb)!important;border-color:#f6d8bb!important}
.rec-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:12px;font-weight:600;color:var(--mut);opacity:0;transition:opacity .4s 1.2s}.rec-foot span{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--okb)}.flip.back .rec-foot{opacity:1}
.rst{font-style:normal;font-size:11px;font-weight:800;padding:4px 8px;border-radius:12px;white-space:nowrap}
.rst.ok{background:var(--okb);color:var(--ok)}
.rst.lk{background:#fff;color:var(--ex);border:1px solid #f6d8bb}
.rst.lk:before{content:"🔒︎ ";filter:grayscale(1)}
.beam{position:absolute;left:24%;top:60%;width:10%;width:14%;height:110px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(156,103,255,.55),rgba(156,103,255,0));clip-path:polygon(0 46%,100% 0,100% 100%,0 54%);opacity:0;pointer-events:none;z-index:3}
.beam.on{animation:beamP 1.1s ease-out}
@keyframes beamP{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.ec-eagle{position:absolute;left:-24px;bottom:10px;width:38%;z-index:2;filter:drop-shadow(0 20px 26px rgba(50,20,110,.22));animation:bob 5.5s ease-in-out infinite;pointer-events:none}

/* work aisles */
.wk-head{max-width:760px;margin-bottom:36px}
.aisle{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:stretch}
.aisle>*{min-width:0}
.ai-tabs{display:grid;gap:10px}
.ai-t{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:16px;overflow:hidden;transition:.3s var(--ease)}
.ai-t:hover{border-color:#cdb6fb}
.ai-n{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:12px;background:var(--lav);color:var(--p3);transition:.3s}
.ai-t.on{border-color:var(--p);box-shadow:0 14px 30px rgba(90,40,200,.14)}
.ai-t.on .ai-n{background:var(--p);color:#fff}
.ai-t:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--p)}
.ai-t.on.run:after{animation:aiBar 4s linear forwards}
@keyframes aiBar{to{width:100%}}
.ai-panels{position:relative;display:grid;border-radius:22px;background:linear-gradient(160deg,var(--ink),#2a2160);color:#fff;padding:30px;overflow:hidden}
.ai-panels:before{content:"";position:absolute;inset:auto -60px -80px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(156,103,255,.45),transparent)}
.ai-p{grid-area:1/1;display:grid;gap:24px;align-content:start;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s,transform .45s var(--ease),visibility 0s .45s}
.ai-p.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s var(--ease)}
.ai-p h3{font-size:24px;color:#fff}.ai-p p{color:#cfcae3;margin-top:8px;max-width:520px}
.shelf{display:flex;flex-wrap:wrap;gap:9px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.shelf span{padding:9px 13px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:13.5px;font-weight:600;opacity:0;transform:translateY(10px)}
.ai-p.on .shelf span{animation:shelfIn .45s var(--ease) forwards}
.ai-p.on .shelf span:nth-child(2){animation-delay:.07s}.ai-p.on .shelf span:nth-child(3){animation-delay:.14s}.ai-p.on .shelf span:nth-child(4){animation-delay:.21s}.ai-p.on .shelf span:nth-child(5){animation-delay:.28s}.ai-p.on .shelf span:nth-child(6){animation-delay:.35s}.ai-p.on .shelf span:nth-child(7){animation-delay:.42s}
@keyframes shelfIn{to{opacity:1;transform:none}}
.shelf .lk{background:rgba(245,158,43,.14);border-color:rgba(245,158,43,.45);color:#ffd6a1}
.shelf .sc{background:rgba(126,226,176,.12);border-color:rgba(126,226,176,.4);color:#a9f0cb}

/* protect */
.pt-head{max-width:800px;margin-bottom:36px}
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pt-grid>*{min-width:0}
.vtree,.imp{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--sh)}
.vtree p,.imp p{font-size:14px;color:var(--mut);margin-top:16px}
.parent{margin:16px auto 0;width:max-content;max-width:100%;text-align:center;padding:12px 20px;border-radius:14px;background:var(--lav);border:1px solid #d9c9f7}
.parent b{display:block;font-size:15px}.parent small{font-size:12px;color:var(--mut);font-family:"JetBrains Mono",monospace}
.tree-l{display:block;width:100%;height:42px}
.tree-l path{fill:none;stroke:#cdb6fb;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1s var(--ease) .3s}
.vtree.vis .tree-l path{stroke-dashoffset:0}
.kids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kid{position:relative;text-align:center;padding:12px 8px;border-radius:12px;border:1px solid var(--line);background:var(--lav2);transition:.5s var(--ease) 1s}
.kid b{display:block;font-size:14px}.kid small{font-size:11px;color:var(--mut);font-family:"JetBrains Mono",monospace}
.kid em{position:absolute;left:50%;top:-12px;transform:translateX(-50%) scale(.8);white-space:nowrap;font-style:normal;font-size:10.5px;font-weight:800;background:var(--p);color:#fff;padding:3px 8px;border-radius:10px;opacity:0;transition:.4s var(--ease) 1.2s}
.vtree.vis .kid.tgt{border-color:var(--p);background:#fff;box-shadow:0 0 0 4px rgba(127,66,244,.14);transform:translateY(-3px)}
.vtree.vis .kid.tgt em{opacity:1;transform:translateX(-50%)}
.vtree.vis .kid:not(.tgt){opacity:.55}
.src{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.src span{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:20px}
.src-b{background:var(--okb);color:var(--ok)}.src-c{background:var(--exb);color:var(--ex)}
.csv{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-family:"JetBrains Mono",monospace;font-size:12px}
.cr{display:grid;grid-template-columns:1.1fr .8fr 1.2fr;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);transition:background .4s}
.cr:last-child{border-bottom:0}
.cr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch{background:var(--lav2);font-weight:700;color:var(--mut);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.imp.s1 .cr.smp{background:#f4efff;box-shadow:inset 3px 0 0 var(--p)}
.imp.s1 .cr.smp.bad{background:#fdecef;box-shadow:inset 3px 0 0 var(--red);color:var(--red)}
.gates{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.g{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:8px 12px;border-radius:10px;border:1px dashed #d8cdea;color:var(--mut);transition:.35s}
.g:before{content:"";width:14px;height:14px;border-radius:4px;border:2px solid #d5c6f5;transition:.3s}
.imp.s1 .gt1,.imp.s2 .gt2{border-style:solid;border-color:#bfe8d3;background:#f5fbf8;color:var(--ok)}
.imp.s1 .gt1:before,.imp.s2 .gt2:before{background:var(--ok);border-color:var(--ok)}
.apply{margin-left:auto;font-size:13px;font-weight:800;padding:9px 14px;border-radius:10px;background:#ece7f5;color:#a49fb8;transition:.4s}
.imp.s3 .apply{background:var(--p);color:#fff;box-shadow:0 10px 20px rgba(127,66,244,.3)}

/* queue */
.q-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.q-in>*{min-width:0}
.tickets{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tk{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;box-shadow:0 12px 28px rgba(60,30,130,.08);opacity:0;transform:translate(calc((1 - var(--i)) * 30px),40px) rotate(calc((var(--i) - 1.5) * 4deg));transition:opacity .6s var(--ease),transform .8s var(--ease),box-shadow .3s;transition-delay:calc(.15s + var(--i)*.14s)}
.tk:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--ex)}
.tickets.vis .tk{opacity:1;transform:none}
.tk:hover{box-shadow:0 18px 38px rgba(60,30,130,.14)}
.tk-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tk-id{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mut)}
.tk-tag{font-size:11px;font-weight:800;padding:3px 8px;border-radius:10px;background:var(--exb);color:var(--ex)}
.tk b{display:block;font-size:15px;line-height:1.3}.tk small{display:block;font-size:12.5px;color:var(--mut);margin-top:4px}
.tk-o{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:700}
.av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:800}
.a1{background:var(--p)}.a2{background:#2f80ed}.a3{background:var(--ok)}.a4{background:var(--ex)}

/* separate */
.sp-head{max-width:720px;margin-bottom:36px}
.bridge{display:grid;grid-template-columns:1fr 160px 1fr;align-items:stretch}
.bridge>*{min-width:0}
.side{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--sh)}
.side h3{font-size:21px;margin:8px 0 6px}.side p{font-size:15px;color:var(--mut)}
.side.ret{border-color:#cfeede}.side.ret .mono{color:var(--ok)}
.meas{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.meas small{width:100%;font-size:12px;color:var(--mut);font-weight:600}
.meas span{font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:9px;background:var(--lav2);border:1px solid var(--line)}
.ret .meas span{background:#f5fbf8;border-color:#cfeede}
.link-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.lm-line{position:relative;width:100%;height:2px;background:linear-gradient(90deg,var(--p2),#4fd197)}
.lm-line i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--p);animation:lmFlow 2.4s linear infinite}
.lm-line i:nth-child(2){background:var(--ok);animation-direction:reverse;animation-delay:-1.2s}
@keyframes lmFlow{to{left:calc(100% - 10px)}}
.link-mid em{font-style:normal;font-size:12px;font-weight:700;color:var(--p3);background:#fff;border:1px solid #cdb6fb;border-radius:20px;padding:5px 10px;white-space:nowrap}
.sp-note{text-align:center;font-weight:700;margin-top:22px}
.txt-link{display:inline-flex;gap:8px;margin-top:18px;font-weight:700;color:var(--p3)}
.txt-link span{transition:transform .3s var(--ease)}.txt-link:hover span{transform:translateX(5px)}

/* onboarding */
.ob-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ob-in>*{min-width:0}
.ob-art img{width:100%;height:auto;animation:floaty 8s ease-in-out infinite}
.agree{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.agree span{padding:8px 13px;border-radius:30px;background:var(--p);color:#fff;font-size:13px;font-weight:700}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.mc{padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff}
.mc svg{width:100%;height:34px;display:block;margin-bottom:8px}
.mc path{fill:none;stroke:var(--p);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.3s var(--ease) .3s}
.mgrid.vis .mc path{stroke-dashoffset:0}
.mc:nth-child(3) path,.mc:nth-child(4) path{stroke:var(--ex)}
.mc b{font-size:14px}
.ob-note{display:block;font-size:12px;color:var(--mut);margin-top:10px}

/* faq */
.efq-head{max-width:700px;margin-bottom:30px}
.efq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
.qn{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--p);margin-right:14px;flex:none}
.qa button{justify-content:flex-start}.qa button .pm{margin-left:auto}

@media (max-width:1100px){
 .ec-hin{grid-template-columns:1fr;gap:40px}
 .ec-stage{max-width:640px}
 .aisle,.pt-grid,.q-in,.ob-in{grid-template-columns:1fr;gap:32px}
 .bridge{grid-template-columns:1fr;gap:0}
 .link-mid{flex-direction:row;height:70px}.lm-line{width:2px;height:100%;background:linear-gradient(180deg,var(--p2),#4fd197)}
 .lm-line i{left:-4px!important;animation:lmFlowY 2.4s linear infinite}
 @keyframes lmFlowY{from{top:0}to{top:calc(100% - 10px)}}
}
@media (max-width:700px){
 .ec-hero{padding:34px 0 70px}
 .viewtog,.flip{margin-left:0}
 .ec-stage{padding-bottom:170px}
 .ec-eagle{left:auto;right:-6px;width:170px;transform:scaleX(-1);animation:none}
 .beam{display:none}
 .ai-tabs{grid-template-columns:1fr 1fr}
 .ai-t{padding:12px;font-size:14px;gap:10px}.ai-n{width:32px;height:32px}
 .ai-panels{padding:22px}
 .kids{gap:6px}.kid b{font-size:12.5px}.kid small{font-size:10px}
 .cr{grid-template-columns:1fr .7fr 1fr;font-size:11px}
 .tickets{grid-template-columns:1fr}
 .mgrid,.efq-grid{grid-template-columns:1fr}
 .apply{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
 .ec-eagle,.ob-art img,.lm-line i{animation:none}
 .tagw:before{animation:none;opacity:1}
 .flip-in{transition:none}
}