/* Download-only presentation; shared navigation and consent behavior stay intact. */
.qr-landing {
  background: #fff;
  background-image: linear-gradient(#ffffffa6, #ffffffa6), url("/assets/download-route-background.jpg");
  background-position: center top;
  background-size: 1280px auto;
  background-repeat: repeat;
}
.qr-landing .site-header,
.qr-landing .qr-main { max-width: 1180px; }
.download-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 6vw, 80px) 24px 64px;
}
.download-hero .qr-intro { padding: 0; }
.download-hero .eyebrow { color: #665600; }
.download-hero h1 {
  font-size: clamp(3.8rem, 6.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.055em;
  margin: 24px 0;
  font-weight: 900;
}
.download-hero h1 span {
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}
.download-hero h1 span::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 55% -8px 2px;
  background: #ffd60a;
  border-radius: 8px;
  transform: rotate(-2deg);
}
.download-tagline { font-size: 1.3rem; font-weight: 800; margin: 28px 0 12px; }
.download-hero .qr-description { max-width: 490px; font-size: 1.1rem; margin: 0 0 28px; }
.download-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.download-store { flex: 1 1 230px; max-width: 300px; }
.download-store .button { width: 100%; box-sizing: border-box; text-align: center; font-size: 1rem; padding: 17px 20px; }
.download-store .availability { font-size: .9rem; margin: 12px 0 0; text-align: center; color: var(--muted); }
.download-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; text-decoration: none; font-size: .8rem; font-weight: 700; }
.download-qr img { display: block; width: 112px; height: 112px; background: white; border: 1px solid #e4e3da; border-radius: 12px; padding: 4px; }
.download-hero .qr-android { margin-top: 28px; padding: 16px 20px; background: #eeecdb; }
.download-hero .qr-android h2 { font-size: 1rem; }
.download-hero .qr-android p { font-size: .95rem; }
.download-hero .qr-android a { font-weight: 700; text-underline-offset: 3px; }
.download-preview { position: relative; isolation: isolate; display: grid; justify-items: center; padding: 24px 0 0; }
.download-halo { position: absolute; z-index: -1; width: min(100%, 440px); aspect-ratio: 1; top: 50%; transform: translateY(-56%); border-radius: 50%; background: #ffd60a; }
.download-phone { position: relative; width: min(72%, 302px); padding: 8px; background: #1c1c1b; border: 2px solid #555552; border-radius: 44px; box-shadow: 0 30px 50px #25251c30, inset 0 0 0 2px #070707; }
/* iPhone 17 Pro display: 1206 × 2622; do not inherit the artwork's 9:16 ratio. */
.download-phone > img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: center; border-radius: 34px; }
.download-phone-island { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); width: 29%; height: 22px; border-radius: 20px; background: #111; }
.download-preview-caption { margin: 22px 0 0; font-size: .9rem; font-weight: 700; color: var(--muted); }
.qr-landing .newsletter-section { max-width: 760px; margin: 0 auto 32px; box-sizing: border-box; background: var(--surface); }
.qr-landing .qr-explore { text-align: center; }
:root[data-theme="dark"] .qr-landing { background-image: linear-gradient(#1a1a18f5, #1a1a18f5), url("/assets/download-route-background.jpg"); }
:root[data-theme="dark"] .download-hero .eyebrow { color: #ffd60a; }
:root[data-theme="dark"] .download-hero h1 span { color: #ffd60a; }
:root[data-theme="dark"] .download-hero h1 span::after { background: #484017; }
:root[data-theme="dark"] .download-hero .qr-android { background: #333126; }
@media (max-width: 760px) {
  .download-hero { grid-template-columns: 1fr; padding: 32px 8px 40px; gap: 28px; }
  .download-hero h1 { font-size: clamp(3.8rem, 14vw, 5.5rem); }
  .download-hero .qr-description { max-width: 100%; }
  .download-preview { padding-top: 12px; }
  .download-phone { width: min(65%, 280px); }
  .download-halo { width: min(94%, 370px); }
  .download-actions { gap: 16px; }
  .download-store { flex-basis: 100%; max-width: none; }
  .download-qr { display: none; }
}
