/* The invite page (join.html): legal.css plus a hero card and buttons. */
.invite { margin: 8px 0 28px; padding: 24px; border-radius: 20px; background: var(--panel); border: 1px solid rgba(255,181,71,.3); }
.invite h1 { margin-top: 10px; }
.invite .street { font: 700 18px/1.4 var(--body); color: #ffd78f; margin: 0 0 10px; }
.invite .street:empty { display: none; }
.actions { display: grid; gap: 12px; margin: 22px 0 6px; }
@media (min-width: 600px) { .actions { grid-template-columns: 1fr 1fr; } }
.btn { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 20px; border-radius: 14px;
  font: 700 17px/1.2 var(--body); text-decoration: none; text-align: center; }
.btn.primary { background: linear-gradient(#ffd78f, #ffb547); color: #2a1a05; box-shadow: 0 8px 24px rgba(255,181,71,.35); }
.btn.primary:hover { color: #2a1a05; filter: brightness(1.05); }
.btn.secondary { background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--fg); }
.btn.secondary:hover { color: var(--fg); border-color: var(--accent); }
.btn[hidden] { display: none; }
.steps li { margin-bottom: 10px; }
.features { display: grid; gap: 14px; margin: 24px 0; padding: 0; list-style: none; }
.features li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; margin: 0; }
.features .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,181,71,.14); color: #ffd78f; font-size: 19px; }
.features b { display: block; font-weight: 700; }
.features span { color: var(--muted); }
.fine { font-size: 14px; color: var(--faint); }