/* ==========================================================================
   API & Developers - a fifth distinct mood: terminal/console, not
   another diagram or card stack. Monospace-forward, a real syntax-
   highlighted request/response as the signature visual - this is the
   one page that should read as engineering, not sales.
   ========================================================================== */
.dev-page .op-section-header { max-width: 620px; }
/* ---- Hero ---- */
.dev-hero {
  position: relative;
  padding: var(--st-space-4xl) 0;
  background: var(--st-navy);
  border-bottom: 1px solid var(--st-navy-mid);
}
.dev-hero-grid { position: relative; z-index: 2; display: grid; gap: var(--st-space-2xl); align-items: center; }
@media (min-width: 960px) { .dev-hero-grid { grid-template-columns: 1fr 1.1fr; } }
.dev-hero-copy h1 { margin-bottom: var(--st-space-lg); }
.dev-hero-copy h1 em { font-style: normal; color: var(--st-gold); }
.dev-hero-copy .hero-sub { max-width: 460px; font-size: 17px; color: var(--st-white-60); margin-bottom: var(--st-space-xl); }
/* ---- Terminal window ---- */
.dev-terminal {
  background: #060B14;
  border: 1px solid var(--st-navy-mid);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.dev-terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--st-space-sm) var(--st-space-md);
  background: var(--st-navy-light);
  border-bottom: 1px solid var(--st-navy-mid);
}
.dev-dot { width: 10px; height: 10px; border-radius: 50%; }
.dev-dot--red { background: #E53E3E; }
.dev-dot--yellow { background: #D69E2E; }
.dev-dot--green { background: #38A169; }
.dev-terminal-title { margin-left: var(--st-space-sm); font-family: var(--st-font-code); font-size: 12px; color: var(--st-white-20); }
.dev-terminal-body { padding: var(--st-space-lg); overflow-x: auto; }
.dev-terminal-body pre {
  margin: 0;
  font-family: var(--st-font-code);
  font-size: 13px;
  line-height: 1.7;
  color: var(--st-white-90);
  white-space: pre-wrap;
  word-break: break-word;
}
.dev-tok-comment { color: var(--st-white-20); }
.dev-tok-kw { color: #7DD3FC; }
.dev-tok-str { color: #86EFAC; }
.dev-tok-key { color: var(--st-white-60); }
.dev-tok-gold { color: var(--st-gold); }
/* ---- Sections ---- */
.dev-section { padding: var(--st-space-4xl) 0; }
.dev-section--alt { background: var(--st-navy-light); border-top: 1px solid var(--st-navy-mid); border-bottom: 1px solid var(--st-navy-mid); }
/* ---- API cards ---- */
.dev-api-grid { display: grid; gap: var(--st-space-lg); grid-template-columns: 1fr; }
@media (min-width: 780px) { .dev-api-grid { grid-template-columns: repeat(2, 1fr); } }
.dev-api-card {
  background: var(--st-navy);
  border: 1px solid var(--st-navy-mid);
  border-radius: var(--st-radius-card);
  padding: var(--st-space-xl);
}
.dev-api-tag {
  display: inline-block;
  font-family: var(--st-font-mono);
  font-size: 11px;
  color: var(--st-gold);
  background: var(--st-arc-dim);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: var(--st-space-md);
}
.dev-api-card h3 { font-size: 21px; margin-bottom: var(--st-space-sm); }
.dev-api-card > p { font-size: 14px; margin-bottom: var(--st-space-md); }
.dev-api-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dev-api-list li {
  font-family: var(--st-font-code);
  font-size: 13px;
  color: var(--st-white-90);
  padding-left: var(--st-space-md);
  position: relative;
}
.dev-api-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--st-gold);
}
.dev-api-link { margin: var(--st-space-md) 0 0; font-family: var(--st-font-code); font-size: 13px; }
.dev-api-card .btn--ghost { margin-top: var(--st-space-md); }
/* ---- Who this is for ---- */
.dev-scope { max-width: 620px; text-align: center; margin: 0 auto; }
.dev-scope p { font-size: 16px; }
/* ---- CTA ---- */
.dev-cta {
  padding: var(--st-space-4xl) 0;
  background: linear-gradient(180deg, var(--st-navy), var(--st-navy-light));
  text-align: center;
}
.dev-cta-inner { max-width: 560px; margin: 0 auto; }
.dev-cta-inner .btn-row { justify-content: center; margin-top: var(--st-space-lg); }
@media (max-width: 780px) {
  .dev-terminal-body { padding: var(--st-space-md); }
  .dev-terminal-body pre { font-size: 12px; }
}
/* ---- API reference pages (booking-intake-api, client-documents-api):
   real endpoint listings, not illustrative snippets - reuses this
   file's terminal styling for visual continuity within the section. ---- */
.api-ref-page .dev-hero { padding-bottom: var(--st-space-lg); }
.api-ref-page .dev-hero h1 em { font-style: normal; color: var(--st-gold); }
.api-ref-page .dev-hero .hero-sub {
  max-width: 640px;
  font-size: 17px;
  color: var(--st-white-60);
  margin-bottom: 0;
}
.api-ref-page code {
  /* Long endpoint paths must wrap on phones, not push the page wide. */
  overflow-wrap: anywhere;
  font-family: var(--st-font-code);
  font-size: 0.9em;
  background: var(--st-navy-mid);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--st-white-90);
}
.api-endpoint {
  margin-bottom: var(--st-space-xl);
  padding-bottom: var(--st-space-xl);
  border-bottom: 1px solid var(--st-navy-mid);
}
.api-endpoint:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.api-endpoint-head {
  display: flex;
  align-items: center;
  gap: var(--st-space-sm);
  margin-bottom: var(--st-space-sm);
}
.api-endpoint-head code { font-size: 15px; background: none; padding: 0; color: var(--st-white); }
.api-method {
  display: inline-block;
  font-family: var(--st-font-code);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}
.api-method--get    { background: rgba(56,161,105,0.16); color: var(--st-signal-live); }
.api-method--post   { background: rgba(201,168,76,0.16); color: var(--st-gold-light); }
.api-method--put    { background: rgba(214,158,46,0.16); color: var(--st-signal-warn); }
.api-method--delete { background: rgba(229,62,62,0.16); color: var(--st-signal-blocked); }
.api-endpoint .dev-terminal { margin-top: var(--st-space-md); }
.api-webhook-note { margin-top: var(--st-space-md); }
.api-setup-note { margin-top: var(--st-space-lg); }
.api-ref-page .op-section-header p { font-size: 16px; color: var(--st-white-60); }