/* "See your store in action": phone mini demo. Sizes in rem; page tokens from site.css; screen palette is neutral on purpose. Animates transform/opacity only. */
.demo-section{background:#101a19}
.demo-section .demo-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4.5rem;align-items:center}
.demo-section .demo-copy h2{font-size:clamp(2.4rem,3.4vw,3.6rem)}
.demo-steps{list-style:none;margin:2rem 0 1.4rem;padding:0;display:grid;gap:.6rem;max-width:26rem}
.demo-steps button{display:flex;gap:1rem;align-items:center;width:100%;text-align:left;padding:.85rem 1rem;border:1px solid var(--line);border-radius:1rem;background:transparent;color:var(--muted);transition:border-color .3s,color .3s,background .3s}
.demo-steps b{display:grid;place-items:center;flex:0 0 auto;width:1.9rem;height:1.9rem;border:1px solid var(--line);border-radius:50%;font-size:.8rem;font-weight:560}
.demo-steps span{font-size:1rem;color:inherit;line-height:1.3}
.demo-steps small{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}
.demo-steps button.on{border-color:var(--lime);color:var(--ink);background:#d3efa210}
.demo-steps button.on b{background:var(--lime);border-color:var(--lime);color:#15221d}
.demo-note{max-width:26rem;font-size:.8rem}
.demo-stage{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.phone{position:relative;width:19rem;height:38.5rem;padding:.55rem;border-radius:2.8rem;background:#0b0f0f;box-shadow:0 0 0 1px #3a4a43,0 2rem 4.5rem #0008}
.phone-notch{position:absolute;z-index:5;top:1.05rem;left:50%;width:5.2rem;height:1.3rem;margin-left:-2.6rem;border-radius:1rem;background:#0b0f0f}
.screens{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2.3rem;background:#f6f2eb;color:#25211d;--d-mut:#7f786d;--d-line:#e6dfd3;--d-card:#fbf9f5;--d-ink:#25211d}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.9rem 1rem 1rem;background:#f6f2eb;opacity:0;transform:translateX(1.4rem);pointer-events:none;transition:opacity .55s ease,transform .55s ease;will-change:opacity,transform}
.screen.on{opacity:1;transform:none;pointer-events:auto}
.screen-cap{display:none}
.screens h3,.screens h4,.screens p,.screens ul{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0}
.screens button{font-family:inherit}
.sf-head{display:flex;align-items:center;gap:.5rem}
.sf-head strong{font:400 1.2rem/1 Georgia,'Times New Roman',serif;letter-spacing:.04em;color:var(--d-ink)}
.sf-tag{padding:.12rem .55rem;border:1px solid var(--d-line);border-radius:6.25rem;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--d-mut)}
.sf-cart{margin-left:auto;display:flex;align-items:center;gap:.3rem;padding:.3rem .65rem;border:1px solid var(--d-line);border-radius:6.25rem;background:var(--d-card)}
.sf-cart svg{width:1rem;height:1rem;fill:none;stroke:var(--d-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sf-cart b{min-width:.9rem;text-align:center;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.sf-cart.pop{animation:demo-pop .5s ease}
.sf-sub{margin:.55rem 0 .7rem;font-size:.68rem;color:var(--d-mut);letter-spacing:.04em}
.sf-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .7rem;align-content:start;scrollbar-width:none;margin:0 -.2rem;padding:0 .2rem 1rem}
.sf-scroll::-webkit-scrollbar{display:none}
.pcard{min-width:0}
.pcard figure{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:.8rem;background:#e9e3d8}
.pcard video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pinfo{display:flex;gap:.45rem;align-items:flex-start;margin-top:.45rem;min-height:3.3rem}
.pstill{flex:0 0 auto;width:1.7rem;height:2.2rem;border-radius:.3rem;object-fit:cover;background:#e9e3d8}
.pcard h4{font-size:.68rem;font-weight:560;line-height:1.25;color:var(--d-ink)}
.pprice{margin-top:.15rem;font-size:.7rem;color:var(--d-ink)}
.pprice span{font-weight:650;font-variant-numeric:tabular-nums}
.pprice small{display:block;font-size:.56rem;color:var(--d-mut);letter-spacing:.03em}
.screens .add,.screens .ck-btn{display:block;min-height:0;width:100%;margin-top:.5rem;padding:.55rem .5rem;border:0;border-radius:6.25rem;background:#25211d;color:#f6f2eb;font-size:.7rem;font-weight:560;letter-spacing:.02em;line-height:1.2;transition:background .25s,transform .2s}
.add.is-press,.ck-btn.is-press{transform:scale(.95)}
.add.added{background:#7f786d}
.ck h3,.po-head strong{font:400 1.25rem/1.2 Georgia,'Times New Roman',serif;color:var(--d-ink)}
.ck h3 small{font:560 .62rem/1 -apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--d-mut);margin-left:.4rem}
.ck{position:absolute}
.ck-panel{position:absolute;inset:2.9rem 1rem 1rem;display:flex;flex-direction:column;opacity:0;transform:translateY(.8rem);pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.ck-panel.on{opacity:1;transform:none;pointer-events:auto}
.ck-lines{list-style:none;padding:0;margin:1.1rem 0 .8rem;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.ck-lines li{display:flex;gap:.7rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--d-line);font-size:.78rem}
.ck-lines li:first-child{border-top:1px solid var(--d-line)}
.ck-lines img{width:2.2rem;height:2.9rem;border-radius:.4rem;object-fit:cover}
.ck-lines .nm{flex:1;min-width:0;line-height:1.3}
.ck-lines .nm small{display:block;color:var(--d-mut);font-size:.66rem}
.ck-lines b{font-variant-numeric:tabular-nums;font-weight:600}
.ck-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:.8rem;font-size:.85rem;color:var(--d-mut)}
.ck-row b{font-size:1.15rem;color:var(--d-ink);font-variant-numeric:tabular-nums}
.ck-btn{margin-top:1rem;padding:.8rem;font-size:.85rem}
.ck-btn.busy{background:#7f786d}
.ck-demo{margin-top:.7rem;text-align:center;font-size:.62rem;letter-spacing:.05em;color:var(--d-mut)}
.ck-sum{margin-top:.5rem;font-size:.72rem;line-height:1.4;color:var(--d-mut)}
.ck-card{display:flex;align-items:center;gap:.5rem;margin-top:1.1rem;padding:.9rem 1rem;border:1px solid var(--d-line);border-radius:.8rem;background:var(--d-card)}
.ck-card span{margin-right:auto;font-size:.7rem;color:var(--d-mut)}
.ck-card i{width:1.6rem;height:.4rem;border-radius:.3rem;background:var(--d-line)}
[data-sub=pay]{justify-content:flex-start}
[data-sub=pay] .ck-btn{margin-top:auto}
[data-sub=pay] .ck-demo{margin-top:.7rem}
[data-sub=done]{align-items:center;justify-content:center;text-align:center}
.ck-tick{width:3.6rem;height:3.6rem;border-radius:50%;background:#25211d;display:grid;place-items:center;margin-bottom:1rem}
.ck-tick svg{width:1.8rem;height:1.8rem;fill:none;stroke:#f6f2eb;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-big{margin-top:.5rem;font:400 2.4rem/1.1 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;color:var(--d-ink)}
.po-head{display:flex;align-items:center;gap:.6rem}
.po-card{margin-top:2.6rem;padding:1.6rem 1.2rem 1.4rem;border:1px solid var(--d-line);border-radius:1rem;background:var(--d-card)}
.po-row{display:flex;justify-content:space-between;align-items:baseline;padding:.8rem 0;font-size:.85rem;color:var(--d-mut);opacity:0;transform:translateY(.6rem);transition:opacity .5s ease,transform .5s ease}
.po-row b{font-size:1.05rem;color:var(--d-ink);font-variant-numeric:tabular-nums}
.po-row.rv{opacity:1;transform:none}
.po-bar{display:flex;height:.5rem;margin:.6rem 0 .3rem;border-radius:.3rem;overflow:hidden;background:#e6dfd3}
.po-bar i{display:block;height:100%;transform-origin:left;transition:transform .8s ease}
.po-net{width:92%;background:#25211d;transform:scaleX(0)}
.po-fee{width:8%;background:#b9ad9a;opacity:0;transition:opacity .6s ease .3s}
.po-bar.rv .po-net{transform:none}.po-bar.rv .po-fee{opacity:1}
.po-net-row{margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--d-line);color:var(--d-ink);font-weight:560}
.po-net-row b{font:400 2.1rem/1 Georgia,'Times New Roman',serif}
.po-note{margin-top:1rem;font-size:.66rem;line-height:1.5;color:var(--d-mut)}
.tap{position:absolute;z-index:6;left:0;top:0;width:2.2rem;height:2.2rem;margin:-1.1rem 0 0 -1.1rem;border-radius:50%;background:#25211d33;border:1px solid #25211d66;opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .3s}
.tap.show{opacity:1}
.tap.press{animation:demo-tap .45s ease}
.demo-dots{display:flex;gap:.6rem}
.demo-dots button{width:.7rem;height:.7rem;padding:0;border:1px solid var(--muted);border-radius:50%;background:transparent;transition:background .3s,transform .3s}
.demo-dots button.on{background:var(--lime);border-color:var(--lime);transform:scale(1.25)}
@keyframes demo-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes demo-tap{0%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1.9)}}
@media(max-width:1000px){.demo-section .demo-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}.demo-stage{width:100%}.demo-steps,.demo-note{max-width:32rem}}
@media(max-width:760px){.phone{width:min(19rem,100%)}}
/* Reduced motion: no autoplay, no transitions; the three stages sit side by side as static screens. */
.is-static .phone{width:100%;height:auto;padding:0;background:none;box-shadow:none;border-radius:0}
.is-static .phone-notch,.is-static .tap,.is-static .demo-dots{display:none}
.is-static .screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;height:auto;overflow:visible;background:none;border-radius:0}
.is-static .screen{position:relative;inset:auto;height:36rem;opacity:1;transform:none;pointer-events:auto;transition:none;border:.45rem solid #0b0f0f;border-radius:1.9rem;box-shadow:0 0 0 1px #3a4a43;padding-top:1rem;overflow:hidden}
.is-static .screen-cap{display:block;margin:0 0 .7rem;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--d-mut)}
.is-static .ck-panel{inset:3.3rem 1rem 1rem;transition:none}
.is-static .ck-panel:not(.on){display:none}
.is-static .po-row,.is-static .po-net,.is-static .po-fee{transition:none}
.is-static .demo-section .demo-grid,.demo-section.is-static-sec .demo-grid{grid-template-columns:minmax(0,1fr)}
.demo-section.is-static-sec .demo-grid{gap:2.5rem}
.demo-section.is-static-sec .demo-stage{width:100%}
@media(max-width:1000px){.is-static .screens{gap:.8rem}.is-static .screen{padding-left:.7rem;padding-right:.7rem}}
@media(max-width:760px){.is-static .screens{grid-template-columns:minmax(0,1fr);max-width:19rem;margin:auto}}
@media(prefers-reduced-motion:reduce){.screen,.ck-panel,.po-row,.po-bar i,.add,.ck-btn{transition:none!important}.sf-cart.pop,.tap.press{animation:none!important}}