*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --t-eyebrow: 16px; --t-caption: 17px; --t-label: 19px;
  --t-body: 20px;    --t-body-lg: 22px;
  --o-ambient: 0.20; --o-meta: 0.30; --o-secondary: 0.50; --o-primary: 0.65;
}

body {
  font-family: 'Inter', sans-serif;
  background: #000000;
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'JetBrains Mono', monospace; }
.serif { font-family: 'Playfair Display', serif; }

/* ── Page shell ── */
.page-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem 4rem;
  min-height: 100vh;
}

/* ── Brand mark ── */
.brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: #fff;
  display: block;
  margin-bottom: 0.75rem;
}

.tagline {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2.5rem;
}

/* ── Form card ── */
.card {
  background: #ffffff;
  color: #000000;
  border-radius: 12px;
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  color: #000;
  margin-bottom: 0.4rem;
}

.invite-meta {
  font-size: var(--t-caption);
  color: #000;
  opacity: var(--o-secondary);
  margin-top: 0.2rem;
  margin-bottom: 1.5rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(0,0,0,0.07);
  color: #000;
  opacity: 0.55;
  margin-left: 0.4rem;
}

.form-group { margin-bottom: 1.25rem; }

label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000;
  opacity: var(--o-secondary);
  margin-bottom: 0.45rem;
}

input[type="email"],
input[type="password"],
select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  font-size: var(--t-body);
  font-family: 'Inter', sans-serif;
  color: #000;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

input:focus, select:focus { border-color: #000; }

.field-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-caption);
  color: #000;
  opacity: var(--o-meta);
  margin-top: 0.35rem;
}

.consent-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.consent-group input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: #000;
  cursor: pointer;
}

.consent-group label {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-caption);
  color: #000;
  opacity: var(--o-secondary);
  font-weight: 400;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

button[type="submit"] {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: background 0.2s;
}

button[type="submit"]:hover { background: #222; }
button[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; }

.message {
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-size: var(--t-caption);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

/* Error/success keep semantic colours; info adapts to dark page */
.message.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.message.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.message.info    { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.12); }

/* Error on dark page (outside card) */
#error-state .message.error {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.1);
}

.loading-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-caption);
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 2rem;
}

.hidden { display: none; }
.locked { opacity: 0.6; }

/* Generated from former inline join-s style attributes. */
.join-s-001 { width:100%;display:flex;flex-direction:column;align-items:center; }
.join-s-002 { margin-bottom:1.25rem; }
.join-s-003 { margin-bottom:0.4rem; }
.join-s-004 { display:flex;flex-direction:column;align-items:center; }
.join-s-005 { text-align:center; }
.join-s-006 { width:12rem;letter-spacing:0.4em;font-size:28px;text-align:center;padding:0.65rem 0.5rem; }
.join-s-007 { text-align:center;margin-top:1.25rem; }
.join-s-008 { background:none;border:none;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:var(--t-caption);opacity:0.40;text-decoration:underline;padding:0; }
.join-s-009 { font-size:32px;margin-bottom:0.75rem; }
.join-s-010 { margin-bottom:0.75rem; }
.join-s-011 { font-size:var(--t-body);color:#000;opacity:0.55;line-height:1.6; }