/* bmsignup: what BraveMoss's look adds over styles.css (tokens.css holds the palette): the small mark and the
   wordmark, the site's pill buttons and plain card lines, its tighter headings, a seed dot before the eyebrow, and
   the small "operated by" line below the footer. Tokens only; no hero photo. */

.site-header::after,
.site-footer::before { background: var(--border); -webkit-mask-image: none; mask-image: none; }
.brand { gap: 0.55rem; }
.brand-mark { display: block; flex: none; width: 2rem; height: 2rem; }
.wordmark { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.05em; }

h1 { letter-spacing: -0.045em; line-height: 1.05; max-width: 20ch; }
.eyebrow { display: flex; align-items: center; gap: 0.55rem; color: var(--muted-foreground); letter-spacing: 0; }
.eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.section-heading { letter-spacing: -0.03em; }
.step { font-family: var(--font-sans); font-weight: 600; }

.primary-button, .secondary-button { border-radius: var(--radius-pill); min-height: 3.1rem; }
.primary-button { box-shadow: none; }
.primary-button:hover:enabled { box-shadow: 0 0 0 3px var(--secondary); }
.secondary-button { box-shadow: 0 0 0 1px var(--input); }
.secondary-button:hover:enabled { background: var(--secondary); }

.form-section, .status-card, .action-card { box-shadow: var(--shadow-card); }
.notice, .error-message { border-radius: var(--radius-sm); }

.operated-by { margin: 0; padding: 0 1rem 1rem; text-align: center; font-size: 0.6875rem; line-height: 1.4;
  color: var(--muted-foreground); }
.operated-by small { font-size: inherit; }

@media (forced-colors: active) {
  .brand-mark { forced-color-adjust: auto; }
}