/* ==========================================================================
   Developers page styles. Loaded only on /developers. Builds on site.css.
   ========================================================================== */

.dev-hero__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.dev-hero__title { margin: 0 0 24px; font-weight: 600; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.035em; }
.dev-hero__title .accent { color: var(--teal-text); }
.dev-hero__lead { margin: 0 0 34px; max-width: 520px; font-size: 19px; line-height: 1.55; color: var(--charcoal-66); }
.dev-hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* code terminal card */
.terminal { background: var(--ink-dark); border: 1px solid rgba(31, 45, 54, 0.2); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 20px 60px rgba(14, 26, 34, 0.18); }
.terminal__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--ink-line); }
.terminal__dot { width: 11px; height: 11px; border-radius: 999px; background: #3a4a54; display: inline-block; }
.terminal__label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: rgba(244, 241, 234, 0.4); margin-left: 8px; }
.terminal__code { margin: 0; padding: 22px 20px; overflow-x: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.7; color: #c7d4d9; white-space: pre; }
.tok-cmd { color: #7ec7d4; }
.tok-str { color: #a8d8b0; }
.tok-num { color: #e8c98a; }
.tok-key { color: #7ec7d4; }
.tok-dim { color: rgba(244, 241, 234, 0.4); }

@media (min-width: 54em) {
  .dev-hero__grid { grid-template-columns: 1.02fr 0.98fr; gap: 64px; }
}