:root {
  --desk: #e8eaef; --ink: #15171c; --muted: #5e6470; --peek: 4.25rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --desk: #1a1c22; --ink: #f1f2f5; --muted: #a3a8b3; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 2.5rem 1.25rem;
  background: var(--desk); color: var(--ink);
  font: 400 1rem/1.5 Archivo, ui-sans-serif, system-ui, sans-serif;
}
main { width: 100%; max-width: 24rem; }

h1 {
  margin: 0; font-size: clamp(3.25rem, 16vw, 5.5rem); line-height: .88;
  font-weight: 850; font-stretch: 125%; letter-spacing: -.035em;
}
.lede { margin: .9rem 0 1.75rem; color: var(--muted); font-size: 1.1rem; }

/* The wallet: every card sits in one grid cell, each pushed down one peek further. */
.wallet { display: grid; }
.card {
  grid-area: 1 / 1; margin-top: calc(var(--i) * var(--peek));
  position: relative; overflow: hidden; aspect-ratio: 1.586;
  display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1rem;
  border-radius: 1.1rem; color: #fff; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 -8px 20px -10px rgb(0 0 0 / .35), 0 22px 34px -20px rgb(0 0 0 / .55);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  animation: deal .75s cubic-bezier(.2, .9, .3, 1.15) backwards;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}
/* Light catching the plastic */
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / .2), transparent 42%);
}
.card:hover { transform: translateY(-.8rem); }
.card:active { transform: translateY(-.4rem) scale(.99); }
.card:focus-visible { z-index: 1; transform: translateY(-.8rem); outline: 3px solid var(--ink); outline-offset: 3px; }

.brand { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 700; }
.brand svg { width: 1.6rem; height: 1.6rem; fill: currentColor; flex: none; }
.chip {
  margin-top: auto; width: 2.6rem; height: 1.95rem; border-radius: .4rem;
  background: linear-gradient(135deg, #f7e09a, #c9993c 55%, #f1d07a);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), inset 0 .95rem 0 -.9rem rgb(0 0 0 / .25);
}
.handle { margin-top: .7rem; font-size: 1.1rem; font-weight: 600; font-stretch: 112%; letter-spacing: .02em; }
.note { font-size: .85rem; opacity: .85; }
.holder { margin-top: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }

.paypal { background: linear-gradient(135deg, #0070e0, #002991 70%); }
.revolut {
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(126 87 255 / .55), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgb(0 190 210 / .3), transparent 60%),
    #191c1f;
}
.monzo { background: linear-gradient(135deg, #ff6a5c, #f23d2e); color: #14233c; }
.starling { background: linear-gradient(140deg, #7b4ae6, #4b1fb0); }

.foot { margin: 1.75rem 0 0; color: var(--muted); font-size: .95rem; }

@keyframes deal {
  from { transform: translateY(60vh) rotate(-6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; transition: none; }
}