/* ── Beta Access Signup (beta-signup.php) ──
   The page now wears the same cyberpunk skin as the index.html hero: a fixed
   animated cyber-grid + scan beam + dual-tone glow behind the form, and the
   shared radar emblem + glitch wordmark lockup. The hp3-* pieces (id-plate,
   hero-logo, glitch layers) and the grid/scan keyframes come from landing.css,
   which this page now loads; only the page-specific framing lives here. */

/* Fixed background layers (z-index 0; .page-body is z-index 2, so it sits on top). */
.sg-bg, .sg-grid, .sg-scan, .sg-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sg-bg {
  background:
    radial-gradient(ellipse 55% 45% at 20% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 45% at 82% 22%, color-mix(in srgb, var(--purple, #AA44FF) 9%, transparent), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 28%, color-mix(in srgb, var(--bg-card2) 45%, var(--bg)), var(--bg) 72%);
}
.sg-grid {
  opacity: 0.12;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--accent-hi) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent-hi) 55%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 35%, #000 24%, transparent 80%);
          mask-image: radial-gradient(ellipse 85% 80% at 50% 35%, #000 24%, transparent 80%);
  animation: hp3-grid-pan 7s linear infinite;
}
.sg-scan { overflow: hidden; }
.sg-scan::before {
  content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 22%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-hi) 7%, transparent) 60%, transparent);
  animation: hp3-scan-sweep 6.5s linear infinite;
}
.sg-vignette { box-shadow: inset 0 0 200px 50px rgba(0,0,0,0.6); }

/* Nav brand renders as a plain inline wordmark — identical to /index and
   /login. (The in-nav radar emblem was removed; its inline-flex + gap rules
   here were opening a space between VOID and FRONTIER.) */

/* Shared brand lockup above the card — the same emblem + glitch wordmark. */
.sg-brand { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.7rem; }
.sg-emblem { line-height: 0; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 50%, transparent)); }
.sg-brand .hp3-id-plate { padding: 0.5rem 1.7rem 0.5rem 2rem; }
.sg-brand .hp3-hero-logo { font-size: clamp(1.5rem, 4.5vw, 2.3rem); }

/* Lift the cards above the background and give the form card a cyberpunk accent bar. */
.signup-card, .success-card { position: relative; z-index: 2; box-shadow: 0 18px 50px -24px rgba(0,0,0,0.7); }
.signup-card { border-left: 2px solid var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sg-grid, .sg-scan::before { animation: none; }
}

.signup-card {
  width: 100%; max-width: 500px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.signup-card .card-title      { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.06em; }
.signup-card .card-title span { color: var(--accent-hi); }
.signup-card .card-body p     { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; }

/* Email-only contact notice -- a callout box (accent-tinted) so the
   "we only reach you by email" message reads as important, not body copy. */
.signup-card .card-body p.email-notice {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.7rem 0.85rem; margin-bottom: 1.5rem;
  background: #8da02010; border: 1px solid var(--border-hi);
  border-left: 2px solid var(--accent); border-radius: 2px;
  color: var(--text);
}
.email-notice i { color: var(--accent-hi); margin-top: 0.15rem; flex-shrink: 0; }

.card-emblem { flex-shrink: 0; opacity: 0.8; }

/* Platform radio tiles */
.platform-group { display: flex; gap: 0.5rem; }
.platform-option { flex: 1; }
.platform-option input[type="radio"] { display: none; }
.platform-label {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.65rem 0.5rem; background: var(--bg-input); border: 1px solid var(--border-hi);
  border-radius: 2px; cursor: pointer; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); transition: all 0.13s;
}
.platform-label i { font-size: 1rem; }
.platform-option input[type="radio"]:checked + .platform-label {
  border-color: var(--accent); color: var(--accent-hi); background: #8da02012; box-shadow: 0 0 0 1px #8da02030;
}
.platform-label:hover { border-color: var(--border-hi); color: var(--text); }

/* Terms checkbox */
.terms-row {
  display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem;
  border: 1px solid var(--border); border-radius: 2px; background: #ffffff04; margin-bottom: 1.25rem;
}
.terms-row.error { border-color: var(--red); background: var(--red-bg); }
.terms-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.terms-row label { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; cursor: pointer; }
.terms-row a     { color: var(--accent); text-decoration: none; }
.terms-row a:hover { color: var(--accent-hi); }

/* Success state */
.success-card     { width: 100%; max-width: 500px; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 4px; padding: 3rem 2rem; text-align: center; box-shadow: 0 0 40px #8da02015; }
.success-icon     { font-size: 2.5rem; color: var(--accent-hi); margin-bottom: 1rem; display: block; }
.success-title    { font-size: 1.6rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.success-callsign { font-size: 1.1rem; color: var(--accent-hi); font-weight: 700; letter-spacing: 0.1em; }
.success-body     { font-size: 0.85rem; color: var(--text-muted); margin: 1.25rem 0 2rem; line-height: 1.7; }
.success-divider  { height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); margin: 1.5rem 0; }
.success-ref      { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.success-ref span { font-family: 'Share Tech Mono', monospace; color: var(--accent); }
.back-home {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.5rem; border: 1px solid var(--border-hi); border-radius: 2px;
  color: var(--text); text-decoration: none; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.13s;
}
.back-home:hover { border-color: var(--accent); color: var(--accent-hi); }

@media (max-width: 560px) {
  .success-card { padding: 2rem 1.25rem; }
}