body.landing { max-width: 1000px; }
.landing header nav { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.landing a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.hero { display: grid; gap: 2rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; max-width: 15ch; }
.hero p { max-width: 40ch; }
.store-link { display: inline-block; padding: .6rem 0; font-weight: 650; }
.screenshot { display: block; width: min(100%, 280px); margin: 0 auto; }
.screenshot img { display: block; width: 100%; height: auto; border: 1px solid #d7ebe4; border-radius: 16px; }
.landing main > section { margin-top: 2.5rem; }
.landing footer { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
@media (min-width: 720px) {
  .hero { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
}