.app-showcase{padding:95px 0;position:relative;isolation:isolate}
.showcase-heading{text-align:center;width:100%;margin:0 auto 48px}
.showcase-heading h2{font-size:clamp(40px,4.8vw,64px)}
.showcase-heading h2 em{display:inline-block}
.showcase-heading>p{max-width:680px;margin:18px auto 0;color:var(--muted);font-size:17px}
.showcase-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,328px) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,44px)}
.screen-picker{display:grid;gap:16px;min-width:0}
.screen-picker[hidden],.showcase-toggle[hidden]{display:none}
.screen-picker button{display:grid;grid-template-columns:60px minmax(0,1fr) 6px;align-items:center;gap:12px;width:100%;min-height:106px;padding:14px 12px;border:1px solid transparent;border-radius:18px;color:var(--text);background:transparent;text-align:left;transition:background .2s,color .2s}
.screen-picker button:hover{background:#ffffff12}
.screen-picker button[aria-pressed=true]{background:var(--paper);color:var(--navy);box-shadow:0 6px 0 var(--navy)}
.screen-icon{display:block;width:60px;height:60px;object-fit:contain}
.screen-picker strong{display:block;font-size:20px;line-height:1.2;font-weight:800}
.screen-picker small{display:block;font-size:14px;line-height:1.4;margin-top:6px;color:var(--muted)}
.screen-picker [aria-pressed=true] small{color:#315584}
.screen-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);opacity:0}
.screen-picker [aria-pressed=true] .screen-dot{opacity:1}
.phone-stage{grid-column:2;margin:0;text-align:center;min-width:0;position:relative}
.phone-stage:before{content:'';position:absolute;inset:24% 24% 28%;border:1px solid #ffffff30;border-radius:50%;transform:rotate(10deg);z-index:-1}
.iphone-shell{position:relative;width:100%;margin:auto;background:#071638;border:2px solid #83a1d7;border-radius:43px;padding:7px;box-shadow:14px 19px 0 #07163899,0 30px 60px #07163855}
.phone-display{position:relative;aspect-ratio:1179/2556;overflow:hidden;border-radius:34px;background:var(--bg);isolation:isolate}
.app-screen{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;pointer-events:none}
.app-screen.is-current{opacity:1;visibility:visible}
.phone-key{position:absolute;width:3px;border-radius:2px;background:#a9bfe1}
.key-left{left:-4px;top:22%;height:11%}.key-right{right:-4px;top:28%;height:12%}
.phone-stage figcaption{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px;font-size:11px;color:var(--muted)}
.screen-count{color:var(--lime);font-weight:700;letter-spacing:.12em}
.showcase-toggle{color:var(--muted);background:none;border:0;font-size:12px;padding:12px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.showcase-toggle:hover{color:var(--lime)}
.showcase-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1050px){.showcase-layout{grid-template-columns:minmax(0,1fr) 270px minmax(0,1fr);gap:20px}.screen-picker button{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:12px 8px}.screen-icon{width:48px;height:48px}.screen-picker strong{font-size:18px}.screen-picker small{font-size:13px}.screen-dot{display:none}}
@media(max-width:800px){.app-showcase{padding-block:60px}.showcase-heading{margin-bottom:36px}.showcase-heading>p{font-size:16px}.showcase-layout{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'phone phone' 'left right';gap:32px 14px}.phone-stage{grid-area:phone;width:min(85%,310px);justify-self:center}.screen-picker-left{grid-area:left}.screen-picker-right{grid-area:right}.screen-picker{gap:12px}.screen-picker button{border-color:var(--line);min-height:108px}.screen-picker small{display:none}}
@media(max-width:450px){.screen-picker button{grid-template-columns:44px minmax(0,1fr);gap:8px;padding:12px 8px;min-height:100px;border-radius:14px}.screen-icon{width:44px;height:44px}.screen-picker strong{font-size:15px}}
@media(max-width:360px){.screen-picker button{display:flex;flex-direction:column;justify-content:center;text-align:center;min-height:110px}.screen-picker strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.app-screen,.screen-picker button{transition:none}}