@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");

/* Cwupid benchmarks. The site's palette and faces (landing.css), with a darker
   "lab" surface for the ranking section. One family of type throughout: Fredoka for
   display, Nunito Sans for everything else. */
:root {
  color-scheme: light;
  --bg: #fffdf7;
  --surface: #ffffff;
  --ink: #2f5740;
  --ink-2: #416451;
  --muted: #66806e;
  --rule: #dcebd9;
  --grid: #e7efe4;
  --green: #bfe3bd;
  --green-deep: #5e9e72;
  --yellow: #ffd23f;
  --pink: #f7c3cf;
  --pink-deep: #c9407a;
  --cream: #fff8df;
  --lab: #16301f;
  --lab-2: #1f3d2c;
  --lab-ink: #f3fbef;
  --lab-muted: #a9c4b1;
  --lab-rule: rgba(214, 240, 220, .14);
  /* Series colors: validated for colorblind separation on white and on --lab.
     Order matters (adjacent pairs): Cwupid, GPT-6 Sol, Opus 5.5, Haiku 4.5. */
  --s-cwupid: #d6407f;
  --s-gpt: #3f7fc4;
  --s-opus: #c9731f;
  --s-haiku: #4f9a66;
  --display: "Fredoka", "Avenir Next Rounded", ui-rounded, sans-serif;
  --sans: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
}
.bm-dark {
  --s-cwupid: #e0558f;
  --s-gpt: #5b93d6;
  --s-opus: #cc7f30;
  --s-haiku: #52a06c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; padding: 0 16px 64px; color: var(--ink-2); background: var(--bg);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 999px; pointer-events: none; filter: blur(2px);
}
body::before { width: 360px; height: 360px; top: -140px; right: -110px; background: #ffd95a; opacity: .55; }
body::after { width: 330px; height: 330px; bottom: -130px; left: -100px; background: #ff9fc1; opacity: .5; }
a { color: var(--green-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; }
.bm-wrap { max-width: 1160px; margin: 0 auto; }
.bm-num { font-variant-numeric: normal; white-space: nowrap; }
.bm-nowrap { white-space: nowrap; }
code { font: 700 .92em var(--sans); background: #eef6ea; padding: 1px 6px; border-radius: 6px; }

/* ---------- header (matches the landing page) ---------- */
.bm-top {
  position: sticky; top: 14px; z-index: 20; margin: 14px 0 22px; padding: 10px 12px 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,255,255,.91); border: 1px solid rgba(191,227,189,.8);
  border-radius: 999px; box-shadow: 0 10px 35px rgba(92,143,105,.11); backdrop-filter: blur(16px);
}
.bm-brand { color: var(--pink-deep); font: 700 1.45rem var(--display); letter-spacing: -.03em; text-decoration: none; }
.bm-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.bm-nav a { color: var(--muted); font-weight: 800; font-size: .875rem; padding: 9px 16px; border-radius: 999px; text-decoration: none; }
.bm-nav a:hover { color: var(--green-deep); background: #edf8ec; }
.bm-nav a[aria-current="page"] { color: #fff; background: var(--green-deep); }
.bm-launch {
  flex: none; color: #fff; background: var(--pink-deep); font-weight: 800; font-size: .9rem;
  padding: 10px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 5px 0 #a32e61;
}
.bm-launch:hover { background: #b93a70; }

/* ---------- hero: open on the page background, no panel ---------- */
.bm-hero { padding: clamp(20px, 4vw, 48px) clamp(4px, 1vw, 12px) clamp(12px, 2vw, 24px); }
.bm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.bm-hero h1 {
  margin: 0 0 20px; font: 700 clamp(2.3rem, 5.4vw, 4.5rem)/1.02 var(--display); letter-spacing: -.04em; color: #315c40;
}
.bm-glow {
  background: linear-gradient(100deg, #d83d82, #f269a3 42%, #d83d82);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bm-lede { max-width: 58ch; margin: 0 0 14px; color: var(--ink-2); font-size: clamp(1.06rem, 1.6vw, 1.2rem); line-height: 1.55; font-weight: 600; }
.bm-summary { max-width: 62ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.bm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bm-btn {
  display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 999px;
  font-weight: 800; font-size: 1rem; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
}
.bm-btn-primary { color: #2f5740; background: var(--yellow); box-shadow: 0 6px 0 #e0af1f; }
.bm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #e0af1f; }
.bm-btn-ghost { color: var(--green-deep); border: 2px solid var(--green); background: #fff; }
.bm-btn-ghost:hover { background: #edf8ec; }

.bm-hero-figure { margin: 0; }
.bm-hero-plot {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; margin-left: auto;
  border-radius: 28px; background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 18px 50px rgba(65,100,81,.12);
}
.bm-hero-plot svg { display: block; width: 100%; height: 100%; }
.bm-hero-plot .bm-rank-frame { fill: #fbfdf9; stroke: var(--rule); }
.bm-hero-plot .bm-rank-diag { stroke: #cfe0cb; stroke-width: 1; }
.bm-hero-plot .bm-rank-axis { fill: var(--muted); font: 700 11px var(--sans); }
.bm-hero-plot .bm-hero-srcc { fill: var(--ink); font: 800 16px var(--sans); }
.bm-hero-figure figcaption { max-width: 440px; margin: 12px 0 0 auto; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.bm-hero-figure figcaption strong { color: var(--ink); }

/* ---------- on-page nav ---------- */
.bm-toc {
  display: flex; gap: 6px; overflow-x: auto; margin: 22px 0 8px; padding: 6px; scrollbar-width: none;
  border: 1px solid var(--rule); border-radius: 999px; background: rgba(255,255,255,.8);
}
.bm-toc::-webkit-scrollbar { display: none; }
.bm-toc a { flex: none; color: var(--muted); font-weight: 800; font-size: .84rem; padding: 7px 14px; border-radius: 999px; text-decoration: none; }
.bm-toc a:hover { color: var(--green-deep); background: #edf8ec; }

/* ---------- sections ---------- */
.bm-section { padding: clamp(40px, 6vw, 72px) 0 8px; }
.bm-section-head { max-width: 760px; margin-bottom: 26px; }
.bm-eyebrow { margin: 0 0 10px; font: 800 .9rem var(--sans); color: var(--pink-deep); }
.bm-section h2 { margin: 0 0 14px; color: var(--ink); font: 700 clamp(1.9rem, 4vw, 3.1rem)/1.05 var(--display); letter-spacing: -.035em; }
.bm-intro { margin: 0; color: var(--muted); font-size: 1.03rem; max-width: 68ch; }
.bm-panel { padding: clamp(18px, 3vw, 30px); border-radius: 30px; background: var(--surface); box-shadow: 0 16px 48px rgba(65,100,81,.09); border: 1px solid var(--rule); }
.bm-fig-note { margin: 14px 0 0; color: var(--muted); font-size: .84rem; }

/* headline cards */
.bm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bm-card {
  display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 28px; background: var(--surface);
  border: 1px solid var(--rule); box-shadow: 0 14px 40px rgba(65,100,81,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bm-card:hover { transform: translateY(-3px); box-shadow: 0 20px 52px rgba(65,100,81,.14); }
.bm-card-accent { background: linear-gradient(160deg, #fff 0%, #fff6d8 60%, #ffe3ec 100%); }
.bm-card-kicker { margin: 0 0 6px; font: 800 .86rem var(--sans); color: var(--pink-deep); }
.bm-card h3 { margin: 0 0 14px; color: var(--ink); font: 700 1.22rem/1.2 var(--display); letter-spacing: -.02em; }
.bm-card-note { margin: auto 0 0; padding-top: 12px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.bm-card-note strong { color: var(--ink); }
.bm-bars svg { display: block; width: 100%; height: auto; overflow: visible; }

/* shared SVG text */
.bm-svg-label { fill: var(--ink-2); font: 700 12px var(--sans); }
.bm-svg-label-strong { fill: var(--ink); font: 800 12px var(--sans); }
.bm-svg-value { fill: var(--ink-2); font: 700 12px var(--sans); font-variant-numeric: tabular-nums; }
.bm-svg-value-strong { fill: var(--ink); font: 800 12.5px var(--sans); font-variant-numeric: tabular-nums; }
.bm-svg-tick { fill: var(--muted); font: 600 11px var(--sans); font-variant-numeric: tabular-nums; }
.bm-svg-grid { stroke: var(--grid); stroke-width: 1; }
.bm-svg-chance { stroke: var(--muted); stroke-width: 1; }
.bm-svg-chance-label { fill: var(--muted); font: 700 11px var(--sans); }
.bm-hit { fill: transparent; cursor: default; }
.bm-hit:focus { outline: none; }
.bm-hit:focus-visible + .bm-mark, .bm-row:hover .bm-mark { filter: brightness(1.08); }

/* legend */
.bm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.bm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bm-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
/* Model marks: the maker's logo in a ring of the model's series color (two Anthropic
   models share a logo, so the ring carries identity), or a plain dot when no logo is set. */
.bm-logo { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: contain; background: #fff; padding: 3px; vertical-align: middle; }
.bm-logo.is-cwupid { padding: 0; box-shadow: none !important; }
.bm-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.bm-logo-slot { float: right; margin: 2px 0 0 10px; }
.bm-logo-slot .bm-logo { width: 26px; height: 26px; }
.bm-logo-slot .bm-dot { width: 12px; height: 12px; margin-top: 6px; }
.bm-table thead th .bm-logo { width: 18px; height: 18px; margin-right: 6px; }
.bm-table thead th .bm-dot { margin-right: 6px; }
.bm-entrant { display: inline-flex; align-items: center; gap: 8px; }
.bm-entrant .bm-logo { width: 20px; height: 20px; }
.bm-legend span .bm-logo, .bm-rank-cell figcaption b .bm-logo, .bm-fp-name b .bm-logo { width: 20px; height: 20px; }

/* sweep (dumbbell) */
.bm-sweep svg { display: block; width: 100%; height: auto; }
.bm-sweep .bm-row-bg { fill: transparent; }
.bm-sweep .bm-row:hover .bm-row-bg { fill: #f5faf2; }
.bm-sweep .bm-span { stroke: #cfe0cb; stroke-width: 2; stroke-linecap: round; }
.bm-sweep .bm-lead-label { fill: var(--pink-deep); font: 800 11.5px var(--sans); font-variant-numeric: tabular-nums; }
.bm-sweep .bm-group-label { fill: var(--muted); font: 800 11.5px var(--sans); }

/* dark lab section */
.bm-dark {
  margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 5vw, 60px) clamp(18px, 4.5vw, 56px) clamp(28px, 4vw, 48px);
  border-radius: 36px; color: var(--lab-ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(224,85,143,.22), transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(95,190,120,.2), transparent 40%),
    linear-gradient(160deg, #173424, #0f2218);
}
.bm-dark h2 { color: #fff; }
.bm-dark .bm-intro { color: #bfd5c5; }
.bm-dark .bm-eyebrow { color: #ffb3d1; }
.bm-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 999px; background: #eef6ea; border: 1px solid var(--rule); }
.bm-toggle button {
  font: 800 .84rem var(--sans); color: var(--muted); background: transparent; border: 0; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; box-shadow: none;
}
.bm-toggle button[aria-pressed="true"] { color: #fff; background: var(--green-deep); }
.bm-dark .bm-toggle { background: rgba(255,255,255,.06); border-color: var(--lab-rule); }
.bm-dark .bm-toggle button { color: var(--lab-muted); }
.bm-dark .bm-toggle button[aria-pressed="true"] { color: #173424; background: #ffd23f; }

.bm-rank-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bm-rank-cell { margin: 0; padding: 14px; border-radius: 22px; background: rgba(4,16,9,.4); border: 1px solid var(--lab-rule); }
.bm-rank-cell.is-cwupid { border-color: rgba(224,85,143,.55); box-shadow: 0 0 0 1px rgba(224,85,143,.2), 0 18px 50px rgba(224,85,143,.12); }
.bm-rank-cell figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 10px; }
.bm-rank-cell figcaption b { display: inline-flex; align-items: center; gap: 7px; color: #fff; font: 800 .92rem var(--sans); white-space: nowrap; }
.bm-rank-cell figcaption b i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bm-rank-cell figcaption span { color: var(--lab-muted); font: 700 .8rem var(--sans); white-space: nowrap; }
.bm-rank-cell figcaption span strong { color: #fff; }
.bm-rank-cell svg { display: block; width: 100%; height: auto; }
.bm-rank-cell .bm-rank-frame { fill: rgba(255,255,255,.02); stroke: var(--lab-rule); }
.bm-rank-cell .bm-rank-diag { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.bm-rank-cell .bm-rank-axis { fill: var(--lab-muted); font: 700 9.5px var(--sans); }
.bm-rank-foot { margin: 8px 0 0; color: var(--lab-muted); font-size: .78rem; }

/* fingerprint */
.bm-fingerprint { display: grid; gap: 16px; }
.bm-fp-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: end; }
.bm-fp-name b { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 800 .95rem var(--sans); }
.bm-fp-name b i { width: 10px; height: 10px; border-radius: 50%; }
.bm-fp-name span { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.bm-fp-name strong { color: var(--ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.bm-fp-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.bm-fp-plot .bm-fp-base { stroke: var(--rule); }
.bm-fp-plot .bm-fp-callout { fill: var(--ink); font: 800 11px var(--sans); }

/* likability */
.bm-like { padding: clamp(24px, 4.5vw, 52px); border-radius: 36px; background: linear-gradient(125deg, #fff5cf 0%, #fff 45%, #fde1ea 100%); border: 1px solid #f3e2b8; }
.bm-like-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.bm-like-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.bm-like-facts { display: grid; gap: 10px; }
.bm-like-facts div { padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.85); border: 1px solid #f1e4c6; }
.bm-like-facts strong { display: block; color: var(--pink-deep); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.bm-like-facts span { color: var(--muted); font-size: .86rem; }
.bm-like .bm-table-wrap { margin-top: 16px; }

/* model */
.bm-model-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.bm-model-card { padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 14px 40px rgba(65,100,81,.07); }
.bm-model-card h3 { margin: 0 0 8px; color: var(--ink); font: 700 1.15rem/1.2 var(--display); }
.bm-model-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.bm-model-feature { color: #fff; background: linear-gradient(150deg, #527b5e, #274736); border: 0; }
.bm-model-feature .bm-card-kicker { color: #f9dda2; }
.bm-model-feature p { color: rgba(255,255,255,.82); }
.bm-model-card .bm-model-num { margin: 4px 0 12px; color: #fff; font: 800 clamp(2.8rem, 5vw, 3.8rem)/1 var(--sans); letter-spacing: -.04em; }

/* tables */
.bm-table-wrap { overflow-x: auto; margin-top: 16px; border-radius: 22px; border: 1px solid var(--rule); background: var(--surface); }
.bm-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.bm-table caption { caption-side: top; text-align: left; padding: 16px 18px 6px; color: var(--ink); font-weight: 800; }
.bm-table th, .bm-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-table th:first-child, .bm-table td:first-child { text-align: left; }
.bm-table thead th { color: var(--muted); font: 800 .82rem var(--sans); vertical-align: bottom; }
.bm-table tbody tr:last-child td { border-bottom: 0; }
.bm-table .is-cwupid { color: var(--ink); font-weight: 800; background: #fdf0f5; }
.bm-table .bm-lead { color: var(--pink-deep); font-weight: 800; }
.bm-table .bm-ci { color: var(--muted); font-weight: 600; }
.bm-table .bm-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #eef6ea; color: var(--muted); font: 800 .72rem var(--sans); }
.bm-table td small { display: block; color: var(--muted); font-size: .76rem; font-weight: 600; }
.bm-table td.bm-lead-cell { text-align: left; }
.bm-table th.bm-lead-cell { text-align: left; }

/* method */
.bm-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); padding: clamp(22px, 4vw, 40px); border-radius: 30px; background: var(--surface); border: 1px solid var(--rule); }
.bm-method h3 { margin: 22px 0 6px; color: var(--ink); font: 800 1rem var(--sans); }
.bm-method h3:first-child { margin-top: 0; }
.bm-method p, .bm-method li { color: #58705f; font-size: .93rem; line-height: 1.65; }
.bm-method ul { padding-left: 1.1em; margin: 0; }
.bm-method li + li { margin-top: 6px; }
.bm-appendix { margin-top: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule); }
.bm-appendix summary { cursor: pointer; padding: 16px 20px; color: var(--ink); font-weight: 800; list-style: none; }
.bm-appendix summary::-webkit-details-marker { display: none; }
.bm-appendix summary::after { content: "+"; float: right; color: var(--muted); font-weight: 800; }
.bm-appendix[open] summary::after { content: "\2212"; }
.bm-appendix > div, .bm-appendix > ul { padding: 0 20px 20px; }
.bm-prompt { margin: 0 0 18px; }
.bm-prompt h4 { margin: 14px 0 6px; color: var(--ink); font-size: .9rem; }
.bm-prompt p { margin: 0 0 6px; color: var(--muted); font-size: .84rem; }
.bm-prompt pre { margin: 0 0 8px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; border-radius: 14px; background: #f6faf3; color: #3d5a47; font: 500 .86rem/1.6 var(--sans); }
.bm-prompt pre b { color: var(--pink-deep); }

/* call to action */
.bm-cta {
  margin: clamp(40px, 6vw, 72px) 0 0; padding: clamp(36px, 7vw, 80px) 20px; text-align: center; border-radius: 36px;
  background: linear-gradient(120deg, #fff3c4, #f8d4dc);
}
.bm-cta h2 { max-width: 18ch; margin: 0 auto 12px; color: #3f6b4e; font: 700 clamp(1.9rem, 4.6vw, 3.4rem)/1.05 var(--display); letter-spacing: -.04em; }
.bm-cta p { max-width: 54ch; margin: 0 auto 24px; color: #66806e; }

.bm-fn { color: var(--pink-deep); text-decoration: none; font-size: .6em; vertical-align: super; line-height: 0; margin-left: .05em; }
.bm-fn:hover { text-decoration: underline; }
.bm-footnote { max-width: 80ch; margin: 28px 8px 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.bm-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 28px 8px 0; color: var(--muted); font-size: .85rem; }
.bm-foot nav { display: flex; gap: 14px; flex-wrap: wrap; }

/* tooltip */
.bm-tip {
  position: fixed; z-index: 50; max-width: 260px; padding: 9px 12px; border-radius: 12px; pointer-events: none;
  color: #fff; background: rgba(20,40,28,.96); font-size: .8rem; line-height: 1.4; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.bm-tip b { font-weight: 800; }

/* reveal (an enhancement only; content is visible without it) */
.bm-reveal-ready .bm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.bm-reveal-ready .bm-reveal.is-in { opacity: 1; transform: none; }
.bm-grow { transform-box: fill-box; transform-origin: left center; }
.bm-anim .bm-grow { animation: bmGrow .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bmGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .bm-reveal-ready .bm-reveal { opacity: 1; transform: none; transition: none; }
  .bm-anim .bm-grow { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .bm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-model-grid { grid-template-columns: 1fr 1fr; }
  .bm-model-feature { grid-column: span 2; }
}
@media (max-width: 820px) {
  .bm-hero-grid { grid-template-columns: 1fr; }
  .bm-hero-plot, .bm-hero-figure figcaption { margin-left: 0; max-width: 360px; }
  .bm-like-grid { grid-template-columns: 1fr; }
  .bm-method-grid { grid-template-columns: 1fr; }
  .bm-nav { display: none; }
}
@media (max-width: 620px) {
  .bm-top { padding: 8px 8px 8px 16px; }
  .bm-cards { grid-template-columns: 1fr; }
  .bm-fp-row { grid-template-columns: 1fr; gap: 6px; }
  .bm-model-grid { grid-template-columns: 1fr; }
  .bm-model-feature { grid-column: auto; }
  .bm-hero, .bm-dark, .bm-like, .bm-cta { border-radius: 28px; }
  .bm-rank-cell { padding: 10px; }
}
@media (max-width: 420px) {
  .bm-rank-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}