/* Authentic Studio UI preview: bounded 10-second visual story, no generated/fake interfaces. */
.feature-space{grid-column:1/-1;min-width:0;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.81fr) minmax(0,1.3fr);align-items:center;gap:clamp(18px,3vw,42px);padding:clamp(24px,4.5vw,62px);border:1px solid #e6d8f7;border-radius:32px;background:radial-gradient(ellipse at 90% 25%,#dae7ffce 0%,transparent 46%),radial-gradient(ellipse at 21% 78%,#f3dafa 0%,transparent 50%),linear-gradient(135deg,#fffafc,#f8f5ff 72%,#f0edff);box-shadow:0 18px 58px #b998d321;color:#251a30}
.studio-space-copy{min-width:0;z-index:2}.studio-space-kicker{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.16em;color:#9a5fc5}.studio-space-copy h3{font-size:clamp(29px,3.65vw,50px);line-height:1.1;letter-spacing:-.055em;margin:18px 0 18px;font-weight:800}.studio-space-copy h3 em{font-style:normal;background:linear-gradient(100deg,#814dd4,#ec69b0);background-clip:text;color:transparent}.studio-space-copy>p:not(.studio-preview-note){color:#74657e;max-width:440px;font-size:clamp(14px,1.4vw,17px);line-height:1.65}
.studio-step-controls{display:flex;flex-wrap:wrap;gap:7px;margin:28px 0 18px}.studio-step-controls button{font:700 12px/1.3 Manrope,Arial,sans-serif;background:#ffffffb8;color:#786587;border:1px solid #dfd1ee;border-radius:999px;padding:11px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}.studio-step-controls button:hover{border-color:#a885da;transform:translateY(-1px)}.studio-step-controls button[aria-pressed=true]{background:#281c3a;color:#fff;border-color:#281c3a;box-shadow:0 5px 14px #57396625}.studio-step-controls button:focus-visible{outline:3px solid #956cff;outline-offset:3px}
.studio-preview-note{font-size:11px!important;line-height:1.55!important;color:#8d7b9a!important;max-width:395px!important;display:flex;align-items:flex-start;gap:8px}.studio-space-sparkle{font-size:19px;color:#a965df;line-height:1;flex:none}
.studio-reel-stage{position:relative;min-width:0;min-height:310px;aspect-ratio:1.6;border-radius:25px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 55% 38%,#fbe6ff,#e3e1ff 52%,#c9d9fb);box-shadow:inset 0 0 0 1px #ffffffb9,0 24px 50px #8464be24}
.studio-reel-stage::before{position:absolute;inset:0;content:"";background:repeating-radial-gradient(circle at 62% 20%,#ffffff42 0 1px,transparent 1px 22px);pointer-events:none}
.studio-slide{position:absolute;inset:0;display:block;visibility:hidden;opacity:0;transform:translateY(9px) scale(.985);transition:opacity .48s ease,transform .48s ease,visibility .48s;pointer-events:none}.studio-slide.is-active{opacity:1;visibility:visible;transform:translateY(0) scale(1);z-index:1}.studio-browser{position:absolute;left:5%;top:12%;width:79%;height:76%;overflow:hidden;border:1px solid #ffffffb9;border-radius:12px;box-shadow:0 19px 37px #685d9f38;background:#fff}.studio-browser-top{height:22px;display:flex;align-items:center;gap:3px;padding:0 9px;background:#faf8fd;color:#e8aedb;border-bottom:1px solid #e6e0eb}.studio-browser-top span{font-size:8px}.studio-browser-top small{font:600 8px/1.2 Manrope,Arial,sans-serif;margin:auto;color:#b1a6ba;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}.studio-browser img{display:block;width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top left}
.studio-phone{position:absolute;right:4.7%;bottom:5%;width:21%;height:80%;z-index:2;overflow:hidden;padding:7px 4px 4px;border:2px solid #ede0fd;border-radius:17px;background:#f7f2fc;box-shadow:0 20px 32px #59478051,0 0 0 3px #ffffff81}.studio-phone-camera{position:absolute;z-index:2;left:37%;top:3px;width:26%;height:4px;border-radius:30px;background:#d2c4db}.studio-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:10px}
.studio-slide-finale .studio-finale-card{position:absolute;top:18%;width:60%;height:65%;border:4px solid #fff;border-radius:13px;object-fit:cover;object-position:top left;box-shadow:0 18px 34px #57396635}.finale-home{left:4%;transform:rotate(-8deg)}.finale-ideas{left:21%;top:13%!important;transform:rotate(0deg)}.finale-create{left:37%;transform:rotate(8deg)}.studio-finale-mark{position:absolute;z-index:3;right:8%;top:14%;font-size:45px;color:#dd6bbd;text-shadow:0 3px 20px #d59cef}
.studio-reel-progress{position:absolute;left:12%;bottom:4%;right:12%;z-index:4;pointer-events:none;height:3px;background:#fff8;border-radius:4px;overflow:hidden}.studio-reel-progress span{display:block;width:25%;height:100%;background:linear-gradient(90deg,#b866e8,#e96db2);border-radius:4px;transition:transform .25s ease}
@media(max-width:1024px){.feature-space{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);padding:32px;gap:18px}.studio-reel-stage{min-height:275px}.studio-space-copy h3{font-size:clamp(26px,4vw,39px)}.studio-browser{width:80%}}
@media(max-width:780px){.feature-space{grid-template-columns:1fr;padding:28px;gap:20px}.studio-space-copy h3{font-size:clamp(28px,6vw,44px);margin:12px 0}.studio-step-controls{margin:18px 0 12px}.studio-reel-stage{min-height:280px;aspect-ratio:1.6}}
@media(max-width:520px){.feature-space{padding:20px 16px;border-radius:23px;gap:13px}.studio-space-copy h3{font-size:clamp(26px,8vw,38px)}.studio-step-controls button{font-size:11px;padding:10px 12px}.studio-reel-stage{min-height:210px;aspect-ratio:1.46;border-radius:16px}.studio-browser{border-radius:7px}.studio-browser-top{height:15px;padding:0 5px}.studio-browser-top small{font-size:6px}.studio-browser img{height:calc(100% - 15px)}.studio-phone{border-radius:12px;padding:4px 2px 3px}.studio-phone img{border-radius:8px}.studio-finale-mark{font-size:28px}.studio-preview-note{font-size:10px!important}}
@media(prefers-reduced-motion:reduce){.studio-slide{transition:none!important;transform:none!important}.studio-step-controls button{transition:none!important}.studio-reel-progress{display:none}}

/* Keep authentic screen captures inside their stage at every breakpoint. */
.studio-reel-stage{min-width:0;overflow:hidden}
.studio-browser{left:8%;top:16%;width:72%;height:68%}
.studio-phone{right:8%;bottom:9%;width:18%;height:70%}
.studio-slide-finale .studio-finale-card{width:52%;height:58%;top:21%}
.finale-home{left:7%}.finale-ideas{left:24%;top:17%!important}.finale-create{left:41%}
@media(max-width:780px){.studio-reel-stage{min-height:260px}.studio-browser{left:7%;width:73%;top:16%;height:68%}.studio-phone{right:7%;width:19%;height:70%}}
@media(max-width:520px){.studio-reel-stage{min-height:205px}.studio-browser{left:7%;width:72%;top:17%;height:66%}.studio-phone{right:7%;width:20%;height:69%;bottom:9%}.studio-slide-finale .studio-finale-card{width:51%;height:54%;top:23%}.finale-home{left:7%}.finale-ideas{left:24%;top:19%!important}.finale-create{left:41%}}

/* At 320px the stage's minimum height must not force its aspect ratio past the card. */
@media(max-width:520px){.studio-reel-stage{width:100%;height:clamp(205px,60vw,280px);min-height:0;aspect-ratio:auto}}