/* The download page.
 *
 * Deliberately its own stylesheet and its own document rather than another
 * route inside the app shell: someone arriving here from the App Store, or
 * from a link, should not have to download the eclipse engine and a map
 * library to read four paragraphs about an app.
 */
.download-page { min-height: 100%; }

.dl-wrap { padding: 40px 0 70px; }

.dl-hero { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.dl-icon { border-radius: 22px; margin-bottom: 18px; }
.dl-hero h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin: 0 0 14px; letter-spacing: -.02em; }
.dl-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 0 auto 26px; max-width: 52ch; }
.dl-badge { margin: 0 0 10px; }
.dl-badge .appbadge img { width: 156px; height: 52px; }
.dl-meta { color: var(--dim); font-size: .82rem; margin: 0; }

.dl-grid {
  display: grid; gap: 16px; margin: 0 auto 44px; max-width: 900px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.dl-card {
  background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 20px 22px;
}
.dl-card h2 { margin: 0 0 8px; font-size: 1rem; }
.dl-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

.dl-foot-note { text-align: center; color: var(--dim); font-size: .88rem; max-width: 56ch; margin: 0 auto; }
.dl-foot-note p { margin: 0 0 10px; line-height: 1.6; }
.dl-foot-note a { color: var(--corona); }