.join-wrap{padding:36px 0 52px}
.join-grid{display:grid;grid-template-columns:1fr 430px;gap:24px;align-items:start}
.join-card{padding:34px}
.join-card h1{margin:0 0 10px;font-size:40px;letter-spacing:-0.04em}
.join-card p{margin:0 0 24px;color:var(--muted);line-height:1.7}
.form-grid{display:grid;gap:16px}
.help-list{display:grid;gap:12px;margin-top:16px}
.help-item{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-soft)
}
.room-preview{
  padding:28px;
  background:
   radial-gradient(circle at top right, rgba(106,13,173,0.12), transparent 30%),
   linear-gradient(180deg, rgba(255,255,255,0.86), rgba(250,245,255,0.96));
}
.room-badge{
  display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:999px;
  background:rgba(106,13,173,0.08);color:var(--purple-dark);font-size:13px;font-weight:800
}
.preview-box{
  margin-top:18px;aspect-ratio: 16 / 10;border-radius:24px;border:1px solid var(--border);
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.24), transparent 30%),
    linear-gradient(135deg, #5b1594 0%, #8A2BE2 62%, #d4af37 140%);
  box-shadow:var(--shadow);display:grid;place-items:center;color:#fff;text-align:center;padding:24px
}
.preview-box h3{margin:0 0 8px;font-size:24px}
.preview-box p{margin:0;color:rgba(255,255,255,0.88)}
.inline-note{font-size:13px;color:var(--muted)}
@media (max-width: 980px){
  .join-grid{grid-template-columns:1fr}
  .join-card h1{font-size:34px}
}