/* ============================================================
   welcome.css  —  Welcome Rewards page.
   Tier + calculator use Bootstrap cards/grid; the navy hero,
   tier rows and calc tiles are custom. Scoped to .page-welcome.
   ============================================================ */

/* hero */
.page-welcome .wr-hero { background: var(--navy); border-radius: var(--r-xl); padding: 30px; margin-bottom: 20px; display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; }
.page-welcome .wr-left { flex: 1; min-width: 260px; }
.page-welcome .wr-heading { font-family: 'poppins', serif; font-size: 22px; color: #fff; font-weight: 400; margin-bottom: 8px; }
.page-welcome .wr-sub { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 16px; }
.page-welcome .wr-steps { display: flex; flex-direction: column; gap: 10px; }
.page-welcome .wr-step { display: flex; align-items: center; gap: 12px; }
.page-welcome .wr-step-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(232,168,32,0.2); border: 1px solid rgba(232,168,32,0.4); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--gold-light); flex-shrink: 0; }
.page-welcome .wr-step-text { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.4; }
.page-welcome .wr-step-text strong { color: #fff; }
.page-welcome .wr-right { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.page-welcome .wr-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.page-welcome .wr-card.gold { border-color: rgba(232,168,32,0.35); background: rgba(232,168,32,0.08); }
.page-welcome .wr-card-ic { font-size: 19px; color: var(--gold-light); }
.page-welcome .wr-card-val { font-size: 18px; font-weight: 500; color: var(--gold-light); font-family: 'poppins', serif; }
.page-welcome .wr-card-label { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* tier rows */
.page-welcome .wc-tier { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface2); border-radius: var(--r); border: 1px solid var(--border); }
.page-welcome .wc-tier.active { background: var(--gold-pale); border-color: rgba(232,168,32,0.35); }
.page-welcome .wc-tier-ic { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.page-welcome .wc-tier-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.page-welcome .wc-tier-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* calculator */
.page-welcome .wc-calc-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.page-welcome .wc-calc-range { font-size: 11px; color: var(--muted); margin-top: 4px; }
.page-welcome .wc-calc-tile { background: var(--surface2); border-radius: var(--r); padding: 12px; text-align: center; border: 1px solid var(--border); height: 100%; }
.page-welcome .wc-calc-tile.gold { background: var(--gold-pale); border-color: rgba(232,168,32,0.35); }
.page-welcome .wc-calc-val { font-size: 16px; font-weight: 500; color: var(--ink); }
.page-welcome .wc-calc-cap { font-size: 10px; color: var(--muted); margin-top: 3px; }
.page-welcome .wc-calc-note { margin-top: 12px; font-size: 12px; color: var(--muted); background: var(--surface2); border-radius: var(--r); padding: 10px 12px; line-height: 1.6; }