/* mrbite.app/downloads on a computer or tablet. Loaded after site.css, so the
   header, footer, fonts, colours, kicker and buttons are the start page's own.
   Phones never see this page: they are sent straight to their store. */

.dlx-hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 112px 0 64px; color: var(--cream);
  background: radial-gradient(55% 55% at 76% 45%, rgba(252,108,0,0.30), transparent 70%), radial-gradient(45% 60% at 8% 92%, rgba(94,186,137,0.14), transparent 70%), var(--night); }
.dlx-hero .hero-word { bottom: -7vw; }
.dlx-grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 48px; align-items: center; }

/* Left: heading, lead, three points, the official badges */
.dlx-h1 { margin-top: 18px; font-size: clamp(56px, 7vw, 112px); line-height: 0.92; letter-spacing: -0.055em; font-weight: 800; text-transform: uppercase; }
.dlx-h1 span { display: block; }
.dlx-lead { margin-top: 22px; max-width: 520px; font-size: 19px; line-height: 1.55; color: var(--on-dark); }
.dlx-points { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
.dlx-points li { display: flex; align-items: center; gap: 14px; font-size: 16.5px; font-weight: 800; color: var(--cream); }
.dlx-i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dlx-i svg { width: 19px; height: 19px; }
.dlx-i--o { background: rgba(252,108,0,0.16); color: var(--orange); }
.dlx-i--g { background: rgba(250,244,233,0.1); color: var(--cream); }
.dlx-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.dlx-stores .badge img { height: 58px; width: auto; }
.dlx-stores a.badge { cursor: pointer; transition: transform 0.3s var(--spring); }
.dlx-stores a.badge:hover { transform: translateY(-3px); }
.dlx-small { margin-top: 14px; font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(250,244,233,0.5); }

/* Right: the mascot with the QR code card in front of it */
.dlx-art { position: relative; height: 560px; }
.dlx-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(252,108,0,0.42), transparent 62%); filter: blur(20px); animation: breathe 6s ease-in-out infinite; }
.dlx-ring { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; border-radius: 50%; border: 1.5px dashed rgba(250,244,233,0.14); animation: spin 60s linear infinite; }
/* The mascot holds the QR card: its hands overlap the card's left edge. */
.dlx-duo { --m: 190px; --q: 292px; position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(var(--m) * 0.9 + var(--q)); height: calc(var(--m) * 2.24); transform: translate(-50%, -50%) rotate(-2deg); animation: dlx-float 6s ease-in-out infinite; }
.dlx-mascot { position: absolute; z-index: 3; left: 0; top: 0; width: var(--m); height: auto; filter: drop-shadow(0 30px 30px rgba(0,0,0,0.5)); }
.dlx-qr { position: absolute; z-index: 2; left: calc(var(--m) * 0.9); top: 50%; width: var(--q); padding: 18px 22px 20px; border-radius: 26px; background: var(--cream); color: var(--night); text-align: center; transform: translateY(-50%);
  box-shadow: 0 40px 70px -28px rgba(0,0,0,0.75), 0 0 0 6px rgba(252,108,0,0.9); }
.dlx-qr img { display: block; width: calc(var(--q) - 56px); height: calc(var(--q) - 56px); margin: 12px auto 0; border-radius: 14px; background: #fff; padding: 8px; }
.dlx-qr-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hot); }
.dlx-qr-k svg { width: 18px; height: 18px; }
.dlx-qr-u { display: block; margin-top: 10px; font-size: 14px; font-weight: 800; color: var(--green); }
@keyframes dlx-float { 50% { translate: 0 -10px; } }

/* Smaller laptops and tablets */
@media (max-width: 1100px) {
  .dlx-grid { gap: 28px; }
  .dlx-art { height: 500px; }
  .dlx-duo { --m: 160px; --q: 256px; }
  .dlx-glow, .dlx-ring { width: 420px; height: 420px; } .dlx-ring { margin: -210px 0 0 -210px; }
}
@media (max-width: 860px) {
  .dlx-hero { padding-top: 104px; }
  .dlx-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .dlx-txt { display: flex; flex-direction: column; align-items: center; }
  .dlx-lead { margin-left: auto; margin-right: auto; }
  .dlx-points { justify-items: start; text-align: left; }
  .dlx-stores { justify-content: center; }
  .dlx-art { height: 420px; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) {
  .dlx-h1 { font-size: 52px; }
  .dlx-art { height: 380px; }
  .dlx-duo { --m: 130px; --q: 214px; }
  .dlx-stores .badge img { height: 48px; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .dlx-hero { padding: 100px 0 40px; }
  .dlx-h1 { font-size: clamp(52px, 6vw, 88px); }
  .dlx-lead { margin-top: 16px; font-size: 17.5px; }
  .dlx-points { margin-top: 18px; gap: 9px; }
  .dlx-stores { margin-top: 22px; }
  .dlx-art { height: 470px; }
}
@media (prefers-reduced-motion: reduce) { .dlx-glow, .dlx-ring, .dlx-duo { animation: none; } }