.us-main{ max-width:1100px; margin:0 auto; padding:var(--sp-21) 16px var(--sp-30); display:grid; gap:var(--sp-18); }
.us-panel{ background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:var(--sp-18); display:grid; gap:var(--sp-12); }
.us-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .us-head h2{ font-family:var(--font-display); font-size:var(--fs-xl); margin:0; } .us-head .cx-btn{ margin-left:auto; }
.us-panel h3{ font-family:var(--font-display); font-size:var(--fs-md); margin:var(--sp-6) 0 0; }
.us-note{ color:var(--graphite); font-size:var(--fs-sm); margin:0; }
.us-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--sp-9); }
.us-tile{ display:grid; gap:2px; padding:var(--sp-9) var(--sp-11); border:1px solid var(--border); border-radius:10px; }
.us-tile__v{ font-family:var(--font-display); font-size:28px; font-variant-numeric:tabular-nums; } .us-tile__l{ font-size:var(--fs-sm); } .us-tile__s{ font-size:12px; color:var(--graphite); }
.us-funnel{ display:grid; gap:6px; }
.us-funnel__row{ display:grid; grid-template-columns:170px 1fr 60px; gap:10px; align-items:center; font-size:var(--fs-sm); }
.us-funnel__bar{ height:14px; background:var(--pf-trough, var(--border)); border-radius:7px; overflow:hidden; } .us-funnel__bar i{ display:block; height:100%; background:var(--brand); }
.us-funnel__v{ text-align:right; font-variant-numeric:tabular-nums; }
.us-table{ border-collapse:collapse; font-size:var(--fs-sm); width:100%; max-width:640px; } .us-table th, .us-table td{ text-align:left; padding:6px 10px; border-bottom:1px solid var(--border); } .us-table th{ color:var(--graphite); font-weight:500; }
.us-days{ display:flex; gap:2px; align-items:flex-end; height:90px; border-bottom:1px solid var(--border); }
.us-day{ flex:1; display:flex; gap:1px; align-items:flex-end; height:100%; } .us-day i{ flex:1; display:block; min-height:1px; border-radius:2px 2px 0 0; }
.us-day i.r{ background:var(--ink); } .us-day i.a{ background:var(--border); } .us-day i.m{ background:var(--brand); }
.us-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--sp-18); }
.us-rows{ list-style:none; margin:0; padding:0; display:grid; gap:6px; } .us-rows li{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:var(--fs-sm); } .us-rows li b{ margin-left:auto; font-variant-numeric:tabular-nums; } .us-rows time{ margin-left:auto; color:var(--graphite); font-size:12px; }
.cx-chip--sys{ background:var(--brand-10); }
@media (max-width:640px){ .us-funnel__row{ grid-template-columns:110px 1fr 50px; } .us-tile__v{ font-size:22px; } }

/* external activity (external-demand sprint): its own section; milestones as a compact list */
.us-external { margin-top: 28px; }
.us-external > h3 { margin-bottom: 8px; }
.us-milestones li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.us-milestones li > span:first-child { flex: 1 1 220px; }
.us-milestones .cx-chip { opacity: 0.75; }

/* identity classes (2026-09-29): a wide table that must stay readable on a phone, so it scrolls
   in its own container rather than making the page scroll sideways. */
.us-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.us-classes { min-width: 46rem; }
.us-classes td:not(:first-child), .us-classes th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.us-classes .cx-chip { margin-left: .5rem; }
.us-cl--ext td { font-weight: 600; }

/* ── Clean public scoreboard (usage/benchmark UI sprint) ──────────────────────
   No new design system: these three rules reuse the page's existing border,
   radius, padding and type tokens. A "source card" is a .us-tile that has room
   for a sentence, and the benchmark card is a full-width version of the same
   thing — so nothing here introduces a look the page did not already have. */
.us-src{ display:grid; gap:6px; align-content:start; padding:var(--sp-11); border:1px solid var(--border); border-radius:10px; }
.us-src__v{ font-family:var(--font-display); font-size:28px; font-variant-numeric:tabular-nums; }
.us-src__l{ font-size:var(--fs-sm); font-weight:500; }
.us-src__d{ font-size:12px; color:var(--graphite); line-height:1.5; }
.us-src__m{ display:flex; gap:var(--sp-11); flex-wrap:wrap; font-size:12px; color:var(--graphite); margin-top:2px; }
.us-src__m b{ color:var(--ink); font-variant-numeric:tabular-nums; }
/* the trust line: stated, not buried in a tooltip */
.us-trust{ font-size:var(--fs-sm); color:var(--ink); border-left:2px solid var(--brand); padding-left:var(--sp-11); margin:0; }
.us-bench{ display:grid; gap:var(--sp-9); padding:var(--sp-18); border:1px solid var(--brand-20); border-radius:10px; }
.us-bench__top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.us-bench__top h3{ margin:0; font-family:var(--font-display); font-size:var(--fs-md); }
.us-bench__meta{ font-size:12px; color:var(--graphite); }
@media (max-width:640px){ .us-src__v{ font-size:22px; } }

/* ══ /benchmarks proof card (benchmark proof UI sprint, 2026-09-30) ══════════
   Five rules, all in the vocabulary already above: 1px var(--border), 10px
   radius, var(--font-display) numerals, var(--graphite) for secondary text.
   No gradient, no shadow, no new colour — the card earns its prominence from
   the size of the numerals and the whitespace, not from decoration. */
.bm-proof{ display:grid; gap:var(--sp-11); padding:var(--sp-11); border:1px solid var(--border); border-radius:10px; min-width:0; }
.bm-proof__top{ display:flex; gap:var(--sp-11); align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.bm-proof__eyebrow{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.bm-proof__meta{ display:flex; gap:6px; flex-wrap:wrap; }
.bm-proof__line{ font-size:var(--fs-sm); color:var(--ink); border-left:2px solid var(--brand); padding-left:var(--sp-11); margin:0;
  /* min-width:0 is load-bearing: this sits in a grid, and a grid item's default min-width:auto
     refuses to shrink below its content, so at phone width the sentence ran off the card instead
     of wrapping. Caught on a real 390px screenshot, not in the harness. */
  min-width:0; overflow-wrap:anywhere; }
/* desktop four across; tablet 2x2; phone stacked — content sets the height */
.bm-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--sp-11); }
.bm-stat{ display:grid; gap:2px; align-content:start; min-width:0; }
.bm-stat__v{ font-family:var(--font-display); font-size:40px; line-height:1.05; font-variant-numeric:tabular-nums; }
.bm-stat__l{ font-size:var(--fs-sm); color:var(--graphite); }
@media (max-width:860px){ .bm-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){ .bm-stats{ grid-template-columns:1fr; } .bm-stat__v{ font-size:32px; } }
/* the quiet second row: deliberately smaller than the card above it */
/* auto-fit rather than a fixed 3: the strip gained a fourth item and the last one dropped to a
   row of its own. This lets it lay out evenly at whatever count the API sends. */
.bm-second{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:var(--sp-11); }
.bm-second li{ display:grid; gap:1px; font-size:12px; color:var(--graphite); min-width:0; overflow-wrap:anywhere; }
.bm-second b{ font-family:var(--font-display); font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums; }
.bm-second i{ font-style:normal; color:var(--graphite); opacity:.85; }
@media (max-width:640px){ .bm-second{ grid-template-columns:1fr; } }

/* ══ /benchmarks readability (2026-09-30) ═══════════════════════════════════
   The shared usage surface runs its body copy at --fs-sm, which is 10px, with
   11px section headings — small enough that the benchmark page is hard to read
   at a normal viewing distance. This raises the type ON THE BENCHMARKS PAGE
   ONLY, scoped to #bmRoot, because these classes are shared with /usage and
   restyling that page was not asked for.

   No new sizes are invented: everything below moves onto an existing token, and
   the two literal jumps (20px, 22px) match sizes already used on this surface
   for the same job. Numerals, chips and eyebrows are deliberately left alone —
   they were never the problem, and growing them would flatten the hierarchy the
   larger body text is meant to restore. */
#bmRoot{ font-size:var(--fs-lg); }
#bmRoot .us-note,
#bmRoot .us-tile__l,
#bmRoot .us-src__l,
#bmRoot .us-src__d,
#bmRoot .us-funnel__row,
#bmRoot .us-table,
#bmRoot .us-rows li,
#bmRoot .bm-stat__l,
#bmRoot .bm-second,
#bmRoot .us-bench__meta,
#bmRoot .us-src__m{ font-size:var(--fs-lg); }
/* the two sentences that carry the page's actual claim get one step more */
#bmRoot .bm-proof__line,
#bmRoot .us-trust{ font-size:var(--fs-xl); line-height:1.55; }
#bmRoot .us-src__d,
#bmRoot .us-rows li{ line-height:1.5; }
/* headings were smaller than the body text they introduced */
#bmRoot .us-head h2{ font-size:var(--fs-21); }
#bmRoot h3{ font-size:var(--fs-18); }
#bmRoot .us-second b, #bmRoot .bm-second b{ font-size:20px; }
#bmRoot .us-tile__s{ font-size:var(--fs-base); }
#bmRoot .us-rows time{ font-size:var(--fs-base); }
/* the label column has to grow with its text or the funnel rows clip */
#bmRoot .us-funnel__row{ grid-template-columns:210px 1fr 64px; }
@media (max-width:640px){ #bmRoot .us-funnel__row{ grid-template-columns:130px 1fr 54px; } }
/* the lead sentence of a panel: it introduces the rows under it, so it reads at
   least as large as they do. It was pinned inline to --fs-sm, which beat the
   stylesheet and left the one explanatory line smaller than everything it
   explained. */
#bmRoot .us-src__lead{ font-size:var(--fs-xl); color:var(--ink); line-height:1.55; }

/* ══ /benchmarks: progression strip and limitations (UI completion) ══════════
   Two small additions in the vocabulary already on the page. The strip is
   deliberately lighter than the proof card above it — it is supporting proof,
   so smaller numerals, no border, no fill. */
.bm-prog{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-11) var(--sp-9); }
.bm-prog li{ display:grid; gap:1px; min-width:0; }
.bm-prog b{ font-family:var(--font-display); font-size:22px; font-variant-numeric:tabular-nums; line-height:1.1; }
.bm-prog span{ font-size:var(--fs-base); color:var(--graphite); }
.bm-prog__sep{ color:var(--graphite); opacity:.5; font-size:var(--fs-lg); align-self:center; }
@media (max-width:560px){ .bm-prog b{ font-size:18px; } .bm-prog__sep{ display:none; } }
/* what this does not prove: muted and small, a statement of scope rather than a warning box */
.bm-limits{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.bm-limits li{ font-size:var(--fs-base); color:var(--graphite); padding-left:14px; position:relative; }
.bm-limits li::before{ content:"·"; position:absolute; left:4px; color:var(--brand); }
#bmRoot .bm-prog span, #bmRoot .bm-limits li{ font-size:var(--fs-lg); }

/* The hero row: six metrics, bigger than the detail tiles below. auto-fit left Outcomes alone on
   a second row at common desktop widths — an orphan card reads as a mistake — so the count is
   explicit at each breakpoint and always divides six evenly. */
.us-tiles--hero{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (min-width:1180px){ .us-tiles--hero{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
@media (max-width:860px){ .us-tiles--hero{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:440px){ .us-tiles--hero{ grid-template-columns:1fr; } }
.us-tiles--hero .us-tile__v{ font-size:34px; }
@media (max-width:520px){ .us-tiles--hero .us-tile__v{ font-size:26px; } }

/* the External Network card: the existing proof-card box, nothing new */
.us-ext{ display:grid; gap:var(--sp-11); padding:var(--sp-11); border:1px solid var(--border); border-radius:10px; min-width:0; }

/* ══ /benchmarks two-layer page (2026-10-01) ════════════════════════════════
   The page split into a product proof on top and the technical receipts below a
   divider. These rules add no colour, no gradient, no shadow and no chart: the
   hero earns its weight from type size and whitespace, the arrow flow reuses
   the same display numerals as .bm-stat, and a technical section is the same
   1px var(--border) / 10px radius box the proof card already is.

   Every selector here is new and benchmarks-only (.bm-*), so /usage — which
   shares this stylesheet — is untouched by all of it. */
.bm-hero{ display:grid; gap:var(--sp-9); }
.bm-hero h2{ font-family:var(--font-display); font-size:var(--fs-26); line-height:1.15; margin:0; }
.bm-hero__sub{ font-size:var(--fs-16); line-height:1.5; color:var(--graphite); margin:0; max-width:62ch; }
@media (min-width:900px){ .bm-hero h2{ font-size:34px; } .bm-hero__sub{ font-size:18px; } }

/* the lead card: the same box as .bm-proof, one step more room */
.bm-proof--lead{ padding:var(--sp-18); gap:var(--sp-16); }

/* the arrow flow — four numbers and three arrows, wrapping before it overflows */
.bm-flow{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-11) var(--sp-15); }
.bm-flow__i{ display:grid; gap:2px; min-width:0; }
.bm-flow__v{ font-family:var(--font-display); font-size:40px; line-height:1.05; font-variant-numeric:tabular-nums; }
.bm-flow__l{ font-size:var(--fs-lg); color:var(--graphite); }
.bm-flow__s{ color:var(--graphite); opacity:.5; font-size:var(--fs-2xl); align-self:center; }
@media (max-width:600px){
  .bm-flow{ display:grid; grid-template-columns:1fr; gap:var(--sp-9); }
  .bm-flow__s{ display:none; }
  .bm-flow__v{ font-size:30px; }
}
/* the two buttons under it: existing .cx-btn, laid out in a row that wraps */
.bm-ctas{ display:flex; flex-wrap:wrap; gap:var(--sp-9); margin:0; }
.bm-ctas .cx-btn{ text-decoration:none; }

/* LEARN · PROVE · REUSE */
.bm-what{ display:grid; gap:var(--sp-11); }
.bm-tri{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--sp-11); }
.bm-tri li{ display:grid; gap:var(--sp-3); align-content:start; padding:var(--sp-11); border:1px solid var(--border); border-radius:10px; min-width:0; }
.bm-tri__k{ font-size:var(--fs-base); font-weight:600; letter-spacing:.08em; color:var(--brand); }
.bm-tri__d{ font-size:var(--fs-16); line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }

/* the Genesis result block above the divider */
.bm-result{ display:grid; gap:var(--sp-9); }
.bm-result h3{ margin:0; }

/* the divider: one hairline, one label, one sentence */
.bm-rule{ display:grid; gap:var(--sp-3); border-top:1px solid var(--border); padding-top:var(--sp-16); margin-top:var(--sp-9); scroll-margin-top:calc(var(--topnav-h, 80px) + 16px); }
.bm-rule h3{ font-family:var(--font-display); font-size:var(--fs-18); letter-spacing:.1em; margin:0; }

/* a technical section: native details/summary, nothing permanently hidden */
.bm-sec{ border:1px solid var(--border); border-radius:10px; min-width:0; }
.bm-sec summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-5) var(--sp-9);
  padding:var(--sp-11); cursor:pointer; list-style:none; min-width:0; }
.bm-sec summary::-webkit-details-marker{ display:none; }
.bm-sec summary::after{ content:"+"; margin-left:auto; color:var(--graphite); font-size:var(--fs-2xl); line-height:1; }
.bm-sec[open] summary::after{ content:"−"; }
@media (hover:hover){ .bm-sec summary:hover{ background:var(--brand-06); } }
.bm-sec summary:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.bm-sec[open] summary{ border-bottom:1px solid var(--border); }
.bm-sec__t{ font-family:var(--font-display); font-size:var(--fs-18); }
.bm-sec__m{ font-size:var(--fs-lg); color:var(--graphite); min-width:0; overflow-wrap:anywhere; }
.bm-sec__b{ display:grid; gap:var(--sp-12); padding:var(--sp-11); min-width:0; }
.bm-sec__b > h3:first-child{ margin-top:0; }
/* the vintage line sits where it cannot be missed: it is why two sets of counts differ */
.bm-vintage{ border-left:2px solid var(--brand); padding-left:var(--sp-11); line-height:1.55; }
/* the wide tables inside a section still scroll in their own container */
.bm-sec__b .us-table{ max-width:none; }
@media (max-width:600px){ .bm-sec summary{ gap:var(--sp-3); } .bm-sec__m{ flex-basis:100%; } }