.demo-page{width:min(1096px,100% - 64px);margin:56px auto 64px}.demo-hero{text-align:center;max-width:820px;margin:auto}.demo-hero>.brand{justify-content:center;margin-bottom:24px}.demo-hero>.eyebrow{display:block}.demo-hero h1{letter-spacing:-1.8px;margin:20px 0;font-size:clamp(34px,4.2vw,52px);line-height:1.13}.demo-hero>p{color:var(--muted);max-width:650px;margin:0 auto;font-size:18px;line-height:1.7}.demo-hero .hero-actions,.demo-finish .hero-actions{flex-wrap:wrap;justify-content:center}.demo-hero>.demo-hero-note{margin-top:20px;font-size:13px}.demo-route{color:var(--muted);justify-content:center;align-items:center;gap:20px;margin:44px auto 0;font-size:14px;display:flex}.demo-route span:nth-child(odd){border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:10px;padding:10px 18px}.demo-story{margin-top:80px;scroll-margin-top:24px}.demo-story-heading{text-align:center;margin-bottom:32px}.demo-story-heading h2{letter-spacing:-.8px;margin:0 0 10px;font-size:28px}.demo-story-heading p{color:var(--muted);margin:0;font-size:15px}.demo-story-grid{grid-template-columns:.8fr 1.2fr;align-items:start;gap:50px;display:grid}.demo-step{align-items:center;min-height:80vh;scroll-margin-top:28px;display:flex}.demo-step-copy{width:100%;padding:40px 0}.demo-step-kicker{color:var(--accent);letter-spacing:1px;align-items:center;gap:10px;font-size:12px;font-weight:600;display:flex}.demo-step h3{letter-spacing:-1px;margin:20px 0 16px;font-size:32px;line-height:1.2}.demo-step p{color:var(--muted);margin:0;font-size:16px;line-height:1.8}.demo-mid-cta{color:var(--accent);align-items:center;gap:10px;min-height:44px;margin-top:24px;font-size:14px;font-weight:550;display:inline-flex}.demo-sticky{padding-top:28px;position:sticky;top:36px}.demo-scene{background:linear-gradient(140deg,#f0faff,#f1efff);border:1px solid #e0e5f0;border-radius:22px;animation:.26s cubic-bezier(.23,1,.32,1) both demo-scene-enter;overflow:hidden;box-shadow:0 14px 45px #20386d0a}.demo-scene-top{color:#626b80;background:#ffffffbd;border-bottom:1px solid #e0e5f0;align-items:center;gap:8px;padding:17px 20px;font-size:12px;display:flex}.demo-scene-top>span:last-child{margin-left:auto;font-size:11px}.demo-scene-dot{background:#5d78ed;border-radius:50%;width:6px;height:6px}.demo-stage{justify-content:center;align-items:center;height:420px;padding:28px 20px;display:flex}.demo-scene-bottom{color:#626b80;background:#ffffffa6;border-top:1px solid #e0e5f0;justify-content:space-between;align-items:center;gap:12px;padding:15px 20px;font-size:11px;display:flex}.demo-scene-bottom>span:first-child{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}.demo-scan-layout{align-items:center;gap:22px;display:flex}.demo-qr-card{border:1px solid var(--line);text-align:center;background:#fff;border-radius:16px;width:174px;padding:20px 16px;box-shadow:0 12px 30px #20386d0a}.demo-qr-card .brand{justify-content:center}.demo-qr-card .brand-logo-frame{width:98px}.demo-qr{width:116px;height:116px;margin:12px auto;display:block}.demo-qr-card p{color:var(--muted);margin:0!important;font-size:12px!important;line-height:1.5!important}.demo-phone{background:#fff;border:6px solid #252a3a;border-radius:30px;width:218px;height:358px;padding:16px 12px 14px;position:relative;box-shadow:0 16px 28px #18254312}.demo-phone-speaker{background:#252a3a;border-radius:8px;width:48px;height:5px;margin:-6px auto 15px}.demo-phone-content>.brand{justify-content:center}.demo-phone-content .brand-logo-frame{width:90px}.demo-phone-content h3{text-align:center;letter-spacing:-.3px!important;margin:18px 0 14px!important;font-size:17px!important;line-height:1.3!important}.demo-phone-content>p{color:var(--muted);text-align:center;margin:8px 0!important;font-size:12px!important;line-height:1.6!important}.scan-phone{width:164px;height:286px;animation:.6s cubic-bezier(.23,1,.32,1) both paused demo-phone-enter}.is-active .scan-phone{animation-play-state:running}.demo-camera{background:#f6f8fc;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;height:calc(100% - 18px);display:flex}.demo-camera>span{color:var(--muted);font-size:11px}.demo-viewfinder{border:2px solid #6689f2;border-radius:12px;width:108px;height:118px;position:relative}.demo-viewfinder .demo-qr{width:88px;height:88px;margin:12px auto}.demo-camera small{color:var(--accent);font-size:10px}.demo-scan-line{background:#4a9bff;height:2px;animation:1.8s ease-in-out 2 paused demo-scan;position:absolute;top:14px;left:4px;right:4px}.is-active .demo-scan-line{animation-play-state:running}.demo-drop{color:var(--accent);background:#f7f9ff;border:1px dashed #b8c6ee;border-radius:12px;flex-direction:column;align-items:center;gap:9px;padding:18px 8px;font-size:12px;display:flex}.demo-upload-file{animation:.45s cubic-bezier(.23,1,.32,1) both paused demo-file-enter}.is-active .demo-upload-file{animation-play-state:running}.demo-file-row{border-bottom:1px solid #edf0f6;align-items:center;gap:10px;min-width:0;padding:12px 0;display:flex}.demo-file-icon{width:30px;height:36px;color:var(--accent);background:#f0f3ff;border-radius:7px;flex-shrink:0;place-items:center;display:grid}.demo-file-row>div{flex:1;min-width:0}.demo-file-row strong{overflow-wrap:anywhere;font-size:12px;font-weight:550;display:block}.demo-file-row small{color:var(--muted);margin-top:3px;font-size:11px;display:block}.demo-file-row>svg{color:#218b51;flex-shrink:0;width:16px}.demo-progress{background:#eaeef8;border-radius:6px;height:5px;margin-top:16px;overflow:hidden}.demo-progress>span{transform-origin:0;background:linear-gradient(90deg,#25bbef,#4f46e5);width:100%;height:100%;transition:transform .35s linear;display:block}.demo-upload-status{justify-content:center;align-items:center;gap:6px;display:flex;color:var(--accent)!important;margin-top:8px!important;font-size:11px!important}.demo-upload-status svg{width:14px}.demo-success{color:#218b51;background:#e9f8ee;border-radius:50%;place-items:center;width:38px;height:38px;margin:18px auto 0;display:grid}.demo-phone-content .demo-success+h3{margin-top:12px!important}.demo-code{justify-content:center;gap:8px;margin:18px 0 16px;display:flex}.demo-code>span{width:34px;height:46px;color:var(--accent);font-variant-numeric:tabular-nums;background:#fafaff;border:1px solid #d7d9f3;border-radius:8px;place-items:center;font-size:27px;font-weight:650;animation:.26s cubic-bezier(.23,1,.32,1) both paused demo-digit;display:grid}.is-active .demo-code>span{animation-play-state:running}.demo-phone-timer{color:var(--muted);justify-content:center;align-items:center;gap:5px;margin-top:18px;font-size:10px;display:flex}.demo-phone-timer svg{width:14px}.demo-desktop{background:#fff;border:1px solid #dce2ee;border-radius:14px;width:100%;max-width:410px;overflow:hidden;box-shadow:0 16px 35px #20386d10}.demo-desktop-header{border-bottom:1px solid var(--line);color:var(--muted);background:#fafbfe;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:10px;display:flex}.demo-desktop-header .brand-logo-frame{width:90px}.demo-desktop-content{padding:24px}.demo-desktop-content h3{text-align:center;letter-spacing:-.4px!important;margin:0 0 18px!important;font-size:18px!important;line-height:1.4!important}.demo-desktop-content .demo-code{margin:26px 0}.demo-desktop-content .demo-code>span{width:48px;height:58px;font-size:30px}.demo-desktop-content .primary{width:100%;min-height:44px;padding:10px 12px;font-size:12px}.demo-desktop-content>small{text-align:center;color:var(--muted);margin-top:12px;font-size:10px;line-height:1.6;display:block}.demo-transfer-heading{justify-content:space-between;align-items:center;display:flex}.demo-transfer-heading h3{margin:0!important;font-size:16px!important}.demo-transfer-heading>span{color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px}.demo-received-files{margin:12px 0 18px;animation:.45s cubic-bezier(.23,1,.32,1) both paused demo-file-enter}.is-active .demo-received-files{animation-play-state:running}.demo-expiry-label{color:var(--muted);justify-content:center;align-items:center;gap:8px;font-size:12px;display:flex}.demo-countdown{letter-spacing:-2px;font-variant-numeric:tabular-nums;text-align:center;color:var(--accent);margin:20px 0 10px;font-size:48px;font-weight:600}.demo-time-caption{text-align:center;color:var(--muted);margin:0!important;font-size:11px!important}.demo-expiring-file{margin-top:18px;transition:opacity .45s,transform .45s cubic-bezier(.23,1,.32,1)}.demo-expiring-file.is-deleted{opacity:0;transform:translateY(-8px)}.demo-deleted-message{color:#218b51;opacity:0;justify-content:center;align-items:center;gap:6px;min-height:44px;margin-top:-44px;font-size:12px;transition:opacity .25s;display:flex}.demo-deleted-message.is-visible{opacity:1}.demo-step-nav{justify-content:center;gap:10px;margin-top:18px;display:flex}.demo-step-nav a{border:1px solid var(--line);width:36px;height:36px;color:var(--muted);background:#fff;border-radius:50%;place-items:center;font-size:12px;display:grid}.demo-step-nav a[aria-current]{background:var(--accent);color:#fff;border-color:var(--accent)}.demo-mobile-scene{display:none}.demo-finish{text-align:center;background:linear-gradient(135deg,#eefaff,#f1efff);border:1px solid #e0e5f0;border-radius:22px;margin-top:60px;padding:52px 24px}.demo-finish h2{letter-spacing:-1px;max-width:580px;margin:18px auto;font-size:34px;line-height:1.25}.demo-finish>p{color:var(--muted);font-size:16px}.demo-finish-price{color:var(--ink)!important;margin-top:24px!important;font-size:14px!important}.demo-finish-price>span{color:var(--muted);margin-top:8px;font-size:12px;display:block}@keyframes demo-scene-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes demo-phone-enter{0%{opacity:0;transform:translate(12px,6px)}to{opacity:1;transform:none}}@keyframes demo-file-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes demo-digit{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes demo-scan{0%,to{transform:translateY(0)}50%{transform:translateY(86px)}}@media (max-width:1000px){.demo-story-grid{grid-template-columns:.75fr 1.25fr;gap:26px}.demo-step h3{font-size:28px}.demo-scan-layout{gap:12px}.demo-qr-card{width:148px;padding:16px 10px}.scan-phone{width:144px}.demo-stage{padding:22px 14px}}@media (max-width:760px){.demo-page{width:calc(100% - 32px);margin:32px auto 40px}.demo-hero h1{letter-spacing:-1.2px;font-size:34px}.demo-hero>p{font-size:15px}.demo-hero .hero-actions{gap:10px}.demo-route{gap:8px;margin-top:28px;font-size:12px}.demo-route span:nth-child(odd){padding:8px 10px}.demo-story{margin-top:48px}.demo-story-heading h2{font-size:24px}.demo-story-heading p{font-size:14px}.demo-story-grid{display:block}.demo-sticky{display:none}.demo-step{min-height:0;margin:0 0 36px;display:block}.demo-step-copy{padding:0}.demo-step h3{margin:14px 0 12px;font-size:25px}.demo-step p{font-size:15px}.demo-mobile-scene{margin-top:22px;display:block}.demo-stage{height:370px;padding:20px 12px}.demo-scene{border-radius:18px}.demo-scene-top{padding:14px 15px;font-size:11px}.demo-scene-top>span:last-child{font-size:10px}.demo-scene-bottom{padding:14px 15px;font-size:10px}.demo-qr-card{width:144px}.scan-phone{width:144px;height:276px}.demo-scan-layout{gap:12px}.demo-phone{height:338px}.scan-phone{height:276px}.demo-finish{margin-top:40px;padding:36px 20px}.demo-finish h2{font-size:28px}.demo-finish .hero-actions{gap:10px}}@media (max-width:360px){.demo-qr-card{width:125px;padding:14px 6px}.demo-qr-card .demo-qr{width:100px;height:100px}.scan-phone{width:126px;padding:14px 6px}.demo-scan-layout{gap:8px}.demo-viewfinder{width:98px}.demo-desktop-content{padding:20px 16px}.demo-desktop-content .demo-code>span{width:40px}.demo-route{gap:6px}}@media (prefers-reduced-motion:reduce){.demo-scene,.demo-code>span,.demo-upload-file,.demo-received-files,.scan-phone{opacity:1!important;animation:none!important;transform:none!important}.demo-scan-line{display:none}.demo-expiring-file,.demo-deleted-message,.demo-progress>span{transition:none}.demo-step{min-height:65vh}}