/* ============================================================
   MEMBERSHIP PAGE — a distinct, vibrant theme
   (kept separate from the main site's teal/black/white identity)
============================================================ */
:root{
  --mem-bg:#0d0b1a;
  --mem-card:#181530;
  --mem-card-border:#2c2650;
  --mem-pink:#ec1f79;
  --mem-purple:#7c3aed;
  --mem-teal:#22d3ee;
  --mem-text:#f3f1ff;
  --mem-text-dim:#a89fc9;
  --mem-gradient:linear-gradient(90deg, var(--mem-pink), var(--mem-purple), var(--mem-teal));
}

.mem-body{background:var(--mem-bg);color:var(--mem-text);}
.mem-body .navbar{background:var(--mem-bg);border-bottom:2px solid var(--mem-card-border);}
.mem-body .logo-mark{color:var(--mem-text);}
.mem-body .nav-links a{color:var(--mem-text);}
.mem-body .nav-links a:hover,.mem-body .nav-links a.active{color:var(--mem-teal);border-bottom-color:var(--mem-teal);}
.mem-body .nav-toggle{color:var(--mem-text);}

.mem-hero{background:var(--mem-gradient);border-radius:var(--radius);padding:48px 40px;text-align:center;margin-bottom:8px;}
.mem-hero .mem-badge{display:inline-block;background:rgba(0,0,0,.3);color:var(--white);font-size:.72rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:20px;margin-bottom:16px;}
.mem-hero h1{color:var(--white);font-size:2.2rem;margin-bottom:10px;}
.mem-hero p{color:rgba(255,255,255,.92);max-width:520px;margin:0 auto;}
.mem-hero .mem-tagline{font-weight:700;letter-spacing:.04em;margin-top:14px;}

.mem-eyebrow{font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mem-teal);margin-bottom:8px;display:block;}
.mem-body h2{color:var(--mem-text);}
.mem-body p{color:var(--mem-text-dim);}

.mem-tier-card{background:var(--mem-card);border:1.5px solid var(--mem-card-border);border-radius:var(--radius);
  padding:28px;text-align:center;position:relative;}
.mem-tier-card.best{border-color:var(--mem-pink);box-shadow:0 0 0 2px rgba(236,31,121,.25);}
.mem-tier-card .best-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--mem-pink);color:var(--white);font-size:.7rem;font-weight:700;padding:5px 14px;border-radius:14px;white-space:nowrap;}
.mem-tier-card h3{color:var(--mem-text);margin-bottom:4px;}
.mem-tier-card .mem-price{font-family:var(--font-display);font-size:2.2rem;font-weight:700;margin:10px 0 4px;
  background:var(--mem-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mem-tier-card .mem-price span{font-size:.85rem;color:var(--mem-text-dim);-webkit-text-fill-color:var(--mem-text-dim);}
.mem-tier-card p{margin:0;font-size:.88rem;}

.mem-benefit-card{background:var(--mem-card);border:1.5px solid var(--mem-card-border);border-radius:var(--radius);padding:22px;display:flex;gap:14px;}
.mem-benefit-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;color:var(--white);}
.mem-benefit-card:nth-child(odd) .mem-benefit-num{background:var(--mem-pink);}
.mem-benefit-card:nth-child(even) .mem-benefit-num{background:var(--mem-teal);color:#0d0b1a;}
.mem-benefit-card h4{color:var(--mem-text);margin-bottom:4px;font-size:.98rem;}
.mem-benefit-card p{margin:0;font-size:.85rem;}

.mem-milestone{background:var(--mem-card);border:1.5px solid var(--mem-card-border);border-radius:var(--radius);padding:24px;text-align:center;}
.mem-milestone .mem-stage{display:inline-block;background:var(--mem-gradient);color:var(--white);font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:14px;margin-bottom:12px;}
.mem-milestone h4{color:var(--mem-text);margin-bottom:6px;}
.mem-milestone p{margin:0;font-size:.85rem;}

.mem-join-card{background:var(--mem-card);border:1.5px solid var(--mem-card-border);border-radius:var(--radius);padding:26px;}
.mem-join-card h4{color:var(--mem-teal);margin-bottom:12px;}
.mem-join-card p{font-size:.9rem;}
.mem-join-card strong{color:var(--mem-text);}

.mem-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:var(--mem-text);margin-bottom:16px;}
.mem-form input,.mem-form select{padding:11px 12px;border-radius:var(--radius);border:1.5px solid var(--mem-card-border);
  background:#0d0b1a;color:var(--mem-text);font-family:var(--font-body);}
.mem-btn{display:inline-block;padding:13px 28px;border-radius:var(--radius);font-weight:700;font-size:.92rem;
  cursor:pointer;border:none;background:var(--mem-gradient);color:var(--white);text-decoration:none;text-align:center;}
.mem-btn:hover{opacity:.9;}
.mem-btn.outline{background:none;border:1.5px solid var(--mem-teal);color:var(--mem-teal);}

.mem-body .site-footer{background:#080712;}