.real-feature-capture{overflow:visible;margin:0;padding:0;background:#071114}
.real-feature-capture::after{content:"";position:absolute;z-index:-1;inset:12% -3% -7% 10%;border-radius:28px;background:radial-gradient(circle,rgba(34,189,199,.18),transparent 68%);filter:blur(28px)}
.capture-toolbar{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #20373d;border-radius:21px 21px 0 0;background:#0b181c;color:#88a3aa}
.capture-toolbar>span{display:flex;gap:5px}.capture-toolbar i{display:block;width:6px;height:6px;border-radius:50%;background:#2c4850}.capture-toolbar i:first-child{background:#25d19a}.capture-toolbar strong{color:#74cfd7;font-size:7px;letter-spacing:.14em}
.capture-viewport{position:relative;overflow:hidden;aspect-ratio:1.99/1;background:#f4f6fb}.capture-viewport img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:auto}
.real-feature-capture figcaption{position:absolute;right:22px;bottom:-27px;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #28515a;border-radius:11px;background:rgba(8,22,25,.95);box-shadow:0 18px 40px rgba(0,0,0,.32);backdrop-filter:blur(12px)}.real-feature-capture figcaption>i{width:8px;height:8px;border-radius:50%;background:#2bdd9a;box-shadow:0 0 0 5px rgba(43,221,154,.1)}.real-feature-capture figcaption small,.real-feature-capture figcaption strong{display:block}.real-feature-capture figcaption small{color:#63828a;font-size:5px;letter-spacing:.14em}.real-feature-capture figcaption strong{color:#f3f9fa;font-size:8px}
html[data-theme="light"] .real-feature-capture{border-color:#bcd5da;background:#fff;box-shadow:0 30px 75px rgba(42,87,96,.16)}html[data-theme="light"] .capture-toolbar{border-color:#d0e0e3;background:#f7fbfc;color:#5d747c}html[data-theme="light"] .capture-toolbar strong{color:#178b98}html[data-theme="light"] .real-feature-capture figcaption{border-color:#afd0d5;background:rgba(255,255,255,.96);box-shadow:0 16px 36px rgba(42,87,96,.18)}html[data-theme="light"] .real-feature-capture figcaption strong{color:#203a40}
@media(max-width:640px){.capture-toolbar{height:36px;padding-inline:12px}.capture-toolbar strong{font-size:6px}.real-feature-capture figcaption{position:relative;right:auto;bottom:auto;margin:0;border-width:1px 0 0;border-radius:0 0 18px 18px;box-shadow:none}.capture-viewport{aspect-ratio:1.55/1}.capture-viewport img{width:auto;min-width:100%;object-position:28% top}}
.phone-feature-capture{display:grid;place-items:center;min-height:720px;margin:0;border:0;background:transparent;box-shadow:none}.phone-feature-capture::before{display:none}.phone-aura{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(20,175,190,.2),rgba(18,103,118,.08) 42%,transparent 70%);filter:blur(18px)}
.product-phone{position:relative;z-index:2;width:min(350px,82%);padding:15px 12px 21px;border:1px solid #31515a;border-radius:45px;background:linear-gradient(145deg,#17282d,#050b0d 62%);box-shadow:-24px 35px 75px rgba(0,0,0,.5),inset 0 0 0 3px #0c1518,inset 0 0 0 5px #263c42;transform:perspective(1100px) rotateY(-5deg) rotateX(1deg);transition:.4s ease}.phone-feature-capture:hover .product-phone{transform:perspective(1100px) rotateY(-2deg) translateY(-5px)}
.phone-hardware{position:relative;height:24px}.phone-hardware span{position:absolute;left:50%;top:5px;width:68px;height:7px;border-radius:8px;background:#020506;transform:translateX(-50%)}.phone-hardware i{position:absolute;left:calc(50% + 47px);top:4px;width:9px;height:9px;border:2px solid #101c20;border-radius:50%;background:#071216;box-shadow:inset 0 0 3px #1b8794}
.phone-screen{overflow:hidden;aspect-ratio:362/867;border:1px solid #20383e;border-radius:27px;background:#f5edf1}.phone-screen img{display:block;width:127%;height:auto;max-width:none;transform:translate(-10.7%,-3.15%);image-rendering:auto}.phone-home-indicator{width:86px;height:4px;margin:11px auto -8px;border-radius:5px;background:#5e7075}
.phone-note{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #28515a;border-radius:12px;background:rgba(8,22,25,.94);box-shadow:0 18px 42px rgba(0,0,0,.34);backdrop-filter:blur(12px)}.phone-note>i,.phone-feature-capture figcaption>i{width:8px;height:8px;border-radius:50%;background:#2bdd9a;box-shadow:0 0 0 5px rgba(43,221,154,.1)}.phone-note small,.phone-note strong,.phone-feature-capture figcaption small,.phone-feature-capture figcaption strong{display:block}.phone-note small,.phone-feature-capture figcaption small{color:#6d939b;font-size:6px;letter-spacing:.13em}.phone-note strong,.phone-feature-capture figcaption strong{color:#f4fafb;font-size:9px}.phone-note-top{left:0;top:105px}.phone-feature-capture figcaption{position:absolute;z-index:3;right:0;bottom:102px;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid #28515a;border-radius:12px;background:rgba(8,22,25,.94);box-shadow:0 18px 42px rgba(0,0,0,.34);backdrop-filter:blur(12px)}
html[data-theme="light"] .phone-feature-capture{background:transparent;box-shadow:none}html[data-theme="light"] .phone-aura{background:radial-gradient(circle,rgba(28,174,186,.17),rgba(110,204,212,.08) 44%,transparent 70%)}html[data-theme="light"] .product-phone{border-color:#87adb5;background:linear-gradient(145deg,#344b51,#0d171a 64%);box-shadow:-20px 35px 70px rgba(47,91,100,.26),inset 0 0 0 3px #101b1e,inset 0 0 0 5px #456067}html[data-theme="light"] .phone-note,html[data-theme="light"] .phone-feature-capture figcaption{border-color:#acd0d6;background:rgba(255,255,255,.96);box-shadow:0 17px 38px rgba(45,88,97,.17)}html[data-theme="light"] .phone-note strong,html[data-theme="light"] .phone-feature-capture figcaption strong{color:#203a40}
@media(max-width:980px){.phone-feature-capture{width:100%;min-height:710px}.phone-note-top{left:5%}.phone-feature-capture figcaption{right:5%}}
@media(max-width:640px){.phone-feature-capture{min-height:690px}.product-phone{width:min(326px,94%);transform:none}.phone-feature-capture:hover .product-phone{transform:none}.phone-aura{width:380px;height:480px}.phone-note-top{position:relative;left:auto;top:auto;width:min(326px,94%);margin-bottom:-12px}.phone-feature-capture figcaption{position:relative;right:auto;bottom:auto;width:min(326px,94%);margin-top:-14px}.phone-note strong,.phone-feature-capture figcaption strong{font-size:8px}}
.setlist-story{min-height:640px;padding-block:52px}.phone-feature-capture{min-height:610px}.phone-aura{width:450px;height:450px}.product-phone{width:min(305px,78%);padding:13px 11px 18px;border-radius:40px;box-shadow:-22px 32px 68px rgba(0,0,0,.48),inset 0 0 0 3px #0c1518,inset 0 0 0 5px #263c42;transform:perspective(1100px) rotateY(-4deg) rotateX(1deg)}.phone-feature-capture:hover .product-phone{transform:perspective(1100px) rotateY(-1.5deg) translateY(-4px)}.phone-screen{aspect-ratio:364/700;border-radius:24px}.phone-screen img{width:113%;transform:translate(-5.75%,-.7%)}.phone-home-indicator{width:78px;margin:10px auto -7px}.phone-note-top{top:82px}.phone-feature-capture figcaption{bottom:76px}
@media(max-width:980px){.setlist-story{min-height:auto}.phone-feature-capture{min-height:610px}.phone-note-top{left:8%}.phone-feature-capture figcaption{right:8%}}
@media(max-width:640px){.phone-feature-capture{min-height:610px}.product-phone{width:min(292px,90%);transform:none}.phone-feature-capture:hover .product-phone{transform:none}.phone-aura{width:340px;height:410px}.phone-note-top{position:relative;left:auto;top:auto;width:min(292px,90%);margin-bottom:-10px}.phone-feature-capture figcaption{position:relative;right:auto;bottom:auto;width:min(292px,90%);margin-top:-12px}}
.phone-screen{position:relative;background:#000}.phone-screen img{width:115%;transform:translate(-6.55%,-1%)}
.phone-generic-avatar{position:absolute;z-index:4;top:11px;right:10px;width:31px;height:31px;border:2px solid #1aa7b5;border-radius:50%;background:linear-gradient(145deg,#153239,#071114);box-shadow:0 0 0 3px rgba(34,189,199,.09)}.phone-generic-avatar::before{content:"";position:absolute;left:50%;top:6px;width:8px;height:8px;border-radius:50%;background:#b8c8cc;transform:translateX(-50%)}.phone-generic-avatar::after{content:"";position:absolute;left:50%;bottom:5px;width:16px;height:9px;border-radius:10px 10px 5px 5px;background:#b8c8cc;transform:translateX(-50%)}.phone-generic-avatar i{position:absolute;inset:3px;border:1px solid rgba(82,213,223,.22);border-radius:50%}
.phone-note small,.phone-feature-capture figcaption small{font-size:8px;letter-spacing:.12em}.phone-note strong,.phone-feature-capture figcaption strong{font-size:11px;line-height:1.35}.phone-note{padding:13px 16px}.phone-note-top{left:-38px;top:75px}.phone-feature-capture figcaption{left:calc(50% + 158px);right:auto;bottom:56px;min-width:235px;padding:13px 16px}
@media(max-width:1180px){.phone-feature-capture figcaption{left:auto;right:-8px;bottom:12px}}
@media(max-width:980px){.phone-note-top{left:5%}.phone-feature-capture figcaption{left:auto;right:5%;bottom:20px}}
@media(max-width:640px){.phone-generic-avatar{top:10px;right:9px;width:29px;height:29px}.phone-note-top{position:relative;left:auto;top:auto}.phone-feature-capture figcaption{position:relative;left:auto;right:auto;bottom:auto;min-width:0}.phone-note small,.phone-feature-capture figcaption small{font-size:7px}.phone-note strong,.phone-feature-capture figcaption strong{font-size:9px}}
