/* Real screenshots retain their full portrait composition at every breakpoint. */
.hero{background:radial-gradient(ellipse at 85% 40%,#133c50 0%,#08131f 66%);min-height:0}
.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:64px;min-height:0;padding:64px 0}
.hero h1{font-size:clamp(40px,4.7vw,64px);line-height:1.18;letter-spacing:-.035em}
.real-screen{margin:0 auto;width:100%;max-width:260px;min-width:0;text-align:center}
.real-screen a{display:block;border-radius:22px;overflow:hidden;box-shadow:0 18px 50px #0003;background:#eaf3fc}
.real-screen a:focus-visible{outline:3px solid #36c9e8;outline-offset:6px}
.real-screen img{display:block;width:100%;height:auto;object-fit:contain;aspect-ratio:936/2026}
.real-screen figcaption{font-size:12px;line-height:1.6;color:#b1c3d0;margin-top:16px}
.hero-screen{max-width:288px}
.hero-screen figcaption{color:#bbcedc}
.real-workflow{display:grid;grid-template-columns:minmax(0,260px) minmax(240px,1fr) minmax(0,260px);gap:40px;align-items:center;margin-top:64px}
.real-workflow-copy h2{font-size:32px;line-height:1.35}
.real-workflow-copy p{font-size:16px;line-height:1.9;color:#b1c3d0}
.real-workflow-copy small{display:block;color:#9eb0bd;line-height:1.7}
.real-scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.real-scene-grid .feature-card{min-height:0;padding:32px}
.real-scene-grid .feature-card h3{margin:0 0 18px}
@media(max-width:1000px){.real-workflow{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.real-workflow-copy{grid-column:1/-1;grid-row:1}.hero-grid{gap:32px}}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr;padding:48px 0;gap:40px}.hero h1{font-size:clamp(36px,7vw,48px)}.hero-screen{max-width:280px}.real-workflow{grid-template-columns:1fr}.real-workflow-copy{grid-column:auto}.real-screen{max-width:280px}.real-scene-grid{grid-template-columns:1fr}}