/* JOIN PAGE — night-sky campaign styling, scoped to .cma-join.
   Mailing list endpoint lives in js/content.js → mailingList. */
body{ background:#05070F; } /* only loaded on the Join page */
.cma-join{
  --night:#05070F; --deep:#0A1230; --blue:#2F5BFF; --pink:#FF2E93;
  --ink:#E9ECF5; --muted:#9AA3BD; --error:#FF7A9C;
  position:relative; padding-top:var(--header-h, 72px);
  background:var(--night); color:var(--ink);
  font-family:Montserrat, "Helvetica Neue", Arial, sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow:hidden;
}
.cma-join *, .cma-join *::before, .cma-join *::after{ box-sizing:border-box; }

/* Hero: the merch + prizes image, fading into the night sky */
.cma-join__hero{ position:relative; margin:0; }
.cma-join__hero img{ display:block; width:100%; height:auto; max-width:1152px; margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
/* Static site: hero sits below the fixed header, so feather its top edge too */
.cma-join__hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height:18%; z-index:1;
  background:linear-gradient(to top, rgba(5,7,15,0), var(--night));
  pointer-events:none;
}
.cma-join__hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(to bottom, rgba(5,7,15,0), var(--night));
  pointer-events:none;
}

/* Headline overlaps the bottom of the hero, glowing like the banners */
.cma-join__inner{
  position:relative; z-index:1; max-width:720px; margin:-40px auto 0;
  padding:0 24px 88px; text-align:center;
}
.cma-join__title{
  margin:0; font-family:Oswald, "Arial Narrow", Arial, sans-serif; font-weight:600;
  font-size:clamp(34px, 6.2vw, 64px); line-height:1.05; letter-spacing:.06em;
  text-transform:uppercase; color:#fff;
  text-shadow:0 0 18px rgba(255,255,255,.35), 0 0 42px rgba(120,150,255,.35);
}
.cma-join__sub{
  margin:14px 0 0; font-family:Oswald, "Arial Narrow", Arial, sans-serif; font-weight:400;
  font-size:clamp(20px, 3vw, 30px); line-height:1.2; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
}
.cma-join__lede{ margin:22px auto 0; max-width:520px; font-size:16px; color:var(--muted); }

/* Form */
.cma-join__form{ margin:34px auto 0; max-width:560px; text-align:left; }
.cma-join__label{ display:block; margin:0 0 8px; font-size:14px; font-weight:500; color:var(--ink); }
.cma-join__fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cma-join__field{ min-width:0; }
.cma-join__field .cma-join__input{ width:100%; }
.cma-join__input{
  height:56px; padding:0 18px;
  font:500 16px Montserrat, Arial, sans-serif; color:#fff;
  background:var(--deep); border:1.5px solid #2A3566; border-radius:4px;
}
.cma-join__input::placeholder{ color:#6E7899; }
.cma-join__input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,91,255,.35); }
.cma-join__input[aria-invalid="true"]{ border-color:var(--error); }
.cma-join__button{
  display:block; width:100%; margin-top:14px; height:56px; padding:0 28px; border:0; border-radius:4px; cursor:pointer;
  font:700 15px Montserrat, Arial, sans-serif; color:#fff; background:var(--pink);
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.cma-join__button:hover{ filter:brightness(1.08); }
.cma-join__button:active{ transform:scale(.98); }
.cma-join__button:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.cma-join__button[disabled]{ opacity:.7; cursor:progress; }
.cma-join__status{ min-height:22px; margin:10px 0 0; font-size:14px; color:var(--error); }
.cma-join__fine{ margin:6px 0 0; font-size:13px; color:#6E7899; }

/* Success state replaces the form */
.cma-join__done{ display:none; margin:34px auto 0; max-width:560px; padding:28px 24px;
  background:var(--deep); border-radius:6px; position:relative; }
.cma-join__done::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:6px 6px 0 0;
  background:linear-gradient(90deg, var(--blue) 50%, var(--pink) 50%); }
.cma-join__done h2{ margin:0 0 6px; font:600 26px/1.2 Oswald, Arial, sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.cma-join__done p{ margin:0; color:var(--muted); }
.cma-join.is-done .cma-join__form{ display:none; }
.cma-join.is-done .cma-join__done{ display:block; }

/* What you get: one quiet row under the form */
.cma-join__perks{
  list-style:none; margin:56px auto 0; padding:22px 0 0; max-width:720px;
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid #1C2448;
}
.cma-join__perks li{ padding:0 12px; font-size:14px; line-height:1.45; color:var(--muted); }
.cma-join__perks li + li{ border-left:1px solid #1C2448; }
.cma-join__perks strong{ display:block; margin-bottom:4px; font-family:Oswald, Arial, sans-serif; font-weight:600;
  font-size:17px; letter-spacing:.06em; text-transform:uppercase; color:#fff; }

@media (max-width:640px){
  .cma-join__hero img{ max-width:none; -webkit-mask-image:none; mask-image:none; }
  .cma-join__inner{ margin-top:-6vw; padding-bottom:64px; }
  .cma-join__fields{ grid-template-columns:1fr; }
  .cma-join__perks{ grid-template-columns:1fr 1fr; row-gap:22px; }
  .cma-join__perks li:nth-child(3){ border-left:0; }
}
@media (prefers-reduced-motion:reduce){ .cma-join *{ transition:none !important; } }