/* download.kongi.co (web.download_page): the homepage hero's words and type, the code to scan with both badges, and the
   app earning credit in the homepage's tile. On a phone the API sends people to the store, so this is mostly a computer's. */
.dlp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 6vw, 88px); align-items: center;
  width: 100%; max-width: 1100px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.dlp-icon { display: block; width: 72px; height: 72px; margin-bottom: 28px; border-radius: 16px; }
.dlp h1 { font-size: clamp(44px, 6.5vw, 80px); line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.dlp-sub { margin-top: 20px; color: var(--muted); font-size: clamp(17px, 1.9vw, 23px); line-height: 1.4; }
.dlp-sub span { display: block; white-space: nowrap; }
.dlp-get { display: flex; align-items: center; gap: 24px; margin-top: 40px; padding: 20px; border-radius: 28px; background: var(--tile);
  width: fit-content; }
.dlp-qr { display: block; width: 132px; height: 132px; padding: 12px; border-radius: 18px; background: var(--paper); box-sizing: content-box; }
.dlp-get b { display: block; margin-bottom: 14px; font-size: 16px; font-weight: 500; }
.dlp-media { aspect-ratio: 2 / 3; border-radius: 32px; overflow: hidden; background: var(--tile); }
.dlp-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 860px) {
  .dlp { grid-template-columns: minmax(0, 1fr); gap: 36px; text-align: center; padding-top: 16px; }
  .dlp-icon { margin: 0 auto 24px; }
  .dlp-get { margin: 28px auto 0; padding: 0; background: none; }
  .dlp-get .badges { justify-content: center; }
  .dlp-qr, .dlp-get b { display: none; }  /* on a phone the code is for nobody: the badges alone */
  .dlp-media { width: min(100%, 420px); margin: 0 auto; border-radius: 24px; }
}