.app-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);gap:60px;align-items:center;padding-top:76px;padding-bottom:72px;min-height:720px}
.app-hero h1{font-size:clamp(52px,6.4vw,84px);line-height:1.08;letter-spacing:-.035em;font-weight:600;margin:24px 0}
.app-hero-copy>p{font-size:21px;line-height:1.55;color:var(--fg-2);max-width:440px;margin:0 0 30px}
.app-hero-copy>.btn{min-height:50px}.app-beta-note{display:block;color:var(--fg-2);font-size:12px;margin:12px 0 36px}
.app-hero-copy>.app-web-note{font-size:14px;max-width:400px}.app-web-note a{display:inline-block;color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.app-hero-screen{display:flex;justify-content:center;align-items:center}.app-hero-screen .shot{width:min(100%,280px);transform:rotate(3deg)}
.app-promise{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:32px;padding-bottom:32px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.app-promise>span{font-size:26px;font-weight:650;letter-spacing:-.035em;max-width:350px}.app-promise p{margin:0;color:var(--fg-2);font-size:16px;line-height:1.65;max-width:480px}
.app-feature .h2{margin-top:18px}.app-feature .stage .shot{width:min(100%,282px)}.app-feature-note{font-size:15px;line-height:1.7;color:var(--fg-2);margin-top:20px;max-width:410px}.app-feature .text-link{display:inline-block;margin-top:14px}
.app-close{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding-top:72px;padding-bottom:90px;border-top:1px solid var(--border)}.app-close h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.045em;margin:0 0 10px}.app-close>.text-link{font-size:14px}
@media(max-width:700px){.app-hero{grid-template-columns:1fr;gap:26px;padding-top:44px;padding-bottom:40px;min-height:0}.app-hero h1{font-size:58px}.app-hero-copy>p{font-size:18px}.app-hero-copy>.app-web-note{margin-bottom:0}.app-hero-screen .shot{width:220px;transform:none}.app-promise{grid-template-columns:1fr;gap:16px;padding-top:26px;padding-bottom:26px}.app-promise>span{font-size:24px}.app-feature .stage .shot{width:240px}.app-close{padding-top:50px;padding-bottom:60px}}

.app-scan-demo{min-width:0;width:100%;align-self:center}

/* A cropped screen instead of a whole handset, where the subject is one element.
   The widget rendered inside a 260px phone is smaller than the type around it,
   which defeats the section it illustrates. */
.stage-wide .shot-wide { width: min(520px, 100%); border-radius: 20px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,.34); }
.stage-wide .shot-wide img, .stage-wide .shot-wide picture { display: block; width: 100%; height: auto; }