/* /developers, /developers/zapier-pipedrive, /lawfirm/api-key.
   Layout and type come from the /non-attorney-representation system (marketing-core /
   product / representation / repworks-claude.css). This file only adds what that system has
   no component for: code blocks, inline code, the hero button row and the API-key box. */
.dev-hero-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.dev-code {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  background: var(--mk-teal-1); color: #e6f2f0; border-radius: var(--mk-radius-sm);
  padding: 16px 18px; margin: 22px 0 0; max-width: 68ch; overflow-x: auto; white-space: pre;
}
.dev-inline {
  font-family: var(--font-mono); font-size: 0.86em; background: var(--mk-inset);
  border-radius: 6px; padding: 1px 6px; color: var(--mk-teal-2);
}
.mkrw-list a { color: var(--mk-teal-3); font-weight: 600; }

.dev-narrow { max-width: 760px; }
.dev-form { margin: 26px 0 0; }
.dev-form + .mkrw-table-scroll, .dev-form + .mkrw-body { margin-top: 22px; }
.dev-keybox { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.dev-keybox code {
  font-family: var(--font-mono); font-size: 15px; background: var(--mk-inset); color: var(--mk-teal-2);
  border-radius: 6px; padding: 10px 14px; word-break: break-all;
}
.dev-link { background: none; border: 0; padding: 0; color: var(--mk-orange-d); font-weight: 600; cursor: pointer; font-size: 14px; }

/* /developers CMS cards + breadcrumb, and the API reference blocks (single column) */
.dev-card-btn { margin-top: 18px; }
/* /developers logo cards: logo, name, line, button pinned to the bottom so rows line up */
.dev-cms-card { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 32px 42px; } /* mkrw-card is 26px 24px: +8px top/sides, +16px bottom */
.dev-cms-card .dev-card-btn { margin-top: auto; }
.dev-cms-card p { margin-bottom: 20px; }
.dev-cms-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; margin-bottom: 16px; }
.dev-intro-2 { margin-top: 14px; }
.dev-crumb { color: inherit; text-decoration: none; }
.dev-crumb:hover { text-decoration: underline; }
.mkrd-steps.dev-api { grid-template-columns: minmax(0, 1fr); }
.mkrw-sec .mkrw-table-scroll + .mkrw-table-scroll { margin-top: 22px; }
.dev-code + .mkrd-step-d { margin-top: 12px; }