/* Reviewed app screenshots: complete styles, with the original tilt on the hero pair only. */
.phone{height:auto;aspect-ratio:286 / 603}
.phone .screen{width:100%;height:auto;aspect-ratio:390 / 850}
.screen .sn-app-screen,.screen .sn-real-screen{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:390 / 850;object-fit:contain;object-position:top}
.screen .sn-preview-frame{position:absolute;inset:0;width:390px;height:850px;border:0;display:block;transform-origin:top left;pointer-events:none}
.hero-visual{display:flex;align-items:flex-start;justify-content:center;gap:20px;width:100%;max-width:none;height:auto;min-height:620px;margin:0;padding:38px 0 48px;scale:1;transform:none}
.hero-visual .phone{position:relative;inset:auto;transform:none;transform-origin:center;min-width:0;margin:0;width:0;flex:1.1;max-width:286px}
.hero-visual .hero-phone-back{flex:.9;max-width:242px;margin-top:82px}
.hero-visual > .hero-phone{transform:rotate(-7deg)}
.hero-visual > .hero-phone-back{transform:rotate(8deg)}
.hero-label{inset:auto 0 5px;text-align:center}
.showcase-art{min-height:650px;padding:24px 0}
.showcase-art .phone{height:auto;transform:none}
.showcase-art:before{inset:12px -16px;border-radius:190px 190px 30px 30px}
.sn-screen-link{gap:16px}
.feature-guide-preview .phone,.sn-rhythm-flame .phone{height:auto}
.feature-guide-preview .screen,.sn-rhythm-flame .screen{width:100%;height:auto}
@media(max-width:1100px){.hero-visual{min-height:540px;gap:16px;padding-top:40px}.hero-visual .hero-phone-back{margin-top:64px}}
@media(max-width:800px){.hero-visual{width:min(530px,100%);min-height:0;margin:8px auto 0;padding:20px 0 40px}.hero-visual .phone{max-width:260px}.hero-visual > .hero-phone{transform:rotate(-6deg)}.hero-visual .hero-phone-back{max-width:220px;margin-top:54px}.showcase-art{min-height:650px}.showcase-art:before{inset:12px 0}}
@media(max-width:600px){.hero-visual{max-width:390px;gap:12px;padding:16px 0 42px}.hero-visual .phone{padding:6px;border-radius:26px}.hero-visual .screen{border-radius:20px}.hero-visual .hero-phone-back{margin-top:42px}.hero-label{font-size:8px;letter-spacing:.08em}.showcase-art{min-height:0;padding:24px 0 30px}.showcase-art .phone{width:min(286px,76vw)}.sn-screen-link{gap:18px}.sn-enlarge{font-size:12px}}
