/* Download page: a store-style card with one big install button for the visitor's
   own phone (get-app.js marks it .store-badge--yours), real app screens, and a
   helper for installing on someone else's phone. A computer (data-os="desktop")
   sees both stores and the QR code instead. Nothing here redirects. */

.dl-hero { text-align: left; max-width: 760px; margin-left: auto; margin-right: auto; }

.dl-card { display: flex; align-items: center; gap: 16px; }
.dl-card img { width: 76px; height: 76px; border-radius: 18px; flex: none; }
.dl-card h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.dl-sub { margin: 2px 0 0; color: var(--text); font-weight: 600; }
.dl-meta { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.dl-os { display: none; }
html[data-os="ios"] .dl-os-ios,
html[data-os="android"] .dl-os-android,
html[data-os="desktop"] .dl-os-desktop,
html:not([data-os]) .dl-os-desktop { display: inline; }

.dl-ctas { margin: 22px 0 8px; }
.dl-ctas .store-badge { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
/* .about-page a:not(.btn) turns body links into teal underlined text, which also
   replaced these buttons' fill. Store buttons keep the button look. */
.about-page .dl-ctas a.store-badge,
.about-page .dl-ctas a.store-badge:hover {
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-image: none;
  background-size: auto;
}
.about-page .dl-ctas a.store-badge--yours,
.about-page .dl-ctas a.store-badge--yours:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(46, 125, 50, .34);
}
.dl-ctas .store-badge svg { width: 20px; height: 20px; flex: none; }
/* On a phone: one full-width button for its own store, the other moves to the helper */
html[data-os="ios"] .dl-ctas .store-badge--yours,
html[data-os="android"] .dl-ctas .store-badge--yours { flex: 1 1 100%; font-size: 1.12rem; padding: 16px 18px; }
html[data-os="ios"] .dl-ctas .store-badge--other,
html[data-os="android"] .dl-ctas .store-badge--other { display: none; }

.dl-free { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
html[data-os="ios"] .dl-free,
html[data-os="android"] .dl-free { text-align: center; }

.dl-shots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 22px 0 6px;
}
.dl-shots img {
  width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface-strong);
}
.dl-shots-note { margin: 0; color: var(--muted); font-size: .85rem; text-align: center; }

.dl-helper {
  margin-top: 22px; padding: 18px; border-radius: 18px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
}
.dl-helper h2 { margin: 0 0 4px; font-size: 1.1rem; font-family: var(--font-display); }
.dl-helper p { margin: 0; color: var(--muted); }
.dl-share {
  margin-top: 12px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
}
.dl-share:hover { background: rgba(77, 208, 225, 0.08); }
.dl-share svg { width: 18px; height: 18px; }
.dl-share-status { min-height: 1.3em; margin-top: 8px !important; font-size: .9rem; color: var(--accent) !important; text-align: center; }
.dl-share-status code { user-select: all; color: var(--text); }

.dl-other { margin-top: 4px !important; font-size: .92rem; text-align: center; }
.dl-other span { display: none; }
html[data-os="ios"] .dl-other .dl-for-android,
html[data-os="android"] .dl-other .dl-for-ios { display: inline; }

.dl-qr { display: none; margin-top: 16px; text-align: center; }
html[data-os="desktop"] .dl-qr,
html:not([data-os]) .dl-qr { display: block; }
.dl-qr img {
  width: 200px; height: 200px; border-radius: 16px; background: #fff; padding: 10px;
  border: 1px solid var(--line);
}
.dl-qr p { margin-top: 8px; }

@media (max-width: 600px) {
  .dl-hero { padding: 26px 16px 22px; }
  .dl-card img { width: 64px; height: 64px; border-radius: 15px; }
}
@media (min-width: 880px) {
  .dl-hero { padding: 40px 44px; }
  .dl-shots { gap: 16px; }
}