/* Presentational API examples with explicitly labelled fictional sample data. */
.cm-home-api-grid { gap:clamp(28px,4vw,64px); align-items:start; }
.cm-home-code { background:linear-gradient(145deg,#21172d,#100d19 65%); border-color:#b993df29; border-radius:20px; box-shadow:0 24px 64px -38px #0009; }
.cm-home-code header { justify-content:space-between; padding:19px 24px; background:#b993df05; }
.cm-api-brand { display:flex; align-items:center; gap:10px; color:#f0e8f7; font-weight:600; letter-spacing:-.02em; }
.cm-api-brand > i { color:#bd91f0; }
.cm-api-brand > span { color:#877c98; font-weight:400; }
.cm-api-version { color:#a79ab9; font:10px ui-monospace,monospace; letter-spacing:.08em; white-space:nowrap; }
.cm-api-request-label { display:flex; align-items:center; justify-content:space-between; padding:24px 26px 0; font-size:11px; color:#aa9cba; }
.cm-api-format { color:#79c9c0; font:10px ui-monospace,monospace; letter-spacing:.1em; }
.cm-home-code pre { padding:16px 26px 24px; font:12px/2.2 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.cm-home-code code .cm-api-comment { color:#8d829f; }
.cm-home-code code .cm-api-method { color:#80d9ba; font-weight:700; }
.cm-home-code code .cm-api-path { color:#9bcdf5; }
.cm-home-code code .cm-api-header { color:#c7a2f0; }
.cm-home-code code .cm-api-punctuation { color:#91839f; }
.cm-home-code code .cm-api-auth { color:#e7bc84; }
.cm-home-code code .cm-api-secret { color:#ecc999; }
.cm-api-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:14px 20px 0; }
.cm-api-tabs button { border:0; border-radius:6px; background:transparent; padding:9px 10px; color:#a798b8; font-size:11px; cursor:pointer; }
.cm-api-tabs button[aria-selected="true"] { color:#dfc4f7; background:#b993df12; box-shadow:inset 0 -2px #ba8beb; }
.cm-api-tabs button:focus-visible { outline:2px solid #c4a0ed; outline-offset:2px; }
.cm-api-examples .cm-api-demo-note { display:flex; gap:8px; align-items:flex-start; padding:14px 26px 0; margin:0; font-size:10px; color:#95879f; line-height:1.65; }
/* Only the active example contributes height; the adjacent column stays top-aligned. */
.cm-api-panel-stack { min-width:0; }
.cm-api-example-panel[hidden] { display:none !important; }
.cm-api-example-panel { min-width:0; outline-offset:-3px; }
.cm-api-json-body { display:block; margin-top:12px; }
.cm-home-code .cm-api-example-request { font-size:11px; line-height:1.9; padding-bottom:18px; }
.cm-home-code code .cm-api-method-post { color:#e6bc84; }
.cm-api-response-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 26px; border-block:1px solid #b993df18; color:#ac9dbc; background:#00000018; font-size:11px; }
.cm-api-status { color:#82d3b2; font:10px ui-monospace,monospace; }
.cm-home-code .cm-api-example-response { max-height:245px; overflow:auto; scrollbar-width:thin; padding:16px 26px 22px; margin:0; background:#08060c35; font-size:11px; line-height:1.85; }
.cm-home-code code .cm-json-key { color:#b89ee9; }
.cm-home-code code .cm-json-string { color:#a4cbe9; }
.cm-home-code code .cm-json-number { color:#e3c18b; }
.cm-home-code code .cm-json-literal { color:#7cc9af; }
.cm-api-examples .cm-api-purchase-note { margin:0; padding:0 26px 16px; color:#beac93; font-size:10px; line-height:1.7; }
.cm-api-setup { margin:0 26px; padding:21px 0 17px; border-top:1px solid #b993df1c; }
.cm-api-setup > p { margin:0 0 16px; color:#ac9dbc; font-size:11px; }
.cm-api-setup ol { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; list-style:none; padding:0; margin:0; }
.cm-api-setup li { display:flex; align-items:flex-start; gap:12px; color:#d7cce3; font-size:12px; line-height:1.65; }
.cm-api-step-number { flex:none; color:#a988d5; font:11px/1.8 ui-monospace,monospace; }
.cm-home-code > .cm-api-security-note { display:flex; align-items:center; gap:9px; margin:0; padding:16px 26px 22px; color:#94899f; font-size:11px; }
.cm-api-security-note i { color:#83b9a7; font-size:11px; }
.cm-home-api-copy article { display:flex; align-items:flex-start; gap:18px; padding:22px 0; border-bottom:1px solid #b993df17; }
.cm-home-api-copy article:first-child { padding-top:0; }
.cm-home-api-copy article:nth-child(3) { border-bottom:0; }
.cm-api-feature-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:11px; background:#b993df0c; color:#bc96e4; font-size:15px; }
.cm-home-api-copy article:nth-child(2) .cm-api-feature-icon { color:#82c4cc; background:#82c4cc0a; }
.cm-home-api-copy article:nth-child(3) .cm-api-feature-icon { color:#c9b08b; background:#c9b08b0a; }
.cm-home-api-copy h3 { font-size:18px; font-weight:500; letter-spacing:-.02em; }
.cm-home-api-copy article p { margin:0; font-size:14px; line-height:1.75; color:#a69ab3; }
.cm-home-api-copy .cm-market-actions { margin-top:15px; gap:12px; }
.cm-home-api-copy .cm-market-actions a { font-size:12px; min-height:46px; padding-inline:20px; }
@media(max-width:580px) {
  .cm-home-code header { padding:17px 18px; }
  .cm-api-brand { font-size:12px; gap:7px; }
  .cm-api-version { font-size:9px; }
  .cm-api-request-label { padding:20px 18px 0; }
  .cm-home-code pre { padding:14px 18px 20px; font-size:11px; }
  .cm-api-setup { margin-inline:18px; }
  .cm-api-setup ol { grid-template-columns:1fr; gap:12px; }
  .cm-home-code > .cm-api-security-note { padding:14px 18px 20px; }
  .cm-home-api-copy article { gap:13px; }
}
