/* Benchmarks page: the same prompt through different AI models, ranked */
.bm-test { margin-bottom: clamp(48px, 7vw, 88px); }
.bm-test-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: clamp(32px, 5vw, 56px) 0 18px; }
.bm-test-head h2 { font: 600 var(--fs-xl)/1.25 var(--font-body); margin: 0; }
.bm-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-brief { margin: 0 0 20px; max-width: 70ch; color: var(--text-dim); line-height: 1.6; }
.bm-prompt { margin: 0 0 22px; max-width: 720px; }
.bm-prompt pre { white-space: pre-wrap; font-size: 15px; }
.bm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bm-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bm-shot { display: block; position: relative; padding: 0; border: 0; background: #0b0d0d; cursor: var(--cur-zoom-in, zoom-in); aspect-ratio: 16 / 9; overflow: hidden; }
.bm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease, ease); }
.bm-shot:hover img { transform: scale(1.03); }
.bm-rank { position: absolute; top: 12px; left: 12px; min-width: 36px; height: 36px; padding: 0 8px; display: grid; place-items: center; font: 700 18px/1 var(--font-body); color: #0b0d0d; background: var(--text); }
.bm-card.top .bm-rank { background: var(--teal); }
.bm-body { padding: 18px 20px 20px; }
.bm-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bm-name h3 { font: 700 21px/1.1 var(--font-body); letter-spacing: -0.01em; margin: 0; }   /* the pixel font's C reads as an O ("Olaude") */
.bm-time { flex-basis: 100%; margin-top: 2px; font: 500 13px/1.3 var(--font-mono); color: var(--text-dim); }   /* own row: time, blocks and cost don't fit beside the name on every card */
.bm-sep { margin: 0 7px; color: var(--text-faint); }
.bm-body p { margin: 0; color: var(--text-dim); line-height: 1.55; }
.bm-takeaway { margin-top: 20px; }
.bm-takeaway p { margin: 0 0 10px; line-height: 1.6; }
.bm-takeaway p:last-child { margin-bottom: 0; }
.bm-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 clamp(56px, 8vw, 104px); }
/* full-size viewer */
.bm-lightbox { padding: 0; border: 1px solid var(--border); background: #0b0d0d; max-width: min(1600px, 94vw); width: 100%; }
.bm-lightbox::backdrop { background: rgba(4, 5, 5, 0.85); backdrop-filter: blur(3px); }
.bm-lightbox img { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.bm-lightbox figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text-dim); font-size: 14px; }
@media (max-width: 760px) { .bm-grid { grid-template-columns: 1fr; } }