/* 03 App right after paying (welcome.html), design A1-1 (Loop 2026-10-21): two bold cards, iPhone first, browser second.
   Both buttons are the same size: App Store black with white text (Loop's pick), Open My Web App white; on computers the iPhone card has a small App Store QR code in its top right corner. */
.wl-cards { display: grid; gap: 14px; margin-top: 22px; }
.wl-card { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 16px; color: #fff; }
.wl-ios { background: linear-gradient(160deg, #0F2550 0%, #0D1221 100%); }
.wl-web { background: linear-gradient(160deg, #1A6AD0 0%, var(--deep) 100%); }
.wl-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; }
.wl-card h2 { font-family: var(--serif); font-size: 21px; margin: 12px 0 0; text-align: left; }
.wl-card p { margin: 6px 0 18px; color: rgba(255, 255, 255, .78); font-size: 15px; text-align: left; }
.wl-open, .wl-store { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; min-height: 57px; padding: 0 16px; border-radius: 999px; background: #fff; text-decoration: none; box-sizing: border-box; }
.wl-open { color: var(--primary); font-weight: 700; font-size: 17px; }
.wl-store { background: #000; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); line-height: 1.05; }
.wl-store svg { width: 22px; height: 26px; }
.wl-store span { display: flex; flex-direction: column; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
.wl-store small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.wl-qr { display: none; }
@media (min-width: 900px) {
  .wl-wrap.pl-wrap { max-width: 860px; }
  .wl-cards { grid-template-columns: 1fr 1fr; }
  .wl-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; position: absolute; top: 18px; right: 18px; font-size: 10px; color: rgba(255, 255, 255, .7); }
  .wl-qr img { width: 58px; height: 58px; background: #fff; padding: 5px; border-radius: 8px; box-sizing: content-box; }
  .wl-ios h2, .wl-ios p { padding-right: 90px; }
}
/* Hover "Glow" (Loop's pick 2026-10-21): the App Store button's edge turns full white with a soft glow; Open My Web App
   gets a light-blue fill. Text colors stay (site-wide a:hover would turn them navy). */
.wl-open, .wl-store { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.wl-store:hover { color: #fff; background: #111; border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
.wl-open:hover { color: var(--primary); background: var(--highlight); box-shadow: 0 0 0 4px rgba(255, 255, 255, .22); }