:root{
  --bg: #070707;
  --panel: #0f0f10;
  /* Slightly darker panel tone (subtle 5-6 shade darken from #262626) */
  --panel-dark: #1e1e1e;
  --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:0 0 1rem;overflow:visible}
.no-banner .loyalty-hero{padding-top:0 !important}
.hero-banner{text-align:center;padding:0.25rem 0}
.hero-banner .hero-layer2{display:block;margin:0 auto;max-width:990px;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{text-align:center;display:flex;align-items:center;justify-content:center}
.step img{max-width:100%;max-height:200px;height:auto;display:block}
.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 */
/* Make sample-rewards container 15% wider and 15% shorter (vertical space)
  - Wider: increase max-width for this section to 115% of the site container
  - Shorter: reduce vertical padding and reduce image height by 15% */
.sample-rewards{padding:1.7rem 0}
/* Make the section occupy 80% of the viewport width and center it */
.sample-rewards.container{width:80vw;max-width:none;margin-left:auto;margin-right:auto}
/* Use a 4-column layout so each tile spans ~25% of the section */
.rewards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.reward-card{background:var(--panel-dark);padding:1rem;border-radius:10px;box-sizing:border-box;border:1px solid transparent;transition:box-shadow 200ms ease}
/* Hover: only outer glow/shadow. No transforms, no border-width change to avoid layout shift or font reflow */
.reward-card:hover{box-shadow:0 8px 24px rgba(232,153,242,0.30)}
/* COMMENTED OUT - Controlled by global-font.css */
/* .reward-card h3{font-size:1.2rem;margin:0 0 .45rem;font-weight:600;color:var(--text)} */
.reward-card h3{/* font-size & font-weight from global-font.css */ margin:0 0 .45rem;color:var(--text)}
.reward-image{border-radius:8px;overflow:hidden;margin-bottom:.6rem;background:transparent}
.reward-image img{display:block;width:100%;height:auto}

/* Tiers */
.tier-journey{padding:2rem 0}

/* Carousel wrapper for Tier Journey */
.tier-carousel{display:flex;align-items:center;gap:10px;position:relative}
.tier-carousel .carousel-viewport{overflow:hidden;flex:1;position:relative;display:flex;align-items:center}
.carousel-track{display:flex;align-items:center;gap:12px;transition:transform 0.5s ease;width:100%}

.tier-thumb{background:var(--panel-dark);padding:0;border-radius:10px;box-sizing:border-box;display:block;flex:0 0 auto;width:clamp(200px,40vw,500px);height:auto}
/* Keep aspect-ratio for a perfect square tile */
.tier-thumb{aspect-ratio:1 / 1}
.tier-thumb .badge{width:100%;text-align:center;padding:.6rem;border-radius:8px;background:rgba(255,255,255,0.02);margin-bottom:8px}
.tier-thumb .progress{height:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:8px;flex:0 0 auto}

/* Fade neighbors: only the centered slide is fully opaque */
.tier-thumb{opacity:0.36;transition:opacity 240ms ease}
.tier-thumb.active{opacity:1}

/* Slide images fill the tile and keep rounded corners */
.tier-thumb{padding:0;background:transparent;overflow:hidden}
.tier-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}

/* Keep default tier styling for non-carousel fallbacks */
.tier{display:flex;align-items:center;gap:1rem}
.badge{min-width:80px;padding:.6rem;border-radius:8px;background:var(--panel-dark);text-align:center}
.progress{height:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:8px;flex:1}

/* Carousel controls */
.carousel-control{background:transparent;border:none;color:var(--text);font-size:1.8rem;width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.carousel-control:hover{background:rgba(255,255,255,0.03)}
.carousel-control:focus{outline:2px solid rgba(123,224,255,0.18)}
.carousel-control.prev{margin-right:6px}
.carousel-control.next{margin-left:6px}

/* Why Join */
.why-join{padding:2rem 0}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.why-item{background:var(--panel-dark);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:1rem;max-width:100%}
.faq-item{background:var(--panel-dark);border-radius:10px;overflow:hidden;transition:all 0.3s ease}
.faq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;text-align:left;padding:0.9rem 1.5rem;background:transparent;border:none;color:var(--text);font-weight:500;font-size:1rem;cursor:pointer;transition:background 0.15s ease}
.faq-q:hover{background:rgba(255,255,255,0.03)}
.faq-question{flex:0 0 60%;text-align:left;line-height:1.35}
.faq-toggle{flex:0 0 auto;font-size:1.5rem;font-weight:300;line-height:1;transition:transform 0.3s ease;margin-left:1rem}
.faq-item.open .faq-toggle{transform:rotate(45deg)}
.faq-a{padding:0 1.5rem 0;color:var(--accent-2);opacity:1;line-height:1.6;max-height:0;overflow:hidden;transition:max-height 0.34s ease,padding 0.24s ease;background:transparent}
.faq-item.open .faq-a{padding:0 1.5rem 1.2rem}

/* When an item is open, give the question+answer a unified hover tone */
.faq-item.open .faq-q,
.faq-item.open .faq-a,
.faq-q:hover + .faq-a { background: rgba(255,255,255,0.03); }

/* Add extra space after the FAQ list and before footer for aesthetics */
#loyalty-landing .faq { padding-bottom: 3.5rem; }
#loyalty-landing { padding-bottom: 4.5rem; }

/* Links inside answers use the cyan accent color */
.faq-a a { color: var(--accent-2); text-decoration: underline; }

/* Compact paragraph spacing for the loyalty landing page so descriptions span the full width */
/* Override global paragraph rules (which limit p to 60% and center) */
#loyalty-landing p { margin: 5px 0 0; padding: 5px 0; max-width: 100%; text-align: center; }
#loyalty-landing .reward-card p { width: 100%; max-width: 100%; margin: 5px 0 0; padding: 5px 0; text-align: center; }

/* Make loyalty containers shrink to their contents but keep a sensible minimum height */
#loyalty-landing .container { min-height: 430px; height: auto; }

@media (max-width: 768px) {
  #loyalty-landing .container { min-height: auto; }
}

/* Ensure reward cards stack their content vertically and don't force extra space */
.reward-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}

/* 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}
  .rewards-grid{grid-template-columns:repeat(2,1fr)}
  /* On tablet, keep tiles responsive but allow the clamp() to control size */
}

@media (max-width:520px){
  .rewards-grid{grid-template-columns:1fr}
  /* On small screens the clamp() will ensure tiles don't exceed viewport */
  .tier-thumb{width:clamp(180px,70vw,420px)}
}

/* 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;
  opacity:0;
}
.bg-fade-wrapper .bg-layer.layer-1{
  background-image: url('/assets/images/misc/bg_loyalty_dark-south.webp');
  opacity:1; /* start visible */
  animation: loyalty-crossfade-1 14s ease-in-out infinite;
}
.bg-fade-wrapper .bg-layer.layer-2{
  background-image: url('/assets/images/misc/bg_loyalty_dark_b-south.webp');
  opacity:0; /* start hidden */
  animation: loyalty-crossfade-2 14s 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 */
}
/* Loyalty header should match global behavior (transparent until scroll); remove solid purple bar */
.main-nav::before { content:none !important; }

/* 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 */
/* Restore standard hero spacing below header */
.loyalty-landing .hero { margin-top: calc(var(--site-header-height,64px) + 12px) !important; }

/* Pull the hero image upward under the header */
#loyalty-landing .hero-banner {
  position: relative;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Remove manual hero image offset; rely on section margin */
#loyalty-landing .hero-layer2 { margin-top: 0 !important; max-width: 990px; }

/* 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 .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 .auth-btn:hover,
.hero-cta .auth-btn:hover,
.hero-cta a.join-cta:hover {
  color: var(--white) !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: 1.5rem auto; 
  width: 100%;
  max-width: 100%;
  padding: 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: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.hero .steps .step img { max-width: 100%; max-height: 200px; height: auto; display: block; }
.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; }
}


/* Disable the dual background crossfade on the loyalty landing page.
   Use the single `page-bg` element only so the hero/bg doesn't animate. */
.loyalty-landing .bg-fade-wrapper {
  display: none !important;
}