/* /get download page (lib/get-page.js). Loaded after landing.css; reuses its tokens and header/footer. Mobile first. */

.get-hero {
  position: relative;
  overflow: hidden;
}

.get-inner {
  position: relative;
  padding: 36px 20px 44px;
  max-width: 1040px;
  margin: 0 auto;
}

.get-copy {
  position: relative;
}

.get-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  color: var(--ink);
}

.get-title em {
  font-style: normal;
  background: linear-gradient(100deg, #e4362a, #b3261e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.get-pitch {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  max-width: 460px;
  margin: 0 0 28px;
}

/* Both badges are drawn at the same visible height. The App Store file is 120x40 and the Google Play file is 239x71 with the
   artwork filling its whole box (no clear space inside the file), so the same CSS height gives the same visible height.
   Spacing: at least 1/4 of the badge height around each badge (16px at 60px), as the Google brand rules ask. */
.get-badges {
  --bh: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.get-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.get-badge img {
  display: block;
  height: var(--bh);
  width: auto;
}

.get-badge.is-secondary img {
  height: 44px;
}

.get-badge:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

.get-note {
  font-size: 13px;
  color: var(--sub);
  margin: 18px 0 0;
}

.get-qr {
  margin-top: 28px;
  max-width: 190px;
}

.get-qr img {
  display: block;
  width: 148px;
  height: 148px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.get-qr p {
  font-size: 13px;
  line-height: 1.4;
  color: var(--sub);
  margin: 10px 0 0;
}

.get-features {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  position: relative;
}

.get-features li {
  border-left: 3px solid var(--red);
  padding: 2px 0 2px 14px;
}

.get-features strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.get-features span {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

/* iPhone / Android: one large primary badge, the other smaller underneath. Wide (desktop and anything unrecognised):
   both at the same size, side by side, with the QR code. */
@media (min-width: 700px) {
  .get-inner {
    padding: 64px 40px 72px;
  }

  .get-title {
    font-size: 84px;
  }

  .get-badges {
    --bh: 60px;
  }

  .get-wide .get-badges {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
  }

  .get-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 32px;
    margin-top: 48px;
  }
}

@media (max-width: 699px) {
  /* A phone can't scan its own screen; wide layout is only reached by desktops and unknown devices, keep it tidy there too. */
  .get-wide .get-badges {
    --bh: 52px;
  }
}

/* Homepage badges (dist/index.html): straight to the stores, same official files, same visible height for both, 1/4-height spacing. */
.home-badges {
  --bh: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.home-badges-footer {
  --bh: 40px;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
}