/* agentPickup's look for the signup pages (/connect, /seller), over the library's own styles. Same tokens as site.css. */
body.ap-signup {
  --bg: #0a0b0d;
  --card: #111316;
  --line: #2a2f36;
  --hair: #1f2328;
  --fg: #eef0f3;
  --text-2: #b7bdc6;
  --muted: #8b929c;
  --lime: #b5f23d;
  --accent: #b5f23d;
  --accent-ink: #0a0b0d;
  --ok: #b5f23d;
  --bad: #f87171;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
  font: 16px/1.6 Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--bg);
}
.ap-signup main { max-width: 680px; padding: 0 20px 88px; gap: 18px; }

/* The site's nav bar: lime mark, name, and the steps as chips. */
.ap-signup header { flex-wrap: wrap; min-height: 60px; margin: 0 -20px 14px; padding: 10px 20px; border-bottom: 1px solid var(--hair); background: rgba(10, 11, 13, .82); }
.ap-signup header > a:first-child { display: flex; align-items: center; gap: 9px; font: 750 20px Archivo, sans-serif; font-stretch: 85%; letter-spacing: -.02em; }
.ap-signup header > a:first-child::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 12px rgba(181, 242, 61, .5); }
.ap-signup .steps { gap: 6px; flex-wrap: wrap; font: 11.5px var(--mono); }
.ap-signup .steps span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.ap-signup .steps span.on { background: var(--lime); border-color: var(--lime); color: var(--accent-ink); font-weight: 600; }

.ap-signup h1 { font: 800 clamp(44px, 10vw, 78px)/.9 Archivo, sans-serif; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; margin: 26px 0 4px; }
.ap-signup h2 { font: 650 20px/1.2 Archivo, sans-serif; letter-spacing: -.015em; }
.ap-signup .lede { color: var(--text-2); font-size: 17px; }
.ap-signup p a, .ap-signup li a { color: var(--lime); }
.ap-signup p a.btn, .ap-signup li a.btn { color: var(--lime-ink, #0a0b0d); }
.ap-signup p a.btn.ghost, .ap-signup li a.btn.ghost { color: var(--fg); }

.ap-signup .card { background: var(--card); border-color: var(--hair); border-radius: 14px; padding: 22px; gap: 14px; }
.ap-signup .card.system { border-color: rgba(181, 242, 61, .45); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.ap-signup .system .brandmark { gap: 14px; }
.ap-signup .system .logo { width: 44px; height: 44px; padding: 9px; border-radius: 10px; background: var(--lime); color: var(--accent-ink); }
.ap-signup .system h2 { font: 800 34px/1 Archivo, sans-serif; font-stretch: 62%; text-transform: uppercase; letter-spacing: 0; }

.ap-signup .pill { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; border-color: var(--line); }
.ap-signup .pill.live { color: var(--lime); border-color: rgba(181, 242, 61, .45); }

.ap-signup .btn { border-radius: 8px; padding: 13px 18px; font-family: Archivo, sans-serif; }
.ap-signup .btn:hover { opacity: .9; }
.ap-signup .btn.ghost { background: rgba(17, 19, 22, .7); border-color: var(--line); color: var(--fg); }
.ap-signup .btn.ghost:hover { border-color: var(--muted); opacity: 1; }
.ap-signup .btn:focus-visible, .ap-signup input:focus-visible, .ap-signup select:focus-visible { outline-color: var(--lime); }

.ap-signup label { font: 500 12.5px var(--mono); color: var(--muted); }
.ap-signup label.check { font: 400 15px Archivo, sans-serif; color: var(--text-2); }
.ap-signup input[type=email], .ap-signup input[type=url], .ap-signup input[type=text], .ap-signup input[name=wallet], .ap-signup select {
  font: 15px Archivo, sans-serif; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; width: 100%;
}
.ap-signup input::placeholder { color: #5b616b; }
.ap-signup input[type=checkbox], .ap-signup input[type=radio] { accent-color: var(--lime); }

/* Other systems as logo tiles. */
.ap-signup .choice { background: var(--bg); border-color: var(--line); border-radius: 8px; font: 500 14px Archivo, sans-serif; color: var(--text-2); padding: 11px 12px; }
.ap-signup .choice .logo { color: var(--muted); }
.ap-signup .choice:hover { border-color: var(--muted); }
.ap-signup .choice:has(input:checked) { border-color: var(--lime); color: var(--lime); background: rgba(181, 242, 61, .07); }
.ap-signup .choice:has(input:checked) .logo { color: var(--lime); }

.ap-signup .option { background: var(--bg); border-color: var(--line); border-radius: 10px; }
.ap-signup .option:has(input:checked) { border-color: var(--lime); }
.ap-signup .key code { font-family: var(--mono); color: var(--lime); }
.ap-signup input[type=color] { width: 64px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 3px; }

/* Seller page: the pass preview keeps the shop's own colours; around it, ours. */
.ap-signup .brand { padding: 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--bg); }
.ap-signup .hint { border-left-color: var(--lime); color: var(--text-2); }
.ap-signup .preview { border-color: transparent; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.ap-signup ol { color: var(--text-2); }