/* bulldial.com — API page. Extends bd.css; owns the hero split, the
 * code panels and the tier row. The code panel is deliberately dark in
 * both themes — terminal dress for terminal content, the same reasoning
 * that sets the methodology's equations in a serif. */

.eyebrow {
  font-size: var(--t-label); font-weight: 650; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}

/* ── hero ───────────────────────────────────────────────────────────── */

.api-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-7); align-items: center;
  padding: var(--sp-6) 0 var(--sp-7);
}
@media (max-width: 880px) { .api-hero { grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-4); } }

.api-hero h1 { font-size: var(--t-h1); letter-spacing: -0.03em; line-height: 1.08; }
.api-sub { margin-top: var(--sp-3); color: var(--ink-2); max-width: 46ch; }
.api-sub code, .api-note code, .api-cols code, .api-endpoints code, .api-hero-meta code {
  font-family: var(--font-num); font-size: 0.92em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; white-space: nowrap;
}
.api-hero-meta {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.api-meta-item { font-size: var(--t-xs); color: var(--ink-3); }
.api-hero .hero-cta { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; }

/* ── code panel ─────────────────────────────────────────────────────── */

.codepanel {
  background: #0c0e13; border: 1px solid #232833; border-radius: var(--r-3);
  overflow: hidden; box-shadow: var(--e-2);
  font-size: var(--t-xs);
}
.codepanel pre {
  padding: var(--sp-4); overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--font-num); line-height: 1.65; color: #dbe2ee;
}
.codepanel pre + pre { border-top: 1px solid #1b202b; }
.codepanel code { font-family: inherit; }
.codepanel.slim { box-shadow: none; }

.codepanel-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px var(--sp-4); border-bottom: 1px solid #1b202b;
}
.cp-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a3140; }
.cp-title {
  margin-left: 6px; font-family: var(--font-num); font-size: var(--t-label);
  letter-spacing: 0.05em; color: #8a94a6; text-transform: none;
}
.cp-copy {
  margin-left: auto; font-size: var(--t-label); font-weight: 650;
  letter-spacing: 0.04em; color: #8a94a6; padding: 3px 8px;
  border: 1px solid #2a3140; border-radius: var(--r-1);
  transition: color var(--d-1) var(--smooth), border-color var(--d-1) var(--smooth);
}
.cp-copy:hover { color: #dbe2ee; border-color: #3a4254; }

/* Syntax accents — fixed like the panel, not themed. */
.c-p { color: #5b6475; }
.c-s { color: #9ecb8f; }
.c-k { color: #7fb0ff; }
.c-n { color: #f0b35e; }
.c-c { color: #5b6475; font-style: italic; }
.cp-response { background: #090b0f; }

/* ── sections ───────────────────────────────────────────────────────── */

.api-sec { margin-top: var(--sp-7); }
.api-sec .sec-head { margin-bottom: var(--sp-4); }
.api-note { margin-top: var(--sp-4); font-size: var(--t-sm); color: var(--ink-2); max-width: 72ch; }

.api-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-6); align-items: start;
}
@media (max-width: 880px) { .api-cols { grid-template-columns: 1fr; gap: var(--sp-4); } }
.api-cols p { color: var(--ink-2); font-size: var(--t-sm); max-width: 52ch; }
.api-cols p + p { margin-top: var(--sp-3); }

.pit {
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  padding: var(--sp-6) 0;
}

/* ── tiers ──────────────────────────────────────────────────────────── */

.tier-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 800px) { .tier-row { grid-template-columns: 1fr; } }

.tier { display: flex; flex-direction: column; gap: var(--sp-2); }
.tier .tier-name {
  font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-3);
}
.tier .tier-price { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; }
.tier .tier-price small { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.tier .tier-calls { font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-2); }
.tier .tier-blurb { font-size: var(--t-sm); color: var(--ink-2); }

table.data td code { font-family: var(--font-num); font-size: 0.9em; }