/* ============================================
   PAGE-SPECIFIC LAYOUTS
   Maps to: page-level layout components
   ============================================ */

/* ============================================
   HOME - HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
  overflow: hidden;
}

.hero--image {
  min-height: 85vh;
  padding: var(--space-4xl) var(--space-lg) var(--space-4xl);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
}

.hero--image .hero__bg {
  background: #000;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  position: absolute;
  inset: 0;
  opacity: 0.85;
  transition: transform 8s ease;
}

.hero--image:hover .hero__bg-img {
  transform: scale(1.05);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.1) 60%,
    rgba(0,0,0,0.15) 100%
  );
}

.hero--image .hero__title,
.hero--image .hero__subtitle,
.hero--image .hero__timer-num,
.hero--image .hero__entries-count {
  color: #fff;
}

.hero--image .hero__subtitle {
  color: rgba(255,255,255,0.8);
}

.hero--image .hero__timer-label,
.hero--image .hero__timer-unit,
.hero--image .hero__entries {
  color: rgba(255,255,255,0.6);
}

.hero--image .hero__timer-sep {
  color: rgba(255,255,255,0.3);
}

.hero--image .hero__badge {
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
}

.hero--image .hero__entries-avatars img {
  border-color: rgba(0,0,0,0.5);
}

/* Banner hero - full-bleed image, no text overlay */
.hero--banner {
  min-height: auto;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.hero__banner-img {
  width: 100%;
  display: block;
  min-height: 500px;
  max-height: 92vh;
  object-fit: cover;
  object-position: center 25%;
}


.hero__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
}

.hero__content {
  position: relative;
  max-width: 720px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
  margin-bottom: var(--space-lg);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: var(--space-lg);
}

.hero__artist {
  color: var(--pink);
 -webkit-text-fill-color: var(--pink);
}

.hero__subtitle {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.hero__timer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.hero__timer-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.hero__timer-digits {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.hero__timer-block { text-align: center; }

.hero__timer-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  display: block;
}

.hero__timer-unit {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.hero__timer-sep {
  font-size: var(--text-xl);
  color: var(--text-muted);
  font-weight: 300;
}

.hero__entries {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hero__entries-count { font-weight: 700; color: var(--text-primary); }

.hero__entries-avatars {
  display: flex;
}

.hero__entries-avatars img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-primary);
  margin-left: -6px;
}

.hero__entries-avatars img:first-child { margin-left: 0; }

@media (max-width: 640px) {
  .hero__title { font-size: var(--text-3xl); }
  .hero { min-height: 440px; padding-top: var(--space-3xl); }
  .hero--image { min-height: 500px; }
}

/* ============================================
   HOME - DASHBOARD
   ============================================ */
.dashboard {
  padding: var(--space-3xl) 0;
}

/* ============================================
   HOME - ACTION FEED
   ============================================ */
.feed {
  padding: var(--space-3xl) 0;
}

/* ============================================
   HOME - CLUBS
   ============================================ */
.clubs {
  padding: var(--space-3xl) 0;
}

.clubs__carousel-wrap {
  padding: 0 var(--space-lg);
  overflow: hidden;
}

/* ── HOME FEATURED CLUB SPOTLIGHT ── */
.home-clubs-featured {
  margin-bottom: var(--space-xl);
}

.home-clubs-featured__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  min-height: 340px;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-out);
}

.home-clubs-featured__inner:hover {
  transform: translateY(-2px);
}

.home-clubs-featured__img-wrap {
  position: relative;
  overflow: hidden;
}

.home-clubs-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform var(--duration-slow) var(--ease-out);
}

.home-clubs-featured__inner:hover .home-clubs-featured__img {
  transform: scale(1.04);
}

.home-clubs-featured__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #111 0%, rgba(17,17,17,0.2) 40%, transparent 100%);
}

.home-clubs-featured__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
  color: #fff;
}

.home-clubs-featured__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-clubs-featured__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cdb95;
  animation: clubPulse 2s ease-in-out infinite;
}

@keyframes clubPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.home-clubs-featured__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.home-clubs-featured__artist {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
}

.home-clubs-featured__artist span {
  color: rgba(255,255,255,0.8);
  font-weight: 600;
}

.home-clubs-featured__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-xl);
}

.home-clubs-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  width: fit-content;
}

.home-clubs-featured__cta:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .home-clubs-featured__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .home-clubs-featured__img-wrap {
    height: 220px;
  }
  .home-clubs-featured__img-overlay {
    background: linear-gradient(to top, #111 0%, rgba(17,17,17,0.2) 40%, transparent 100%);
  }
  .home-clubs-featured__content {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* ── HOME CLUB PILLS ── */
.home-clubs__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

/* ============================================
   SWEEPSTAKES DETAIL - NIKE PDP STYLE
   ============================================ */
.page--sweepstakes .container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

/* ── SUBPAGE VARIANT BAR ── */
.sdp__subpage-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.sdp__sp-label {
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.sdp__sp-link {
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}
.sdp__sp-link:hover { background: rgba(255,255,255,0.15); color: #fff; }
.sdp__sp-link--active {
  background: #f5c542;
  color: #000;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   EXL — Experience Layout (Production-Style White Layout)
   Matches propeller.la/hinterland2026 design
   ═══════════════════════════════════════════════════════════════ */

.exl {
  background: #fff;
  color: #222;
  padding: 24px 32px 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.exl__back {
  display: none; /* Production doesn't show back button — nav provides navigation */
}

/* ── TWO-COLUMN TOP ── */
.exl__top {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.exl__left {
  flex: 0 0 55%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.exl__right {
  flex: 1;
  min-width: 0;
}

/* ── TITLE ── */
.exl__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.1;
}

/* ── ORG BADGE ── */
.exl__org-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.exl__org-badge-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.exl__org-badge-name {
  font-size: 13px;
  color: #888;
  font-weight: 500;
}

/* ── CAROUSEL ── */
.exl__carousel {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-bottom: 16px;
  /* No overflow hidden here — arrows sit outside */
}

.exl__carousel-track {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.exl__carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.exl__carousel-slide--active {
  opacity: 1;
  z-index: 1;
}

.exl__carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arrows: plain black chevrons OUTSIDE the image */
.exl__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 32px;
  font-weight: 300;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  padding: 0;
}
.exl__carousel-btn:hover { color: #666; }
.exl__carousel-btn--prev { left: -44px; }
.exl__carousel-btn--next { right: -44px; }

/* Dots: BELOW the image (not overlaid) */
.exl__carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 12px;
}

.exl__carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.exl__carousel-dot--active {
  background: #000;
}

/* ── COUNTDOWN ── */
.exl__countdown {
  text-align: center;
  margin-bottom: 20px;
}

.exl__countdown-label {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 4px;
  display: block;
}

/* Inline single-line countdown: "42 days : 3 hrs : 54 mins : 24 secs" */
.exl__countdown-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-size: 22px;
  font-weight: 700;
  color: #000;
}

.exl__countdown-unit {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}

.exl__countdown-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.exl__countdown-text {
  font-size: 22px;
  text-transform: lowercase;
  font-weight: 700;
}

.exl__countdown-text--pink {
  color: #fe20b0;
}

/* Urgent countdown (7 days or less) */
.exl__countdown--urgent .exl__countdown-num {
  color: #e53e3e;
}
.exl__countdown--urgent .exl__countdown-text {
  color: #e53e3e;
  animation: urgentPulse 2s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.exl__countdown-sep {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin: 0 4px;
}

/* ── ENTER NOW BUTTON ── */
.exl__enter-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 16px 32px;
  background: #fe20b0;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  margin-bottom: 16px;
}
.exl__enter-btn:hover {
  background: #e01a9e;
  transform: translateY(-1px);
}

/* ── LEFT LINKS ── */
.exl__left-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.exl__link {
  font-size: 14px;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}
.exl__link:hover { color: #666; }

/* ── PACKAGE INCLUDES ── */
.exl__package {
  margin-bottom: 32px;
}

.exl__package--mobile {
  display: none; /* shown on mobile only */
}

.exl__package-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fe20b0;
  margin-bottom: 20px;
  text-align: center;
}

.exl__package-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.exl__package-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #e8e8e8;
  font-size: 16px;
  color: #555;
  line-height: 1.5;
}

.exl__package-item:last-child {
  border-bottom: 1px solid #eee;
}

.exl__package-icon {
  flex-shrink: 0;
  font-size: 22px;
  margin-top: 2px;
  width: 28px;
  text-align: center;
}
.exl__package-icon svg.ic {
  width: 22px;
  height: 22px;
  color: #999;
}

.exl__package-text {
  flex: 1;
}

/* ── SECTION HEADINGS ── */
.exl__section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  margin-bottom: 6px;
}

.exl__section-sub {
  font-size: 15px;
  color: #333;
  text-align: center;
  margin-bottom: 24px;
  font-weight: 700;
}

/* ── ACTION CARDS (Pink border) ── */
.exl__action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 28px;
  background: #fff;
  border: 2px solid #fe20b0;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: left;
  margin-bottom: 16px;
}

.exl__action-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 30px rgba(254, 32, 176, 0.2);
}

.exl__action-card--done {
  opacity: 0.6;
  pointer-events: none;
}

.exl__action-card-body {
  flex: 1;
  min-width: 0;
}

.exl__action-card-type {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 6px;
}

.exl__action-card-title {
  font-size: 16px;
  font-weight: 400;
  color: #777;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* EXL donate disclaimer — override dark-bg defaults for white EXL layout */
.exl .donate-disclaimer {
  color: #999;
  margin-top: 4px;
  margin-bottom: 16px;
  text-align: left;
  font-size: 10px;
  line-height: 1.55;
}
.exl .donate-disclaimer p {
  margin: 0 0 5px;
}
.exl .donate-disclaimer a {
  color: #888;
}
.exl .donate-disclaimer a:hover {
  color: #555;
}

.exl__action-card-entries {
  display: inline-block;
  padding: 8px 18px;
  background: #FFED00;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  border-radius: 20px;
}

.exl__action-card-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 8px;
  margin-left: 20px;
  flex-shrink: 0;
}

/* ── AMOE DISCLOSURE (bottom of layout) ── */
.exl__amoe-disclosure {
  text-align: center;
  padding: 16px 0 8px;
}

.exl__amoe-link {
  font-size: 13px;
  color: #999;
  text-decoration: none;
}
.exl__amoe-link span {
  text-decoration: underline;
  color: #666;
}
.exl__amoe-link:hover span { color: #000; }

.exl__amoe-inline {
  color: #fe20b0;
  text-decoration: underline;
  font-weight: 700;
}

/* ── IMPORTANT DETAILS ACCORDION ── */
.exl__details {
  background: #f5f5f5;
  border-radius: 12px;
  max-width: 1200px;
  margin: 0 auto 80px;
  overflow: hidden;
}

.exl__details-inner {
  padding: 0;
}

.exl__details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
}

.exl__details-toggle[aria-expanded="true"] .exl__details-toggle-icon {
  transform: rotate(180deg);
}

.exl__details-toggle-icon {
  transition: transform 0.2s;
}

.exl__details-body {
  padding: 0 28px 28px;
}

.exl__details-disclosure {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.exl__details-desc {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 20px;
}

.exl__details-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

.exl__details-item {
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.5;
}

.exl__details-label {
  font-weight: 700;
  color: #000;
}

.exl__details-value {
  color: #555;
  margin-left: 4px;
}

.exl__details-value a {
  color: #fe20b0;
  text-decoration: underline;
}

.exl__details-carbon {
  font-size: 12px;
  color: #888;
  font-style: italic;
  margin-bottom: 16px;
}

/* ── STICKY CTA ── */
.exl__sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #000;
  padding: 12px 24px;
  display: none; /* Hidden on desktop — mobile only */
  justify-content: center;
}

.exl__sticky-inner {
  max-width: 600px;
  width: 100%;
}

.exl__sticky-cta {
  display: block;
  width: 100%;
  padding: 14px 32px;
  background: #fe20b0;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s;
}
.exl__sticky-cta:hover {
  background: #e01a9e;
}

/* ── EXL RESPONSIVE ── */
@media (max-width: 800px) {
  .exl {
    padding: 16px 16px 32px;
  }

  .exl__top {
    flex-direction: column;
    gap: 24px;
  }

  .exl__left {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .exl__right {
    width: 100%;
  }

  /* On mobile, hide desktop package, show mobile package */
  #pfPackageDesktop {
    display: none !important;
  }

  .exl__package--mobile {
    display: block !important;
    padding: 0 0 24px;
  }

  .exl__carousel {
    max-width: 100%;
  }

  /* On mobile, tuck arrows to edge since no room outside */
  .exl__carousel-btn--prev { left: -28px; }
  .exl__carousel-btn--next { right: -28px; }

  /* Show sticky CTA on mobile only */
  .exl__sticky {
    display: flex;
  }
}

/* When flow steps are active inside .exl, they need white bg */
.exl .pf__step {
  background: #fff;
  color: #222;
  padding: 24px 0;
}

.exl .pf__step-inner {
  max-width: 600px;
  margin: 0 auto;
}

.exl .pf__back {
  color: #666;
}
.exl .pf__back:hover { color: #000; }

.exl .pf__title {
  color: #000;
}

.exl .pf__subtitle {
  color: #555;
}

.exl .pf__badge {
  background: #FFED00;
  color: #000;
}

.exl .pf__badge--gold {
  background: #fe20b0;
  color: #fff;
}

.exl .pf__badge--entries {
  background: #FFED00;
  color: #000;
}

.exl .pf__input {
  background: #f5f5f5;
  color: #000;
  border: 1px solid #ddd;
}
.exl .pf__input:focus {
  border-color: #fe20b0;
  box-shadow: 0 0 0 3px rgba(254, 32, 176, 0.1);
}
.exl .pf__input::placeholder {
  color: #999;
}

.exl .pf__cta {
  background: #000;
  color: #fff;
}
.exl .pf__cta:hover {
  background: #222;
}

.exl .pf__cta--sign {
  background: #000;
  color: #fff;
}

.exl .pf__cta--donate {
  background: #fe20b0;
  color: #fff;
}
.exl .pf__cta--donate:hover {
  background: #e01a9e;
}

.exl .pf__cta--max {
  background: #fe20b0;
  color: #fff;
}

.exl .pf__pet-progress-bar {
  background: #fe20b0;
}

.exl .pf__pet-progress {
  background: #eee;
}

.exl .pf__pet-stats {
  color: #666;
}

.exl .pf__don-toggle-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}
.exl .pf__don-toggle-btn--active {
  background: #000;
  color: #fff;
  border-color: #000;
}

.exl .pf__don-amt {
  background: #f5f5f5;
  color: #000;
  border: 1px solid #ddd;
}
.exl .pf__don-amt--selected {
  background: #000;
  color: #fff;
  border-color: #000;
}

.exl .pf__don-impact {
  background: #f5f5f5;
  border-color: #eee;
  color: #333;
}

.exl .pf__don-secure {
  color: #888;
}

.exl .pf__skip {
  color: #888;
}
.exl .pf__skip:hover {
  color: #000;
}

/* Maximize step light overrides */
.exl .pf__celeb-icon { filter: none; }
.exl .pf__celeb-title { color: #000; }
.exl .pf__celeb-entries { color: #fe20b0; }
.exl .pf__max-card { background: #f9f9f9; border: 1px solid #eee; }
.exl .pf__max-badge { background: #fe20b0; color: #fff; }
.exl .pf__max-pitch { color: #333; }
.exl .pf__max-also { color: #666; }
.exl .pf__max-perk { color: #333; }
.exl .pf__max-perk-info span { color: #888; }
.exl .pf__max-social { color: #888; }

/* Earn step light overrides */
.exl .pf__earn-counter { color: #000; }
.exl .pf__earn-counter-num { color: #fe20b0; }
.exl .pf__earn-club { background: #f9f9f9; border: 1px solid #eee; }
.exl .pf__earn-club-badge { background: #fe20b0; color: #fff; }
.exl .pf__earn-club-btn { background: #000; color: #fff; }
.exl .pf__redeem { background: #f9f9f9; border: 1px solid #eee; }
.exl .pf__redeem-minus, .exl .pf__redeem-plus { background: #eee; color: #000; }
.exl .pf__redeem-btn { background: #000; color: #fff; }
.exl .pf__earn-action { background: #f9f9f9; border: 1px solid #eee; color: #333; }
.exl .pf__earn-action:hover { background: #f0f0f0; }
.exl .pf__earn-action-entries { color: #fe20b0; }
.exl .pf__earn-other-card { background: #f9f9f9; border: 1px solid #eee; color: #333; }
.exl .pf__earn-other-card:hover { background: #f0f0f0; }

/* Invite section light */
.exl .pf__invite { background: #f9f9f9; border: 1px solid #eee; }
.exl .pf__invite-avatar--you { background: #fe20b0; color: #fff; }
.exl .pf__invite-avatar--friend { background: #eee; color: #999; }
.exl .pf__invite-btn { background: #000; color: #fff; border-color: #000; }
.exl .pf__invite-desc { color: #666; }

/* Cause-forward light */
.exl .pf__cause-forward { background: rgba(254, 32, 176, 0.05); border: 1px solid rgba(254, 32, 176, 0.2); }
.exl .pf__cause-forward-text { color: #333; }

/* AMOE form light overrides */
.exl .pf__amoe-header { color: #000; }
.exl .pf__amoe-badge { background: #FFED00; color: #000; }
.exl .pf__amoe-title { color: #000; }
.exl .pf__amoe-sub { color: #666; }
.exl .pf__amoe-label { color: #333; }
.exl .pf__amoe-input { background: #f5f5f5; color: #000; border: 1px solid #ddd; }
.exl .pf__amoe-input:focus { border-color: #fe20b0; }
.exl .pf__amoe-submit { background: #000; color: #fff; }
.exl .pf__amoe-legal { color: #999; }
.exl .pf__amoe-checkbox span { color: #555; }

/* Video step light */
.exl .pf__vid-badge { color: #fe20b0; }
.exl .pf__vid-title { color: #000; }
.exl .pf__vid-sub { color: #666; }

/* ═══════════════════════════════════════════════════════
   EXL DESIGN DNA — Premium polish layer
   ═══════════════════════════════════════════════════════ */

/* ── Scroll-triggered fade-in ── */
.exl__fade-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.exl__fade-section.exl--visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children inside action sections */
.exl__actions.exl--visible { transition-delay: 0.1s; }
.exl__more.exl--visible { transition-delay: 0.2s; }

/* ── Section breathing room ── */
.exl__actions,
.exl__more {
  padding-top: 40px;
  padding-bottom: 20px;
}
.exl__package.exl__package--mobile {
  padding: 40px 0;
}

/* ── Typography upgrade ── */
.exl__section-heading {
  letter-spacing: -0.02em;
}
.exl__section-sub {
  letter-spacing: 0.01em;
}
.exl__package-title {
  letter-spacing: 0.15em;
  font-size: 13px;
  color: #999;
  font-weight: 700;
}

/* ── Rounded interactive elements ── */
.exl__enter-btn,
.exl__sticky-cta {
  border-radius: 30px;
}
.exl__action-card {
  border-radius: 24px;
}
.exl__action-card-entries {
  border-radius: 30px;
}

/* ── Gradient section dividers ── */
.exl__how-it-works,
.exl__org-impact,
.exl__quote,
.exl__social-proof {
  position: relative;
}
.exl__quote::before {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ddd, transparent);
  margin: 0 auto 0;
}

/* ═══════════════════════════════════════════════════════
   NEW CONTENT SECTIONS
   ═══════════════════════════════════════════════════════ */

/* ── How It Works ── */
.exl__how-it-works {
  padding: 20px 20px 8px;
}
.exl__hiw-card {
  background: #fafafa;
  border-radius: 20px;
  padding: 32px 24px 28px;
  max-width: 520px;
  margin: 0 auto;
}
.exl__hiw-title {
  font-family: var(--font-display, sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-align: center;
}
.exl__hiw-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.exl__hiw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  text-align: center;
}
.exl__hiw-icon {
  font-size: 28px;
  margin-bottom: 4px;
  display: block;
  line-height: 1;
}
.exl__hiw-label {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
}
.exl__hiw-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.45;
  max-width: 130px;
}
.exl__hiw-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #ddd, transparent);
  flex-shrink: 0;
  margin-top: 14px;
}

/* ── Combined Org + Impact Card ── */
.exl__org-impact {
  padding: 8px 20px 20px;
  position: relative;
}
.exl__org-impact-card {
  background: #fafafa;
  border-radius: 20px;
  padding: 36px 28px 32px;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.exl__org-impact-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: 16px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.exl__org-impact-logo:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.exl__org-impact-name {
  font-family: var(--font-display, sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.exl__org-impact-mission {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 24px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.exl__org-impact-stats {
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.exl__org-impact-raised {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.exl__org-impact-amount {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #111 30%, #fe20b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.exl__org-impact-label {
  font-size: 13px;
  color: #999;
  font-weight: 600;
}
.exl__org-impact-bar {
  width: 100%;
  height: 8px;
  background: #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.exl__org-impact-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fe20b0, #ff6fd8);
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.exl__org-impact-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #999;
  font-weight: 500;
}

/* ── Artist Quote ── */
.exl__quote {
  padding: 40px 28px;
}
.exl__quote-block {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.exl__quote-mark {
  display: block;
  font-size: 48px;
  line-height: 1;
  color: #fe20b0;
  opacity: 0.3;
  font-family: Georgia, serif;
  margin-bottom: -8px;
}
.exl__quote-text {
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
}
.exl__quote-cite {
  font-size: 13px;
  font-weight: 700;
  color: #999;
  font-style: normal;
  letter-spacing: 0.05em;
}

/* ── Social Proof ── */
.exl__social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 28px;
}
.exl__social-proof-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5cdb95;
  animation: exlDotPulse 2s ease-in-out infinite;
}
@keyframes exlDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.exl__social-proof-text {
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

/* ── Powered by Propeller Footer ── */
.exl__powered {
  padding: 48px 28px 60px;
  text-align: center;
}
.exl__powered-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.exl__powered-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.exl__powered-text {
  font-size: 12px;
  font-weight: 700;
  color: #bbb;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.exl__powered-sub {
  font-size: 11px;
  color: #ccc;
}

/* ── Mobile adjustments for new sections ── */
@media (max-width: 600px) {
  .exl__hiw-card {
    padding: 24px 16px 20px;
  }
  .exl__hiw-desc {
    font-size: 11px;
    max-width: 100px;
  }
  .exl__hiw-icon {
    font-size: 24px;
  }
  .exl__hiw-line {
    height: 50px;
  }
  .exl__org-impact-card {
    padding: 28px 20px 24px;
  }
  .exl__org-impact-amount {
    font-size: 1.6rem;
  }
  .exl__quote-text {
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════════════
   EXL DESIGN DNA — Premium visual flair (phase 2)
   ═══════════════════════════════════════════════════════ */

/* ── Breathing glow behind action cards ── */
.exl__actions {
  position: relative;
  overflow: visible;
}
.exl__glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 32, 176, 0.06) 0%, rgba(254, 32, 176, 0) 70%);
  top: 30%;
  left: 60%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  animation: exlGlowPulse 7s ease-in-out infinite;
}
.exl__glow--alt {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(92, 219, 149, 0.05) 0%, rgba(92, 219, 149, 0) 70%);
  top: 60%;
  left: 30%;
  animation: exlGlowPulse 9s ease-in-out infinite reverse;
}
@keyframes exlGlowPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.15); }
}

/* ── Premium easing — specific properties only (avoid 'all' which jank scrolls) ── */
.exl__action-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}
.exl__enter-btn,
.exl__sticky-cta {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.exl__org-impact-logo {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.exl__quote-block {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Action card hover: top-line accent ── */
.exl__action-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.exl__action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #fe20b0, #ff6fd8);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.exl__action-card:hover::before {
  opacity: 1;
}

/* ── Button shimmer overlay ── */
.exl__sticky-cta,
.exl__enter-btn {
  position: relative;
  overflow: hidden;
}
.exl__btn-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.2) 45%, transparent 50%);
  animation: exlBtnShimmer 3s ease infinite;
  pointer-events: none;
}
@keyframes exlBtnShimmer {
  0% { transform: translateX(-200%); }
  60% { transform: translateX(300%); }
  100% { transform: translateX(300%); }
}

/* ── Sticky CTA subtle glow ── */
.exl__sticky-cta {
  animation: exlCtaGlow 2.5s ease infinite;
}
@keyframes exlCtaGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(254, 32, 176, 0.25); }
  50% { box-shadow: 0 4px 30px rgba(254, 32, 176, 0.45), 0 0 50px rgba(254, 32, 176, 0.1); }
}

/* ── How It Works staggered reveal ── */
.exl__hiw-step {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.exl__hiw-line {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.exl__how-it-works.exl--visible .exl__hiw-step:nth-child(1) { transition-delay: 0.05s; }
.exl__how-it-works.exl--visible .exl__hiw-step:nth-child(3) { transition-delay: 0.15s; }
.exl__how-it-works.exl--visible .exl__hiw-step:nth-child(5) { transition-delay: 0.25s; }
.exl__how-it-works.exl--visible .exl__hiw-step,
.exl__how-it-works.exl--visible .exl__hiw-line {
  opacity: 1;
  transform: translateY(0);
}

/* ── How It Works number glow ── */
.exl__hiw-number {
  box-shadow: 0 2px 12px rgba(254, 32, 176, 0.25);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.exl__hiw-step:hover .exl__hiw-number {
  box-shadow: 0 4px 20px rgba(254, 32, 176, 0.4);
  transform: scale(1.08);
}

/* ── Quote section subtle background ── */
.exl__quote {
  background: linear-gradient(180deg, transparent 0%, rgba(254, 32, 176, 0.02) 50%, transparent 100%);
}

/* ── Social proof dot with actual glow ── */
.exl__social-proof-dot {
  box-shadow: 0 0 8px rgba(92, 219, 149, 0.5);
}

/* ── Powered footer subtle animation ── */
.exl__powered-logo {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.exl__powered-logo:hover {
  transform: scale(1.15) rotate(5deg);
}

/* ── Gradient dividers upgrade (wider, more vivid) ── */
.exl__quote::before {
  width: 80px;
  background: linear-gradient(90deg, transparent, rgba(254, 32, 176, 0.2), transparent);
  margin-bottom: 8px;
}

/* ── Package items staggered fade (mobile only — desktop always visible) ── */
.exl__package--mobile .exl__package-item {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.exl__package--mobile.exl--visible .exl__package-item { opacity: 1; transform: translateX(0); }
.exl__package--mobile.exl--visible .exl__package-item:nth-child(1) { transition-delay: 0.05s; }
.exl__package--mobile.exl--visible .exl__package-item:nth-child(2) { transition-delay: 0.1s; }
.exl__package--mobile.exl--visible .exl__package-item:nth-child(3) { transition-delay: 0.15s; }
.exl__package--mobile.exl--visible .exl__package-item:nth-child(4) { transition-delay: 0.2s; }

/* ── END EXL ── */

/* ── FULL-BLEED HERO ── */
/* ── SWEEP DETAIL - HERO ── */
.sdp__hero {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 520px;
  max-height: 850px;
  overflow: hidden;
}

.sdp__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.sdp__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.5) 35%,
    rgba(0,0,0,0.1) 65%,
    transparent 100%
  );
}

.sdp__hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3xl) var(--space-3xl) var(--space-2xl);
  max-width: 850px;
}

.sdp__hero-badges {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.sdp__hero-badge {
  display: inline-block;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 30px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.sdp__hero-badge--cause { background: rgba(255,255,255,0.2); }

.sdp__hero-badge--timer {
  background: rgba(255,59,48,0.75);
  animation: urgentPulse 2s ease infinite;
}

.sdp__hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}

.sdp__hero-sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-sm);
}

.sdp__hero-sub strong { color: #fff; }

.sdp__hero-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.sdp__hero-stat {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

.sdp__hero-stat strong {
  color: #fff;
  font-weight: 700;
}

.sdp__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.sdp__hero-links {
  width: 100%;
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.sdp__hero-link {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.15s;
}

.sdp__hero-link:hover {
  color: rgba(255,255,255,0.8);
  text-decoration: underline;
}

.sdp__hero-cta {
  padding: 16px 44px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.sdp__hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.sdp__hero-save {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s;
}

.sdp__hero-save:hover { background: rgba(255,255,255,0.25); }

/* ── IMPACT TICKER ── */
.sdp__ticker {
  background: var(--text-primary);
  color: #fff;
  padding: var(--space-xl) var(--space-xl);
  width: 100%;
}

.sdp__ticker-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  max-width: 700px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.sdp__ticker-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sdp__ticker-num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 900;
  color: #fff;
}

.sdp__ticker-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
}

.sdp__ticker-stat--urgent .sdp__ticker-num { color: #ff3b30; }

.sdp__ticker-divider {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.15);
}

.sdp__ticker-progress {
  max-width: 700px;
  margin: var(--space-md) auto 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.sdp__ticker-progress-bar {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  transition: width 1.5s ease;
}

.sdp__ticker-goal {
  max-width: 700px;
  margin: var(--space-xs) auto 0;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

/* ── PACKAGE - EDITORIAL ── */
.sdp__pkg {
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid var(--border);
}

.sdp__pkg-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.sdp__pkg-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.sdp__pkg-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sdp__pkg-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border);
}

.sdp__pkg-item:last-child { border-bottom: none; }

.sdp__pkg-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--bg-tertiary);
  flex-shrink: 0;
  width: 40px;
}

.sdp__pkg-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.sdp__pkg-text {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.sdp__pkg-arv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-secondary);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.sdp__pkg-arv strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--text-primary);
}

/* ── STORY / CAUSE ── */
.sdp__story {
  padding: var(--space-3xl) var(--space-xl);
  background: var(--bg-secondary);
  width: 100%;
}

.sdp__story-inner {
  max-width: 680px;
  margin: 0 auto;
}

.sdp__story-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

/* Big hero quote - the emotional anchor */
.sdp__story-quote--hero {
  margin: 0 0 var(--space-2xl);
  padding: 0;
  border: none;
  position: relative;
}

.sdp__story-quote--hero p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-style: normal;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0;
}

.sdp__story-quote--hero cite {
  display: block;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Cause / Org showcase */
.sdp__story-cause {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  margin-top: var(--space-xl);
}

.sdp__story-cause-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 16px;
  flex-shrink: 0;
  filter: brightness(0) invert(1) drop-shadow(0 4px 24px rgba(0,0,0,0.3));
}

.sdp__story-cause-info {
  flex: 1;
}

.sdp__story-cause-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}

.sdp__story-cause-mission {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 640px) {
  .sdp__story-cause {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
  }
  .sdp__story-cause-logo { width: 80px; height: 80px; }
}

/* Legacy fallback for non-hero quotes */
.sdp__story-quote {
  margin: var(--space-xl) 0;
  padding: 0;
  border: none;
  position: relative;
}

.sdp__story-quote p {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.sdp__story-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── GALLERY ── */
.sdp__gallery {
  padding: var(--space-3xl) 0;
}

.sdp__gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.sdp__gallery-item {
  overflow: hidden;
  aspect-ratio: 16/10;
}

.sdp__gallery-item--hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  aspect-ratio: auto;
}

.sdp__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.sdp__gallery-item:hover img {
  transform: scale(1.04);
}

/* ── ENTER SECTION ── */
.sdp__enter {
  background: var(--text-primary);
  color: #fff;
  padding: var(--space-4xl) var(--space-xl);
  width: 100%;
}

.sdp__enter-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.sdp__enter-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-sm);
}

.sdp__enter-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #fff;
}

.sdp__enter-sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-xs);
  line-height: 1.5;
}

.sdp__enter-sub strong { color: #fff; }

.sdp__enter-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin: var(--space-2xl) 0;
}

.sdp__amount {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 10px 14px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.sdp__amount-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #fff;
  color: #000;
  border-radius: 2px;
  white-space: nowrap;
}

.sdp__amount-price {
  font-size: var(--text-xl);
  font-weight: 700;
}

.sdp__amount-entries {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.sdp__amount:hover { border-color: rgba(255,255,255,0.5); }

.sdp__amount--active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.sdp__amount--active .sdp__amount-entries {
  opacity: 0.5;
  color: #000;
}

.sdp__amount--active .sdp__amount-tag {
  background: #000;
  color: #fff;
}

.sdp__enter-cta {
  width: 100%;
  padding: 18px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 30px;
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.sdp__enter-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.sdp__enter-fine {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  margin-top: var(--space-md);
}

/* ── HOW IT WORKS - STEPS ── */
.sdp__steps {
  padding: var(--space-3xl) 0;
}

.sdp__steps-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
}

.sdp__steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.sdp__step {
  padding: var(--space-xl) 0;
  border-top: 2px solid var(--text-primary);
}

.sdp__step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--bg-tertiary);
  line-height: 1;
  margin-bottom: var(--space-md);
}

.sdp__step-heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.sdp__step-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── DETAILS ACCORDION ── */
/* ═══════════════════════════════════════
   FINE PRINT SECTION
   ═══════════════════════════════════════ */
.sdp__fine-print {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border);
}

.sdp__fp-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.15s;
}

.sdp__fp-toggle:hover {
  color: var(--text-primary);
}

.sdp__fp-toggle-icon {
  transition: transform 0.25s ease;
}

.sdp__fp-toggle[aria-expanded="true"] .sdp__fp-toggle-icon {
  transform: rotate(180deg);
}

.sdp__fp-body {
  padding: var(--space-lg) 0 var(--space-md);
}

.sdp__fp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.sdp__fp-item {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sdp__fp-label {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.sdp__fp-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
}

.sdp__fp-disclosure {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

.sdp__fp-disclosure p {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-sm);
}

.sdp__fp-links {
  margin-top: var(--space-sm);
}

.sdp__fp-links a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: var(--text-xs);
  transition: color 0.15s;
}

.sdp__fp-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.sdp__fp-about {
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.sdp__fp-about h4 {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-xs);
  font-weight: 600;
}

.sdp__fp-about p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.sdp__fp-carbon {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.04);
  font-style: italic;
}

@media (max-width: 640px) {
  .sdp__fp-grid { grid-template-columns: 1fr; }
}

/* ── RELATED ── */
.sdp__related {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--border);
}

.sdp__section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xl);
  color: var(--text-primary);
}

.sdp__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* ── STICKY BOTTOM CTA ── */
.sdp__sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: var(--space-md) var(--space-xl);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sdp__sticky--visible {
  transform: translateY(0);
}

.sdp__sticky-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sdp__sticky-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sdp__sticky-info strong {
  font-size: var(--text-base);
  font-weight: 700;
}

.sdp__sticky-info span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.sdp__sticky-cta {
  padding: 12px 32px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.sdp__sticky-cta:hover { background: #222; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sdp__hero { height: 65vh; min-height: 420px; }
  .sdp__hero-content { padding: var(--space-xl); }
  .sdp__hero-title { font-size: clamp(1.75rem, 7vw, 2.75rem); }
  .sdp__ticker-inner { gap: var(--space-lg); }
  .sdp__enter-amounts { grid-template-columns: repeat(2, 1fr); }
  .sdp__steps-grid { grid-template-columns: 1fr; }
  .sdp__gallery-grid { grid-template-columns: 1fr 1fr; }
  .sdp__gallery-item--hero { grid-column: 1 / -1; grid-row: auto; }
  .sdp__related-grid { grid-template-columns: 1fr; }
  .sdp__sticky-inner { padding: 0 var(--space-sm); }
}

@media (max-width: 480px) {
  .sdp__enter-amounts {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
}

/* ============================================
   DARK MODE OVERRIDE FOR PETITION SWEEPS
   Propeller.la campaign pages are always dark.
   When .page--dark is added, flip all theme vars.
   ============================================ */
.page--dark {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --bg-card: #141414;
  --bg-card-hover: #1c1c1c;
  --bg-elevated: #181818;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-tertiary: #666666;
  --text-muted: #444444;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(255, 255, 255, 0.2);
  background: #0a0a0a;
  color: #fff;
}

/* ============================================
   PETITION-FIRST SWEEPSTAKES FLOW (pf__)
   Landing (two action cards) → Petition OR Donate
   → Celebrate → Maximize (monthly upsell) → Video → Earn
   ============================================ */

/* ── STEP CONTAINERS ── */
.pf__step {
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

.pf__step--active {
  opacity: 1;
}

.pf__step-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}

.pf__step-inner--narrow {
  max-width: 520px;
}

/* ── SHARED ELEMENTS ── */
.pf__back {
  display: inline-block;
  padding: 8px 0;
  margin-bottom: var(--space-lg);
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.2s;
}
.pf__back:hover { color: #fff; }

.pf__badge {
  display: inline-block;
  padding: 4px 12px;
  background: #fff;
  color: #111;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 100px;
}

.pf__badge--entries {
  background: rgba(255,210,0,0.15);
  color: #FFD200;
}

.pf__badge--gold {
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
}

.pf__title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  color: #fff;
}

.pf__subtitle {
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-xl);
}

.pf__fine {
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  margin-top: var(--space-xl);
}
.pf__fine a {
  color: rgba(255,255,255,0.4);
  text-decoration: underline;
}

/* ── CTA BUTTONS ── */
.pf__cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 24px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.pf__cta--sign {
  background: #fff;
  color: #111;
}
.pf__cta--sign::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,210,0,0.3), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.pf__cta--sign:hover::before { opacity: 1; }

.pf__cta--donate {
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
}

.pf__cta--max {
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
}

.pf__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,255,255,0.15);
}

.pf__cta-main {
  font-size: var(--text-lg);
  font-weight: 900;
}

.pf__cta-sub {
  font-size: var(--text-xs);
  color: rgba(0,0,0,0.5);
  font-weight: 600;
}

.pf__skip {
  display: block;
  margin: var(--space-lg) auto 0;
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.2s;
  text-align: center;
}
.pf__skip:hover { color: rgba(255,255,255,0.6); }

/* ═══════════════════════════════════════
   LANDING — Two Action Cards
   ═══════════════════════════════════════ */
.pf__landing-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}

.pf__landing-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.pf__landing-title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.pf__landing-sub {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.55);
}

/* ── Two Cards Grid ── */
.pf__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.pf__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.3s, box-shadow 0.3s, background 0.3s;
  color: #fff;
  overflow: hidden;
}

.pf__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

.pf__card--petition::before {
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0.5));
}

.pf__card--donate::before {
  background: linear-gradient(90deg, #FFD200, #ff9500);
}

.pf__card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.07);
}

.pf__card:hover::before {
  opacity: 1;
}

/* Card image section */
.pf__card-img {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.pf__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pf__card:hover .pf__card-img img {
  transform: scale(1.05);
}
.pf__card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}
.pf__card-org {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Card body */
.pf__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  flex: 1;
}

.pf__card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.9);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 100px;
  z-index: 2;
}

.pf__card-badge--gold {
  background: linear-gradient(135deg, rgba(255,210,0,0.3), rgba(255,149,0,0.3));
  backdrop-filter: blur(8px);
  color: #FFD200;
}

.pf__card-title {
  font-size: var(--text-lg);
  font-weight: 800;
  margin-bottom: var(--space-xs);
  color: #fff;
}

.pf__card-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}

.pf__card-entries {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.pf__card-entries-num {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  color: #FFD200;
}

.pf__card-entries-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}

.pf__card-cta {
  font-size: var(--text-md);
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
  margin-top: auto;
}

.pf__card:hover .pf__card-cta {
  color: #fff;
}

/* ── Live ticker ── */
.pf__landing-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.pf__live-dot {
  width: 8px;
  height: 8px;
  background: #4cd964;
  border-radius: 50%;
  animation: pfLivePulse 2s ease infinite;
  flex-shrink: 0;
}

@keyframes pfLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76,217,100,0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(76,217,100,0); }
}

.pf__live-text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  transition: opacity 0.3s;
}

/* ═══════════════════════════════════════
   AMOE DISCLOSURE LINK (above cards)
   ═══════════════════════════════════════ */
.pf__amoe-disclosure {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.pf__amoe-disclosure-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.5;
}

.pf__amoe-disclosure-link:hover {
  color: rgba(255,255,255,0.85);
}

.pf__amoe-disclosure-link span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════
   AMOE STEP — Clean Free Entry Form
   ═══════════════════════════════════════ */
.pf__amoe-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.pf__amoe-badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-md);
}

.pf__amoe-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.pf__amoe-sub {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto;
}

/* ── AMOE Form ── */
.pf__amoe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.pf__amoe-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.pf__amoe-row--addr {
  grid-template-columns: 2fr 80px 120px;
}

.pf__amoe-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf__amoe-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
}

.pf__amoe-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-size: var(--text-base);
  font-family: var(--font-body);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.pf__amoe-input::placeholder {
  color: rgba(255,255,255,0.25);
}

.pf__amoe-input:focus {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
}

.pf__amoe-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-sm) 0;
}

.pf__amoe-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #FFD200;
  cursor: pointer;
}

.pf__amoe-checkbox span {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.pf__amoe-submit {
  width: 100%;
  padding: 16px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: var(--space-sm);
}

.pf__amoe-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.15);
}

.pf__amoe-submit:active {
  transform: translateY(0);
}

.pf__amoe-legal {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto;
}

.pf__amoe-legal a {
  color: rgba(255,255,255,0.5);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .pf__amoe-row {
    grid-template-columns: 1fr;
  }
  .pf__amoe-row--addr {
    grid-template-columns: 1fr 1fr;
  }
  .pf__amoe-field--city {
    grid-column: 1 / -1;
  }
}

/* ═══════════════════════════════════════
   CAUSE-FORWARD MESSAGE (Earn step)
   ═══════════════════════════════════════ */
.pf__cause-forward {
  margin-bottom: var(--space-xl);
}

.pf__cause-forward-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(255,210,0,0.04);
  border: 1px solid rgba(255,210,0,0.12);
  border-radius: 16px;
}

.pf__cause-forward-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.pf__cause-forward-text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0;
}

.pf__cause-forward-text strong {
  color: rgba(255,255,255,0.9);
}

@media (max-width: 640px) {
  .pf__cause-forward-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
  }
}

/* ═══════════════════════════════════════
   PETITION STEP
   ═══════════════════════════════════════ */
.pf__pet-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pf__pet-progress {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.pf__pet-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #FFD200, #ff9500);
  border-radius: 99px;
  transition: width 1s ease;
}

.pf__pet-stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-xl);
}
.pf__pet-stats strong { color: #fff; }

/* ── Form ── */
.pf__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.pf__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.pf__input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-size: var(--text-md);
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
}

.pf__input::placeholder {
  color: rgba(255,255,255,0.55);
}

.pf__input:focus {
  outline: none;
  border-color: #FFD200;
  background: rgba(255,210,0,0.06);
}

/* ═══════════════════════════════════════
   DONATE STEP
   ═══════════════════════════════════════ */
.pf__don-header {
  margin-bottom: var(--space-md);
}

.pf__don-toggle {
  display: flex;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: var(--space-xl);
}

.pf__don-toggle-btn {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  border-radius: 10px;
  color: rgba(255,255,255,0.5);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pf__don-toggle-btn--active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.pf__don-toggle-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  font-size: 9px;
  font-weight: 900;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.pf__don-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.pf__don-amt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-lg) var(--space-sm);
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.pf__don-amt:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

.pf__don-amt--selected {
  border-color: #FFD200;
  background: rgba(255,210,0,0.08);
}

.pf__don-amt-price {
  font-size: var(--text-xl);
  font-weight: 900;
}

.pf__don-amt-entries {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.pf__don-amt--selected .pf__don-amt-entries {
  color: #FFD200;
}

.pf__don-impact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255,210,0,0.06);
  border: 1px solid rgba(255,210,0,0.15);
  border-radius: 12px;
  margin-bottom: var(--space-xl);
}

.pf__don-impact-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

.pf__don-impact-value {
  font-size: var(--text-md);
  font-weight: 800;
  color: #FFD200;
}

.pf__don-secure {
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  margin-top: var(--space-md);
}

/* ═══════════════════════════════════════
   CELEBRATION + MAXIMIZE (Monthly Upsell)
   ═══════════════════════════════════════ */
.pf__maximize {
  background: linear-gradient(180deg, rgba(255,210,0,0.04) 0%, transparent 50%);
  min-height: 100vh;
  min-height: 100dvh;
}

.pf__celeb {
  text-align: center;
  margin-bottom: var(--space-2xl);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pf__celeb--in {
  opacity: 1;
  transform: scale(1);
}

.pf__celeb-icon {
  font-size: 3.5rem;
  margin-bottom: var(--space-sm);
  animation: pfBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pfBounceIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.pf__celeb-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.pf__celeb-entries {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(76,217,100,0.15);
  color: #4cd964;
  font-size: var(--text-md);
  font-weight: 800;
  border-radius: 100px;
}

/* ── Max Card ── */
.pf__max-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,210,0,0.2);
  border-radius: 20px;
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.pf__max-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFD200, #ff9500, #FFD200);
  background-size: 200% 100%;
  animation: pfShimmer 2s linear infinite;
}

@keyframes pfShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pf__max-badge-row {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.pf__max-badge {
  display: inline-block;
  padding: 6px 16px;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 100px;
  animation: pfPulse 2s ease infinite;
}

@keyframes pfPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,0,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(255,210,0,0); }
}

.pf__max-pitch {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.85);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.pf__max-pitch strong { color: #FFD200; }

.pf__max-also {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--space-xl);
}
.pf__max-also strong { color: #fff; }

/* ── Perks ── */
.pf__max-perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.pf__max-perk {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pf__max-perk-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.pf__max-perk-info {
  display: flex;
  flex-direction: column;
}

.pf__max-perk-info strong {
  font-size: var(--text-md);
  color: #fff;
}

.pf__max-perk-info span {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}

/* ── Social proof ── */
.pf__max-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}

.pf__max-avatars {
  display: flex;
}

.pf__max-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #111;
  margin-left: -8px;
}
.pf__max-avatars img:first-child { margin-left: 0; }

/* ═══════════════════════════════════════
   VIDEO
   ═══════════════════════════════════════ */
.pf__video {
  background: linear-gradient(180deg, rgba(0,35,102,0.1) 0%, transparent 60%);
}

.pf__vid-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.pf__vid-badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.pf__vid-title {
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.pf__vid-sub {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.5);
}

.pf__vid-embed {
  margin-bottom: var(--space-xl);
}

.pf__vid-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.pf__vid-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.pf__vid-player:hover .pf__vid-thumb {
  transform: scale(1.03);
}

.pf__vid-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.pf__vid-play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.pf__vid-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

/* ═══════════════════════════════════════
   EARN MORE ENTRIES
   ═══════════════════════════════════════ */
.pf__earn {
  background: linear-gradient(180deg, rgba(76,217,100,0.04) 0%, transparent 40%);
}

.pf__earn-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.pf__earn-counter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) var(--space-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  margin-bottom: var(--space-lg);
}

.pf__earn-counter-num {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  color: #FFD200;
  line-height: 1;
}

.pf__earn-counter-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ── Club mini card ── */
.pf__earn-club {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(255,210,0,0.08), rgba(255,149,0,0.08));
  border: 1px solid rgba(255,210,0,0.2);
  border-radius: 14px;
  margin-bottom: var(--space-lg);
}

.pf__earn-club--joined {
  background: rgba(76,217,100,0.08);
  border-color: rgba(76,217,100,0.2);
}

.pf__earn-club-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf__earn-club-badge {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 100px;
  width: fit-content;
}

.pf__earn-club-badge--joined {
  background: #4cd964;
}

.pf__earn-club-info strong {
  font-size: var(--text-md);
  color: #fff;
}

.pf__earn-club-info span {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
}

.pf__earn-club-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  border: none;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s;
  white-space: nowrap;
}
.pf__earn-club-btn:hover { transform: translateY(-1px); }

/* ── Other action card (petition or donate, whichever they didn't do) ── */
.pf__earn-other {
  margin-bottom: var(--space-lg);
}

.pf__earn-other-card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  gap: var(--space-md);
}

.pf__earn-other-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.pf__earn-other-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.pf__earn-other-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pf__earn-other-info strong {
  font-size: var(--text-md);
  font-weight: 700;
}

.pf__earn-other-info span {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}

.pf__earn-other-arrow {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.3);
}

/* ── Bonus actions ── */
.pf__earn-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pf__earn-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  color: #fff;
}

.pf__earn-action:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  transform: translateX(4px);
}

.pf__earn-action--done {
  opacity: 0.4;
  pointer-events: none;
  background: rgba(76,217,100,0.05);
  border-color: rgba(76,217,100,0.15);
}

.pf__earn-action-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pf__earn-action-icon { font-size: 1.25rem; }
.pf__earn-action-label { font-size: var(--text-md); font-weight: 600; }

.pf__earn-action-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pf__earn-action-entries {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #FFD200;
}

.pf__earn-action-arrow {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.3);
  transition: transform 0.2s;
}

.pf__earn-action:hover .pf__earn-action-arrow { transform: translateX(4px); }

.pf__earn-action--done .pf__earn-action-arrow { font-size: 0; }
.pf__earn-action--done .pf__earn-action-arrow::after { content: '✓'; font-size: var(--text-md); }

/* ── REDEEM POINTS FOR ENTRIES ── */
.pf__redeem {
  background: rgba(255,210,0,0.06);
  border: 1px solid rgba(255,210,0,0.15);
  border-radius: 16px;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pf__redeem-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.pf__redeem-icon { font-size: 1.5rem; }
.pf__redeem-info { display: flex; flex-direction: column; gap: 2px; }
.pf__redeem-info strong { font-size: var(--text-md); color: #fff; }
.pf__redeem-balance { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.pf__redeem-balance strong { color: #FFD200; }

.pf__redeem-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.pf__redeem-minus,
.pf__redeem-plus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.pf__redeem-minus:hover,
.pf__redeem-plus:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
.pf__redeem-minus:disabled { opacity: 0.3; pointer-events: none; }
.pf__redeem-qty { text-align: center; }
.pf__redeem-qty-num { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; color: #FFD200; display: block; }
.pf__redeem-qty-label { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.pf__redeem-cost {
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-md);
}
.pf__redeem-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  font-weight: 800;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.pf__redeem-btn:hover { transform: translateY(-1px); }
.pf__redeem-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ── INVITE A FRIEND ── */
.pf__invite {
  background: rgba(100,210,255,0.06);
  border: 1px solid rgba(100,210,255,0.15);
  border-radius: 16px;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pf__invite-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.pf__invite-icon { font-size: 1.5rem; }
.pf__invite-info { display: flex; flex-direction: column; gap: 2px; }
.pf__invite-info strong { font-size: var(--text-md); color: #fff; }
.pf__invite-info span { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.pf__invite-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.pf__invite-member { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pf__invite-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
}
.pf__invite-avatar--you { background: linear-gradient(135deg, #FFD200, #ff9500); color: #111; }
.pf__invite-avatar--friend { background: rgba(255,255,255,0.1); border: 2px dashed rgba(255,255,255,0.3); color: rgba(255,255,255,0.4); }
.pf__invite-avatar--active { background: linear-gradient(135deg, #4cd964, #34c759); color: #fff; border: none; }
.pf__invite-plus { font-size: 1.25rem; font-weight: 700; color: rgba(255,255,255,0.3); }
.pf__invite-entries { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.pf__invite-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.pf__invite-desc strong { color: #fff; }
.pf__invite-actions { display: flex; gap: var(--space-sm); }
.pf__invite-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pf__invite-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.pf__invite-btn--text { background: rgba(76,217,100,0.1); border-color: rgba(76,217,100,0.25); }
.pf__invite-btn--text:hover { background: rgba(76,217,100,0.2); }
.pf__invite-copied {
  text-align: center;
  font-size: var(--text-sm);
  color: #4cd964;
  padding: var(--space-sm) 0;
}
.pf__invite-joined-badge {
  text-align: center;
  display: inline-block;
  padding: 4px 16px;
  border-radius: 99px;
  background: rgba(76,217,100,0.15);
  color: #4cd964;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
  width: 100%;
}
.pf__invite-combined {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-md);
  background: rgba(76,217,100,0.08);
  border-radius: 12px;
  margin-bottom: var(--space-sm);
}
.pf__invite-combined-label { font-size: var(--text-xs); color: rgba(255,255,255,0.5); }
.pf__invite-combined-num { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; color: #4cd964; }
.pf__invite-joined-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  text-align: center;
  line-height: 1.5;
}
.pf__invite-joined-sub strong { color: #fff; }

/* ── DISCOVER MODAL ── */
.pf__discover-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pf__discover-overlay--active {
  opacity: 1;
  pointer-events: auto;
}
.pf__discover-overlay--active .pf__discover-modal {
  transform: translateY(0);
}
.pf__discover-modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  background: #111;
  border-radius: 24px 24px 0 0;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.pf__discover-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pf__discover-close:hover { background: rgba(255,255,255,0.2); }
.pf__discover-scroll {
  overflow-y: auto;
  max-height: 90vh;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
}
.pf__discover-hero { text-align: center; margin-bottom: var(--space-2xl); }
.pf__discover-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 99px;
  background: rgba(255,210,0,0.15);
  color: #FFD200;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}
.pf__discover-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-xs);
}
.pf__discover-subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.pf__discover-section {
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(12px);
  animation: discoverFadeIn 0.5s ease forwards;
}
@keyframes discoverFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
.pf__discover-heading {
  font-size: var(--text-md);
  font-weight: 800;
  color: #FFD200;
  margin-bottom: var(--space-xs);
}
.pf__discover-text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}
.pf__discover-cta-wrap {
  padding: var(--space-lg) 0 var(--space-md);
  position: sticky;
  bottom: 0;
  background: linear-gradient(transparent, #111 30%);
}

/* ── PETITION HERO VARIANT ── */
.sdp__hero--petition .sdp__hero-cta--petition {
  background: #fff;
  color: #111;
  font-weight: 800;
  font-size: var(--text-md);
  padding: 16px 32px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.sdp__hero--petition .sdp__hero-cta--petition:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,255,255,0.2);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .sdp__hero--petition { height: 45vh; min-height: 280px; }
  .pf__cards { grid-template-columns: 1fr; gap: var(--space-md); }
  .pf__card-img { height: 120px; }
  .pf__landing-inner { padding: var(--space-xl) var(--space-md); }
  .pf__landing-header { margin-bottom: var(--space-md); }
  .pf__landing-title { font-size: var(--text-lg); }
  .pf__step-inner { padding: var(--space-2xl) var(--space-md); }
  .pf__don-amounts { grid-template-columns: repeat(2, 1fr); }
  .pf__form-row { grid-template-columns: 1fr; }
  .pf__earn-club { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .pf__invite-actions { flex-direction: column; }
  .pf__redeem { padding: var(--space-md); }
}

.pet-upsell__social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}

.pet-upsell__avatars {
  display: flex;
}

.pet-upsell__avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #111;
  margin-left: -8px;
}

.pet-upsell__avatars img:first-child {
  margin-left: 0;
}

.pet-upsell__skip {
  display: block;
  margin: var(--space-lg) auto 0;
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.2s;
  text-align: center;
}

.pet-upsell__skip:hover {
  color: rgba(255,255,255,0.6);
}

/* ── STEP 3: VIDEO ── */
.pet-step--video {
  background: linear-gradient(180deg, rgba(0,35,102,0.1) 0%, transparent 60%);
}

.pet-video {
  text-align: center;
}

.pet-video__badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.pet-video__title {
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.pet-video__subtitle {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-xl);
}

.pet-video__embed {
  position: relative;
  margin-bottom: var(--space-xl);
}

.pet-video__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.pet-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.pet-video__player:hover .pet-video__thumb {
  transform: scale(1.03);
}

.pet-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.pet-video__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.pet-video__cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.pet-video__join-cta {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  border: none;
  border-radius: 12px;
  font-size: var(--text-md);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.pet-video__join-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,210,0,0.3);
}

.pet-video__continue {
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.2s;
}

.pet-video__continue:hover {
  color: rgba(255,255,255,0.7);
}

/* ── STEP 4: EARN MORE ENTRIES ── */
.pet-step--earn {
  background: linear-gradient(180deg, rgba(76,217,100,0.04) 0%, transparent 40%);
}

.pet-earn__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.pet-earn__your-entries {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) var(--space-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  margin-bottom: var(--space-lg);
}

.pet-earn__your-entries-num {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  color: #FFD200;
  line-height: 1;
}

.pet-earn__your-entries-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.pet-earn__title {
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.pet-earn__subtitle {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.5);
}

/* ── Club card (persistent upsell) ── */
.pet-earn__club-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(255,210,0,0.08), rgba(255,149,0,0.08));
  border: 1px solid rgba(255,210,0,0.2);
  border-radius: 14px;
  margin-bottom: var(--space-xl);
}

.pet-earn__club-card--joined {
  background: rgba(76,217,100,0.08);
  border-color: rgba(76,217,100,0.2);
}

.pet-earn__club-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pet-earn__club-badge {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 100px;
  white-space: nowrap;
}

.pet-earn__club-badge--joined {
  background: #4cd964;
}

.pet-earn__club-info {
  display: flex;
  flex-direction: column;
}

.pet-earn__club-info strong {
  font-size: var(--text-md);
  color: #fff;
}

.pet-earn__club-info span {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
}

.pet-earn__club-cta {
  padding: 10px 20px;
  background: linear-gradient(135deg, #FFD200, #ff9500);
  color: #111;
  border: none;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s;
  white-space: nowrap;
}

.pet-earn__club-cta:hover {
  transform: translateY(-1px);
}

/* ── Bonus actions ── */
.pet-earn__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
}

.pet-earn__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  color: #fff;
}

.pet-earn__action:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  transform: translateX(4px);
}

.pet-earn__action--done {
  opacity: 0.4;
  pointer-events: none;
  background: rgba(76,217,100,0.05);
  border-color: rgba(76,217,100,0.15);
}

.pet-earn__action--done .pet-earn__action-arrow::after {
  content: '✓';
}

.pet-earn__action--done .pet-earn__action-arrow {
  font-size: 0;
}

.pet-earn__action-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pet-earn__action-icon {
  font-size: 1.25rem;
}

.pet-earn__action-label {
  font-size: var(--text-md);
  font-weight: 600;
}

.pet-earn__action-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pet-earn__action-entries {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #FFD200;
}

.pet-earn__action-arrow {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.3);
  transition: transform 0.2s;
}

.pet-earn__action:hover .pet-earn__action-arrow {
  transform: translateX(4px);
}

/* ── Donate section ── */
.pet-earn__donate {
  text-align: center;
  padding: var(--space-xl);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
}

.pet-earn__donate-title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.pet-earn__donate-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
}

.pet-earn__donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.pet-earn__donate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.pet-earn__donate-btn span {
  font-size: var(--text-lg);
  font-weight: 800;
}

.pet-earn__donate-btn small {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.pet-earn__donate-btn:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

.pet-earn__donate-btn--popular {
  border-color: rgba(255,210,0,0.3);
  background: rgba(255,210,0,0.06);
}

.pet-earn__donate-btn--popular:hover {
  border-color: rgba(255,210,0,0.5);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .pet-step__inner { padding: var(--space-2xl) var(--space-md); }
  .pet-upsell__comparison { flex-direction: column; gap: var(--space-md); padding: var(--space-md); }
  .pet-upsell__compare-vs { display: none; }
  .pet-upsell__compare-col { flex-direction: row; gap: var(--space-sm); }
  .pet-upsell__compare-entries { font-size: 1.5rem; }
  .pet-earn__club-card { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .pet-earn__donate-amounts { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
}

/* ============================================
   REWARDS PAGE - NIKE RUNNING STYLE
   ============================================ */

/* Hero banner - full-width featured image */
.rewards-hero-banner {
  width: 100%;
  overflow: hidden;
}

.rewards-hero-banner__img {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.rewards-hero-banner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rewards-hero-banner__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl) var(--space-2xl);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
}

.rewards-hero-banner__tag {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.rewards-hero-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-top: var(--space-xs);
}

.rewards-hero-banner__sub {
  font-size: var(--text-base);
  margin-top: var(--space-xs);
  opacity: 0.85;
}

.rewards-hero-banner__cta {
  margin-top: var(--space-md);
  padding: 10px 28px;
  background: #fff;
  color: #111;
  border: none;
  border-radius: 30px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.rewards-hero-banner__cta:hover {
  opacity: 0.85;
}

/* Top bar - title + balance */
.rewards-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border);
}

.rewards-topbar__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Main layout - sidebar + grid */
.rewards-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-2xl);
  padding: var(--space-xl) 0 var(--space-3xl);
}

/* Sidebar */
.rewards-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

.rewards-sidebar__title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.rewards-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rewards-sidebar__item {
  padding: 8px 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s;
  border-left: 2px solid transparent;
  padding-left: 12px;
}

.rewards-sidebar__item:hover {
  color: var(--text-primary);
}

.rewards-sidebar__item--active {
  color: var(--text-primary);
  font-weight: 600;
  border-left-color: var(--text-primary);
}

/* Content area */
.rewards-content__count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.rewards-main {
  padding: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .rewards-layout {
    grid-template-columns: 1fr;
  }
  .rewards-sidebar {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .rewards-sidebar__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .rewards-sidebar__item {
    border-left: none;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 30px;
    font-size: var(--text-sm);
  }
  .rewards-sidebar__item--active {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: #fff;
  }
  .rewards-hero-banner__img {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================
   ACTIONS PAGE
   ============================================ */
.actions-hero {
  padding: var(--space-3xl) 0 var(--space-xl);
  text-align: center;
}

.actions-feed {
  padding: 0 0 var(--space-3xl);
}

/* ============================================
   IMPACT PAGE
   ============================================ */
.impact-hero {
  padding: var(--space-3xl) 0 var(--space-xl);
  text-align: center;
}

.impact-stats {
  padding: 0 0 var(--space-xl);
}

.cause-breakdown {
  padding: var(--space-2xl) 0;
}

.leaderboard {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

/* ============================================
   PREMIER PAGE - Value Prop Sales Page
   ============================================ */

/* Hero - dark */
.pp-hero {
  background: #111;
  color: #fff;
  padding: var(--space-4xl) 0 var(--space-3xl);
  text-align: center;
}
.pp-hero__badge { margin-bottom: var(--space-lg); }
.pp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
}
.pp-hero__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.6);
  max-width: 620px;
  margin: 0 auto var(--space-lg);
  line-height: 1.6;
}
.pp-hero__price {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-xl);
}
.pp-hero__price strong {
  color: #fff;
}

/* Section title - shared */
.pp-section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* Perks grid */
.pp-perks {
  padding: var(--space-3xl) 0;
}
.pp-perks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}
.pp-perk {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.pp-perk:hover {
  border-color: rgba(238,44,103,0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(238,44,103,0.08);
}
.pp-perk__icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(238,44,103,0.15), rgba(248,32,178,0.1));
  border: 1px solid rgba(238,44,103,0.2);
  border-radius: 14px;
}
.pp-perk__icon-wrap svg {
  width: 26px;
  height: 26px;
  fill: #ee2c67;
}
.pp-perk__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--accent);
}
.pp-perk__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.pp-perk__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Comparison table - dark mode */
.pp-compare {
  padding: var(--space-3xl) 0;
  background: #111;
}
.pp-compare .pp-section-title {
  color: #fff;
}
.pp-compare__table {
  max-width: 700px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.15);
}
.pp-compare__header {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pp-compare__col-label {
  text-align: center;
}
.pp-compare__col-label--premier {
  color: #ee2c67;
}
.pp-compare__row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 2px solid rgba(255,255,255,0.1);
  align-items: center;
  font-size: var(--text-base);
}
.pp-compare__row:last-child {
  border-bottom: none;
}
.pp-compare__feature {
  color: #fff;
  font-weight: 500;
}
.pp-compare__check {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  font-weight: 600;
}
.pp-compare__check--premier {
  color: #ee2c67;
  font-weight: 700;
}
.pp-compare__check--no {
  color: rgba(255,255,255,0.25);
  opacity: 0.4;
}

/* Steps */
.pp-steps {
  padding: var(--space-3xl) 0;
}
.pp-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}
.pp-step {
  text-align: center;
  padding: var(--space-lg);
}
.pp-step__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  margin-bottom: var(--space-md);
}
.pp-step__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.pp-step__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Social proof stats */
.pp-proof {
  padding: var(--space-3xl) 0;
  background: #111;
  color: #fff;
}
.pp-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}
.pp-proof__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.pp-proof__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Final CTA */
.pp-final {
  padding: var(--space-3xl) 0 var(--space-4xl);
  text-align: center;
}
.pp-final__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}
.pp-final__sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Premier page responsive */
@media (max-width: 768px) {
  .pp-perks__grid { grid-template-columns: repeat(2, 1fr); }
  .pp-steps__grid { grid-template-columns: 1fr; max-width: 400px; }
  .pp-proof__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pp-perks__grid { grid-template-columns: 1fr; }
  .pp-compare__header,
  .pp-compare__row { grid-template-columns: 1fr 70px 70px; padding-left: var(--space-md); padding-right: var(--space-md); }
}

/* ============================================
   CLUBS LIST PAGE
   ============================================ */
/* ── Featured Club Hero ── */
.clubs-featured {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  background: #111;
}

.clubs-featured__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.clubs-featured__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-2xl);
  color: #fff;
  position: relative;
  z-index: 2;
}

.clubs-featured__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.clubs-featured__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cdb95;
  animation: clubPulse 2s ease-in-out infinite;
}

@keyframes clubPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.clubs-featured__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

.clubs-featured__desc {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: var(--space-xl);
}

.clubs-featured__meta {
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.clubs-featured__stat {
  display: flex;
  flex-direction: column;
}

.clubs-featured__stat-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
}

.clubs-featured__stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}

.clubs-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 32px;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  width: fit-content;
}

.clubs-featured__cta:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

.clubs-featured__cta svg {
  width: 16px;
  height: 16px;
}

.clubs-featured__visual {
  position: relative;
  overflow: hidden;
}

.clubs-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.clubs-featured__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #111 0%, rgba(17,17,17,0.3) 40%, transparent 100%);
}

.clubs-featured__joined-badge {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.clubs-featured__joined-badge svg {
  width: 14px;
  height: 14px;
  color: #5cdb95;
}

/* Featured artist badge */
.clubs-featured__artist {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-lg);
}

.clubs-featured__artist-label {
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

@media (max-width: 900px) {
  .clubs-featured__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .clubs-featured__visual {
    height: 280px;
    order: -1;
  }
  .clubs-featured__img-overlay {
    background: linear-gradient(to top, #111 0%, rgba(17,17,17,0.3) 40%, transparent 100%);
  }
  .clubs-featured__content {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* ── Filter Bar ── */
.clubs-filter-bar {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(var(--preview-bar-height) + var(--nav-height));
  z-index: 20;
  background: #fff;
}

.clubs-filter-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.clubs-filter-bar__left {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.clubs-filter-bar__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.clubs-filter-bar__count {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.clubs-filter-bar__pills {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

.clubs-filter-bar__pills::-webkit-scrollbar { display: none; }

@media (max-width: 900px) {
  .clubs-filter-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.clubs-grid-section {
  padding: var(--space-xl) 0 var(--space-3xl);
}

/* club-grid--full styles handled in components.css */

/* ============================================
   SWEEPSTAKES LIST PAGE
   ============================================ */
.sweep-list-section {
  padding: var(--space-xl) 0 var(--space-3xl);
}

/* ── SWEEP LIST HEADER + FILTERS ── */
.sweep-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sweep-list-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.sweep-list-filters {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.sweep-filter {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.15s;
}

.sweep-filter:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.sweep-filter--active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

/* ── SWEEP LIST FEATURED HERO ── */
.slh {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  cursor: pointer;
}

.slh__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 6s ease;
}

.slh:hover .slh__img { transform: scale(1.03); }

.slh__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0.5) 35%,
    rgba(0,0,0,0.15) 65%,
    transparent 100%
  );
}

.slh__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3xl) var(--space-3xl) var(--space-2xl);
  max-width: 800px;
}

.slh__badges {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.slh__badge {
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 30px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.slh__badge--cause { background: rgba(255,255,255,0.2); }

.slh__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
}

.slh__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.7);
  margin-top: var(--space-xs);
}

.slh__stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.slh__stat {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}

.slh__stat strong { color: #fff; font-weight: 700; }

.slh__stat--urgent strong { color: #ff3b30; }

.slh__stat-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.2);
}

.slh__progress {
  margin-top: var(--space-md);
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  max-width: 300px;
}

.slh__progress-bar {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  transition: width 1.5s ease;
}

.slh__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.slh__cta {
  padding: 16px 40px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.slh__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.slh__arv {
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .slh { height: 80vh; min-height: 400px; }
  .slh__content { padding: var(--space-xl); }
  .slh__title { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  .sweep-list-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   PORTAL PAGE - Membership Conversion Layout
   Matches: design.propeller.la/campaigns/35046/portal-updated-new
   Colors: Orange #ff9c02, Pink #ff81b7, Teal #70c5b8
   ============================================ */
.page--portal {
  background: #0a0a0f;
  color: #e8e4f0;
  position: relative;
}

/* --- Section headings --- */
.portal-section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* --- Portal buttons --- */
.portal-btn {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 40px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
.portal-btn--gradient {
  background: linear-gradient(to right, #70c5b8, #ff81b7, #ff9c02);
  color: #000;
  font-weight: 800;
}
.portal-btn--gradient:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,156,2,0.3);
}
.portal-btn--lg {
  padding: 18px 48px;
  font-size: var(--text-base);
}

/* --- HERO --- */
.portal-hero {
  position: relative;
  text-align: center;
  padding: 80px var(--space-lg) 48px;
  overflow: hidden;
}
.portal-hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(112,197,184,0.08) 0%, transparent 60%),
              #0a0a0f;
}
.portal-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portal-hero__logo {
  width: min(240px, 70vw);
  height: auto;
  margin-bottom: var(--space-lg);
}
.portal-hero__tagline {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  background: linear-gradient(to right, #ff9c02, #ff81b7, #70c5b8);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-xl);
  white-space: normal;
  text-align: center;
}
.portal-hero__video-wrap {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-xl);
  border: 1px solid rgba(255,255,255,0.1);
}
.portal-hero__video {
  width: 100%;
  height: 100%;
}
.portal-hero__stats-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
  justify-content: center;
}
.portal-hero__community {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}
.portal-hero__community strong {
  color: #ff81b7;
  font-size: var(--text-lg);
}
.portal-hero__goal {
  display: flex;
  align-items: center;
  gap: 8px;
}
.portal-hero__goal-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.portal-hero__goal-number {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: #70c5b8;
}

/* --- TESTIMONIALS --- */
.portal-testimonials {
  padding: var(--space-3xl) 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.portal-testimonials__quote {
  font-size: var(--text-base);
  font-style: italic;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto var(--space-xl);
  min-height: 80px;
}
.portal-testimonials__carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}
.portal-testimonials__avatars {
  display: flex;
  gap: 12px;
  overflow: hidden;
  max-width: 400px;
}
.portal-testimonials__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.5;
}
.portal-testimonials__avatar.active {
  border-color: #ff81b7;
  opacity: 1;
  transform: scale(1.1);
}
.portal-testimonials__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portal-testimonials__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.portal-testimonials__btn:hover {
  background: rgba(255,255,255,0.12);
}

/* --- ACTIVITY FEED --- */
.portal-activity {
  overflow: hidden;
  padding: var(--space-md) 0;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.portal-activity__track {
  display: flex;
  gap: 48px;
  animation: portalActivityScroll 60s linear infinite;
  white-space: nowrap;
}
.portal-activity__item {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.portal-activity__item strong {
  color: #ff81b7;
  font-weight: 700;
}
@keyframes portalActivityScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- PERKS --- */
.portal-perks {
  padding: var(--space-4xl) 0;
}
.portal-perks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}
.portal-perks__card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: var(--space-2xl);
  text-align: center;
  transition: all 0.3s ease;
}
.portal-perks__card:hover {
  border-color: rgba(255,129,183,0.2);
  transform: translateY(-4px);
}
.portal-perks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--portal-purple, #b388ff);
}
.portal-perks__card h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-sm);
}
.portal-perks__card p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .portal-perks__grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* --- CTA INLINE --- */
.portal-cta-inline {
  text-align: center;
  padding: var(--space-xl) 0 var(--space-3xl);
}

/* --- REWARDS PREVIEW --- */
.portal-rewards-preview {
  padding: var(--space-3xl) 0;
}
.portal-rewards-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}
.portal-reward-preview-card {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s ease;
}
.portal-reward-preview-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,129,183,0.2);
}
.portal-reward-preview-card__img {
  aspect-ratio: 1;
  overflow: hidden;
}
.portal-reward-preview-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.portal-reward-preview-card:hover .portal-reward-preview-card__img img {
  transform: scale(1.05);
}
.portal-reward-preview-card__body {
  padding: var(--space-md);
}
.portal-reward-preview-card__name {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .portal-rewards-preview__grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* --- CAUSES --- */
.portal-causes {
  padding: var(--space-3xl) 0;
}
.portal-causes__tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.portal-causes__tab {
  padding: 10px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
}
.portal-causes__tab.active {
  background: linear-gradient(to right, #70c5b8, #ff81b7);
  color: #000;
  border-color: transparent;
  font-weight: 700;
}
.portal-causes__panel {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  min-height: 200px;
}
.portal-cause-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.portal-cause-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.portal-cause-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portal-cause-card__body {
  padding: var(--space-xl);
  text-align: center;
}
.portal-cause-card__body p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

/* --- EVENTS --- */
.portal-events {
  padding: var(--space-3xl) 0;
}
.portal-events__sub {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: var(--text-base);
  margin-top: calc(var(--space-xl) * -1);
  margin-bottom: var(--space-2xl);
}
.portal-events__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}
.portal-event-card {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  position: relative;
}
@media (max-width: 768px) {
  .portal-events__grid { grid-template-columns: repeat(2, 1fr); }
}
.portal-event-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.portal-event-card:hover img {
  transform: scale(1.05);
}

/* --- PARTNERS --- */
.portal-partners {
  padding: var(--space-3xl) 0;
  text-align: center;
}
.portal-partners__desc {
  max-width: 600px;
  margin: -16px auto var(--space-2xl);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.portal-partners__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl) var(--space-3xl);
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}
.portal-partners__grid img {
  max-width: 160px;
  max-height: 70px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.portal-partners__grid img:hover { opacity: 1; }

/* --- IMPACT --- */
.portal-impact {
  padding: var(--space-3xl) 0;
  text-align: center;
}
.portal-impact__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}
.portal-impact__stat { text-align: center; }
.portal-impact__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900;
  background: linear-gradient(to right, #70c5b8, #ff81b7);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}
.portal-impact__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.portal-impact__plus {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: var(--space-xl);
}
.portal-impact__plus h4 {
  font-family: var(--font-display);
  font-weight: 800;
  color: #ff9c02;
  margin-bottom: var(--space-md);
  font-size: var(--text-lg);
}
.portal-impact__plus ul {
  list-style: none;
  padding: 0;
}
.portal-impact__plus li {
  padding: 6px 0;
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.portal-impact__plus li:last-child { border: none; }
.portal-impact__plus li strong { color: #fff; }

/* --- LEADERBOARD --- */
.portal-leaderboard {
  padding: var(--space-3xl) 0;
}
.portal-leaderboard__list {
  max-width: 600px;
  margin: 0 auto;
}
.portal-leader {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px 16px;
  border-radius: 8px;
  transition: background 0.2s;
}
.portal-leader:hover {
  background: rgba(255,255,255,0.03);
}
.portal-leader__rank {
  width: 32px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: rgba(255,255,255,0.4);
  text-align: center;
  flex-shrink: 0;
}
.portal-leader:nth-child(1) .portal-leader__rank { color: #ffd700; }
.portal-leader:nth-child(2) .portal-leader__rank { color: #c0c0c0; }
.portal-leader:nth-child(3) .portal-leader__rank { color: #cd7f32; }
.portal-leader__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.portal-leader__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portal-leader__name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
}
.portal-leader__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: #70c5b8;
}

/* --- BOTTOM CTA --- */
.portal-bottom-cta {
  padding: var(--space-3xl) 0;
}
.portal-bottom-cta__inner {
  text-align: center;
  padding: var(--space-3xl) var(--space-2xl);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}
.portal-bottom-cta__text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}
.portal-bottom-cta__text span {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

/* --- FAQ --- */
.portal-faq {
  padding: var(--space-3xl) 0 var(--space-4xl);
}
.portal-faq__list {
  max-width: 700px;
  margin: 0 auto;
}
.portal-faq__item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.portal-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}
.portal-faq__q:hover { color: #fff; }
.portal-faq__arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
  color: rgba(255,255,255,0.3);
}
.portal-faq__item.open .portal-faq__arrow {
  transform: rotate(180deg);
}
.portal-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.portal-faq__item.open .portal-faq__a {
  max-height: 300px;
}
.portal-faq__a-inner {
  padding: 0 0 18px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* --- Portal footer override --- */
.page--portal ~ .footer,
.page--portal + .footer {
  background: #0a0a0f;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* --- Portal Responsive --- */
@media (max-width: 768px) {
  .portal-hero { padding-top: 60px; }
  .portal-hero__logo { width: 180px; }
  .portal-impact__stats { gap: var(--space-xl); }
  .portal-causes__tabs { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .portal-hero__video-wrap { border-radius: 8px; }
  .portal-hero__stats-row { flex-direction: column; gap: var(--space-md); }
  .portal-events__grid { grid-template-columns: repeat(2, 1fr); }
  .portal-hero__logo { width: 140px; }
  .portal-hero { padding: 40px 16px 32px; }
}
@media (max-width: 480px) {
  .portal-events__grid { grid-template-columns: 1fr; }
  .portal-causes__tab { padding: 8px 16px; font-size: 0.85rem; }
}

/* ============================================
   PROFILE PAGE
   ============================================ */
.profile-hero {
  padding: var(--space-3xl) 0 var(--space-xl);
  background: var(--bg-secondary);
}

.profile-content {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.42s; }
.reveal-stagger.visible > *:nth-child(9) { transition-delay: 0.48s; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   CONFETTI (enhanced with shapes)
   ============================================ */
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3000;
  animation: confettiFall 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  --drift: 0px;
}
.confetti-piece--circle { border-radius: 50%; }
.confetti-piece--strip { width: 3px !important; height: 14px !important; border-radius: 1px; }

/* Emoji confetti — floaty themed icons */
.confetti-emoji {
  position: fixed;
  pointer-events: none;
  z-index: 3100;
  line-height: 1;
  animation: confettiEmojiFall 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  --drift: 0px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100vh) translateX(var(--drift)) rotate(1080deg) scale(0.3); }
}

@keyframes confettiEmojiFall {
  0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
  20% { opacity: 1; transform: translateY(20vh) translateX(calc(var(--drift) * 0.3)) rotate(45deg) scale(1.1); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh) translateX(var(--drift)) rotate(360deg) scale(0.5); }
}

/* ============================================
   CELEBRATION SYSTEM - dopamine rush
   ============================================ */

/* Screen flash */
.celeb-flash {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 4000;
  pointer-events: none;
  animation: celebFlash 0.4s ease-out forwards;
}

@keyframes celebFlash {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* Particle burst */
.celeb-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3500;
  animation: celebBurst 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.celeb-particle--emoji {
  background: none !important;
  border-radius: 0;
  line-height: 1;
  animation: celebBurstEmoji 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes celebBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

@keyframes celebBurstEmoji {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  40% { opacity: 1; transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1.3) rotate(180deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(360deg); }
}

/* Points flyup (small level) */
.celeb-flyup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 6px;
  pointer-events: none;
  z-index: 4500;
  animation: celebFlyup 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.celeb-flyup__pts {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 900;
  color: var(--text-primary);
  text-shadow: 0 0 40px rgba(0,0,0,0.1);
}

.celeb-flyup__label {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@keyframes celebFlyup {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  40% { transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.9); }
}

/* Full celebration overlay */
.celeb-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
 -webkit-backdrop-filter: blur(0px);
  transition: background 0.3s, backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
  cursor: pointer;
}

.celeb-overlay--visible {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.celeb-overlay--out {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
 -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
}

.celeb-overlay--out .celeb-card {
  opacity: 0;
  transform: scale(0.8) translateY(30px);
}

/* Celebration card */
.celeb-card {
  position: relative;
  text-align: center;
  padding: 48px 56px;
  max-width: 400px;
  width: 90vw;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  animation: celebCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s, transform 0.3s;
}

@keyframes celebCardIn {
  0% { opacity: 0; transform: scale(0.5) translateY(40px); }
  60% { transform: scale(1.05) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.celeb-card__flash-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,44,103,0.15), transparent 70%);
  transform: translate(-50%, -50%);
  animation: celebRing 1s ease-out forwards;
  pointer-events: none;
}

@keyframes celebRing {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 600px; height: 600px; opacity: 0; }
}

.celeb-card__icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: celebIconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes celebIconBounce {
  0% { transform: scale(0) rotate(-15deg); }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Slot-machine digits */
.celeb-card__slots {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 16px;
}

.celeb-card__slot-prefix {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: #111;
}

.celeb-card__slot-digits {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 900;
  color: #111;
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color 0.2s;
  position: relative;
}

.celeb-card__slot-digits--done {
  animation: celebDigitsDone 0.3s ease-out;
}

@keyframes celebDigitsDone {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); color: #ee2c67; }
  100% { transform: scale(1); color: #111; }
}

.celeb-card__slot-suffix {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 0.05em;
}

/* Streak multiplier */
.celeb-card__streak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  animation: celebStreakIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

@keyframes celebStreakIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.celeb-card__streak-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 30px;
}

.celeb-card__streak-bonus {
  font-size: 14px;
  font-weight: 700;
  color: #ee2c67;
}

.celeb-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #111;
  margin-bottom: 4px;
}

.celeb-card__sub {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

/* XP bar */
.celeb-card__bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin: 16px 0 6px;
}

.celeb-card__bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #111 0%, #ee2c67 100%);
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.celeb-card__bar-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Big level - extra glow */
.celeb-overlay--big .celeb-card {
  box-shadow: 0 0 80px rgba(238, 44, 103, 0.2), 0 20px 60px rgba(0,0,0,0.15);
}

.celeb-overlay--big .celeb-card__slot-digits {
  font-size: 80px;
}

/* Card shake */
.celeb-shake {
  animation: celebShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes celebShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px) rotate(-1deg); }
  20% { transform: translateX(4px) rotate(1deg); }
  30% { transform: translateX(-3px) rotate(-0.5deg); }
  40% { transform: translateX(3px) rotate(0.5deg); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .celeb-card { padding: 36px 28px; }
  .celeb-card__slot-digits { font-size: 52px; }
  .celeb-overlay--big .celeb-card__slot-digits { font-size: 64px; }
  .celeb-flyup__pts { font-size: 56px; }
}

/* ============================================
   SWEEPSTAKES MEGA CELEBRATION
   ============================================ */

/* Extended flash for sweep */
.celeb-flash--sweep {
  animation: celebFlashSweep 0.5s ease-out forwards;
}

@keyframes celebFlashSweep {
  0% { opacity: 0.8; background: #fff; }
  30% { opacity: 0.5; background: #ee2c67; }
  100% { opacity: 0; }
}

/* Full-screen takeover */
.sweep-celeb {
  position: fixed;
  inset: 0;
  z-index: 6000;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

.sweep-celeb--visible { opacity: 1; }

.sweep-celeb--out {
  opacity: 0;
  transition: opacity 0.4s ease-in;
  pointer-events: none;
}

/* Background image + overlay */
.sweep-celeb__bg {
  position: absolute;
  inset: 0;
}

.sweep-celeb__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: blur(20px) brightness(0.4);
  transform: scale(1.1);
  animation: sweepBgZoom 5s ease-out forwards;
}

@keyframes sweepBgZoom {
  0% { transform: scale(1.3); filter: blur(30px) brightness(0.3); }
  100% { transform: scale(1.1); filter: blur(20px) brightness(0.4); }
}

.sweep-celeb__bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.85) 100%);
}

/* Content container */
.sweep-celeb__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Close button */
.sweep-celeb__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  border: none;
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, color 0.2s;
}

.sweep-celeb__close:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ── TICKET ── */
.sweep-celeb__ticket {
  position: absolute;
  width: 340px;
  max-width: 90vw;
  opacity: 0;
  transform: translateY(100vh) rotate(8deg);
  transition: none;
}

.sweep-celeb__ticket--in {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.sweep-celeb__ticket--out {
  opacity: 0;
  transform: translateY(-40px) scale(0.9);
  transition: transform 0.4s ease-in, opacity 0.3s ease-in;
}

.sweep-celeb__ticket-inner {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 120px rgba(238,44,103,0.15);
  animation: ticketGlow 2s ease-in-out infinite alternate;
}

@keyframes ticketGlow {
  0% { box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1), 0 0 80px rgba(238,44,103,0.1); }
  100% { box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1), 0 0 120px rgba(238,44,103,0.25); }
}

.sweep-celeb__ticket-top {
  padding: 28px 28px 20px;
  background: #111;
  color: #fff;
  text-align: center;
}

.sweep-celeb__ticket-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}

.sweep-celeb__ticket-artist {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Ticket divider with notches */
.sweep-celeb__ticket-divider {
  position: relative;
  height: 24px;
  background: #fff;
  display: flex;
  align-items: center;
}

.sweep-celeb__ticket-notch {
  position: absolute;
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.85);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.sweep-celeb__ticket-notch--left { left: -12px; }
.sweep-celeb__ticket-notch--right { right: -12px; }

.sweep-celeb__ticket-dashes {
  flex: 1;
  margin: 0 20px;
  border-top: 2px dashed #ddd;
}

/* Ticket bottom */
.sweep-celeb__ticket-bottom {
  padding: 20px 28px 28px;
  text-align: center;
  background: #fff;
}

.sweep-celeb__ticket-entries {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sweep-celeb__ticket-entries-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: #111;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sweep-celeb__ticket-entries-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
}

.sweep-celeb__ticket-donation {
  font-size: 13px;
  color: #999;
}

/* ── ENTRY COUNTER (phase 2) ── */
.sweep-celeb__counter {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: scale(0.5);
}

.sweep-celeb__counter--in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sweep-celeb__counter--shrink {
  transform: scale(0.7) translateY(-60px);
  opacity: 0.6;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.sweep-celeb__counter-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sweep-celeb__counter-ring--pulse {
  animation: sweepRingPulse 0.8s ease-out;
}

@keyframes sweepRingPulse {
  0% { width: 80px; height: 80px; border-color: rgba(238,44,103,0.8); opacity: 1; }
  100% { width: 300px; height: 300px; border-color: rgba(238,44,103,0); opacity: 0; }
}

.sweep-celeb__counter-num {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 60px rgba(238,44,103,0.4);
}

.sweep-celeb__counter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
}

/* ── IMPACT MESSAGE (phase 3) ── */
.sweep-celeb__impact {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  text-align: center;
  width: 90%;
  max-width: 400px;
}

.sweep-celeb__impact--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sweep-celeb__impact-icon {
  font-size: 32px;
  margin-bottom: 8px;
  animation: sweepHeartBeat 1s ease-in-out infinite;
}

@keyframes sweepHeartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
  60% { transform: scale(1); }
}

.sweep-celeb__impact-text {
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

.sweep-celeb__impact-text strong { color: #fff; }

.sweep-celeb__impact-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
  font-style: italic;
}

.sweep-celeb__premier-tease {
  margin-top: 16px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  animation: premier-tease-pulse 2s ease-in-out infinite;
}
.sweep-celeb__premier-tease strong {
  color: #fff;
}
@keyframes premier-tease-pulse {
  0%, 100% { border-color: rgba(255,255,255,0.15); }
  50% { border-color: rgba(238,44,103,0.5); }
}

/* ── Sweep celebration VARIANTS ── */

/* Flash variants */
.celeb-flash--gold { background: radial-gradient(circle, rgba(255,200,0,0.5), rgba(255,150,0,0.3), transparent 70%); }
.celeb-flash--fire { background: radial-gradient(circle, rgba(255,80,0,0.5), rgba(255,30,0,0.3), transparent 70%); }
.celeb-flash--electric { background: radial-gradient(circle, rgba(0,180,255,0.5), rgba(100,0,255,0.3), transparent 70%); }
.celeb-flash--legendary { background: radial-gradient(circle, rgba(255,215,0,0.6), rgba(255,0,150,0.3), transparent 70%); }

/* Variant 2: Gold border glow on ticket */
.sweep-celeb--v2 .sweep-celeb__ticket-inner { box-shadow: 0 0 40px rgba(255,200,0,0.3), 0 20px 60px rgba(0,0,0,0.5); }
.sweep-celeb--v2 .sweep-celeb__counter-num { text-shadow: 0 0 40px rgba(255,200,0,0.5); }

/* Variant 3: Fire theme */
.sweep-celeb--v3 .sweep-celeb__ticket-top { background: linear-gradient(135deg, #ff4500, #ff8c00); }
.sweep-celeb--v3 .sweep-celeb__ticket-inner { box-shadow: 0 0 50px rgba(255,69,0,0.4), 0 20px 60px rgba(0,0,0,0.5); }
.sweep-celeb--v3 .sweep-celeb__counter-num { text-shadow: 0 0 50px rgba(255,69,0,0.6); }

/* Variant 4: Electric blue */
.sweep-celeb--v4 .sweep-celeb__ticket-top { background: linear-gradient(135deg, #0066ff, #00ccff); }
.sweep-celeb--v4 .sweep-celeb__ticket-inner { box-shadow: 0 0 50px rgba(0,100,255,0.4), 0 20px 60px rgba(0,0,0,0.5); }
.sweep-celeb--v4 .sweep-celeb__counter-num { color: #00ccff; text-shadow: 0 0 60px rgba(0,200,255,0.6); }
.sweep-celeb--v4 .sweep-celeb__counter-ring--pulse { border-color: rgba(0,200,255,0.4) !important; }

/* Variant 5: Legendary rainbow */
.sweep-celeb--v5 .sweep-celeb__ticket-top { background: linear-gradient(135deg, #ff0080, #ff8c00, #00cc88, #0066ff, #8b00ff); background-size: 200% 100%; animation: rainbowShift 2s ease infinite; }
.sweep-celeb--v5 .sweep-celeb__ticket-inner { box-shadow: 0 0 60px rgba(255,0,128,0.4), 0 0 120px rgba(100,0,255,0.2), 0 20px 60px rgba(0,0,0,0.5); }
.sweep-celeb--v5 .sweep-celeb__counter-num { background: linear-gradient(135deg, #ff0080, #ff8c00, #00cc88, #0066ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 100%; animation: rainbowShift 2s ease infinite; filter: drop-shadow(0 0 30px rgba(255,0,128,0.5)); }
.sweep-celeb--v5 .sweep-celeb__counter-ring--pulse { border-color: rgba(255,0,128,0.3) !important; box-shadow: 0 0 60px rgba(255,0,128,0.2); }
.sweep-celeb--v5 .sweep-celeb__bg-img { animation: legendaryZoom 5s ease forwards !important; }

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes legendaryZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

/* ── Concert-themed flash variants (in-venue) ── */

/* Base concert flash: warm magenta strobe with stage-light cone */
.celeb-flash--concert {
  background: radial-gradient(ellipse 60% 80% at 50% 20%, rgba(238,44,103,0.7), rgba(180,20,80,0.3) 40%, transparent 70%);
  animation: concertFlash 0.5s ease-out forwards;
}

@keyframes concertFlash {
  0% { opacity: 0.9; }
  15% { opacity: 0.3; }
  30% { opacity: 0.8; }
  50% { opacity: 0.2; }
  100% { opacity: 0; }
}

/* Concert fire: warm orange/red stage wash */
.celeb-flash--concert-fire {
  background:
    radial-gradient(ellipse 50% 70% at 30% 10%, rgba(255,100,0,0.6), transparent 60%),
    radial-gradient(ellipse 50% 70% at 70% 10%, rgba(255,40,0,0.6), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,60,0,0.2), transparent 70%);
  animation: concertFlashFire 0.6s ease-out forwards;
}

@keyframes concertFlashFire {
  0% { opacity: 0.9; }
  10% { opacity: 0.4; }
  20% { opacity: 0.9; }
  35% { opacity: 0.3; }
  50% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* Concert electric: blue/purple laser sweep */
.celeb-flash--concert-electric {
  background:
    linear-gradient(135deg, rgba(0,100,255,0.5) 0%, transparent 30%),
    linear-gradient(-135deg, rgba(140,0,255,0.5) 0%, transparent 30%),
    linear-gradient(135deg, transparent 60%, rgba(0,200,255,0.3) 100%),
    radial-gradient(circle at 50% 30%, rgba(0,180,255,0.4), transparent 60%);
  animation: concertFlashElectric 0.6s ease-out forwards;
}

@keyframes concertFlashElectric {
  0% { opacity: 0.9; transform: scale(1); }
  12% { opacity: 0.3; }
  25% { opacity: 0.85; transform: scale(1.02); }
  40% { opacity: 0.2; }
  55% { opacity: 0.6; }
  100% { opacity: 0; transform: scale(1); }
}

/* Concert legendary: full-spectrum laser show */
.celeb-flash--concert-legendary {
  background:
    conic-gradient(from 0deg at 50% 30%, rgba(255,0,100,0.5), rgba(255,150,0,0.4), rgba(0,255,100,0.4), rgba(0,100,255,0.5), rgba(180,0,255,0.5), rgba(255,0,100,0.5));
  animation: concertFlashLegendary 0.7s ease-out forwards;
}

@keyframes concertFlashLegendary {
  0% { opacity: 0.9; transform: rotate(0deg) scale(1); }
  15% { opacity: 0.4; transform: rotate(10deg) scale(1.05); }
  30% { opacity: 0.85; transform: rotate(-5deg) scale(1.02); }
  45% { opacity: 0.3; transform: rotate(5deg); }
  60% { opacity: 0.6; transform: rotate(-2deg); }
  100% { opacity: 0; transform: rotate(0deg) scale(1); }
}

/* ── Concert overlay enhancements ── */

/* Laser beams overlay for in-venue celebrations */
.concert-lasers {
  position: fixed;
  inset: 0;
  z-index: 5999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: lasersFadeIn 0.3s ease forwards;
}

@keyframes lasersFadeIn {
  to { opacity: 1; }
}

.concert-lasers--out {
  animation: lasersFadeOut 0.5s ease forwards;
}

@keyframes lasersFadeOut {
  to { opacity: 0; }
}

.concert-laser {
  position: absolute;
  top: -5%;
  width: 3px;
  height: 120%;
  transform-origin: top center;
  opacity: 0.6;
  filter: blur(1px);
  animation: laserSweep var(--speed, 3s) ease-in-out infinite alternate;
}

.concert-laser:nth-child(1) { left: 15%; background: linear-gradient(to bottom, #ee2c67, transparent 80%); --start: -20deg; --end: 20deg; --speed: 2.5s; }
.concert-laser:nth-child(2) { left: 35%; background: linear-gradient(to bottom, #3ba4c9, transparent 80%); --start: 15deg; --end: -25deg; --speed: 3.2s; animation-delay: -0.5s; }
.concert-laser:nth-child(3) { left: 50%; background: linear-gradient(to bottom, #f820b2, transparent 80%); --start: -10deg; --end: 15deg; --speed: 2.8s; animation-delay: -1s; }
.concert-laser:nth-child(4) { left: 65%; background: linear-gradient(to bottom, #5cdb95, transparent 80%); --start: 25deg; --end: -15deg; --speed: 3.5s; animation-delay: -1.5s; }
.concert-laser:nth-child(5) { left: 85%; background: linear-gradient(to bottom, #8b00ff, transparent 80%); --start: -15deg; --end: 25deg; --speed: 2.6s; animation-delay: -0.8s; }

@keyframes laserSweep {
  0% { transform: rotate(var(--start, -15deg)); opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { transform: rotate(var(--end, 15deg)); opacity: 0.5; }
}

/* Strobe pulse ring behind the ticket for in-venue */
.concert-strobe-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(238,44,103,0.4);
  box-shadow: 0 0 60px rgba(238,44,103,0.3), inset 0 0 60px rgba(238,44,103,0.1);
  animation: strobeRingPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes strobeRingPulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; border-color: rgba(238,44,103,0.5); box-shadow: 0 0 40px rgba(238,44,103,0.3); }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.2; border-color: rgba(248,32,178,0.3); box-shadow: 0 0 80px rgba(248,32,178,0.2); }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; border-color: rgba(238,44,103,0.5); box-shadow: 0 0 40px rgba(238,44,103,0.3); }
}

/* Wristband glow effect - bottom edge accent */
.concert-wristband-glow {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 6001;
  pointer-events: none;
  box-shadow: 0 0 30px 10px rgba(238,44,103,0.6), 0 0 60px 20px rgba(238,44,103,0.3);
  animation: wristbandPulse 0.8s ease-in-out infinite alternate;
}

@keyframes wristbandPulse {
  0% { box-shadow: 0 0 30px 10px rgba(238,44,103,0.6), 0 0 60px 20px rgba(238,44,103,0.3); }
  100% { box-shadow: 0 0 40px 15px rgba(248,32,178,0.7), 0 0 80px 30px rgba(248,32,178,0.4); }
}

/* Concert venue-specific overlay tints */
.sweep-celeb--concert .sweep-celeb__bg-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.3) 0%,
    rgba(20,0,40,0.6) 40%,
    rgba(40,0,20,0.8) 100%
  );
}

/* Concert ticket - add holographic shimmer edge */
.sweep-celeb--concert .sweep-celeb__ticket-inner {
  box-shadow:
    0 0 30px rgba(238,44,103,0.4),
    0 0 60px rgba(248,32,178,0.2),
    0 20px 60px rgba(0,0,0,0.5);
}

.sweep-celeb--concert .sweep-celeb__ticket-top {
  background: linear-gradient(135deg, #ee2c67, #f820b2);
  position: relative;
  overflow: hidden;
}

.sweep-celeb--concert .sweep-celeb__ticket-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 45%, transparent 50%);
  animation: holoShimmer 2s ease infinite;
}

@keyframes holoShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Concert counter ring - pulsing neon */
.sweep-celeb--concert .sweep-celeb__counter-ring--pulse {
  border-color: rgba(238,44,103,0.5) !important;
  box-shadow: 0 0 50px rgba(238,44,103,0.3), 0 0 100px rgba(248,32,178,0.15);
}

.sweep-celeb--concert .sweep-celeb__counter-num {
  text-shadow: 0 0 40px rgba(238,44,103,0.5), 0 0 80px rgba(248,32,178,0.3);
}

/* Concert fire variant */
.sweep-celeb--concert-fire .sweep-celeb__ticket-top {
  background: linear-gradient(135deg, #ff4500, #ff8c00);
}

.sweep-celeb--concert-fire .sweep-celeb__ticket-inner {
  box-shadow: 0 0 40px rgba(255,100,0,0.4), 0 0 80px rgba(255,40,0,0.2), 0 20px 60px rgba(0,0,0,0.5);
}

.sweep-celeb--concert-fire .sweep-celeb__counter-num {
  text-shadow: 0 0 50px rgba(255,80,0,0.6);
}

/* Concert electric variant */
.sweep-celeb--concert-electric .sweep-celeb__ticket-top {
  background: linear-gradient(135deg, #0066ff, #00ccff);
}

.sweep-celeb--concert-electric .sweep-celeb__ticket-inner {
  box-shadow: 0 0 40px rgba(0,100,255,0.4), 0 0 80px rgba(100,0,255,0.2), 0 20px 60px rgba(0,0,0,0.5);
}

.sweep-celeb--concert-electric .sweep-celeb__counter-num {
  color: #00ccff;
  text-shadow: 0 0 60px rgba(0,200,255,0.6);
}

.sweep-celeb--concert-electric .sweep-celeb__counter-ring--pulse {
  border-color: rgba(0,200,255,0.4) !important;
}

/* Concert legendary variant */
.sweep-celeb--concert-legendary .sweep-celeb__ticket-top {
  background: linear-gradient(135deg, #ff0080, #ff8c00, #00cc88, #0066ff, #8b00ff);
  background-size: 200% 100%;
  animation: rainbowShift 2s ease infinite;
}

.sweep-celeb--concert-legendary .sweep-celeb__ticket-inner {
  box-shadow: 0 0 60px rgba(255,0,128,0.4), 0 0 120px rgba(100,0,255,0.2), 0 20px 60px rgba(0,0,0,0.5);
}

.sweep-celeb--concert-legendary .sweep-celeb__counter-num {
  background: linear-gradient(135deg, #ff0080, #ff8c00, #00cc88, #0066ff);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: rainbowShift 2s ease infinite;
  filter: drop-shadow(0 0 30px rgba(255,0,128,0.5));
}

.sweep-celeb--concert-legendary .sweep-celeb__counter-ring--pulse {
  border-color: rgba(255,0,128,0.3) !important;
  box-shadow: 0 0 60px rgba(255,0,128,0.2);
}

.sweep-celeb--concert-legendary .sweep-celeb__bg-img {
  animation: legendaryZoom 5s ease forwards !important;
}

/* Concert VIP variant - gold crown theme ($100+ big screen) */
.celeb-flash--concert-vip {
  background:
    radial-gradient(ellipse 60% 80% at 50% 20%, rgba(255,215,0,0.5), rgba(255,170,0,0.3) 40%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,215,0,0.15), transparent 60%);
  animation: concertFlashVIP 0.6s ease-out forwards;
}

@keyframes concertFlashVIP {
  0% { opacity: 0.9; }
  12% { opacity: 0.3; }
  25% { opacity: 0.85; }
  40% { opacity: 0.2; }
  55% { opacity: 0.7; }
  100% { opacity: 0; }
}

.sweep-celeb--vip .sweep-celeb__ticket-top {
  background: linear-gradient(135deg, #ffd700, #ff8c00, #ffd700);
  background-size: 200% 100%;
  animation: goldShift 2s ease infinite;
  position: relative;
  overflow: hidden;
}

.sweep-celeb--vip .sweep-celeb__ticket-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.2) 45%, transparent 50%);
  animation: holoShimmer 2s ease infinite;
}

@keyframes goldShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.sweep-celeb--vip .sweep-celeb__ticket-inner {
  box-shadow:
    0 0 40px rgba(255,215,0,0.4),
    0 0 80px rgba(255,170,0,0.2),
    0 20px 60px rgba(0,0,0,0.5);
}

.sweep-celeb--vip .sweep-celeb__counter-num {
  color: #ffd700;
  text-shadow: 0 0 50px rgba(255,215,0,0.6), 0 0 100px rgba(255,170,0,0.3);
}

.sweep-celeb--vip .sweep-celeb__counter-ring--pulse {
  border-color: rgba(255,215,0,0.4) !important;
  box-shadow: 0 0 60px rgba(255,215,0,0.2);
}

.sweep-celeb--vip .sweep-celeb__bg-img {
  animation: legendaryZoom 5s ease forwards !important;
}

/* VIP badge strip on ticket */
.sweep-celeb__ticket-vip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #111;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sweep-celeb__ticket-vip svg {
  width: 14px;
  height: 14px;
}

/* Streak badge */
.sweep-celeb__streak {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 60px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sweep-celeb__streak--in {
  opacity: 1;
  transform: translate(-50%, 80px);
}

.sweep-celeb__streak-count {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.sweep-celeb__streak-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
}

/* Mobile */
@media (max-width: 600px) {
  .sweep-celeb__ticket { width: 290px; }
  .sweep-celeb__ticket-artist { font-size: 22px; }
  .sweep-celeb__ticket-entries-num { font-size: 44px; }
  .sweep-celeb__counter-num { font-size: 72px; }
}

/* ============================================
   POST-ENTRY MODALS (Registration + Premier Upsell)
   ============================================ */

.entry-modal {
  position: fixed;
  inset: 0;
  z-index: 5500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.entry-modal--visible { opacity: 1; }

.entry-modal--out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.entry-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
}

.entry-modal__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  padding: var(--space-2xl) var(--space-xl);
  z-index: 1;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.entry-modal--visible .entry-modal__card {
  transform: translateY(0) scale(1);
}

.entry-modal--out .entry-modal__card {
  transform: translateY(20px) scale(0.97);
}

.entry-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s;
}

.entry-modal__close:hover { background: var(--bg-tertiary); }

.entry-modal__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.entry-modal__step {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.entry-modal__premier-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #000;
  color: #fff;
  border-radius: 2px;
  margin-bottom: var(--space-md);
}

.entry-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}

.entry-modal__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: var(--space-sm);
}

.entry-modal__sub strong { color: var(--text-primary); }

/* ── Registration Form ── */
.entry-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.entry-modal__input {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--text-base);
  border: 1.5px solid var(--border);
  border-radius: 0;
  background: var(--bg-primary);
  transition: border-color 0.15s;
  font-family: inherit;
}

.entry-modal__input:focus {
  outline: none;
  border-color: var(--text-primary);
}

.entry-modal__input::placeholder {
  color: var(--text-tertiary);
}

.entry-modal__cta {
  width: 100%;
  padding: 16px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  margin-top: var(--space-sm);
}

.entry-modal__cta:hover {
  background: #222;
  transform: translateY(-1px);
}

.entry-modal__cta--premier {
  background: #000;
}

.entry-modal__fine {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: var(--space-md);
}

.entry-modal__skip {
  display: block;
  width: 100%;
  padding: var(--space-md);
  background: none;
  border: none;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  transition: color 0.15s;
}

.entry-modal__skip:hover { color: var(--text-secondary); }

/* ── Social auth ── */
.entry-modal__social {
  margin-top: var(--space-xl);
  text-align: center;
}

.entry-modal__social-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
}

.entry-modal__social-btns {
  display: flex;
  gap: var(--space-sm);
}

.entry-modal__social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.entry-modal__social-btn:hover { background: var(--bg-tertiary); }

/* ── Premier Perks ── */
.premier-perks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-xl);
}

.premier-perk {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.premier-perk:last-child { border-bottom: none; }

.premier-perk__icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.premier-perk strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.premier-perk p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* ── Premier Tiers ── */
.premier-tiers {
  margin-bottom: var(--space-lg);
}

.premier-tiers__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.premier-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.premier-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 8px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.premier-tier:hover { border-color: var(--text-primary); }

.premier-tier--active {
  border-color: #000;
  background: #000;
  color: #fff;
}

.premier-tier__tag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #000;
  color: #fff;
  border-radius: 2px;
  white-space: nowrap;
}

.premier-tier--active .premier-tier__tag {
  background: #fff;
  color: #000;
}

.premier-tier__price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
}

.premier-tier__price small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.6;
}

.premier-tier--active .premier-tier__price { color: #fff; }

.premier-tier__entries {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.premier-tier--active .premier-tier__entries { color: rgba(255,255,255,0.6); }

/* ── Cause Actions Grid (post-sweepstakes entry flow) ── */
.entry-modal__card--actions {
  max-width: 520px;
}

.entry-modal__actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.entry-modal__action-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.entry-modal__action-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.entry-modal__action-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: var(--bg-secondary);
}

.entry-modal__action-info {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entry-modal__action-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.entry-modal__action-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry-modal__action-pts {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #ee2c67);
}

/* ── Premier banner in cause actions modal ── */
.entry-modal__premier-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 16px;
  background: #000;
  border-radius: 0;
  margin-bottom: var(--space-md);
}
.entry-modal__premier-banner-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #fff;
  color: #000;
  border-radius: 2px;
}
.entry-modal__premier-banner-text {
  flex: 1;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.35;
}
.entry-modal__premier-banner-text strong {
  color: #fff;
}
.entry-modal__premier-banner-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s;
}
.entry-modal__premier-banner-btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .entry-modal__card {
    max-width: 100%;
    margin: 0 var(--space-md);
    padding: var(--space-xl) var(--space-lg);
  }
  .premier-tiers__grid { grid-template-columns: 1fr; }
  .entry-modal__actions-grid { grid-template-columns: 1fr; }
  .entry-modal__action-img { height: 80px; }
  .entry-modal__premier-banner { flex-wrap: wrap; }
  .entry-modal__premier-banner-btn { width: 100%; text-align: center; margin-top: 4px; }
}

/* ============================================
   JOIN ONBOARDING MODAL - 3-step flow
   ============================================ */

.join-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.join-modal--visible { opacity: 1; }

.join-modal--out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.join-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.join-modal__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: #111;
  color: #fff;
  padding: var(--space-2xl) var(--space-xl);
  z-index: 1;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.join-modal--visible .join-modal__card {
  transform: translateY(0) scale(1);
}

.join-modal--out .join-modal__card {
  transform: translateY(24px) scale(0.96);
}

.join-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  transition: background 0.15s, color 0.15s;
}

.join-modal__close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Progress bar */
.join-modal__progress {
  margin-bottom: var(--space-xl);
}

.join-modal__progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.join-modal__progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.join-modal__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.join-modal__step-dot {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.25);
  transition: all 0.3s;
}

.join-modal__step-dot--active {
  background: #fff;
  color: #000;
}

.join-modal__step-dot--done {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Panels */
.join-modal__panel {
  display: none;
}

.join-modal__panel--active {
  display: block;
  animation: joinFadeIn 0.35s ease both;
}

@keyframes joinFadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.join-modal__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.join-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}

.join-modal__sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-top: var(--space-sm);
}

.join-modal__sub strong { color: #fff; }

/* Social auth */
.join-modal__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.join-modal__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}

.join-modal__social-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* Divider */
.join-modal__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.join-modal__divider::before,
.join-modal__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.join-modal__divider span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
}

/* Form */
.join-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.join-modal__input {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--text-base);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 0;
  background: rgba(255,255,255,0.04);
  color: #fff;
  transition: border-color 0.15s;
  font-family: inherit;
}

.join-modal__input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.5);
}

.join-modal__input::placeholder {
  color: rgba(255,255,255,0.3);
}

/* CTA */
.join-modal__cta {
  width: 100%;
  padding: 16px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, opacity 0.15s;
  margin-top: var(--space-sm);
  font-family: inherit;
}

.join-modal__cta:hover {
  background: #e5e5e5;
  transform: translateY(-1px);
}

.join-modal__cta--disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.join-modal__cta--disabled:hover {
  transform: none;
  background: #fff;
}

.join-modal__fine {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin-top: var(--space-md);
}

.join-modal__skip {
  display: block;
  width: 100%;
  padding: var(--space-md);
  background: none;
  border: none;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  transition: color 0.15s;
  font-family: inherit;
}

.join-modal__skip:hover { color: rgba(255,255,255,0.6); }

/* Cause selector grid */
.join-modal__causes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.join-modal__cause {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 18px 20px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 0;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  text-align: left;
  min-height: 56px;
}

.join-modal__cause:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.join-modal__cause--selected {
  background: rgba(255,255,255,0.08);
  border-color: var(--cause-clr);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--cause-clr);
}

.join-modal__cause-icon {
  display: flex;
  color: var(--cause-clr);
  flex-shrink: 0;
}

.join-modal__cause-icon .ic {
  width: 28px;
  height: 28px;
}

.join-modal__cause-label {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

.join-modal__cause-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s;
}

.join-modal__cause--selected .join-modal__cause-check {
  opacity: 1;
  transform: scale(1);
  background: var(--cause-clr);
  color: #000;
}

/* Club cards (step 3) */
.join-modal__clubs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.join-modal__club {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.join-modal__club:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.join-modal__club-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 0;
  flex-shrink: 0;
}

.join-modal__club-body {
  flex: 1;
  min-width: 0;
}

.join-modal__club-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.join-modal__club-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}

.join-modal__club-members {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 1px;
}

.join-modal__club-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.join-modal__club-price {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}

.join-modal__club-btn {
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.join-modal__club-btn:hover {
  background: #e5e5e5;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .join-modal__card {
    max-width: 100%;
    margin: 0 var(--space-sm);
    padding: var(--space-xl) var(--space-lg);
    max-height: 95vh;
  }
  .join-modal__causes {
    grid-template-columns: 1fr;
  }
  .join-modal__club-img {
    width: 44px;
    height: 44px;
  }
  .join-modal__artists {
    grid-template-columns: repeat(2, 1fr);
  }
  .join-modal__artist-img {
    width: 60px;
    height: 60px;
  }
  .join-modal__cultures {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Interests step - section labels */
.join-modal__int-section {
  margin-bottom: var(--space-xl);
}

.join-modal__int-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-md);
}

/* Artists grid */
.join-modal__artists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.join-modal__artist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-md) var(--space-sm);
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: rgba(255,255,255,0.6);
}

.join-modal__artist:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.join-modal__artist--selected {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.join-modal__artist-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s;
}

.join-modal__artist--selected .join-modal__artist-img {
  transform: scale(1.05);
}

.join-modal__artist-name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.join-modal__artist-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #000;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s;
}

.join-modal__artist--selected .join-modal__artist-check {
  opacity: 1;
  transform: scale(1);
}

/* Culture chips */
.join-modal__cultures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.join-modal__culture {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: rgba(255,255,255,0.6);
}

.join-modal__culture:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.join-modal__culture--selected {
  background: rgba(255,255,255,0.08);
  border-color: var(--cult-clr);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--cult-clr);
}

.join-modal__culture-icon {
  display: flex;
  color: var(--cult-clr);
  flex-shrink: 0;
}

.join-modal__culture-icon .ic {
  width: 16px;
  height: 16px;
}

.join-modal__culture-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Club skip area - prominent */
.join-modal__club-skip-area {
  margin-top: var(--space-lg);
  text-align: center;
}

.join-modal__cta--ghost {
  width: 100%;
  padding: 16px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.join-modal__cta--ghost:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.join-modal__club-skip-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: var(--space-sm);
}

/* ============================================
   WELCOME BURST - full-screen signup celebration
   ============================================ */
.wb {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  overflow: hidden;
}

.wb__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,20,20,0.97) 0%, rgba(10,10,10,0.99) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.wb--active .wb__bg { opacity: 1; }
.wb--out .wb__bg { opacity: 0; transition: opacity 0.5s ease 0.1s; }

/* Expanding ring pulses */
.wb__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wb__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 2px solid;
  opacity: 0;
}

.wb__ring--1 {
  width: 120px;
  height: 120px;
  border-color: #ee2c67;
}

.wb__ring--2 {
  width: 240px;
  height: 240px;
  border-color: #f820b2;
}

.wb__ring--3 {
  width: 500px;
  height: 500px;
  border-color: rgba(255,255,255,0.15);
}

.wb--active .wb__ring {
  animation: wbRingPulse 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wb--active .wb__ring--1 { animation-delay: 0.05s; }
.wb--active .wb__ring--2 { animation-delay: 0.15s; }
.wb--active .wb__ring--3 { animation-delay: 0.25s; }

@keyframes wbRingPulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

/* Central content stack (below the flight path) */
.wb__center {
  position: absolute;
  top: auto;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  width: 90vw;
  max-width: 500px;
}

/* Vintage airplane flight (viewport-spanning) */
.wb__flight {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: min(98vw, 800px);
  height: 55vh;
  max-height: 420px;
  pointer-events: none;
}

.wb__flight-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Smoky contrail */
.wb__trail-smoke {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0;
}

.wb--active .wb__trail-smoke {
  opacity: 1;
  animation: wbTrailDraw 2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* Colored vapor + sharp trail */
.wb__trail-path,
.wb__trail-glow {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0;
}

.wb--active .wb__trail-path,
.wb--active .wb__trail-glow {
  opacity: 1;
  animation: wbTrailDraw 2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

@keyframes wbTrailDraw {
  to { stroke-dashoffset: 0; }
}

/* Plane group - SMIL handles motion */
.wb__plane-g {
  opacity: 0;
}

.wb--active .wb__plane-g {
  animation: wbPlaneReveal 0.2s ease 0.05s forwards;
}

@keyframes wbPlaneReveal {
  to { opacity: 1; }
}

/* Spinning propeller */
.wb__propeller-spin {
  animation: wbPropSpin 0.12s linear infinite;
  transform-origin: center;
}

@keyframes wbPropSpin {
  to { transform: rotate(180deg); }
}

/* Name - vintage poster headline */
.wb__name {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: clamp(48px, 14vw, 96px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: #fff;
  text-shadow: 0 0 40px rgba(238,44,103,0.4), 0 0 80px rgba(248,32,178,0.2);
  opacity: 0;
  transform: translateY(30px) scale(0.8);
  margin-bottom: 6px;
}

.wb--active .wb__name {
  animation: wbNameIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

@keyframes wbNameIn {
  0% { opacity: 0; transform: translateY(40px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}



/* "Welcome to Propeller" subtitle */
.wb__welcome {
  font-size: clamp(14px, 3.5vw, 20px);
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(15px);
  margin-bottom: 14px;
}

.wb--active .wb__welcome {
  animation: wbSlideUp 0.5s ease 0.7s forwards;
}

/* Points slam-in */
.wb__pts {
  font-size: clamp(18px, 5vw, 28px);
  font-weight: 900;
  color: #5cdb95;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: scale(2);
  margin-bottom: 12px;
}

.wb--active .wb__pts {
  animation: wbPtsSlam 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
}

@keyframes wbPtsSlam {
  0% { opacity: 0; transform: scale(2.5); }
  60% { opacity: 1; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* Tagline */
.wb__tagline {
  font-size: clamp(13px, 3vw, 15px);
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
}

.wb--active .wb__tagline {
  animation: wbSlideUp 0.5s ease 1.2s forwards;
}

@keyframes wbSlideUp {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Exit animation */
.wb--out .wb__center {
  animation: wbCenterOut 0.5s ease forwards;
}

@keyframes wbCenterOut {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(20px); }
}

/* Confetti cannon pieces */
.wb__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wb__conf-piece {
  position: absolute;
  top: 30%;
  opacity: 0;
}

.wb--active .wb__conf-piece {
  animation: wbConfetti 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wbConfetti {
  0% {
    left: var(--sx);
    top: 30%;
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  15% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    left: var(--ex);
    top: var(--ey);
    opacity: 0;
    transform: rotate(var(--r)) scale(0.5);
  }
}

/* Starburst particles from center */
.wb__stars {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.wb__star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.wb--active .wb__star {
  animation: wbStarburst 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wbStarburst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.5);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .wb__flight { width: 98vw; height: 40vh; max-height: 280px; top: 5%; }
  .wb__ring--3 { width: 300px; height: 300px; }
  .wb__center { bottom: 6%; }
  .wb__name { font-size: clamp(36px, 12vw, 60px); }
}

/* ============================================
   FIRST MOVE - post-signup dopamine hit
   ============================================ */
.first-move {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.first-move--visible { opacity: 1; }

.first-move--out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.first-move__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
}

.first-move__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: #111;
  color: #fff;
  padding: var(--space-2xl) var(--space-xl);
  z-index: 1;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.first-move--visible .first-move__card {
  transform: translateY(0) scale(1);
}

.first-move--out .first-move__card {
  transform: translateY(24px) scale(0.96);
}

.first-move__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Animated celebration header */
.first-move__anim {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
}

/* Confetti burst - 12 particles */
.first-move__burst {
  position: absolute;
  inset: 0;
}

.first-move__particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: fmBurst 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.3s + var(--d));
}

.first-move__particle:nth-child(1)  { background: #ff6b9d; }
.first-move__particle:nth-child(2)  { background: #5cdb95; }
.first-move__particle:nth-child(3)  { background: #64b5f6; }
.first-move__particle:nth-child(4)  { background: #ffd740; }
.first-move__particle:nth-child(5)  { background: #b388ff; }
.first-move__particle:nth-child(6)  { background: #ff5252; }
.first-move__particle:nth-child(7)  { background: #80deea; }
.first-move__particle:nth-child(8)  { background: #ffab40; }
.first-move__particle:nth-child(9)  { background: #ee2c67; }
.first-move__particle:nth-child(10) { background: #a5d6a7; }
.first-move__particle:nth-child(11) { background: #ce93d8; }
.first-move__particle:nth-child(12) { background: #fff; }

@keyframes fmBurst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + var(--x)),
      calc(-50% + var(--y))
    ) scale(1);
    opacity: 0;
  }
}

/* Check ring - draws in */
.first-move__check-ring {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first-move__check-svg {
  width: 64px;
  height: 64px;
  transform: scale(0);
  animation: fmScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

.first-move__check-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: fmCircleDraw 0.6s ease 0.3s forwards;
}

.first-move__check-path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: fmCheckDraw 0.35s ease 0.65s forwards;
}

@keyframes fmScaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes fmCircleDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes fmCheckDraw {
  to { stroke-dashoffset: 0; }
}

/* Points fly-up */
.first-move__pts-fly {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  font-size: 13px;
  font-weight: 800;
  color: #5cdb95;
  letter-spacing: 0.04em;
  opacity: 0;
  white-space: nowrap;
  animation: fmPtsFly 0.8s ease 0.9s forwards;
}

@keyframes fmPtsFly {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

.first-move__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}

.first-move__sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-top: var(--space-sm);
}

/* Sweepstakes card - big visual hero */
.first-move__option--sweep {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.first-move__option--sweep:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.first-move__option-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.first-move__option-overlay {
  padding: var(--space-lg) var(--space-md);
  background: linear-gradient(to top, #111 60%, transparent);
  margin-top: -60px;
  position: relative;
}

.first-move__option-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.12);
  border-radius: 20px;
  margin-bottom: var(--space-sm);
  color: #fff;
}

.first-move__option-tag .ic {
  width: 14px;
  height: 14px;
}

.first-move__option-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 4px;
}

.first-move__option-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-md);
}

.first-move__option-cta {
  width: 100%;
  padding: 14px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 30px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.first-move__option-cta:hover {
  background: #e5e5e5;
  transform: translateY(-1px);
}

/* Divider */
.first-move__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.first-move__divider::before,
.first-move__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.first-move__divider span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
}

/* Quick action row */
.first-move__option--action {
  cursor: pointer;
  transition: transform 0.15s;
}

.first-move__option--action:hover {
  transform: translateY(-1px);
}

.first-move__action-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s, border-color 0.15s;
}

.first-move__option--action:hover .first-move__action-row {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.first-move__action-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 0;
  flex-shrink: 0;
}

.first-move__action-body {
  flex: 1;
  min-width: 0;
}

.first-move__action-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.first-move__action-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.first-move__action-cta {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}

.first-move__action-cta:hover {
  background: rgba(255,255,255,0.2);
}

/* Skip link */
.first-move__skip {
  display: block;
  width: 100%;
  padding: var(--space-md);
  background: none;
  border: none;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  text-align: center;
  transition: color 0.15s;
  font-family: inherit;
  margin-top: var(--space-sm);
}

.first-move__skip:hover { color: rgba(255,255,255,0.5); }

@media (max-width: 480px) {
  .first-move__card {
    max-width: 100%;
    margin: 0 var(--space-sm);
    padding: var(--space-xl) var(--space-lg);
    max-height: 95vh;
  }
  .first-move__option-img {
    height: 160px;
  }
}

/* ============================================
   CLUB DETAIL PAGE
   ============================================ */

/* HERO */
/* ============================================
   CLUB DETAIL - CAMPAIGN PAGE TEMPLATE
   Matches live propeller.la campaign pages
   ============================================ */

/* PER-CLUB THEMING - custom fonts, colors, backgrounds */
.cd-themed {
  background: var(--club-bg, #0a0a0a);
  color: var(--club-text, #fff);
}

.cd-themed .cd-hero__title,
.cd-themed .cd-about-block__heading,
.cd-themed .cd-section-title,
.cd-themed .cd-final-cta__heading,
.cd-themed .cd-quote__text,
.cd-themed .cd-hiw__step-title {
  font-family: var(--club-font, inherit);
}

.cd-themed .cd-quote {
  background: var(--club-bg, #0a0a0a);
}
.cd-themed .cd-quote.cd-quote--hero {
  background: transparent;
}

.cd-themed .cd-final-cta {
  background: var(--club-bg, #0a0a0a);
}

.cd-themed .cd-final-cta__heading,
.cd-themed .cd-final-cta__sub {
  color: var(--club-text, #fff);
}

.cd-themed .cd-quote__text {
  color: color-mix(in srgb, var(--club-text, #fff) 90%, transparent);
}

.cd-themed .cd-quote__mark {
  color: var(--club-accent-light, var(--club-accent, rgba(255,255,255,0.3)));
  opacity: 0.7;
}

.cd-themed .cd-leaderboard__row--top .cd-leaderboard__rank {
  background: var(--club-accent, var(--brand-primary));
}

.cd-themed .cd-hero__logo--svg {
  max-width: 280px;
  max-height: 80px;
  filter: brightness(0) invert(1) drop-shadow(0 4px 24px rgba(0,0,0,0.5));
  border-radius: 0;
}

.cd-themed .cd-impact {
  background: var(--club-bg, #0a0a0a);
}

.cd-themed .cd-impact__num {
  color: var(--club-accent-light, var(--club-accent, var(--brand-primary)));
  font-family: var(--club-font, inherit);
}

.cd-themed .cd-impact__label {
  color: color-mix(in srgb, var(--club-text, #fff) 70%, transparent);
}

.cd-themed .cd-about-block {
  background: var(--club-bg, var(--bg-secondary));
}

.cd-themed .cd-about-block__heading {
  color: var(--club-text, var(--text-primary));
}

.cd-themed .cd-about-block__desc {
  color: color-mix(in srgb, var(--club-text, #fff) 80%, transparent);
}

.cd-themed .cd-card {
  background: color-mix(in srgb, var(--club-text, #fff) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--club-text, #fff) 8%, transparent);
}

.cd-themed .cd-hiw {
  background: color-mix(in srgb, var(--club-bg, #0a0a0a) 94%, var(--club-text, #111));
}

.cd-themed .cd-hiw__step-num {
  background: var(--club-accent, var(--brand-primary));
}

.cd-themed .cd-hiw__step-title {
  color: var(--club-text, var(--text-primary));
}

.cd-themed .cd-hiw__step-desc {
  color: color-mix(in srgb, var(--club-text, #fff) 70%, transparent);
}

.cd-themed .cd-perks__card {
  background: color-mix(in srgb, var(--club-text, #fff) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--club-text, #fff) 8%, transparent);
}

.cd-themed .cd-faq {
  background: var(--club-bg, var(--bg-primary));
}

.cd-themed .cd-faq__item {
  border-color: color-mix(in srgb, var(--club-text, #fff) 8%, transparent);
}

.cd-themed .cd-faq__q {
  color: var(--club-text, var(--text-primary));
}

.cd-themed .cd-faq__a-inner {
  color: color-mix(in srgb, var(--club-text, #fff) 65%, transparent);
}

.cd-themed .cd-spotlight {
  background: color-mix(in srgb, var(--club-bg, #0a0a0a) 92%, var(--club-text, #111));
}

.cd-themed .cd-spotlight__quote {
  color: color-mix(in srgb, var(--club-text, #fff) 85%, transparent);
}

.cd-themed .cd-spotlight__name {
  color: var(--club-accent-light, var(--club-accent, var(--text-primary)));
}

.cd-themed .cd-partners {
  background: var(--club-bg, var(--bg-primary));
}

.cd-themed .cd-partners__item {
  background: color-mix(in srgb, var(--club-text, #fff) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--club-text, #fff) 8%, transparent);
  border-radius: 12px;
  padding: var(--space-md);
}

.cd-themed .cd-members-bar {
  background: var(--club-bg, var(--bg-primary));
}

.cd-themed .cd-actions {
  background: color-mix(in srgb, var(--club-bg, #0a0a0a) 94%, var(--club-text, #111));
}

.cd-themed .cd-actions__tile {
  background: color-mix(in srgb, var(--club-text, #fff) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--club-text, #fff) 8%, transparent);
}

.cd-themed .cd-rewards {
  background: var(--club-bg, var(--bg-secondary));
}

.cd-themed .cd-leaderboard {
  background: color-mix(in srgb, var(--club-bg, #0a0a0a) 92%, var(--club-text, #111));
}

.cd-themed .cd-leaderboard__row {
  border-color: color-mix(in srgb, var(--club-text, #fff) 6%, transparent);
}

.cd-themed .cd-leaderboard__name {
  color: var(--club-text, var(--text-primary));
}

.cd-themed .cd-section-title {
  color: var(--club-text, var(--text-primary));
}

.cd-themed .cd-perks {
  background: color-mix(in srgb, var(--club-bg, #0a0a0a) 94%, var(--club-text, #111));
}

.cd-themed .cd-perks__text {
  color: var(--club-text, var(--text-primary));
}

.cd-themed .cd-back {
  background: var(--club-bg, var(--bg-primary));
}

.cd-themed .cd-back__link {
  color: var(--club-accent-light, var(--club-accent, var(--text-muted)));
}

/* HERO - full-bleed cinematic banner */
.cd-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.cd-hero__bg {
  position: absolute;
  inset: 0;
  background: #000;
}

.cd-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.cd-hero__bg-solid {
  width: 100%;
  height: 100%;
}

.cd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0.15) 100%
  );
}

.cd-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.cd-hero__logo {
  max-width: 200px;
  max-height: 120px;
  margin-bottom: var(--space-sm);
  display: block;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
  border-radius: 16px;
  object-fit: contain;
}

.cd-hero__title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
  line-height: 1;
}

.cd-hero__propelling {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cd-hero__propelling strong {
  color: var(--club-accent, #fff);
}

.cd-hero__cta {
  margin-top: var(--space-md);
}

/* IMPACT STATS - accent background bar */
.cd-impact {
  padding: var(--space-xl) 0;
  background: var(--club-accent, var(--brand-primary));
}

.cd-impact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}

.cd-impact__num {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}

.cd-impact__label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ABOUT BLOCK - two-col with image */
.cd-about-block {
  padding: var(--space-3xl) 0;
  background: var(--bg-primary);
}

.cd-about-block__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.cd-about-block__heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  line-height: 1.2;
}

.cd-about-block__desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.cd-about-block__img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* SECTION TITLE */
.cd-section-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-2xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* CTA BUTTON */
.cd-cta__btn {
  display: inline-block;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--club-accent, var(--brand-primary));
  border: 2px solid var(--club-accent, var(--brand-primary));
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: inherit;
}

.cd-cta__btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* CAUSES / YOUR IMPACT */
.cd-causes {
  padding: var(--space-3xl) 0;
  background: var(--bg-secondary);
}

.cd-themed .cd-causes {
  background: color-mix(in srgb, var(--club-bg, #0a0a0a) 92%, var(--club-text, #111));
}

.cd-causes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.cd-causes__card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cd-themed .cd-causes__card {
  background: color-mix(in srgb, var(--club-text, #fff) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--club-text, #fff) 8%, transparent);
}

.cd-causes__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.cd-causes__card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cd-causes__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cd-causes__card:hover .cd-causes__card-img img {
  transform: scale(1.05);
}

.cd-causes__card-body {
  padding: var(--space-md) var(--space-lg);
}

.cd-causes__card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--club-text, var(--text-primary));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.cd-themed .cd-causes__card-title {
  font-family: var(--club-font, inherit);
}

/* MEMBERS BAR */
.cd-members-bar {
  padding: var(--space-lg) 0;
  background: var(--bg-primary);
}

.cd-members-bar__track {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
}

.cd-members-bar__fill {
  height: 100%;
  background: var(--club-accent, var(--brand-primary));
  border-radius: 999px;
  transition: width 1s ease;
}

.cd-members-bar__stats {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* QUOTE - dark cinematic block */
.cd-quote {
  padding: var(--space-4xl) 0;
  background: #0a0a0a;
}

.cd-quote__block {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-xl);
}

.cd-quote__mark {
  width: 40px;
  height: 40px;
  color: var(--club-accent, rgba(255,255,255,0.3));
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.cd-quote__text {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  font-style: italic;
  margin-bottom: var(--space-xl);
}

.cd-quote__attr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.cd-quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--club-accent, rgba(255,255,255,0.3));
}

.cd-quote__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--club-accent, rgba(255,255,255,0.8));
}

/* TAKE ACTION - horizontal scrolling carousel */
.cd-actions {
  padding: var(--space-3xl) 0;
  background: var(--bg-secondary);
}

.cd-actions__carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-md);
  cursor: grab;
  scrollbar-width: none;
}

.cd-actions__carousel::-webkit-scrollbar { display: none; }
.cd-actions__carousel.dragging { cursor: grabbing; scroll-snap-type: none; }

.cd-actions__tile {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--border-subtle);
}

.cd-actions__tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.cd-actions__tile-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.cd-actions__tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-actions__tile-body {
  padding: var(--space-md);
}

.cd-actions__tile-type {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--club-accent, var(--accent-primary));
  font-weight: 700;
}

.cd-actions__tile-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
  line-height: 1.3;
  display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
  overflow: hidden;
}

.cd-actions__tile-pts {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* REWARDS - locked cards with labels */
.cd-rewards {
  padding: var(--space-3xl) 0;
  background: var(--bg-primary);
}

.cd-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.cd-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.cd-card:hover {
  transform: scale(1.03);
}

.cd-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.cd-card--locked .cd-card__img {
  filter: blur(8px) brightness(0.5);
}

.cd-card__lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,0.8);
}

.cd-card__lock svg {
  width: 32px;
  height: 32px;
}

.cd-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  line-height: 1.3;
}

/* SUPPORTER SPOTLIGHT */
.cd-spotlight {
  padding: var(--space-3xl) 0;
  background: var(--bg-secondary);
  text-align: center;
}

.cd-spotlight__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.cd-spotlight__item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-xl);
  align-items: start;
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
}

.cd-spotlight__img {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.cd-spotlight__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  object-fit: cover;
}

.cd-spotlight__quote {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: var(--space-md);
}

.cd-spotlight__name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.cd-spotlight__title {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* LEADERBOARD */
.cd-leaderboard {
  padding: var(--space-3xl) 0;
  background: var(--bg-primary);
}

.cd-leaderboard__list {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cd-leaderboard__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.2s;
}

.cd-leaderboard__row:hover {
  background: var(--bg-secondary);
}

.cd-leaderboard__row--top {
  background: rgba(255,255,255,0.02);
}

.cd-leaderboard__rank {
  font-size: 1rem;
  font-weight: 800;
  color: var(--club-accent, var(--accent-primary));
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.cd-leaderboard__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.cd-leaderboard__name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cd-leaderboard__pts {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* PARTNERS */
.cd-partners {
  padding: var(--space-3xl) 0;
  background: var(--bg-secondary);
}

.cd-partners__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
}

.cd-partners__item {
  text-align: center;
  min-width: 120px;
  max-width: 160px;
}

.cd-partners__logo {
  width: 100%;
  max-width: 120px;
  height: 60px;
  object-fit: contain;
  margin: 0 auto var(--space-sm);
  display: block;
  opacity: 0.8;
}

.cd-partners__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--club-accent, var(--text-primary));
  margin: 0 auto var(--space-sm);
}

.cd-partners__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.cd-partners__city {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* HOW IT WORKS - 3-step horizontal */
.cd-hiw {
  padding: var(--space-3xl) 0;
  background: #0a0a0a;
}

.cd-hiw .cd-section-title {
  color: #fff;
}

.cd-hiw__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: 800px;
  margin: 0 auto;
}

.cd-hiw__step {
  text-align: center;
}

.cd-hiw__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--club-accent, var(--brand-primary));
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}

.cd-hiw__step-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.cd-hiw__step-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* PERKS - card grid */
.cd-perks {
  padding: var(--space-3xl) 0;
  background: var(--bg-primary);
}

.cd-perks__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  max-width: 600px;
  margin: 0 auto;
}

.cd-perks__card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.cd-perks__emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
  color: var(--club-accent, var(--accent));
}
.cd-perks__emoji .ic {
  width: 1.5rem;
  height: 1.5rem;
}

.cd-perks__text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* FAQ ACCORDION */
.cd-faq {
  padding: var(--space-3xl) 0;
  background: var(--bg-secondary);
}

.cd-faq__list {
  max-width: 700px;
  margin: var(--space-xl) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cd-faq__item {
  border-bottom: 1px solid var(--border-primary);
  overflow: hidden;
  transition: border-color 0.2s;
}

.cd-faq__item:first-child {
  border-top: 1px solid var(--border-primary);
}

.cd-faq__item.open {
  border-color: var(--club-accent, var(--accent-primary));
}

.cd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-sm);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
  transition: color 0.2s;
}

.cd-faq__q:hover {
  color: var(--club-accent, var(--accent-primary));
}

.cd-faq__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s;
  color: var(--text-muted);
}

.cd-faq__item.open .cd-faq__chevron {
  transform: rotate(180deg);
  color: var(--club-accent, var(--accent-primary));
}

.cd-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.cd-faq__item.open .cd-faq__a {
  max-height: 300px;
}

.cd-faq__a-inner {
  padding: 0 var(--space-sm) var(--space-lg);
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* FINAL CTA */
.cd-final-cta {
  padding: var(--space-4xl) 0;
  background: var(--bg-primary);
  text-align: center;
}

.cd-final-cta__heading {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--text-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.cd-final-cta__sub {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

/* BACK */
.cd-back {
  padding: var(--space-2xl) 0 var(--space-4xl);
  background: var(--bg-primary);
  text-align: center;
}

.cd-back__link {
  color: var(--text-muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
}

.cd-back__link:hover {
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════
   MONTHLY DONOR LANDING PAGE - TEMPLATE VARIANTS
   Matches the warm cream/brown style of the old site
   ═══════════════════════════════════════════════════ */

/* HERO - Minimal variant (logo only, centered, for non-members) */
.cd-hero:has(.cd-hero__content--minimal) {
  align-items: center;
  min-height: 400px;
}

.cd-hero__content--minimal {
  padding: var(--space-4xl) var(--space-lg);
}

.cd-hero__content--minimal .cd-hero__logo {
  max-width: 180px;
  max-height: 180px;
  filter: brightness(0) invert(1) drop-shadow(0 4px 24px rgba(0,0,0,0.5));
  border-radius: 0;
}

/* Darker overlay for non-member hero (just atmospheric + logo) */
.cd-hero:has(.cd-hero__content--minimal) .cd-hero__overlay {
  background: rgba(0,0,0,0.35) !important;
}

/* ABOUT - Centered variant (no 2-col grid) */
.cd-about-block--centered {
  text-align: center;
  padding: var(--space-4xl) 0 var(--space-3xl);
}

.cd-about-block--centered .cd-about-block__centered-inner {
  max-width: 600px;
  margin: 0 auto;
}

.cd-about-block--centered .cd-about-block__heading {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-lg);
}

.cd-about-block--centered .cd-about-block__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

/* CTA - Rounded pill variant */
.cd-cta__btn--rounded {
  border-radius: 999px;
  padding: 16px 48px;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

/* CTA - Inverted (cream on brown) */
.cd-cta__btn--inverted {
  background: var(--club-bg, #f5efe6);
  color: var(--club-text, #2c2416);
  border-color: var(--club-bg, #f5efe6);
  border-radius: 999px;
  padding: 18px 56px;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.cd-cta__btn--inverted:hover {
  background: #fff;
  border-color: #fff;
}

/* QUOTE - Full-bleed hero variant with background image */
.cd-quote--hero {
  position: relative;
  padding: var(--space-4xl) 0;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.cd-quote__bg {
  position: absolute;
  inset: 0;
}

.cd-quote__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cd-quote__bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(150, 130, 97, 0.75);
}

.cd-quote--hero .cd-quote__block {
  position: relative;
  z-index: 2;
}

.cd-quote--hero .cd-quote__text {
  color: rgba(255,255,255,0.95);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-style: italic;
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto var(--space-lg);
}

.cd-quote__signature {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  text-align: center;
  font-weight: 400;
}

/* PERKS - Centered list variant (vertical rows) */
.cd-perks--centered {
  padding: var(--space-3xl) 0;
}

.cd-perks__list {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.cd-perks__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: left;
}

.cd-perks__icon {
  flex-shrink: 0;
  color: var(--club-accent, var(--brand-primary));
}
.cd-perks__icon .ic {
  width: 1.5rem;
  height: 1.5rem;
}

.cd-perks__row .cd-perks__text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--club-text, var(--text-primary));
}

/* Themed perks - icon uses club accent with question mark tooltip for Premier */
.cd-themed .cd-perks__icon {
  color: var(--club-accent, var(--brand-primary));
}

/* TOPOGRAPHIC MAP DIVIDER */
.cd-topo-divider {
  height: 80px;
  overflow: hidden;
  line-height: 0;
}

.cd-topo-divider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.cd-themed .cd-topo-divider__img {
  opacity: 0.6;
}

/* REWARDS - Preview variant (no blur, no locks) */
.cd-rewards--preview .cd-card--preview {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cd-rewards--preview .cd-card--preview .cd-card__img {
  filter: none;
  aspect-ratio: 1;
  object-fit: cover;
}

/* PARTNERS - Logo grid variant */
.cd-partners--logos {
  padding: var(--space-3xl) 0 0;
  position: relative;
  overflow: hidden;
}

.cd-partners__label {
  text-align: center;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--club-text, #333) 70%, transparent);
  margin-bottom: var(--space-2xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.cd-partners__logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl) var(--space-3xl);
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: var(--space-3xl);
  align-items: center;
  justify-items: center;
}

.cd-partners__logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-partners__logo-img {
  max-width: 160px;
  max-height: 60px;
  object-fit: contain;
  filter: sepia(0.3) brightness(0.7);
}

.cd-themed .cd-partners__logo-img {
  filter: sepia(0.3) brightness(0.6) saturate(0.7);
}

.cd-partners__logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--club-text, #333) 65%, transparent);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Forest silhouette at bottom of partners section */
.cd-partners__forest {
  height: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0,200 L0,140 L20,130 L25,90 L30,130 L40,120 L45,70 L50,120 L60,130 L65,100 L70,130 L80,125 L85,60 L90,125 L100,135 L110,120 L115,80 L120,120 L130,130 L135,95 L140,130 L150,125 L155,55 L160,125 L170,130 L175,110 L180,130 L190,120 L195,65 L200,120 L210,135 L215,105 L220,135 L230,125 L235,50 L240,125 L250,130 L260,120 L265,75 L270,120 L280,130 L285,90 L290,130 L300,125 L305,45 L310,125 L320,135 L325,100 L330,135 L340,120 L345,60 L350,120 L360,130 L365,85 L370,130 L380,125 L385,55 L390,125 L400,135 L405,95 L410,130 L420,120 L425,70 L430,120 L440,130 L445,100 L450,130 L460,125 L465,50 L470,125 L480,135 L490,120 L495,65 L500,120 L510,130 L515,90 L520,130 L530,125 L535,45 L540,125 L550,135 L555,105 L560,130 L570,120 L575,60 L580,120 L590,130 L595,80 L600,130 L610,125 L615,55 L620,125 L630,135 L640,120 L645,70 L650,120 L660,130 L665,95 L670,130 L680,125 L685,50 L690,125 L700,135 L705,100 L710,130 L720,120 L725,60 L730,120 L740,130 L745,85 L750,130 L760,125 L765,45 L770,125 L780,135 L790,120 L795,65 L800,120 L810,130 L815,90 L820,130 L830,125 L835,55 L840,125 L850,135 L855,105 L860,130 L870,120 L875,70 L880,120 L890,130 L895,80 L900,130 L910,125 L915,50 L920,125 L930,135 L940,120 L945,60 L950,120 L960,130 L965,95 L970,130 L980,125 L985,45 L990,125 L1000,135 L1005,100 L1010,130 L1020,120 L1025,65 L1030,120 L1040,130 L1045,85 L1050,130 L1060,125 L1065,55 L1070,125 L1080,135 L1090,120 L1095,70 L1100,120 L1110,130 L1115,90 L1120,130 L1130,125 L1135,50 L1140,125 L1150,135 L1160,120 L1165,60 L1170,120 L1180,130 L1185,80 L1190,130 L1200,135 L1200,200 Z' fill='%23968261'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  margin-top: var(--space-xl);
}

.cd-themed .cd-partners__forest {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0,200 L0,140 L20,130 L25,90 L30,130 L40,120 L45,70 L50,120 L60,130 L65,100 L70,130 L80,125 L85,60 L90,125 L100,135 L110,120 L115,80 L120,120 L130,130 L135,95 L140,130 L150,125 L155,55 L160,125 L170,130 L175,110 L180,130 L190,120 L195,65 L200,120 L210,135 L215,105 L220,135 L230,125 L235,50 L240,125 L250,130 L260,120 L265,75 L270,120 L280,130 L285,90 L290,130 L300,125 L305,45 L310,125 L320,135 L325,100 L330,135 L340,120 L345,60 L350,120 L360,130 L365,85 L370,130 L380,125 L385,55 L390,125 L400,135 L405,95 L410,130 L420,120 L425,70 L430,120 L440,130 L445,100 L450,130 L460,125 L465,50 L470,125 L480,135 L490,120 L495,65 L500,120 L510,130 L515,90 L520,130 L530,125 L535,45 L540,125 L550,135 L555,105 L560,130 L570,120 L575,60 L580,120 L590,130 L595,80 L600,130 L610,125 L615,55 L620,125 L630,135 L640,120 L645,70 L650,120 L660,130 L665,95 L670,130 L680,125 L685,50 L690,125 L700,135 L705,100 L710,130 L720,120 L725,60 L730,120 L740,130 L745,85 L750,130 L760,125 L765,45 L770,125 L780,135 L790,120 L795,65 L800,120 L810,130 L815,90 L820,130 L830,125 L835,55 L840,125 L850,135 L855,105 L860,130 L870,120 L875,70 L880,120 L890,130 L895,80 L900,130 L910,125 L915,50 L920,125 L930,135 L940,120 L945,60 L950,120 L960,130 L965,95 L970,130 L980,125 L985,45 L990,125 L1000,135 L1005,100 L1010,130 L1020,120 L1025,65 L1030,120 L1040,130 L1045,85 L1050,130 L1060,125 L1065,55 L1070,125 L1080,135 L1090,120 L1095,70 L1100,120 L1110,130 L1115,90 L1120,130 L1130,125 L1135,50 L1140,125 L1150,135 L1160,120 L1165,60 L1170,120 L1180,130 L1185,80 L1190,130 L1200,135 L1200,200 Z' fill='%23968261'/%3E%3C/svg%3E");
}

/* SPOTLIGHT - Warm variant (brown bg matching old site) */
.cd-spotlight--warm,
.cd-themed .cd-spotlight.cd-spotlight--warm {
  background: var(--club-accent, #968261);
  color: #fff;
}

.cd-spotlight--warm .cd-section-title {
  color: #fff;
}

.cd-spotlight--warm .cd-spotlight__quote,
.cd-themed .cd-spotlight--warm .cd-spotlight__quote {
  color: rgba(255,255,255,0.95);
  font-size: 0.9rem;
  line-height: 1.6;
}

.cd-spotlight--warm .cd-spotlight__name,
.cd-themed .cd-spotlight--warm .cd-spotlight__name {
  color: rgba(255,255,255,0.9);
}

.cd-spotlight--warm .cd-spotlight__title {
  color: rgba(255,255,255,0.7);
}

/* FINAL CTA - Warm variant (brown bg) */
.cd-final-cta--warm,
.cd-themed .cd-final-cta.cd-final-cta--warm {
  background: var(--club-accent, #968261);
  padding: var(--space-4xl) 0;
}

.cd-final-cta--warm .cd-final-cta__sub,
.cd-themed .cd-final-cta--warm .cd-final-cta__sub {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  margin-bottom: var(--space-xl);
}

/* MEMBER STATUS BADGE */
.cd-member-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--club-accent, var(--brand-primary));
  padding: 8px 20px;
  background: color-mix(in srgb, var(--club-accent, var(--brand-primary)) 10%, transparent);
  border-radius: 999px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .cd-hero { min-height: 360px; }
  .cd-about-block__grid { grid-template-columns: 1fr; }
  .cd-about-block__img { max-height: 280px; }
  .cd-impact__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .cd-causes__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .cd-causes__card-body { padding: var(--space-sm) var(--space-md); }
  .cd-cards-row { grid-template-columns: 1fr 1fr; }
  .cd-hiw__steps { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .cd-perks__grid { grid-template-columns: 1fr; }
  .cd-spotlight__item {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cd-spotlight__img img {
    max-width: 180px;
    margin: 0 auto;
  }
  .cd-partners__grid {
    gap: var(--space-lg);
  }
  .cd-quote__text {
    font-size: 1.05rem;
  }
  .cd-partners__logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-xl);
  }
  .cd-partners__forest {
    height: 80px;
  }
  .cd-topo-divider {
    height: 50px;
  }
}

/* ============================================
   ACTION DETAIL PAGE - NIKE PDP STYLE
   ============================================ */
.page--action-detail .container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.adp__back {
  margin-bottom: var(--space-xl);
}

.adp__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-3xl);
  align-items: start;
}

.adp__image {
  position: sticky;
  top: 80px;
  overflow: hidden;
}

.adp__image img {
  width: 100%;
  height: auto;
  display: block;
}

.adp__info {
  padding-top: var(--space-md);
}

.adp__org {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.adp__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--space-xs);
  color: var(--text-primary);
}

.adp__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.adp__type-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--text-primary);
  color: #fff;
  border-radius: 30px;
}

.adp__cause {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.adp__points {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-md);
}

.adp__premier-upsell {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(238,44,103,0.08), rgba(248,32,178,0.06));
  border: 1px solid rgba(238,44,103,0.2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
}
.adp__premier-upsell:hover {
  border-color: rgba(238,44,103,0.4);
  background: linear-gradient(135deg, rgba(238,44,103,0.12), rgba(248,32,178,0.1));
}
.adp__premier-upsell-icon {
  color: var(--accent);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.adp__premier-upsell-icon .ic {
  width: 1.5rem;
  height: 1.5rem;
}
.adp__premier-upsell-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adp__premier-upsell-text strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
}
.adp__premier-upsell-text span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.adp__premier-upsell-arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.adp__impact {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* Petition-specific detail section */
.adp__petition {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.adp__petition-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.adp__petition-header .ic {
  width: 1.1em;
  height: 1.1em;
}

.adp__petition-progress {
  margin-bottom: var(--space-lg);
}

.adp__petition-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.adp__petition-fill {
  height: 100%;
  background: linear-gradient(90deg, #ee2c67, #f820b2);
  border-radius: 3px;
  transition: width 1s ease-out;
}

.adp__petition-counts {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.adp__petition-signed {
  font-weight: 700;
  color: var(--text-primary);
}

.adp__petition-letter-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.adp__petition-quote {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  border-left: 3px solid #ee2c67;
  padding-left: var(--space-md);
  margin: 0;
  font-style: italic;
}

.adp__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.adp__cta {
  width: 100%;
  padding: 16px;
  background: var(--text-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.adp__cta:hover {
  opacity: 0.85;
}

.adp__save {
  width: 100%;
  padding: 16px;
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-hover);
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}

.adp__save:hover {
  border-color: var(--text-primary);
}

.adp__details {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--border);
}

.adp__details details {
  border-bottom: 1px solid var(--border);
}

.adp__details summary {
  padding: var(--space-lg) 0;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adp__details summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--text-secondary);
}

.adp__details details[open] summary::after {
  content: '\2212';
}

.adp__details summary::-webkit-details-marker {
  display: none;
}

.adp__details p {
  padding: 0 0 var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.adp__related {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border);
}

.adp__related-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xl);
}

.action-grid--related {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 900px) {
  .adp__layout {
    grid-template-columns: 1fr;
  }
  .adp__image {
    position: static;
  }
  .action-grid--related {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   ACTION DETAIL - TYPE-SPECIFIC PREVIEW BLOCKS
   ============================================ */

/* Shared preview block layout */
.adp__media-preview,
.adp__quiz-preview,
.adp__poll-preview,
.adp__donate-preview,
.adp__volunteer-preview,
.adp__rsvp-preview,
.adp__checkin-preview,
.adp__share-preview,
.adp__follow-preview,
.adp__pledge-preview,
.adp__chorus-preview,
.adp__propel-preview,
.adp__code-preview,
.adp__create-preview {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--surface-raised, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  margin-bottom: 20px;
}

[data-theme="dark"] .adp__media-preview,
[data-theme="dark"] .adp__quiz-preview,
[data-theme="dark"] .adp__poll-preview,
[data-theme="dark"] .adp__donate-preview,
[data-theme="dark"] .adp__volunteer-preview,
[data-theme="dark"] .adp__rsvp-preview,
[data-theme="dark"] .adp__checkin-preview,
[data-theme="dark"] .adp__share-preview,
[data-theme="dark"] .adp__follow-preview,
[data-theme="dark"] .adp__pledge-preview,
[data-theme="dark"] .adp__chorus-preview,
[data-theme="dark"] .adp__propel-preview,
[data-theme="dark"] .adp__code-preview,
[data-theme="dark"] .adp__create-preview {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* Icons in preview blocks */
.adp__media-icon,
.adp__quiz-icon,
.adp__poll-icon,
.adp__volunteer-icon,
.adp__rsvp-icon,
.adp__checkin-icon,
.adp__share-icon,
.adp__follow-icon,
.adp__pledge-icon,
.adp__chorus-icon,
.adp__propel-icon,
.adp__code-icon,
.adp__create-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
}

[data-theme="dark"] .adp__media-icon,
[data-theme="dark"] .adp__quiz-icon,
[data-theme="dark"] .adp__poll-icon,
[data-theme="dark"] .adp__volunteer-icon,
[data-theme="dark"] .adp__rsvp-icon,
[data-theme="dark"] .adp__checkin-icon,
[data-theme="dark"] .adp__share-icon,
[data-theme="dark"] .adp__follow-icon,
[data-theme="dark"] .adp__pledge-icon,
[data-theme="dark"] .adp__chorus-icon,
[data-theme="dark"] .adp__propel-icon,
[data-theme="dark"] .adp__code-icon,
[data-theme="dark"] .adp__create-icon {
  background: rgba(255,255,255,0.06);
}

.adp__media-icon .ic,
.adp__quiz-icon .ic,
.adp__poll-icon .ic,
.adp__volunteer-icon .ic,
.adp__rsvp-icon .ic,
.adp__checkin-icon .ic,
.adp__share-icon .ic,
.adp__follow-icon .ic,
.adp__pledge-icon .ic,
.adp__chorus-icon .ic,
.adp__propel-icon .ic,
.adp__code-icon .ic,
.adp__create-icon .ic {
  width: 22px;
  height: 22px;
}

/* Info blocks */
.adp__media-info,
.adp__quiz-info,
.adp__poll-info,
.adp__volunteer-info,
.adp__rsvp-info,
.adp__checkin-info,
.adp__share-info,
.adp__follow-info,
.adp__pledge-info,
.adp__chorus-info,
.adp__propel-info,
.adp__code-info,
.adp__create-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.adp__media-format,
.adp__quiz-count,
.adp__poll-label,
.adp__volunteer-label,
.adp__rsvp-label,
.adp__checkin-label,
.adp__share-label,
.adp__follow-label,
.adp__pledge-label,
.adp__chorus-label,
.adp__chorus-count,
.adp__propel-label,
.adp__code-label,
.adp__create-label {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.adp__media-note,
.adp__quiz-note,
.adp__poll-note,
.adp__volunteer-note,
.adp__volunteer-dates,
.adp__rsvp-note,
.adp__checkin-note,
.adp__share-note,
.adp__follow-handle,
.adp__pledge-note,
.adp__chorus-note,
.adp__propel-note,
.adp__code-note,
.adp__create-note {
  font-size: 13px;
  color: var(--text-muted, #888);
  line-height: 1.4;
}

/* ======================== */
/* Quiz Detail Block (Rich) */
/* ======================== */
.adp__quiz-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

/* Stats strip */
.adp__quiz-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--surface-raised, #f7f7f7);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px 12px 0 0;
  gap: 12px;
}

[data-theme="dark"] .adp__quiz-stats {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.adp__quiz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.adp__quiz-stat-val {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.adp__quiz-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #999);
  font-weight: 500;
}

.adp__quiz-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border, #e0e0e0);
  flex-shrink: 0;
}

[data-theme="dark"] .adp__quiz-stat-divider {
  background: rgba(255,255,255,0.08);
}

/* Question previews */
.adp__quiz-questions {
  border: 1px solid var(--border, #e5e5e5);
  border-top: none;
  background: var(--bg, #fff);
  overflow: hidden;
}

[data-theme="dark"] .adp__quiz-questions {
  background: var(--surface, #1a1a1a);
  border-color: rgba(255,255,255,0.08);
}

.adp__quiz-questions-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #eee);
  background: var(--surface-raised, #fafafa);
}

[data-theme="dark"] .adp__quiz-questions-header {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

.adp__quiz-questions-icon { font-size: 18px; }
.adp__quiz-questions-icon .ic { width: 18px; height: 18px; }

.adp__quiz-questions-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #888);
}

.adp__quiz-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #f0f0f0);
  position: relative;
  transition: background 0.15s;
}

[data-theme="dark"] .adp__quiz-q { border-color: rgba(255,255,255,0.04); }

.adp__quiz-q:last-child { border-bottom: none; }

.adp__quiz-q--blurred {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
  opacity: 0.5;
}

.adp__quiz-q-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text, #111);
  color: var(--bg, #fff);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

[data-theme="dark"] .adp__quiz-q-num {
  background: #fff;
  color: #111;
}

.adp__quiz-q-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adp__quiz-q-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

.adp__quiz-q-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.adp__quiz-q-opt {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-raised, #f5f5f5);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #666);
  border: 1px solid var(--border, #e8e8e8);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .adp__quiz-q-opt {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}

.adp__quiz-q-lock {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.4;
}

.adp__quiz-q-more {
  padding: 12px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #999);
  border-top: 1px solid var(--border, #f0f0f0);
}

[data-theme="dark"] .adp__quiz-q-more { border-color: rgba(255,255,255,0.04); }

/* Topics */
.adp__quiz-topics {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--border, #e5e5e5);
  border-top: none;
  background: var(--surface-raised, #fafafa);
}

[data-theme="dark"] .adp__quiz-topics {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}

.adp__quiz-topics-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #999);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adp__quiz-topics-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adp__quiz-topic-tag {
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--text, #111);
  color: var(--bg, #fff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .adp__quiz-topic-tag {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

/* Community scores */
.adp__quiz-community {
  padding: 18px 20px;
  border: 1px solid var(--border, #e5e5e5);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--bg, #fff);
}

[data-theme="dark"] .adp__quiz-community {
  background: var(--surface, #1a1a1a);
  border-color: rgba(255,255,255,0.08);
}

.adp__quiz-community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.adp__quiz-community-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.adp__quiz-community-count {
  font-size: 12px;
  color: var(--text-muted, #999);
  font-weight: 500;
}

.adp__quiz-community-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adp__quiz-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.adp__quiz-score-label {
  width: 56px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #777);
  text-align: right;
  flex-shrink: 0;
}

.adp__quiz-score-bar {
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background: var(--surface-raised, #f0f0f0);
  overflow: hidden;
}

[data-theme="dark"] .adp__quiz-score-bar { background: rgba(255,255,255,0.06); }

.adp__quiz-score-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--text, #111);
  transition: width 0.6s ease;
}

[data-theme="dark"] .adp__quiz-score-fill { background: rgba(255,255,255,0.4); }

.adp__quiz-score-fill--gold {
  background: linear-gradient(90deg, #ffd43b, #fab005);
}

[data-theme="dark"] .adp__quiz-score-fill--gold {
  background: linear-gradient(90deg, #ffd43b, #fab005);
}

.adp__quiz-score-pct {
  width: 32px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}

.adp__quiz-community-note {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-raised, #f7f7f7);
  font-size: 12px;
  color: var(--text-muted, #888);
  text-align: center;
  font-weight: 500;
}

[data-theme="dark"] .adp__quiz-community-note { background: rgba(255,255,255,0.03); }

/* Mobile adjustments */
@media (max-width: 640px) {
  .adp__quiz-stats { padding: 12px 16px; gap: 8px; }
  .adp__quiz-stat-val { font-size: 14px; }
  .adp__quiz-stat-label { font-size: 10px; }
  .adp__quiz-q { padding: 12px 16px; }
  .adp__quiz-q-opts { grid-template-columns: 1fr 1fr; gap: 4px; }
  .adp__quiz-q-opt { padding: 6px 8px; font-size: 11px; }
  .adp__quiz-topics { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
  .adp__quiz-community { padding: 14px 16px; }
}

/* Donate chip row */
.adp__donate-preview {
  flex-direction: column;
  align-items: stretch;
}

.adp__donate-amounts {
  display: flex;
  gap: 8px;
}

.adp__donate-chip {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #ddd);
  background: transparent;
  transition: all 0.15s ease;
}

.adp__donate-chip--popular {
  background: var(--text, #111);
  color: var(--bg, #fff);
  border-color: var(--text, #111);
}

[data-theme="dark"] .adp__donate-chip--popular {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.adp__donate-note {
  font-size: 13px;
  color: var(--text-muted, #888);
  margin-top: 8px;
}

/* Propel meter */
.adp__propel-preview {
  flex-wrap: wrap;
}

.adp__propel-meter {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.08);
  margin-top: 4px;
  overflow: hidden;
}

[data-theme="dark"] .adp__propel-meter {
  background: rgba(255,255,255,0.08);
}

.adp__propel-meter-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent, #ee2c67);
  transition: width 0.6s ease;
}

/* Follow handle */
.adp__follow-handle {
  font-size: 13px;
  color: var(--text-muted, #888);
}

/* Premier active badge (for detail page) */
.adp__premier-active {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: rgba(238,44,103,0.08);
  border: 1px solid rgba(238,44,103,0.15);
  border-radius: 10px;
  margin-bottom: 12px;
}

.adp__premier-active-badge {
  font-weight: 800;
  font-size: 13px;
  color: #ee2c67;
  display: flex;
  align-items: center;
  gap: 4px;
}

.adp__premier-active-badge .ic {
  width: 14px;
  height: 14px;
}

.adp__premier-active-sub {
  font-size: 12px;
  color: var(--text-muted, #888);
}

/* Platform-specific follow detail variants */
.adp__follow-preview--youtube .adp__follow-icon {
  background: rgba(255, 0, 0, 0.1);
  color: #ff0000;
}
.adp__follow-preview--youtube .adp__follow-icon .ic { color: #ff0000; }

.adp__follow-preview--x .adp__follow-icon {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .adp__follow-preview--x .adp__follow-icon {
  background: rgba(255, 255, 255, 0.1);
}

.adp__follow-preview--spotify .adp__follow-icon {
  background: rgba(29, 185, 84, 0.1);
  color: #1DB954;
}
.adp__follow-preview--spotify .adp__follow-icon .ic { color: #1DB954; }

/* Swipe detail preview */
.adp__swipe-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--surface-raised, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  margin-bottom: 20px;
}

[data-theme="dark"] .adp__swipe-preview {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.adp__swipe-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
}

[data-theme="dark"] .adp__swipe-icon {
  background: rgba(255,255,255,0.06);
}

.adp__swipe-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.adp__swipe-label {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.adp__swipe-note {
  font-size: 13px;
  color: var(--text-muted, #888);
  line-height: 1.4;
}

.adp__swipe-arrows {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e0e0e0);
  margin-top: 4px;
}

[data-theme="dark"] .adp__swipe-arrows {
  border-top-color: rgba(255,255,255,0.08);
}

.adp__swipe-arrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adp__swipe-arrow--left { color: #ff4444; }
.adp__swipe-arrow--right { color: #22c55e; }

/* --- Detail Preview: Daily Check-In --- */
.adp__checkin-daily,
.adp__refer-preview,
.adp__qr-preview,
.adp__photo-preview,
.adp__location-preview,
.adp__matching-preview,
.adp__comment-preview,
.adp__upvote-preview,
.adp__team-preview,
.adp__civic-preview,
.adp__push-preview,
.adp__profile-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--surface-raised, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  margin-bottom: 20px;
}

[data-theme="dark"] .adp__checkin-daily,
[data-theme="dark"] .adp__refer-preview,
[data-theme="dark"] .adp__qr-preview,
[data-theme="dark"] .adp__photo-preview,
[data-theme="dark"] .adp__location-preview,
[data-theme="dark"] .adp__matching-preview,
[data-theme="dark"] .adp__comment-preview,
[data-theme="dark"] .adp__upvote-preview,
[data-theme="dark"] .adp__team-preview,
[data-theme="dark"] .adp__civic-preview,
[data-theme="dark"] .adp__push-preview,
[data-theme="dark"] .adp__profile-preview {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.adp__checkin-daily-icon, .adp__refer-icon, .adp__qr-icon, .adp__photo-icon,
.adp__location-icon, .adp__matching-icon, .adp__comment-icon, .adp__upvote-icon,
.adp__team-icon, .adp__civic-icon, .adp__push-icon, .adp__profile-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
}
.adp__checkin-daily-icon svg, .adp__refer-icon svg, .adp__qr-icon svg, .adp__photo-icon svg,
.adp__location-icon svg, .adp__matching-icon svg, .adp__comment-icon svg, .adp__upvote-icon svg,
.adp__team-icon svg, .adp__civic-icon svg, .adp__push-icon svg, .adp__profile-icon svg {
  width: 24px; height: 24px;
}

[data-theme="dark"] .adp__checkin-daily-icon,
[data-theme="dark"] .adp__refer-icon,
[data-theme="dark"] .adp__qr-icon,
[data-theme="dark"] .adp__photo-icon,
[data-theme="dark"] .adp__location-icon,
[data-theme="dark"] .adp__matching-icon,
[data-theme="dark"] .adp__comment-icon,
[data-theme="dark"] .adp__upvote-icon,
[data-theme="dark"] .adp__team-icon,
[data-theme="dark"] .adp__civic-icon,
[data-theme="dark"] .adp__push-icon,
[data-theme="dark"] .adp__profile-icon {
  background: rgba(255,255,255,0.06);
}

.adp__checkin-daily-info, .adp__refer-info, .adp__qr-info, .adp__photo-info,
.adp__location-info, .adp__matching-info, .adp__comment-info, .adp__upvote-info,
.adp__team-info, .adp__civic-info, .adp__push-info, .adp__profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.adp__checkin-daily-label, .adp__refer-label, .adp__qr-label, .adp__photo-label,
.adp__location-label, .adp__matching-label, .adp__comment-label, .adp__upvote-label,
.adp__team-label, .adp__civic-label, .adp__push-label, .adp__profile-label {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.adp__checkin-daily-streak, .adp__checkin-daily-note,
.adp__refer-reward, .adp__refer-note,
.adp__qr-note, .adp__photo-note, .adp__location-note,
.adp__matching-count, .adp__matching-note,
.adp__comment-note, .adp__upvote-note,
.adp__team-progress, .adp__team-note,
.adp__civic-note, .adp__push-note,
.adp__profile-progress, .adp__profile-note {
  font-size: 13px;
  color: var(--text-muted, #888);
  line-height: 1.4;
}

.adp__team-bar {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.adp__team-bar-fill {
  height: 100%;
  background: var(--green, #22c55e);
  border-radius: 3px;
  transition: width 0.5s ease;
}
[data-theme="dark"] .adp__team-bar { background: rgba(255,255,255,0.08); }

.adp__civic-preview--email .adp__civic-icon { color: #3b82f6; }
.adp__civic-preview--call .adp__civic-icon { color: #22c55e; }

/* Boycott Pledge detail preview */
.adp__boycott-preview, .adp__mutual-preview {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: 14px;
  background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .adp__boycott-preview,
[data-theme="dark"] .adp__mutual-preview {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
}
.adp__boycott-icon, .adp__mutual-icon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.05); border-radius: 10px;
}
.adp__boycott-icon svg, .adp__mutual-icon svg { width: 24px; height: 24px; }
[data-theme="dark"] .adp__boycott-icon,
[data-theme="dark"] .adp__mutual-icon { background: rgba(255,255,255,0.06); }
.adp__boycott-icon { color: #ef4444; }
.adp__mutual-icon { color: #ec4899; }
.adp__boycott-info, .adp__mutual-info {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.adp__boycott-label, .adp__mutual-label { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.adp__boycott-count, .adp__boycott-note,
.adp__mutual-stat, .adp__mutual-note { font-size: 13px; color: var(--text-muted, #888); line-height: 1.4; }

/* ============================================
   TOUR DETAIL PAGE - CONCERT TICKETS
   ============================================ */
.tour-detail__hero {
  position: relative;
  width: calc(100% + var(--space-lg) * 2);
  margin-left: calc(var(--space-lg) * -1);
  margin-top: calc(var(--space-xl) * -1);
  overflow: hidden;
}

.tour-detail__hero-img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.tour-detail__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.1) 100%);
}

.tour-detail__hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--space-2xl) var(--space-2xl);
}

.tour-detail__tag {
  display: inline-block;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  margin-bottom: var(--space-md);
}

.tour-detail__artist {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.tour-detail__tour-name {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.7);
  margin-top: var(--space-sm);
}

.tour-detail__body {
  padding: var(--space-2xl) 0;
}

.tour-detail__info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.tour-detail__price-block {
  display: flex;
  flex-direction: column;
}

.tour-detail__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--text-primary);
}

.tour-detail__price-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.tour-detail__cta {
  padding: 14px 40px;
  background: var(--text-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.tour-detail__cta:hover {
  opacity: 0.85;
}

.tour-detail__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: var(--space-xl);
  max-width: 700px;
}

.tour-detail__dates-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

.tour-detail__dates {
  display: flex;
  flex-direction: column;
}

.tour-date {
  display: flex;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.tour-date:first-child {
  border-top: 1px solid var(--border);
}

.tour-date:hover {
  background: var(--bg-secondary);
}

.tour-date__date {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  width: 100px;
  flex-shrink: 0;
}

.tour-date__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tour-date__venue {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.tour-date__city {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.tour-date__select {
  padding: 8px 24px;
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-hover);
  border-radius: 30px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.tour-date__select:hover {
  border-color: var(--text-primary);
}

.tour-date__select--active {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

@media (max-width: 640px) {
  .tour-detail__hero-img { height: 320px; }
  .tour-detail__artist { font-size: var(--text-2xl); }
  .tour-detail__info-bar { flex-direction: column; gap: var(--space-md); align-items: flex-start; }
  .tour-detail__cta { width: 100%; text-align: center; }
  .tour-date__date { width: 70px; font-size: var(--text-base); }
}

/* ============================================
   REWARD DETAIL PAGE - NIKE PDP STYLE
   ============================================ */
.page--reward-detail .container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.rdp__back {
  margin-bottom: var(--space-xl);
}

.rdp__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-3xl);
  align-items: start;
}

/* Image - large left side */
.rdp__image {
  position: sticky;
  top: 80px;
  overflow: hidden;
}

.rdp__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Info panel - right side */
.rdp__info {
  padding-top: var(--space-md);
}

.rdp__brand {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.rdp__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--space-xs);
  color: var(--text-primary);
}

.rdp__price {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-md);
}

.rdp__sweep-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.rdp__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.rdp__cta {
  width: 100%;
  padding: 16px;
  background: var(--text-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.rdp__cta:hover {
  opacity: 0.85;
}

.rdp__save {
  width: 100%;
  padding: 16px;
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-hover);
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s;
}

.rdp__save:hover {
  border-color: var(--text-primary);
}

/* Expandable details sections */
.rdp__details {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--border);
}

.rdp__details details {
  border-bottom: 1px solid var(--border);
}

.rdp__details summary {
  padding: var(--space-lg) 0;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rdp__details summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--text-secondary);
}

.rdp__details details[open] summary::after {
  content: '−';
}

.rdp__details summary::-webkit-details-marker {
  display: none;
}

.rdp__details p {
  padding: 0 0 var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Related section */
.rdp__related {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border);
}

.rdp__related-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xl);
}

.rdp__related .rewards-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .rdp__layout {
    grid-template-columns: 1fr;
  }
  .rdp__image {
    position: static;
  }
  .rdp__related .rewards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   ACTION UX MODALS (.aux)
   ============================================ */
.aux {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.aux--in { opacity: 1; }
.aux--in .aux__card { transform: translateY(0); }
.aux--out { opacity: 0; pointer-events: none; }
.aux--out .aux__card { transform: translateY(24px); }

.aux__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.aux__card {
  position: relative;
  background: #fff;
  width: 92%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 0;
  transform: translateY(24px);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.aux__card--wide { max-width: 640px; }

.aux__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: none; background: #f5f5f5;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.aux__close:hover { background: #e0e0e0; }

.aux__head {
  padding: 40px 32px 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aux__icon { font-size: 32px; }
.aux__org {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  font-weight: 600;
}
.aux__step {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #aaa;
  font-weight: 600;
}
.aux__title {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #111;
}
.aux__pts {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.aux__body { padding: 24px 32px 32px; }

/* Shared CTA */
.aux__cta {
  display: block;
  width: 100%;
  padding: 16px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 16px;
}
.aux__cta:hover:not(:disabled) { background: #333; }
.aux__cta:active:not(:disabled) { transform: scale(0.98); }
.aux__cta--disabled {
  background: #ccc;
  cursor: not-allowed;
}
.aux__cta--ready {
  background: var(--green);
  color: #000;
  animation: auxPulse 1.5s ease infinite;
}
@keyframes auxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,200,83,.4); }
  50% { box-shadow: 0 0 0 10px rgba(0,200,83,0); }
}

/* --- Full-Screen Video/Listen Experience --- */
.vscreen {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #000;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.vscreen--in { opacity: 1; }
.vscreen--out { opacity: 0; pointer-events: none; }

.vscreen__bg {
  position: absolute;
  inset: 0;
}
.vscreen__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 1s ease;
}
.vscreen__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.2) 100%);
}

.vscreen__back {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 5;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.vscreen__back:hover { background: rgba(255,255,255,.2); }

.vscreen__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 48px 80px;
  z-index: 3;
  transition: opacity 0.6s ease;
}
.vscreen__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.vscreen__org {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}
.vscreen__pts {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: rgba(0,200,83,.15);
  padding: 3px 10px;
}
.vscreen__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 48px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.vscreen__desc {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  max-width: 560px;
  line-height: 1.5;
  margin-bottom: 32px;
}
.vscreen__play-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.vscreen__play {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.vscreen__play:hover { transform: scale(1.08); }
.vscreen__play-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.5);
  font-weight: 600;
}

/* Player state */
.vscreen__player {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vscreen__cinema {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vscreen__cinema-overlay {
  text-align: center;
}
.vscreen__cinema-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 40px;
  margin-bottom: 16px;
}
.vscreen__cinema-eq span {
  width: 4px;
  background: #fff;
  border-radius: 2px;
  animation: eqBounce 0.8s ease infinite alternate;
}
.vscreen__cinema-eq span:nth-child(1) { height: 12px; animation-delay: 0s; }
.vscreen__cinema-eq span:nth-child(2) { height: 24px; animation-delay: 0.15s; }
.vscreen__cinema-eq span:nth-child(3) { height: 36px; animation-delay: 0.3s; }
.vscreen__cinema-eq span:nth-child(4) { height: 20px; animation-delay: 0.45s; }
.vscreen__cinema-eq span:nth-child(5) { height: 28px; animation-delay: 0.6s; }
@keyframes eqBounce {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}
.vscreen__cinema-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.5);
}

.vscreen__controls {
  padding: 0 48px 48px;
}
.vscreen__bar {
  height: 3px;
  background: rgba(255,255,255,.15);
  position: relative;
  cursor: default;
  margin-bottom: 12px;
}
.vscreen__bar-fill {
  height: 100%;
  background: #fff;
  width: 0%;
  transition: width 1s linear;
}
.vscreen__bar-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 1s linear;
  box-shadow: 0 0 8px rgba(255,255,255,.4);
}
.vscreen__time-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vscreen__time, .vscreen__time-total {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
}
.vscreen__notice {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Completion screen */
.vscreen__complete {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}
.vscreen__complete-inner {
  text-align: center;
  opacity: 0;
  transform: scale(0.8);
}
.vscreen__complete--in .vscreen__complete-inner {
  animation: vscreenComplete 0.6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes vscreenComplete {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.vscreen__complete-emoji {
  font-size: 64px;
  margin-bottom: 16px;
  animation: vscreenEmojiBounce 0.5s 0.2s cubic-bezier(.22,1,.36,1) both;
}
@keyframes vscreenEmojiBounce {
  0% { transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}
.vscreen__complete-pts {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}
.vscreen__complete-verb {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 32px;
}
.vscreen__complete-cta {
  display: inline-block;
  padding: 16px 48px;
  background: #fff;
  color: #000;
  border: none;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s;
}
.vscreen__complete-cta:hover { transform: scale(1.03); }
.vscreen__complete-cta:active { transform: scale(0.98); }

@media (max-width: 600px) {
  .vscreen__content { padding: 0 24px 60px; }
  .vscreen__controls { padding: 0 24px 32px; }
  .vscreen__back { top: 16px; left: 16px; }
  .vscreen__title { font-size: 24px; }
  .vscreen__complete-pts { font-size: 40px; }
}

/* --- Form (Petition/Register/Pledge/Join) --- */
.aux-form__desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.5;
}
.aux-form__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.aux-form__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ddd;
  font-size: 15px;
  background: #fafafa;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.aux-form__input:focus {
  outline: none;
  border-color: #111;
  background: #fff;
}
.aux-form__input--error {
  border-color: #e53935;
  animation: auxShake 0.4s ease;
}
@keyframes auxShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.aux-form__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  margin: 12px 0;
}
.aux-form__check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #111;
}
.aux-form__check--error { color: #e53935; }
.aux-form__counter {
  text-align: center;
  margin-bottom: 8px;
}
.aux-form__count {
  font-size: 14px;
  color: #888;
  font-weight: 600;
}

/* --- Quiz Modal --- */
.aux-quiz__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.aux-quiz__steps {
  display: flex;
  gap: 6px;
}
.aux-quiz__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: all 0.3s;
}
.aux-quiz__dot--done { background: var(--green, #69db7c); }
.aux-quiz__dot--active { background: #fff; transform: scale(1.3); }
.aux-quiz__counter {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}
.aux-quiz__progress {
  height: 3px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 24px;
  border-radius: 2px;
  overflow: hidden;
}
.aux-quiz__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green, #69db7c), #ffd43b);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}
.aux-quiz__question {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.35;
  color: var(--text, #111);
}
.aux-quiz__opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aux-quiz__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text, #111);
}
.aux-quiz__opt:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.1);
}
.aux-quiz__opt-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  transition: all 0.2s;
}
.aux-quiz__opt-text { flex: 1; }
.aux-quiz__opt--correct {
  background: rgba(105, 219, 124, 0.15) !important;
  border-color: #69db7c !important;
}
.aux-quiz__opt--correct .aux-quiz__opt-letter {
  background: #69db7c;
  color: #111;
}
.aux-quiz__opt--wrong {
  background: rgba(255, 107, 107, 0.15) !important;
  border-color: #ff6b6b !important;
}
.aux-quiz__opt--wrong .aux-quiz__opt-letter {
  background: #ff6b6b;
  color: #fff;
}
.aux-quiz__opt:disabled { cursor: default; opacity: 0.85; }

/* Explanation callout */
.aux-quiz__explain {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}
.aux-quiz__explain--in { opacity: 1; transform: translateY(0); }
.aux-quiz__explain-icon {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

/* Results page */
.aux-quiz__results {
  text-align: center;
  padding: 8px 0 0;
}
.aux-quiz__gauge {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 16px;
}
.aux-quiz__gauge-svg {
  width: 100%;
  height: 100%;
}
.aux-quiz__gauge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.aux-quiz__gauge-emoji { font-size: 28px; margin-bottom: 2px; }
.aux-quiz__gauge-score {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--text, #111);
}
.aux-quiz__msg {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 20px;
}

/* Answer breakdown */
.aux-quiz__breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  text-align: left;
}
.aux-quiz__breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
}
.aux-quiz__breakdown-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.aux-quiz__breakdown-row:has(.aux-quiz__breakdown-status--correct) .aux-quiz__breakdown-icon {
  background: rgba(105, 219, 124, 0.2);
  color: #69db7c;
}
.aux-quiz__breakdown-row:has(.aux-quiz__breakdown-status--wrong) .aux-quiz__breakdown-icon {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}
.aux-quiz__breakdown-q {
  flex: 1;
  color: rgba(255,255,255,0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aux-quiz__breakdown-status {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 11px;
}
.aux-quiz__breakdown-status--correct { color: #69db7c; }
.aux-quiz__breakdown-status--wrong { color: #ff6b6b; }

/* Light mode overrides */
.aux-quiz__dot { background: #ddd; }
.aux-quiz__dot--active { background: #111; }
.aux-quiz__counter { color: #999; }
.aux-quiz__progress { background: #eee; }
.aux-quiz__progress-bar { background: linear-gradient(90deg, #111, #333); }
.aux-quiz__opt { background: #f5f5f5; border-color: #e5e5e5; color: #111; }
.aux-quiz__opt:hover:not(:disabled) { border-color: #111; background: #f0f0f0; }
.aux-quiz__opt-letter { background: #e5e5e5; color: #666; }
.aux-quiz__explain { background: #f5f5f5; border-color: #e5e5e5; color: #555; }
.aux-quiz__msg { color: #555; }
.aux-quiz__breakdown-row { background: #f5f5f5; }
.aux-quiz__breakdown-q { color: #666; }

/* Dark mode (modal is always dark-themed via .aux) */
[data-theme="dark"] .aux-quiz__dot { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .aux-quiz__dot--done { background: var(--green, #69db7c); }
[data-theme="dark"] .aux-quiz__dot--active { background: #fff; }
[data-theme="dark"] .aux-quiz__counter { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .aux-quiz__progress { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .aux-quiz__progress-bar { background: linear-gradient(90deg, var(--green, #69db7c), #ffd43b); }
[data-theme="dark"] .aux-quiz__question { color: #fff; }
[data-theme="dark"] .aux-quiz__opt { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .aux-quiz__opt:hover:not(:disabled) { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.1); }
[data-theme="dark"] .aux-quiz__opt-letter { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
[data-theme="dark"] .aux-quiz__explain { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
[data-theme="dark"] .aux-quiz__gauge-score { color: #fff; }
[data-theme="dark"] .aux-quiz__msg { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .aux-quiz__breakdown-row { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .aux-quiz__breakdown-q { color: rgba(255,255,255,0.6); }

/* --- Poll / Survey --- */
.aux-poll__step {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  margin-bottom: 12px;
}
.aux-poll__question {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}
.aux-poll__opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aux-poll__opt {
  width: 100%;
  padding: 14px 16px;
  background: #f5f5f5;
  border: 2px solid transparent;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aux-poll__opt:hover:not(:disabled) { border-color: #111; }
.aux-poll__opt--selected {
  border-color: #111;
  font-weight: 600;
}
.aux-poll__opt-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
}
.aux-poll__opt--selected .aux-poll__opt-dot {
  background: #111;
  border-color: #111;
}
.aux-poll__opt-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,.06);
  transition: width 0.6s ease;
}
.aux-poll__opt-label {
  position: relative;
  z-index: 1;
  flex: 1;
}
.aux-poll__opt-pct {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 14px;
  color: #555;
}
.aux-poll__done {
  text-align: center;
  padding: 20px 0;
}
.aux-poll__thanks {
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 8px;
}

/* --- Share / Tweet --- */
.aux-share__preview {
  margin-bottom: 24px;
}
.aux-share__preview-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f8f8f8;
  border: 1px solid #eee;
}
.aux-share__preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}
.aux-share__preview-text {
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}
.aux-share__preview-text strong {
  display: block;
  color: #111;
  margin-bottom: 4px;
}
.aux-share__platforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aux-share__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: #f5f5f5;
  border: 2px solid transparent;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.aux-share__btn:hover { border-color: #111; }
.aux-share__btn--selected {
  background: #e8f5e9;
  border-color: var(--green);
}
.aux-share__btn-icon {
  width: 24px;
  text-align: center;
  font-size: 18px;
}
.aux-share__note {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin-top: 16px;
}

/* --- Follow --- */
.aux-follow__profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.aux-follow__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #eee;
}
.aux-follow__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aux-follow__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aux-follow__info strong { font-size: 16px; }
.aux-follow__info span { font-size: 13px; color: #888; }
.aux-follow__btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.aux-follow__btn:disabled { opacity: 0.6; }
.aux-follow__confirm {
  text-align: center;
  padding: 16px 0;
}
.aux-follow__confirm p {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

/* --- RSVP / Check-in / Volunteer --- */
.aux-rsvp__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 12px;
}
.aux-rsvp__detail {
  font-size: 13px;
  color: #888;
  font-style: italic;
  margin-bottom: 20px;
}
.aux-rsvp__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.aux-rsvp__location {
  text-align: center;
  padding: 24px;
  margin-bottom: 20px;
}
.aux-rsvp__pin { font-size: 40px; margin-bottom: 8px; }
.aux-rsvp__location p { font-size: 14px; color: #666; }
.aux-rsvp__count {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin-bottom: 8px;
}

/* --- Read / Discover --- */
.aux-read__article {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
  scroll-behavior: smooth;
}
.aux-read__hero {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.aux-read__content {
  padding: 20px 4px;
}
.aux-read__content h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.aux-read__content p {
  font-size: 14px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 16px;
}
.aux-read__progress-wrap {
  position: relative;
  margin-bottom: 8px;
}
.aux-read__progress-bar {
  height: 3px;
  background: #111;
  width: 0%;
  transition: width 0.3s ease;
}
.aux-read__progress-label {
  font-size: 12px;
  color: #999;
  display: block;
  margin-top: 4px;
}

/* --- Discover Content (rich sections) --- */
.aux-read__discover-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}
.aux-read__discover-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FF8E53;
  margin-bottom: 8px;
}
.aux-read__discover-badge .ic {
  width: 14px;
  height: 14px;
  color: #FF8E53;
}
.aux-read__discover-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}
.aux-read__discover-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.aux-read__discover-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.aux-read__discover-heading {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}
.aux-read__discover-section p {
  font-size: 14px;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

/* ============================================
   PORTAL DARK COSMOS THEME
   Applied when modal has .aux--portal class
   ============================================ */
.aux--portal .aux__card {
  background: #080810;
  color: #E8E0F5;
  border: 1px solid rgba(255, 142, 83, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(167, 139, 250, 0.06);
}
.aux--portal .aux__head {
  background: linear-gradient(180deg, #0E0E1A 0%, #080810 100%);
  border-bottom: 1px solid rgba(255, 142, 83, 0.1);
}
.aux--portal .aux__icon {
  color: #FF8E53;
}
.aux--portal .aux__org {
  color: #FF8E53;
  letter-spacing: 0.1em;
}
.aux--portal .aux__title {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.aux--portal .aux__pts {
  background: linear-gradient(135deg, #FF8E53, #FF6B9D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.aux--portal .aux__close {
  color: #6B6B8D;
}
.aux--portal .aux__close:hover {
  color: #FF8E53;
}
/* Portal read modal — give the article way more room */
.aux--portal .aux-read__article {
  background: #0E0E1A;
  max-height: 60vh;
}
/* Shrink the hero SVG — it's just the logo, not a photo */
.aux--portal .aux-read__hero {
  aspect-ratio: 3/1;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;
  border-bottom: 1px solid rgba(255, 142, 83, 0.08);
}
.aux--portal .aux-read__content {
  background: #080810;
  padding: 24px 20px;
}
.aux--portal .aux-read__content h3 {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.aux--portal .aux-read__content p {
  color: #9090AA;
}
.aux--portal .aux-read__discover-header {
  border-bottom-color: rgba(255, 142, 83, 0.1);
  margin-bottom: 24px;
  padding-bottom: 20px;
}
.aux--portal .aux-read__discover-badge {
  color: #FF8E53;
  background: rgba(255, 142, 83, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aux--portal .aux-read__discover-badge .ic {
  color: #FF8E53;
}
.aux--portal .aux-read__discover-subtitle {
  color: #6B6B8D;
  font-size: 14px;
  line-height: 1.7;
  margin-top: 10px;
}
.aux--portal .aux-read__discover-section {
  border-bottom-color: rgba(255, 255, 255, 0.04);
  margin-bottom: 24px;
  padding-bottom: 24px;
}
.aux--portal .aux-read__discover-heading {
  color: #E8E0F5;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  margin-bottom: 10px;
}
.aux--portal .aux-read__discover-section p {
  color: #9090AA;
  line-height: 1.8;
  font-size: 14px;
}
.aux--portal .aux-read__progress-wrap {
  background: #0E0E1A;
  padding: 8px 0 4px;
}
.aux--portal .aux-read__progress-bar {
  background: linear-gradient(90deg, #FF6B9D, #FF8E53, #FFC844);
  height: 3px;
}
.aux--portal .aux-read__progress-label {
  color: #6B6B8D;
}
.aux--portal .aux__cta,
.aux--portal #auxReadCta {
  background: linear-gradient(135deg, #FF8E53 0%, #FF6B9D 100%);
  color: #fff;
  font-family: 'Urbanist', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
}
.aux--portal .aux__cta:hover,
.aux--portal #auxReadCta:hover {
  background: linear-gradient(135deg, #FF7A3D 0%, #FF5588 100%);
  box-shadow: 0 8px 32px rgba(255, 107, 157, 0.25);
}
.aux--portal .aux__cta--disabled,
.aux--portal #auxReadCta:disabled {
  background: #1A1A30;
  color: #6B6B8D;
  box-shadow: none;
}
.aux--portal .aux__cta--ready,
.aux--portal #auxReadCta.aux__cta--ready {
  background: linear-gradient(135deg, #FF8E53 0%, #FF6B9D 100%) !important;
  color: #fff !important;
}
/* Portal body background match */
.aux--portal .aux__body {
  background: #080810;
}

/* --- Propel --- */
.aux-propel__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 20px;
}
.aux-propel__meter {
  height: 32px;
  background: #f0f0f0;
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}
.aux-propel__meter-fill {
  height: 100%;
  background: #111;
  transition: width 0.8s ease;
}
.aux-propel__meter-label {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #888;
}
.aux-propel__explainer {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
}

/* --- Chorus --- */
.aux-chorus__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 16px;
}
.aux-chorus__voices {
  text-align: center;
  margin-bottom: 16px;
}
.aux-chorus__voice-count {
  font-family: var(--font-display);
  font-size: 28px;
  color: #111;
  text-transform: uppercase;
}
.aux-chorus__statement {
  background: #f8f8f8;
  padding: 20px;
  margin-bottom: 16px;
  border-left: 3px solid #111;
}
.aux-chorus__statement p {
  font-size: 14px;
  font-style: italic;
  color: #444;
  line-height: 1.6;
}

/* --- Action Code --- */
.aux-code__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 20px;
}
.aux-code__input-wrap { margin-bottom: 12px; }
.aux-code__input {
  width: 100%;
  padding: 16px;
  border: 2px solid #ddd;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-sizing: border-box;
}
.aux-code__input:focus {
  outline: none;
  border-color: #111;
}
.aux-code__hint {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin-bottom: 8px;
}

/* --- User Content / Create --- */
.aux-create__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 16px;
}
.aux-create__textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #ddd;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
  font-family: inherit;
}
.aux-create__textarea:focus {
  outline: none;
  border-color: #111;
}
.aux-create__meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 8px;
}
.aux-create__counter {
  font-size: 12px;
  color: #aaa;
}

/* --- Generic fallback --- */
.aux-generic__impact {
  font-size: 14px;
  color: #888;
  margin: 16px 0;
  text-align: center;
}

/* ============================================
   SWIPE UX (.aux-swipe) - Tinder-style cards
   ============================================ */
.aux-swipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.aux-swipe__counter {
  font-size: 13px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aux-swipe__deck {
  position: relative;
  width: 300px;
  height: 400px;
  touch-action: none;
}

@media (max-width: 480px) {
  .aux-swipe__deck { width: min(260px, 85vw); height: 350px; }
}

.swipe-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  cursor: grab;
  transition: transform 0.3s ease;
  user-select: none;
}

.swipe-card:active { cursor: grabbing; }

.swipe-card__img {
  position: absolute;
  inset: 0;
}

.swipe-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swipe-card__overlay-left,
.swipe-card__overlay-right {
  position: absolute;
  top: 24px;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
  border: 3px solid;
}

.swipe-card__overlay-left {
  right: 16px;
  color: #e53935;
  border-color: #e53935;
  background: rgba(229,57,53,0.15);
  transform: rotate(12deg);
}

.swipe-card__overlay-right {
  left: 16px;
  color: #43a047;
  border-color: #43a047;
  background: rgba(67,160,71,0.15);
  transform: rotate(-12deg);
}

.swipe-card__overlay--visible { opacity: 1; }

.swipe-card__statement {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 20px 24px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  z-index: 1;
}

.swipe-card__statement p {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.swipe-card--exit-left {
  transform: translateX(-120%) rotate(-20deg) !important;
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.swipe-card--exit-right {
  transform: translateX(120%) rotate(20deg) !important;
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.aux-swipe__buttons {
  display: flex;
  gap: 32px;
}

.aux-swipe__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  justify-content: center;
  padding: 0;
}

.aux-swipe__btn span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aux-swipe__btn--left {
  border-color: #e53935;
  color: #e53935;
}

.aux-swipe__btn--left:hover {
  background: rgba(229,57,53,0.1);
  transform: scale(1.08);
}

.aux-swipe__btn--right {
  border-color: #43a047;
  color: #43a047;
}

.aux-swipe__btn--right:hover {
  background: rgba(67,160,71,0.1);
  transform: scale(1.08);
}

.aux-swipe__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}

.aux-swipe__done-emoji { font-size: 40px; }

.aux-swipe__done-text {
  font-size: 16px;
  font-weight: 600;
  color: #888;
}

/* ============================================
   FOLLOW UX VARIANTS (YouTube, Spotify, X)
   ============================================ */
.aux-follow--youtube .aux-follow__avatar--yt {
  position: relative;
}

.aux-follow__yt-play {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  background: #ff0000;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aux-follow__yt-play svg { width: 16px; height: 16px; }

.aux-follow__btn--yt {
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  color: #fff !important;
}

.aux-follow__btn--yt:hover {
  background: #cc0000 !important;
}

.aux-follow--spotify .aux-follow__avatar--spotify {
  position: relative;
}

.aux-follow__spotify-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  background: #191414;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aux-follow__spotify-badge svg { width: 18px; height: 18px; }

.aux-follow__btn--spotify {
  background: #1DB954 !important;
  border-color: #1DB954 !important;
  color: #fff !important;
}

.aux-follow__btn--spotify:hover {
  background: #1aa34a !important;
}

.aux-follow__platform-stats {
  text-align: center;
  padding: 8px 0;
  font-size: 13px;
  color: #888;
}

/* ============================================
   DAILY CHECK-IN UX (.aux-checkin)
   ============================================ */
.aux-checkin { text-align: center; padding: 12px 0; }
.checkin__flame { margin-bottom: 8px; }
.checkin__flame svg { width: 48px; height: 48px; color: #ff6b35; }
.checkin__streak-num { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.checkin__streak-label { font-size: 14px; color: #888; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 20px; }
.checkin__dots { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.checkin__dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #888; transition: all 0.3s; }
.checkin__dot--done { background: var(--green, #22c55e); border-color: var(--green, #22c55e); color: #fff; }
.checkin__dot--done svg { width: 18px; height: 18px; }
.checkin__dot--current { border-color: var(--green, #22c55e); color: var(--green, #22c55e); animation: pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
.checkin__bonus { font-size: 13px; color: #888; margin: 12px 0 16px; }
[data-theme="dark"] .checkin__dot { border-color: #444; color: #aaa; }

/* ============================================
   REFER A FRIEND UX (.aux-refer)
   ============================================ */
.aux-refer { text-align: center; padding: 8px 0; }
.refer__hero svg { width: 48px; height: 48px; color: var(--green, #22c55e); margin-bottom: 8px; }
.refer__headline { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.refer__desc { font-size: 14px; color: #888; margin-bottom: 16px; line-height: 1.5; }
.refer__rewards { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; }
.refer__reward { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.refer__reward-pts { font-size: 24px; font-weight: 800; color: var(--green, #22c55e); }
.refer__reward-who { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.06em; }
.refer__link-box { display: flex; gap: 8px; margin-bottom: 16px; }
.refer__link-input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 13px; background: var(--surface-raised, #f5f5f5); color: var(--text, #111); }
.refer__copy-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; border: 1px solid #ddd; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.refer__copy-btn svg { width: 16px; height: 16px; }
[data-theme="dark"] .refer__link-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .refer__copy-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #fff; }
.refer__share-row { display: flex; gap: 8px; margin-bottom: 16px; }
.refer__share-btn { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ddd; background: #fff; font-size: 13px; cursor: pointer; transition: all 0.2s; }
[data-theme="dark"] .refer__share-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #fff; }

/* ============================================
   SCAN QR CODE UX (.aux-qr)
   ============================================ */
.aux-qr { padding: 8px 0; }
.qr__viewfinder { position: relative; width: 100%; aspect-ratio: 1; max-width: 280px; margin: 0 auto 20px; background: #111; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qr__frame { position: relative; width: 180px; height: 180px; }
.qr__corner { position: absolute; width: 30px; height: 30px; border: 3px solid var(--green, #22c55e); }
.qr__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.qr__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.qr__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.qr__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.qr__scanline { position: absolute; top: 0; left: 10px; right: 10px; height: 2px; background: var(--green, #22c55e); box-shadow: 0 0 8px rgba(34,197,94,0.6); animation: qr-scan 2s ease-in-out infinite; }
@keyframes qr-scan { 0%,100% { top: 0; } 50% { top: 100%; } }
.qr__instruction { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.7); font-size: 13px; }
.qr__success { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--green, #22c55e); }
.qr__success svg { width: 48px; height: 48px; }
.qr__success span { font-size: 16px; font-weight: 600; }
.qr__manual { text-align: center; }
.qr__or { font-size: 13px; color: #888; margin-bottom: 12px; }
.qr__input-row { display: flex; gap: 8px; }
.qr__input { flex: 1; padding: 12px 16px; border-radius: 10px; border: 1px solid #ddd; font-size: 16px; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; }
.qr__submit-btn { width: 44px; height: 44px; border-radius: 10px; border: none; background: var(--green, #22c55e); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qr__submit-btn svg { width: 20px; height: 20px; }
[data-theme="dark"] .qr__input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #fff; }

/* ============================================
   PHOTO CHALLENGE UX (.aux-photo)
   ============================================ */
.aux-photo { padding: 8px 0; }
.photo__prompt { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--surface-raised, #f5f5f5); border-radius: 10px; }
.photo__prompt-icon svg { width: 24px; height: 24px; }
.photo__prompt-text { font-size: 14px; line-height: 1.4; margin: 0; }
[data-theme="dark"] .photo__prompt { background: rgba(255,255,255,0.06); }
.photo__upload-zone { width: 100%; aspect-ratio: 4/3; border: 2px dashed #ccc; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 16px; transition: border-color 0.2s; overflow: hidden; }
.photo__upload-zone:hover { border-color: var(--green, #22c55e); }
.photo__upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #888; }
.photo__upload-placeholder svg { width: 40px; height: 40px; }
.photo__upload-placeholder span { font-size: 14px; }
.photo__preview-img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="dark"] .photo__upload-zone { border-color: rgba(255,255,255,0.15); }

/* ============================================
   LOCATION CHECK-IN UX (.aux-location)
   ============================================ */
.aux-location { padding: 8px 0; }
.location__map { width: 100%; aspect-ratio: 16/9; background: #1a1a2e; border-radius: 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.location__map-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,0.6); }
.location__map-placeholder svg { width: 40px; height: 40px; color: var(--green, #22c55e); }
.location__map-label { font-size: 14px; }
.location__status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; font-size: 14px; color: #888; }
.location__spinner { width: 20px; height: 20px; border: 2px solid #ddd; border-top-color: var(--green, #22c55e); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.location__verified { display: flex; align-items: center; gap: 8px; color: var(--green, #22c55e); font-weight: 600; }
.location__verified svg { width: 20px; height: 20px; }

/* ============================================
   MATCHING GAME UX (.aux-matching)
   ============================================ */
.aux-matching { padding: 8px 0; }
.match__header { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 13px; color: #888; }
.match__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.match__card { padding: 12px 8px; border-radius: 10px; border: 2px solid #ddd; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; }
.match__card:hover { border-color: var(--green, #22c55e); }
.match__card--flipped { background: var(--green, #22c55e); border-color: var(--green, #22c55e); color: #fff; }
.match__card--matched { background: rgba(34,197,94,0.15); border-color: var(--green, #22c55e); color: var(--green, #22c55e); opacity: 0.6; pointer-events: none; }
@media (max-width: 400px) { .match__grid { grid-template-columns: repeat(3, 1fr); } }
[data-theme="dark"] .match__card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }

/* ============================================
   COMMENT / REPLY UX (.aux-comment)
   ============================================ */
.aux-comment { padding: 8px 0; }
.comment__prompt { margin-bottom: 16px; }
.comment__prompt-text { font-size: 15px; line-height: 1.5; margin: 0; }
.comment__thread { margin-bottom: 16px; padding: 12px; background: var(--surface-raised, #f5f5f5); border-radius: 12px; }
[data-theme="dark"] .comment__thread { background: rgba(255,255,255,0.04); }
.comment__sample { display: flex; gap: 10px; }
.comment__avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.comment__bubble { flex: 1; }
.comment__author { font-size: 13px; font-weight: 600; display: block; margin-bottom: 2px; }
.comment__text { font-size: 13px; color: #666; margin: 0; line-height: 1.4; }
.comment__time { font-size: 11px; color: #999; }
.comment__compose { }
.comment__input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #ddd; font-size: 14px; resize: none; font-family: inherit; }
[data-theme="dark"] .comment__input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #fff; }
.comment__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.comment__charcount { font-size: 12px; color: #888; }

/* ============================================
   UPVOTE / BOOST UX (.aux-upvote)
   ============================================ */
.aux-upvote { text-align: center; padding: 12px 0; }
.upvote__content { margin-bottom: 20px; }
.upvote__quote { font-size: 18px; font-weight: 600; font-style: italic; line-height: 1.5; margin: 0 0 8px; padding: 0 16px; border-left: 3px solid var(--green, #22c55e); text-align: left; }
.upvote__attribution { font-size: 13px; color: #888; display: block; text-align: left; padding-left: 16px; }
.upvote__meter { margin-bottom: 20px; }
.upvote__count { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.upvote__bar { height: 8px; background: rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.upvote__bar-fill { height: 100%; background: var(--green, #22c55e); border-radius: 4px; transition: width 0.5s ease; }
.upvote__goal { font-size: 12px; color: #888; }
[data-theme="dark"] .upvote__bar { background: rgba(255,255,255,0.08); }
.aux__cta--boost { display: flex; align-items: center; justify-content: center; gap: 8px; }
.aux__cta--boost svg { width: 20px; height: 20px; }

/* ============================================
   TEAM CHALLENGE UX (.aux-team)
   ============================================ */
.aux-team { padding: 8px 0; }
.team__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.team__header svg { width: 28px; height: 28px; }
.team__goal-label { font-size: 16px; font-weight: 600; margin: 0; }
.team__progress { margin-bottom: 16px; }
.team__bar { height: 10px; background: rgba(0,0,0,0.08); border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.team__bar-fill { height: 100%; background: var(--green, #22c55e); border-radius: 5px; transition: width 0.5s ease; }
[data-theme="dark"] .team__bar { background: rgba(255,255,255,0.08); }
.team__stats { display: flex; justify-content: space-between; font-size: 13px; color: #888; }
.team__members { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 16px; background: var(--surface-raised, #f5f5f5); border-radius: 10px; }
[data-theme="dark"] .team__members { background: rgba(255,255,255,0.04); }
.team__avatars { display: flex; align-items: center; }
.team__avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: -6px; border: 2px solid #fff; }
[data-theme="dark"] .team__avatar { border-color: #1a1a1a; }
.team__avatar-more { width: 32px; height: 32px; border-radius: 50%; background: var(--green, #22c55e); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-right: -6px; border: 2px solid #fff; }
[data-theme="dark"] .team__avatar-more { border-color: #1a1a1a; }
.team__members-label { font-size: 13px; color: #888; margin-left: 12px; }

/* ============================================
   EMAIL YOUR REP UX (.aux-emailrep)
   ============================================ */
.aux-emailrep { padding: 8px 0; }
.emailrep__rep { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--surface-raised, #f5f5f5); border-radius: 10px; }
[data-theme="dark"] .emailrep__rep { background: rgba(255,255,255,0.04); }
.emailrep__rep-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.emailrep__rep-info { display: flex; flex-direction: column; gap: 2px; }
.emailrep__rep-name { font-size: 15px; font-weight: 600; }
.emailrep__rep-office { font-size: 13px; color: #888; }
.emailrep__compose { margin-bottom: 16px; }
.emailrep__field { margin-bottom: 12px; }
.emailrep__label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin-bottom: 4px; }
.emailrep__input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 14px; }
.emailrep__textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 14px; font-family: inherit; resize: vertical; line-height: 1.5; }
[data-theme="dark"] .emailrep__input, [data-theme="dark"] .emailrep__textarea { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #fff; }

/* ============================================
   CALL YOUR REP UX (.aux-callrep)
   ============================================ */
.aux-callrep { padding: 8px 0; }
.callrep__rep { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; background: var(--surface-raised, #f5f5f5); border-radius: 10px; }
[data-theme="dark"] .callrep__rep { background: rgba(255,255,255,0.04); }
.callrep__rep-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.callrep__rep-info { display: flex; flex-direction: column; gap: 2px; }
.callrep__rep-name { font-size: 15px; font-weight: 600; }
.callrep__rep-phone { font-size: 14px; color: var(--green, #22c55e); font-weight: 600; }
.callrep__script { margin-bottom: 16px; padding: 16px; background: var(--surface-raised, #f5f5f5); border-radius: 10px; }
[data-theme="dark"] .callrep__script { background: rgba(255,255,255,0.04); }
.callrep__script-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
.callrep__script-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.8; }
.callrep__timer { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; padding: 12px; background: rgba(34,197,94,0.1); border-radius: 10px; }
.callrep__timer-icon { font-size: 20px; }
.callrep__timer-text { font-size: 14px; font-weight: 600; }
.callrep__timer-time { font-size: 16px; font-weight: 700; color: var(--green, #22c55e); font-variant-numeric: tabular-nums; }
.aux__cta--secondary { background: transparent !important; border: 1px solid #ddd !important; color: var(--text, #111) !important; }
[data-theme="dark"] .aux__cta--secondary { border-color: rgba(255,255,255,0.15) !important; color: #fff !important; }

/* ============================================
   ENABLE PUSH UX (.aux-push)
   ============================================ */
.aux-push { text-align: center; padding: 8px 0; }
.aux-push__icon svg { width: 48px; height: 48px; color: var(--green, #22c55e); margin-bottom: 8px; }
.aux-push__headline { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.aux-push__desc { font-size: 14px; color: #888; margin-bottom: 16px; }
.aux-push__benefits { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.aux-push__benefits li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.aux-push__benefits li svg { width: 18px; height: 18px; flex-shrink: 0; }
[data-theme="dark"] .aux-push__benefits li { border-bottom-color: rgba(255,255,255,0.06); }
.aux-push__preview { margin-bottom: 20px; }
.aux-push__notif { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-raised, #f5f5f5); border-radius: 12px; border: 1px solid #ddd; text-align: left; }
[data-theme="dark"] .aux-push__notif { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.aux-push__notif-icon { font-size: 24px; flex-shrink: 0; }
.aux-push__notif-text { display: flex; flex-direction: column; gap: 2px; }
.aux-push__notif-text strong { font-size: 13px; }
.aux-push__notif-text span { font-size: 13px; color: #666; }

/* ============================================
   PROFILE COMPLETE UX (.aux-profile)
   ============================================ */
.aux-profile { padding: 8px 0; }
.profile__avatar-section { display: flex; justify-content: center; margin-bottom: 20px; }
.profile__avatar-placeholder { width: 80px; height: 80px; border-radius: 50%; border: 2px dashed #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: #888; transition: border-color 0.2s; }
.profile__avatar-placeholder:hover { border-color: var(--green, #22c55e); }
.profile__avatar-placeholder svg { width: 24px; height: 24px; }
.profile__avatar-placeholder span { font-size: 10px; }
.profile__avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
[data-theme="dark"] .profile__avatar-placeholder { border-color: rgba(255,255,255,0.2); }
.profile__fields { margin-bottom: 16px; }
.profile__field { margin-bottom: 12px; }
.profile__label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin-bottom: 4px; }
.profile__input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 14px; font-family: inherit; }
.profile__textarea { resize: none; }
[data-theme="dark"] .profile__input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #fff; }
.profile__causes { display: flex; flex-wrap: wrap; gap: 6px; }
.profile__cause-chip { padding: 6px 12px; border-radius: 20px; border: 1px solid #ddd; background: #fff; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.profile__cause-chip--active { background: var(--green, #22c55e); border-color: var(--green, #22c55e); color: #fff; }
[data-theme="dark"] .profile__cause-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #fff; }
[data-theme="dark"] .profile__cause-chip--active { background: var(--green, #22c55e); border-color: var(--green, #22c55e); color: #fff; }
.profile__progress-bar { height: 6px; background: rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.profile__progress-fill { height: 100%; background: var(--green, #22c55e); border-radius: 3px; transition: width 0.3s ease; }
[data-theme="dark"] .profile__progress-bar { background: rgba(255,255,255,0.08); }
.profile__progress-label { display: block; text-align: center; font-size: 12px; color: #888; margin-bottom: 16px; }

/* ============================================
   BOYCOTT PLEDGE UX (.aux-boycott)
   ============================================ */
.aux-boycott { padding: 8px 0; }
.boycott__header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.boycott__icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,0.12); border-radius: 12px; color: #ef4444; }
.boycott__icon svg { width: 26px; height: 26px; }
.boycott__meta { display: flex; flex-direction: column; gap: 2px; }
.boycott__count { font-weight: 700; font-size: 15px; }
.boycott__org { font-size: 13px; color: #888; }
.boycott__target { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.boycott__target-title { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.boycott__target-desc { font-size: 14px; color: #666; line-height: 1.5; margin: 0; }
[data-theme="dark"] .boycott__target { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
[data-theme="dark"] .boycott__target-desc { color: #aaa; }
.boycott__why { margin-bottom: 16px; }
.boycott__why-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; display: block; margin-bottom: 6px; }
.boycott__why-text { font-size: 14px; color: #666; line-height: 1.5; margin: 0; }
[data-theme="dark"] .boycott__why-text { color: #aaa; }
.boycott__commitment { background: rgba(0,0,0,0.03); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
[data-theme="dark"] .boycott__commitment { background: rgba(255,255,255,0.04); }
.boycott__check-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.boycott__checkbox { margin-top: 3px; width: 18px; height: 18px; accent-color: #ef4444; flex-shrink: 0; }
.boycott__check-text { font-size: 14px; line-height: 1.5; color: #444; }
[data-theme="dark"] .boycott__check-text { color: #ccc; }
.boycott__tally { margin-bottom: 20px; }
.boycott__tally-bar { width: 100%; height: 8px; background: rgba(0,0,0,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.boycott__tally-fill { height: 100%; background: #ef4444; border-radius: 4px; transition: width 0.6s ease; }
[data-theme="dark"] .boycott__tally-bar { background: rgba(255,255,255,0.08); }
.boycott__tally-text { font-size: 13px; color: #888; text-align: center; display: block; }

/* ============================================
   MUTUAL AID UX (.aux-mutual)
   ============================================ */
.aux-mutual { padding: 8px 0; }
.mutual__header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mutual__icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(236,72,153,0.12); border-radius: 12px; color: #ec4899; }
.mutual__icon svg { width: 26px; height: 26px; }
.mutual__meta { display: flex; flex-direction: column; gap: 2px; }
.mutual__network { font-weight: 700; font-size: 15px; }
.mutual__nearby { font-size: 13px; color: #888; }
.mutual__role { margin-bottom: 18px; }
.mutual__role-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; display: block; margin-bottom: 8px; }
.mutual__role-toggle { display: flex; gap: 0; background: rgba(0,0,0,0.06); border-radius: 10px; padding: 3px; }
[data-theme="dark"] .mutual__role-toggle { background: rgba(255,255,255,0.06); }
.mutual__role-btn { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: #888; transition: all 0.2s; }
.mutual__role-btn--active { background: #fff; color: #111; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
[data-theme="dark"] .mutual__role-btn--active { background: rgba(255,255,255,0.12); color: #fff; }
.mutual__types { margin-bottom: 18px; }
.mutual__types-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; display: block; margin-bottom: 8px; }
.mutual__types-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.mutual__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mutual__chip { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; border: 1.5px solid rgba(0,0,0,0.12); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; color: #444; }
[data-theme="dark"] .mutual__chip { border-color: rgba(255,255,255,0.12); color: #ccc; }
.mutual__chip--active { background: rgba(236,72,153,0.12); border-color: #ec4899; color: #ec4899; }
[data-theme="dark"] .mutual__chip--active { background: rgba(236,72,153,0.15); border-color: #ec4899; color: #f472b6; }
.mutual__chip-icon { font-size: 16px; }
.mutual__chip-label { font-size: 13px; }
.mutual__details { position: relative; margin-bottom: 18px; }
.mutual__note { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.1); background: transparent; font-size: 14px; font-family: inherit; resize: none; box-sizing: border-box; }
[data-theme="dark"] .mutual__note { border-color: rgba(255,255,255,0.1); color: #fff; }
.mutual__note:focus { outline: none; border-color: #ec4899; }
.mutual__char-count { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: #aaa; }

/* ============================================
   IN-MODAL COMPLETION BURST (.aux-burst)
   ============================================ */
.aux-burst {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.aux-burst--in { opacity: 1; }

.aux-burst__ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #111;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.aux-burst--in .aux-burst__ring {
  animation: burstRing 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
.aux-burst__ring--2 {
  border-color: var(--green);
  animation-delay: 0.1s !important;
}
@keyframes burstRing {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

.aux-burst__emoji {
  font-size: 56px;
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  z-index: 2;
}
.aux-burst--in .aux-burst__emoji {
  animation: burstEmoji 0.5s 0.15s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes burstEmoji {
  0% { opacity: 0; transform: scale(0) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.3) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.aux-burst__pts {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: #111;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translateY(20px);
  z-index: 2;
  margin-top: 8px;
}
.aux-burst--in .aux-burst__pts {
  animation: burstSlide 0.4s 0.3s cubic-bezier(.22,1,.36,1) forwards;
}

.aux-burst__verb {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  font-weight: 700;
  opacity: 0;
  transform: translateY(16px);
  z-index: 2;
}
.aux-burst--in .aux-burst__verb {
  animation: burstSlide 0.4s 0.45s cubic-bezier(.22,1,.36,1) forwards;
}

.aux-burst__msg {
  font-size: 14px;
  color: #888;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(12px);
  z-index: 2;
}
.aux-burst--in .aux-burst__msg {
  animation: burstSlide 0.35s 0.6s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes burstSlide {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Mini confetti dots inside burst */
.aux-burst__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 1;
}
.aux-burst--in .aux-burst__dot {
  animation: burstDot 0.6s 0.1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes burstDot {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0); }
}

/* ============================================
   COMPLETED CARD STATE
   ============================================ */
.action-card--completed {
  animation: cardComplete 0.6s ease;
}
@keyframes cardComplete {
  0% { transform: scale(1); }
  20% { transform: scale(0.95); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.action-card--completed .action-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1;
}

.action-card__cta--done {
  background: var(--green) !important;
  color: #000 !important;
  pointer-events: none;
  animation: ctaDone 0.5s ease;
}
@keyframes ctaDone {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.action-card__check-burst {
  display: inline-block;
  animation: checkBurst 0.5s ease;
}
@keyframes checkBurst {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  50% { transform: scale(1.4) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Glow ring on completed card */
.action-card__glow {
  position: absolute;
  inset: -4px;
  border: 2px solid var(--green);
  pointer-events: none;
  z-index: 5;
  animation: cardGlow 1.5s ease forwards;
}
@keyframes cardGlow {
  0% { opacity: 0; box-shadow: 0 0 0 0 rgba(0,200,83,.6); }
  30% { opacity: 1; box-shadow: 0 0 20px 4px rgba(0,200,83,.4); }
  100% { opacity: 0; box-shadow: 0 0 0 0 rgba(0,200,83,0); }
}

/* Points flyup from card */
.card-pts-flyup {
  position: fixed;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--green);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10001;
  transform: translateX(-50%);
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  animation: cardFlyup 1.2s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cardFlyup {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.8); }
  30% { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(0.9); }
}

/* Stamp overlay on completed card image */
.action-card__stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(-15deg);
  font-size: 48px;
  z-index: 3;
  animation: stampIn 0.5s 0.1s cubic-bezier(.22,1,.36,1) forwards;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
@keyframes stampIn {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

/* Pre-filled form inputs styling */
.aux-form__input:not(:placeholder-shown) {
  border-color: #bbb;
  background: #f0faf0;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .aux__card { width: 100%; max-width: 100%; max-height: 100vh; max-height: 100svh; }
  .aux__head { padding: 32px 20px 20px; }
  .aux__body { padding: 20px; }
  .aux__title { font-size: 18px; }
  .aux-read__article { max-height: 280px; }
  .aux-burst__pts { font-size: 36px; }
  .aux-burst__emoji { font-size: 44px; }
}


/* ============================================
   PAGE TRANSITIONS
   ============================================ */
.page {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
  pointer-events: none;
}

.page.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.page.page--in {
  animation: pageIn 0.35s var(--ease-out) forwards;
}

.page.page--out {
  animation: pageOut 0.25s var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ============================================
   PAGE LOADING SPINNER
   ============================================ */
.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.page-loader.visible { opacity: 1; }

.page-loader__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border, #333);
  border-top-color: var(--accent, #1ED760);
  border-radius: 50%;
  animation: pf-spin 0.7s linear infinite;
}

/* ============================================
   BUTTON LOADING STATE
   ============================================ */
.btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}
.btn--loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pf-spin 0.7s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}


/* ============================================
   NAV IMPROVEMENTS
   ============================================ */
.nav {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

.nav--scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}

.nav--hidden {
  transform: translateY(-100%);
}

.nav__link--active {
  color: #fff !important;
  position: relative;
}

.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.nav-mobile__link--active,
.nav__mobile-link--active {
  color: #fff !important;
  font-weight: 700;
}


/* ============================================
   HOME HERO FEATURE BANNER
   ============================================ */
@keyframes heroBannerZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.hero-banner {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 500px;
  max-height: 780px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.hero-banner__img-wrap {
  position: absolute;
  inset: 0;
}

.hero-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  animation: heroBannerZoom 20s ease-in-out alternate infinite;
  will-change: transform;
}
.hero-banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-banner:hover .hero-banner__img {
  animation-play-state: paused;
  transform: scale(1.06);
  transition: transform 0.6s ease;
}

.hero-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.55) 30%,
      rgba(0,0,0,0.08) 55%,
      transparent 75%
    ),
    linear-gradient(
      to right,
      rgba(0,0,0,0.3) 0%,
      transparent 50%
    );
  z-index: 1;
}

.hero-banner__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 var(--space-2xl) 48px;
  z-index: 2;
  max-width: 720px;
}

.hero-banner__badge {
  display: inline-block;
  padding: 5px 16px;
  background: rgba(232,255,10,0.15);
  backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232,255,10,0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e8ff0a;
  margin-bottom: 16px;
}

.hero-banner__title {
  font-family: var(--font-display), sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.95;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}

.hero-banner__sub {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 24px;
  line-height: 1.5;
  max-width: 540px;
}

.hero-banner__cta {
  display: inline-block;
  padding: 14px 40px;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-banner__cta:hover {
  background: #e8ff0a;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 30px rgba(232,255,10,0.25);
}

.hero-banner__like {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: all 0.25s ease;
}
.hero-banner__like:hover {
  background: rgba(0,0,0,0.5);
  transform: scale(1.1);
}
.hero-banner__like.is-liked {
  color: #ff4d6a;
  background: rgba(255,77,106,0.15);
  border-color: rgba(255,77,106,0.3);
}
.hero-banner__like.is-liked svg {
  fill: #ff4d6a;
  filter: drop-shadow(0 0 8px rgba(255,77,106,0.5));
}
.hero-banner__like.is-liked:hover {
  background: rgba(255,77,106,0.25);
}
@keyframes heroBannerLikePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.hero-banner__like--animating {
  animation: heroBannerLikePop 0.4s ease;
}

@media (max-width: 768px) {
  .hero-banner {
    height: 60vh;
    min-height: 360px;
    max-height: 520px;
  }
  .hero-banner__content { padding: 0 var(--space-lg) 32px; }
  .hero-banner__title { font-size: clamp(24px, 8vw, 40px); }
  .hero-banner__sub { font-size: 13px; max-width: 100%; }
  .hero-banner__img { object-position: center 20%; }
  .hero-banner__like { top: 16px; right: 16px; }
}


/* ============================================
   SKELETON LOADING STATES
   ============================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 0px;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.skeleton--card {
  height: 280px;
  width: 100%;
}

.skeleton--text {
  height: 16px;
  width: 60%;
  margin-bottom: 8px;
}

.skeleton--text-sm {
  height: 12px;
  width: 40%;
}

.skeleton--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton--hero {
  height: 70vh;
  min-height: 400px;
  max-height: 600px;
  width: 100%;
}

/* ============================================
   LOGGED-OUT HOMEPAGE
   ============================================ */

/* ── NAV AUTH (logged-out state) ── */
.nav__auth {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__auth-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  transition: color var(--duration-fast);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav__auth-link:hover { color: #fff; }

.nav__auth-btn {
  padding: 8px 22px;
  background: #fff;
  color: #000;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 30px;
  transition: all var(--duration-fast);
}

.nav__auth-btn:hover {
  background: #e5e5e5;
}

.nav__user {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ── HERO ── */
.lo-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.lo-hero__bg {
  position: absolute;
  inset: 0;
}

.lo-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lo-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.85) 100%);
}

.lo-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 var(--space-lg);
}

.lo-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: #fff;
  margin-bottom: var(--space-lg);
  white-space: normal;
}

.lo-hero__sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto var(--space-xl);
}

.lo-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.lo-hero__cta {
  padding: 16px 40px;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lo-hero__cta--primary {
  background: #fff;
  color: #000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.lo-hero__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.lo-hero__cta--ghost {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}

.lo-hero__cta--ghost:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}

.lo-hero__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.lo-hero__proof-avatars {
  display: flex;
}

.lo-hero__proof-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.4);
  margin-left: -8px;
}

.lo-hero__proof-avatars img:first-child { margin-left: 0; }

.lo-hero__proof-text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
}

.lo-hero__proof-text strong { color: #fff; }

.lo-hero__scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  animation: loScrollBounce 2s ease infinite;
}

@keyframes loScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ── LOGOS BAR ── */
.lo-logos {
  background: #000;
  padding: var(--space-lg) 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.lo-logos__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 0 var(--space-xl);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.lo-logos__track::-webkit-scrollbar { display: none; }

.lo-logos__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}

.lo-logos__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.lo-logos__dot {
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── LANDING SECTION HEADERS ── */
.page--landing .section-header {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

/* ── SECTION TITLES ── */
.lo-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.lo-section-sub {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── HOW IT WORKS ── */
.lo-steps {
  padding: var(--space-3xl) 0;
}

.lo-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.lo-step {
  text-align: left;
}

.lo-step__num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 900;
  color: var(--bg-tertiary);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-md);
}

.lo-step__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.lo-step__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .lo-steps__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .lo-step__num { font-size: 3rem; }
}

/* ── SWEEPSTAKES SCROLL ── */
.lo-sweeps {
  padding: var(--space-3xl) 0 var(--space-2xl);
  overflow: hidden;
}

.lo-sweeps__scroll {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.lo-sweeps__scroll::-webkit-scrollbar { display: none; }

.lo-sweep-card {
  flex: 0 0 min(360px, 85vw);
  background: var(--bg-card);
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform var(--duration-normal);
}

.lo-sweep-card:hover { transform: translateY(-4px); }

.lo-sweep-card__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.lo-sweep-card__body {
  padding: var(--space-lg);
}

.lo-sweep-card__artist {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.lo-sweep-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: var(--space-xs) 0;
  line-height: 1.2;
}

.lo-sweep-card__org {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.lo-sweep-card__cta {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: 10px;
  background: #111;
  color: #fff;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 30px;
}

@media (max-width: 640px) {
  .lo-sweep-card { flex: 0 0 85vw; }
}

/* ── WINNERS SCROLL ── */
.lo-winners {
  padding: var(--space-3xl) 0 var(--space-2xl);
  overflow: hidden;
}

.lo-winners__scroll {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.lo-winners__scroll::-webkit-scrollbar { display: none; }

.lo-winner-card {
  flex: 0 0 min(320px, 85vw);
  background: var(--bg-card);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform var(--duration-normal);
}

.lo-winner-card:hover { transform: translateY(-4px); }

.lo-winner-card__img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
}

.lo-winner-card__body {
  padding: var(--space-lg);
  position: relative;
}

.lo-winner-card__badge {
  display: inline-block;
  padding: 3px 10px;
  background: #e8ff0a;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 2px;
  margin-bottom: var(--space-sm);
}

.lo-winner-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}

.lo-winner-card__prize {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-xs);
}

.lo-winner-card__from {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
}

@media (max-width: 640px) {
  .lo-winner-card { flex: 0 0 80vw; }
}

/* ── IMPACT - IMMERSIVE FULL-SCREEN ── */
.lo-impact {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  overflow: hidden;
  padding: var(--space-4xl) 0;
}

.lo-impact__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
}

.lo-impact__glow {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,44,103,0.12) 0%, rgba(238,44,103,0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  animation: lo-impact-glow-pulse 6s ease-in-out infinite;
}

@keyframes lo-impact-glow-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.15); }
}

.lo-impact__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Headline area */
.lo-impact__headline {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.lo-impact__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ee2c67;
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lo-impact.visible .lo-impact__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.lo-impact__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.lo-impact.visible .lo-impact__title {
  opacity: 1;
  transform: translateY(0);
}

/* Stats grid */
.lo-impact__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl);
  text-align: center;
}

.lo-impact__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lo-impact.visible .lo-impact__stat { opacity: 1; transform: translateY(0) scale(1); }
.lo-impact.visible .lo-impact__stat:nth-child(1) { transition-delay: 0.3s; }
.lo-impact.visible .lo-impact__stat:nth-child(2) { transition-delay: 0.45s; }
.lo-impact.visible .lo-impact__stat:nth-child(3) { transition-delay: 0.6s; }
.lo-impact.visible .lo-impact__stat:nth-child(4) { transition-delay: 0.75s; }

/* Hover lift */
.lo-impact__stat:hover {
  transform: translateY(-4px) scale(1.02) !important;
}

/* Progress rings */
.lo-impact__stat-ring {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-sm);
}

.lo-impact__stat-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.lo-impact__ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 4;
}

.lo-impact__ring-fill {
  fill: none;
  stroke: #ee2c67;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lo-impact__ring-fill--green { stroke: #5cdb95; }
.lo-impact__ring-fill--pink { stroke: #ee2c67; }
.lo-impact__ring-fill--yellow { stroke: #ffd740; }

.lo-impact.visible .lo-impact__ring-fill {
  stroke-dashoffset: var(--ring-offset, 0);
}

.lo-impact__ring-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lo-impact__ring-icon svg {
  width: 24px;
  height: 24px;
  color: rgba(255,255,255,0.6);
  transform: none;
}

/* Number + labels */
.lo-impact__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 60%, rgba(255,255,255,0.6));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lo-impact__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}

.lo-impact__context {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.25);
  max-width: 180px;
  line-height: 1.5;
  margin-top: var(--space-xs);
}

/* Live ticker at bottom */
.lo-impact__live {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}

.lo-impact.visible .lo-impact__live {
  opacity: 1;
  transform: translateY(0);
}

.lo-impact__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5cdb95;
  flex-shrink: 0;
  animation: lo-impact-live-blink 2s ease-in-out infinite;
}

@keyframes lo-impact-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.lo-impact__live-track {
  display: flex;
  flex-direction: column;
  height: 1.5em;
  overflow: hidden;
  position: relative;
}

.lo-impact__live-item {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  height: 1.5em;
  line-height: 1.5;
  flex-shrink: 0;
  animation: lo-impact-ticker-scroll 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes lo-impact-ticker-scroll {
  0%, 28% { transform: translateY(0); }
  33%, 61% { transform: translateY(-1.5em); }
  66%, 94% { transform: translateY(-3em); }
  100% { transform: translateY(0); }
}

/* Sparkle particles */
.lo-impact__stat::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ee2c67;
  border-radius: 50%;
  top: 20%;
  right: 20%;
  opacity: 0;
  box-shadow: 0 0 6px 2px rgba(238,44,103,0.4);
}

.lo-impact.visible .lo-impact__stat::after {
  animation: lo-impact-spark 3s ease-in-out infinite;
}

.lo-impact__stat[data-stat="raised"]::after { background: #5cdb95; box-shadow: 0 0 6px 2px rgba(92,219,149,0.4); animation-delay: 0.5s; }
.lo-impact__stat[data-stat="members"]::after { background: #ee2c67; box-shadow: 0 0 6px 2px rgba(238,44,103,0.4); animation-delay: 1s; }
.lo-impact__stat[data-stat="experiences"]::after { background: #ffd740; box-shadow: 0 0 6px 2px rgba(255,215,64,0.4); animation-delay: 1.5s; }

@keyframes lo-impact-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  15% { opacity: 1; transform: translate(-10px, -15px) scale(1); }
  40% { opacity: 0; transform: translate(-20px, -30px) scale(0.5); }
  100% { opacity: 0; transform: translate(0, 0) scale(0); }
}

/* Responsive */
@media (max-width: 1024px) {
  .lo-impact__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
}

@media (max-width: 768px) {
  .lo-impact { min-height: auto; padding: var(--space-3xl) 0; }
  .lo-impact__title { font-size: clamp(2rem, 10vw, 3.5rem); }
  .lo-impact__headline { margin-bottom: var(--space-2xl); }
  .lo-impact__stats { gap: var(--space-xl); }
  .lo-impact__stat-ring { width: 64px; height: 64px; }
  .lo-impact__num { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .lo-impact__context { display: none; }
  .lo-impact__live { max-width: 90vw; }
}

@media (max-width: 480px) {
  .lo-impact__stats { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

/* ============================================
   IMPACT PAGE - DEDICATED (/impact)
   Immersive, scroll-driven, Nike-inspired
   ============================================ */

/* ── IP HERO ── */
.ip-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  overflow: hidden;
  text-align: center;
}

.ip-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ip-hero__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.1);
}

@keyframes ip-hero-zoom {
  0% { transform: scale(1.05); }
  100% { transform: scale(1.15); }
}

.ip-hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.6) 70%, #000 100%),
    linear-gradient(to right, rgba(0,0,0,0.3), transparent 50%, rgba(0,0,0,0.3));
}

.ip-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.45;
}

.ip-hero__glow {
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,44,103,0.15) 0%, rgba(238,44,103,0) 70%);
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  animation: ip-glow-pulse 7s ease-in-out infinite;
}

.ip-hero__glow--alt {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(92,219,149,0.1) 0%, rgba(92,219,149,0) 70%);
  top: 60%;
  left: 30%;
  animation: ip-glow-pulse 9s ease-in-out infinite reverse;
}

@keyframes ip-glow-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

.ip-hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 var(--space-lg);
}

.ip-hero__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #ee2c67;
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-hero.visible .ip-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.ip-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.88;
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateY(60px);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.ip-hero.visible .ip-hero__title {
  opacity: 1;
  transform: translateY(0);
}

.ip-hero__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.6);
  max-width: 500px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.ip-hero.visible .ip-hero__sub {
  opacity: 1;
  transform: translateY(0);
}

.ip-hero__active {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.ip-hero.visible .ip-hero__active {
  opacity: 1;
  transform: translateY(0);
}

.ip-hero__active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5cdb95;
  animation: ip-dot-blink 2s ease-in-out infinite;
}

@keyframes ip-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ip-hero__active strong {
  color: #fff;
  font-weight: 700;
}

.ip-hero__scroll-hint {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255,255,255,0.25);
  animation: ip-scroll-bounce 2s ease-in-out infinite;
}

@keyframes ip-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ── IP STATS ── */
.ip-stats {
  background: #000;
  color: #fff;
  padding: var(--space-4xl) 0;
  position: relative;
}

.ip-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(238,44,103,0.5), transparent);
}

.ip-stats__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.ip-stats__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ee2c67;
  margin-bottom: var(--space-md);
}

.ip-stats__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.ip-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}

.ip-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-stats.visible .ip-stat { opacity: 1; transform: translateY(0) scale(1); }
.ip-stats.visible .ip-stat:nth-child(1) { transition-delay: 0.1s; }
.ip-stats.visible .ip-stat:nth-child(2) { transition-delay: 0.2s; }
.ip-stats.visible .ip-stat:nth-child(3) { transition-delay: 0.3s; }
.ip-stats.visible .ip-stat:nth-child(4) { transition-delay: 0.4s; }
.ip-stats.visible .ip-stat:nth-child(5) { transition-delay: 0.5s; }
.ip-stats.visible .ip-stat:nth-child(6) { transition-delay: 0.6s; }

.ip-stat:hover { transform: translateY(-6px) scale(1.03) !important; }

.ip-stat__ring {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: var(--space-sm);
}

.ip-stat__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ip-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 4;
}

.ip-ring-fill {
  fill: none;
  stroke: #ee2c67;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-ring-fill--pink { stroke: #ee2c67; }
.ip-ring-fill--green { stroke: #5cdb95; }
.ip-ring-fill--yellow { stroke: #ffd740; }

.ip-stats.visible .ip-ring-fill {
  stroke-dashoffset: var(--ring-offset, 0);
}

.ip-stat__ring-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ip-stat__ring-icon svg {
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,0.5);
  transform: none;
}

.ip-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 60%, rgba(255,255,255,0.5));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ip-stat__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}

.ip-stat__context {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.25);
  max-width: 200px;
  line-height: 1.5;
  margin-top: var(--space-xs);
}

/* Sparkle on stats */
.ip-stat::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ee2c67;
  border-radius: 50%;
  top: 15%;
  right: 15%;
  opacity: 0;
  box-shadow: 0 0 6px 2px rgba(238,44,103,0.4);
}

.ip-stats.visible .ip-stat::after {
  animation: ip-spark 3.5s ease-in-out infinite;
}

.ip-stat[data-stat="raised"]::after { background: #5cdb95; box-shadow: 0 0 6px 2px rgba(92,219,149,0.4); animation-delay: 0.5s; }
.ip-stat[data-stat="members"]::after { background: #ffd740; box-shadow: 0 0 6px 2px rgba(255,215,64,0.4); animation-delay: 1s; }
.ip-stat[data-stat="experiences"]::after { background: #ee2c67; animation-delay: 1.5s; }
.ip-stat[data-stat="causes"]::after { background: #5cdb95; box-shadow: 0 0 6px 2px rgba(92,219,149,0.4); animation-delay: 2s; }
.ip-stat[data-stat="partners"]::after { background: #ffd740; box-shadow: 0 0 6px 2px rgba(255,215,64,0.4); animation-delay: 2.5s; }

@keyframes ip-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  12% { opacity: 1; transform: translate(-12px, -18px) scale(1.2); }
  35% { opacity: 0; transform: translate(-24px, -36px) scale(0.4); }
  100% { opacity: 0; transform: translate(0, 0) scale(0); }
}

/* ── IP MOSAIC - cinematic photo strip ── */
.ip-mosaic {
  background: #000;
  padding: var(--space-xl) 0;
  overflow: hidden;
  position: relative;
}

.ip-mosaic__label {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 3;
}

.ip-mosaic__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cdb95;
  animation: ip-label-pulse 2s ease-in-out infinite;
}

@keyframes ip-label-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ip-mosaic::before,
.ip-mosaic::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.ip-mosaic::before {
  left: 0;
  background: linear-gradient(to right, #000, transparent);
}

.ip-mosaic::after {
  right: 0;
  background: linear-gradient(to left, #000, transparent);
}

.ip-mosaic__track {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  animation: ip-mosaic-scroll 40s linear infinite;
  width: max-content;
}

@keyframes ip-mosaic-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ip-mosaic__track:hover {
  animation-play-state: paused;
}

.ip-mosaic__card {
  flex-shrink: 0;
  width: 300px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.ip-mosaic__card--wide {
  width: 440px;
}

.ip-mosaic__card--tall {
  width: 260px;
  height: 320px;
}

.ip-mosaic__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-mosaic__card:hover img {
  transform: scale(1.08);
}

.ip-mosaic__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

/* ── IP CAUSES - card grid ── */
.ip-causes {
  background: #000;
  color: #fff;
  padding: var(--space-4xl) 0;
  position: relative;
}

.ip-causes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent);
}

.ip-causes__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.ip-causes__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #5cdb95;
  margin-bottom: var(--space-md);
}

.ip-causes__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.ip-causes__sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.5);
  margin-top: var(--space-sm);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.ip-causes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Card */
.ip-cause-card {
  position: relative;
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-cause-card:hover {
  border-color: var(--cause-c, rgba(255,255,255,0.15));
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}

/* Colored glow on hover */
.ip-cause-card__glow {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cause-c, #fff);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ip-cause-card:hover .ip-cause-card__glow {
  opacity: 1;
}

/* Icon */
.ip-cause-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: var(--cause-c, #fff);
  background: color-mix(in srgb, var(--cause-c, #fff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cause-c, #fff) 20%, transparent);
  margin-bottom: var(--space-md);
  transition: transform 0.3s ease, background 0.3s ease;
}

.ip-cause-card:hover .ip-cause-card__icon {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--cause-c, #fff) 16%, transparent);
}

.ip-cause-card__icon .ic {
  width: 28px;
  height: 28px;
}

/* Name */
.ip-cause-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
}

/* One-liner */
.ip-cause-card__liner {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

/* Stat row */
.ip-cause-card__stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-sm);
}

.ip-cause-card__num {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--cause-c, #fff);
  font-variant-numeric: tabular-nums;
}

.ip-cause-card__label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Stagger reveal */
.ip-causes.visible .ip-cause-card {
  opacity: 1;
  transform: translateY(0);
}
.ip-causes.visible .ip-cause-card:nth-child(1) { transition-delay: 0.05s; }
.ip-causes.visible .ip-cause-card:nth-child(2) { transition-delay: 0.10s; }
.ip-causes.visible .ip-cause-card:nth-child(3) { transition-delay: 0.15s; }
.ip-causes.visible .ip-cause-card:nth-child(4) { transition-delay: 0.20s; }
.ip-causes.visible .ip-cause-card:nth-child(5) { transition-delay: 0.25s; }
.ip-causes.visible .ip-cause-card:nth-child(6) { transition-delay: 0.30s; }
.ip-causes.visible .ip-cause-card:nth-child(7) { transition-delay: 0.35s; }
.ip-causes.visible .ip-cause-card:nth-child(8) { transition-delay: 0.40s; }
.ip-causes.visible .ip-cause-card:nth-child(9) { transition-delay: 0.45s; }

/* Responsive */
@media (max-width: 768px) {
  .ip-causes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ip-causes__grid { grid-template-columns: 1fr; }
}

/* ── STORY DETAIL PAGE ── */
.story {
  background: #000;
  color: #fff;
  min-height: 100vh;
}

.story__hero {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 400px;
  overflow: hidden;
}

.story__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.1) 100%);
}

.story__hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
  max-width: 900px;
  margin: 0 auto;
}

.story__badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffd740;
  margin-bottom: var(--space-md);
}

.story__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-sm);
}

.story__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

.story__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.story__body {
  max-width: 740px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
}

.story__back {
  margin-bottom: var(--space-2xl);
}

.story__text {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-2xl);
}

.story__text p {
  margin-bottom: var(--space-lg);
}

.story__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
}

.story__gallery img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.story__gallery img:first-child:last-child {
  grid-column: 1 / -1;
}

.story__cta {
  text-align: center;
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.story__cta-text {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
}

.story__nav {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xl);
  max-width: 740px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.story__nav-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: color 0.2s;
}

.story__nav-link:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .story__hero { height: 50vh; min-height: 300px; }
  .story__gallery { grid-template-columns: 1fr; }
  .story__body { padding: var(--space-2xl) var(--space-md); }
}

/* ── STORIES BROWSE PAGE ── */
.stories-browse {
  background: #000;
  color: #fff;
  padding: var(--space-3xl) 0 var(--space-4xl);
  min-height: 100vh;
}

.stories-browse__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.stories-browse__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.stories-browse__sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.5);
  margin-top: var(--space-sm);
}

.stories-browse__filters {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

.stories-filter {
  padding: 8px 18px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: rgba(255,255,255,0.5);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
}

.stories-filter:hover {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

.stories-filter--active {
  background: #fff;
  border-color: #fff;
  color: #000;
}

.stories-browse__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.story-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-card:hover {
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.story-card__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-card:hover .story-card__img {
  transform: scale(1.05);
}

.story-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 4px 10px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffd740;
}

.story-card__body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.story-card__artist {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.story-card__location {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.stories-browse__load-more {
  text-align: center;
  margin-top: var(--space-2xl);
}

@media (max-width: 768px) {
  .stories-browse__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stories-browse__grid { grid-template-columns: 1fr; }
}

/* ── IP WINNERS - cinematic spotlight cards ── */
.ip-winners {
  background: #000;
  color: #fff;
  padding: var(--space-4xl) 0;
  position: relative;
}

.ip-winners::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent);
}

.ip-winners__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.ip-winners__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffd740;
  margin-bottom: var(--space-md);
}

.ip-winners__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.ip-winners__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-lg);
}

.ip-winner {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(40px);
  cursor: pointer;
}

.ip-winner__read {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  transition: color 0.3s ease;
}

.ip-winner:hover .ip-winner__read {
  color: #ffd740;
}

.ip-winners.visible .ip-winner {
  opacity: 1;
  transform: translateY(0);
}

.ip-winners.visible .ip-winner:nth-child(1) { transition-delay: 0.1s; }
.ip-winners.visible .ip-winner:nth-child(2) { transition-delay: 0.25s; }
.ip-winners.visible .ip-winner:nth-child(3) { transition-delay: 0.4s; }

.ip-winner:hover {
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.ip-winner__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.ip-winner--feature .ip-winner__img {
  aspect-ratio: 3/4;
}

.ip-winner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-winner:hover .ip-winner__img img {
  transform: scale(1.06);
}

.ip-winner__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl) var(--space-lg) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
}

.ip-winner__badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(238,44,103,0.9);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

.ip-winner__info {
  padding: var(--space-lg);
}

.ip-winner__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.ip-winner__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.ip-winner__cause {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #ee2c67;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .ip-winners__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .ip-winner--feature .ip-winner__img {
    aspect-ratio: 16/9;
  }
}

/* ── IP ACTIVITY ── */
.ip-activity {
  background: #0a0a0a;
  color: #fff;
  padding: var(--space-4xl) 0;
}

.ip-activity__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.ip-activity__live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #5cdb95;
  margin-bottom: var(--space-md);
}

.ip-activity__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5cdb95;
  animation: ip-dot-blink 2s ease-in-out infinite;
}

.ip-activity__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.ip-activity__feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  max-width: 900px;
  margin: 0 auto;
}

.ip-activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(20px);
  animation: ip-activity-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ip-activity-item:nth-child(1) { animation-delay: 0.05s; }
.ip-activity-item:nth-child(2) { animation-delay: 0.1s; }
.ip-activity-item:nth-child(3) { animation-delay: 0.15s; }
.ip-activity-item:nth-child(4) { animation-delay: 0.2s; }
.ip-activity-item:nth-child(5) { animation-delay: 0.25s; }
.ip-activity-item:nth-child(6) { animation-delay: 0.3s; }
.ip-activity-item:nth-child(7) { animation-delay: 0.35s; }
.ip-activity-item:nth-child(8) { animation-delay: 0.4s; }

@keyframes ip-activity-in {
  to { opacity: 1; transform: translateY(0); }
}

.ip-activity-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ip-activity-item__text {
  flex: 1;
  min-width: 0;
}

.ip-activity-item__name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: #fff;
}

.ip-activity-item__action {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-activity-item__loc {
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  font-size: var(--text-xs);
  margin-left: 4px;
}

.ip-activity-item__time {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── IP LEADERS ── */
.ip-leaders {
  background: #000;
  color: #fff;
  padding: var(--space-4xl) 0;
  position: relative;
}

.ip-leaders::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent);
}

.ip-leaders__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.ip-leaders__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffd740;
  margin-bottom: var(--space-md);
}

.ip-leaders__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.ip-leaders__tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

/* ── IP FINAL CTA ── */
.ip-final {
  background: #000;
  color: #fff;
  padding: 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ip-final__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ip-final__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.ip-final__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, #000 100%),
    rgba(0,0,0,0.35);
}

.ip-final .container {
  position: relative;
  z-index: 1;
  padding: var(--space-4xl) var(--space-lg);
}

.ip-final__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #ee2c67;
  margin-bottom: var(--space-lg);
  position: relative;
}

.ip-final__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin-bottom: var(--space-lg);
  position: relative;
}

.ip-final__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.5);
  max-width: 450px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.6;
  position: relative;
}

.ip-final__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── IP RESPONSIVE ── */
@media (max-width: 1024px) {
  .ip-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ip-hero { min-height: 85vh; }
  .ip-hero__title { font-size: clamp(3rem, 14vw, 5rem); }
  .ip-stats__grid { gap: var(--space-xl); }
  .ip-stat__ring { width: 80px; height: 80px; }
  .ip-stat__num { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .ip-stat__context { display: none; }
  .ip-activity__feed { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ip-hero__title { font-size: clamp(2.5rem, 16vw, 4rem); }
  .ip-stats__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .ip-stat__ring { width: 64px; height: 64px; }
  .ip-stat__ring-icon svg { width: 20px; height: 20px; }
  .ip-final__title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .ip-final__actions { flex-direction: column; align-items: center; }
}

/* ── CAUSES GRID ── */
.lo-causes {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.lo-causes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  text-align: left;
}

.lo-cause-card {
  padding: var(--space-xl);
  border: 1px solid var(--border);
  transition: all var(--duration-normal);
  cursor: default;
}

.lo-cause-card:hover {
  border-color: var(--cause-color, var(--border-hover));
}

.lo-cause-card__icon {
  color: var(--cause-color, var(--text-primary));
  margin-bottom: var(--space-md);
}

.lo-cause-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.lo-cause-card p {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

@media (max-width: 768px) {
  .lo-causes__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .lo-causes__grid { grid-template-columns: 1fr; }
}

/* ── CLUBS PREVIEW SCROLL ── */
.lo-clubs-preview {
  padding: var(--space-3xl) 0 var(--space-2xl);
  overflow: hidden;
}

.lo-clubs-preview__scroll {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.lo-clubs-preview__scroll::-webkit-scrollbar { display: none; }

.lo-club-card {
  flex: 0 0 min(300px, 80vw);
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
}

.lo-club-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow);
}

.lo-club-card:hover .lo-club-card__img {
  transform: scale(1.05);
}

.lo-club-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
}

.lo-club-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  color: #fff;
}

.lo-club-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.lo-club-card__cause {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-xs);
}

.lo-club-card__members {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-top: var(--space-xs);
}

@media (max-width: 640px) {
  .lo-club-card { flex: 0 0 75vw; }
}

/* ── REWARDS PREVIEW SCROLL ── */
.lo-rewards {
  padding: var(--space-3xl) 0 var(--space-2xl);
  overflow: hidden;
}

.lo-rewards__scroll {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.lo-rewards__scroll::-webkit-scrollbar { display: none; }

.lo-reward-card {
  flex: 0 0 260px;
  background: var(--bg-card);
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lo-reward-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.lo-reward-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.lo-reward-card__body {
  padding: var(--space-md);
}

.lo-reward-card__brand {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.lo-reward-card__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin: var(--space-xs) 0;
}

.lo-reward-card__price {
  font-size: var(--text-base);
  font-weight: 800;
}

@media (max-width: 640px) {
  .lo-reward-card { flex: 0 0 70vw; }
}

/* ── FINAL CTA ── */
.lo-final {
  position: relative;
  padding: var(--space-4xl) 0;
  text-align: center;
  background: #0a0a0a;
  overflow: hidden;
}

.lo-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(238, 44, 103, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.lo-final .container {
  position: relative;
  z-index: 1;
}

.lo-final__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #fff;
  margin-bottom: var(--space-lg);
}

.lo-final__sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto var(--space-xl);
}

.lo-final__note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.35);
  margin-top: var(--space-md);
}

@media (max-width: 640px) {
  .lo-final { padding: var(--space-3xl) 0; }
}

/* ── ABOUT US - HUMANIZING THE PLATFORM ── */
.page--about { background: #fafafa; }

.lo-about {
  position: relative;
  padding: calc(var(--space-4xl) + 60px) 0 var(--space-4xl);
  background: #fafafa;
  color: #1a1a1a;
  overflow: hidden;
  min-height: 100vh;
}

.lo-about__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.lo-about__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.3;
}

.lo-about .container { position: relative; z-index: 1; }

/* ── Opener with word-by-word stagger ── */
.lo-about__opener { max-width: 900px; margin-bottom: var(--space-3xl); }

.lo-about__eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0,0,0,0.35);
  margin-bottom: var(--space-lg);
  opacity: 0; transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lo-about.visible .lo-about__eyebrow { opacity: 1; transform: translateY(0); }

.lo-about__headline {
  font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92;
  color: #1a1a1a;
}

.lo-about__word {
  display: inline-block; opacity: 0; transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lo-about.visible .lo-about__word { opacity: 1; transform: translateY(0); }

/* ── Origin story ── */
.lo-about__story {
  max-width: 680px; margin-bottom: var(--space-3xl);
  opacity: 0; transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
.lo-about.visible .lo-about__story { opacity: 1; transform: translateY(0); }

.lo-about__lede {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700; line-height: 1.35; margin-bottom: var(--space-xl); color: #1a1a1a;
}

.lo-about__story-block p {
  font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7;
  color: rgba(0,0,0,0.55); margin-bottom: var(--space-lg);
}
.lo-about__story-block p:last-child { margin-bottom: 0; }

/* ── By the Numbers ── */
.lo-about__numbers {
  display: flex; gap: 1px; background: rgba(0,0,0,0.06);
  margin-bottom: var(--space-3xl);
  border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06);
}
.lo-about__number {
  flex: 1; padding: var(--space-xl) var(--space-lg); background: #fafafa; text-align: center;
  opacity: 0; transform: translateY(15px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lo-about.visible .lo-about__number:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.9s; }
.lo-about.visible .lo-about__number:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:1.0s; }
.lo-about.visible .lo-about__number:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:1.1s; }
.lo-about.visible .lo-about__number:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:1.2s; }
.lo-about.visible .lo-about__number:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:1.3s; }

.lo-about__number-val {
  display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900; color: #1a1a1a; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px;
}
.lo-about__number-label {
  font-size: 0.6875rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.15em; color: rgba(0,0,0,0.35);
}

/* ── Photo collage ── */
.lo-about__photos {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px;
  gap: 4px; margin-bottom: var(--space-3xl);
}
.lo-about__photo {
  overflow: hidden; position: relative;
  opacity: 0; transform: scale(0.95);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.lo-about.visible .lo-about__photo { opacity: 1; transform: scale(1); }
.lo-about.visible .lo-about__photo[style*="--photo-delay: 0"] { transition-delay: 1.0s; }
.lo-about.visible .lo-about__photo[style*="--photo-delay: 1"] { transition-delay: 1.1s; }
.lo-about.visible .lo-about__photo[style*="--photo-delay: 2"] { transition-delay: 1.2s; }
.lo-about.visible .lo-about__photo[style*="--photo-delay: 3"] { transition-delay: 1.3s; }

.lo-about__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.4); transition: filter 0.4s ease, transform 0.6s ease;
}
.lo-about__photo:hover img { filter: grayscale(0); transform: scale(1.05); }
.lo-about__photo--tall { grid-row: 1 / 3; }
.lo-about__photo:nth-child(1) { grid-column: 1; grid-row: 1; }
.lo-about__photo:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.lo-about__photo:nth-child(3) { grid-column: 3 / 5; grid-row: 1; }
.lo-about__photo:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }

/* ── Flight Crew - Boarding Passes ── */
.lo-about__flight { margin-bottom: var(--space-3xl); }

.lo-about__flight-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid rgba(0,0,0,0.1);
  border-bottom: none;
  background: rgba(0,0,0,0.02);
  opacity: 0; transform: translateY(15px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.1s;
}
.lo-about.visible .lo-about__flight-header { opacity: 1; transform: translateY(0); }

.lo-about__flight-logo {
  font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: #1a1a1a;
}
.lo-about__flight-route {
  font-family: var(--font-display); font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  font-weight: 700; letter-spacing: 0.2em; color: rgba(0,0,0,0.35);
  text-transform: uppercase;
}
.lo-about__flight-num {
  font-family: 'Courier New', monospace; font-size: 0.75rem; font-weight: 700;
  color: rgba(0,0,0,0.2); letter-spacing: 0.1em;
}

.lo-about__flight-subtitle {
  font-family: var(--font-display); font-size: clamp(0.65rem, 1vw, 0.75rem);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em;
  color: rgba(0,0,0,0.2); padding: var(--space-lg) 0 var(--space-md);
  opacity: 0; transition: all 0.5s ease 1.2s;
}
.lo-about.visible .lo-about__flight-subtitle { opacity: 1; }

.lo-about__passes {
  display: flex; flex-direction: column; gap: 2px;
}

/* Individual boarding pass */
.lo-about__pass {
  display: flex; background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateX(-30px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.lo-about__pass:hover { border-color: rgba(0,0,0,0.15); background: #fcfcfc; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.lo-about.visible .lo-about__pass { opacity: 1; transform: translateX(0); }
.lo-about.visible .lo-about__pass[data-delay="0"] { transition-delay: 1.3s; }
.lo-about.visible .lo-about__pass[data-delay="1"] { transition-delay: 1.4s; }
.lo-about.visible .lo-about__pass[data-delay="2"] { transition-delay: 1.5s; }
.lo-about.visible .lo-about__pass[data-delay="3"] { transition-delay: 1.6s; }
.lo-about.visible .lo-about__pass[data-delay="4"] { transition-delay: 1.7s; }
.lo-about.visible .lo-about__pass[data-delay="5"] { transition-delay: 1.8s; }
.lo-about.visible .lo-about__pass[data-delay="6"] { transition-delay: 1.9s; }
.lo-about.visible .lo-about__pass[data-delay="7"] { transition-delay: 2.0s; }

/* Perforated tear line between stub and main */
.lo-about__pass::before {
  content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 4px, transparent 4px, transparent 8px
  );
}

/* Stub - seat number + class */
.lo-about__pass-stub {
  flex-shrink: 0; width: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: var(--space-lg) var(--space-sm);
}
.lo-about__pass-seat {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1;
}
.lo-about__pass-class {
  font-family: 'Courier New', monospace; font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.2em; color: rgba(0,0,0,0.3); text-transform: uppercase;
}

/* Main pass area */
.lo-about__pass-main {
  flex: 1; display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-xl);
  min-height: 120px;
}

/* Photo */
.lo-about__pass-photo {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 2px; overflow: hidden;
  border: 2px solid rgba(0,0,0,0.06);
  transition: border-color 0.3s ease;
}
.lo-about__pass:hover .lo-about__pass-photo { border-color: rgba(0,0,0,0.15); }
.lo-about__pass-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  display: block; filter: grayscale(0.3) contrast(1.05);
  transition: filter 0.4s ease;
}
.lo-about__pass:hover .lo-about__pass-photo img { filter: grayscale(0) contrast(1.1); }

/* Info block */
.lo-about__pass-info { flex: 1; min-width: 0; }

.lo-about__pass-name {
  display: block; font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.15rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.02em; color: #1a1a1a;
  line-height: 1.1; margin-bottom: 2px;
}
.lo-about__pass-title {
  display: block; font-size: 0.75rem; color: rgba(0,0,0,0.4);
  font-weight: 500; margin-bottom: 8px;
}
.lo-about__pass-dest {
  display: block; font-size: 0.8rem; color: rgba(0,0,0,0.5);
  font-style: italic; line-height: 1.3;
}
.lo-about__pass-dest .lo-about__pass-label {
  display: block; font-style: normal; margin-bottom: 1px;
}

/* Meta fields - right side */
.lo-about__pass-meta {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
  text-align: right; padding-left: var(--space-lg);
  border-left: 1px solid rgba(0,0,0,0.04);
}
.lo-about__pass-field { display: flex; flex-direction: column; gap: 1px; }

.lo-about__pass-label {
  font-family: 'Courier New', monospace; font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.15em; color: rgba(0,0,0,0.2); text-transform: uppercase;
}
.lo-about__pass-val {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
  color: rgba(0,0,0,0.65); letter-spacing: 0.02em;
}

/* Subtle barcode texture at the far right */
.lo-about__pass::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 24px;
  background: repeating-linear-gradient(
    to right, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px,
    transparent 1px, transparent 3px,
    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px,
    transparent 4px, transparent 5px
  );
  opacity: 0.5;
}

/* ── Closing CTA ── */
.lo-about__cta-block {
  text-align: center; padding: var(--space-3xl) 0 var(--space-xl);
  opacity: 0; transform: translateY(20px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 2.4s;
}
.lo-about.visible .lo-about__cta-block { opacity: 1; transform: translateY(0); }

.lo-about__cta-title {
  font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95;
  margin-bottom: var(--space-lg); color: #1a1a1a;
}
.lo-about__cta-sub {
  font-size: clamp(1rem, 1.5vw, 1.125rem); color: rgba(0,0,0,0.45);
  max-width: 520px; margin: 0 auto var(--space-xl); line-height: 1.6;
}
.lo-about__cta-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

.lo-about__cta-btn {
  display: inline-block; padding: 14px 36px; font-family: var(--font-display);
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; text-decoration: none; transition: all 0.25s ease;
}
.lo-about__cta-btn--primary { background: #1a1a1a; color: #fafafa; }
.lo-about__cta-btn--primary:hover { background: #333; }
.lo-about__cta-btn--secondary { background: transparent; color: rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.15); }
.lo-about__cta-btn--secondary:hover { color: #1a1a1a; border-color: rgba(0,0,0,0.4); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .lo-about__numbers { flex-wrap: wrap; }
  .lo-about__number { flex: 0 0 calc(33.33% - 1px); }
  .lo-about__photos { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; }
  .lo-about__photo--tall { grid-row: auto; }
  .lo-about__photo:nth-child(1) { grid-column: 1; grid-row: 1; }
  .lo-about__photo:nth-child(2) { grid-column: 2; grid-row: 1; }
  .lo-about__photo:nth-child(3) { grid-column: 1; grid-row: 2; }
  .lo-about__photo:nth-child(4) { grid-column: 2; grid-row: 2; }
}

@media (max-width: 640px) {
  .lo-about { padding: calc(var(--space-3xl) + 60px) 0 var(--space-3xl); }
  .lo-about__headline { font-size: clamp(2rem, 10vw, 3rem); }
  .lo-about__numbers { flex-direction: column; gap: 0; }
  .lo-about__number {
    flex: none; border-bottom: 1px solid rgba(0,0,0,0.04);
    display: flex; justify-content: space-between; align-items: center; text-align: left;
    padding: var(--space-md) var(--space-lg);
  }
  .lo-about__number-val { margin-bottom: 0; }
  .lo-about__photos { grid-template-columns: 1fr; grid-template-rows: repeat(4, 160px); }
  .lo-about__photo:nth-child(1), .lo-about__photo:nth-child(2),
  .lo-about__photo:nth-child(3), .lo-about__photo:nth-child(4) { grid-column: 1; grid-row: auto; }
  .lo-about__pass { flex-direction: column; }
  .lo-about__pass-stub { width: 100%; flex-direction: row; padding: var(--space-sm) var(--space-lg); }
  .lo-about__pass::before { display: none; }
  .lo-about__pass-main { flex-direction: column; align-items: flex-start; }
  .lo-about__pass-meta { flex-direction: row; border-left: none; padding-left: 0; border-top: 1px solid rgba(0,0,0,0.04); padding-top: 8px; text-align: left; }
  .lo-about__flight-header { flex-direction: column; gap: var(--space-sm); text-align: center; }
}

/* ============================================
   SUPPORT PAGE
   ============================================ */
.page--support {
  background: #0a0a0a;
  color: #ffffff;
}

.support {
  padding: var(--space-3xl) 0;
}

/* Hero */
.support__hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
}

.support__title {
  font-family: 'Lora', serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.support__subtitle {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

/* Sections */
.support__section {
  margin-bottom: var(--space-3xl);
}

.support__section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.support__section-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.support__section-icon {
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

/* FAQ Accordion */
.support__faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.support__faq {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.support__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  color: #ffffff;
  list-style: none;
  transition: color 0.2s;
}

.support__faq-q::-webkit-details-marker { display: none; }

.support__faq-q::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  transition: transform 0.3s ease, color 0.3s;
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.support__faq[open] .support__faq-q::after {
  content: '−';
  color: rgba(255,255,255,0.8);
}

.support__faq-q:hover {
  color: rgba(255,255,255,0.8);
}

.support__faq-a {
  padding: 0 0 var(--space-lg);
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 680px;
}

.support__faq-a p {
  margin-bottom: var(--space-sm);
}

.support__faq-a p:last-child {
  margin-bottom: 0;
}

.support__faq-a a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.support__faq-a a:hover {
  color: rgba(255,255,255,0.7);
}

/* Winners */
.support__winners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.support__winner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-lg);
  background: #0a0a0a;
  transition: background 0.2s;
}

.support__winner:hover {
  background: rgba(255,255,255,0.03);
}

.support__winner-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #ffffff;
}

.support__winner-prize {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

/* Important Info Cards */
.support__info-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.support__info-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}

.support__info-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

.support__info-card svg:first-child {
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
}

.support__info-card span {
  flex: 1;
}

.support__info-arrow {
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
  transition: transform 0.2s;
}

.support__info-card:hover .support__info-arrow {
  transform: translate(2px, -2px);
}

/* Contact */
.support__contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.support__contact-card {
  padding: var(--space-xl);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
}

.support__contact-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-md);
}

.support__contact-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.support__contact-card p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.support__contact-email {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  padding: var(--space-xs) var(--space-md);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  transition: background 0.2s;
}

.support__contact-email:hover {
  background: rgba(255,255,255,0.14);
}

.support__kindness {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.1);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  font-style: italic;
}

/* Support Responsive */
@media (max-width: 768px) {
  .support__winners-grid { grid-template-columns: 1fr; }
  .support__info-links { grid-template-columns: 1fr; }
  .support__contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .support__hero { margin-bottom: var(--space-2xl); }
  .support__section { margin-bottom: var(--space-2xl); }
  .support__faq-q { font-size: var(--text-sm); }
}

/* FAQ Search */
.support__search {
  position: relative;
  max-width: 520px;
  margin: var(--space-xl) auto 0;
}

.support__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.55);
  pointer-events: none;
}

.support__search-input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  color: #ffffff;
  font-size: var(--text-sm);
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.support__search-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.support__search-input:focus {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
}

.support__search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.4);
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  transition: background 0.15s;
}

.support__search-clear:hover { background: rgba(255,255,255,0.1); }
.support__search-clear.visible { display: block; }

.support__search-empty {
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  margin-top: var(--space-lg);
}

.support__search-empty a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FAQ hide/show for search */
.support__faq--hidden {
  display: none !important;
}

.support__faq--highlight .support__faq-q {
  color: #ffffff;
}

/* Contact Form */
.support__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.support__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.support__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.support__form-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}

.support__form-input,
.support__form-select,
.support__form-textarea {
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  color: #ffffff;
  font-size: var(--text-sm);
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.support__form-input::placeholder,
.support__form-textarea::placeholder {
  color: rgba(255,255,255,0.3);
}

.support__form-input:focus,
.support__form-select:focus,
.support__form-textarea:focus {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
}

.support__form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.support__form-select option {
  background: #1a1a1a;
  color: #ffffff;
}

.support__form-textarea {
  resize: vertical;
  min-height: 100px;
}

.support__form-footer {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.support__form-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 28px;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.support__form-submit:hover {
  background: #e5e5e5;
  transform: translateY(-1px);
}

.support__form-submit:active {
  transform: translateY(0);
}

.support__form-submit--sending {
  opacity: 0.6;
  pointer-events: none;
}

.support__form-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.55);
}

/* Form success */
.support__form-success {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
}

.support__form-success-icon {
  color: var(--green);
  margin-bottom: var(--space-md);
}

.support__form-success h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.support__form-success p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .support__form-row { grid-template-columns: 1fr; }
  .support__form-footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   LEGAL PAGES (Official Rules, Terms, Privacy)
   Omaze-inspired: dark hero → light body → accordions
   ============================================ */
.page--legal {
  background: #f5f5f5;
  color: #111111;
}

/* ---- SCROLL PROGRESS BAR ---- */
.legal__progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #111 0%, #444 100%);
  z-index: 9999;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ---- DARK HERO HEADER ---- */
.legal__hero {
  background: #0a0a0a;
  color: #ffffff;
  padding: 80px 0 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.legal__hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
  pointer-events: none;
}

.legal__hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s;
  letter-spacing: 0.02em;
}

.legal__hero-back:hover { color: #ffffff; }

.legal__hero-back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.legal__hero-title {
  font-family: 'Lora', serif;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 12px;
  color: #ffffff;
}

.legal__hero-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.legal__hero-date {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- MAIN CONTENT AREA ---- */
.legal__content {
  padding: 48px 0 80px;
}

.legal__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- STICKY TOC SIDEBAR ---- */
.legal__toc {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
  overflow-y: auto;
  padding-right: 12px;
}

.legal__toc::-webkit-scrollbar { width: 3px; }
.legal__toc::-webkit-scrollbar-track { background: transparent; }
.legal__toc::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.legal__toc-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #999;
  margin-bottom: 16px;
  padding-left: 12px;
}

.legal__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal__toc-list li {
  margin-bottom: 1px;
}

.legal__toc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: #888;
  text-decoration: none;
  border-radius: 6px;
  line-height: 1.35;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.legal__toc-link:hover {
  color: #333;
  background: rgba(0,0,0,0.04);
}

.legal__toc-link.active {
  color: #111;
  background: #ffffff;
  border-left-color: #111;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.legal__toc-num {
  font-size: 10px;
  font-weight: 700;
  color: #bbb;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.15s;
}

.legal__toc-link.active .legal__toc-num {
  color: #111;
}

/* ---- ACCORDION BODY ---- */
.legal__body {
  max-width: 720px;
}

/* Intro callout (before accordion) */
.legal__intro-callout {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-left: 4px solid #111;
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin-bottom: 32px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #333;
}

/* Accordion section */
.legal__section {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
  scroll-margin-top: 80px;
}

.legal__section:hover {
  border-color: #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.legal__section[open] {
  border-color: #d0d0d0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.legal__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 16px;
  transition: background 0.15s;
}

.legal__section-header:hover {
  background: #fafafa;
}

.legal__section-header::-webkit-details-marker { display: none; }
.legal__section-header::marker { display: none; content: ''; }

.legal__section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.legal__section-num {
  font-size: 11px;
  font-weight: 700;
  color: #bbb;
  background: #f5f5f5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.legal__section[open] .legal__section-num {
  background: #111;
  color: #fff;
}

.legal__section-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.25s ease;
}

.legal__section-icon::before,
.legal__section-icon::after {
  content: '';
  position: absolute;
  background: #999;
  border-radius: 1px;
  transition: all 0.25s ease;
}

/* Horizontal bar */
.legal__section-icon::before {
  top: 50%;
  left: 3px;
  right: 3px;
  height: 2px;
  transform: translateY(-50%);
}

/* Vertical bar (becomes horizontal on open) */
.legal__section-icon::after {
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 2px;
  transform: translateX(-50%);
}

.legal__section[open] .legal__section-icon::after {
  transform: translateX(-50%) scaleY(0);
}

.legal__section[open] .legal__section-icon::before {
  background: #111;
}

/* Section content */
.legal__section-content {
  padding: 0 24px 24px;
  border-top: 1px solid #f0f0f0;
}

.legal__section-content p {
  font-size: 14px;
  color: #555;
  line-height: 1.85;
  margin-top: 16px;
  margin-bottom: 0;
}

.legal__section-content p + p {
  margin-top: 12px;
}

.legal__section-content ul,
.legal__section-content ol {
  padding-left: 24px;
  margin: 12px 0 0;
}

.legal__section-content li {
  font-size: 14px;
  color: #555;
  line-height: 1.85;
  margin-bottom: 4px;
}

.legal__section-content li::marker {
  color: #999;
}

.legal__section-content a {
  color: #111;
  text-decoration: underline;
  text-decoration-color: #999;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}

.legal__section-content a:hover {
  text-decoration-color: #111;
}

.legal__section-content strong {
  color: #333;
  font-weight: 600;
}

/* Inner callout (all-caps legal text inside a section) */
.legal__section-callout {
  background: #f8f8f8;
  border-left: 3px solid #111;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  font-weight: 600;
  color: #333;
  font-size: 11.5px;
  line-height: 1.75;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin-top: 16px;
}

/* Address block */
.legal__address {
  background: #f8f8f8;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 14px;
  color: #444;
  line-height: 1.8;
  display: inline-block;
  border: 1px solid #eee;
  margin-top: 12px;
}

/* Expand all toggle */
.legal__expand-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  margin-bottom: 24px;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}

.legal__expand-all:hover {
  color: #111;
  border-color: #111;
  background: #fff;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .legal__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 16px;
  }
  .legal__toc {
    position: static;
    max-height: none;
    margin-bottom: 24px;
    padding: 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    overflow: visible;
  }
  .legal__toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .legal__toc-link {
    font-size: 11px;
    padding: 5px 10px;
    white-space: nowrap;
    border-left: none;
    background: #f5f5f5;
    border-radius: 20px;
  }
  .legal__toc-link.active {
    background: #111;
    color: #fff;
    border-left: none;
    box-shadow: none;
  }
  .legal__toc-link.active .legal__toc-num {
    color: rgba(255,255,255,0.6);
  }
  .legal__toc-num { display: none; }
  .legal__hero { padding: 60px 0 40px; }
}

@media (max-width: 600px) {
  .legal__hero { padding: 48px 0 32px; }
  .legal__hero-title { font-size: 1.8rem; }
  .legal__toc { display: none; }
  .legal__section-header { padding: 14px 18px; }
  .legal__section-content { padding: 0 18px 18px; }
  .legal__section-title { font-size: 13.5px; }
  .legal__intro-callout { padding: 16px 18px; font-size: 11px; }
  .legal__content { padding: 32px 0 60px; }
}

/* ============================================
   FLOATING HELP FAB + PANEL
   ============================================ */
.help-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.help-fab:hover {
  transform: scale(1.08);
  background: #222222;
  box-shadow: 0 6px 28px rgba(0,0,0,0.5);
}

.help-fab__icon--close { display: none; }
.help-fab.active .help-fab__icon--chat { display: none; }
.help-fab.active .help-fab__icon--close { display: block; }

.help-fab.active {
  background: #333333;
}

/* Help Panel */
.help-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 340px;
  background: #141414;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl, 16px);
  z-index: 9000;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.help-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.help-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.help-panel__header h3 {
  font-size: var(--text-base, 15px);
  font-weight: 600;
  color: #ffffff;
}

.help-panel__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.help-panel__close:hover { color: #ffffff; }

.help-panel__body {
  padding: 16px 20px 20px;
}

/* Quick links */
.help-panel__quick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.help-panel__quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md, 10px);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.help-panel__quick-link:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

.help-panel__quick-link svg {
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

/* Mini form */
.help-panel__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-panel__select,
.help-panel__input,
.help-panel__textarea {
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md, 10px);
  color: #ffffff;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}

.help-panel__select:focus,
.help-panel__input:focus,
.help-panel__textarea:focus {
  border-color: rgba(255,255,255,0.25);
}

.help-panel__input::placeholder,
.help-panel__textarea::placeholder {
  color: rgba(255,255,255,0.3);
}

.help-panel__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.help-panel__select option {
  background: #1a1a1a;
  color: #ffffff;
}

.help-panel__textarea {
  resize: none;
  min-height: 70px;
}

.help-panel__submit {
  padding: 10px 20px;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: var(--radius-full, 999px);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
}

.help-panel__submit:hover { background: #e5e5e5; }

/* Help panel success */
.help-panel__success {
  text-align: center;
  padding: 12px 0;
  color: rgba(255,255,255,0.7);
}

.help-panel__success svg {
  color: var(--green, #128a09);
  margin-bottom: 8px;
}

.help-panel__success p {
  font-size: 13px;
  line-height: 1.5;
}

/* Responsive FAB */
@media (max-width: 480px) {
  .help-fab { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  .help-panel { bottom: 78px; right: 16px; width: calc(100vw - 32px); max-width: 340px; }
}

/* ============================================
   PARTNER DASHBOARD
   ============================================ */

.pd { --pd-accent: #FFD700; padding-top: var(--space-2xl); padding-bottom: var(--space-4xl); min-height: 100vh; min-height: 100svh; }

.pd__header { padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border); margin-bottom: var(--space-xl); }
.pd__header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.pd__header-left { display: flex; align-items: center; gap: var(--space-lg); flex: 1; min-width: 200px; }
.pd__org-logo { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--bg-card); border: 2px solid var(--pd-accent); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.pd__org-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; filter: brightness(0) invert(1); }
.pd__logo-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-display); font-weight: 900; font-size: var(--text-sm); color: var(--pd-accent); letter-spacing: 0.02em; text-align: center; line-height: 1.1; }
.pd__header-text { flex: 1; }
.pd__title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.pd__subtitle { font-size: var(--text-base); color: var(--text-secondary); margin-top: var(--space-xs); }
.pd__subtitle span { color: var(--pd-accent); font-weight: 700; }
.pd__header-right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

.pd__org-select { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; cursor: pointer; min-width: 200px; }
.pd__mode-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border); transition: background 0.2s; }
.pd__mode-toggle:hover { background: var(--bg-elevated, rgba(0,0,0,0.04)); }
.pd__mode-toggle input { display: none; }
.pd__mode-slider { width: 32px; height: 18px; background: rgba(0,0,0,0.15); border-radius: 9px; position: relative; transition: background 0.3s; }
.pd__mode-slider::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.pd__mode-toggle input:checked + .pd__mode-slider { background: rgba(255,165,0,0.6); }
.pd__mode-toggle input:checked + .pd__mode-slider::after { transform: translateX(14px); }
.pd__mode-toggle input:not(:checked) + .pd__mode-slider { background: #4ade80; }
.pd__mode-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); min-width: 32px; }
.pd__export-btn { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--pd-accent); background: transparent; color: var(--pd-accent); font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: all var(--duration-fast); }
.pd__export-btn:hover { background: var(--pd-accent); color: #000; }

/* KPIs */
.pd__kpis { display: flex; gap: var(--space-md); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 var(--space-lg) var(--space-xl); margin-bottom: var(--space-md); }
.pd__kpis::-webkit-scrollbar { display: none; }
.pd__kpi { flex: 0 0 auto; min-width: 160px; padding: var(--space-md) var(--space-lg); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); border-top: 3px solid var(--pd-accent); transition: transform var(--duration-fast); }
.pd__kpi:hover { transform: translateY(-2px); }
.pd__kpi-label { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: var(--space-xs); }
.pd__kpi-value { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; font-family: var(--font-display); line-height: 1.1; }
.pd__kpi-delta { font-size: var(--text-xs); font-weight: 600; margin-top: 4px; }
.pd__kpi-delta--up { color: #22c55e; }
.pd__kpi-delta--down { color: #ef4444; }

/* Onboarding Checklist */
.pd__onboarding { margin-bottom: var(--space-lg); }
.pd__ob-card {
  background: var(--bg-card);
  border: 1px solid rgba(74,222,128,0.15);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
}
.pd__ob-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(74,222,128,0.04);
  border-bottom: 1px solid var(--border);
}
.pd__ob-header-left { flex-shrink: 0; }
.pd__ob-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0; }
.pd__ob-progress-text { font-size: 12px; color: var(--text-tertiary); margin: 2px 0 0; }
.pd__ob-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.pd__ob-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.pd__ob-dismiss {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.pd__ob-dismiss:hover { color: var(--text-primary); }
.pd__ob-checklist { padding: 8px 0; }
.pd__ob-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  transition: background 0.15s;
}
.pd__ob-item:hover { background: rgba(255,255,255,0.02); }
.pd__ob-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s;
}
.pd__ob-item--done .pd__ob-check {
  background: #4ade80;
  border-color: #4ade80;
  color: #000;
  font-weight: 700;
}
.pd__ob-item-text { flex: 1; min-width: 0; }
.pd__ob-item-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.pd__ob-item--done .pd__ob-item-label { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.15); }
.pd__ob-item-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.pd__ob-action {
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.pd__ob-action:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }

/* Tab Bar */
.pd__tabs { margin-bottom: var(--space-xl); border-bottom: 1px solid var(--border); }
.pd__tab-bar { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pd__tab-bar::-webkit-scrollbar { display: none; }
.pd__tab { padding: var(--space-md) var(--space-lg); background: none; border: none; color: var(--text-tertiary); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; position: relative; white-space: nowrap; transition: color var(--duration-fast); }
.pd__tab:hover { color: var(--text-primary); }
.pd__tab--active { color: var(--pd-accent); }
.pd__tab--active::after { content: ''; position: absolute; left: var(--space-lg); right: var(--space-lg); bottom: -1px; height: 2px; background: var(--pd-accent); }

/* Search */
.pd__search { padding: var(--space-sm) 0; }
.pd__search-input { width: 100%; max-width: 400px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: var(--text-sm); }
.pd__search-input:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15); }

/* Content */
.pd__content { padding: 0 var(--space-lg); }

/* Section Headers */
.pd__section-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-md); display: flex; align-items: center; justify-content: space-between; }
.pd__section-title .pd__dl-btn { font-size: var(--text-xs); padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-weight: 600; }
.pd__section-title .pd__dl-btn:hover { border-color: var(--pd-accent); color: var(--pd-accent); }

/* Grid */
.pd__grid { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.pd__grid--2 { grid-template-columns: repeat(2, 1fr); }
.pd__grid--3 { grid-template-columns: repeat(3, 1fr); }
.pd__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Card */
.pd__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.pd__card--accent { border-top: 3px solid var(--pd-accent); }
.pd__card-title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-md); color: var(--text-secondary); }

/* Table */
.pd__table-wrap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-lg); }
.pd__table-wrap::-webkit-scrollbar { display: none; }
.pd__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pd__table th { text-align: left; padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
.pd__table th:hover { color: var(--text-primary); }
.pd__table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; }
.pd__table tr:hover td { background: rgba(255,255,255,0.02); }
.pd__table td:first-child { font-weight: 600; }

/* Badges */
.pd__badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pd__badge--premier { background: rgba(168,85,247,0.15); color: #a855f7; }
.pd__badge--free { background: rgba(34,197,94,0.15); color: #22c55e; }
.pd__badge--one-time { background: rgba(59,130,246,0.15); color: #3b82f6; }
.pd__badge--sweepstakes { background: rgba(168,85,247,0.15); color: #a855f7; }
.pd__badge--club { background: rgba(34,197,94,0.15); color: #22c55e; }
.pd__badge--active { background: rgba(34,197,94,0.15); color: #22c55e; }
.pd__badge--completed { background: rgba(59,130,246,0.15); color: #3b82f6; }
.pd__badge--upcoming { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* Bar Chart */
.pd__bar-row { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.pd__bar-label { flex: 0 0 140px; font-size: var(--text-sm); font-weight: 600; text-align: right; }
.pd__bar-track { flex: 1; height: 24px; background: rgba(255,255,255,0.05); border-radius: var(--radius-sm); overflow: hidden; }
.pd__bar-fill { height: 100%; background: var(--pd-accent); border-radius: var(--radius-sm); transition: width 0.6s ease; min-width: 2px; }
.pd__bar-value { flex: 0 0 80px; font-size: var(--text-sm); color: var(--text-secondary); }

/* Trend Chart */
.pd__trend { width: 100%; height: 180px; position: relative; margin-bottom: var(--space-lg); }
.pd__trend canvas { width: 100% !important; height: 100% !important; }

/* Petition Progress */
.pd__petition-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.pd__petition-name { flex: 1; font-weight: 600; font-size: var(--text-sm); }
.pd__petition-bar { flex: 0 0 200px; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.pd__petition-fill { height: 100%; background: var(--pd-accent); border-radius: 4px; transition: width 0.5s ease; }
.pd__petition-stats { flex: 0 0 120px; font-size: var(--text-xs); color: var(--text-secondary); text-align: right; }

/* Campaign Cards */
.pd__campaign-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); border-left: 4px solid var(--pd-accent); }
.pd__campaign-card--sweepstakes { border-left-color: #a855f7; }
.pd__campaign-card--challenge { border-left-color: #f97316; }
.pd__campaign-card--club { border-left-color: #22c55e; }
.pd__campaign-name { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-xs); }
.pd__campaign-meta { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-md); }
.pd__campaign-stats { display: flex; gap: var(--space-lg); }
.pd__campaign-stat { text-align: center; }
.pd__campaign-stat-value { font-size: var(--text-lg); font-weight: 800; font-family: var(--font-display); }
.pd__campaign-stat-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; }

/* Empty State */
.pd__empty { text-align: center; padding: var(--space-3xl) var(--space-lg); color: var(--text-tertiary); font-size: var(--text-base); }

/* Responsive */
@media (max-width: 768px) {
  .pd__header-row { flex-direction: column; align-items: flex-start; }
  .pd__header-right { width: 100%; }
  .pd__org-select { width: 100%; }
  .pd__grid--2, .pd__grid--3, .pd__grid--4 { grid-template-columns: 1fr; }
  .pd__kpis { padding: 0 var(--space-md) var(--space-lg); }
  .pd__content { padding: 0 var(--space-md); }
  .pd__petition-bar { flex: 0 0 100px; }
  .pd__campaign-stats { flex-wrap: wrap; gap: var(--space-md); }
}

@media (max-width: 600px) {
  .pd__tab { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
  .pd__bar-label { flex: 0 0 100px; font-size: var(--text-xs); }
  .pd__petition-row { flex-wrap: wrap; }
  .pd__petition-bar { flex: 1 1 100%; }
  .pd__petition-stats { flex: 1 1 100%; text-align: left; }
}

/* ============================================
   PARTNER DASHBOARD — EMBED WIDGET TAB
   ============================================ */

/* Top header row */
.pde__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xl);
}

.pde__header-text { flex: 1; }

.pde__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.pde__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 520px;
}

.pde__header-stats {
  display: flex;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.pde__stat {
  text-align: right;
}

.pde__stat-num {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1.1;
}

.pde__stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Two-column layout: config left, preview right */
.pde__layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  align-items: start;
}

/* ── CONFIG PANEL ── */
.pde__config {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: sticky;
  top: 100px;
}

.pde__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pde__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

/* Layout picker (card / inline / button) */
.pde__layout-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.pde__layout-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-xs);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.pde__layout-opt:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.pde__layout-opt--active {
  border-color: var(--pd-accent);
  background: rgba(255, 215, 0, 0.06);
  color: var(--pd-accent);
}

.pde__layout-icon {
  font-size: 20px;
  line-height: 1;
}

/* Theme pills */
.pde__toggle-row {
  display: flex;
  gap: var(--space-xs);
}

.pde__pill {
  flex: 1;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast);
  text-align: center;
}

.pde__pill:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.pde__pill--active {
  border-color: var(--pd-accent);
  background: rgba(255, 215, 0, 0.08);
  color: var(--pd-accent);
}

/* Accent color picker */
.pde__color-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pde__color-input {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.pde__color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.pde__color-input::-webkit-color-swatch { border: none; border-radius: 4px; }

.pde__color-hex {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
}

.pde__color-hex:focus {
  outline: none;
  border-color: var(--pd-accent);
}

.pde__color-reset {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.pde__color-reset:hover {
  border-color: var(--pd-accent);
  color: var(--pd-accent);
}

/* Corner radius slider */
.pde__slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.pde__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}

.pde__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pd-accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pde__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pd-accent);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pde__slider-val {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: right;
  font-family: var(--font-mono, monospace);
}

/* Donation amounts */
.pde__amounts-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.pde__amt-check {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.pde__amt-check:has(input:checked) {
  border-color: var(--pd-accent);
  background: rgba(255, 215, 0, 0.06);
  color: var(--pd-accent);
}

.pde__amt-check input {
  accent-color: var(--pd-accent);
  width: 14px;
  height: 14px;
}

.pde__custom-amt-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.pde__custom-amt {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.pde__custom-amt:focus {
  outline: none;
  border-color: var(--pd-accent);
}

.pde__custom-amt::placeholder {
  color: var(--text-tertiary);
}

.pde__add-amt {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--pd-accent);
  background: transparent;
  color: var(--pd-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.pde__add-amt:hover {
  background: var(--pd-accent);
  color: #000;
}

/* Default amount select */
.pde__select {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.pde__select:focus {
  outline: none;
  border-color: var(--pd-accent);
}

/* Feature toggles */
.pde__toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pde__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.pde__toggle input {
  display: none;
}

.pde__toggle-slider {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: background var(--duration-fast);
}

.pde__toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: all var(--duration-fast);
}

.pde__toggle input:checked + .pde__toggle-slider {
  background: var(--pd-accent);
}

.pde__toggle input:checked + .pde__toggle-slider::after {
  transform: translateX(16px);
  background: #000;
}

/* ── LIVE PREVIEW ── */
.pde__preview-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pde__preview-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

/* Mock browser chrome */
.pde__browser {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
}

.pde__browser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

.pde__browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.pde__browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.pde__browser-dots span:first-child { background: #ff5f57; }
.pde__browser-dots span:nth-child(2) { background: #febc2e; }
.pde__browser-dots span:last-child { background: #28c840; }

.pde__browser-url {
  flex: 1;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pde__browser-body {
  min-height: 400px;
  max-height: 680px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: background 0.25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.pde__browser-body::-webkit-scrollbar { width: 5px; }
.pde__browser-body::-webkit-scrollbar-track { background: transparent; }
.pde__browser-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.pde__browser-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ── EMBED CODE SECTION ── */
.pde__code-section {
  margin-bottom: var(--space-2xl);
}

.pde__code-header {
  margin-bottom: var(--space-md);
}

.pde__code-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.pde__code-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.pde__code-block {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pde__code {
  padding: var(--space-lg);
  padding-right: 120px;
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  margin: 0;
}

.pde__copy-btn {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast);
  z-index: 2;
}

.pde__copy-btn:hover {
  border-color: var(--pd-accent);
  color: var(--pd-accent);
}

/* Integration guides */
.pde__guides {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.pde__guide {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast);
}

.pde__guide:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.pde__guide-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.3;
}

.pde__guide strong {
  font-size: var(--text-sm);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.pde__guide p {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin: 0;
}

/* ── PERFORMANCE METRICS ── */
.pde__metrics {
  margin-bottom: var(--space-xl);
}

.pde__metrics .pde__section-title,
.pde__metrics .pd__section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.pde__metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.pde__metrics-grid .pd__kpi {
  flex: none;
  min-width: 0;
}

/* ── EMBED RESPONSIVE ── */
@media (max-width: 1024px) {
  .pde__layout {
    grid-template-columns: 300px 1fr;
    gap: var(--space-lg);
  }
  .pde__guides {
    grid-template-columns: repeat(2, 1fr);
  }
  .pde__metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pde__header {
    flex-direction: column;
    gap: var(--space-md);
  }
  .pde__header-stats {
    align-self: flex-start;
  }
  .pde__layout {
    grid-template-columns: 1fr;
  }
  .pde__config {
    position: static;
  }
  .pde__guides {
    grid-template-columns: 1fr;
  }
  .pde__metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pde__header-stats {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .pde__stat {
    text-align: left;
  }
  .pde__layout-picker {
    grid-template-columns: 1fr;
  }
  .pde__amounts-row {
    flex-direction: column;
  }
  .pde__guides {
    grid-template-columns: 1fr;
  }
  .pde__metrics-grid {
    grid-template-columns: 1fr;
  }
  .pde__code {
    padding-right: var(--space-lg);
  }
  .pde__copy-btn {
    position: static;
    width: 100%;
    justify-content: center;
    margin-top: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-sm);
  }
}

/* ============================================
   PARTNER DASHBOARD — DATA EXPORTS TAB
   ============================================ */

/* Filter bar */
.pd__export-filters {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.pd__export-filters label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.pd__export-select {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  min-width: 140px;
}

.pd__export-select:focus {
  outline: none;
  border-color: var(--pd-accent);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15);
}

/* Export cards grid */
.pd__export-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.pd__export-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color var(--duration-fast);
}

.pd__export-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.pd__export-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pd__export-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.pd__export-card-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
}

.pd__export-card-count {
  font-size: var(--text-3xl);
  font-weight: 900;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--pd-accent);
}

.pd__export-card-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-top: -4px;
}

.pd__export-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

.pd__export-card-fields {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.pd__export-card-fields strong {
  color: var(--text-secondary);
  display: block;
  margin-bottom: 2px;
}

/* Download buttons */
.pd__dl-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  background: var(--pd-accent);
  color: #000;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration-fast);
  width: 100%;
}

.pd__dl-btn--primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.pd__dl-btn--primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.pd__dl-btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.pd__dl-btn--outline:hover {
  border-color: var(--pd-accent);
  color: var(--pd-accent);
}

/* Info box */
.pd__export-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 215, 0, 0.04);
  border: 1px solid rgba(255, 215, 0, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.pd__export-info strong {
  color: var(--pd-accent);
}

/* ── EXPORT RESPONSIVE ── */
@media (max-width: 1024px) {
  .pd__export-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pd__export-filters {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .pd__export-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .pd__export-select {
    min-width: 0;
    flex: 1;
  }
  .pd__export-card {
    padding: var(--space-lg);
  }
}

/* ── Mobile section-padding overrides ── */
@media (max-width: 768px) {
  /* Sweepstakes detail */
  .sdp__enter { padding: var(--space-xl) var(--space-md); }
  .sdp__pkg, .sdp__gallery, .sdp__steps, .sdp__related { padding: var(--space-lg) 0; }

  /* Premier sales page */
  .pp-hero { padding: var(--space-xl) 0 var(--space-lg); }
  .pp-perks, .pp-compare, .pp-steps, .pp-proof { padding: var(--space-lg) 0; }
  .pp-final { padding: var(--space-lg) 0 var(--space-xl); }

  /* Portal landing */
  .portal-perks, .portal-testimonials { padding: var(--space-xl) 0; }
  .portal-rewards-preview, .portal-events, .portal-partners, .portal-impact,
  .portal-leaderboard, .portal-bottom-cta { padding: var(--space-lg) 0; }
  .portal-partners__grid { gap: var(--space-lg); }

  /* Impact page */
  .ip-stats, .ip-causes, .ip-winners, .ip-activity, .ip-leaders { padding: var(--space-xl) 0; }
  .ip-final .container { padding: var(--space-xl) var(--space-md); }

  /* Club detail */
  .cd-about-block, .cd-causes, .cd-quote, .cd-actions, .cd-cards,
  .cd-spotlight, .cd-leaderboard, .cd-partners, .cd-hiw, .cd-perks, .cd-faq { padding: var(--space-lg) 0; }
  .cd-final-cta, .cd-back { padding: var(--space-xl) 0; }

  /* Home sections */
  .dashboard, .feed, .clubs { padding: var(--space-lg) 0; }

  /* Challenge detail */
  .chd__how, .chd__feed, .chd__pledge { padding: var(--space-xl) 0; }
  .chd__gallery { padding: var(--space-lg) 0; }

  /* Landing final CTA */
  .lo-final { padding: var(--space-xl) 0; }

  /* Legal */
  .legal__hero { padding: var(--space-xl) 0 var(--space-lg); }

  /* About detail page */
  .adp__layout { gap: var(--space-xl); }
}

/* ── Mobile touch targets ── */
@media (max-width: 768px) {
  /* Modal close buttons */
  .entry-modal__close, .join-modal__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  /* Join modal step dots */
  .join-modal__step-dot { width: 32px; height: 32px; padding: 6px; }
  /* Join modal club button */
  .join-modal__club-btn { min-height: 44px; padding: 12px 16px; }
  /* Portal cause tabs */
  .portal-causes__tab { min-height: 44px; padding: 10px 16px; }
  /* Entry modal social buttons */
  .entry-modal__social-btn { min-height: 44px; }
  /* Sticky CTA */
  .sdp__sticky-cta { min-height: 44px; }
}

/* ============================================
   TOUR ANNOUNCEMENT PAGE
   Stadium tour splash — Apple launch energy
   ============================================ */

.page--tour-announce {
  padding-top: 0 !important;
}

/* --- Hero --- */
.ta__hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  background: #000;
}

.ta__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: taHeroZoom 30s ease-in-out alternate infinite;
  will-change: transform;
}

@keyframes taHeroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.ta__hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.98) 0%,
      rgba(0,0,0,0.8) 25%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.2) 75%,
      rgba(0,0,0,0.4) 100%
    );
}

.ta__hero-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(150,130,97,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(150,130,97,0.06) 0%, transparent 50%);
  animation: taLightLeak 20s ease-in-out infinite alternate;
}

@keyframes taLightLeak {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.ta__hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 var(--space-2xl) var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ta__hero-badge {
  display: inline-block;
  padding: 6px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #000;
  background: var(--ta-accent, #968261);
  border-radius: 30px;
  margin-bottom: var(--space-lg);
  animation: taBadgePulse 3s ease-in-out infinite;
}

@keyframes taBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(150,130,97,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(150,130,97,0); }
}

.ta__hero-artist-logo {
  height: 40px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-md);
  opacity: 0.9;
}

.ta__hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--space-md);
  text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}

.ta__hero-tagline {
  font-family: var(--ta-font, var(--font-body));
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  font-style: italic;
  margin-bottom: var(--space-lg);
  letter-spacing: 0.02em;
}

.ta__hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xl);
}

.ta__hero-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ta-accent, #968261);
}

.ta__hero-actions {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.ta__hero-cta {
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-transform: none;
  letter-spacing: normal;
}

.ta__hero-cta--primary {
  background: var(--ta-accent, #968261);
  color: #000;
}

.ta__hero-cta--primary:hover {
  background: var(--ta-accent-light, #7a6b4e);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(150,130,97,0.3);
}

.ta__hero-cta--ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1.5px solid rgba(255,255,255,0.25);
}

.ta__hero-cta--ghost:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

.ta__hero-powered {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ta__hero-org-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

.ta__hero-scroll-cue {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,0.3);
  animation: taScrollBounce 2s ease-in-out infinite;
}

@keyframes taScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --- Counter Bar --- */
.ta__counter-bar {
  background: #111;
  border-bottom: 1px solid rgba(150,130,97,0.15);
  position: sticky;
  top: calc(var(--nav-height) + var(--preview-bar-height));
  z-index: 50;
}

.ta__counter-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.ta__counter-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ta__counter-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}

.ta__counter-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.ta__counter-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
}

.ta__counter-stat--cta {
  margin-left: auto;
}

.ta__counter-stat--cta .btn {
  background: var(--ta-accent, #968261);
  color: #000;
  font-weight: 600;
}

/* --- Impact Section --- */
.ta__impact {
  background: #0a0a0a;
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}

.ta__impact-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.ta__impact-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  margin-bottom: var(--space-xl);
}

.ta__impact-title {
  font-family: var(--ta-font, var(--font-display));
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.ta__impact-desc {
  font-size: 1.1rem;
  color: var(--ta-accent, #968261);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.ta__impact-mission {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.ta__impact-stats {
  display: flex;
  gap: var(--space-3xl);
  margin-bottom: var(--space-xl);
}

.ta__impact-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ta__impact-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--ta-accent, #968261);
}

.ta__impact-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ta__impact-treeline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  opacity: 0.06;
  object-fit: cover;
  pointer-events: none;
}

.ta__impact-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* --- Tour Dates --- */
.ta__dates {
  background: #000;
  padding: var(--space-4xl) 0 var(--space-3xl);
}

.ta__dates-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.ta__dates-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.ta__dates-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.ta__dates-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}

.ta__dates-onsale {
  color: var(--ta-accent, #968261);
  font-weight: 600;
}

/* Presale Banner */
.ta__presale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(150,130,97,0.08);
  border: 1px solid rgba(150,130,97,0.2);
  border-radius: 0;
  padding: 16px 24px;
  margin-bottom: var(--space-xl);
}

.ta__presale-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.ta__presale-badge {
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ta-accent, #968261);
  color: #000;
  border-radius: 30px;
}

.ta__presale-text {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

.ta__presale-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.ta__presale-code {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  font-family: monospace;
}

.ta__presale-code strong {
  color: var(--ta-accent, #968261);
  font-size: 16px;
}

.ta__presale-copy {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 30px;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.ta__presale-copy:hover {
  border-color: var(--ta-accent, #968261);
  color: var(--ta-accent, #968261);
}

/* Date List */
.ta__date-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ta__date-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: var(--space-lg);
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ta__date-row--visible {
  opacity: 1;
  transform: translateY(0);
}

.ta__date-row--highlight {
  background: rgba(150,130,97,0.04);
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
}

.ta__date-row--propeller {
  border-left: 3px solid var(--ta-accent, #968261);
  padding-left: 16px;
  margin-left: -16px;
}

.ta__date-day {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.ta__date-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ta__date-city {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.ta__date-venue {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.ta__date-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ta__date-badge {
  padding: 3px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 30px;
  white-space: nowrap;
}

.ta__date-badge--hot {
  background: rgba(255,59,48,0.15);
  color: #ff3b30;
}

.ta__date-badge--added {
  background: rgba(150,130,97,0.15);
  color: var(--ta-accent, #968261);
}

.ta__date-badge--special {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}

.ta__date-badge--propeller {
  background: rgba(150,130,97,0.2);
  color: var(--ta-accent, #968261);
  border: 1px solid rgba(150,130,97,0.3);
}

.ta__date-cta {
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  border-radius: 30px;
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}

.ta__date-cta:hover {
  border-color: var(--ta-accent, #968261);
  color: var(--ta-accent, #968261);
  background: rgba(150,130,97,0.08);
}

/* --- Perks --- */
.ta__perks {
  background: #0a0a0a;
  padding: var(--space-4xl) 0;
}

.ta__perks-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: center;
}

.ta__perks-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.ta__perks-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-2xl);
}

.ta__perks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  text-align: left;
}

.ta__perk {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color var(--duration-normal);
}

.ta__perk:hover {
  border-color: rgba(150,130,97,0.2);
}

.ta__perk-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(150,130,97,0.08);
  border-radius: 50%;
}

.ta__perk-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.ta__perk-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* --- Gallery --- */
.ta__gallery-section {
  background: #000;
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.ta__gallery-scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding: 0 var(--space-lg);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ta__gallery-scroll::-webkit-scrollbar { display: none; }

.ta__gallery-item {
  flex: 0 0 auto;
  width: 400px;
  scroll-snap-align: start;
  border-radius: 0;
  overflow: hidden;
}

.ta__gallery-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.ta__gallery-item:hover img {
  transform: scale(1.05);
}

/* --- Partners --- */
.ta__partners {
  background: #0a0a0a;
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ta__partners-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: center;
}

.ta__partners-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  margin-bottom: var(--space-xl);
}

.ta__partners-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.ta__partner img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.35;
  transition: opacity var(--duration-normal);
}

.ta__partner:hover img {
  opacity: 0.7;
}

/* --- Bottom CTA --- */
.ta__bottom-cta {
  background: #000;
  padding: var(--space-4xl) 0 calc(var(--space-4xl) + 40px);
  text-align: center;
}

.ta__bottom-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ta__bottom-sig {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.25;
  margin-bottom: var(--space-xl);
}

.ta__bottom-title {
  font-family: var(--ta-font, var(--font-display));
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.ta__bottom-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  max-width: 500px;
}

.ta__bottom-inner .btn--primary {
  background: var(--ta-accent, #968261);
  color: #000;
  font-weight: 600;
}

.ta__bottom-inner .btn--primary:hover {
  background: var(--ta-accent-light, #7a6b4e);
}

.ta__impact-inner .btn--primary {
  background: var(--ta-accent, #968261);
  color: #000;
  font-weight: 600;
}

.ta__impact-inner .btn--primary:hover {
  background: var(--ta-accent-light, #7a6b4e);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .ta__hero-content {
    padding: 0 var(--space-lg) var(--space-2xl);
  }

  .ta__hero-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .ta__hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .ta__hero-cta {
    width: 100%;
    text-align: center;
  }

  .ta__hero-meta {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    gap: var(--space-sm);
  }

  .ta__counter-inner {
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
  }

  .ta__counter-num {
    font-size: 1.2rem;
  }

  .ta__counter-stat--cta {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .ta__presale-banner {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }

  .ta__date-row {
    grid-template-columns: 70px 1fr;
    gap: var(--space-sm) var(--space-md);
  }

  .ta__date-badges {
    grid-column: 2;
  }

  .ta__date-cta {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .ta__perks-grid {
    grid-template-columns: 1fr;
  }

  .ta__impact-stats {
    gap: var(--space-xl);
  }

  .ta__gallery-item {
    width: 300px;
  }

  .ta__gallery-item img {
    height: 200px;
  }

  .ta__partners-grid {
    gap: var(--space-lg);
  }

  .ta__partner img {
    height: 28px;
  }
}

/* ============================================================
   PARTNER AGREEMENT
   ============================================================ */
.pa {
  min-height: 100vh;
  background: #0a0a0a;
  padding-top: 80px;
}

/* ---- Progress Steps ---- */
.pa__progress {
  padding: 32px 0 0;
  display: flex;
  justify-content: center;
}
.pa__progress-inner {
  display: flex;
  align-items: center;
  gap: 0;
}
.pa__step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.35;
  transition: opacity 0.3s;
}
.pa__step--active { opacity: 1; }
.pa__step--done { opacity: 0.7; }
.pa__step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  transition: all 0.3s;
}
.pa__step--active .pa__step-dot {
  border-color: #fff;
  color: #0a0a0a;
  background: #fff;
}
.pa__step--done .pa__step-dot {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.pa__step-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}
.pa__step--active .pa__step-label { color: #fff; }
.pa__step-line {
  width: 48px;
  height: 2px;
  background: rgba(255,255,255,0.15);
  margin: 0 12px;
}

/* ---- Panels ---- */
.pa__panel {
  display: none;
  animation: paFadeIn 0.4s ease;
}
.pa__panel--active { display: block; }
@keyframes paFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.pa__panel-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.pa__panel-inner--wide {
  max-width: 720px;
}

/* ---- Icon wrap ---- */
.pa__icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: rgba(255,255,255,0.6);
}
.pa__icon-wrap--success {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.2);
  color: #22c55e;
}

/* ---- Typography ---- */
.pa__title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.pa__subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: 32px;
}

/* ---- Form fields ---- */
.pa__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pa__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pa__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pa__label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.pa__optional {
  font-weight: 400;
  color: rgba(255,255,255,0.3);
}
.pa__input,
.pa__textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  color: #fff;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.pa__input:focus,
.pa__textarea:focus {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.09);
}
.pa__input::placeholder,
.pa__textarea::placeholder {
  color: rgba(255,255,255,0.25);
}
.pa__input--error {
  border-color: #ef4444 !important;
  background: rgba(239,68,68,0.06) !important;
}
.pa__textarea {
  resize: vertical;
  min-height: 80px;
}

/* ---- Actions ---- */
.pa__actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  justify-content: flex-end;
}
.pa__btn {
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  letter-spacing: 0.01em;
}
.pa__btn--primary {
  background: #fff;
  color: #0a0a0a;
}
.pa__btn--primary:hover {
  background: #e5e5e5;
  transform: translateY(-1px);
}
.pa__btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.pa__btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.15);
}
.pa__btn--ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.pa__btn--sign {
  background: #22c55e;
  color: #fff;
}
.pa__btn--sign:hover {
  background: #16a34a;
}
.pa__btn--sign:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Agreement Document ---- */
.pa__agreement-doc {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 40px 36px;
  margin-top: 8px;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.pa__agreement-doc::-webkit-scrollbar { width: 5px; }
.pa__agreement-doc::-webkit-scrollbar-track { background: transparent; }
.pa__agreement-doc::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

.pa__doc-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e8e8e8;
}
.pa__doc-logo {
  height: 20px;
  opacity: 1;
  margin-bottom: 16px;
  filter: none;
}
.pa__doc-title {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
}
.pa__doc-date {
  font-size: 13px;
  color: #888;
}
.pa__doc-parties {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.pa__doc-parties strong {
  color: #111;
}
.pa__doc-highlight {
  background: #f0f7ff;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px dashed #b0cfe0;
  color: #111;
}
.pa__doc-section {
  margin-bottom: 24px;
}
.pa__doc-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.pa__doc-subsection-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #333;
  margin: 16px 0 6px;
}
.pa__doc-section--closing {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e8e8e8;
}
.pa__doc-meta {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.pa__doc-reference {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin-top: 12px;
  padding: 12px 16px;
  background: #f7f8fa;
  border-left: 3px solid #ccc;
  border-radius: 0 6px 6px 0;
}
.pa__doc-divider {
  text-align: center;
  margin: 32px 0 24px;
  position: relative;
}
.pa__doc-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #ddd;
}
.pa__doc-divider-label {
  position: relative;
  display: inline-block;
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  background: #fff;
}
/* Toggle */
.pa__field--toggle {
  margin-top: 8px;
}
.pa__toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.pa__toggle-wrap {
  position: relative;
  flex-shrink: 0;
}
.pa__toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pa__toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  transition: background 0.2s;
  position: relative;
}
.pa__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.pa__toggle-input:checked + .pa__toggle-track {
  background: #4ade80;
}
.pa__toggle-input:checked + .pa__toggle-track .pa__toggle-thumb {
  transform: translateX(20px);
}
.pa__toggle-text {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}
.pa__doc-section p {
  font-size: 13.5px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 8px;
}
.pa__doc-section ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.pa__doc-section li {
  font-size: 13.5px;
  color: #444;
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}
.pa__doc-section li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #bbb;
}
.pa__doc-section li strong {
  color: #222;
}

/* ---- Signature ---- */
.pa__summary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.pa__summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}
.pa__summary-row:last-child { border-bottom: none; }
.pa__summary-label {
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.pa__summary-value {
  color: #fff;
  font-weight: 600;
}

.pa__sig-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pa__sig-wrap {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}
.pa__sig-wrap--active {
  border-color: rgba(255,255,255,0.3);
  border-style: solid;
}
.pa__sig-wrap canvas {
  display: block;
  width: 100%;
  height: 160px;
}
.pa__sig-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,0.2);
  font-size: 15px;
  pointer-events: none;
  transition: opacity 0.2s;
}
.pa__sig-wrap--active .pa__sig-placeholder { opacity: 0; }
.pa__sig-clear {
  align-self: flex-end;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}
.pa__sig-clear:hover { color: #fff; }

/* ---- Confirmation ---- */
.pa__confirm-check {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(34,197,94,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #22c55e;
  animation: paCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes paCheckPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pa__confirm-details {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px auto;
  max-width: 400px;
  text-align: left;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .pa__step-label { display: none; }
  .pa__step-line { width: 24px; margin: 0 6px; }
  .pa__panel-inner { padding: 32px 16px 64px; }
  .pa__field-row { grid-template-columns: 1fr; }
  .pa__agreement-doc { padding: 24px 20px; max-height: 400px; }
  .pa__actions { flex-direction: column-reverse; }
  .pa__btn { width: 100%; text-align: center; }
}

/* ============================================================
   PARTNER ONBOARDING
   ============================================================ */
.ob {
  min-height: 100vh;
  background: var(--bg-page, #0d0d1a);
  padding-bottom: 80px;
}
.ob__progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255,255,255,0.06);
  z-index: 100;
}
.ob__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  border-radius: 0 2px 2px 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Panels */
.ob__panel { display: none; }
.ob__panel--active { display: block; animation: obFadeIn 0.35s ease; }
@keyframes obFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ob__panel-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 24px 40px;
}
/* Step badge */
.ob__step-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}
.ob__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--accent, #5cdb95);
}
.ob__emoji .ic {
  width: 48px;
  height: 48px;
}
.ob__title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.ob__subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 520px;
}
/* Cards */
.ob__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}
.ob__card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ob__card-icon {
  display: flex;
  align-items: center;
  color: var(--accent, #4ade80);
}
.ob__card-icon .ic {
  width: 16px;
  height: 16px;
}
.ob__card-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  flex: 1;
}
.ob__card-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #16a34a;
  background: rgba(74,222,128,0.12);
  padding: 3px 8px;
  border-radius: 4px;
}
.ob__optional-tag {
  font-size: 10px;
  font-weight: 500;
  color: rgba(0,0,0,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ob__card-hint {
  font-size: 12.5px;
  color: rgba(0,0,0,0.4);
  padding: 0 20px;
  margin-top: -2px;
}
.ob__card-body {
  padding: 16px 20px 20px;
}
.ob__card-body--prefilled {
  background: rgba(74,222,128,0.04);
}
/* Fields */
.ob__field { margin-bottom: 14px; }
.ob__field:last-child { margin-bottom: 0; }
.ob__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ob__field-row .ob__field { margin-bottom: 0; }
.ob__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ob__input, .ob__textarea {
  width: 100%;
  background: #f7f7f9;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #1a1a2e;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ob__input::placeholder, .ob__textarea::placeholder {
  color: rgba(0,0,0,0.3);
}
.ob__input:focus, .ob__textarea:focus {
  outline: none;
  border-color: #4ade80;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.15);
}
.ob__input--prefilled {
  background: rgba(74,222,128,0.06);
  border-color: rgba(74,222,128,0.25);
  color: #1a1a2e;
}
.ob__textarea { resize: vertical; min-height: 60px; }
/* Radio cards */
.ob__radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ob__radio-group--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.ob__radio-card {
  cursor: pointer;
}
.ob__radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.ob__radio-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: #f7f7f9;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  transition: all 0.2s;
  text-align: center;
}
.ob__radio-card input:checked + .ob__radio-card-inner {
  background: rgba(74,222,128,0.08);
  border-color: #4ade80;
  box-shadow: 0 0 0 1px rgba(74,222,128,0.3);
}
.ob__radio-card:hover .ob__radio-card-inner {
  background: #f0f0f3;
  border-color: rgba(0,0,0,0.15);
}
.ob__radio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.35);
}
.ob__radio-icon .ic {
  width: 24px;
  height: 24px;
}
.ob__radio-card input:checked ~ .ob__radio-card-inner .ob__radio-icon {
  color: #16a34a;
}
.ob__radio-text { font-size: 13px; color: #1a1a2e; font-weight: 500; }
.ob__radio-card--sm .ob__radio-card-inner { padding: 10px 16px; flex-direction: row; gap: 0; }
.ob__radio-card--sm .ob__radio-text { font-size: 14px; }
/* Upload zones */
.ob__upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.ob__upload-zone {
  position: relative;
  cursor: pointer;
  border: 2px dashed rgba(0,0,0,0.12);
  border-radius: 12px;
  text-align: center;
  padding: 24px 12px;
  transition: all 0.2s;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f7f7f9;
}
.ob__upload-zone:hover {
  border-color: #4ade80;
  background: rgba(74,222,128,0.05);
}
.ob__upload-zone--has-files {
  border-color: rgba(74,222,128,0.4);
  background: rgba(74,222,128,0.06);
}
.ob__upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.ob__upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: rgba(0,0,0,0.3);
}
.ob__upload-icon .ic {
  width: 28px;
  height: 28px;
}
.ob__upload-zone:hover .ob__upload-icon,
.ob__upload-zone.ob__upload-zone--active .ob__upload-icon {
  color: #16a34a;
}
.ob__upload-label { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.ob__upload-hint { font-size: 11px; color: rgba(0,0,0,0.35); margin-top: 4px; }
.ob__upload-files {
  margin-top: 8px;
  font-size: 11px;
  color: #4ade80;
  line-height: 1.5;
}
/* Reward tiles */
.ob__tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ob__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: #f7f7f9;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  color: rgba(0,0,0,0.55);
  font-family: inherit;
  font-size: 11px;
}
.ob__tile:hover {
  background: #f0f0f3;
  border-color: rgba(0,0,0,0.15);
  color: #1a1a2e;
}
.ob__tile--active {
  background: rgba(74,222,128,0.1);
  border-color: #4ade80;
  color: #1a1a2e;
  box-shadow: 0 0 0 1px rgba(74,222,128,0.3);
}
.ob__tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.35);
}
.ob__tile-icon .ic {
  width: 22px;
  height: 22px;
}
.ob__tile.ob__tile--active .ob__tile-icon {
  color: #16a34a;
}
.ob__tile-text { font-weight: 600; text-align: center; line-height: 1.3; }
/* Actions */
.ob__actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  justify-content: flex-end;
}
.ob__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
.ob__btn--primary {
  background: #fff;
  color: #111;
}
.ob__btn--primary:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}
.ob__btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.15);
}
.ob__btn--ghost:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.ob__btn--submit {
  background: #4ade80;
  color: #0d0d1a;
  font-size: 15px;
  padding: 14px 32px;
}
.ob__btn--submit:hover {
  background: #22c55e;
}
/* Done screen */
.ob__done-animation {
  margin-bottom: 24px;
}
.ob__done-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(74,222,128,0.1);
  color: #4ade80;
  animation: obPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes obPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
.ob__done-summary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px auto;
  max-width: 400px;
  text-align: left;
}
.ob__done-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.ob__done-label { color: rgba(255,255,255,0.4); }
.ob__done-value { color: rgba(255,255,255,0.8); font-weight: 500; }
/* Summary grid (generated by JS on done screen) */
.ob__summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ob__summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.ob__summary-icon { font-size: 18px; }
.ob__summary-label { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; }
/* Upload zone drag state */
.ob__upload-zone--drag {
  border-color: #4ade80 !important;
  background: rgba(74,222,128,0.08) !important;
}
/* File list items inside upload zones */
.ob__upload-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  margin-top: 6px;
  font-size: 12px;
}
.ob__upload-file-icon { font-size: 14px; flex-shrink: 0; }
.ob__upload-file-name { flex: 1; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob__upload-file-size { color: rgba(0,0,0,0.35); font-size: 11px; flex-shrink: 0; }
.ob__upload-file-remove {
  background: none;
  border: none;
  color: rgba(0,0,0,0.25);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.ob__upload-file-remove:hover { color: #f87171; }
/* Radio card selected state */
.ob__radio-card--selected .ob__radio-card-inner {
  border-color: #4ade80;
  background: rgba(74,222,128,0.08);
}
/* Panel transition for JS-driven fade */
.ob__panel--active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Field hint */
.ob__field-hint {
  font-size: 11px;
  color: rgba(0,0,0,0.35);
  margin-top: 4px;
  line-height: 1.3;
}
/* Color picker */
.ob__color-picker-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ob__color-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ob__color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  outline: none;
}
.ob__color-swatch:hover {
  transform: scale(1.15);
}
.ob__color-swatch--active {
  border-color: #1a1a2e;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 0 12px rgba(74,222,128,0.3);
  transform: scale(1.15);
}
.ob__color-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob__color-input {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  background: none;
}
.ob__color-input::-webkit-color-swatch-wrapper { padding: 0; }
.ob__color-input::-webkit-color-swatch { border: 2px solid rgba(0,0,0,0.1); border-radius: 6px; }
.ob__input--hex {
  width: 90px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
}
/* Blueprint wireframe preview */
.ob__panel-inner--wide {
  max-width: 900px;
}
.ob__preview-header {
  text-align: center;
  margin-bottom: 28px;
}
.ob__blueprint {
  margin-bottom: 28px;
}
.ob__blueprint-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 10px;
}
.ob__blueprint-frame {
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.ob__blueprint-body {
  padding: 20px;
}
/* Wireframe block elements */
.ob__wire-block {
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  position: relative;
}
.ob__wire-block:last-child { margin-bottom: 0; }
.ob__wire-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
  margin-bottom: 8px;
}
.ob__wire-bar {
  height: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  margin-bottom: 6px;
}
.ob__wire-bar--sm { width: 40%; height: 8px; }
.ob__wire-bar--md { width: 65%; }
.ob__wire-bar--lg { width: 85%; }
.ob__wire-bar--accent { background: rgba(74,222,128,0.08); }
.ob__wire-text {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  font-style: italic;
}
.ob__wire-text--data {
  color: rgba(74,222,128,0.5);
  font-style: normal;
  font-weight: 500;
}
.ob__wire-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ob__wire-row--2 { grid-template-columns: repeat(2, 1fr); }
.ob__wire-card {
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}
.ob__wire-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  margin: 0 auto 6px;
}
/* Section label */
.ob__section-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
/* Ready grid — what we're building */
.ob__ready-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.ob__ready-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 10px;
  text-align: center;
}
.ob__ready-card--building {
  background: rgba(251,191,36,0.04);
  border: 1px solid rgba(251,191,36,0.12);
}
.ob__ready-card--later {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}
.ob__ready-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
}
.ob__ready-card--building .ob__ready-icon { color: rgba(251,191,36,0.6); }
.ob__ready-card--later .ob__ready-icon { color: rgba(255,255,255,0.2); }
.ob__ready-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.ob__ready-detail { font-size: 11px; color: rgba(255,255,255,0.35); }
/* Next steps */
.ob__next-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 28px;
  padding: 0 8px;
}
.ob__next-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ob__next-step:last-child { border-bottom: none; }
.ob__next-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.ob__next-step-text {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}
/* Mobile */
@media (max-width: 600px) {
  .ob__panel-inner { padding: 48px 16px 40px; }
  .ob__title { font-size: 22px; }
  .ob__field-row { grid-template-columns: 1fr; }
  .ob__upload-grid { grid-template-columns: 1fr; }
  .ob__tile-grid { grid-template-columns: repeat(2, 1fr); }
  .ob__radio-group--3 { grid-template-columns: 1fr 1fr; }
  .ob__actions { flex-direction: column-reverse; }
  .ob__btn { width: 100%; text-align: center; }
  .ob__ready-grid { grid-template-columns: repeat(2, 1fr); }
  .ob__color-presets { gap: 6px; }
  .ob__wire-row { grid-template-columns: 1fr 1fr; }
  .ob__wire-row--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   PARTNER DASHBOARD — STATUS BANNERS
   ============================================================ */
.pd__status-banner { padding: 0; }
.pd__banner-card {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 24px;
}
.pd__banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.pd__banner-card--building .pd__banner-inner {
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.12);
}
.pd__banner-card--review .pd__banner-inner {
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.15);
}
.pd__banner-icon {
  flex-shrink: 0;
  color: rgba(251,191,36,0.7);
  display: flex;
  align-items: center;
}
.pd__banner-card--review .pd__banner-icon,
.pd__review-icon { color: rgba(74,222,128,0.7); }
.pd__banner-text { flex: 1; min-width: 0; }
.pd__banner-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.pd__banner-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}
.pd__banner-progress { flex-shrink: 0; text-align: center; }
.pd__banner-progress-bar {
  width: 120px;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.pd__banner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 3px;
  transition: width 0.8s ease;
}
.pd__banner-progress-label {
  font-size: 10px;
  color: rgba(251,191,36,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.pd__review-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 12px;
}
.pd__review-icon {
  flex-shrink: 0;
  color: rgba(74,222,128,0.7);
  display: flex;
  align-items: center;
}
.pd__review-text { flex: 1; min-width: 0; }
.pd__review-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.pd__review-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}
.pd__review-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pd__review-btn--primary {
  background: #4ade80;
  color: #000;
}
.pd__review-btn--primary:hover {
  background: #22c55e;
  transform: translateY(-1px);
}
.pd__ob-item--ready .pd__ob-action {
  animation: readyPulse 2s ease infinite;
}
@keyframes readyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ============================================================
   PARTNER APPROVAL PAGE
   ============================================================ */
.papr { min-height: 100vh; background: #0a0a0a; }
.papr__header {
  padding: 32px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.papr__back {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
  transition: color 0.2s;
}
.papr__back:hover { color: #fff; }
.papr__title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.papr__subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.5;
}
.papr__content { padding: 32px 0; }
.papr__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}
.papr__preview {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.papr__preview-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.papr__preview-dots { display: flex; gap: 6px; }
.papr__preview-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.papr__preview-dots span:first-child { background: rgba(239,68,68,0.4); }
.papr__preview-dots span:nth-child(2) { background: rgba(251,191,36,0.4); }
.papr__preview-dots span:nth-child(3) { background: rgba(74,222,128,0.4); }
.papr__preview-url {
  flex: 1;
  padding: 5px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  font-family: 'SF Mono', Monaco, monospace;
}
.papr__preview-body {
  max-height: 70vh;
  overflow-y: auto;
}
.papr__sidebar { display: flex; flex-direction: column; gap: 16px; }
.papr__sidebar-card {
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.papr__sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.papr__sidebar-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin: 0 0 16px;
  line-height: 1.5;
}
.papr__checklist { display: flex; flex-direction: column; gap: 8px; }
.papr__check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.papr__check-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.papr__btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-align: center;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}
.papr__btn:last-child { margin-bottom: 0; }
.papr__btn--primary { background: #4ade80; color: #000; }
.papr__btn--primary:hover { background: #22c55e; transform: translateY(-1px); }
.papr__btn--secondary {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.08);
}
.papr__btn--secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }
.papr__feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 12px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.papr__feedback-textarea:focus { outline: none; border-color: rgba(74,222,128,0.3); }
.papr__feedback-textarea::placeholder { color: rgba(255,255,255,0.2); }
.papr__feedback-sent { text-align: center; padding: 8px 0; }
.papr__feedback-sent-icon {
  margin-bottom: 10px;
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
}
.papr__feedback-sent h3 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.papr__feedback-sent p { font-size: 13px; color: rgba(255,255,255,0.45); margin: 0 0 16px; line-height: 1.5; }
.papr__modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.papr__modal-card {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.papr__modal-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.papr__modal-text { font-size: 14px; color: rgba(255,255,255,0.5); margin: 0 0 24px; line-height: 1.5; }
.papr__modal-actions { display: flex; gap: 10px; }
.papr__modal-actions .papr__btn { flex: 1; margin-bottom: 0; }
.papr__success {
  text-align: center;
  padding: 80px 32px;
  max-width: 500px;
  margin: 0 auto;
}
.papr__success-icon {
  margin-bottom: 20px;
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
}
.papr__success-title { font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: -0.02em; }
.papr__success-text { font-size: 15px; color: rgba(255,255,255,0.5); margin: 0 0 32px; line-height: 1.6; }
.papr__success-actions { display: flex; justify-content: center; }
.papr__success-actions .papr__btn { width: auto; padding: 12px 32px; }
@media (max-width: 768px) {
  .papr__layout { grid-template-columns: 1fr; }
  .papr__preview { order: -1; }
  .pd__banner-inner { flex-direction: column; text-align: center; gap: 12px; }
  .pd__review-inner { flex-direction: column; text-align: center; gap: 12px; }
  .papr__modal-actions { flex-direction: column-reverse; }
}

/* ============================================
   IN-VENUE SWEEPSTAKES — LIVE CONCERT EXPERIENCE
   ============================================ */

/* Full-screen takeover — no nav padding, hero covers nav */
.page--invenue {
  padding-top: 0 !important;
  min-height: 100vh !important;
  background: #0a0a0a !important;
  color: #fff;
}

/* ── Keyframe Animations ── */
@keyframes iv-ken-burns {
  0%   { transform: scale(1.02); }
  100% { transform: scale(1.12); }
}
@keyframes iv-cta-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,59,48,0.3); }
  50%      { box-shadow: 0 0 35px rgba(255,59,48,0.55), 0 0 60px rgba(255,59,48,0.2); }
}
@keyframes iv-bar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes iv-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.5); }
}
@keyframes holoShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes iv-countdown-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255,59,48,0.15); }
  50%      { box-shadow: 0 0 30px rgba(255,59,48,0.3); }
}
@keyframes iv-pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes iv-light-leak {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.6; }
  100% { opacity: 0.3; }
}

/* ── PULSE BAR — fixed top strip ── */
.iv__pulse-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(180,0,0,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}

.iv__pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 8px rgba(255,59,48,0.8);
  animation: iv-pulse-dot 1.2s ease infinite;
}

.iv__pulse-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iv__pulse-count {
  opacity: 0.7;
  font-weight: 500;
  font-size: 11px;
}

/* ── HERO — full viewport, cinematic ── */
.iv__hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 1000px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Concert light leak overlay */
.iv__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,59,48,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(180,0,255,0.06) 0%, transparent 60%);
  animation: iv-light-leak 8s ease infinite;
  pointer-events: none;
}

.iv__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  animation: iv-ken-burns 25s ease-out forwards;
  will-change: transform;
}

.iv__hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.15) 30%,
    rgba(0,0,0,0.4) 55%,
    rgba(0,0,0,0.75) 80%,
    rgba(10,10,10,0.95) 100%
  );
}

.iv__hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 24px 48px;
  max-width: 600px;
  width: 100%;
}

/* "HAPPENING NOW" tag */
.iv__hero-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,59,48,0.2);
  border: 1px solid rgba(255,59,48,0.4);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff3b30;
  margin-bottom: 16px;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255,59,48,0.15);
}

.iv__hero-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b30;
  animation: iv-pulse-dot 1s ease infinite;
}

.iv__hero-artist {
  display: block;
  font-size: clamp(13px, 3vw, 15px);
  font-weight: 600;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}

.iv__hero-title {
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.3);
  position: relative;
  display: inline-block;
}

.iv__hero-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff3b30, #ff6b5a);
  border-radius: 2px;
  margin: 12px auto 0;
}

.iv__hero-venue {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 8px;
  font-weight: 500;
}

.iv__hero-prize {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0 0 20px;
}

.iv__hero-fine {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin: 12px 0 0;
}
.iv__hero-fine a { color: rgba(255,255,255,0.5); text-decoration: underline; }

/* ── COUNTDOWN ── */
.iv__countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  margin-bottom: 20px;
  animation: iv-countdown-pulse 3s ease infinite;
}

.iv__countdown-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}

.iv__countdown-digits {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iv__countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iv__countdown-num {
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.iv__countdown-sep {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  line-height: 1;
  margin-top: -8px;
}

.iv__countdown-unit {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

/* ── HERO CTA ── */
.iv__hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: #ff3b30;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-display);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  letter-spacing: 0.02em;
  animation: iv-cta-glow 2.5s ease infinite;
  transition: transform 0.15s, background 0.2s;
}
.iv__hero-cta:hover { transform: scale(1.04); background: #e62e24; }
.iv__hero-cta:active { transform: scale(0.97); }

/* ── LIVE ACTIVITY FEED ── */
.iv__feed {
  background: #0c0c0c;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 24px 16px;
}

.iv__feed-inner {
  max-width: 600px;
  margin: 0 auto;
}

.iv__feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.iv__feed-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 6px rgba(255,59,48,0.6);
  animation: iv-pulse-dot 1.2s ease infinite;
  flex-shrink: 0;
}

.iv__feed-title {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-display);
  color: #fff;
  flex: 1;
}

.iv__feed-stat {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}

.iv__feed-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.iv__feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: opacity 0.3s, transform 0.3s;
}

.iv__feed-item--new {
  opacity: 0;
  transform: translateY(-8px);
}

.iv__feed-item--vip {
  border-color: rgba(255,215,0,0.2);
  background: rgba(255,215,0,0.04);
}

.iv__feed-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}

.iv__feed-item--vip .iv__feed-avatar {
  background: rgba(255,215,0,0.15);
  color: #ffd700;
}

.iv__feed-body {
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}
.iv__feed-body strong { color: #fff; font-weight: 600; }

.iv__feed-vip-badge {
  display: inline-block;
  padding: 1px 6px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #111;
  font-size: 9px;
  font-weight: 800;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-left: 4px;
}

.iv__feed-time {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

/* ── PROGRESS / FUNDRAISING DASHBOARD ── */
.iv__progress {
  position: relative;
  padding: 32px 16px;
  background: #0b0b0b;
}

/* Grid pattern background */
.iv__progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.iv__progress-inner {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.iv__progress-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.iv__progress-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 6px rgba(255,59,48,0.5);
  animation: iv-pulse-dot 1.5s ease infinite;
}

.iv__progress-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.iv__progress-raised {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(255,59,48,0.2);
}

.iv__progress-goal {
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
}

.iv__progress-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: rgba(255,59,48,0.12);
  border: 1px solid rgba(255,59,48,0.2);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #ff3b30;
  margin-left: auto;
}

.iv__progress-bar {
  position: relative;
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Tick marks */
.iv__progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(25% - 1px),
    rgba(255,255,255,0.08) calc(25% - 1px),
    rgba(255,255,255,0.08) 25%
  );
  z-index: 2;
  pointer-events: none;
}

.iv__progress-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(90deg, #ff3b30, #ff6b5a);
  border-radius: 99px;
  transition: width 0.8s ease;
}

/* Shimmer sweep */
.iv__progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: iv-bar-shimmer 2.5s ease infinite;
}

.iv__progress-glow {
  position: absolute;
  top: 50%;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 10px rgba(255,59,48,0.6), 0 0 20px rgba(255,59,48,0.3);
  animation: iv-glow-pulse 2s ease infinite;
}

.iv__progress-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.iv__progress-stat {
  text-align: center;
  padding: 14px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: border-color 0.2s;
}
.iv__progress-stat:hover { border-color: rgba(255,255,255,0.12); }

.iv__progress-stat strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  margin-bottom: 2px;
}

.iv__progress-stat span {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ── ENTER / DONATE SECTION ── */
.iv__enter {
  padding: 40px 16px;
  background: #0a0a0a;
}

.iv__enter-inner {
  max-width: 600px;
  margin: 0 auto;
}

.iv__enter-title {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  text-align: center;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

/* Impact card — frosted glass */
.iv__enter-impact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 20px;
}

.iv__enter-impact-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.iv__enter-impact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iv__enter-impact-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.iv__enter-impact-text span {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}

/* Amount grid */
.iv__enter-amounts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.iv__amount {
  position: relative;
  padding: 20px 8px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  color: #fff;
}
.iv__amount:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); }

/* "Popular" / tag badge — sits above button */
.iv__amount-tag {
  position: absolute;
  top: -9px;
  padding: 2px 10px;
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #fff;
  color: #111;
  border-radius: 4px;
}

.iv__amount-price {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
}

.iv__amount-entries {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

/* Selected state */
.iv__amount--active {
  border-color: #ff3b30;
  background: rgba(255,59,48,0.08);
  box-shadow: 0 0 20px rgba(255,59,48,0.1);
}
.iv__amount--active .iv__amount-price { color: #fff; }
.iv__amount--active .iv__amount-entries { color: rgba(255,255,255,0.6); }
.iv__amount--active .iv__amount-tag { background: #ff3b30; color: #fff; }

/* ── VIP ($100) amount button ── */
.iv__amount--vip {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255,215,0,0.06) 0%, rgba(255,170,0,0.02) 100%);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 12px;
  position: relative;
  overflow: visible;
}

.iv__amount--vip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,215,0,0.06) 45%, transparent 50%);
  animation: holoShimmer 3s ease infinite;
  overflow: hidden;
  border-radius: inherit;
}

.iv__amount--vip:hover {
  border-color: rgba(255,215,0,0.4);
  background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(255,170,0,0.04) 100%);
}

.iv__amount--vip.iv__amount--active {
  border-color: #ffd700;
  background: linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(255,170,0,0.06) 100%);
  box-shadow: 0 0 20px rgba(255,215,0,0.12), inset 0 0 20px rgba(255,215,0,0.04);
}

/* Gold "Big Screen" tag */
.iv__amount-tag--vip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #111;
  padding: 3px 10px;
  border-radius: 4px;
}

.iv__amount-tag--vip svg {
  width: 12px;
  height: 12px;
}

.iv__amount--vip.iv__amount--active .iv__amount-tag--vip {
  background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

.iv__amount-perk {
  font-size: 10px;
  color: rgba(255,215,0,0.65);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.iv__amount--vip.iv__amount--active .iv__amount-perk {
  color: rgba(255,215,0,0.85);
}

/* Main CTA button */
.iv__enter-cta {
  width: 100%;
  padding: 18px 24px;
  background: #ff3b30;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-display);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  margin-bottom: 12px;
}
.iv__enter-cta:hover { transform: scale(1.02); background: #e62e24; }
.iv__enter-cta:active { transform: scale(0.97); }

.iv__enter-fine {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}
.iv__enter-fine a { color: rgba(255,255,255,0.4); text-decoration: underline; }

/* ── CAUSE / WHY THIS MATTERS ── */
.iv__cause {
  padding: 40px 16px;
  background: #0c0c0c;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
}

/* Red accent line at top */
.iv__cause::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff3b30, transparent);
  border-radius: 2px;
}

.iv__cause-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.iv__cause-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.iv__cause-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b30;
}

.iv__cause-org {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  margin: 0 0 12px;
}

.iv__cause-mission {
  font-size: var(--text-lg, 17px);
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0 0 12px;
}

.iv__cause-artist {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

/* ── STICKY BOTTOM CTA ── */
.iv__sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 12px 16px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.iv__sticky--visible {
  transform: translateY(0);
  pointer-events: all;
}

.iv__sticky-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.iv__sticky-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iv__sticky-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-display);
  color: #fff;
}

.iv__sticky-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b30;
  animation: iv-pulse-dot 1s ease infinite;
}

.iv__sticky-entries {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

.iv__sticky-cta {
  padding: 12px 28px;
  background: #ff3b30;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-display);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, background 0.2s;
}
.iv__sticky-cta:hover { transform: scale(1.04); background: #e62e24; }

/* ── Mobile optimizations ── */
@media (max-width: 768px) {
  .iv__hero { min-height: 500px; }
  .iv__hero::before { animation: none; }
  .iv__hero-prize { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .iv__countdown { padding: 10px 18px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .iv__enter-amounts { gap: 8px; }
  .iv__progress-stats { gap: 8px; }
  .iv__progress-stat { padding: 10px 6px; }
}

/* ============================================
   IN-VENUE: PHONE BUMP / INVITE A FRIEND
   Post-donation modal for combining entries
   ============================================ */

/* ── Keyframe Animations ── */
@keyframes iv-spark-expand {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes iv-bolt-flash {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes iv-team-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Dark modal card override ── */
.entry-modal__card--invite {
  background: #111 !important;
  color: #fff;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
}

.entry-modal__card--invite .entry-modal__close {
  background: rgba(255,255,255,0.1);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}
.entry-modal__card--invite .entry-modal__close:hover {
  background: rgba(255,255,255,0.2);
}

.entry-modal__card--invite .entry-modal__cta {
  background: #ff3b30;
  color: #fff;
  border-radius: 14px;
  margin: 0;
}
.entry-modal__card--invite .entry-modal__cta:hover {
  background: #e62e24;
}

/* ── Hero image strip ── */
.iv-invite__hero {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.iv-invite__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.iv-invite__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, #111 100%);
  pointer-events: none;
}

.iv-invite__hero-badge {
  position: absolute;
  bottom: 12px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8);
}

.iv-invite__hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 6px rgba(255,59,48,0.6);
  animation: iv-pulse-dot 1s ease infinite;
}

/* ── Invite prompt (Phase 1) ── */
.iv-invite {
  padding: 24px;
  text-align: center;
}

.iv-invite__title {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.iv-invite__sub {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0 0 20px;
}
.iv-invite__sub strong { color: #fff; }

.iv-invite__your-entries {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  margin-bottom: 24px;
}

.iv-invite__your-count {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
}

.iv-invite__your-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}

/* ── Phone bump illustration ── */
.iv-bump {
  margin-bottom: 20px;
}

.iv-bump__phones {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 24px 0;
}

.iv-bump__phone {
  width: 76px;
  height: 120px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.4s, box-shadow 0.4s;
}

.iv-bump__phone--left {
  transform: rotate(8deg) translateX(10px);
}

.iv-bump__phone--right {
  transform: rotate(-8deg) translateX(-10px);
}

.iv-bump__phone-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.iv-bump__phone-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}

.iv-bump__phone-entries {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
}

/* Spark zone — centered between phones */
.iv-bump__spark {
  position: relative;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.iv-bump__spark-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(232,255,10,0.4);
  border-radius: 50%;
  transform: scale(0);
}

.iv-bump__spark-bolt {
  position: relative;
  z-index: 2;
  opacity: 0;
  filter: drop-shadow(0 0 8px #e8ff0a);
  transition: opacity 0.3s;
}

.iv-bump__hint {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin: 0;
  text-align: center;
}

/* Bump CTA button */
.iv-bump__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 32px;
  margin-top: 16px;
  background: #ff3b30;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-display);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.iv-bump__cta:hover { transform: scale(1.03); background: #e62e24; }
.iv-bump__cta:active { transform: scale(0.97); }
.iv-bump__cta:disabled { opacity: 0.7; cursor: default; transform: none; }

.iv-bump__cta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Alt methods — "or send a link" */
.iv-invite__alt-methods {
  margin-top: 12px;
}

.iv-invite__alt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.iv-invite__alt-btn:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.iv-invite__alt-btn svg { flex-shrink: 0; }

/* Copied confirmation */
.iv-invite__copied {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin-top: 12px;
  background: rgba(52,199,89,0.1);
  border: 1px solid rgba(52,199,89,0.2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #34c759;
}
.iv-invite__copied svg { flex-shrink: 0; }

/* Skip button */
.iv-invite__skip {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: none;
  border: none;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.iv-invite__skip:hover { color: rgba(255,255,255,0.55); }

/* ── Bump animation states ── */

/* Active — phones slide together */
.iv-bump--active .iv-bump__phone--left {
  transform: rotate(2deg) translateX(24px);
}
.iv-bump--active .iv-bump__phone--right {
  transform: rotate(-2deg) translateX(-24px);
}

/* Spark appears */
.iv-bump--active .iv-bump__spark { opacity: 1; }

.iv-bump--active .iv-bump__spark-ring {
  animation: iv-spark-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.iv-bump--active .iv-bump__spark-ring--2 {
  animation: iv-spark-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
}

.iv-bump--active .iv-bump__spark-bolt {
  animation: iv-bolt-flash 0.6s ease 0.2s forwards;
}

/* Connected — green glow on phones */
.iv-bump--connected .iv-bump__phone {
  border-color: rgba(52,199,89,0.5);
  box-shadow: 0 0 20px rgba(52,199,89,0.2), inset 0 0 12px rgba(52,199,89,0.05);
}

.iv-bump--connected .iv-bump__spark-bolt {
  opacity: 1;
  filter: drop-shadow(0 0 12px #e8ff0a) drop-shadow(0 0 24px rgba(232,255,10,0.4));
}

/* ── Team formed (Phase 2) ── */
.iv-invite__team {
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  gap: 20px;
  text-align: center;
}

.iv-invite__team-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(52,199,89,0.12);
  border: 1px solid rgba(52,199,89,0.2);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #34c759;
}

.iv-invite__team-members {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.iv-invite__team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.iv-invite__team-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  transition: background 0.4s, transform 0.4s;
}

.iv-invite__team-avatar--you {
  background: linear-gradient(135deg, #ff3b30, #ff6b5a);
}

.iv-invite__team-avatar--active {
  background: linear-gradient(135deg, #34c759, #30d158);
  transform: scale(1.05);
}

.iv-invite__team-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.iv-invite__team-entries {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

.iv-invite__team-plus {
  font-size: 24px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  margin: 0 4px;
}

.iv-invite__team-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}

.iv-invite__team-total-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}

.iv-invite__team-total-num {
  font-size: 36px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: -0.02em;
}

.iv-invite__team-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin: 0;
}
.iv-invite__team-sub strong { color: #fff; }

/* Team joined — celebration pop on total */
.iv-invite__team--joined .iv-invite__team-total-num {
  animation: iv-team-pop 0.4s ease;
}

.iv-invite__team--joined .iv-invite__team-total {
  border-color: rgba(52,199,89,0.2);
  background: rgba(52,199,89,0.04);
}

/* ============================================
   IN-VENUE: CLUB JOIN / MONTHLY DONOR UPSELL
   Post-invite modal for converting to monthly
   ============================================ */

/* ── Dark modal card override ── */
.entry-modal__card--club-upsell {
  background: #111 !important;
  color: #fff;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
}

.entry-modal__card--club-upsell .entry-modal__close {
  background: rgba(255,255,255,0.1);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}
.entry-modal__card--club-upsell .entry-modal__close:hover {
  background: rgba(255,255,255,0.2);
}

/* Red accent CTA variant (shared by invite + club upsell) */
.entry-modal__cta--accent {
  background: #ff3b30 !important;
  color: #fff !important;
  border-radius: 14px;
}
.entry-modal__cta--accent:hover {
  background: #e62e24 !important;
}

/* ── Hero image strip ── */
.iv-club-upsell__hero {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.iv-club-upsell__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.iv-club-upsell__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 20%, #111 100%);
  pointer-events: none;
}

/* ── Content area ── */
.iv-club-upsell__content {
  padding: 24px;
  text-align: center;
}

.iv-club-upsell__badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255,59,48,0.12);
  border: 1px solid rgba(255,59,48,0.2);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ff3b30;
}

.iv-club-upsell__title {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}

.iv-club-upsell__sub {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0 0 20px;
}

/* ── Perks list ── */
.iv-club-upsell__perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}

.iv-club-upsell__perk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}

.iv-club-upsell__perk-icon {
  width: 28px;
  text-align: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Tier buttons ── */
.iv-club-upsell__tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.iv-club-upsell__tier {
  padding: 14px 8px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.iv-club-upsell__tier:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
}

.iv-club-upsell__tier--active {
  border-color: #ff3b30;
  background: rgba(255,59,48,0.08);
  box-shadow: 0 0 16px rgba(255,59,48,0.1);
}

.iv-club-upsell__tier-price {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-display);
}

.iv-club-upsell__tier-price small {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.5;
}

.iv-club-upsell__tier-entries {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

/* ── Dark context overrides ── */
.entry-modal__card--club-upsell .donate-disclaimer {
  color: rgba(255,255,255,0.35);
}
.entry-modal__card--club-upsell .donate-disclaimer a {
  color: rgba(255,255,255,0.45);
}
.entry-modal__card--club-upsell .entry-modal__skip {
  color: rgba(255,255,255,0.35);
}
.entry-modal__card--club-upsell .entry-modal__skip:hover {
  color: rgba(255,255,255,0.55);
}

/* ============================================
   ADMIN DASHBOARD
   Dark-themed analytics dashboard
   ============================================ */

/* ── Shell (from index.html) ── */
.admin {
  background: #0a0a0a;
  color: #fff;
  min-height: 100vh;
  padding-bottom: var(--space-3xl);
}

.admin__header {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.admin__header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.admin__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.admin__subtitle {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}

.admin__header-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.admin__date-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin__preset {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
}

.admin__preset:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.admin__preset--active {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.admin__date-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  margin: 0 4px;
}

.admin__date-input {
  padding: 5px 10px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-family: var(--font-body);
  color-scheme: dark;
}

.admin__date-to {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

.admin__header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

.admin__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: adminPulse 2s ease-in-out infinite;
}

@keyframes adminPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.admin__live-label {
  font-weight: 600;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.admin__date {
  color: rgba(255,255,255,0.4);
}

/* Demo/Live mode toggle */
.admin__mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s;
  margin-right: 8px;
}
.admin__mode-toggle:hover {
  background: rgba(255,255,255,0.1);
}
.admin__mode-toggle input {
  display: none;
}
.admin__mode-slider {
  width: 32px;
  height: 18px;
  background: rgba(255,255,255,0.15);
  border-radius: 9px;
  position: relative;
  transition: background 0.3s;
}
.admin__mode-slider::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}
.admin__mode-toggle input:checked + .admin__mode-slider {
  background: rgba(255,165,0,0.5);
}
.admin__mode-toggle input:checked + .admin__mode-slider::after {
  transform: translateX(14px);
}
.admin__mode-toggle input:not(:checked) + .admin__mode-slider {
  background: #4ade80;
}
.admin__mode-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  min-width: 32px;
}

.admin__kpis {
  padding: var(--space-lg) 0;
}

.admin__kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin__tabs {
  padding: 0 0 var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: calc(var(--preview-bar-height) + var(--nav-height));
  z-index: 50;
  background: #0a0a0a;
}

.admin__tab-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.admin__tab-bar::-webkit-scrollbar { display: none; }

.admin__tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: none;
  color: rgba(255,255,255,0.45);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: var(--font-body);
}

.admin__tab:hover {
  color: rgba(255,255,255,0.8);
}

.admin__tab--active {
  color: #fff;
  border-bottom-color: #fff;
}

.admin__tab--urgent {
  color: #f87171;
}

.admin__tab--urgent.admin__tab--active {
  border-bottom-color: #f87171;
}

.admin__user-search {
  margin-top: var(--space-md);
}

.admin__search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.4);
}

.admin__search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-body);
}

.admin__search-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.admin__panel {
  padding: var(--space-lg) 0;
}

/* ── Dynamic Content (from app.js) ── */

/* KPI Cards */
.adm-kpi {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background 0.15s;
}

.adm-kpi:hover {
  background: rgba(255,255,255,0.07);
}

.adm-kpi__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
}

.adm-kpi__icon svg { width: 18px; height: 18px; }

.adm-kpi__body {
  min-width: 0;
}

.adm-kpi__label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.adm-kpi__value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.adm-kpi__delta {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.adm-kpi__delta--up { color: #4ade80; }
.adm-kpi__delta--down { color: #f87171; }

/* Summary Banner */
.adm-summary-banner {
  display: flex;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.adm-summary-banner__item {
  flex: 1;
  padding: 20px 16px;
  background: rgba(255,255,255,0.03);
  text-align: center;
}

.adm-summary-banner__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.adm-summary-banner__label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.adm-summary-banner__delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

/* Grid */
.adm-grid {
  display: grid;
  gap: 16px;
}

.adm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.adm-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Cards */
.adm-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
}

.adm-card--grad-green { border-left: 3px solid #4ade80; }
.adm-card--grad-pink { border-left: 3px solid #ec4899; }
.adm-card--grad-blue { border-left: 3px solid #60a5fa; }
.adm-card--grad-gold { border-left: 3px solid #fbbf24; }
.adm-card--grad-purple { border-left: 3px solid #a78bfa; }

.adm-card__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Section Headers */
.adm-section-header {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Mini KPIs (inside cards) */
.adm-mini {
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  text-align: center;
}

.adm-mini__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.adm-mini__label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.adm-mini-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.adm-mini-row .adm-mini {
  padding: 8px;
}

.adm-mini-row .adm-mini__value { font-size: 0.95rem; }

/* Value colors */
.adm-val--up { color: #4ade80; }
.adm-val--down { color: #f87171; }

/* Big number */
.adm-big-num {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.adm-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
}

/* Trend chart (bar chart) */
.adm-trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding-top: 8px;
}

.adm-trend__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

.adm-trend__bar {
  width: 100%;
  min-height: 2px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

.adm-card--grad-green .adm-trend__bar { background: rgba(74,222,128,0.5); }
.adm-card--grad-pink .adm-trend__bar { background: rgba(236,72,153,0.5); }
.adm-card--grad-blue .adm-trend__bar { background: rgba(96,165,250,0.5); }

.adm-trend__label {
  font-size: 9px;
  color: rgba(255,255,255,0.25);
  margin-top: 4px;
  white-space: nowrap;
}

.adm-trend__tip {
  position: absolute;
  top: -4px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.adm-trend__col:hover .adm-trend__tip { opacity: 1; }
.adm-trend__col:hover .adm-trend__bar { background: rgba(255,255,255,0.4); }
.adm-card--grad-green .adm-trend__col:hover .adm-trend__bar { background: rgba(74,222,128,0.8); }
.adm-card--grad-pink .adm-trend__col:hover .adm-trend__bar { background: rgba(236,72,153,0.8); }

/* Bar chart (horizontal) */
.adm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.adm-bar__label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  min-width: 80px;
  white-space: nowrap;
}

.adm-bar__track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.adm-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: rgba(255,255,255,0.3);
  transition: width 0.4s ease;
}

.adm-bar__value {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  min-width: 40px;
  text-align: right;
}

/* Tables */
.adm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.adm-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.adm-table td {
  padding: 10px 12px;
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}

.adm-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.adm-row--click {
  cursor: pointer;
}

.adm-row--click:hover {
  background: rgba(255,255,255,0.06) !important;
}

.adm-urgent {
  color: #f87171 !important;
  font-weight: 600;
}

/* Live Feed */
.adm-feed {
  max-height: 360px;
  overflow-y: auto;
}

.adm-feed__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}

.adm-feed__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  background: rgba(255,255,255,0.3);
}

.adm-feed__dot--green { background: #4ade80; }
.adm-feed__dot--pink { background: #ec4899; }
.adm-feed__dot--blue { background: #60a5fa; }
.adm-feed__dot--yellow { background: #fbbf24; }
.adm-feed__dot--gold { background: #f59e0b; }
.adm-feed__dot--white { background: rgba(255,255,255,0.5); }

.adm-feed__text {
  flex: 1;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
}

.adm-feed__text strong { color: #fff; }

.adm-feed__time {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Badges */
.adm-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adm-badge--premier {
  background: rgba(236,72,153,0.15);
  color: #ec4899;
}

.adm-badge--recurring {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
}

.adm-badge--one-time {
  background: rgba(96,165,250,0.12);
  color: #60a5fa;
}

.adm-badge--sweep,
.adm-badge--sweepstakes {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
}

/* Pills */
.adm-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}

.adm-pill--green { background: rgba(74,222,128,0.12); color: #4ade80; }
.adm-pill--red { background: rgba(248,113,113,0.12); color: #f87171; }
.adm-pill--blue { background: rgba(96,165,250,0.12); color: #60a5fa; }
.adm-pill--gold { background: rgba(251,191,36,0.12); color: #fbbf24; }
.adm-pill--purple { background: rgba(167,139,250,0.12); color: #a78bfa; }

/* Back button */
.adm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
}

.adm-back-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.adm-back-btn svg { width: 14px; height: 14px; }

/* CSV / Download button */
.adm-csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
}

.adm-csv-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}

.adm-csv-inline {
  font-size: 10px;
  padding: 2px 8px;
}

/* Insights */
.adm-insights {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: var(--space-lg);
}

.adm-insights__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.adm-insights__header-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  animation: adminPulse 2s ease-in-out infinite;
}

.adm-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

.adm-insight strong { color: #fff; }

.adm-insight--green { background: rgba(74,222,128,0.06); }
.adm-insight--yellow { background: rgba(251,191,36,0.06); }
.adm-insight--red { background: rgba(248,113,113,0.06); }
.adm-insight--blue { background: rgba(96,165,250,0.06); }

.adm-insight__icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.3;
}

.adm-insight__text {
  flex: 1;
}

/* Health Score Ring */
.adm-health {
  display: flex;
  align-items: center;
  gap: 24px;
}

.adm-health__ring {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.adm-health__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.adm-health__ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 8;
}

.adm-health__ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

.adm-health__score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.adm-health__score-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.adm-health__details {
  flex: 1;
}

.adm-health__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.adm-health__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  padding: 4px 0;
}

.adm-health__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.adm-health__row-value {
  margin-left: auto;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}

/* Key Metrics */
.adm-key-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.adm-km {
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  text-align: center;
}

.adm-km__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.adm-km__label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Sparklines */
.adm-spark {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
}

/* User Profile */
.adm-user-profile__header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.adm-user-profile__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.adm-user-profile__info { flex: 1; min-width: 0; }

.adm-user-profile__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.adm-user-profile__meta {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}

/* Sweep Detail */
.adm-sweep-detail__header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
}

.adm-sweep-detail__dates {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

/* Notes */
.adm-notes__empty {
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  font-style: italic;
}

.adm-note {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.adm-note__text {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.adm-note__meta {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

.adm-note-form {
  margin-bottom: 12px;
}

.adm-note-form__input {
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-family: var(--font-body);
  resize: vertical;
}

.adm-note-form__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.adm-note-form__save,
.adm-note-form__cancel {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
}

.adm-note-form__save {
  background: #fff;
  color: #111;
}

.adm-note-form__cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}

.adm-add-note-btn {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--font-body);
}

.adm-add-note-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}

/* Anomaly badges */
.adm-anomaly {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.adm-anomaly--hot {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
}

.adm-anomaly--cold {
  background: rgba(248,113,113,0.12);
  color: #f87171;
}

.adm-anomaly--ok {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
}

/* Progress bars */
.adm-prog {
  margin-bottom: 10px;
}

.adm-prog__label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

.adm-prog__track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}

.adm-prog__fill {
  height: 100%;
  border-radius: 3px;
  background: rgba(255,255,255,0.3);
}

/* Funnel */
.adm-funnel { margin-bottom: 8px; }

.adm-funnel__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.adm-funnel__value {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  min-width: 60px;
}

.adm-funnel__bar-wrap {
  flex: 1;
  height: 24px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.adm-funnel__bar-fill {
  height: 100%;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
}

.adm-funnel__bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.adm-funnel__drop {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  padding: 2px 0;
}

/* Cohort / Retention */
.adm-cohort {
  overflow-x: auto;
}

.adm-retention-curve {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
}

.adm-retention-curve__point {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.adm-retention-curve__bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: rgba(74,222,128,0.4);
}

.adm-retention-curve__label {
  font-size: 9px;
  color: rgba(255,255,255,0.25);
  margin-top: 3px;
}

/* Range / Date pills */
.adm-range-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  width: fit-content;
}

.adm-range-pill {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.5);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.adm-range-pill:hover {
  color: rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.04);
}

.adm-range-pill--active {
  color: #111;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* ── ADMIN: BRAND CARDS ── */
.adm-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.adm-brand-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.adm-brand-card:hover {
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.adm-brand-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  margin-bottom: 12px;
}

.adm-brand-card__logo-wrap {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  overflow: hidden;
}

.adm-brand-card__logo {
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
}

.adm-brand-card__initial {
  font-size: 18px;
  font-weight: 800;
  color: rgba(0,0,0,0.3);
}

.adm-brand-card__info {
  flex: 1;
  min-width: 0;
}

.adm-brand-card__name {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-brand-card__cat {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.adm-brand-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(0,0,0,0.45);
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.adm-brand-card__missing {
  color: rgba(220,38,38,0.6);
  font-style: italic;
}

.adm-pill--sm {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.5);
}

/* ── ADMIN: BRAND DETAIL ── */
.adm-brand-detail__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.adm-brand-detail__logo-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.03);
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.08);
  overflow: hidden;
}

.adm-brand-detail__logo {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

/* Geo bar */
.adm-geo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* Tier stack */
.adm-tier-stack {
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.adm-tier-stack__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  transition: flex 0.3s ease;
}

/* Urgent Response admin panel */
.adm-ur__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: 16px;
}

.adm-ur__status-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.adm-ur__status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  animation: adminPulse 2s ease-in-out infinite;
}

.adm-ur__status-dot--inactive {
  background: rgba(255,255,255,0.2);
  animation: none;
}

.adm-ur__status-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.adm-ur__status-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

.adm-ur__toggle {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
}

.adm-ur__toggle--activate {
  background: #f87171;
  color: #fff;
}

.adm-ur__toggle--deactivate {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
}

.adm-ur__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.adm-ur__kpi {
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  text-align: center;
}

.adm-ur__kpi-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.adm-ur__kpi-label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.adm-ur__kpi-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.adm-ur__orgs {
  margin-top: 16px;
}

.adm-ur__org-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}

.adm-ur__org-name {
  font-weight: 600;
  color: #fff;
}

.adm-ur__org-role {
  color: rgba(255,255,255,0.4);
}

.adm-ur__actions-list {
  margin-top: 16px;
}

.adm-ur__action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}

.adm-ur__action-title {
  flex: 1;
  color: rgba(255,255,255,0.7);
}

.adm-ur__action-type {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}

.adm-ur__action-impact {
  font-weight: 600;
  color: #fff;
}

/* ── Admin Responsive ── */
@media (max-width: 1024px) {
  .admin__kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .adm-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .adm-key-metrics { grid-template-columns: repeat(2, 1fr); }
  .adm-mini-row { grid-template-columns: repeat(2, 1fr); }
  .adm-ur__kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .admin__header-row { flex-direction: column; }
  .admin__header-controls { align-items: flex-start; }
  .adm-grid--2 { grid-template-columns: 1fr; }
  .adm-grid--4 { grid-template-columns: 1fr 1fr; }
  .adm-summary-banner { flex-direction: column; }
  .adm-health { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 480px) {
  .admin__kpi-grid { grid-template-columns: 1fr 1fr; }
  .adm-grid--4 { grid-template-columns: 1fr; }
  .adm-key-metrics { grid-template-columns: 1fr; }
  .admin__tab { padding: 8px 12px; font-size: 12px; }
  .adm-trend { height: 80px; }
}


/* ============================================
   CONVERSION MOMENT — Unified monthly donor conversion modal
   Triggered from: sweep entry, donation, course, pledge, reward gate
   ============================================ */

.cm-modal {
  position: fixed;
  inset: 0;
  z-index: 5600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cm-modal--visible { opacity: 1; pointer-events: all; }

.cm-modal--out {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cm-modal__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  padding: var(--space-2xl) var(--space-xl);
  z-index: 1;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cm-modal--visible .cm-modal__card {
  transform: translateY(0) scale(1);
}

.cm-modal--out .cm-modal__card {
  transform: translateY(24px) scale(0.96);
}

.cm-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s;
}

.cm-modal__close:hover { background: var(--bg-tertiary); }

/* Header */
.cm-modal__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.cm-modal__badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: #000;
  color: #fff;
  border-radius: 2px;
  margin-bottom: var(--space-md);
}

.cm-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}

.cm-modal__sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: var(--space-sm);
}

.cm-modal__sub strong { color: var(--text-primary); }

/* Urgency strip */
.cm-modal__urgency {
  padding: 10px 14px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  font-size: 13px;
  color: #92400e;
  line-height: 1.45;
  margin-bottom: var(--space-lg);
}

.cm-modal__urgency em {
  font-style: italic;
  font-weight: 600;
}

/* Perks */
.cm-modal__perks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-lg);
}

.cm-perk {
  display: flex;
  gap: var(--space-md);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.cm-perk:last-child { border-bottom: none; }

.cm-perk__icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.cm-perk strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.cm-perk p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Tier Selector */
.cm-modal__tiers {
  margin-bottom: var(--space-md);
}

.cm-modal__tiers-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.cm-modal__tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.cm-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 0;
  background: var(--bg-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.cm-tier:hover { border-color: var(--text-primary); }

.cm-tier--active {
  border-color: #000;
  background: #000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.cm-tier__tag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  background: var(--text-primary);
  color: #fff;
  border-radius: 2px;
  white-space: nowrap;
}

.cm-tier--active .cm-tier__tag {
  background: #ee2c67;
}

.cm-tier__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.cm-tier__price small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
}

.cm-tier--active .cm-tier__price { color: #fff; }

.cm-tier__entries {
  font-size: 11px;
  color: var(--text-tertiary);
}

.cm-tier--active .cm-tier__entries { color: rgba(255,255,255,0.55); }

/* CTA Button */
.cm-modal__cta {
  width: 100%;
  padding: 16px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  margin-top: var(--space-sm);
}

.cm-modal__cta:hover {
  background: #222;
  transform: translateY(-1px);
}

/* Skip / Email Capture */
.cm-modal__skip-area {
  margin-top: var(--space-md);
}

.cm-modal__skip {
  display: block;
  width: 100%;
  padding: var(--space-md);
  background: none;
  border: none;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  text-align: center;
  transition: color 0.15s;
}

.cm-modal__skip:hover { color: var(--text-secondary); }

/* Email capture (shown when anon user clicks skip) */
.cm-modal__email-capture {
  text-align: center;
}

.cm-modal__email-prompt {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.cm-modal__email-form {
  display: flex;
  gap: var(--space-xs);
}

.cm-modal__email-input {
  flex: 1;
  padding: 12px 14px;
  font-size: var(--text-sm);
  border: 1.5px solid var(--border);
  border-radius: 0;
  background: var(--bg-primary);
  font-family: inherit;
  transition: border-color 0.15s;
}

.cm-modal__email-input:focus {
  outline: none;
  border-color: var(--text-primary);
}

.cm-modal__email-btn {
  padding: 12px 20px;
  background: #000;
  color: #fff;
  border: none;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.cm-modal__email-btn:hover { background: #222; }

.cm-modal__email-skip {
  display: block;
  width: 100%;
  padding: var(--space-sm);
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  text-align: center;
  margin-top: var(--space-xs);
}

.cm-modal__email-skip:hover { color: var(--text-secondary); }

/* Disclaimer inside CM modal */
.cm-modal .donate-disclaimer {
  margin-top: var(--space-lg);
}

/* Mobile */
@media (max-width: 600px) {
  .cm-modal__card {
    max-width: 100%;
    margin: 0 var(--space-sm);
    padding: var(--space-xl) var(--space-md);
  }

  .cm-modal__tiers-grid {
    gap: 6px;
  }

  .cm-tier {
    padding: 12px 6px 10px;
  }

  .cm-tier__price { font-size: 16px; }
}

/* ============================================
   PHASE 1 SURFACE REFRAME
   Premier Home reorder: clubs + daily actions first
   ============================================ */

/* Make home page a flex column so CSS order works */
/* Override .page.active { display: block } from styles.css */
.page.page--home.active {
  display: flex;
  flex-direction: column;
}

/* Premier home: reorder sections to lead with club context */
.page--home.page--home-premier > .ur-banner          { order: 1; }
.page--home.page--home-premier > .hero-banner         { order: 2; }
.page--home.page--home-premier > .premier-status      { order: 3; }
.page--home.page--home-premier > .dashboard-dark      { order: 4; }
.page--home.page--home-premier > .premier-2x-strip    { order: 5; }
.page--home.page--home-premier > .featured-editorial  { order: 6; }
.page--home.page--home-premier > .feed                { order: 7; }
.page--home.page--home-premier > .clubs               { order: 8; }
.page--home.page--home-premier > .ticker              { order: 9; }
.page--home.page--home-premier > .lo-impact           { order: 10; }
.page--home.page--home-premier > .pcf                 { order: 11; }

/* Free user home: club picker + demoted dashboard */
.free-club-picker {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: var(--bg-dark, #0a0a0a);
  text-align: center;
}
.free-club-picker__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.free-club-picker__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.free-club-picker__scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.5rem 1.5rem;
  scrollbar-width: none;
}
.free-club-picker__scroll::-webkit-scrollbar { display: none; }
.free-club-picker__scroll .club-card {
  scroll-snap-align: start;
  flex: 0 0 280px;
  min-width: 280px;
}
.free-club-picker__value {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: var(--space-lg) var(--space-md) 0;
  flex-wrap: wrap;
}
.free-club-picker__value-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}
.free-club-picker__value-icon {
  width: 20px;
  height: 20px;
  color: var(--accent, #ee2c67);
}

/* Dashboard demoted state for free users */
.dashboard-dark--demoted {
  position: relative;
}
.dashboard-dark--demoted::before {
  content: 'Your impact so far';
  display: block;
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  padding: 1rem 0 0;
}
.dashboard-dark--demoted .dd__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dashboard-dark--demoted .dd__stat {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 0.75rem;
}
.dashboard-dark--demoted .dd__daily {
  display: none;
}
.dashboard-dark--demoted .dd__impact-header {
  display: none;
}

/* Club detail: Primary Action Module */
.cd-primary-action {
  padding: var(--space-xl) 0;
  position: relative;
}
.cd-primary-action__card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cd-primary-action__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.cd-primary-action__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.cd-primary-action__body {
  padding: 1.25rem 1.5rem;
}
.cd-primary-action__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}
.cd-primary-action__badge--sweep {
  background: var(--club-accent, #ee2c67);
  color: #fff;
}
.cd-primary-action__badge--urgent {
  background: #ff4444;
  color: #fff;
}
.cd-primary-action__badge--donate {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}
.cd-primary-action__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}
.cd-primary-action__desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.cd-primary-action__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--club-accent, #ee2c67);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cd-primary-action__cta:hover { opacity: 0.85; }

/* Club detail: Collective Impact (replaces leaderboard) */
.cd-collective-impact {
  padding: var(--space-xl) 0;
}
.cd-collective-impact__headline {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin: 0 0 1.5rem;
}
.cd-collective-impact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.cd-collective-impact__stat {
  text-align: center;
  padding: 1.25rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.cd-collective-impact__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--club-accent, #ee2c67);
}
.cd-collective-impact__label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.25rem;
}

/* Club detail: Explore More Clubs */
.cd-explore-more {
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cd-explore-more__sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin: 0 0 1.5rem;
}
.cd-explore-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.cd-explore-more__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.cd-explore-more__card:hover { transform: translateY(-2px); }
.cd-explore-more__img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.cd-explore-more__body {
  padding: 1rem;
}
.cd-explore-more__name {
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  margin: 0 0 0.25rem;
}
.cd-explore-more__cause {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.cd-explore-more__price {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent, #ee2c67);
}

@media (max-width: 600px) {
  .cd-collective-impact__grid { grid-template-columns: 1fr; }
  .cd-explore-more__grid { grid-template-columns: 1fr; }
  .free-club-picker__value { flex-direction: column; align-items: center; gap: 1rem; }
}