/* ════════════════════════════════════════════════════════════════════════
   NODES — Signup / Verify / Help pages
   ════════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
.signupPage {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(155,92,255,.18), transparent 42%),
    linear-gradient(180deg, #070912 0%, #03040a 100%);
  color: #e8ecff;
  font-family: Arial, Helvetica, sans-serif;
}
.signupShell { max-width: 1040px; margin: 0 auto; padding: 36px 20px 64px; }

.signupHeader { text-align: center; margin-bottom: 26px; }
.signupBrand {
  display: block; font-size: 30px; font-weight: 800; letter-spacing: .34em;
  color: #fff; text-shadow: 0 0 26px rgba(155,92,255,.6);
}
/* 10px uppercase at .55 alpha measured 4.08:1; .75 gives 6.67:1. Small,
   wide-tracked text needs the extra headroom, not less. */
.signupBrandSub {
  display: block; margin-top: 6px; font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(180,195,255,.75);
}

.signupLayout { display: grid; grid-template-columns: 1fr; gap: 20px; }

.signupCard {
  background: rgba(12,14,24,.92);
  border: 1px solid rgba(155,92,255,.26);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.signupCard h1 { margin: 0 0 8px; font-size: 26px; color: #fff; }
.signupIntro { margin: 0 0 20px; color: rgba(180,195,255,.7); font-size: 14px; }

.signupCard--pending { text-align: center; }
.signupCard--pending h1 { font-size: 28px; }
.signupCard--pending p { color: rgba(200,210,255,.8); line-height: 1.6; }
/* Was .6 alpha = 3.88:1 against the card, under the 4.5:1 floor for 13px. */
.signupMuted { color: rgba(160,175,220,.78) !important; font-size: 13px; }

/* Alerts */
.signupAlert { padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.signupAlert--error { background: rgba(255,80,80,.1); border: 1px solid rgba(255,80,80,.3); color: #ff9090; }

/* Inviter card */
.signupInviter { margin-bottom: 22px; }
.signupInviterEyebrow {
  display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #9b5cff; font-weight: 700; margin-bottom: 8px;
}
.signupInviterCard {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  border-radius: 14px; background: rgba(155,92,255,.08);
  border: 1px solid rgba(155,92,255,.3);
}
.signupInviterAvatar {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: rgba(155,92,255,.2); border: 1px solid rgba(155,92,255,.4);
  display: flex; align-items: center; justify-content: center;
}
.signupInviterAvatar img { width: 100%; height: 100%; object-fit: cover; }
.signupInviterAvatarCore {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #c9a0ff, #6a2cff);
  box-shadow: 0 0 14px rgba(155,92,255,.8);
}
.signupInviterIdentity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.signupInviterTitle { font-size: 9px; letter-spacing: .12em; color: #c9a0ff; font-weight: 700; }
.signupInviterName { font-size: 16px; color: #fff; }
.signupInviterLevel { font-size: 12px; color: rgba(180,195,255,.65); }
.signupInviterPerk { margin: 10px 2px 0; font-size: 13px; color: rgba(190,205,255,.8); line-height: 1.55; }
.signupInviterPerk strong { color: #7CFFB0; }

.signupExpiredNotice {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border-radius: 14px; background: rgba(255,180,60,.08); border: 1px solid rgba(255,180,60,.3);
}
.signupExpiredIcon { font-size: 18px; color: #ffb43c; flex: 0 0 auto; }
.signupExpiredNotice strong { color: #ffd089; display: block; margin-bottom: 4px; }
.signupExpiredNotice p { margin: 0; font-size: 13px; color: rgba(220,210,190,.78); line-height: 1.55; }

/* Form */
.signupField { margin-bottom: 16px; }
.signupFieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signupField label { display: block; font-size: 12px; font-weight: 600; color: rgba(200,210,255,.8); margin-bottom: 6px; }
.signupField input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(140,90,230,.3); background: rgba(255,255,255,.04);
  color: #fff; font-size: 14px;
}
.signupField input:focus {
  outline: 2px solid #c9a0ff; outline-offset: 2px;
  border-color: #9b5cff; box-shadow: 0 0 0 3px rgba(155,92,255,.35);
}
/* Hint text carries real information (field rules, the visibility XP notice), so
   it has to clear 4.5:1 like any other body copy. At .55 alpha it measured
   3.26:1 against the card; .78 measures 5.72:1 and keeps it visibly secondary
   to the labels above it. 11px was also below comfortable reading size. */
.signupHint { display: block; margin-top: 5px; font-size: 12px; color: rgba(160,175,220,.78); line-height: 1.45; }

.signupUserRow { display: flex; align-items: center; gap: 6px; }
.signupAt { color: rgba(155,92,255,.8); font-weight: 700; font-size: 16px; }

.signupHp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Terms */
.signupTermsBlock { margin: 20px 0 8px; }
.signupTermsLabel { display: block; font-size: 12px; font-weight: 700; color: rgba(200,210,255,.8); margin-bottom: 8px; letter-spacing: .04em; }
.signupTermsScroll {
  max-height: 220px; overflow-y: auto; padding: 14px;
  border-radius: 12px; border: 1px solid rgba(140,90,230,.25);
  background: rgba(0,0,0,.3);
}
.signupTermsScroll pre {
  margin: 0; white-space: pre-wrap; word-wrap: break-word;
  font-family: Arial, Helvetica, sans-serif; font-size: 11.5px; line-height: 1.6;
  color: rgba(200,210,235,.72);
}
.signupTermsLinks { margin: 8px 2px 0; font-size: 12px; color: rgba(180,195,255,.6); }
.signupTermsLinks a, .signupFooter a, .signupHelpLink { color: #c9a0ff; text-decoration: none; }
.signupTermsLinks a:hover, .signupFooter a:hover, .signupHelpLink:hover { text-decoration: underline; }

.signupCheckRow { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.signupCheckRow input { margin-top: 3px; accent-color: #9b5cff; flex: 0 0 auto; }
.signupCheckRow label { font-size: 13px; color: rgba(200,210,255,.78); line-height: 1.5; }

/* Signature */
.signupSignatureBlock { margin: 20px 0; }
.signupSigHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.signupSigHeader span { font-size: 12px; font-weight: 700; color: rgba(200,210,255,.8); }
.signupSigClear {
  background: transparent; border: 1px solid rgba(140,90,230,.35); color: rgba(200,210,255,.75);
  border-radius: 8px; padding: 5px 12px; font-size: 11px; cursor: pointer;
}
.signupSigClear:hover { border-color: #9b5cff; color: #fff; }
.signupSignaturePad {
  width: 100%; height: 220px; border-radius: 12px; cursor: crosshair;
  border: 1px solid rgba(140,90,230,.3); background: rgba(10,12,22,.6);
  touch-action: none;
}

.signupTurnstile { margin: 16px 0; }

.signupSubmitBtn {
  width: 100%; padding: 14px; margin-top: 8px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #9b5cff, #6a2cff); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 10px 30px rgba(106,44,255,.4);
}
.signupSubmitBtn:hover { filter: brightness(1.08); }

.signupHelpRow { text-align: center; margin: 16px 0 0; }
.signupHelpLink { font-size: 13px; }

.signupFooter { text-align: center; margin-top: 24px; font-size: 13px; }

/* Help page */
.signupHelpShell { max-width: 720px; margin: 0 auto; padding: 36px 20px 64px; }
.signupHelpCard {
  background: rgba(12,14,24,.92); border: 1px solid rgba(155,92,255,.26);
  border-radius: 20px; padding: 28px;
}
.signupHelpCard h1 { margin: 0 0 6px; color: #fff; }
.signupHelpCard h2 { font-size: 16px; color: #c9a0ff; margin: 22px 0 6px; }
.signupHelpCard p { color: rgba(200,210,255,.78); font-size: 14px; line-height: 1.65; margin: 0 0 10px; }

@media (max-width: 560px) {
  .signupFieldRow { grid-template-columns: 1fr; }
  .signupCard { padding: 20px; }
}

/* ── Accessibility ──────────────────────────────────────────────────────────
   Grouped controls use fieldset/legend rather than a bare label, which points
   at nothing and leaves the group unnamed for assistive tech. These rules strip
   the UA fieldset chrome so the visual result is unchanged. */
.signupFieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.signupFieldset > legend {
  display: block; padding: 0; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: rgba(200,210,255,.8);
}

/* A visible focus indicator on everything focusable. The inputs previously set
   outline:none and relied on a .18-alpha ring, which is close to invisible;
   buttons and links had no focus style at all and depended on the UA default,
   which varies. #c9a0ff measures ~9:1 against the card. */
.signupSubmitBtn:focus-visible,
.signupSigClear:focus-visible,
.signupHelpLink:focus-visible,
.signupTermsScroll:focus-visible,
.signupHandleToggle:focus-visible,
.signupVisInfo:focus-visible,
.signupFooter a:focus-visible,
.signupCheckRow input:focus-visible,
.signupTypeOption input:focus-visible,
.signupVisOption input:focus-visible {
  outline: 2px solid #c9a0ff;
  outline-offset: 2px;
}

/* Windows High Contrast / forced-colors: transparent outlines are repainted by
   the OS, so focus survives when the palette above is discarded. */
@media (forced-colors: active) {
  .signupSubmitBtn:focus-visible,
  .signupField input:focus,
  .signupVisInfo:focus-visible { outline: 2px solid Highlight; }
}