/* /benchmarks in the research system: neutral white, serif for reading,
   sans for UI, hairline rules, no gradients, no tinted fills. Loaded after
   research.css; every selector is scoped by body.bmk. */
body.bmk .bmk-hero .hero-in{min-height:clamp(440px,40vw,560px)}
body.bmk .bmk-hero h1{font-size:clamp(38px,4.2vw,58px)}
body.bmk .lede a,body.bmk .sect-p a,body.bmk .body a,body.bmk .note a,body.bmk .kv a,body.bmk .callout a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
body.bmk .pill{min-height:44px}
body.bmk .pill-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body.bmk .pill-solid:hover{background:var(--ink);opacity:.86}
body.bmk .sect{scroll-margin-top:calc(var(--bar) + var(--subbar) + 12px)}
body.bmk .how{padding-bottom:104px}

/* at a glance */
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kv>div{padding:24px 24px 24px 0}
.kv>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.kv dt{font-weight:400;font-size:clamp(32px,3.4vw,44px);line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:0 0 8px;font-variant-numeric:tabular-nums}
.kv dd{margin:0;font-family:var(--sans);font-size:14.5px;line-height:21px;color:var(--ink-3)}
@media (max-width:860px){
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv>div,.kv>div+div{padding:20px 16px 20px 0;border-left:0}
  .kv>div:nth-child(2n){padding-left:16px;border-left:1px solid var(--rule)}
  .kv>div:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* tables: scroll inside the wrapper if they ever need to, never the page */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.tbl-wrap:focus-visible{outline:2px solid #2C84DB;outline-offset:2px}
.tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;line-height:22px;color:var(--ink-2)}
.tbl th,.tbl td{text-align:left;padding:14px 20px;border-top:1px solid var(--rule);vertical-align:top}
.tbl thead th{border-top:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);padding-block:12px}
.tbl tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.tbl.stack tbody th{white-space:normal;width:38%}
.tbl.num{min-width:0}
.tbl.num td,.tbl.num thead th:not(:first-child){text-align:right;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.tbl.num thead th:not(:first-child){font-family:var(--sans)}
.tbl.num td,.tbl.num th{padding-block:11px}
.tbl tr.loose th,.tbl tr.loose td{color:var(--ink);border-top:1px solid var(--edge)}
.tbl tr.loose td:last-child{font-weight:600}
@media (max-width:560px){
  .tbl th,.tbl td{padding:12px 12px;font-size:14.5px}
  .tbl tbody th{white-space:normal}
  .tbl.stack tbody th{width:44%}
}
.note{font-family:var(--sans);font-size:14px;line-height:21px;color:var(--ink-3);margin:16px 0 0;max-width:720px}
.body{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 16px;max-width:720px}
.h3{font-family:var(--sans);font-size:15px;line-height:22px;font-weight:600;color:var(--ink);margin:36px 0 10px}

/* plain lists in place of tiles */
.plain{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:15px;line-height:22px;color:var(--ink-2)}
.plain li{padding:8px 0;border-top:1px solid var(--rule)}
.plain b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.3;color:var(--ink)}
.plain.cols{columns:2;column-gap:32px}
.plain.cols li{break-inside:avoid}
.plain.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:8px}
@media (max-width:760px){.two,.plain.two-col{grid-template-columns:minmax(0,1fr)}}

/* callout: one left rule, full width */
.callout{margin:28px 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--ink)}
.callout h3{font-family:var(--sans);font-size:15px;line-height:22px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.callout p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:760px}

/* command block: wraps, scrolls inside, never clips */
.code{position:relative;margin:0;border:1px solid var(--rule);border-radius:10px;background:var(--card);overflow-x:auto}
.code pre{margin:0;padding:16px 84px 16px 18px;font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.code pre code{font-family:inherit;background:none;border:0;padding:0}
.copy{position:absolute;top:8px;right:8px;min-height:44px;min-width:64px;font-family:var(--sans);font-size:13px;line-height:20px;color:var(--pill-ink);background:var(--paper);border:1px solid var(--edge);border-radius:8px;padding:0 12px;cursor:pointer;transition:background .15s ease}
.copy:hover{background:var(--row-hover)}
.code:focus-visible{outline:2px solid #2C84DB;outline-offset:2px}

/* speed */
.big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-family:var(--sans);font-size:16px;line-height:24px;color:var(--ink-3);margin:0 0 16px}
.big span{font-family:var(--serif);font-size:clamp(48px,7vw,84px);line-height:1;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.copy{transition:none}}

/* UX audit 2026-10-15 (leftovers lane): fold long tables on phones, tighter section rhythm. */
details.fold>summary{display:none}
@media (max-width:760px){
  details.fold>summary{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;list-style:none}
  details.fold>summary::-webkit-details-marker{display:none}
  details.fold>summary::after{content:"+";margin-left:auto;font-size:20px;line-height:1;color:var(--ink-3)}
  details.fold[open]>summary::after{content:"\2212"}
  details.fold[open]>summary{margin-bottom:12px}
  details.fold>summary:focus-visible{outline:2px solid #2C84DB;outline-offset:2px}
  body.bmk .sect{padding-top:44px}
  body.bmk .sect-h{margin-bottom:18px}
  body.bmk .bmk-hero .hero-in{min-height:0}
  .h3{margin-top:24px}
}