/*
 * "Get access" — the sign-up view.
 *
 * Reads like the front page (air, one column, the display face doing the
 * talking) rather than like the toolbox, because it is read once by someone
 * deciding. Tokens, buttons, the top bar and `.eyebrow` come from `shell.css`
 * and `home.css`; nothing here restyles them.
 *
 * The key panel is the one place that gets its own colour: it is shown exactly
 * once and it holds a credential, so it should not look like body copy.
 */

.developers {
  --dev-max: 880px;
  padding: 0 20px 96px;
}

.developers > * {
  max-width: var(--dev-max);
  margin-inline: auto;
}

.dev-hero {
  padding: 56px 0 8px;
}

.dev-hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  margin: 8px 0 14px;
}

.dev-lede {
  font-size: 17px;
  max-width: 60ch;
  color: var(--text-muted);
}

.dev-section {
  padding: 36px 0 4px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.dev-section h2 {
  font-size: clamp(21px, 2.6vw, 27px);
  margin: 0 0 16px;
}

/* ── The two ways to use the API ─────────────────────────────────────── */

.dev-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.dev-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  background: var(--surface);
}

.dev-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.dev-price {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--brand);
}

.dev-card p {
  margin: 0 0 10px;
  color: var(--text-muted);
}

.dev-card-note {
  font-size: 13px;
}

/* ── What happens next ───────────────────────────────────────────────── */

.dev-steps {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  color: var(--text-muted);
  max-width: 68ch;
}

.dev-steps strong {
  color: var(--text);
}

/* ── The form ────────────────────────────────────────────────────────── */

.dev-form {
  display: grid;
  gap: 16px;
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.dev-field {
  display: grid;
  gap: 5px;
}

.dev-label {
  font-size: 13px;
  font-weight: 600;
}

.dev-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.dev-field input,
.dev-field select,
.dev-field textarea {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.dev-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  color: var(--text-muted);
}

.dev-submit {
  margin-top: 4px;
}

/*
 * The honeypot. Positioned away rather than `display: none`: a bot that reads
 * the DOM skips a hidden input and fills a visible one, which is the whole
 * point. Kept out of the accessibility tree with `aria-hidden` and out of the
 * keyboard path with `tabindex="-1"` in the markup.
 */
.dev-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dev-after h3 {
  margin: 0 0 8px;
}

/* ── Notices ─────────────────────────────────────────────────────────── */

.dev-note {
  border-left: 3px solid var(--border);
  padding: 10px 14px;
  margin: 14px 0 0;
  background: var(--surface);
  border-radius: 0 9px 9px 0;
  font-size: 14px;
}

.dev-note--ok {
  border-left-color: var(--ok);
}

.dev-note--warn {
  border-left-color: var(--warn);
}

.dev-note--bad {
  border-left-color: var(--danger);
}

/* ── The newsletter box ──────────────────────────────────────────────── */

.dev-news {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  background: var(--surface);
}

.dev-news h3 {
  margin: 0 0 6px;
  font-size: 19px;
}

.dev-news p {
  margin: 0 0 14px;
  color: var(--text-muted);
  max-width: 60ch;
}

.dev-news-row {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.dev-news-row input {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
}

/* ── The key, shown once ─────────────────────────────────────────────── */

.dev-keybox {
  margin-top: 48px;
  border: 1px solid var(--brand);
  border-radius: 14px;
  padding: 24px;
  background: var(--surface);
}

.dev-keybox h2 {
  margin: 0 0 6px;
}

.dev-keyfacts {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 6px 16px;
  margin: 18px 0;
}

.dev-keyfacts dt {
  font-size: 13px;
  color: var(--text-muted);
}

.dev-keyfacts dd {
  margin: 0;
  min-width: 0;
}

.dev-key {
  font-size: 15px;
  user-select: all;
  word-break: break-all;
}

.dev-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

@media (max-width: 620px) {
  .dev-news-row,
  .dev-keyfacts {
    grid-template-columns: 1fr;
  }
}