code, pre, .mono { font-family: var(--font-family-mono); }

.dev-hero { background: var(--color-bg); color: var(--color-text); padding: var(--space-10) 0 calc(var(--space-10) + var(--space-6)); }
.dev-hero .wrap { max-width: 860px; }
.dev-hero h1 { font-size: var(--font-size-display); color: var(--color-text); }
.dev-hero__lede { margin-top: var(--space-4); font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 56ch; }
.dev-hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* `.button--like` styles an <a> to look and behave like a <button> — used wherever the
   action is a navigation, so it can't validly nest a <button> inside the <a>. */
.button--like { display: inline-block; padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-contrast); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); font-family: var(--font-family-sans); cursor: pointer; white-space: normal; text-align: center; text-decoration: none; transition: background-color 0.15s var(--ease-out-quart), transform 0.15s var(--ease-out-quart); }
.button--like:hover { background: var(--color-accent-text); transform: translateY(-1px); }
.button--like:active { transform: translateY(1px) scale(0.98); }
.button--secondary.button--like { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.button--secondary.button--like:hover { background: var(--color-bg); }

.dev-endpoints { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.dev-endpoint-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.dev-endpoint-card h3 { font-size: var(--font-size-lg); font-family: var(--font-family-mono); }
.dev-endpoint-card p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }

.dev-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); align-items: stretch; }
.dev-pricing__tier { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; }
.dev-pricing__tier--featured { border-color: var(--color-accent); border-width: 2px; }
.dev-pricing__tier h3 { font-size: var(--font-size-lg); }
.dev-pricing__quota { font-family: var(--font-family-mono); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-top: var(--space-3); }
.dev-pricing__unit { font-size: var(--font-size-sm); color: var(--color-text-muted); font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); }
.dev-pricing__note { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); flex-grow: 1; }
.dev-pricing__tier a.button--like { margin-top: var(--space-6); }

.dev-docs-cta { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.dev-docs-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.dev-docs-cta h2 { color: var(--color-text); max-width: 28ch; }
.dev-docs-cta p { color: var(--color-text-muted); margin-top: var(--space-3); max-width: 42ch; }

.dev-pricing .reveal:nth-child(1) { transition-delay: 0ms; }
.dev-pricing .reveal:nth-child(2) { transition-delay: 90ms; }
.dev-pricing .reveal:nth-child(3) { transition-delay: 180ms; }

@media (max-width: 860px) {
  .dev-endpoints { grid-template-columns: 1fr; }
  .dev-pricing { grid-template-columns: 1fr; }
}