/* Single sequence: highlight, extend, magnify, one slow scan, reveal and hold. */
.product-proof{display:block;padding:0;min-width:0}.proof-stage{position:relative;width:100%;height:440px;isolation:isolate;--proof-accent:#52755e}.product-proof-photo{position:absolute;left:0;top:112px;width:69%;border-radius:16px;overflow:visible;background:none}.product-proof-photo:after{content:none!important;animation:none!important}.proof-product-image{position:relative;overflow:hidden;border-radius:16px 16px 0 0}.proof-product-image>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.proof-model{border-radius:0 0 14px 14px;padding:12px 14px}.proof-qr-source{position:absolute;left:83.9%;top:25.8%;width:5%;height:7.5%;border:1.5px solid var(--proof-accent);box-shadow:0 0 0 3px #ffffffb3;border-radius:3px;z-index:2}.proof-magnifier-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}.proof-magnifier-lines path{stroke:var(--proof-accent);stroke-width:1.1;fill:none;stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round}.proof-qr-zoom{position:absolute;left:19%;top:20px;width:21%;aspect-ratio:1;max-width:128px;border:1px solid #b7c8b8;background:#fffefb;padding:12px;border-radius:14px;z-index:4;box-shadow:0 10px 28px #263c2c18;overflow:hidden;transform-origin:100% 100%}.proof-zoom-code{width:100%;height:100%;background:url('./product-demo-qr.svg') center/contain no-repeat}.proof-scan-line{position:absolute;left:8%;width:84%;height:2px;top:85%;background:#52755e;box-shadow:0 0 12px 3px #52755e3b;opacity:0}.proof-scan-success{position:absolute;right:6px;bottom:6px;background:#315d40;color:#fff;border:2px solid #fff;border-radius:50%;width:26px;height:26px;text-align:center;line-height:22px;font-size:17px}.proof-stage .proof-phone{position:absolute;left:66%;top:40px;width:34%;margin:0;min-height:355px;padding:18px 12px;border-width:6px;box-sizing:border-box;animation:none;transform:rotate(2deg);z-index:3;overflow:hidden}.proof-stage .proof-phone h2{font-size:23px}.proof-stage .proof-video img{height:115px}.proof-stage .proof-file{padding:11px 0;font-size:14px}.proof-stage .proof-open{font-size:15px}.proof-stage .proof-speaker{margin-bottom:21px}.proof-caption{margin:12px 0 0!important}.proof-connection{display:none!important}.proof-replay{display:inline-flex;align-items:center;gap:6px;margin-top:12px;border:0;border-bottom:1px solid #a7b7a8;padding:4px 0;background:transparent;color:#526b59;font:inherit;font-size:14px;cursor:pointer}.proof-replay:focus-visible{outline:2px solid #315d40;outline-offset:5px}
.proof-stage.is-ready .proof-qr-source,.proof-stage.is-ready .proof-magnifier-lines path,.proof-stage.is-ready .proof-qr-zoom,.proof-stage.is-ready .proof-phone-content,.proof-stage.is-ready .proof-scan-success{opacity:0}.proof-stage.is-playing .proof-qr-source{animation:proof-target-once 5s ease both}.proof-stage.is-playing .proof-magnifier-lines path{animation:proof-leaders-once 5s ease both}.proof-stage.is-playing .proof-qr-zoom{animation:proof-detail-once 5s ease both}.proof-stage.is-playing .proof-scan-line{animation:proof-scan-once 5s linear both}.proof-stage.is-playing .proof-scan-success{animation:proof-success-once 5s ease both}.proof-stage.is-playing .proof-phone-content{animation:proof-content-once 5s ease both}
@keyframes proof-target-once{0%{opacity:0}9%,80%{opacity:1}95%,100%{opacity:0}}
@keyframes proof-leaders-once{0%,10%{opacity:0;stroke-dashoffset:1}12%{opacity:1;stroke-dashoffset:1}24%,80%{opacity:1;stroke-dashoffset:0}95%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes proof-detail-once{0%,24%{opacity:0;transform:scale(.94)}34%,80%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.98)}}
@keyframes proof-scan-once{0%,36%{opacity:0;top:10%}39%{opacity:1;top:10%}69%{opacity:1;top:86%}72%,100%{opacity:0;top:86%}}
@keyframes proof-success-once{0%,70%{opacity:0;transform:scale(.85)}76%,100%{opacity:1;transform:scale(1)}}
@keyframes proof-content-once{0%,73%{opacity:0;transform:translateY(8px)}90%,100%{opacity:1;transform:translateY(0)}}
@media(max-width:1020px){.proof-stage{height:400px}.proof-stage .proof-phone{padding:16px 9px;min-height:330px}.proof-stage .proof-phone h2{font-size:21px}.proof-stage .proof-video img{height:95px}.proof-model span{font-size:13px}}
@media(max-width:767px){.product-proof{margin-top:30px}.proof-stage{height:370px}.product-proof-photo{top:105px}.proof-stage .proof-phone{left:64%;width:36%;top:34px;min-height:300px;padding:15px 8px;border-width:5px;border-radius:23px}.proof-stage .proof-phone h2{font-size:19px}.proof-stage .proof-video img{height:80px}.proof-stage .proof-file{font-size:13px;gap:5px;padding:10px 0}.proof-stage .proof-open{font-size:14px}.proof-stage .proof-phone-model{font-size:14px!important}.proof-model{padding:10px;font-size:15px}.proof-model span{font-size:12px}.proof-qr-zoom{top:29px;max-width:none}}
@media(prefers-reduced-motion:reduce){.proof-stage.is-ready .proof-qr-source,.proof-stage.is-ready .proof-magnifier-lines path,.proof-stage.is-ready .proof-qr-zoom,.proof-stage.is-ready .proof-phone-content,.proof-stage.is-ready .proof-scan-success{animation:none;opacity:1;transform:none;stroke-dashoffset:0}.proof-scan-line,.proof-replay{display:none}}

/* Keep the photo label clear and put matching sharp artwork over its QR. */
.proof-qr-source{background:#fff url('./product-demo-qr.svg') center/contain no-repeat;border-radius:2px}
.proof-model span{display:none}.proof-caption{max-width:68%;line-height:1.5}
.proof-stage .proof-phone h2{font-size:clamp(16px,1.8vw,23px);line-height:1.2}
@media(max-width:767px){.proof-qr-zoom{left:16%;top:20px;width:23%;max-width:112px;padding:8px}.proof-caption{max-width:100%}.proof-stage .proof-phone h2{font-size:17px}}

/* Tablet: give the demonstration its own row instead of squeezing the phone. */
@media (min-width:768px) and (max-width:1100px){
  .qr-first-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-block:48px}
  .qr-first-hero>div:first-child{max-width:680px}
  .qr-first-hero h1{max-width:20ch}
  .qr-first-hero .product-proof{width:100%;max-width:620px;justify-self:center;margin:0 auto;min-width:0}
  .qr-first-hero .proof-stage{height:440px}
  .qr-first-hero .product-proof-photo{top:112px;width:69%}
  .qr-first-hero .proof-stage .proof-phone{left:66%;top:28px;width:34%;min-height:355px;padding:18px 12px;transform:rotate(2deg)}
  .qr-first-hero .proof-stage .proof-phone h2{font-size:21px;overflow-wrap:normal}
  .qr-first-hero .proof-stage .proof-video img{height:110px}
  .qr-first-hero .proof-stage .proof-file{font-size:14px;padding:11px 0}
  .qr-first-hero .proof-caption{max-width:100%}
}