/* Landing page styles.
 *
 * Everything above the "implementation additions" fence is the imported design
 * verbatim (Claude Design project "API-as-Product Platform Design", index.html).
 * Keep it that way: re-importing the design should produce no diff here, so a
 * change of mind upstream stays a one-file update.
 *
 * Layout tokens (--color-*, --space-*, --radius-*, --shadow-*, --font-*) all come
 * from ds/styles.css. Never hard-code a value the tokens already carry.
 */

:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: clip; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
@media (max-width: 560px) { .nav a { display: none; } }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  margin: 0 0 calc(var(--leading) - var(--half));
}

.hero { position: relative; padding: calc(3.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.hero::before { content: ""; position: absolute; right: -180px; top: -220px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--color-accent-2-200); pointer-events: none; z-index: -1; }
@media (max-width: 1420px) { .hero::before { right: 0; } }

.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: clamp(43px, 6.26vw, 82px);
  letter-spacing: 0; margin: 0; margin-left: -0.028em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.hero .curl { font-family: var(--mono); font-size: 13.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--leading) 0 0; }
.hero .curl b { font-weight: 600; color: var(--color-accent-700); }

/* — the seed bed: four soft circles, thrown not sown — */
.bed { position: relative; padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading));
  min-height: calc(17 * var(--leading)); }
.seed { position: absolute; border-radius: 50%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  padding: var(--leading); box-sizing: border-box; }
.seed-a { width: 240px; left: 64px; top: calc(2.5 * var(--leading)); background: var(--color-accent-100); }
.seed-b { width: 190px; left: 208px; top: calc(9 * var(--leading)); background: var(--color-accent-200); }
.seed-c { width: 310px; right: 96px; top: calc(-3.5 * var(--leading)); background: var(--color-accent-2-300); }
.seed-d { width: 175px; right: 321px; top: calc(4.5 * var(--leading)); background: var(--color-accent-2-100); }
.seed .stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.1vw, 44px); line-height: calc(2 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic; }
.seed-a .stat-num, .seed-b .stat-num { color: var(--color-accent-700); }
.seed-d .stat-num { color: var(--color-accent-2-700); }
.seed-c .stat-num { color: var(--color-accent-2-800); }
.seed .stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; max-width: 17ch; text-wrap: balance; }

/* — the catalog — */
.catalog { padding: calc(2 * var(--leading)) 0 calc(2 * var(--leading)); }
.sec-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 42px); line-height: calc(1.75 * var(--leading));
  margin: 0; margin-left: -0.028em; text-box: trim-both cap alphabetic; }
.sec-note { font-size: 15.5px; line-height: var(--leading); max-width: 54ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.filterbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin: calc(1.5 * var(--leading)) 0 var(--leading); }
.filterbar .input { flex: 1 1 300px; max-width: 380px; min-height: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.catalog-grid { display: grid; gap: var(--leading);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.api-card { background: var(--color-surface); border-radius: var(--radius-lg);
  padding: calc(1.25 * var(--leading)) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; }
.api-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.api-head { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; }
.api-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.api-copy { font-size: 15px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.eps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eps li { font-family: var(--mono); font-size: 12.5px; line-height: 20px;
  color: var(--color-neutral-800); display: flex; gap: var(--space-2); align-items: baseline; }
.eps .verb { color: var(--color-accent-2-700); font-weight: 600; min-width: 3.2em; }
.api-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: 12.5px; line-height: 20px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin-top: auto; padding-top: var(--space-2); }
.api-card.next { background: transparent; box-shadow: none;
  border: 2px dashed var(--color-neutral-400); justify-content: center; }
.api-card.next:hover { transform: none; box-shadow: none; border-color: var(--color-accent-400); }

/* — feature rows — */
.features { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.feature { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.25 * var(--leading)) 0; }
.f-title { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.f-title::before { content: ""; position: absolute; left: -36px; top: calc(0.5cap - 9px);
  width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); }
@media (max-width: 1280px) { .f-title::before { display: none; } }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }

/* — quickstart split — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 72px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 46ch; text-box: trim-both cap alphabetic; }

.code { background: var(--color-neutral-900); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); }
.code-tabs { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.code-tab { font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border: 0; cursor: pointer; border-radius: 999px; padding: 7px 14px;
  background: transparent; color: var(--color-neutral-400); }
.code-tab[aria-selected="true"] { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.code-tab:hover { color: var(--color-neutral-200); }
.code-tab:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }
.code pre { margin: 0; padding: var(--space-4) var(--space-6) var(--space-6);
  font-family: var(--mono); font-size: 13px; line-height: 22px;
  color: var(--color-neutral-200); overflow-x: auto; }
.code .c { color: var(--color-neutral-500); }
.code .k { color: var(--color-accent-300); }
.code .s { color: var(--color-accent-2-300); }

/* — plans — */
.plans-sec { padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.plans { display: grid; gap: var(--leading); margin-top: calc(1.5 * var(--leading));
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan { background: var(--color-surface); border-radius: var(--radius-lg);
  padding: calc(1.25 * var(--leading)) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.plan.featured { background: var(--color-accent-2-100); box-shadow: var(--shadow-sm); }
.plan h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.plan .price { font-family: var(--font-heading); font-size: 34px; line-height: calc(1.5 * var(--leading));
  margin: 0; color: var(--color-accent-700); }
.plan .price span { font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: 14.5px; line-height: 22px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.plan ul li::before { content: "•"; color: var(--color-accent); margin-right: 8px; }
.plan .btn { margin-top: auto; }

/* — quote — */
.quote { padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 32px); line-height: calc(1.5 * var(--leading));
  max-width: 34ch; margin: 0; text-indent: -0.559em; text-box: trim-both cap alphabetic; }
.quote figcaption { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0; text-indent: -1.347em; text-box: trim-both cap alphabetic; }
@media (max-width: 720px) { .quote blockquote, .quote figcaption { text-indent: 0; } }

/* — close — */
.close { padding: 0 0 calc(2 * var(--leading)); }
.patch { background: var(--color-accent-2-100); border-radius: calc(2 * var(--radius-lg));
  padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px); }
.patch h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.patch .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.signup { display: flex; gap: var(--space-3); align-items: stretch; max-width: 480px; margin-top: var(--leading); }
.signup .input { flex: 1; }
.signup .input, .signup .btn { min-height: 36px; }
footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

@media (max-width: 1080px) {
  .bed { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--leading) var(--half); justify-items: center; padding-bottom: calc(3.5 * var(--leading)); }
  .seed { position: static; width: min(clamp(160px, 44vw, 240px), 100%); }
  .seed-c { width: min(clamp(180px, 50vw, 280px), 100%); }
  .seed-b, .seed-d { transform: translateY(var(--leading)); }
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) { .hero { padding-top: calc(2.5 * var(--leading)); }
  .hero::before { width: 280px; height: 280px; top: -160px; } }
@media (max-width: 389px) {
  .bed { grid-template-columns: 1fr; gap: var(--leading); }
  .seed { width: clamp(160px, 56vw, 220px); }
  .seed-c { width: clamp(180px, 62vw, 240px); }
  .seed-a, .seed-c { justify-self: start; }
  .seed-b, .seed-d { transform: none; justify-self: end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Implementation additions
   ──────────────────────────────────────────────────────────────────────────
   Not in the imported design, because a static mockup did not need them: the
   catalog filters are real controls here, so they need link and state styling
   the mockup's inert <span>s did not. Nothing below changes a rendered pixel of
   the design — it only carries the same look onto interactive elements.
   ══════════════════════════════════════════════════════════════════════ */

/* The filter chips are <a>, not <span>: they must work with JS off, and a
   control that changes what you see should be a real link. The DS .tag classes
   already give them their colour; these two rules only undo the anchor
   defaults so they render identically to the mockup's spans. */
.chips a.tag { text-decoration: none; cursor: pointer; }
.chips a.tag:hover { color: var(--color-accent-900); }
.chips a.tag-outline:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.chips a.tag-accent:hover { background: var(--color-accent-200); }

/* When the brand is a link rather than a <span>, the DS's `.nav a` rule (0,1,1)
   outranks `.nav-brand` (0,1,0) and would shrink it to 14px. Restore the brand
   size without touching vendored DS source. */
.nav a.nav-brand { font-size: 18px; }

/* Screen-reader-only. Used for the search form's submit button: the design has
   no visible submit, and relying purely on implicit form submission leaves
   keyboard and screen-reader users without an announced way to run the search. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Empty state for a search that matches nothing. Mirrors .api-card.next so a
   no-results grid still looks like the catalog rather than a broken page. */
.catalog-empty { grid-column: 1 / -1; padding: calc(1.5 * var(--leading)) 0;
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.catalog-empty b { font-weight: 600; color: var(--color-text); }

/* HTMX swaps the grid in place. Fade the outgoing content just enough to signal
   the update without moving anything -- the grid reflows on its own. */
#catalog-grid.htmx-request { opacity: .55; transition: opacity .12s ease; }
@media (prefers-reduced-motion: reduce) { #catalog-grid.htmx-request { transition: none; } }

/* The code panes are focusable (they scroll horizontally, so keyboard users must
   be able to reach and scroll them). Keep the DS focus ring inside the dark
   panel rather than clipped by its rounded corner. */
.code pre:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: -4px; }