:root{
  --bg: #070707;
  --panel: #0f0f10;
  --muted: #9aa0a6;
  --accent: #00e5a6; /* neon mint */
  --accent-2: #7be0ff; /* soft cyan */
  --text: #f2f2f2;
  --container-max: 1100px;
}

/* Page layout */
.loyalty-landing .container{max-width:var(--container-max);margin:0 auto;padding:0 1rem}
.loyalty-hero{position:relative;padding:calc(var(--site-header-height,64px) + 2rem) 0 3rem;overflow:visible}
.no-banner .loyalty-hero{padding-top:0 !important}
.hero-banner{text-align:center;padding:1rem 0}
.hero-banner .hero-layer2{display:block;margin:0 auto;max-width:1100px;width:auto;height:auto;border-radius:12px;object-fit:cover}
.hero-banner .hero-cta{margin-top:1rem}
.hero-inner{display:flex;gap:2rem;align-items:center;justify-content:space-between}
.hero-left{flex:1;max-width:560px}
.hero-title{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.05;margin:0 0 .5rem}
.hero-sub{margin:0 0 1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.1rem;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.06);text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#041114;border:none}
.join-cta{font-weight:700}
.hero-features{display:flex;gap:1.2rem;margin-top:1rem;padding:0;list-style:none}

.hero-right{width:42%;display:flex;justify-content:center}
.hero-image{max-width:100%;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.6)}
.hero-bg-icons{position:absolute;left:0;right:0;top:0;width:100%;height:100%;pointer-events:none;opacity:.08}

/* How it works */
.how-it-works{padding:2rem 0}
.section-title{font-size:1.25rem;margin-bottom:1rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:var(--panel);padding:1rem;border-radius:12px;text-align:center}
.step-icon{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,0.03);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 0.5rem}

/* Rewards grid */
.sample-rewards{padding:2rem 0}
.rewards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.reward-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:1rem;border-radius:10px}
.reward-image{height:92px;border-radius:8px;background:linear-gradient(135deg,#0b1112,#101316);margin-bottom:.6rem}

/* Tiers */
.tier-journey{padding:2rem 0}
.tiers{display:flex;gap:1rem;flex-direction:column}
.tier{display:flex;align-items:center;gap:1rem}
.badge{min-width:80px;padding:.6rem;border-radius:8px;background:rgba(255,255,255,0.03);text-align:center}
.progress{height:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:8px;flex:1}

/* Why Join */
.why-join{padding:2rem 0}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.why-item{background:var(--panel);padding:1rem;border-radius:10px;display:flex;gap:0.8rem;align-items:center}
.why-item .icon{font-size:1.5rem}

/* FAQ */
.faq{padding:2rem 0}
.faq-list{display:grid;gap:.6rem}
.faq-item{background:var(--panel);border-radius:10px;overflow:hidden}
.faq-q{width:100%;text-align:left;padding:1rem;background:transparent;border:none;font-weight:600;cursor:pointer}
.faq-a{padding:0 1rem 1rem;display:none}
.faq-item.open .faq-a{display:block}

/* Final CTA */
.final-cta{padding:2rem 0;text-align:center}
.join-cta.large{padding:1rem 1.6rem;font-size:1.05rem;border-radius:12px}

/* Responsive */
@media (max-width:900px){
  .hero-inner{flex-direction:column-reverse;gap:1rem}
  .hero-right{width:100%}
  .steps{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
}

/* BACKGROUND CROSSFADE */
.bg-fade-wrapper{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0; /* behind main (main has z-index:2 in global CSS) */
  pointer-events:none;
  overflow:hidden;
}
.bg-fade-wrapper .bg-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  will-change:opacity;
  opacity:0;
}
.bg-fade-wrapper .bg-layer.layer-1{
  background-image: url('/assets/images/misc/bg_loyalty_dark.webp');
  opacity:1; /* start visible */
  animation: loyalty-crossfade-1 20s ease-in-out infinite;
}
.bg-fade-wrapper .bg-layer.layer-2{
  background-image: url('/assets/images/misc/bg_loyalty_dark_b.webp');
  opacity:0; /* start hidden */
  animation: loyalty-crossfade-2 20s ease-in-out infinite;
}

@keyframes loyalty-crossfade-1{
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes loyalty-crossfade-2{
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .bg-fade-wrapper .bg-layer{ animation: none !important; }
  .bg-fade-wrapper .bg-layer.layer-1{ opacity:1 !important; }
  .bg-fade-wrapper .bg-layer.layer-2{ opacity:0 !important; }
}

/* Full-bleed loyalty header bar (doesn't change layout of nav items) */
.main-nav{
  position:relative;
  /* do not set z-index here — let the header (`.site-header`) remain on top */
  display:flex;
  align-items:center; /* vertically center direct children inside the bar */
}
.main-nav::before{
  content: "";
  /* Position fixed so the bar can reach the very top of the viewport
     while remaining visually behind the header content. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 0; /* touch the top edge of the window */
  /* Height = header height + 10px extension downward */
  height: calc(var(--site-header-height, 64px) + 10px);
  background: #E899F2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(232,153,242,0.18);
  pointer-events: none;
  z-index: -1; /* ensure the bar is behind the header/nav */
  border-radius: 0;
}

/* Keep nav content constrained and centered inside the full-bleed bar */
.main-nav .nav-list{max-width:var(--container-max);margin:0 auto;padding:0 1rem;display:flex;align-items:center}

/* Loyalty: remove global hero spacing */
.loyalty-hero.hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Pull the hero image upward under the header */
#loyalty-landing .hero-banner {
  position: relative;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#loyalty-landing .hero-layer2 {
  display: block;
  margin-top: 10px !important; /* keep a small gap from the nav */
  transform: none !important; /* remove visual-only transform so layout follows image size */
  width: auto;              /* allow natural image width (limited by max-width) */
  max-width: 1100px;       /* original intended maximum */
  height: auto;
  will-change: auto;
}

/* Make the hero's container shrinkwrap to the image size so it won't cut off edges */
.hero-banner.container {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* On very small screens, allow the hero container to be full-width so image can scale down */
@media (max-width: 600px) {
  .hero-banner.container { width: 100%; }
  .hero-banner .hero-layer2 { max-width: 100%; }
}

/* Ensure nothing on the loyalty page pushes content down */
body.loyalty-landing .site-section,
body.loyalty-landing .hero,
body.loyalty-landing .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure header does not add extra space on loyalty page */
body.loyalty-landing .site-header {
  margin-bottom: 0 !important;
}

/* Enforce hero stacking order just under the header */
.hero,
.loyalty-hero,
.hero-banner {
  z-index: 2 !important;
  position: relative;
}

/* Make auth-style buttons inside the hero match register page styles but stay inline */
.hero-banner .auth-btn {
  width: auto !important;
  min-width: 220px;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35) !important;
  background: linear-gradient(180deg, var(--cyan), var(--pink)) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.hero-banner .sign-up-btn { min-width: 220px; }

/* CTA placed below hero: ensure it's centered, not full-width, and not underlined */
.hero-cta { text-align: center; margin: 1rem 0 0; }
.hero-cta .auth-btn,
.hero-cta a.join-cta {
  width: auto !important;
  min-width: 220px;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35) !important;
  background: linear-gradient(180deg, var(--cyan), var(--pink)) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Compact steps when placed inside the hero */
.hero .steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.75rem !important;
  width: 100%;
  max-width: var(--container-max);
  margin: 8px auto 0 !important;
}
.hero .steps .step { padding: .8rem !important; }
.hero .steps .step .step-icon { width:40px;height:40px;margin:0 auto .5rem;border-radius:8px }

@media (max-width: 900px) {
  .hero .steps { grid-template-columns: 1fr !important; }
}