@font-face { font-family: "Gilroy"; src: url("Gilroy-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("SFProDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("SFProDisplay-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root { --purple: #7b35fe; --ink: #202020; --muted: #69676e; --canvas: #f7f6fc; --card: #fff; }
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { min-width: 320px; margin: 0; color: var(--ink); font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif; background: var(--canvas); }
.page-shell { display: flex; min-height: 100svh; padding: 40px 24px; align-items: center; justify-content: center; }
.download-layout { display: grid; width: min(100%, 860px); grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr); column-gap: 76px; row-gap: 42px; align-items: center; }
header { grid-column: 1 / -1; }
.wordmark { display: block; width: 112px; height: auto; }
.intro { max-width: 320px; }
.app-icon { width: 64px; height: 64px; border-radius: 16px; }
.eyebrow { margin: 20px 0 10px; color: var(--purple); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Gilroy, sans-serif; }
h1 { margin-bottom: 14px; font-size: clamp(42px, 5vw, 58px); line-height: .98; letter-spacing: -.045em; }
.lede { margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 1.4; }
.store-options { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 22px; }
.qr-option { text-align: center; }
.qr-frame { display: flex; width: 170px; height: 170px; margin: 0 auto 16px; padding: 10px; align-items: center; justify-content: center; border: 1px solid #eceaf0; border-radius: 18px; background: #fff; }
.qr-frame img, .qr-frame canvas { max-width: 100%; max-height: 100%; }
.qr-option h3 { margin-bottom: 10px; font-size: 20px; letter-spacing: -.02em; }
.store-badge { display: inline-flex; transition: transform .14s ease; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge:active { transform: scale(.97); }
.store-badge img { display: block; width: 151px; height: 48px; }
.mobile-note { display: none; }
.mobile-note[hidden] { display: none !important; }

@media (max-width: 650px) {
  .page-shell { display: block; min-height: 100svh; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); }
  .download-layout { display: block; }
  .wordmark { width: 106px; }
  .intro { margin-top: 62px; }
  .eyebrow { margin-top: 20px; }
  h1 { margin-bottom: 14px; font-size: clamp(40px, 12vw, 51px); }
  .lede { max-width: 260px; font-size: 16px; }
  .store-options { margin-top: 44px; grid-template-columns: 1fr 1fr; gap: 12px; }
  .qr-frame { display: none; }
  .qr-option h3 { display: none; }
  .store-badge img { width: min(151px, 100%); height: auto; }
  .mobile-note { display: block; margin: 18px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
}
@media (min-width: 651px) and (max-width: 820px) { .download-layout { column-gap: 32px; } }