/* ============================================================
   The download page, on the main-direction system (styles.css + nav-a.css).
   One orange field the height of the screen: the ask and the store badges on the left, the real
   browse screen in a phone on the right, the legal line at the foot.
   ============================================================ */

.dl {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(clamp(24px, 4vw, 48px) + 76px) 0 0;
}
.dl > .wrap { width: 100%; }
.dl .dl-split {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding-block: var(--s-xl);
}
.dl .hero-sub { margin-top: var(--s-xl); max-width: 34ch; }

/* The footer's badges, a size up: they are this page's only action. */
.dl-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 40px); }
.dl-stores .ft-badge { height: 60px; padding: 0 24px 0 18px; gap: 11px; border-radius: var(--r-block); text-decoration: none; }
.dl-stores .ft-badge .sb-apple { width: 26px; height: 26px; }
.dl-stores .ft-badge .sb-play { width: 23px; height: 23px; }
.dl-stores .ft-badge small { font-size: 12px; }
.dl-stores .ft-badge b { font-size: 20px; }

/* The phone: a roast body around the real screenshot, sized from the screen's height. */
.dl-phone {
  height: min(68svh, 660px); aspect-ratio: 786 / 1704;
  padding: 9px; border-radius: 44px;
  background: var(--roast);
  box-shadow: 0 30px 60px -24px rgba(46,21,2,.55);
  margin-right: clamp(0px, 4vw, 64px);
}
.dl-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 35px; }

.dl .dl-foot { align-items: stretch; padding-bottom: max(clamp(28px, 4vw, 40px), env(safe-area-inset-bottom, 0px)); }
.dl-foot .footer-legal a { color: var(--roast); text-decoration: none; }

@media (max-width: 820px) {
  .dl { padding-top: 100px; }
  .dl .dl-split { grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; gap: var(--s-xxxl); }
  .dl-stores { flex-wrap: nowrap; gap: 10px; width: 100%; max-width: 400px; }
  .dl-stores .ft-badge { flex: 1 1 0; justify-content: center; height: 56px; padding: 0 10px; gap: 9px; }
  .dl-stores .ft-badge b { font-size: 17px; }
  .dl-phone { justify-self: center; height: auto; width: min(74vw, 300px); margin: 0 0 var(--s-xxl); }
}