/* arc.ai: the Kimi K3 API page (k3.html). It is built from the business page's parts in site.css and story.css; only
   the price cards and the code sample are new here. Every color is one of the site's variables, so the page follows the
   blue look and the paper look (css/theme-paper.css redefines the variables) alike. */

/* site.css sets the hero's lead in plain white (theme-paper.css corrects it only on the business page) */
.page-k3 .c-hero { padding-bottom: clamp(72px, 10vh, 120px); }
.page-k3 .c-hero-copy .lead { color: var(--ink-soft); max-width: 40em; }

/* the price cards: Live and Batch side by side, one column on phones */
.k3-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k3-tiers p { color: var(--ink-soft); }
.k3-tiers dl { display: grid; margin: 6px 0 0; }
.k3-tiers dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule-night); }
.k3-tiers dt { color: var(--ink-soft); }
.k3-tiers dd { margin: 0; font: 600 clamp(1.4rem, 2vw, 1.8rem)/1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.k3-note { margin-top: 18px; font-size: 0.95rem; color: var(--ink-faint); }

/* the code sample, with its Copy button in the corner */
.k3-code-wrap { position: relative; max-width: 52em; }
.k3-code { margin: 0; padding: 22px 24px; padding-top: 52px; overflow-x: auto; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 400 0.9rem/1.65 var(--f-mono); white-space: pre; tab-size: 4; }
.k3-code code { font: inherit; color: inherit; }
.k3-code-wrap .copy { position: absolute; top: 12px; right: 12px; }
.k3-start .cta-row { justify-content: flex-start; margin-top: clamp(32px, 5vh, 52px); }
.k3-start .join-direct { margin-top: 16px; }

@media (max-width: 560px) {
  .k3-tiers { grid-template-columns: minmax(0, 1fr); }
  .k3-code { padding: 48px 16px 18px; font-size: 0.82rem; }
  .k3-start .cta-row { flex-direction: column; align-items: stretch; }
}