:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#f5f6f8;color:#141619;
--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;
--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-pill:999px}
*{box-sizing:border-box}body{margin:0}
.loyalty-shell{max-width:1180px;margin:auto;padding:56px 24px 88px}
.hero{max-width:760px;padding:20px 0 36px}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:800}
h1{font-size:clamp(2.3rem,6vw,4.6rem);line-height:.98;letter-spacing:-.04em;margin:12px 0 16px}
h2{margin:0 0 10px;font-size:1.15rem}.hero p{font-size:1.125rem;line-height:1.6;color:#626971}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.card{background:#fff;border:1px solid #e1e4e8;border-radius:var(--radius-lg);padding:24px;box-shadow:0 12px 34px rgba(20,22,25,.05)}
.metric{display:flex;flex-direction:column;gap:8px}.metric strong{font-size:2.6rem;letter-spacing:-.04em}.metric small,.muted{color:#69717a}
.progress{height:10px;border-radius:999px;background:#eef1f3;overflow:hidden}.progress>span{display:block;height:100%;width:0;background:currentColor}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
button{padding:14px 18px;border:0;border-radius:var(--radius-md);background:#141619;color:#fff;font-weight:800;cursor:pointer}
button:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.status-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid #edf0f2}
.status-row strong{text-align:right}.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f0f2f4;font-size:.78rem;font-weight:800}
@media(max-width:700px){.loyalty-shell{padding:32px 16px 64px}.grid{grid-template-columns:1fr}.status-row{align-items:flex-start;flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}