/* Option 01, The Passport: only what is unique to this option. The Passport base is shared/passport.css. */

.pages { display: grid; gap: var(--sp-3); }
.page {
  display: grid; grid-template-columns: 24cqw 1fr; gap: var(--sp-4); align-items: center;
  padding: var(--sp-3); border-radius: var(--r-lg);
  background: var(--glass); border: 1px dashed var(--line-strong);
  text-align: left; width: 100%;
}
.page__img { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.page__img img { width: 100%; height: 100%; object-fit: cover; }
.page__img span { position: absolute; right: 6%; bottom: 6%; width: 7cqw; height: 7cqw; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.7); }
.page__img span svg { width: 55%; height: 55%; }
.page b { font-size: var(--fs-sm); display: block; }
.page p { font-size: var(--fs-xs); color: var(--text-3); margin: 2px 0 var(--sp-2); line-height: 1.4; }

/* ---------------------------------------------------------------- Rewards */

.rewards { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.reward { display: grid; grid-template-columns: 18cqw 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--line); }
.reward__img { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a3340, var(--ink-3) 70%); display: grid; place-items: center; color: var(--accent-hi); }
.reward__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.35) contrast(1.05); }
.reward__img svg { width: 45%; height: 45%; }
.reward b { display: block; font-size: var(--fs-sm); }
.reward p { font-size: var(--fs-xs); color: var(--text-3); margin: 2px 0 var(--sp-2); line-height: 1.4; }
.reward .bar { margin-bottom: var(--sp-2); }
.reward__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.reward__cost { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-3); }