.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px;
  border: 0; border-radius: 12px; font-weight: 800; font-size: 1.15rem; text-decoration: none; color: #fff;
  background: var(--accent, var(--primary)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
  transition: transform .12s, filter .12s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); }

.pill {
  --c: #1d6fd8;
  display: inline-block; align-self: flex-start; padding: 3px 12px; border-radius: 8px; font-size: .88rem; font-weight: 600;
  color: color-mix(in srgb, var(--c) 82%, #000);
  background: color-mix(in srgb, var(--c) 13%, #fff);
}
:root[data-theme="dark"] .pill { color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 28%, transparent); }

.select, .field { position: relative; display: block; }
.select select, .field input {
  appearance: none; -webkit-appearance: none; min-height: 46px; padding: 0 40px 0 16px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); color: var(--text); width: 100%;
}
.select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border: solid var(--text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none;
}
.field input { padding-right: 16px; }

.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: .95rem; color: #24408f; margin: 0 0 4px; }
:root[data-theme="dark"] .eyebrow { color: #cfe0ff; }