/* /developers/ only: the terminal figure and the page's own hero. Uses the tokens from base.css.
   Kept in its own file so the developer page merges cleanly with edits to base.css. */
.dev-hero { padding: 80px 0 var(--band); border-bottom: 1px solid var(--line); }
.dev-hero .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; }
.dev-hero h1 { font-size: clamp(40px, 5.2vw, 64px); }

/* Terminal */
.term { margin: 0; }
.term-win { background: color-mix(in srgb, var(--bg) 72%, #000); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.term-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.term-bar b { margin-left: 10px; font: 500 13px var(--font-mono); color: var(--muted); }
.term pre { margin: 0; padding: 24px 24px 26px; font: 14.5px/1.75 var(--font-mono); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.term .p { color: var(--accent); user-select: none; }
.term .o { color: var(--muted); }
.term .u { color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.term .ok { color: var(--good); }

/* Small print under a band */
.fine { margin-top: 22px; color: var(--muted); font-size: 14px; max-width: 80ch; }
.fine a { color: var(--muted); }
.versus td a { white-space: nowrap; }

@media (max-width: 1020px) {
  .dev-hero .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dev-hero { padding: 56px 0 var(--band); }
  .term pre { padding: 18px 16px 20px; font-size: 13px; }
}