/* Interactive product demonstration. Screens are captures of the real apps. */
.transfer-demo{margin:0;min-width:0;padding:clamp(14px,2vw,22px);border:1px solid var(--line);border-radius:24px;background:var(--surface);overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.12)}
.transfer-demo-label{display:block;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.09em;text-align:center}
.transfer-demo-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:275px;margin:12px 0 14px;isolation:isolate}
.transfer-demo-phone{position:relative;z-index:2;flex:none;width:29%;max-width:148px;aspect-ratio:9/19.5;padding:5px;border:3px solid #303741;border-radius:24px;background:#090d13;box-shadow:0 16px 30px rgba(0,0,0,.45);transform:rotate(-5deg) translate(5%,1%)}
.transfer-demo-phone img{display:block;width:100%;height:100%;border-radius:17px;object-fit:cover;object-position:top;image-rendering:auto}
.transfer-demo-phone-camera{position:absolute;z-index:3;top:7px;left:50%;width:25%;height:6px;border-radius:8px;background:#090d13;transform:translateX(-50%)}
.transfer-demo-laptop{z-index:1;flex:none;width:74%;max-width:390px;margin-left:-7%;transform:translateY(-4px)}
.transfer-demo-laptop-screen{position:relative;padding:7px 7px 10px;aspect-ratio:1.52;border:5px solid #242b34;border-radius:13px 13px 4px 4px;background:#0b1017;box-shadow:0 18px 32px rgba(0,0,0,.32);overflow:hidden}
.transfer-demo-windowbar{display:flex;justify-content:space-between;align-items:center;height:20px;padding:0 6px;color:#ccd6df;background:#151c25;font-size:9px;line-height:1}
.transfer-demo-windowbar span{letter-spacing:.25em}
.transfer-demo-laptop-screen>img{display:block;width:100%;height:calc(100% - 20px);object-fit:cover;object-position:top;border-radius:0 0 2px 2px}
.transfer-demo-laptop-base{height:12px;margin:0 -6%;border-radius:0 0 60% 60%;background:linear-gradient(#66727d,#303a44 50%,#171e25);box-shadow:0 10px 20px rgba(0,0,0,.3)}
.transfer-demo-received{position:absolute;right:4%;bottom:8%;display:flex;align-items:center;gap:8px;max-width:75%;padding:8px 10px;border:1px solid #24e0a0;border-radius:10px;background:#14221f;color:#e7fff7;font-size:clamp(9px,.9vw,12px);font-weight:600;box-shadow:0 8px 18px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none}
.transfer-demo-received>span:first-child{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#20dea0;color:#06281d}
.transfer-demo[data-state="done"] .transfer-demo-received{opacity:1;transform:translateY(0)}
.transfer-demo-file{position:absolute;z-index:4;left:30%;top:45%;display:grid;place-items:center;width:36px;height:36px;border:1px solid #6de9c3;border-radius:9px;background:#172821;color:#33e6ac;font-size:16px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none}
.transfer-demo-file--two{top:52%;font-size:13px}
.transfer-demo-file--three{top:59%;font-size:9px}
.transfer-demo-file[hidden]{display:none}
.hero--outcome .hero-grid{width:min(100% - 3rem,1240px);grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:clamp(24px,3vw,48px)}
.hero--outcome .transfer-demo{width:100%;box-sizing:border-box}
.hero--outcome .transfer-demo-stage{min-height:365px}
.hero--outcome .transfer-demo-phone{max-width:180px}
.hero--outcome .transfer-demo-laptop{max-width:480px}
.transfer-demo[data-state="sending"] .transfer-demo-file{animation:demo-file-fly 1.9s cubic-bezier(.4,.05,.22,1) forwards}
.transfer-demo[data-state="sending"] .transfer-demo-file--two{animation-delay:.26s}
.transfer-demo[data-state="sending"] .transfer-demo-file--three{animation-delay:.52s}
@keyframes demo-file-fly{0%{left:30%;opacity:0;transform:scale(.7) rotate(-8deg)}12%{opacity:1}70%{opacity:1}100%{left:76%;top:46%;opacity:0;transform:scale(.52) rotate(8deg)}}
.transfer-demo-send{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:12px;background:#22dda2;color:#07251d;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:filter .2s,transform .2s}
.transfer-demo-send:hover{filter:brightness(1.07);transform:translateY(-2px)}
.transfer-demo-send:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.transfer-demo-send:disabled{cursor:wait;opacity:.8;transform:none}
.transfer-demo figcaption{min-height:2.5em;padding-top:10px;color:var(--muted);font-size:.82rem;text-align:center;line-height:1.4}
@media(max-width:950px){.hero--outcome .hero-grid{grid-template-columns:1fr;gap:2rem}.transfer-demo{max-width:590px;width:100%;margin:auto}.transfer-demo-stage{min-height:330px}}
@media(max-width:768px){.hero--outcome .hero-grid{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100% - 1.5rem,560px)}.hero--outcome .hero-content{display:contents}.hero--outcome .hero-content>*{order:4;text-align:center}.hero--outcome .hero-content>.section-label{order:1}.hero--outcome .hero-content>h1{order:2;margin-bottom:0}.hero--outcome .transfer-demo{order:3;max-width:none;margin:0}.hero--outcome .transfer-demo-stage{min-height:0}}
@media(max-width:600px){.transfer-demo{box-sizing:border-box;padding:12px;border-radius:17px}.transfer-demo-stage{min-height:0;aspect-ratio:1.48;margin:8px 0 12px}.transfer-demo-phone{width:27%;border-width:2px;border-radius:18px;padding:3px}.transfer-demo-phone img{border-radius:13px}.transfer-demo-laptop{width:75%}.transfer-demo-laptop-screen{border-width:3px;padding:4px;aspect-ratio:1.4}.transfer-demo-windowbar{height:14px;font-size:7px}.transfer-demo-laptop-screen>img{height:calc(100% - 14px)}.transfer-demo-file{width:25px;height:25px;font-size:12px}.transfer-demo-file--three{font-size:7px}.transfer-demo-send{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){.transfer-demo-file{animation:none!important}.transfer-demo-received,.transfer-demo-send{transition:none!important}}