/* Get the app dialog, after Revolut's: a light rounded card over a dimmed page, the close button in the page corner. */
.ga { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0;
  background: transparent; display: grid; place-items: center; opacity: 0; transition: opacity .25s ease, overlay .25s allow-discrete, display .25s allow-discrete; }
.ga:not([open]) { display: none; }
.ga[open] { opacity: 1; }
@starting-style { .ga[open] { opacity: 0; } }
.ga::backdrop { background: rgba(10, 12, 14, .55); backdrop-filter: blur(6px); }
.ga-card { width: min(472px, 100%); padding: 40px 48px 44px; border-radius: 24px; background: #F7F7F7; color: #191C1F; text-align: center;
  font-family: "Inter", system-ui, sans-serif; transform: scale(.97); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.ga[open] .ga-card { transform: none; }
@starting-style { .ga[open] .ga-card { transform: scale(.97); } }
.ga-card h2 { margin: 0 0 12px; font-size: 44px !important; color: #191C1F; }
.ga-sub { margin: 0 0 28px; font-size: 17px; font-weight: 500; line-height: 1.35; }
.ga-qr { display: block; width: 168px; height: 168px; margin: 0 auto 28px; padding: 12px; background: #fff; border-radius: 16px; box-sizing: content-box; }
.ga-note { margin: 0 auto 24px; max-width: 320px; font-size: 15px; line-height: 1.45; color: #5C5F63; }
.ga-x { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; transition: background-color .2s ease; }
.ga-x:hover { background: rgba(255, 255, 255, .14); }
.ga-x svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .ga, .ga-card { transition: none; } }