/* ---------- MEMBERSHIP PAGE ---------- */
#membership{padding-block:var(--space-8) var(--space-16);display:grid;gap:var(--space-12)}

/* 1. Hero Tier Selector */
.tier-hero{scroll-margin-top:var(--space-20)}
.tier-cards{display:flex;gap:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;padding-block:var(--space-4)}
.tier-card{flex:0 0 260px;background:var(--c-neutral-50);border:1px solid var(--c-neutral-200);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-align:center;scroll-snap-align:start;position:relative;transition:transform var(--duration) var(--timing)}
.tier-card:hover{transform:translateY(-4px)}
.tier-marquee{font-family:var(--ff-mono);font-size:var(--fs-3xl);color:var(--c-primary);text-transform:uppercase;margin-bottom:var(--space-4);letter-spacing:.1em}
.tier-price{font-size:var(--fs-2xl);font-weight:600;margin-bottom:var(--space-6)}
.tier-price span{font-size:var(--fs-base);color:var(--c-neutral-600)}
.tier-join{width:100%}

/* 2. Instant Benefits Matrix */
.benefits-matrix h2{margin-bottom:var(--space-6)}
.benefits-scroll{display:flex;gap:var(--space-4);overflow-x:auto}
.benefit-tile{flex:0 0 200px;height:140px;position:relative;perspective:800px}
.tile-front,.tile-back{position:absolute;inset:0;background:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform var(--duration) var(--timing)}
.tile-back{transform:rotateY(180deg);font-family:var(--ff-mono);font-size:var(--fs-sm);text-align:center}
.benefit-tile:hover .tile-front{transform:rotateY(-180deg)}
.benefit-tile:hover .tile-back{transform:rotateY(0)}
.tile-icon{font-size:var(--fs-4xl);margin-bottom:var(--space-2)}

/* 3. Limited Collectors Badge */
.collectors-badge{display:grid;place-items:center;text-align:center;gap:var(--space-4)}
.badge-wrapper{position:relative}
.badge-svg{width:140px;height:140px}
#badge-progress{transition:stroke-dashoffset .6s var(--timing)}
.badge-counter{position:absolute;inset:0;display:grid;place-content:center;font-weight:600}
.badge-counter span{font-size:var(--fs-sm);color:var(--c-neutral-600)}

/* 4. Arcade Credit Meter */
.credit-meter{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6)}
.meter-wrapper{position:relative}
.meter-svg{width:160px;height:160px}
#meter-progress{transition:stroke-dashoffset .4s var(--timing)}
.meter-redeem{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%)}

/* 5. Referral High-Score Board */
.referral-board h2{margin-bottom:var(--space-6)}
.board-scroll{display:flex;gap:var(--space-4);overflow-x:auto;margin-bottom:var(--space-6)}
.board-entry{flex:0 0 160px;background:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--radius);padding:var(--space-4);text-align:center}
.board-avatar{width:48px;height:48px;border-radius:50%;margin-inline:auto;margin-bottom:var(--space-2)}
.board-name{font-family:var(--ff-mono);font-size:var(--fs-sm)}
.board-score{font-weight:600;color:var(--c-primary)}

/* 6. Drop Calendar Carousel */
.drop-calendar h2{margin-bottom:var(--space-6)}
.calendar-scroll{display:flex;gap:var(--space-6);overflow-x:auto}
.calendar-card{flex:0 0 280px;background:var(--c-neutral-50);border:1px solid var(--c-neutral-200);border-radius:var(--radius-lg);padding:var(--space-6)}
.calendar-card h3{font-size:var(--fs-xl);margin-bottom:var(--space-4)}
.calendar-card ul{list-style:none;padding:0;display:grid;gap:var(--space-3)}
.calendar-card li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.remind-btn{font-size:var(--fs-xs);padding:var(--space-1) var(--space-3)}

/* 7. Member-Only Archive */
.member-archive h2{margin-bottom:var(--space-6)}
.archive-filters{display:flex;gap:var(--space-3);margin-bottom:var(--space-6)}
.filter-btn{background:var(--c-neutral-200);color:var(--c-text);border:none;border-radius:var(--radius);padding:var(--space-2) var(--space-4);cursor:pointer;transition:background var(--duration) var(--timing)}
.filter-btn.active{background:var(--c-primary);color:#000}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-4)}
.archive-item{position:relative;background:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--radius);overflow:hidden;cursor:pointer}
.archive-item img{width:100%;height:160px;object-fit:cover}
.archive-item figcaption{position:absolute;inset:auto 0 0;background:rgba(10,10,10,.7);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm)}

/* 8. Setup & Maintenance Toolkit */
.toolkit h2{margin-bottom:var(--space-6)}
.toolkit-list{list-style:none;padding:0;display:grid;gap:var(--space-4)}
.accordion-btn{width:100%;text-align:left;background:var(--c-neutral-100);border:1px solid var(--c-neutral-300);border-radius:var(--radius);padding:var(--space-4);font-weight:600;cursor:pointer;transition:border-color var(--duration) var(--timing)}
.accordion-btn[aria-expanded="true"]{border-color:var(--c-primary)}
.accordion-panel{padding:var(--space-4);display:grid;gap:var(--space-3)}
.check-step{margin-right:var(--space-2)}

/* 9. Priority Support Console */
.support-console{text-align:center}
#chat-expand{margin-inline:auto}
.chat-panel{margin-top:var(--space-4);padding:var(--space-6);background:var(--c-neutral-50);border:1px solid var(--c-neutral-200);border-radius:var(--radius-lg);display:grid;gap:var(--space-4)}
.chat-meta{display:flex;justify-content:space-between;font-size:var(--fs-sm)}

/* 10. Cancel / Pause Shield */
.exit-flow{text-align:center;background:linear-gradient(135deg,var(--c-neutral-50),var(--c-neutral-100));padding:var(--space-10);border-radius:var(--radius-lg)}
.exit-buttons{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}
.pause-form{margin-top:var(--space-6);display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}

/* Responsive */
@media(max-width:768px){
  .tier-card{flex:0 0 240px}
  .exit-buttons{flex-direction:column}
}