/* ==========================================================================
   ByteShape design system: site.css
   --------------------------------------------------------------------------
   Dark, single theme, no dependencies. A terminal and instrumentation look:
   generous whitespace in layout, tight density in data components, mono
   numerals wherever a measurement appears.

   IMPORTANT. This sheet loads ALONGSIDE the legacy css/styles.css on blog,
   demo and run-hf-model pages. styles.css comes first, site.css second.
   Therefore:
     * no bare element selectors, except :root and the global a11y rules;
     * page-level base styles are scoped to `body.bs-page`;
     * .site-header / .site-nav / .site-footer set EVERY layout-relevant
       property explicitly (position, display, background, padding, margin,
       z-index, box-sizing, color), so a legacy `nav {}` / `footer {}` /
       `a {}` / `h1,h2,h3 {}` rule cannot bleed through.

   How to edit this sheet
     * Edit the rule that is already here. Never append a second copy of it.
     * One rule per selector per media context.
     * A rule that belongs to one page lives in that page's section.
     * Reduced-motion and print opt-outs live in the last section, and only
       there. They win because they come last, so they are never repeated.
     * Say why a rule exists, not when it was added. Git history holds dates.
     * Verify a change with the Python checkers in scripts/ and with a render
       comparison. Nothing on any page should move by a pixel.

   Table of contents
     1   Tokens
     2   Base and accessibility
     3   Layout primitives
     4   Type helpers
     5   Buttons and links
     6   Site header and nav
     7   Site footer
     8   Cards and generic components
     9   Data components
     10  Home hero
     11  Home sections
     12  Technology page
     13  Optimize page
     14  Company page
     15  Models catalog
     16  Model finder
     17  Legacy page overrides
     18  Motion and print opt-outs
   ========================================================================== */

/* ==========================================================================
   TOKENS
   --------------------------------------------------------------------------
   Every custom property the sheet reads. `:root` holds the defaults; a page
   shell redeclares only the few that change for it.
   ========================================================================== */

/* The shared bar is 60px tall. --bs-header-h carries that number, so anchor
   scrolling and the blog contents rail keep their offsets. */
:root {
  /* --- surface ramp: deep black base, blue-tinted elevation -------------- */
  --bs-bg: #000000;
  --bs-bg-raise: #0a0c10;
  --bs-surface: #0d1016;
  --bs-surface-2: #11151c;
  --bs-surface-3: #161b24;
  --bs-line: rgba(255, 255, 255, 0.12);
  --bs-line-strong: rgba(255, 255, 255, 0.20);
  /* --- text: all four pass WCAG AA on --bs-bg ---------------------------- */
  --bs-text: #e9edf4; /* 16.4:1 */
  --bs-text-2: #a5adbb; /*  8.7:1 */
  --bs-text-3: #79828f; /*  5.0:1 */
  --bs-text-on-accent: #100a04; /*  6.1:1 on --bs-accent */
  /* --- brand accent: from images/logo.svg (#F06400) ---------------------- */
  --bs-accent: #f06400; /* fills, bars, buttons; 6.1:1 on --bs-bg */
  --bs-accent-bright: #ff8c3a; /* accent text and links; 8.5:1 on --bs-bg */
  --bs-accent-deep: #c85000; /* pressed / hover on filled surfaces      */
  --bs-accent-soft: rgba(240, 100, 0, 0.13);
  --bs-accent-line: rgba(240, 100, 0, 0.38);
  /* --- data colours: gray = original/BF16, accent = ByteShape ------------ */
  --bs-data-base: #5a6371;
  --bs-data-base-2: #6d7684;
  --bs-data-accent: var(--bs-accent);
  --bs-data-tick: rgba(255, 255, 255, 0.42);
  /* --- type -------------------------------------------------------------- */
  --bs-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --bs-fs-display: clamp(2.3rem, 1.35rem + 4.1vw, 3.95rem);
  --bs-fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);
  --bs-fs-h3: clamp(1.08rem, 1rem + 0.42vw, 1.32rem);
  --bs-fs-lead: clamp(1.03rem, 0.97rem + 0.42vw, 1.22rem);
  --bs-fs-body: 1rem;
  --bs-fs-sm: 0.875rem;
  --bs-fs-xs: 0.785rem;
  --bs-fs-eyebrow: 0.72rem;
  --bs-lh-tight: 1.06;
  --bs-lh-head: 1.18;
  --bs-lh-body: 1.62;
  /* --- space / shape ----------------------------------------------------- */
  --bs-container: 1140px;
  --bs-gutter: clamp(20px, 4vw, 40px);
  --bs-section-y: clamp(60px, 7.5vw, 108px);
  /* One prose measure for the whole site. 680px is ~68ch at the 16px base
     size and ~55ch at the lead size, so headings, leads, section subs and
     body prose all break on the same right edge. Never set a measure in
     `ch`: `ch` resolves against the element's own font-size, so 62ch on a
     19.5px lead and 60ch on a 16px wrapper produced two different widths,
     which is what made stacked blocks look unaligned. */
  --bs-measure: 42.5rem;
  /* Vertical rhythm. One unit between blocks, two units between groups. */
  --bs-flow: clamp(16px, 1.4vw, 18px);
  --bs-radius-sm: 5px;
  --bs-radius: 10px;
  --bs-radius-lg: 14px;
  /* every interactive control (buttons, chips, tags, pagers) is a full pill */
  --bs-radius-pill: 999px;
  --bs-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  --bs-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.48);
  --bs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bs-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bs-header-h: 60px;
}

.bs-editorial, .site-header, .site-footer {
  --bs-bg: #000000;
  --bs-bg-raise: #0d1016;
  --bs-surface: #0d1016;
  --bs-surface-2: #11151c;
  --bs-surface-3: #161b24;
  --bs-text: #ffffff;
  --bs-text-2: #a5adbb;
  --bs-text-3: #909aaa;
  --bs-text-on-accent: #000000;
  --bs-accent: #f06400;
  --bs-accent-bright: #ff8c3a;
  --bs-accent-soft: rgba(240, 100, 0, .13);
  --bs-accent-line: rgba(240, 100, 0, .38);
}

/* Readable supporting text, with a clearer hierarchy across the main pages. */
.bs-editorial {
  --bs-container: 1200px;
  --bs-fs-display: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --bs-radius: 5px;
  --bs-radius-lg: 5px;
  --bs-fs-xs: .875rem;
  --bs-fs-sm: .9375rem;
  --bs-fs-eyebrow: .875rem;
  --bs-text-2: #b8c0cc;
  --bs-text-3: #a5adbb;
}

@media (min-width: 1440px) {
  :root { --bs-container: 1180px; }
}

/* ==========================================================================
   BASE AND ACCESSIBILITY
   --------------------------------------------------------------------------
   Page-level base styles, scoped to `body.bs-page` so a legacy page keeps its
   own. The focus ring and the skip link are global on purpose.
   ========================================================================== */

body.bs-page {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-body);
  line-height: var(--bs-lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.bs-page *, body.bs-page *::before, body.bs-page *::after { box-sizing: border-box; }

/* The base element rules below are wrapped in :where(), which contributes zero
   specificity. They therefore resolve at plain element specificity (0,0,1) and
   every component class in this sheet overrides them without !important or
   selector inflation. They still only ever match inside `body.bs-page`. */
:where(body.bs-page) h1,
:where(body.bs-page) h2,
:where(body.bs-page) h3,
:where(body.bs-page) h4,
:where(body.bs-page) h5,
:where(body.bs-page) h6 {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  font-weight: 600;
  letter-spacing: -0.017em;
  line-height: var(--bs-lh-head);
  text-wrap: balance;
}

:where(body.bs-page) p,
:where(body.bs-page) ul,
:where(body.bs-page) ol,
:where(body.bs-page) dl,
:where(body.bs-page) figure,
:where(body.bs-page) dd {
  margin: 0;
}

:where(body.bs-page) ul, :where(body.bs-page) ol {
  padding: 0;
  list-style: none;
}

:where(body.bs-page) a {
  color: var(--bs-accent-bright);
  text-decoration: none;
}

:where(body.bs-page) a:hover {
  color: var(--bs-accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(body.bs-page) img, :where(body.bs-page) svg { max-width: 100%; }
:where(body.bs-page) img { height: auto; }

:where(body.bs-page) code,
:where(body.bs-page) kbd,
:where(body.bs-page) samp,
:where(body.bs-page) pre {
  font-family: var(--bs-font-mono);
  font-size: 0.92em;
}

:where(body.bs-page) button,
:where(body.bs-page) input,
:where(body.bs-page) select,
:where(body.bs-page) textarea {
  font: inherit;
  color: inherit;
}

:where(body.bs-page) main:focus { outline: none; }

:where(body.bs-page) strong, :where(body.bs-page) b {
  color: var(--bs-text);
  font-weight: 600;
}

html:has(> body.bs-page) { scroll-padding-top: calc(var(--bs-header-h) + 20px); }

/* --- skip link --------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -140%);
  display: inline-block;
  margin: 0;
  padding: 12px 22px;
  border: 1px solid var(--bs-accent);
  border-top: 0;
  border-radius: 0 0 var(--bs-radius) var(--bs-radius);
  background: var(--bs-accent);
  color: var(--bs-text-on-accent);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s var(--bs-ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--bs-text-on-accent);
  text-decoration: none;
}

/* --- focus rings (global on purpose: strictly an a11y improvement) --------
   No border-radius here: this sheet loads after styles.css, so a radius set
   on :focus-visible (same specificity as a class) would flatten every pill
   control the moment it took focus. The outline follows the element's own
   radius instead. */
:focus-visible {
  outline: 2px solid var(--bs-accent-bright);
  outline-offset: 3px;
}

.bs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* progressive-enhancement reveal: JS adds `.is-in` when the block scrolls in.
   Without JS the element is simply visible. `.reveal` alone hides nothing. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--bs-ease-out), transform 0.5s var(--bs-ease-out);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Once-on-entry data reveals keep final measurements available to assistive tools. */
.bs-page .b4-tech-stat > [data-motion-number] {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.bs-page :is(strong, span).bs-motion-number > .bs-motion-final,
.bs-page :is(strong, span).bs-motion-number > .bs-motion-current {
  display: block;
  grid-area: 1 / 1;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.bs-page .bs-motion-final { opacity: 0; }
.bs-page .bs-motion-current { pointer-events: none; }

.bs-page :is(strong, span)[data-motion-number].bs-motion-number {
  display: inline-grid;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   --------------------------------------------------------------------------
   Page frame, section rhythm, opening block and the generic grids.
   ========================================================================== */

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--bs-container) + 2 * var(--bs-gutter));
  margin-inline: auto;
  padding-inline: var(--bs-gutter);
}

.section {
  box-sizing: border-box;
  display: block;
  position: relative;
  padding-block: var(--bs-section-y);
  background: transparent;
}

.section--tight { padding-block: clamp(44px, 5vw, 72px); }

.section--raised {
  background: var(--bs-bg-raise);
  border-block: 1px solid var(--bs-line);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--bs-measure);
  margin-bottom: calc(var(--bs-flow) * 2);
}

.section-title {
  font-size: var(--bs-fs-h2);
  font-weight: 600;
}

.section-sub {
  max-width: var(--bs-measure);
  color: var(--bs-text-2);
  font-size: var(--bs-fs-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- eyebrow: mono, uppercase, accent rule ----------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--bs-accent);
}

/* --- generic responsive grids ------------------------------------------ */
.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hero {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding-block: clamp(48px, 6.5vw, 96px) clamp(40px, 5vw, 72px);
  background: radial-gradient(900px 460px at 12% -10%, rgba(240, 100, 0, 0.075), transparent 62%), var(--bs-bg);
  border-bottom: 1px solid var(--bs-line);
  overflow: hidden;
}

/* faint instrumentation grid: pure CSS, no assets, no animation */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(760px 420px at 20% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(760px 420px at 20% 0%, #000 0%, transparent 78%);
}

.hero-title {
  max-width: 17ch;
  font-size: var(--bs-fs-display);
  font-weight: 700;
  letter-spacing: -0.031em;
  line-height: var(--bs-lh-tight);
}

/* --- vertical rhythm helper -------------------------------------------- */
/* `:where(body.bs-page) p { margin: 0 }` means prose blocks need an explicit
   gap owner. `.stack` is that owner; nest it freely. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--bs-flow));
  min-width: 0;
}

.stack--sm { --stack-gap: calc(var(--bs-flow) * 0.55); }

/* --- asymmetric two-column: main argument + supporting panel ----------- */
/* `minmax(0, …)` on purpose: a bare `1fr` floors the track at its min-content
   width, so one nowrap `.spec dd` would push the whole page wide at 375px. */
.grid--aside {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Stacked state: both blocks keep the page measure, so the panel never runs
   wider than the prose it supports. */
.grid--aside > * { max-width: var(--bs-measure); }

/* `.card` is `height: 100%` so cards in a `.grid--3` row match each other.
   In a `.grid--aside` that fights `align-items: start`: the card stretched to
   the prose column's height and read as a long half-empty box. Here the card
   is a panel, not a row member, so it hugs its own content. */
.grid--aside > .card, .grid--aside > .stack > .card { height: auto; }

.bs-editorial .hero-title {
  max-width: 19ch;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.05em;
}

.bs-editorial .section-title { font-weight: 500; letter-spacing: -.035em; }
.bs-editorial .section { padding-block: clamp(56px, 6.5vw, 92px); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1150px) {

  /* The prose track is the measure itself, not a fraction of the container, so
     the left column lands on exactly the same right edge as `.section-head`,
     `.lead` and `.section-sub` above it. The aside takes what is left.
     Two columns start at 1150px, the width where the measure plus a 350px+
     aside both fit. Below that the blocks stack, which reads better than a
     680px column next to a 290px one. */
  .grid--aside {
    grid-template-columns: minmax(0, var(--bs-measure)) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
  }

  .grid--aside > * { max-width: none; }
}

@media (min-width: 901px) {

  /* Balanced wrapping produces even line lengths without the exaggerated word
     spacing of full justification. Use it for short marketing copy; article
     paragraphs remain natural, left-aligned reading text. */
  .section-sub {
    text-align-last: left;
    text-justify: inter-word;
    text-align: left;
    text-wrap: balance;
    hyphens: none;
  }

  .bs-editorial .hero-title { max-width: 22ch; }
  .bs-editorial .section > .container > .stack > .lead { max-width: 630px; }
}

/* ==========================================================================
   TYPE HELPERS
   --------------------------------------------------------------------------
   Measure, colour and size helpers for prose.
   ========================================================================== */

.lead {
  max-width: var(--bs-measure);
  color: var(--bs-text-2);
  font-size: var(--bs-fs-lead);
  line-height: 1.58;
}

.mono {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.accent { color: var(--bs-accent-bright); }
.text-dim { color: var(--bs-text-3); }

.note {
  max-width: var(--bs-measure);
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.55;
}

/* Inside a card, panel or figure the container already sets the measure. */
.card .note, .chart-figure .note, .spec-list + .note { max-width: none; }

/* Same two steps for a block that is not inside a `.stack`. Use these instead
   of an inline `margin-top`, so every gap on the page comes from one scale. */
.flow-t { margin-top: var(--bs-flow); }

.lead, .note { text-wrap: pretty; }
.bs-editorial .lead { max-width: 640px; line-height: 1.65; }

/* Inline links remain identifiable without relying on their color. */
.bs-page .note a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 901px) {

  .lead {
    text-align-last: left;
    text-justify: inter-word;
    text-align: left;
    text-wrap: balance;
    hyphens: none;
  }
}

/* ==========================================================================
   BUTTONS AND LINKS
   --------------------------------------------------------------------------
   Every clickable shape: the two system buttons, the editorial button and
   the inline links.
   ========================================================================== */

.btn-primary, .btn-secondary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 13px 26px;
  border-radius: var(--bs-radius-pill);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--bs-ease), border-color 0.18s var(--bs-ease), color 0.18s var(--bs-ease), transform 0.18s var(--bs-ease);
}

.btn-primary {
  border: 1px solid var(--bs-accent);
  background: var(--bs-accent);
  color: var(--bs-text-on-accent);
}

.btn-primary:hover {
  border-color: var(--bs-accent-deep);
  background: var(--bs-accent-deep);
  color: var(--bs-text-on-accent);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-secondary {
  border: 1px solid var(--bs-line-strong);
  background: transparent;
  color: var(--bs-text);
}

.btn-secondary:hover {
  border-color: var(--bs-accent-line);
  background: var(--bs-accent-soft);
  color: var(--bs-text);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- inline "read more" link ------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bs-accent-bright);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  text-decoration: none;
}

.link-arrow::after {
  content: "\2192";
  font-family: var(--bs-font-mono);
  transition: transform 0.18s var(--bs-ease);
}

.link-arrow:hover {
  color: var(--bs-accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-arrow:hover::after { transform: translateX(3px); }

.link-quiet {
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  text-decoration: none;
}

.link-quiet:hover {
  color: var(--bs-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bs-form-actions .btn-primary { flex: none; }

.person-card .link-arrow {
  margin-top: auto;
  padding-top: 4px;
}

.bs-editorial .btn-primary, .bs-editorial .btn-secondary { border-radius: 4px; }

.b3-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 15px 20px;
  border: 1px solid #f37936;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.b3-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  color: #ffffff;
}

.bs-editorial .btn-primary, .b3-button {
  background: #f06400;
  border-color: #f06400;
  color: #000000;
}

.bs-editorial .btn-primary:hover, .b3-button:hover {
  background: #ff8c3a;
  border-color: #ff8c3a;
  color: #000000;
}

.b3-text-link:hover { color: #ff8c3a; }

@media (min-width: 900px) {
  .cta-band .btn-row { flex: none; }
}

@media (hover: none) {

  /* kill sticky hover states on touch devices */
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

/* ==========================================================================
   SITE HEADER AND NAV
   --------------------------------------------------------------------------
   The sticky bar, the brand mark, the link row and the mobile panel.
   ========================================================================== */

/* One bar for every page: 60px tall, a translucent blurred background so the
   page shows through as it scrolls under it, and a hairline under it. Legacy
   pages set their own `body { font-family: Roboto }`, which the bar would
   otherwise inherit, so the family is named here too. */
.site-header {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  --bs-fs-sm: .9375rem;
  line-height: var(--bs-lh-body);
  background: rgba(0, 0, 0, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

.site-header-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-inline: auto;
  min-height: 60px;
  padding-block: 6px;
  gap: 24px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
}

.site-brand:hover { text-decoration: none; }
.site-brand-mark { display: block; height: auto; max-width: none; width: 128px; }

.site-nav {
  box-sizing: border-box;
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

.site-nav-list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-item {
  margin: 0;
  padding: 0;
}

/* The same line box on legacy articles and on design-system pages, so the bar
   is one height everywhere. */
.site-nav-link {
  display: inline-block;
  padding: 5px 0;
  border: 0;
  background: none;
  color: var(--bs-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.62;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s var(--bs-ease);
}

.site-nav-link:hover {
  color: var(--bs-text);
  text-decoration: none;
}

.site-nav-link[aria-current="page"] {
  color: var(--bs-text);
  box-shadow: inset 0 -2px 0 var(--bs-accent);
}

.nav-cta:hover { text-decoration: none; background: #ff8c3a; border-color: #ff8c3a; color: #000000; }

/* --- hamburger (distinct class name: legacy .nav-toggle is still live) ---
   Three bars and nothing else. The 42px box is the touch target, not a
   control, so it draws no border and no fill. The radius is left for the
   focus ring. */
.site-nav-toggle {
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  order: 2;
  width: 42px;
  height: 42px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--bs-radius-pill);
  background: none;
  color: var(--bs-text);
  cursor: pointer;
}

.site-nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--bs-accent);
  transition: transform 0.22s var(--bs-ease), opacity 0.14s linear;
}

.site-header.is-nav-open .site-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-nav-open .site-nav-toggle-bar:nth-child(2) { opacity: 0; }

.site-header.is-nav-open .site-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header .container { max-width: 1280px; }

.nav-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: 0;
  border: 1px solid #f06400;
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s var(--bs-ease), border-color 0.18s var(--bs-ease);
  background: #f06400;
  color: #000000;
  box-shadow: none;
}

.site-header .nav-cta > span { display: inline-block; flex: 0 0 14px; width: 14px; text-align: center; }

/* An opaque bar over the moving field on the pages that keep
   the legacy shell. The editorial shell keeps the blur. */
.bs-network-page .site-header { background-color: #000; }

.bs-page .site-header { background-color: rgba(0, 0, 0, .74); }

/* fixed CTA geometry and accessible contact states. */
.site-header .nav-cta {
  box-sizing: border-box;
  justify-content: center;
  font-family: var(--bs-font-sans);
  font-weight: 600;
  min-width: 0;
  min-height: 36px;
  padding: 7px 15px 7px 16px;
  gap: 10px;
  border-radius: var(--bs-radius-pill);
  font-size: 13px;
}

/* The panel drops in from under the bar, so it reads as the bar opening
   rather than a second surface appearing. */
@keyframes bs-nav-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- the 900px panel ------------------------------------------------------
   Every desktop rule for these selectors is above, so this block is the last
   word on each of them. The `.site-header` prefix is what makes it win: the
   nav, the links and the CTA all have unprefixed base rules, and an
   unprefixed copy here would only tie with them. */
@media (max-width: 900px) {
  .site-brand-mark { width: 120px; }

  .site-nav-toggle { display: flex; }

  .site-header-inner { flex-wrap: wrap; min-height: 56px; padding-block: 4px; }

  /* The panel is the header sheet continued, so it takes no background and no
     border of its own. The bar's blurred black runs straight through it. */
  .site-header .site-nav {
    display: none;
    /* order must beat the toggle's, or the panel wraps above the button */
    order: 3;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 6px 0 18px;
  }

  /* One soft shadow lifts the open sheet off the page, in place of the
     hairlines it used to draw around every link. */
  .site-header.is-nav-open { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }

  .site-header.is-nav-open .site-nav {
    display: flex;
    animation: bs-nav-open .22s var(--bs-ease) both;
  }

  .site-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Reading size, not bar size: the panel is the whole screen, so the links
     get the room the bar cannot give them. */
  .site-header .site-nav-link {
    display: block;
    padding: 12px 0;
    color: var(--bs-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Both carry .site-header for the same reason: their desktop rules tie with
     the plain rule above, which comes later and would otherwise win. */
  .site-header .site-nav-link:hover { color: #ffffff; }

  .site-header .site-nav-link[aria-current="page"] {
    box-shadow: none;
    color: var(--bs-accent-bright);
  }

  .site-header .nav-cta {
    width: 100%;
    margin-top: 12px;
    min-height: 46px;
    font-size: 15px;
  }

  /* Without the script the panel is the only nav there is, so it stays open. */
  .site-header:not(.has-nav-js) .site-nav { display: flex; }
  .site-header:not(.has-nav-js) .site-nav-toggle { display: none; }

  /* Reserve the collapsed mobile header while its script is loading. */
  .site-header:not(.has-nav-js):not(.has-nav-fallback) .site-nav { display: none; }
}

/* ==========================================================================
   SITE FOOTER
   --------------------------------------------------------------------------
   The five-column footer and its social marks.
   ========================================================================== */

.site-footer-logo img {
  display: block;
  width: 150px;
  height: auto;
  max-width: none;
}

.site-footer {
  box-sizing: border-box;
  display: block;
  position: static;
  width: 100%;
  margin: 0;
  /* all four sides, explicitly: legacy `footer { padding: 40px 20px 20px }`
     would otherwise supply the inline padding and shift the container. */
  padding: clamp(48px, 6vw, 76px) 0 0;
  border-top: 1px solid var(--bs-line);
  color: var(--bs-text-2);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
  text-align: left;
  background: #000000;
}

.site-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 52px);
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 34ch;
}

.site-footer-logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
}

.site-footer-tagline {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
  text-wrap: pretty;
}

.site-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.site-footer-heading {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-list li {
  margin: 0;
  padding: 0;
}

.site-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 3px;
  box-shadow: none;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.16s var(--bs-ease);
}

.site-footer-link:hover {
  background: none;
  box-shadow: none;
  transform: none;
  color: var(--bs-accent-bright);
  text-decoration: none;
}

.social-icon-img, .social-icon-svg {
  flex: none;
  display: block;
  width: 18px;
  height: 18px;
}

.social-icon-svg {
  color: var(--bs-text-3);
  transition: color 0.16s var(--bs-ease);
}

/* knock-outs inside a solid glyph take the surface colour they sit on */
.social-icon-svg .icon-knockout { fill: var(--bs-bg-raise); }

.social-icon-svg .icon-knockout-stroke {
  fill: none;
  stroke: var(--bs-bg-raise);
}

.site-footer-link:hover .social-icon-svg { color: var(--bs-accent-bright); }

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 18px 22px;
  border-top: 1px solid var(--bs-line);
}

.site-footer-copy, .site-footer-meta {
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.02em;
}

.bs-home .site-footer { background: transparent; }
.bs-network-page > .site-footer { background-color: transparent; }

@media (min-width: 1000px) {
  .site-footer-top { align-items: start; grid-template-columns: minmax(0, 0.72fr) minmax(0, 2.28fr); }
}

@media (min-width: 720px) {

  /* Five link columns: Products, Technology, Resources, Company and the
     Connect/social list. The base grid builds four, so step the column count and
     give the link area more of the row. */
  .site-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {

  .site-footer-cols {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 30px);
  }
}

@media screen {
  .bs-network-page:not(.bs-home) > .site-footer { padding-bottom: 84px; }
}

/* ==========================================================================
   CARDS AND GENERIC COMPONENTS
   --------------------------------------------------------------------------
   Surfaces that hold content: cards, panels, the contact form, the modals,
   people and investor cards, social chips.
   ========================================================================== */

.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
  color: var(--bs-text);
}

.card-title {
  font-size: var(--bs-fs-h3);
  font-weight: 600;
}

.card-body {
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  line-height: 1.62;
}

.card--hover {
  transition: border-color 0.2s var(--bs-ease), background-color 0.2s var(--bs-ease), transform 0.2s var(--bs-ease), box-shadow 0.2s var(--bs-ease);
}

.card--hover:hover {
  border-color: var(--bs-line-strong);
  background: var(--bs-surface-2);
  transform: translateY(-3px);
  box-shadow: var(--bs-shadow-lift);
}

/* --- model card -------------------------------------------------------- */
.model-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
  transition: border-color 0.2s var(--bs-ease), background-color 0.2s var(--bs-ease);
}

.model-card:hover {
  border-color: var(--bs-line-strong);
  background: var(--bs-surface-2);
}

.cta-band {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: clamp(28px, 3.6vw, 46px);
  border: 1px solid var(--bs-accent-line);
  border-radius: var(--bs-radius-lg);
  background: radial-gradient(700px 320px at 8% 0%, rgba(240, 100, 0, 0.10), transparent 70%), var(--bs-surface);
}

.cta-band-title {
  max-width: 24ch;
  font-size: var(--bs-fs-h2);
  font-weight: 600;
}

.cta-band-body {
  max-width: var(--bs-measure);
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-lead);
  line-height: 1.55;
}

/* --- static inline SVG comparison chart -------------------------------- */
.chart-figure {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
}

/* --- contact form ------------------------------------------------------ */
.bs-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  min-width: 0;
}

.bs-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.bs-label {
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  line-height: 1.45;
}

.bs-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  font-size: 0.94rem;
  line-height: 1.5;
  /* Selects ignore line-height, so every control gets the text inputs' height. */
  min-height: calc(1.5em + 24px);
  transition: border-color 0.18s var(--bs-ease), background-color 0.18s var(--bs-ease);
}

.bs-input::placeholder {
  color: var(--bs-text-3);
  opacity: 1;
}

.bs-input:hover { border-color: var(--bs-accent-line); }

.bs-input:focus {
  border-color: var(--bs-accent);
  background: var(--bs-bg-raise);
  outline: none;
}

.bs-input:focus-visible {
  outline: 2px solid var(--bs-accent-bright);
  outline-offset: 2px;
}

.bs-textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.bs-help {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.55;
}

.bs-form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* reCAPTCHA is a fixed 304px frame that fits every layout. Hidden overflow
   clips the widget's invisible helper element, which would otherwise add a
   scroll bar. */
.captcha-container {
  max-width: 100%;
  overflow: hidden;
}

/* --- success / error modals (driven by js/main.js) --------------------- */
/* main.js toggles `display: flex` and animates with the `fadeIn` / `fadeOut`
   keyframes below. Those two names are also defined in the legacy
   css/styles.css with identical bodies, so redefining them is a no-op there. */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 9, 0.74);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0;
  padding: 26px 30px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-lg);
  background: var(--bs-surface-2);
  box-shadow: var(--bs-shadow-lift);
  color: var(--bs-text);
}

.modal-content p {
  margin: 0;
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
}

.modal-content.success { border-color: rgba(76, 175, 80, 0.45); }
.modal-content.success p { color: #7fd18b; }
.modal-content.error { border-color: rgba(244, 67, 54, 0.45); }
.modal-content.error p { color: #f4948c; }

.close {
  position: absolute;
  top: 6px;
  right: 14px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-sans);
  font-size: 26px;
  line-height: 1.2;
  cursor: pointer;
}

.close:hover { color: var(--bs-text); }

@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}

/* --- founder cards (/company/) ----------------------------------------- */
.person-grid > li, .investor-grid > li {
  display: flex;
  min-width: 0;
}

.person-card {
  align-items: flex-start;
  gap: 16px;
}

.person-photo {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid var(--bs-line-strong);
  object-fit: cover;
}

.person-role {
  margin: 0;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.03em;
  line-height: 1.45;
}

/* --- investor cards (/company/) ---------------------------------------- */
.investor-card {
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-block: clamp(26px, 3vw, 36px);
  color: var(--bs-text);
  text-align: center;
  text-decoration: none;
}

.investor-card:hover, .investor-card:focus-visible {
  color: var(--bs-text);
  text-decoration: none;
}

.investor-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
}

.investor-logo-wrap img {
  width: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

/* UTEST ships a dark-on-white mark; knock it out to white for the dark shell */
.investor-logo--invert { filter: brightness(0) invert(1); }

.investor-name {
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: uppercase;
}

/* --- social chips (/company/ contact panel) ---------------------------- */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-size: var(--bs-fs-xs);
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.18s var(--bs-ease), color 0.18s var(--bs-ease);
}

.social-chip:hover {
  border-color: var(--bs-accent-line);
  color: var(--bs-text);
  text-decoration: none;
}

.social-chip img, .social-chip svg {
  flex: none;
  display: block;
}

/* keep the Reddit mark's cut-outs matched to the chip surface */
.social-chip svg .icon-knockout { fill: var(--bs-surface-2); }

.social-chip svg .icon-knockout-stroke { stroke: var(--bs-surface-2); }
.card-body, .cta-band-body { text-wrap: pretty; }
.bs-editorial .card { box-shadow: none; background-image: none; }

.bs-editorial .modal-content.success, .bs-editorial .modal-content.error {
  border-color: var(--bs-accent-line);
}

.bs-editorial .modal-content.success p { color: #ffffff; }
.bs-editorial .modal-content.error p { color: #ff8c3a; }
.bs-page .modal-content { padding-top: 55px; }

.bs-page .modal-content .close {
  display: grid;
  place-items: center;
  top: 5px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: var(--bs-radius-pill);
}

.bs-page .modal-content .close:hover { background: rgba(240,100,0,.13); color: #ff8c3a; }
.bs-page .modal-content .close:focus-visible { outline: 2px solid #ff8c3a; outline-offset: 0; }
.bs-page .bs-form [role="status"] { min-height: 1.6em; color: #fff; font-size: 13px; line-height: 1.6; }
.bs-page .bs-form [aria-invalid="true"] { border-color: #ff8c3a; }
.bs-page .card-body a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 900px) {

  .cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
  }

  .cta-band-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
}

@media (hover: none) {
  .card--hover:hover { transform: none; }
}

@media (max-width: 420px) {

  .captcha-container .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
    height: 66px;
  }
}

@media (min-width: 901px) {

  .cta-band-body {
    text-align-last: left;
    text-justify: inter-word;
    text-align: left;
    text-wrap: balance;
    hyphens: none;
  }
}

/* ==========================================================================
   DATA COMPONENTS
   --------------------------------------------------------------------------
   Anything that carries a measurement: tables, spec rows, tags, stat blocks,
   bars and score charts.
   ========================================================================== */

/* --- spec list: mono key/value rows inside data cards ------------------ */
.spec-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-bg);
  overflow: hidden;
}

.spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--bs-line);
}

.spec:last-child { border-bottom: 0; }

.spec dt {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.35;
}

/* Mono sits tighter than the sans label at the same size, so the row height
   is set by the label and the value can lose the extra leading. */
.spec dd {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.spec dd .unit {
  color: var(--bs-text-3);
  font-weight: 400;
}

/* --- tag / badge ------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-3);
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 16px;
  border-top: 1px solid var(--bs-line);
  position: relative;
}

.stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--bs-accent);
}

/* --- delta: `46.23 GB -> 15.49 GB` ------------------------------------- */
.delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
}

.size-bars-caption {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.55;
}

.size-bars-caption a {
  color: var(--bs-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.size-bars-caption a:hover { color: var(--bs-accent-bright); }

/* --- table ------------------------------------------------------------- */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--bs-line-strong) transparent;
}

.data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--bs-fs-sm);
}

.data-table th, .data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bs-line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td { color: var(--bs-text-2); }

.data-table td.num, .data-table th.num {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr[hidden] { display: none; }

/* `.spec dd` is nowrap by default (right for numbers, wrong for prose values
   like "llama.cpp · ComfyUI · vLLM-Omni"). Opt those lists out. */
.spec-list--wrap .spec dd {
  white-space: normal;
  overflow-wrap: anywhere;
}

.bs-page .table-wrap:focus-visible { outline: 2px solid #ff8c3a; outline-offset: 4px; }

/* Keep accessible link notices inside horizontally scrolling tables. */
.bs-page .table-wrap { position: relative; }

/* ==========================================================================
   HOME HERO
   --------------------------------------------------------------------------
   The opening card deck on Home: two cards, their tab strip, both cartoons
   and the scoreboard they share. The keyframes live with the drawings.
   ========================================================================== */

.b3-hero { padding-top: 72px; }

.b3-hero-grid {
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  gap: 18px;
  align-items: center;
  padding-bottom: 58px;
}

.b3-hero-copy { position: relative; z-index: 1; padding-bottom: 10px; }

.b3-proof-choice {
  padding: 11px 16px;
  border: 1px solid var(--bs-line-strong);
  border-radius: 3px;
  font-family: var(--bs-font-sans);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: background .2s, color .2s;
  background: transparent;
  color: #ffffff;
}

.b3-proof-choice:hover { border-color: #f06400; }

.b3-proof-choice[aria-pressed="true"] {
  background: #f06400;
  border-color: #f06400;
  color: #000000;
}

.b3-scene-controls .b3-proof-choice { padding: 10px 15px; }

.b3-llm-proof {
  margin: 0;
  min-width: 0;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,.2);
  scroll-margin-top: 100px;
}

.b3-llm-proof [data-llm-controls][hidden] { display: none; }
.b3-llm-method { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.b3-llm-method summary { padding: 13px 0 0; color: #a5adbb; cursor: pointer; }
.b3-llm-method > div { padding-top: 4px; color: #a5adbb; line-height: 1.8; }
.b3-llm-method p { margin: 12px 0 0; }

/* A quiet network behind the opening, with a static no-script fallback. */
/* Let the opening composition fill the screen, with room to grow on small displays. */
.bs-home .b3-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 79px);
}

/* The original precision gives each language-model result a visible baseline. */
.b4-weight-comparison {
  display: grid;
  grid-template-columns: minmax(0,1fr) 112px;
  gap: 28px;
  align-items: center;
  margin: 0 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.b3-page-network {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background-image: url('/images/hero-network.svg?v=3.7');
  background-position: center top;
  background-size: max(100%, 900px) auto;
  background-repeat: repeat-y;
  opacity: .78;
  -webkit-mask-image: radial-gradient(ellipse at 48% 40%, rgba(0,0,0,.32), rgba(0,0,0,.78) 65%, #000);
  mask-image: radial-gradient(ellipse at 48% 40%, rgba(0,0,0,.32), rgba(0,0,0,.78) 65%, #000);
}

.b3-page-network.is-network-ready { background-image: none; }
.b3-page-network-canvas { display: block; width: 100%; height: 100%; }

/* Revision 2: published image proof and a stronger visual opening. */
.bs-home .b3-hero-grid {
  grid-template-columns: .95fr 1.05fr;
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
}

.bs-home .b3-hero > .container:last-child { width: 100%; }

.bs-page :is(.btn-primary, .btn-secondary, .b3-button, .b3-proof-choice, .b3-selector-mode, .fnd-opt, .fnd-alt, .fnd-copy, .cat-chip, .sel-btn) {
  border-radius: var(--bs-radius-pill);
}

/* ==========================================================================
   Hero cartoon: the idea in one throw
   --------------------------------------------------------------------------
   One loop lasts --bs-cartoon-loop (12s), so every keyframe percentage below
   maps to a fixed moment in the story. Only transform and opacity animate,
   plus scaleX on the screen bar. Rotations use transform-box: fill-box with an
   invisible .b3-cartoon-pivot rect that puts the pivot on a box anchor.

   The SVG's default state is the FINAL frame (small model out, both javelins
   in the bullseye, short orange bar on the screen). Reduced motion, print, and
   a browser without CSS animation therefore show the finished scene.

     t (s)    %        what happens
     0.0      0        scene fades in, big model idles at the left
     0.6      5        big model walks right
     1.8      15       it reaches the scanner, the beam starts
     3.2      26.667   scan ends, screen bar has settled short and orange
     3.8      31.667   small ByteShape model has popped out of the chute
     4.4      36.667   javelins are in both hands, both wind up
     4.8      40       small model releases
     5.3      44.167   fast javelin lands, target wobbles, small model hops
     7.4      61.667   big model releases after a long strain
     9.6      80       slow javelin lands in the same bullseye
     10.4     86.667   bullseye glow fades and SAME SPOT reads out
     11.7     97.5     hold ends, scene fades out
     12.0     100      loop restarts

   In the hero deck the scene runs once with no fade-out (bs-deck-scene) and
   the deck hands over 12.6s in (data-deck-duration on the card).
   ========================================================================== */
.b3-hero-cartoon {
  --bs-cartoon-loop: 12s;
  margin: 28px 0 0;
  min-width: 0;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,.2);
}

.b3-cartoon { display: block; width: 100%; height: auto; overflow: hidden; }

.b3-cartoon-caption {
  margin: 0;
  padding: 10px 20px 16px;
  color: #a5adbb;
  font-size: 11px;
  line-height: 1.5;
}

/* --- flat vector palette ----------------------------------------------- */
.b3-cartoon-pivot { fill: none; stroke: none; pointer-events: none; }

.b3-cartoon-ground { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1; }
.b3-cartoon-body-big { fill: #626a78; stroke: #fff; stroke-width: 2; }
.b3-cartoon-body-small { fill: #f06400; stroke: #fff; stroke-width: 2; }

.b3-cartoon-limb {
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b3-cartoon-limb--small { stroke-width: 2.4; }
.b3-cartoon-eye { fill: #fff; }
.b3-cartoon-mouth { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.b3-cartoon-mouth--small { stroke-width: 1.8; }

.b3-cartoon-chip {
  fill: #fff;
  font-family: var(--bs-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-anchor: middle;
}

.b3-cartoon-label {
  fill: #a5adbb;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-anchor: middle;
}

.b3-cartoon-label--ours {
  fill: #ff8c3a;
  animation: bs-cartoon-tag var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-machine { fill: #161b24; stroke: #fff; stroke-width: 2; }
.b3-cartoon-machine-part { fill: #626a78; stroke: #fff; stroke-width: 1.6; }
.b3-cartoon-screen { fill: #0d1016; stroke: rgba(255,255,255,.2); stroke-width: 1; }
.b3-cartoon-screen-track { fill: #626a78; }

.b3-cartoon-screen-bar {
  fill: #f06400;
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: bs-cartoon-screen-bar var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-machine-name {
  fill: #fff;
  font-family: var(--bs-font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  text-anchor: middle;
}

.b3-cartoon-vent { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 2; stroke-linecap: round; }
.b3-cartoon-light { fill: #f06400; }
.b3-cartoon-glow { fill: #f06400; opacity: .55; filter: url(#bs-cartoon-glow); }
.b3-cartoon-lamp { opacity: .45; animation: bs-cartoon-lamp var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-beam-group { opacity: 0; animation: bs-cartoon-beam var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-beam { fill: #f06400; }
.b3-cartoon-beam-wide { fill: #f06400; opacity: .16; }

.b3-cartoon-strain {
  fill: none;
  stroke: #ff8c3a;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-strain var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-target {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-target var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-target-outer { fill: #e9edf4; }
.b3-cartoon-target-mid { fill: #626a78; }
.b3-cartoon-target-eye { fill: #f06400; }
.b3-cartoon-target-stand { fill: none; stroke: #626a78; stroke-width: 4; stroke-linecap: round; }

.b3-cartoon-hitglow {
  fill: #f06400;
  opacity: 0;
  filter: url(#bs-cartoon-glow);
  animation: bs-cartoon-hitglow var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-shaft { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.b3-cartoon-shaft--small { stroke-width: 1.8; }
.b3-cartoon-tip { fill: #f06400; }
.b3-cartoon-held { opacity: 0; }
.b3-cartoon-flight { transform-box: fill-box; transform-origin: 50% 50%; }

.b3-cartoon-big-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-big-lean var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-big-arm {
  transform-box: fill-box;
  transform-origin: 0% 0%;
  animation: bs-cartoon-big-arm var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-small-pop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-cartoon-pop var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-small-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-cartoon-small-lean var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-small-arm {
  transform-box: fill-box;
  transform-origin: 0% 0%;
  animation: bs-cartoon-small-arm var(--bs-cartoon-loop) linear infinite;
}

.b3-cartoon-samespot {
  fill: #ff8c3a;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-anchor: middle;
  animation: bs-cartoon-samespot var(--bs-cartoon-loop) linear infinite;
}

/* --- the loop ---------------------------------------------------------- */
.b3-cartoon-scene { animation: bs-cartoon-scene var(--bs-cartoon-loop) linear infinite; }

.b3-cartoon-big-walk { animation: bs-cartoon-walk var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-big-bob { animation: bs-cartoon-bob var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-leg-a { animation: bs-cartoon-leg-a var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-leg-b { animation: bs-cartoon-leg-b var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-small-hop { animation: bs-cartoon-hop var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-held-big { animation: bs-cartoon-held-big var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-held-small { animation: bs-cartoon-held-small var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-javelin-fast { animation: bs-cartoon-javelin-fast var(--bs-cartoon-loop) linear infinite; }
.b3-cartoon-javelin-slow { animation: bs-cartoon-javelin-slow var(--bs-cartoon-loop) linear infinite; }

@keyframes bs-cartoon-scene {
0% { opacity: 0; }
2.5%, 97.5% { opacity: 1; }
100% { opacity: 0; }
}

@keyframes bs-cartoon-walk {
0% { transform: translateX(-58px); }
5% { transform: translateX(-58px); animation-timing-function: ease-in-out; }
15%, 100% { transform: translateX(0); }
}

@keyframes bs-cartoon-bob {
0%, 5% { transform: translateY(0); }
2.5% { transform: translateY(-1.5px); }
6.25% { transform: translateY(-3px); }
7.5% { transform: translateY(0); }
8.75% { transform: translateY(-3px); }
10% { transform: translateY(0); }
11.25% { transform: translateY(-3px); }
12.5% { transform: translateY(0); }
13.75% { transform: translateY(-3px); }
15%, 100% { transform: translateY(0); }
}

@keyframes bs-cartoon-leg-a {
0%, 5% { transform: translate(0, 0); }
6.25% { transform: translate(7px, -2.5px); }
7.5% { transform: translate(0, 0); }
8.75% { transform: translate(-7px, 0); }
10% { transform: translate(0, 0); }
11.25% { transform: translate(7px, -2.5px); }
12.5% { transform: translate(0, 0); }
13.75% { transform: translate(-7px, 0); }
15%, 100% { transform: translate(0, 0); }
}

@keyframes bs-cartoon-leg-b {
0%, 5% { transform: translate(0, 0); }
6.25% { transform: translate(-7px, 0); }
7.5% { transform: translate(0, 0); }
8.75% { transform: translate(7px, -2.5px); }
10% { transform: translate(0, 0); }
11.25% { transform: translate(-7px, 0); }
12.5% { transform: translate(0, 0); }
13.75% { transform: translate(7px, -2.5px); }
15%, 100% { transform: translate(0, 0); }
}

@keyframes bs-cartoon-beam {
0%, 15% { transform: translateX(0); opacity: 0; }
15.6% { transform: translateX(-6px); opacity: 1; }
18.5% { transform: translateX(-102px); opacity: 1; }
21.2% { transform: translateX(0); opacity: 1; }
24.2% { transform: translateX(-102px); opacity: 1; }
26.1% { transform: translateX(-40px); opacity: 1; }
26.667%, 100% { transform: translateX(0); opacity: 0; }
}

@keyframes bs-cartoon-lamp {
0%, 15% { opacity: .45; }
16% { opacity: 1; }
17.6% { opacity: .35; }
19.2% { opacity: 1; }
20.8% { opacity: .35; }
22.4% { opacity: 1; }
24% { opacity: .35; }
25.4% { opacity: 1; }
26.667%, 100% { opacity: .45; }
}

@keyframes bs-cartoon-screen-bar {
0%, 15% { transform: scaleX(3.667); opacity: 0; }
15.6% { transform: scaleX(3.667); opacity: 1; }
18% { transform: scaleX(2.2); opacity: 1; }
19.4% { transform: scaleX(2.5); opacity: 1; }
21.4% { transform: scaleX(1.5); opacity: 1; }
22.8% { transform: scaleX(1.72); opacity: 1; }
24.4% { transform: scaleX(1.06); opacity: 1; }
25.5% { transform: scaleX(1.22); opacity: 1; }
26.667%, 100% { transform: scaleX(1); opacity: 1; }
}

@keyframes bs-cartoon-pop {
0%, 26.667% { transform: translateY(-16px) scale(0); opacity: 0; }
27.2% { transform: translateY(-14px) scale(.25); opacity: 1; }
29.4% { transform: translateY(-5px) scale(1.15); opacity: 1; }
30.8% { transform: translateY(0) scale(.94); opacity: 1; }
31.667%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bs-cartoon-hop {
0%, 44.167% { transform: translateY(0); }
45.4% { transform: translateY(-10px); }
46.7% { transform: translateY(0); }
47.9% { transform: translateY(-5px); }
49.2%, 100% { transform: translateY(0); }
}

@keyframes bs-cartoon-small-lean {
0%, 36.667% { transform: rotate(0); }
39.2% { transform: rotate(-16deg); }
40.3% { transform: rotate(9deg); }
42%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-small-arm {
0%, 36.667% { transform: rotate(22deg); }
39.2% { transform: rotate(-118deg); }
40% { transform: rotate(-64deg); }
40.9% { transform: rotate(34deg); }
42.2% { transform: rotate(10deg); }
44%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-big-lean {
0%, 36.667% { transform: rotate(0); }
61.667% { transform: rotate(-13deg); }
63.4% { transform: rotate(10deg); }
66%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-big-arm {
0%, 36.667% { transform: rotate(20deg); }
40.5% { transform: rotate(-62deg); }
61.667% { transform: rotate(-125deg); }
62.6% { transform: rotate(-58deg); }
63.4% { transform: rotate(34deg); }
65.2% { transform: rotate(9deg); }
67%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-strain {
0%, 37.5% { opacity: 0; transform: scale(.5); }
42% { opacity: 1; transform: scale(1); }
48% { opacity: .3; transform: scale(.85); }
52% { opacity: 1; transform: scale(1.06); }
57% { opacity: .35; transform: scale(.9); }
60% { opacity: 1; transform: scale(1.12); }
61.667%, 100% { opacity: 0; transform: scale(.6); }
}

@keyframes bs-cartoon-tag {
0%, 26.667% { opacity: 0; }
31.667%, 100% { opacity: 1; }
}

@keyframes bs-cartoon-held-big {
0%, 31.667% { opacity: 0; }
33.5%, 61.5% { opacity: 1; }
61.667%, 100% { opacity: 0; }
}

@keyframes bs-cartoon-held-small {
0%, 31.667% { opacity: 0; }
33.5%, 39.9% { opacity: 1; }
40%, 100% { opacity: 0; }
}

@keyframes bs-cartoon-javelin-fast {
0%, 39.9% { transform: translate(-142px, 37px) rotate(-24deg); opacity: 0; }
40% { transform: translate(-142px, 37px) rotate(-24deg); opacity: 1; }
41.5% { transform: translate(-82px, 15px) rotate(-15deg); opacity: 1; }
43% { transform: translate(-32px, 4px) rotate(-5deg); opacity: 1; }
44.167%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

@keyframes bs-cartoon-javelin-slow {
0%, 61.5% { transform: translate(-357px, -22px) rotate(-70deg); opacity: 0; }
61.667% { transform: translate(-357px, -22px) rotate(-70deg); opacity: 1; }
65.5% { transform: translate(-278px, -68px) rotate(-58deg); opacity: 1; }
70% { transform: translate(-186px, -90px) rotate(-38deg); opacity: 1; }
75% { transform: translate(-93px, -68px) rotate(-16deg); opacity: 1; }
80%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

@keyframes bs-cartoon-target {
0%, 44.167% { transform: rotate(0); }
45.1% { transform: rotate(3.5deg); }
46.1% { transform: rotate(-2.5deg); }
47.1% { transform: rotate(1.4deg); }
48.2%, 80% { transform: rotate(0); }
80.9% { transform: rotate(-3.5deg); }
81.9% { transform: rotate(2.5deg); }
82.9% { transform: rotate(-1.4deg); }
84%, 100% { transform: rotate(0); }
}

@keyframes bs-cartoon-hitglow {
0%, 80% { opacity: 0; }
81.5% { opacity: .8; }
84% { opacity: .25; }
86% { opacity: .6; }
91.667%, 100% { opacity: 0; }
}

@keyframes bs-cartoon-samespot {
0%, 80% { opacity: 0; transform: translateY(4px); }
86.667%, 100% { opacity: 1; transform: translateY(0); }
}

/* The visitor's own pause wins over every part of the loop. */
.b3-hero-cartoon.is-paused .b3-cartoon * { animation-play-state: paused; }

/* ==========================================================================
   Hero stack: the idea above the measured proof
   --------------------------------------------------------------------------
   One card carries the whole opening claim. The cartoon draws the idea, a
   single divider line separates it, and a slim scoreboard measures it. Both
   halves share the same inline padding at every width, so the section labels,
   the numbers and the provenance line stack down one edge. Everything the
   scoreboard does not show sits in the collapsed measurement details.
   ========================================================================== */
/* ==========================================================================
   Hero deck: two cards that play one after the other
   --------------------------------------------------------------------------
   Card 1 answers "does it fit", card 2 answers "how fast". Both sit in one grid
   cell: the front card plays its cartoon once and holds the last frame, then
   the deck hands over at the card's data-deck-duration and the new front card
   starts from its first frame. The back card peeks out below, dimmed, and a
   click brings it forward. At a hand-over the old card recedes into the back
   slot while the new one fades in just above its resting place (is-arriving).

   The outer story figure is only a frame now, so each card carries the surface
   and the shared foot sits under the deck on the card's own inline padding.
   A card animates only while it carries is-playing, so an untouched page, a
   back card and a browser without the controller all show static frames.
   ========================================================================== */
.b3-hero-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border: 0;
}

/* Both halves give up their own frames: the card is the only surface. */
.b3-hero-stack .b3-hero-cartoon { margin: 0; border: 0; background: transparent; }

.b3-hero-stack .b3-llm-proof { border: 0; border-top: 1px solid rgba(255,255,255,.2); }

/* The taller card keeps its first screen: slightly tighter head, caption and details spacing. */
.b3-hero-stack .b3-cartoon-caption { padding: 8px 24px 12px; }

/* --- score row: three numbers ------------------------------------------ */
/* --- speed against the original BF16 run ----------------------------------
   The speed tile carries one comparison line, so the row hangs its tiles from
   the top rather than stretching the shorter two beside it. The ratio keeps
   the small label's size and leading; only the numeral changes face. */
.b3-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 10px 24px 14px;
  align-items: start;
}

.b3-score-stat { display: flex; flex-direction: column; min-width: 0; }

.bs-page .b3-score-stat strong {
  color: #ffffff;
  font: 400 clamp(26px, 2.3vw, 34px)/1.15 var(--bs-font-mono);
  letter-spacing: -.05em;
}

.b3-score-stat:first-child strong { color: #f06400; }
.b3-score-stat > span { margin-top: 6px; color: #a5adbb; font-size: 11px; line-height: 1.45; }

/* --- score foot: one provenance line, one link, the rest folded away --- */
.b3-score-foot { padding: 4px 24px 16px; }

.b3-score-source { margin: 0; color: #a5adbb; font-size: 11.5px; line-height: 1.6; }
.b3-score-source strong { color: #ffffff; font-family: var(--bs-font-mono); font-weight: 400; }

/* Both links read inside their sentence rather than as separate calls to action. */
.b3-score-foot .b3-text-link { gap: 6px; color: #ff8c3a; font-size: 11px; font-weight: 400; }

.b3-score-foot .b3-text-link:hover { color: #ffa565; }
.bs-page .b3-llm-method { font-size: 14px; line-height: 1.7; }
.bs-page .b3-llm-method summary { color: #c7ced9; padding-block: 14px; }
.bs-page .b3-llm-method > div { color: #b8c0cc; }
.bs-page .b4-weight-comparison { grid-template-columns: minmax(0, 1fr) 140px; gap: 24px; }
.bs-page .b3-scene-controls .b3-proof-choice { min-height: 44px; font-size: 14px; }

.bs-page .b3-cartoon-caption, .bs-page .b3-score-source, .bs-page .b3-score-stat > span {
  font-size: 14px;
  line-height: 1.6;
}

.bs-page .b3-score-foot .b3-text-link {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 2026-09-15: the hero results card leads with one takeaway sentence; the
   parameter row and the bits-per-weight bar moved into Measurement details. */
.b5-takeaway {
  margin: 0;
  padding: 10px 24px 2px;
  color: #ffffff;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  text-wrap: balance;
}

.b5-takeaway strong {
  color: #ff8c3a;
  font-family: var(--bs-font-mono);
  font-weight: 500;
  letter-spacing: -.03em;
}

.b3-llm-method .b5-ratio-note strong {
  font-family: var(--bs-font-mono);
  font-weight: 500;
  color: #ffffff;
}

/* --- hero compression bars and same-GPU speed line ------------------------
   Two tracks share one width, so the ByteShape fill reads against the full
   BF16 track. The shared motion helper grows both fills on entry, and the
   ratio tag sits in the empty part of the ByteShape track. */
.b5-compress { display: grid; gap: 9px; padding: 10px 24px 0; }

.b5-compress-row { display: grid; gap: 4px; min-width: 0; }

.b5-compress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
  margin: 0;
  color: #a5adbb;
  font-size: 11.5px;
  line-height: 1.4;
}

.b5-compress-name {
  color: #ffffff;
  font: 500 10px/1.5 var(--bs-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.b5-compress-row--byteshape .b5-compress-name { color: #ff8c3a; }

.b5-compress-spec strong, .b5-compress-spec span[data-llm] {
  color: #ffffff;
  font-family: var(--bs-font-mono);
  font-weight: 500;
}

.b5-compress-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,.08);
}

.b5-compress-fill {
  display: block;
  flex: 0 0 var(--bar-width, 100%);
  height: 100%;
  background: rgba(255,255,255,.42);
}

.b5-compress-row--byteshape .b5-compress-fill { background: #f06400; }
.b3-score-foot .b3-llm-method { margin-top: 10px; }

.b3-hero-stack .b3-llm-proof--story {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
}

.b3-llm-proof--story > .b3-score-foot { border-top: 0; }
.b3-hero-deck { display: grid; padding-bottom: 20px; }

/* Both cards open with their drawing on the same line: no label row, no margin
   and no card padding above the svg, so the ground line never jumps when the
   deck hands over. Any spare height in the grid cell falls to the bottom of the
   shorter card instead of moving its drawing. */
.b3-hero-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0d1016;
  border: 1px solid rgba(255,255,255,.2);
  transition: transform .64s cubic-bezier(.2,.7,.2,1), opacity .42s ease, filter .64s ease;
  will-change: transform;
  padding-top: 0;
}

.b3-hero-card.is-front { transform: none; opacity: 1; z-index: 2; }

.b3-hero-card.is-back {
  transform: translateY(20px) scale(.965);
  opacity: .75;
  filter: brightness(.55);
  z-index: 1;
  cursor: pointer;
}

/* The card coming forward starts a touch below its place and fades in over the
   receding one. Its end state equals is-front, so nothing jumps when the
   controller drops the class after the swap. */
.b3-hero-card.is-arriving { animation: bs-deck-arrive .6s cubic-bezier(.2,.7,.2,1) both; }

@keyframes bs-deck-arrive {
from { opacity: 0; transform: translateY(14px) scale(.985); filter: brightness(.8); }
to { opacity: 1; transform: none; filter: none; }
}

/* Only the playing card runs its loop; every other state shows the static frame. */
.b3-hero-card:not(.is-playing) .b3-cartoon * { animation-name: none; }

.b3-hero-card.is-back .b3-cartoon * { animation-play-state: paused !important; }
.b3-hero-deck.is-paused .b3-cartoon * { animation-play-state: paused !important; }

/* In the deck a cartoon plays once and keeps its last frame during the hold. */
.b3-hero-deck .b3-cartoon * { animation-iteration-count: 1; animation-fill-mode: forwards; }

.b3-hero-deck .b3-cartoon-scene { animation-name: bs-deck-scene; }

@keyframes bs-deck-scene {
0% { opacity: 0; }
2.5%, 100% { opacity: 1; }
}

/* --- the tab strip: two folder tabs on the front card ---------------------
   The tabs sit on the card's top edge like the tabs of a folder. The strip
   overlaps the card's top border by 1px: the active tab shares the card's
   surface and border and has no bottom edge, so it reads as part of the sheet
   in front, while the other tab is 2px shorter, darker and closed at the
   bottom, so it reads as the sheet behind. The active tab's 2px bar along its
   top edge fills over that card's hand-over time (data-deck-duration), which
   shows how long the story still has to run and doubles as the hand-off cue. */
.b3-hero-tabs {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: end;
  margin-bottom: -1px;
  padding: 0;
}

.b3-hero-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 8px 12px 11px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.2);
  border-radius: 6px 6px 0 0;
  background: #080a0e;
  color: #8d95a3;
  font-family: var(--bs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.45;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Card titles read at a glance: 12px mono, larger than the 9px section labels,
   and one line each on a 600px card. */
.b3-hero-tab:hover { color: #ffffff; background: #0b0e13; }

.b3-hero-tab.is-active {
  padding: 10px 12px 12px;
  border-color: rgba(255,255,255,.2);
  border-bottom: 0;
  background: #0d1016;
  color: #ffffff;
  cursor: default;
}

.b3-hero-tab:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 3px; }
.b3-hero-tab-index { flex: none; color: #79828f; }
.b3-hero-tab.is-active .b3-hero-tab-index { color: #ff8c3a; }
.b3-hero-tab-text { min-width: 0; }

.b3-hero-tab-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #f06400;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.b3-hero-tab.is-active .b3-hero-tab-progress {
  animation: bs-deck-progress var(--bs-deck-duration, 16s) linear forwards;
}

@keyframes bs-deck-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

/* One pause flag on the panel stops the drawings and the tab bar together. */
.b3-llm-proof--story.is-paused .b3-hero-tab-progress { animation-play-state: paused; }

.b3-hero-card .b3-hero-cartoon { margin: 0; padding: 0; }
.b3-hero-card .b3-cartoon { display: block; width: 100%; height: auto; }
.b3-hero-part .b3-cartoon-caption { padding-bottom: 10px; }

/* Two numbers per card, each with room to read. */
.b3-score-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   Hero cartoon, card 1: the car that was never going to fit
   --------------------------------------------------------------------------
   One showing lasts --bs-car-loop (17.1s) and runs once, so every keyframe
   percentage below maps to a fixed moment in the story. The deck hands over
   13.4s in (data-deck-duration on the card), 1.3s after the car has left, so
   the tail of the timeline never shows. Only transform and
   opacity animate, plus scaleX on the screen bar. Rotations use
   transform-box: fill-box with an invisible .b3-cartoon-pivot rect that puts
   the pivot on a box anchor.

   This cartoon shares no animated class with the javelin cartoon: every moving
   part is b3-car-* driven by a bs-car-* keyframe, so the two loops can never
   pull on the same element.

   The SVG's default state is the settled scene (original at the left, machine
   landed with its short orange bar, the small ByteShape model already driving
   the car, BYTESHAPE under it). Reduced motion, print, a back card and a
   browser without CSS animation therefore show the point of the story.

     t (s)    %         what happens
     0.0      0         scene fades in: the original, the car, no machine yet
     0.6      3.5088    the original walks right, towards the car
     2.4      14.0351   it reaches the car and leans in
     2.75     16.0819   the car squashes and rocks, the original bounces off
     2.8      16.3743   TOO BIG pops in over its head
     3.4      19.8830   disappointment: the mouth turns down, it slumps back
     4.4      25.7310   the ShapeLearn machine drops in from above
     5.0      29.2398   it lands, bounces, the lamp flashes, the bar blinks on
     5.4      31.5789   the original walks back left, mouth neutral again
     7.0      40.9357   the scan starts, the screen bar shrinks
     8.6      50.2924   scan ends, the small ByteShape model pops out
     9.2      53.8012   it hops right, its BYTESHAPE label hopping with it
     10.4     60.8187   it boards; the label moves to the car
     10.9     63.7427   the driver appears, the car pulls away
     12.1     70.7602   the car has left the frame
     13.4     78.3626   the deck hands over after 1.3s of empty road
   ========================================================================== */
.b3-hero-cartoon--car { --bs-car-loop: 17.1s; }

/* --- flat vector palette, the javelin scene's colours ------------------ */
.b3-car-glow { fill: #f06400; opacity: .55; filter: url(#bs-car-glow); }

.b3-car-lamp { opacity: .45; animation: bs-car-lamp var(--bs-car-loop) linear infinite; }
.b3-car-beam-group { opacity: 0; animation: bs-car-beam var(--bs-car-loop) linear infinite; }

.b3-car-screen-bar {
  fill: #f06400;
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: bs-car-screen-bar var(--bs-car-loop) linear infinite;
}

.b3-car-strain {
  fill: none;
  stroke: #ff8c3a;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-strain var(--bs-car-loop) linear infinite;
}

.b3-car-mouth-sad { opacity: 0; animation: bs-car-mouth-sad var(--bs-car-loop) linear infinite; }
.b3-car-body { fill: #161b24; stroke: #fff; stroke-width: 2; }
.b3-car-cabin { fill: #161b24; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.b3-car-window { fill: #0d1016; stroke: rgba(255,255,255,.2); stroke-width: 1; }
.b3-car-window-frame { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1; }
.b3-car-light { fill: #f06400; }
.b3-car-tyre { fill: #0d1016; stroke: #fff; stroke-width: 2; }
.b3-car-hub { fill: #626a78; }
.b3-car-spoke { fill: none; stroke: #626a78; stroke-width: 2; stroke-linecap: round; }

.b3-car-wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-wheel var(--bs-car-loop) linear infinite;
}

.b3-car-speedlines { opacity: 0; animation: bs-car-speedlines var(--bs-car-loop) linear infinite; }
.b3-car-speedline { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; }

.b3-car-squash {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-squash var(--bs-car-loop) linear infinite;
}

.b3-car-big-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-big-lean var(--bs-car-loop) linear infinite;
}

.b3-car-small-pop {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bs-car-pop var(--bs-car-loop) linear infinite;
}

.b3-car-small-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-small-lean var(--bs-car-loop) linear infinite;
}

.b3-car-label--ours { fill: #ff8c3a; }
.b3-car-tag-hop { opacity: 0; animation: bs-car-tag-hop var(--bs-car-loop) linear infinite; }

.b3-car-callout {
  fill: #ff8c3a;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-anchor: middle;
}

.b3-car-callout--gpu { fill: #a5adbb; }

.b3-car-toobig {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bs-car-toobig var(--bs-car-loop) linear infinite;
}

/* --- the showing ------------------------------------------------------- */
.b3-car-scene { animation: bs-car-scene var(--bs-car-loop) linear infinite; }

.b3-car-big-move { animation: bs-car-walk var(--bs-car-loop) linear infinite; }
.b3-car-big-bob { animation: bs-car-bob var(--bs-car-loop) linear infinite; }
.b3-car-leg-a { animation: bs-car-leg-a var(--bs-car-loop) linear infinite; }
.b3-car-leg-b { animation: bs-car-leg-b var(--bs-car-loop) linear infinite; }
.b3-car-mouth-flat { animation: bs-car-mouth-flat var(--bs-car-loop) linear infinite; }
.b3-car-machine-drop { animation: bs-car-machine-drop var(--bs-car-loop) linear infinite; }
.b3-car-small-move { animation: bs-car-hop-x var(--bs-car-loop) linear infinite; }
.b3-car-small-hop { animation: bs-car-hop-y var(--bs-car-loop) linear infinite; }
.b3-car-tag-car { animation: bs-car-tag-car var(--bs-car-loop) linear infinite; }
.b3-car-driver { animation: bs-car-driver var(--bs-car-loop) linear infinite; }
.b3-car-drive { animation: bs-car-drive var(--bs-car-loop) linear infinite; }
.b3-car-bounce { animation: bs-car-bounce var(--bs-car-loop) linear infinite; }

@keyframes bs-car-scene {
0% { opacity: 0; }
2.3392%, 100% { opacity: 1; }
}

@keyframes bs-car-walk {
0%, 3.5088% { transform: translateX(0); }
14.0351% { transform: translateX(250px); }
16.0819% { transform: translateX(258px); }
17.5439% { transform: translateX(238px); }
19.883%, 31.5789% { transform: translateX(244px); }
40.9357%, 100% { transform: translateX(0); }
}

@keyframes bs-car-bob {
0%, 3.5088% { transform: translateY(0); }
4.8246% { transform: translateY(-3px); }
6.1404% { transform: translateY(0); }
7.4561% { transform: translateY(-3px); }
8.7719% { transform: translateY(0); }
10.0877% { transform: translateY(-3px); }
11.4035% { transform: translateY(0); }
12.7193% { transform: translateY(-3px); }
14.0351%, 31.5789% { transform: translateY(0); }
32.7485% { transform: translateY(-3px); }
33.9181% { transform: translateY(0); }
35.0877% { transform: translateY(-3px); }
36.2573% { transform: translateY(0); }
37.4269% { transform: translateY(-3px); }
38.5965% { transform: translateY(0); }
39.7661% { transform: translateY(-3px); }
40.9357%, 100% { transform: translateY(0); }
}

@keyframes bs-car-leg-a {
0%, 3.5088% { transform: translate(0, 0); }
4.8246% { transform: translate(7px, -2.5px); }
6.1404% { transform: translate(0, 0); }
7.4561% { transform: translate(-7px, 0); }
8.7719% { transform: translate(0, 0); }
10.0877% { transform: translate(7px, -2.5px); }
11.4035% { transform: translate(0, 0); }
12.7193% { transform: translate(-7px, 0); }
14.0351%, 31.5789% { transform: translate(0, 0); }
32.7485% { transform: translate(-7px, -2.5px); }
33.9181% { transform: translate(0, 0); }
35.0877% { transform: translate(7px, 0); }
36.2573% { transform: translate(0, 0); }
37.4269% { transform: translate(-7px, -2.5px); }
38.5965% { transform: translate(0, 0); }
39.7661% { transform: translate(7px, 0); }
40.9357%, 100% { transform: translate(0, 0); }
}

@keyframes bs-car-leg-b {
0%, 3.5088% { transform: translate(0, 0); }
4.8246% { transform: translate(-7px, 0); }
6.1404% { transform: translate(0, 0); }
7.4561% { transform: translate(7px, -2.5px); }
8.7719% { transform: translate(0, 0); }
10.0877% { transform: translate(-7px, 0); }
11.4035% { transform: translate(0, 0); }
12.7193% { transform: translate(7px, -2.5px); }
14.0351%, 31.5789% { transform: translate(0, 0); }
32.7485% { transform: translate(7px, 0); }
33.9181% { transform: translate(0, 0); }
35.0877% { transform: translate(-7px, -2.5px); }
36.2573% { transform: translate(0, 0); }
37.4269% { transform: translate(7px, 0); }
38.5965% { transform: translate(0, 0); }
39.7661% { transform: translate(-7px, -2.5px); }
40.9357%, 100% { transform: translate(0, 0); }
}

@keyframes bs-car-big-lean {
0%, 14.0351% { transform: rotate(0); }
15.7895%, 16.0819% { transform: rotate(12deg); }
17.5439% { transform: rotate(-4deg); }
19.883% { transform: rotate(0); }
22.807%, 31.5789% { transform: rotate(-6deg); }
32.7485%, 100% { transform: rotate(0); }
}

@keyframes bs-car-mouth-flat {
0%, 19.883% { opacity: 1; }
22.807%, 31.5789% { opacity: 0; }
32.7485%, 100% { opacity: 1; }
}

@keyframes bs-car-mouth-sad {
0%, 19.883% { opacity: 0; }
22.807%, 31.5789% { opacity: 1; }
32.7485%, 100% { opacity: 0; }
}

@keyframes bs-car-strain {
0%, 14.6199% { opacity: 0; transform: scale(.5); }
15.7895% { opacity: 1; transform: scale(1); }
16.9591% { opacity: .35; transform: scale(.88); }
18.1287% { opacity: 1; transform: scale(1.08); }
19.0058% { opacity: .4; transform: scale(.92); }
19.883%, 100% { opacity: 0; transform: scale(.6); }
}

@keyframes bs-car-toobig {
0%, 16.0819% { opacity: 0; transform: translate(0, 4px) scale(.7); }
16.3743% { opacity: 1; transform: translate(0, 0) scale(1.15); }
16.6667% { opacity: 1; transform: translate(-2px, 0) scale(1); }
16.9591% { opacity: 1; transform: translate(2px, 0) scale(1); }
17.2515% { opacity: 1; transform: translate(-1px, 0) scale(1); }
17.5439%, 24.5614% { opacity: 1; transform: translate(0, 0) scale(1); }
26.9006%, 100% { opacity: 0; transform: translate(0, 4px) scale(.7); }
}

@keyframes bs-car-squash {
0%, 15.7895% { transform: rotate(0) scale(1, 1); }
16.0819% { transform: rotate(-3deg) scale(1.04, .92); }
16.6667% { transform: rotate(1.5deg) scale(.99, 1.02); }
17.2515% { transform: rotate(-1deg) scale(1.01, .99); }
18.1287%, 100% { transform: rotate(0) scale(1, 1); }
}

@keyframes bs-car-machine-drop {
0%, 25.731% { transform: translateY(-230px); animation-timing-function: ease-in; }
29.2398% { transform: translateY(0); }
30.117% { transform: translateY(-8px); }
30.9942%, 100% { transform: translateY(0); }
}

@keyframes bs-car-beam {
0%, 40.9357% { transform: translateX(0); opacity: 0; }
41.2281% { transform: translateX(-6px); opacity: 1; }
43.2749% { transform: translateX(-102px); opacity: 1; }
45.3216% { transform: translateX(-6px); opacity: 1; }
47.3684% { transform: translateX(-102px); opacity: 1; }
49.1228% { transform: translateX(-40px); opacity: 1; }
50.2924%, 100% { transform: translateX(0); opacity: 0; }
}

@keyframes bs-car-lamp {
0%, 29% { opacity: .45; }
29.2398% { opacity: 1; }
29.7% { opacity: .45; }
30.117% { opacity: 1; }
30.9942%, 40.9357% { opacity: .45; }
41.7% { opacity: 1; }
42.9% { opacity: .35; }
44.1% { opacity: 1; }
45.3% { opacity: .35; }
46.5% { opacity: 1; }
47.7% { opacity: .35; }
48.9% { opacity: 1; }
50.2924%, 100% { opacity: .45; }
}

@keyframes bs-car-screen-bar {
0%, 29.2398% { transform: scaleX(3.667); opacity: 0; }
29.5% { transform: scaleX(3.667); opacity: 1; }
29.8% { transform: scaleX(3.667); opacity: 0; }
30.117%, 40.9357% { transform: scaleX(3.667); opacity: 1; }
43% { transform: scaleX(2.2); }
44.2% { transform: scaleX(2.5); }
46% { transform: scaleX(1.5); }
47.2% { transform: scaleX(1.72); }
49% { transform: scaleX(1.06); }
49.7% { transform: scaleX(1.22); }
50.2924%, 100% { transform: scaleX(1); opacity: 1; }
}

@keyframes bs-car-pop {
0%, 50.2924% { transform: translateY(-16px) scale(0); opacity: 0; }
50.5848% { transform: translateY(-14px) scale(.25); opacity: 1; }
52.0468% { transform: translateY(-5px) scale(1.15); opacity: 1; }
52.924% { transform: translateY(0) scale(.94); opacity: 1; }
53.8012%, 60.8187% { transform: translateY(0) scale(1); opacity: 1; }
61.6959% { transform: translateY(0) scale(.8); opacity: 1; }
62.5731% { transform: translateY(0) scale(.35); opacity: 1; }
63.7427%, 100% { transform: translateY(0) scale(0); opacity: 0; }
}

@keyframes bs-car-hop-x {
0%, 53.8012% { transform: translateX(0); }
55.5556% { transform: translateX(29.5px); }
57.3099% { transform: translateX(59px); }
59.0643% { transform: translateX(88.5px); }
60.8187%, 100% { transform: translateX(118px); }
}

@keyframes bs-car-hop-y {
0%, 53.8012% { transform: translateY(0); }
54.6784% { transform: translateY(-10px); }
55.5556% { transform: translateY(0); }
56.4327% { transform: translateY(-10px); }
57.3099% { transform: translateY(0); }
58.1871% { transform: translateY(-10px); }
59.0643% { transform: translateY(0); }
59.9415% { transform: translateY(-10px); }
60.8187% { transform: translateY(0); }
61.6959% { transform: translateY(-22px); }
62.5731% { transform: translateY(-16px); }
63.7427%, 100% { transform: translateY(-10px); }
}

@keyframes bs-car-small-lean {
0%, 53.8012% { transform: rotate(0); }
54.6784% { transform: rotate(6deg); }
55.5556% { transform: rotate(0); }
56.4327% { transform: rotate(6deg); }
57.3099% { transform: rotate(0); }
58.1871% { transform: rotate(6deg); }
59.0643% { transform: rotate(0); }
59.9415% { transform: rotate(6deg); }
60.8187%, 100% { transform: rotate(0); }
}

@keyframes bs-car-tag-hop {
0%, 50.2924% { opacity: 0; }
53.8012%, 60.8187% { opacity: 1; }
63.7427%, 100% { opacity: 0; }
}

@keyframes bs-car-tag-car {
0%, 60.8187% { opacity: 0; }
63.7427%, 100% { opacity: 1; }
}

@keyframes bs-car-driver {
0%, 62.5731% { opacity: 0; }
63.7427%, 100% { opacity: 1; }
}

@keyframes bs-car-drive {
0%, 63.7427% { transform: translateX(0); animation-timing-function: ease-in; }
70.7602%, 100% { transform: translateX(440px); }
}

@keyframes bs-car-bounce {
0%, 63.7427% { transform: translateY(0); }
65.4971% { transform: translateY(-2px); }
66.6667% { transform: translateY(0); }
67.2% { transform: translateY(-1.5px); }
67.8363%, 100% { transform: translateY(0); }
}

@keyframes bs-car-wheel {
0%, 63.7427% { transform: rotate(0); }
70.7602%, 100% { transform: rotate(900deg); }
}

@keyframes bs-car-speedlines {
0%, 63.7427% { opacity: 0; transform: translateX(-6px); }
64.9123% { opacity: 1; transform: translateX(-10px); }
67.8363% { opacity: 1; transform: translateX(-18px); }
70.1754%, 100% { opacity: 0; transform: translateX(-22px); }
}

/* --- justified body copy on Home ------------------------------------------
   Multi-line paragraphs on the homepage fill their measure; the last line stays
   left-aligned. No hyphenation: the user finds broken words unreadable, so the
   spacing absorbs the difference. Headings, labels, lists and blog prose are
   untouched. */
.bs-home .b3-cartoon-caption {
  text-align: justify;
  text-align-last: left;
  text-wrap: wrap;
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (max-width: 1100px) {
  .b3-hero-grid { gap: 0; }
}

@media (max-width: 900px) {
  .b3-hero { padding-top: 53px; }
  .b3-hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (max-width: 620px) {
  .b3-hero { padding-top: 39px; }
  .b3-hero-grid { grid-template-columns: 1fr; gap: 39px; padding-bottom: 28px; }
  .b3-proof-choice { padding: 10px 14px; text-align: left; font-size: 12px; }
  .b3-proof-choice[aria-pressed="true"]::after { content: '↗'; float: right; }
}

@media (max-width: 900px) {
  .b3-scene-controls .b3-proof-choice { font-size: 10px; padding-inline: 10px; }
}

@media (max-width: 620px) {
  .bs-home .b3-hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .b3-scene-controls .b3-proof-choice { text-align: center; font-size: 10px; padding: 9px 5px; }
  .b3-scene-controls .b3-proof-choice[aria-pressed="true"]::after { content: none; }
}

/* A second rule for this selector on purpose: the narrow-screen
   block above has to lose to it, so the two cannot be merged. */
.bs-home .b3-hero-grid { align-items: center; gap: 54px; }

@media (max-width: 1100px) {
  .bs-home .b3-hero-grid { gap: 30px; }
}

@media (max-width: 900px) {
  .bs-home .b3-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .bs-home .b3-hero-copy { max-width: 650px; }
  .b3-llm-proof { width: 100%; }
}

@media (max-width: 1100px) {
  .b4-weight-comparison { margin-inline: 18px; gap: 20px; grid-template-columns: minmax(0,1fr) 90px; }
}

@media (max-width: 900px) {
  .b4-weight-comparison { margin-inline: 26px; }
}

@media (max-width: 620px) {
  .b4-weight-comparison { margin-inline: 16px; gap: 16px; grid-template-columns: minmax(0,1fr) 78px; }
  .b3-page-network { opacity: .62; }
}

@media (max-width: 900px) {

  .bs-home .b3-hero {
    min-height: calc(100svh - 69px);
  }
}

@media (max-width: 620px) {
  .b3-hero-cartoon { margin-top: 24px; }
  .b3-cartoon-caption { padding: 8px 16px 14px; }

  /* The drawing shrinks with the column, so its labels grow back in user units. */
  .b3-cartoon-label, .b3-cartoon-samespot { font-size: 12px; }

  .b3-cartoon-chip, .b3-cartoon-machine-name { font-size: 12.5px; }
}

/* Inside the details the comparison is a sentence, not a bar chart. */
.b3-score-comparison { display: block; margin: 0; padding: 0; border-bottom: 0; }

@media (max-width: 1100px) {
  .b3-hero-stack .b3-cartoon-caption, .b3-score-row, .b3-score-foot { padding-inline: 18px; }
  .b3-score-row { gap: 14px; }
}

@media (max-width: 900px) {
  .b3-hero-stack { width: 100%; }
  .b3-hero-stack .b3-cartoon-caption, .b3-score-row, .b3-score-foot { padding-inline: 26px; }
  .b3-score-row { gap: 20px; }
}

@media (max-width: 620px) {
  .b3-hero-stack .b3-cartoon-caption, .b3-score-row, .b3-score-foot { padding-inline: 16px; }
  .b3-score-row { gap: 10px; padding-bottom: 12px; }
  .bs-page .b3-score-stat strong { font-size: clamp(21px, 6.4vw, 26px); }
  .b3-score-stat > span { margin-top: 5px; font-size: 10px; }
  .b3-score-source { font-size: 11px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .bs-page .b4-weight-comparison { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .bs-page .b4-weight-comparison { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 1100px) {
  .b5-takeaway { padding-inline: 18px; }
}

@media (max-width: 900px) {
  .b5-takeaway { padding-inline: 26px; }
}

@media (max-width: 620px) {
  .b5-takeaway { padding-inline: 16px; }
}

@media (max-width: 1100px) {
  .b5-compress { padding-inline: 18px; }
}

@media (max-width: 900px) {
  .b5-compress { padding-inline: 26px; }
}

@media (max-width: 620px) {
  .b5-compress { padding-inline: 16px; }
  .b5-compress-head { font-size: 11px; }
  .b3-hero-tabs { gap: 4px; }
  .b3-hero-tab { gap: 6px; padding: 7px 10px 10px; font-size: 10.5px; letter-spacing: .04em; line-height: 1.4; }
  .b3-hero-tab.is-active { padding: 9px 10px 11px; }
}

.b3-hero-card .b3-score-stat strong { font-size: clamp(32px, 2.9vw, 44px); }

@media (max-width: 620px) {
  .b3-score-row--pair { gap: 12px; }
  .b3-hero-card .b3-score-stat strong { font-size: clamp(24px, 7vw, 30px); }

  /* The drawing shrinks with the column, so its labels grow back in user units. */
  .b3-car-callout { font-size: 12px; }
}

/* ==========================================================================
   HOME SECTIONS
   --------------------------------------------------------------------------
   The rest of the homepage, top to bottom: the kicker, the section headings,
   the proof band, the image workbench, the demos, the people and the
   releases.
   ========================================================================== */

.b3-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 27px;
  font-family: var(--bs-font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .13em;
}

/* The same 22px accent rule as .eyebrow on the other pages, so every section
   label on the site opens the same way. */
.b3-kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--bs-accent);
}


.b3-display {
  margin: 0;
  font-size: clamp(42px, 4.6vw, 69px);
  font-weight: 500;
  line-height: 1.075;
  letter-spacing: -.064em;
}

.b3-intro {
  max-width: 440px;
  margin: 28px 0 30px;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -.012em;
}

.b3-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }

.b3-credentials {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid #30362f;
  padding: 28px 0 35px;
}

.b3-credential-origin { margin: 0; font-size: 11px; line-height: 1.7; }
.b3-credential-origin strong { font-weight: 400; }
.b3-backers { display: flex; align-items: center; gap: 37px; }

.b3-small-label {
  font-family: var(--bs-font-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .09em;
}

.b3-backers img {
  width: 153px;
  height: auto;
  max-height: 38px;
  object-fit: contain;
  display: block;
}

.b3-utest { display: flex; align-items: center; }

/* The UTEST mark is a dark logo file; invert it for the black hero. */
.b3-backers .b3-utest img {
  width: auto;
  height: 32px;
  max-height: none;
  filter: brightness(0) invert(1);
}

.b3-section { padding: 88px 0; }

.b3-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-bottom: 44px;
}

.b3-heading {
  margin: 0;
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.05em;
}

.b3-section-lead { max-width: 365px; margin: 0 0 3px; font-size: 15px; line-height: 1.7; }
.b3-body { margin: 0; font-size: 14px; line-height: 1.8; }

/* The document already reserves space for the sticky header at anchors. */
/* Measured proof remains within the same dark brand palette. */
.b3-proof { padding: 76px 0 37px; scroll-margin-top: 0; background: #0d1016; color: var(--bs-text-2); }

.b3-proof :focus-visible { outline: 2px solid #8a380b; outline-offset: 4px; outline-color: #ff8c3a; }
.b3-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.b3-method-step { min-width: 0; padding-top: 26px; border-top: 1px solid #3c4637; }

.b3-step-icon {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 56px;
  margin-bottom: 37px;
}

.b3-bracket { font-family: var(--bs-font-mono); font-size: 43px; font-weight: 400; }
.b3-input-lines { display: flex; flex-direction: column; gap: 5px; width: 42px; }
.b3-input-lines i { display: block; height: 4px; background: #a5adbb; }
.b3-input-lines i:nth-child(2) { width: 64%; }
.b3-input-lines i:nth-child(3) { width: 82%; }
.b3-bits { gap: 4px; align-items: flex-end; padding-block: 4px; }
.b3-bits i { width: 7px; height: 36px; }
.b3-bits i:nth-child(3n) { height: 19px; opacity: .65; }
.b3-bits i:nth-child(3n + 1) { height: 48px; opacity: .4; }
.b3-output-icon { font-size: 60px; font-weight: 300; line-height: 1; }
.b3-method-step .b3-small-label { margin: 0 0 12px; }

.b3-step-title {
  margin: 0 0 13px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.b3-offer { border-block: 1px solid #303c29; }
.b3-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 115px; }
.b3-offer-intro .b3-body { max-width: 340px; margin: 28px 0; }
.b3-offer-list { border-top: 1px solid #3d4b33; }
.b3-offer-item { padding: 28px 0; border-bottom: 1px solid #3d4b33; }
.b3-offer-item .b3-small-label { display: block; margin-bottom: 10px; }
.b3-offer-item .b3-body { max-width: 410px; font-size: 13px; }
.b3-offer-item .b3-text-link { margin-top: 14px; font-size: 12px; }
.b3-research { border-top: 1px solid #303c29; padding-top: 62px; padding-bottom: 72px; }
.b3-research .b3-section-heading { margin-bottom: 36px; }

/* The three newest releases, side by side. Each card is one link: thumbnail,
   date and kind, title, one sentence, and the invitation. */
/* --- latest releases: the method grid, reused ------------------------------
   Each release is a .b3-method-step link, so section 05 shares section 03's
   rhythm: hairline, a picture where the step icon sits (the full column
   width, 16:9, instead of the 56px icon slot), label, title, body and a read
   link. The picture is the post's own thumbnail, never a copy. */
/* A flex column, so the read links of the three columns sit on one line
   whatever the copy length above them. */
.b3-release-item { display: flex; flex-direction: column; padding-top: 18px; color: inherit; text-decoration: none; }
.b3-release-thumb { height: auto; margin-bottom: 16px; }
.b3-release-item:hover { text-decoration: none; }
.b3-release-item:hover .b3-step-title { color: #ff8c3a; }
.b3-release-item:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 4px; }
.b3-release-item .b3-small-label { display: block; margin-bottom: 8px; }
.b3-release-item .b3-step-title { display: block; margin-bottom: 8px; }
/* .bs-page .b3-body sets 16px later in the sheet, so this one carries the page
   class to win. */
.bs-page .b3-release-item .b3-body { display: block; margin-bottom: 10px; font-size: 13px; line-height: 1.7; }

.b3-release-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--bs-line);
  border-radius: 4px;
}

.b3-release-more {
  display: inline-flex;
  align-items: baseline;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  color: #ff8c3a;
  font-size: 13px;
  font-weight: 500;
}

.b3-closing { padding: 66px 0; border-top: 1px solid #3a4930; }
.b3-closing-inner { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.b3-closing .b3-kicker { margin-bottom: 15px; }
.b3-closing .b3-heading { font-size: clamp(30px, 3.2vw, 44px); }
.b3-closing .b3-body { margin-top: 20px; font-size: 13px; }

/* Homepage depth: one continuous field, revealed by the black sections. */
.bs-home { background: #000000; position: relative; isolation: isolate; }

.b3-kicker,
.b3-display-muted,
.b3-intro,
.b3-credential-origin,
.b3-small-label,
.b3-muted,
.b3-body {
  color: var(--bs-text-2);
}

.b3-display,
.b3-heading,
.b3-credential-origin strong,
.b3-step-title {
  color: #ffffff;
}

.b3-orange, .b3-step-icon { color: #f06400; }

.b3-credentials,
.b3-method-step,
.b3-offer-list,
.b3-offer-item,
.b3-research {
  border-color: var(--bs-line-strong);
}

.b3-offer, .b3-closing {
  background: #0d1016;
  border-color: var(--bs-line);
}

.b3-input-lines i:nth-child(2),
.b3-bits i,
.b3-bits i:nth-child(3n),
.b3-bits i:nth-child(3n + 1) {
  background: #f06400;
}

.b3-proof .b3-kicker { color: var(--bs-text-2); }
.b3-proof .b3-heading { color: #ffffff; }
.bs-home .b3-display { font-size: clamp(48px, 5.4vw, 80px); line-height: 1.04; }
.bs-home .b3-display-muted { color: var(--bs-accent); }
.bs-home .b3-intro { max-width: 410px; margin-block: 28px; }
.b3-visual-proof .b3-heading { font-size: clamp(36px, 3.9vw, 58px); }
.b3-image-workbench { overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.18); }

.b3-image-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 22px 26px;
}

.b3-image-scene-title { margin: 7px 0 0; color: #fff; font-size: 18px; font-weight: 500; }
.b3-scene-controls { display: flex; gap: 8px; }
.b3-visual-proof [data-image-controls][hidden] { display: none; }

.b3-image-viewer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  --image-split: 50%;
  background: #000;
}

.b3-image-pane { position: relative; min-width: 0; margin: 0; }

.b3-image-pane img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.b3-image-pane figcaption {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 15px;
  background: rgba(0,0,0,.87);
  border-left: 2px solid #a5adbb;
  color: #c7ced9;
  font-size: 10px;
}

.b3-image-pane figcaption strong {
  color: #fff;
  font-family: var(--bs-font-mono);
  font-size: 19px;
  font-weight: 400;
}

.b3-image-pane--optimized figcaption { left: auto; right: 22px; border-left-color: var(--bs-accent); }
.b3-image-pane--optimized figcaption strong { color: var(--bs-accent); }

/* Image comparison pointer gestures retain vertical touch scrolling and pinch zoom. */
.b3-image-viewer.is-comparing {
  display: block;
  aspect-ratio: 2 / 1;
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;
}

.b3-image-viewer.is-comparing .b3-image-pane {
  position: absolute;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
}

.b3-image-viewer.is-comparing .b3-image-pane img {
  width: 100%;
  height: 100%;
  object-position: center;
  -webkit-user-drag: none;
}

.b3-image-viewer.is-comparing .b3-image-pane--optimized { clip-path: inset(0 0 0 var(--image-split)); }

.b3-image-divider {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--image-split);
  width: 2px;
  transform: translateX(-1px);
  background: #fff;
  pointer-events: none;
}

.b3-image-viewer.is-comparing .b3-image-divider { display: block; }

.b3-image-divider > span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 22px;
  box-shadow: 0 1px 12px rgba(0,0,0,.3);
}

.b3-image-slider { padding: 19px 26px 14px; }

.b3-image-slider label {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
  color: #fff;
  font-family: var(--bs-font-mono);
  font-size: 10px;
}

.b3-image-slider label span { color: var(--bs-text-2); font-family: var(--bs-font-sans); }

.b3-image-slider input {
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  accent-color: var(--bs-accent);
  cursor: ew-resize;
}

.b3-image-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 17px 26px 24px;
}

.b3-image-detail p {
  max-width: 640px;
  min-height: 40px;
  margin: 0;
  color: var(--bs-text-2);
  font-size: 12px;
  line-height: 1.7;
}

.b3-image-detail .b3-text-link { flex-shrink: 0; font-size: 11px; }
.b3-image-method { margin-top: 24px; color: var(--bs-text-2); font-size: 12px; }

.b3-image-method summary {
  width: fit-content;
  padding: 8px 0;
  cursor: pointer;
  color: #e9edf4;
  font-size: 12px;
}

.b3-image-method > div { max-width: 860px; padding: 5px 0 15px; line-height: 1.8; }
.b3-image-method p { margin: 10px 0; }
.b3-image-method .b3-text-link { margin-top: 10px; }
.b3-visual-proof .b3-section-lead strong { color: #fff; font-weight: 500; }
.bs-page .b3-body a { text-decoration: underline; text-underline-offset: 3px; }
.bs-home .b3-proof, .bs-home .b3-offer, .bs-home .b3-closing { background-color: #0d1016; }
.bs-page .b3-credential-origin { color: #b8c0cc; font-size: 14px; line-height: 1.6; }
.bs-page .b3-image-method { font-size: 14px; line-height: 1.7; }
.bs-page .b3-image-method summary { color: #c7ced9; padding-block: 14px; font-size: 14px; }
.bs-page .b3-image-method > div { color: #b8c0cc; }

/* Keep the image task prominent while the selected scene supplies the visual. */
.bs-page .b3-image-toolbar { flex-wrap: wrap; }

.bs-page .b3-image-scene-title { margin: 0; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; }
.bs-page .b3-scene-controls { flex-wrap: wrap; }
.bs-page .b3-image-pane figcaption { font-size: 14px; }
.bs-page .b3-image-slider label, .bs-page .b3-image-slider label > span { font-size: 14px; }
.bs-page .b3-image-detail { justify-content: flex-end; }
.bs-page .b3-offer-grid { align-items: center; }
.bs-page .b3-offer-summary { display: grid; justify-items: start; gap: 26px; }
.bs-page .b3-offer-summary .b3-body { max-width: 38ch; font-size: 18px; }

/* Secondary labels retain the same readable minimum in compact layouts. */
.bs-page .b3-section-lead { font-size: 16px; }

.b5-code-recording { min-width: 0; margin: 0; }

.b5-code-recording video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--bs-line-strong);
  border-radius: 5px;
}

.b5-code-recording figcaption {
  margin-top: 12px;
  color: var(--bs-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.b5-image-heading { margin-bottom: 24px; }
.b5-image-heading .b3-body { max-width: 680px; }

/* Recording controls follow the shared orange, dark surface, and rounded actions. */
.b5-video-player {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bs-line-strong);
  border-radius: 16px;
  background: var(--bs-surface);
}

.b5-code-recording .b5-video-player video { border: 0; border-radius: 0; }
.b5-video-controls { padding: 4px 16px 14px; border-top: 1px solid var(--bs-line-strong); }
.b5-video-actions { display: flex; align-items: center; gap: 12px; }
.b5-video-tools { display: flex; gap: 8px; margin-left: auto; }

.b5-video-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: transparent;
  color: var(--bs-text);
  font: 600 14px/1 var(--bs-font-mono);
  cursor: pointer;
}

.b5-video-button--play, .b5-video-button[aria-pressed="true"] {
  background: var(--bs-accent);
  border-color: var(--bs-accent);
  color: var(--bs-text-on-accent);
}

.b5-video-button:hover { border-color: var(--bs-accent-bright); }
.b5-video-button svg { width: 22px; height: 22px; flex: 0 0 22px; }

.b5-video-time {
  color: var(--bs-text-2);
  font: 14px/1.4 var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.b5-video-start {
  position: absolute;
  top: calc((100% - 92px) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 18px;
  border: 1px solid var(--bs-accent);
  border-radius: 50%;
  background: var(--bs-accent);
  color: var(--bs-text-on-accent);
  cursor: pointer;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .3);
}

.b5-video-start svg { width: 30px; height: 30px; }
.b5-video-start:hover { background: var(--bs-accent-bright); }
.b5-video-player .b5-video-pause-icon { display: none; }
.b5-video-player[data-playing="true"] .b5-video-pause-icon { display: block; }
.b5-video-player[data-playing="true"] .b5-video-play-icon { display: none; }

.b5-video-seek {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  accent-color: var(--bs-accent);
}

.b5-video-seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--bs-accent) 0 var(--video-progress, 0%), #626a78 var(--video-progress, 0%) 100%);
}

.b5-video-seek::-moz-range-track { height: 5px; border-radius: 999px; background: #626a78; }
.b5-video-seek::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--bs-accent); }

.b5-video-seek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  border: 2px solid var(--bs-accent);
  border-radius: 50%;
  background: var(--bs-accent);
}

.b5-video-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--bs-accent);
  border-radius: 50%;
  background: var(--bs-accent);
}

.b5-video-button:focus-visible, .b5-video-start:focus-visible, .b5-video-seek:focus-visible {
  outline: 2px solid var(--bs-accent-bright);
  outline-offset: 4px;
}

.b5-video-status {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--bs-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.b5-video-status a { color: var(--bs-accent-bright); }
.b5-video-player [hidden] { display: none; }

.b5-video-player:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #000;
}

.b5-video-player:fullscreen video {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.b5-video-player:fullscreen .b5-video-controls {
  flex: 0 0 auto;
  width: min(100%, 1200px);
  margin-inline: auto;
}

.b5-code-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }

/* --- section 02 demo cards ------------------------------------------------
   The recorded coding demo and the published image pair sit in two matching
   cards: copy on the left, media on the right, one border and one surface, so
   the section reads as two exhibits rather than loose blocks. */
.b5-demo-card {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr);
  gap: 40px;
  align-items: center;
  padding: 32px;
  margin: 0 0 24px;
  border: 1px solid var(--bs-line-strong);
  background: var(--bs-surface);
}

.b5-demo-copy { display: grid; justify-items: start; gap: 18px; }
.b5-demo-copy .b3-kicker { margin: 0; }

/* The two demo labels sit inside section 02, which already opens with the
   accent rule, so they carry none of their own. */
.b5-demo-copy .b3-kicker::before { content: none; }
.b5-demo-copy .b3-body { max-width: 440px; }
.b5-demo-card .b5-image-heading { margin-bottom: 0; }
.b5-demo-media { min-width: 0; }
.b5-demo-card .b5-video-player { border-radius: 6px; }
.b5-demo-card .b5-code-recording figcaption { font-size: 12.5px; }
.b5-demo-card .b3-image-workbench { border-color: var(--bs-line); }
.b5-demo-card .b3-image-toolbar { padding: 16px 20px; }
.b5-demo-card .b3-image-scene-title { margin: 0; font-size: 15px; }
.b5-demo-card .b3-image-slider { padding: 14px 20px 10px; }
.b5-demo-card .b3-image-detail { padding: 12px 20px 18px; }
.b5-demo-card .b3-image-method { margin-top: 12px; }

.bs-home .b3-intro,
.bs-home .b3-section-lead,
.bs-home .b3-body,
.bs-home .b5-code-recording figcaption {
  text-align: justify;
  text-align-last: left;
  text-wrap: wrap;
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (max-width: 1100px) {
  .b3-display { font-size: clamp(40px, 4.9vw, 60px); }
  .b3-actions { gap: 18px; }
  .b3-intro { font-size: 16px; max-width: 365px; }
  .b3-offer-grid { gap: 70px; }
  .b3-backers { gap: 22px; }
}

@media (max-width: 900px) {
  .b3-display { font-size: clamp(36px, 5vw, 47px); }
  .b3-intro { margin-top: 22px; font-size: 15px; }
  .b3-actions { gap: 17px; align-items: flex-start; flex-direction: column; }
  .b3-credentials { align-items: flex-start; }
  .b3-backers { flex-wrap: wrap; justify-content: flex-end; gap: 15px; }
  .b3-backers > .b3-small-label { width: 100%; text-align: right; }
  .b3-backers img { width: 132px; }
  .b3-section { padding-block: 67px; }
  .b3-section-heading { gap: 30px; }
  .b3-section-lead { max-width: 280px; font-size: 13px; }
  .b3-method-grid { gap: 25px; }
  .b3-method-step .b3-body { font-size: 12px; }
  .b3-step-title { font-size: 18px; }
  .b3-offer-grid { gap: 40px; }
}

@media (max-width: 620px) {
  .b3-kicker { font-size: 9px; margin-bottom: 22px; }
  .b3-display { font-size: clamp(35px, 8.8vw, 54px); letter-spacing: -.058em; }
  .b3-intro { max-width: 420px; margin: 23px 0; font-size: 15px; }
  .b3-actions { flex-direction: row; align-items: center; gap: 17px; }
  .b3-actions .b3-button { font-size: 12px; gap: 20px; padding: 13px 15px; }
  .b3-actions .b3-text-link { font-size: 11px; gap: 9px; }
  .b3-credentials { padding-block: 24px; flex-direction: column; gap: 22px; }
  .b3-credential-origin { font-size: 10px; }
  .b3-backers { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 23px; }
  .b3-backers > .b3-small-label { width: auto; text-align: left; font-size: 8px; }
  .b3-backers img { width: 127px; }
  .b3-backers .b3-utest img { height: 26px; }
  .b3-section { padding-block: 52px; }

  .b3-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
    margin-bottom: 32px;
  }

  .b3-heading { font-size: 32px; letter-spacing: -.045em; }
  .b3-section-lead { max-width: 100%; font-size: 13px; }
  .b3-proof { padding: 49px 0 28px; }
  .b3-method-grid { grid-template-columns: 1fr; gap: 30px; }

  .b3-method-step {
    display: grid;
    grid-template-columns: 78px 1fr;
    column-gap: 20px;
    padding-top: 24px;
  }

  .b3-step-icon { grid-column: 1; grid-row: 1 / 4; margin: 0; }

  .b3-method-step .b3-small-label, .b3-method-step .b3-step-title, .b3-method-step .b3-body {
    grid-column: 2;
  }

  .b3-method-step .b3-small-label { font-size: 8px; margin-bottom: 10px; }
  .b3-method-step .b3-body { font-size: 12px; }
  .b3-method-step .b3-step-title { font-size: 17px; }
  .b3-offer-grid { grid-template-columns: 1fr; gap: 34px; }
  .b3-offer-intro .b3-body { font-size: 13px; }
  /* The picture keeps the column width on phones too, so the item stays a
     stack rather than the icon-beside-copy row the method steps use. */
  .b3-release-item { display: block; padding-top: 18px; }
  .b3-release-thumb { margin: 0 0 14px; }
  .b3-closing { padding-block: 47px; }
  .b3-closing-inner { align-items: flex-start; flex-direction: column; gap: 27px; }
  .b3-closing .b3-body { font-size: 12px; }
  .b3-closing .b3-heading { font-size: 31px; }
}

.b3-visual-proof { padding-bottom: 62px; }

@media (max-width: 1100px) {
  .bs-home .b3-display { font-size: clamp(42px,5.3vw,64px); }
  .b3-image-detail { align-items: flex-start; }
}

@media (max-width: 900px) {
  .bs-home .b3-intro { font-size: 15px; max-width: 520px; }
  .b3-image-toolbar { gap: 15px; padding-inline: 18px; }
  .b3-scene-controls { gap: 5px; }
  .b3-image-detail { flex-direction: column; gap: 14px; }
}

@media (max-width: 620px) {
  .bs-home .b3-intro { margin-block: 23px; }
  .b3-visual-proof .b3-heading { font-size: 40px; }
  .b3-image-toolbar { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 15px; }
  .b3-scene-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .b3-image-viewer { grid-template-columns: 1fr; }
  .b3-image-viewer.is-comparing { aspect-ratio: 1; }
  .b3-image-pane figcaption { top: 10px; left: 10px; padding: 8px 9px; font-size: 8px; }
  .b3-image-pane figcaption strong { font-size: 14px; }
  .b3-image-pane--optimized figcaption { left: auto; right: 10px; }
  .b3-image-divider > span { width: 31px; height: 31px; font-size: 18px; }
  .b3-image-slider { padding-inline: 15px; }
  .b3-image-slider label { font-size: 8px; gap: 6px; }
  .b3-image-slider label span { font-size: 9px; }
  .b3-image-detail { padding: 10px 15px 20px; }
  .b3-image-detail p { font-size: 11px; }
  .b3-image-method { font-size: 11px; }
}

@media (max-width: 900px) {
  .bs-home .b3-display { font-size: 66px; }
}

@media (max-width: 620px) {
  .bs-home .b3-display { font-size: clamp(42px,12vw,70px); }
  .bs-page .b3-image-slider label { flex-wrap: wrap; gap: 8px; }
  .bs-page .b3-image-slider label > span { order: 1; width: 100%; text-align: center; }
  .bs-page .b3-image-pane figcaption { top: 12px; padding: 8px 10px; font-size: 14px; }
  .bs-page .b3-offer-summary .b3-body { font-size: 16px; }
  .b5-video-controls { padding-inline: 12px; }
  .b5-video-actions { gap: 8px; }
  .b5-video-tools { gap: 4px; }
}

.b5-demo-copy .b3-heading { font-size: clamp(26px, 2.6vw, 36px); }

@media (max-width: 1000px) {
  .b5-demo-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .b5-demo-copy .b3-body { max-width: 620px; }
}

@media (max-width: 620px) {
  .b5-demo-card { padding: 18px 16px; margin-bottom: 16px; }
}

/* ==========================================================================
   TECHNOLOGY PAGE
   --------------------------------------------------------------------------
   /technology/ and the release summary block that its articles reuse.
   ========================================================================== */

/* Technology explanation and concise entry points into flagship articles. */
.b3-tech-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 38px;
  margin-top: 45px;
}

.b3-tech-step { min-width: 0; padding-top: 24px; border-top: 1px solid #41454e; }
.b3-tech-step .card-title { font-size: 20px; }
.b3-tech-step .card-body { margin-top: 18px; color: #a5adbb; }

.b3-release-summary {
  margin: 0 0 32px;
  padding: 24px 28px;
  border: 1px solid #353a44;
  border-top: 2px solid #f06400;
  border-radius: 3px;
  background: #0d1016;
  font-family: var(--bs-font-sans);
}

.b3-release-summary .b3-small-label { color: #ff8c3a; margin: 0 0 10px; font-size: 10px; }

.b3-release-summary h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 500;
}

.b3-release-summary p { color: #c7ced9; margin: 10px 0; font-size: 15px; line-height: 1.75; }
.b3-release-summary strong { color: #fff; }
.b3-release-summary .b3-release-setup { font-size: 12px; color: #a5adbb; }

.b3-release-summary a {
  display: inline-block;
  margin-top: 10px;
  color: #ff8c3a;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* a visual method and a compact path to the evidence. */
.b4-technology .lead, .b4-technology .b3-body { text-align: left; text-wrap: pretty; }

.b4-tech-intro {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  align-items: center;
  gap: 70px;
}

.b4-tech-intro .hero-title { font-size: clamp(42px,5vw,70px); }
.b4-tech-intro .lead { max-width: 520px; font-size: 18px; }
.b4-precision-figure { margin: 0; padding: 28px 0 0; border-top: 1px solid #41454e; }
.b4-precision-figure .b3-small-label { color: #f06400; }

.b4-precision-diagram {
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr);
  align-items: center;
  gap: 15px;
  margin: 32px 0 24px;
}

.b4-precision-label {
  display: block;
  margin-bottom: 20px;
  font-size: 12px;
  font-family: var(--bs-font-mono);
  color: #a5adbb;
}

.b4-precision-rows { display: grid; gap: 9px; }

.b4-precision-rows i {
  display: block;
  height: 17px;
  background: repeating-linear-gradient(90deg,#626a78 0,#626a78 10px,transparent 10px,transparent 13px);
}

.b4-precision-rows--learned i {
  background: repeating-linear-gradient(90deg,#f06400 0,#f06400 10px,transparent 10px,transparent 13px);
}

.b4-precision-rows--learned i:nth-child(1) { width: 74%; }
.b4-precision-rows--learned i:nth-child(2) { width: 38%; }
.b4-precision-rows--learned i:nth-child(3) { width: 55%; }
.b4-precision-rows--learned i:nth-child(4) { width: 87%; }
.b4-precision-rows--learned i:nth-child(5) { width: 38%; }
.b4-precision-rows--learned i:nth-child(6) { width: 64%; }
.b4-precision-arrow { color: #f06400; font-size: 26px; text-align: center; }
.b4-precision-caption { margin: 0 0 16px; font-size: 14px; color: #fff; }
.b4-precision-caption span { color: #a5adbb; font-size: 12px; }
.b4-technology .b3-tech-process { margin-top: 64px; }
.b4-technology .b3-tech-step .card-title { margin-top: 14px; font-size: 19px; }
.b4-technology .b3-tech-step .card-body { margin-top: 12px; font-size: 15px; }

.b4-tech-comparison {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 80px;
}

.b4-tech-stat {
  margin: 4px 0;
  color: #f06400;
  font-family: var(--bs-font-mono);
  font-size: clamp(38px,5vw,58px);
  font-weight: 500;
  line-height: 1.1;
}

.b4-tech-stat span {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-family: var(--bs-font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.b4-tech-chart { margin: 0; }
.b4-tech-chart .size-bars-caption { margin-top: 22px; }
.b4-tech-chart .size-bars-caption a { text-decoration: underline; text-underline-offset: 3px; }

.b4-tech-mtp {
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(0,1.45fr) auto;
  gap: 30px;
  align-items: start;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid #41454e;
}

.b4-tech-mtp .card-title { font-size: 20px; }
.b4-tech-mtp .b3-body { font-size: 14px; }
.b4-tech-mtp .b3-text-link { font-size: 13px; white-space: nowrap; }
.b4-tech-deployment { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 80px; }
.b4-runtime-list { display: grid; gap: 30px; }
.b4-runtime-list article { padding-top: 22px; border-top: 1px solid #41454e; }
.b4-runtime-list .card-title { font-size: 20px; }
.b4-runtime-list .b3-body { margin: 12px 0 14px; }

.b4-tech-direction {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 80px;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid #41454e;
}

.b4-tech-direction .card-title { max-width: 340px; font-size: 22px; }
.b4-tech-research { margin-top: 40px; padding-top: 24px; border-top: 1px solid #41454e; }
.b4-tech-research .b3-small-label { margin: 0 0 10px; color: #a5adbb; }
.b4-tech-research .note { margin-bottom: 10px; }
.b4-research-links { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 13px; }
.b4-research-links a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.b4-technology .cta-band { align-items: center; }

/* 2026-09-15: articles use the full article width again, as on the original
   blog. The reading-measure caps and the reserved contents rail are lifted;
   the floating contents stays on the right as before, over the page margin. */
#blog-content .blog-body > .b3-release-summary { margin-inline: auto; width: auto; max-width: none; }

.bs-page .b4-precision-figure .b3-small-label { color: #ff8c3a; }

.bs-page .b4-research-links,
.bs-page .b4-precision-label,
.bs-page .b4-precision-caption > span {
  font-size: 14px;
  line-height: 1.6;
}

/* Chart labels stay readable as the plot adapts to narrower columns. */
.b4-score-chart { display: grid; gap: 22px; margin-bottom: 20px; }

.b4-score-baseline { margin: 0; color: var(--bs-text-2); font-size: 14px; text-align: right; }

.b4-score-label {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 8px;
  color: var(--bs-text-2);
  font: 14px/1.6 var(--bs-font-mono);
}

/* Counters sit outside the clipped fill so they remain visible during entry. */
.b4-score-track { border-right: 1px dashed var(--bs-data-tick); position: relative; }

.b4-score-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--score-width);
  height: 34px;
  padding-inline: 10px;
  background: var(--bs-data-base);
  color: var(--bs-text);
  border-radius: 2px;
}

.b4-score-fill--ours { background: var(--bs-accent); color: var(--bs-text-on-accent); }
.bs-page .b4-score-fill > strong { color: inherit; font: 600 16px/1.3 var(--bs-font-mono); }

.bs-page .b4-score-value {
  position: absolute;
  top: 50%;
  left: calc(var(--score-width) + 8px);
  transform: translateY(-50%);
  color: var(--bs-text);
  font: 600 16px/1.3 var(--bs-font-mono);
}

/* Equal cells make every illustrated bit a complete block at every width. */
.b5-bit-row {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: clamp(1px, .25vw, 3px);
  width: 100%;
}

.b5-bit {
  display: block;
  min-width: 0;
  height: 17px;
  background: #626a78;
  transition: opacity 70ms linear;
}

.b4-precision-rows--learned .b5-bit { background: var(--bs-accent); }
.b5-bit--off { opacity: 0; }

/* Tablet columns can also wrap the learned label; align both sets of rows. */
.bs-page .b4-precision-label {
  display: flex;
  align-items: flex-end;
  min-height: 3.2em;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .b3-tech-process { grid-template-columns: minmax(0,1fr); gap: 26px; margin-top: 28px; }
  .b3-tech-step { padding-top: 20px; }
  .b3-release-summary { padding: 20px; }
  .b3-release-summary h2 { font-size: 20px; }
  .b3-release-summary p { font-size: 14px; }
}

@media (max-width: 1000px) {
  .b4-tech-intro { gap: 34px; }
  .b4-tech-comparison, .b4-tech-deployment, .b4-tech-direction { gap: 38px; }
  .b4-tech-mtp { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 20px 30px; }
  .b4-tech-mtp .b3-text-link { grid-column: 2; }
}

@media (max-width: 700px) {

  .b4-tech-intro, .b4-tech-comparison, .b4-tech-deployment, .b4-tech-direction, .b4-tech-mtp {
    grid-template-columns: minmax(0,1fr);
    gap: 30px;
  }

  .b4-tech-intro .hero-title { font-size: clamp(38px,10vw,58px); }
  .b4-tech-intro .lead { font-size: 17px; }
  .b4-precision-figure { margin-top: 14px; }
  .b4-precision-diagram { gap: 10px; }
  .b4-precision-label { font-size: 11px; }
  .b4-technology .b3-tech-process { margin-top: 38px; }
  .b4-tech-mtp .b3-text-link { grid-column: auto; }
  .b4-tech-mtp { gap: 16px; margin-top: 34px; }
  .b4-tech-direction { gap: 16px; margin-top: 36px; }
  .b4-tech-research { margin-top: 30px; }
}

.bs-page .b3-text-link, .bs-page .b3-button { font-size: 15px; }

/* ==========================================================================
   OPTIMIZE PAGE
   --------------------------------------------------------------------------
   /optimize/.
   ========================================================================== */

.b3-optimize-opening .hero-title { font-size: clamp(42px, 4.8vw, 66px); max-width: 16ch; }
.b3-optimize-opening .lead { font-size: 18px; }
.b3-delivery .b3-heading { font-size: clamp(28px, 2.6vw, 37px); line-height: 1.2; margin: 18px 0 22px; }
/* An open block like the Company thesis aside and the method steps: a
   hairline on top, no box, rows split by hairlines, step-title labels. */
.b3-delivery { border-top: 1px solid var(--bs-line-strong); padding-top: 26px; margin-top: 9px; }
.b3-delivery-list { margin: 0; }
.b3-delivery-list > div { border-top: 1px solid var(--bs-line-strong); padding: 18px 0; }
.b3-delivery-list > div:last-child { padding-bottom: 0; }
.b3-delivery-list dt { margin: 0 0 6px; color: #fff; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.b3-delivery-list dd { margin: 0; color: #a5adbb; font-size: 13px; line-height: 1.75; }
.b3-constraint-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.b3-constraint-grid > article { min-width: 0; border-top: 1px solid #3b414c; padding-top: 22px; }
.b3-constraint-grid .b3-step-title { margin-top: 13px; }
.b3-engagement-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3b414c; }

.b3-engagement-list > li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 22px;
  padding: 25px 0;
  border-bottom: 1px solid #3b414c;
}

.b3-engagement-list .b3-small-label { padding-top: 4px; color: #f06400; }
.b3-example-grid .link-arrow { margin-top: 18px; }
.b3-example-grid .b3-body { font-size: 13px; }
.b3-optimize-opening ~ #contact .grid--aside { max-width: 800px; grid-template-columns: minmax(0, 1fr); }

.bs-page .b3-kicker, .bs-page .b3-small-label {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .07em;
  color: #b8c0cc;
}

.bs-page .b3-engagement-list .b3-small-label { color: #ff8c3a; }
.bs-page .b3-delivery-list dd { color: #b8c0cc; font-size: 16px; line-height: 1.7; }
.bs-page .b3-delivery-list dt { font-size: 20px; }

/* ShapeLearn contact: a centered heading and balanced form. */
.b3-optimize-contact .b3-contact-heading {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.b3-optimize-contact .b3-contact-heading .section-sub {
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
  text-align-last: auto;
}

.b3-optimize-contact .b3-contact-panel { width: min(100%, 760px); margin-inline: auto; }

.b3-optimize-contact .b3-contact-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.b3-optimize-contact .bs-form-actions { align-items: center; }
.b3-optimize-contact .captcha-container { display: flex; justify-content: center; }
.b3-optimize-contact .captcha-container .g-recaptcha { flex: 0 0 304px; transform-origin: center top; }
.b3-optimize-contact .bs-help { text-align: center; }

@media (max-width: 900px) {
  .b3-constraint-grid { gap: 24px; }
  .b3-delivery { margin-top: 0; }
}

@media (max-width: 700px) {
  .b3-constraint-grid { grid-template-columns: minmax(0, 1fr); }
  .b3-optimize-opening .hero-title { font-size: clamp(40px, 10vw, 58px); }
  .b3-optimize-opening .lead { font-size: 16px; }
  .b3-engagement-list > li { gap: 15px; }
}

.bs-page .b3-body { color: #b8c0cc; font-size: 16px; line-height: 1.7; }

@media (min-width: 640px) {
  .b3-optimize-contact .b3-contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   COMPANY PAGE
   --------------------------------------------------------------------------
   /company/, its founders, investors and papers.
   ========================================================================== */

/* Company narrative and custom optimization. */
.b3-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 105px);
  align-items: start;
}

.b3-story-grid > * { min-width: 0; }
.b3-company-opening .hero-title { font-size: clamp(42px, 4.8vw, 66px); max-width: 16ch; }
.b3-company-opening .lead { font-size: 18px; }
/* The same hairline every other block on the site opens with; the thesis is
   not a highlighted panel. */
.b3-thesis { border-top: 1px solid var(--bs-line-strong); padding-top: 26px; margin-top: 9px; }
.b3-thesis .b3-heading { font-size: clamp(28px, 2.6vw, 37px); line-height: 1.2; margin: 18px 0 22px; }
.b3-thesis .b3-text-link { margin-top: 24px; }
.b3-evidence-panel { padding-block: 16px 8px; border-top: 1px solid #3b414c; }
.b3-evidence-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }

.b3-evidence-value {
  color: #f06400;
  font-family: var(--bs-font-mono);
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -.055em;
  font-weight: 400;
  margin: 8px 0 10px;
}

.b3-evidence-value span { font-size: 15px; letter-spacing: -.02em; }

.b3-evidence-label {
  color: #fff;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  max-width: 24ch;
}

.b3-paper-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #3b414c; }
.b3-paper-list li { border-bottom: 1px solid #3b414c; }

.b3-paper-list a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}

.b3-paper-list a:hover { color: #ff8c3a; }

.b3-company-opening ~ .section .person-card {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.b3-company-opening ~ .section .person-card:hover { transform: none; background: transparent; }

.b3-company-opening ~ .section .person-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  border-radius: 3px;
  object-fit: cover;
}

.b3-company-opening ~ .section .person-grid { gap: 28px; }

.b3-company-opening ~ .section .investor-card {
  border-radius: 3px;
  background: #0d1016;
  box-shadow: none;
}

/* Equal partner cards span the company page's content width. */
/* Keep stacked investor cards equal even when their captions wrap differently. */
#investors .investor-grid { align-items: stretch; gap: 24px; grid-auto-rows: 1fr; }

#investors .investor-card { width: 100%; min-height: 214px; padding: 32px; }
#investors .investor-logo-wrap { min-height: 88px; }

#investors .investor-logo-wrap img {
  width: auto;
  height: auto;
  max-width: min(100%, 290px);
  max-height: 72px;
}

#investors .investor-name { max-width: 42ch; }
.bs-page .b3-evidence-label { font-size: 14px; line-height: 1.6; }

/* Founder portraits and contributions have equal space in a two-column layout. */
.bs-page .b5-founder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

.bs-page .b5-founder-grid .person-card {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 16px 24px;
  height: 100%;
  text-align: left;
  align-items: start;
}

.bs-page .b5-founder-grid .person-photo { grid-row: 1 / 3; width: 144px; height: 144px; margin: 0; }
.bs-page .b5-founder-grid .link-arrow { grid-column: 2; margin-top: 0; justify-self: start; }
/* Bios fill their measure like the homepage copy: justified, last line left,
   never hyphenated. */
.bs-page .b5-founder-grid .card-body {
  font-size: 15px;
  line-height: 1.7;
  text-align: justify;
  text-align-last: left;
  text-wrap: wrap;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.bs-page .b5-founder-grid .person-role { font-size: 14px; line-height: 1.5; }

.b5-paper-list .b5-paper-venue {
  display: block;
  margin-top: 4px;
  color: var(--bs-text-2);
  font-size: 14px;
}

.bs-page .b5-paper-list a { font-size: 15px; }

.b5-paper-disclosure > summary {
  width: fit-content;
  padding-block: 10px;
  font-size: 15px;
  cursor: pointer;
  color: var(--bs-text);
}

.b5-paper-disclosure .b5-paper-list { margin-block: 10px 20px; }

.bs-page .b5-team-grid > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 40px) / 2);
  justify-self: center;
}

.bs-page .b5-team-grid .person-card { scroll-margin-top: 110px; }

@media (max-width: 900px) {
  .b3-story-grid { gap: 36px; }
  .b3-evidence-metrics { grid-template-columns: 1fr; gap: 15px; }
  .b3-evidence-label { max-width: none; }
}

@media (max-width: 700px) {
  .b3-story-grid { grid-template-columns: minmax(0, 1fr); }
  .b3-company-opening .hero-title { font-size: clamp(40px, 10vw, 58px); }
  .b3-company-opening .lead { font-size: 16px; }
  .b3-thesis { margin-top: 0; }
  .b3-evidence-metrics { grid-template-columns: 1fr 1fr; gap: 16px; }
  .b3-evidence-value { font-size: 30px; }
  .b3-company-opening ~ .section .person-grid { gap: 32px 20px; }
}

@media (max-width: 620px) {
  #investors .investor-card { min-height: 200px; padding: 28px 22px; }
  #investors .investor-logo-wrap img { max-width: min(100%, 250px); }
}

@media (max-width: 1000px) {
  .bs-page .b5-founder-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .bs-page .b5-founder-grid .person-card { grid-template-columns: 90px minmax(0, 1fr); gap: 14px 20px; }
  .bs-page .b5-founder-grid .person-photo { width: 90px; height: 90px; }
}

@media (max-width: 1000px) {
  .bs-page .b5-team-grid > li:last-child:nth-child(odd) { width: 100%; }
}

/* Keep the final team card the same width as the preceding pair. */
.bs-page .b5-team-grid.person-grid { gap: 40px; }

/* ==========================================================================
   MODELS CATALOG
   --------------------------------------------------------------------------
   /models/: the filter bar and the catalog table.
   ========================================================================== */

/* --- catalog: filter bar ----------------------------------------------- */
.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius);
  background: var(--bs-surface);
}

.cat-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cat-filter-label {
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-chip {
  box-sizing: border-box;
  padding: 7px 15px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-xs);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.16s var(--bs-ease), background-color 0.16s var(--bs-ease), color 0.16s var(--bs-ease);
}

.cat-chip:hover { border-color: var(--bs-accent-line); color: var(--bs-text); }

.cat-chip[aria-pressed="true"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
  color: var(--bs-text);
}

.cat-mem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-select {
  padding: 7px 14px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
}

.cat-status {
  margin: 0 0 14px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
}

.cat-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-name strong {
  color: var(--bs-text);
  font-weight: 600;
}

.cat-name span {
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
}

.data-table td .cat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* Catalog and finder: put the useful choices near the opening. */
.bs-editorial .b3-catalog-section { padding-top: clamp(36px, 4.3vw, 62px); }

.b3-catalog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; }
.b3-catalog-head .section-title { margin-bottom: 16px; font-size: clamp(36px, 4vw, 54px); }
.b3-catalog-head .section-sub { max-width: 640px; margin-bottom: 0; }
.b3-catalog-head .btn-primary { flex-shrink: 0; }

.b3-catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 30px 0 26px;
  padding: 0;
  list-style: none;
  color: #a5adbb;
  font-size: 14px;
}

.b3-catalog-meta strong { color: #ffffff; font-weight: 600; }
.bs-page .cat-filter-label { font-size: 14px; }

/* --- model catalog table --------------------------------------------------
   Seven columns, names on one line with the type as a small tag, build count
   and best score stacked over their detail, mono numbers, even row height and
   a quiet hover. The row attributes the filter and checker read are unchanged. */
#cat-table { min-width: 960px; table-layout: auto; }

#cat-table th {
  padding: 14px 16px 12px;
  background: var(--bs-surface-2);
  border-bottom: 1px solid var(--bs-line-strong);
  color: var(--bs-text-3);
  vertical-align: bottom;
}

#cat-table th .cat-th-sub {
  display: block;
  margin-top: 2px;
  color: var(--bs-text-3);
  font-size: 0.62rem;
  letter-spacing: .08em;
  opacity: .8;
}

#cat-table td {
  padding: 16px 16px;
  vertical-align: middle;
  color: var(--bs-text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

#cat-table tbody tr { transition: background-color .15s ease; }
#cat-table tbody tr:hover { background: var(--bs-surface-2); }
#cat-table th:nth-child(1) { width: 26%; }
#cat-table th:nth-child(2) { width: 14%; }
#cat-table th:nth-child(3) { width: 11%; }
#cat-table th:nth-child(4) { width: 10%; }
#cat-table th:nth-child(5) { width: 11%; }
#cat-table th:nth-child(6) { width: 18%; }
#cat-table th:nth-child(7) { width: 10%; }
#cat-table td:nth-child(2) { white-space: nowrap; }
#cat-table .cat-name { gap: 4px; }
#cat-table .cat-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

#cat-table .cat-name strong {
  color: var(--bs-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}

#cat-table .cat-tag {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--bs-line-strong);
  border-radius: 4px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

#cat-table .cat-creator { color: var(--bs-text-3); font-size: 12px; }
#cat-table td.num { text-align: left; color: var(--bs-text); font-size: 14px; }
#cat-table .cat-stack { white-space: nowrap; }

#cat-table .cat-count {
  display: block;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  line-height: 1.3;
}

#cat-table .cat-sub {
  display: block;
  margin-top: 2px;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .02em;
}

#cat-table .text-dim {
  display: block;
  margin-top: 2px;
  color: var(--bs-text-3);
  font-size: 11.5px;
  line-height: 1.5;
}

#cat-table td .cat-links { flex-direction: column; gap: 4px; }

#cat-table td .cat-links a, #cat-table td > .link-quiet {
  color: var(--bs-accent-bright);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .b3-catalog-head { align-items: flex-start; flex-direction: column; gap: 22px; }
}

@media (max-width: 620px) {
  .b3-catalog-meta { gap: 10px 18px; font-size: 13px; }
  #cat-table td { padding: 14px 12px; }
}

/* ==========================================================================
   MODEL FINDER
   --------------------------------------------------------------------------
   /model-selector/ and the finder markup that /js/model-finder.js renders.
   Its classes are prefixed `.fnd-`, so they cannot collide with the legacy
   styles.css on blog pages.
   ========================================================================== */

.finder-shell {
  box-sizing: border-box;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  background: var(--bs-surface);
}

#model-finder {
  display: block;
  min-height: 4rem;
}

#model-finder:empty { min-height: 0; }

.finder-fallback {
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
}

/* --- finder: question steps -------------------------------------------- */
.fnd-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bs-line);
}

.fnd-step:first-child { padding-top: 0; }
.fnd-step:last-child { border-bottom: 0; padding-bottom: 4px; }

.fnd-step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.fnd-step-num {
  flex: none;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.fnd-step-label {
  margin: 0;
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.fnd-step-hint {
  margin: 3px 0 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.5;
}

.fnd-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* --- finder: option pills ---------------------------------------------- */
.fnd-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-optgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fnd-optgroup-label {
  flex: none;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fnd-opt {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s var(--bs-ease), background-color 0.16s var(--bs-ease), color 0.16s var(--bs-ease);
}

.fnd-opt:hover {
  border-color: var(--bs-accent-line);
  color: var(--bs-text);
}

.fnd-opt[aria-pressed="true"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
  color: var(--bs-text);
}

.fnd-opt--num {
  font-family: var(--bs-font-mono);
  font-variant-numeric: tabular-nums;
  padding-inline: 12px;
}

/* --- finder: result panel ---------------------------------------------- */
.fnd-result {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--bs-line);
}

.fnd-rec-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fnd-rec-name {
  margin: 0;
  font-size: var(--bs-fs-h3);
  font-weight: 600;
}

.fnd-rec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  letter-spacing: 0.02em;
}

.fnd-rec-file {
  color: var(--bs-accent-bright);
  overflow-wrap: anywhere;
}

.fnd-rec-body {
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  line-height: 1.6;
}

.fnd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 22px;
  margin: 0;
  padding: 16px 0;
  border-block: 1px solid var(--bs-line);
}

.fnd-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fnd-stat-value {
  margin: 0;
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: 1.32rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.fnd-stat-value--accent { color: var(--bs-accent-bright); }

.fnd-stat-value .unit {
  color: var(--bs-text-3);
  font-size: 0.62em;
  font-weight: 400;
}

.fnd-stat-label {
  margin: 0;
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.45;
}

.fnd-meter {
  width: 100%;
  height: 6px;
  margin-top: 4px;
  border: 1px solid var(--bs-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.fnd-meter-fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--bs-accent);
}

.fnd-fit {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: var(--bs-text-2);
  font-size: var(--bs-fs-sm);
  line-height: 1.55;
}

.fnd-fit::before {
  content: "\2713";
  flex: none;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
}

.fnd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* --- finder: measured-speed list --------------------------------------- */
.fnd-bench {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-bench-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}

.fnd-bench-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.fnd-bench-name {
  color: var(--bs-text-3);
  font-size: var(--bs-fs-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fnd-bench-val {
  flex: none;
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fnd-bench-rail {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.fnd-bench-fill {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: var(--bs-data-base);
}

.fnd-bench-row--match .fnd-bench-name, .fnd-bench-row--match .fnd-bench-val { color: var(--bs-text); }
.fnd-bench-row--match .fnd-bench-fill { background: var(--bs-accent); }

/* --- finder: alternates ------------------------------------------------ */
.fnd-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnd-alt {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text);
  font-family: var(--bs-font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s var(--bs-ease), background-color 0.16s var(--bs-ease);
}

.fnd-alt:hover { border-color: var(--bs-accent-line); background: var(--bs-surface-3); }

.fnd-alt[aria-pressed="true"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
}

.fnd-alt-label {
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.fnd-alt-meta {
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-xs);
  line-height: 1.4;
}

/* --- finder: run block ------------------------------------------------- */
.fnd-run {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--bs-line);
}

.fnd-run-title {
  margin: 0;
  font-size: var(--bs-fs-sm);
  font-weight: 600;
}

.fnd-run-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fnd-run;
}

.fnd-run-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fnd-run-step-label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--bs-text);
  font-size: var(--bs-fs-sm);
  font-weight: 600;
}

.fnd-run-step-label::before {
  counter-increment: fnd-run;
  content: counter(fnd-run);
  flex: none;
  min-width: 20px;
  height: 20px;
  border: 1px solid var(--bs-accent-line);
  border-radius: 50%;
  color: var(--bs-accent-bright);
  font-family: var(--bs-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

.fnd-code {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-bg);
}

.fnd-code pre {
  margin: 0;
  padding: 14px 54px 14px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fnd-code code {
  color: var(--bs-text);
  font-family: var(--bs-font-mono);
  font-size: 0.8rem;
  line-height: 1.65;
  white-space: pre;
}

.fnd-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 12px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-pill);
  background: var(--bs-surface-2);
  color: var(--bs-text-2);
  font-family: var(--bs-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.fnd-copy:hover { border-color: var(--bs-accent-line); color: var(--bs-text); }
.fnd-copy.is-done { border-color: var(--bs-accent); color: var(--bs-accent-bright); }

.fnd-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--bs-line-strong);
  border-radius: var(--bs-radius-sm);
  background: var(--bs-surface-2);
}

.fnd-empty-title {
  margin: 0;
  font-size: var(--bs-fs-h3);
  font-weight: 600;
}

.fnd-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.fnd-loading {
  margin: 0;
  color: var(--bs-text-3);
  font-family: var(--bs-font-mono);
  font-size: var(--bs-fs-sm);
}

/* A grid item's automatic minimum size is its min-content width, so a card
   holding a <pre> with a long unbreakable URL inflates its whole grid column
   past a 375px viewport. These blocks opt out; the <pre> then scrolls inside
   itself. Scoped to the blocks that actually carry code. */
.fnd-result, .fnd-run, .fnd-run-step, .fnd-code, .fnd-code pre {
  min-width: 0;
  max-width: 100%;
}

.bs-editorial .b3-selector-section { padding-top: clamp(36px, 4.3vw, 62px); }
.b3-selector-head { margin-bottom: 25px; }
.b3-selector-head .section-title { font-size: clamp(36px, 4vw, 54px); margin-bottom: 16px; }
.b3-selector-head .section-sub { max-width: 750px; }
.b3-selector-modes { display: flex; gap: 8px; border-bottom: 1px solid #2b303a; margin-bottom: 16px; }

.b3-selector-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  color: #a5adbb;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.b3-selector-mode[aria-current="page"] {
  color: #ffffff;
  background: #0d1016;
  border-bottom-color: #f06400;
}

.b3-selector-mode:hover { color: #ffffff; background: #0d1016; }
.b3-selector-mode:focus-visible { outline: 2px solid #f06400; outline-offset: 4px; }
.b3-selector-context { margin-bottom: 28px; }
.b3-selector-context .note { margin: 0; }
.b3-selector-section .fnd-steps { padding: 0; }

/* Mode links use the same shape as the hardware choices below them. */
.bs-page .b3-selector-modes {
  gap: 8px;
  padding-bottom: 16px;
}

.bs-page .b3-selector-mode { border: 1px solid var(--bs-line-strong); }

.bs-page .b3-selector-mode[aria-current="page"] {
  border-color: var(--bs-accent);
  background: var(--bs-accent-soft);
}

.bs-page .fnd-optgroup-label, .bs-page .fnd-stat-value .unit { font-size: 14px; }

@media (min-width: 720px) {

  .fnd-step {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
    gap: 24px;
    align-items: start;
  }
}

@media (max-width: 560px) {
  .fnd-code code { font-size: 0.74rem; }
}

@media (max-width: 620px) {
  .b3-selector-mode { flex: 1; padding: 12px 8px; font-size: 14px; text-align: center; }
  .b3-selector-modes { gap: 0; }
  .b3-selector-context { margin-bottom: 20px; }
}

/* ==========================================================================
   LEGACY PAGE OVERRIDES
   --------------------------------------------------------------------------
   Pages that keep css/styles.css and their own body: the blog listing, blog
   posts, /demo/ and /run-hf-model/. These rules only ever match there.
   ========================================================================== */

/* Legacy pages adopting the shared shell: the blog listing, blog posts,
   /run-hf-model/ and /demo/. They keep `css/styles.css` and their own `<body>`
   (no `.bs-page`); only the header and footer are new.

   `css/styles.css` pads `#blog-content` / `#blog-listing` down by 120px (90px
   / 80px at the small breakpoints) to clear the OLD `position: fixed` nav. The
   new `.site-header` is sticky and occupies layout space, so that clearance is
   now dead air. Same specificity as the legacy rules, declared later, with no
   `!important`, and it only ever matches on pages that carry those ids. */
#blog-content, #blog-listing { padding-top: clamp(30px, 4vw, 48px); }

.blog-listing-header p,
#blog-content .blog-section > p,
#blog-content .blog-section > .blog-list {
  text-wrap: pretty;
}

.blog-listing-header, .blog-listing-header p {
  width: min(100%, var(--bs-measure));
  max-width: var(--bs-measure);
}

/* Recorded demonstrations: useful before playback or scripting. */
.bs-demos .fade-up { opacity: 1; transform: none; transition: none; }

.bs-demos .demo-hero { padding-top: 90px; }

.bs-demos .demo-hero h1 {
  max-width: 20ch;
  font-family: var(--bs-font-sans);
  font-weight: 500;
  letter-spacing: -.04em;
}

.bs-demos .hero-label {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--bs-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}

.bs-demos .demo-card {
  background: #0d1016;
  border-radius: 3px;
  border-color: #3b414c;
  box-shadow: none;
  transition: none;
}

.bs-demos .demo-card:hover {
  transform: none;
  background: #0d1016;
  box-shadow: none;
  border-color: #3b414c;
}

.bs-demos .demo-card-header { text-align: left; }
.bs-demos .hw-badge { padding: 0; border: 0; border-radius: 0; background: none; }
.bs-demos .compression-note { justify-content: flex-start; padding: 0; background: none; }
.bs-demos .demo-card-video { margin-top: 0; }
.bs-demos .demo-card-video video { border-radius: 0; }
.bs-demos .demo-recording-context { padding: 20px; }

.bs-demos .demo-recording-label {
  margin: 0 0 12px;
  font: 9px/1.7 var(--bs-font-mono);
  color: #a5adbb;
  letter-spacing: .06em;
}

.bs-demos .demo-recording-summary { margin: 0; font: 14px/1.75 var(--bs-font-sans); color: #fff; }

.bs-demos .demo-recording-details {
  margin-top: 16px;
  font: 12px/1.8 var(--bs-font-sans);
  color: #a5adbb;
}

.bs-demos .demo-recording-details summary { padding-block: 6px; color: #fff; cursor: pointer; }
.bs-demos .demo-recording-details p { font-size: 12px; color: #a5adbb; }

.bs-demos .demo-source-link {
  display: inline-block;
  margin-top: 14px;
  font: 13px/1.6 var(--bs-font-sans);
  color: #ff8c3a;
  text-underline-offset: 3px;
}

.bs-demos .demo-source-link:hover { color: #fff; }
.bs-demos .info-content { background: #0d1016; border-radius: 3px; box-shadow: none; }
.bs-demos .demo-group-header .section-subtitle { color: #a5adbb; }
.bs-demos :focus-visible { outline: 2px solid #f06400; outline-offset: 4px; }

/* Keep the article reading column centered while charts and tables stay wide. */
#blog-content .blog-header,
#blog-content .blog-section > h2,
#blog-content .blog-section > h3,
#blog-content .blog-section > h4,
#blog-content .blog-section > p,
#blog-content .blog-section > .blog-list {
  margin-inline: auto;
}

#blog-content .blog-body > .series-nav,
#blog-content .blog-body > .series-pager,
#blog-content .blog-section > .series-nav,
#blog-content .blog-section > .series-pager,
#blog-content .blog-section > .blog-info-box,
#blog-content .blog-section > .part-intro,
#blog-content .blog-section > .disclaimer-box,
#blog-content .blog-section > blockquote {
  margin-inline: auto;
}

/* The evaluation series sets an important shorthand on equations. */
#blog-content .blog-section > .math-display { margin-inline: auto !important; }

#blog-content .blog-table { margin-inline: auto; }

/* Published-result links arrive below the sticky shared header. */
#blog-content .blog-body [id] { scroll-margin-top: 100px; }

.blog-toc-item a:focus-visible,
.blog-toc-toggle:focus-visible,
.blog-toc-close:focus-visible {
  outline: 2px solid var(--bs-accent, #f06400);
  outline-offset: -2px;
}

/* Scale legacy fixed-size embeds to the available article column. */
.blog-with-toc .blog-figure iframe {
  transform: scale(var(--blog-chart-scale, .8));
  margin-block: var(--blog-chart-margin, -80px);
}

/* The legacy heatmap defines an important margin shorthand. */
.blog-with-toc .blog-figure-heatmap iframe { margin-block: var(--blog-chart-margin, -90px) !important; }

.blog-filter-chip,
.blog-empty-reset,
.blog-toc-toggle,
.blog-toc-close,
.model-download-btn,
.qi-cta,
.qi-tab,
.qpt-opt,
.cmd-row .copy-btn {
  border-radius: var(--bs-radius-pill);
}

/* Image explorer choices share the site's action shape. */
.cmp-chip-picks .cmp-pick { border-radius: var(--bs-radius-pill); }

/* One decorative field behind the black sections of every full site page. */
.bs-network-page { position: relative; isolation: isolate; }

.bs-network-page .demo-hero, .bs-network-page .demos-section { background-color: transparent; }

/* Give translucent content panels an opaque backing over the moving field. */
.bs-network-page .legend-wrapper,
.bs-network-page .series-nav,
.bs-network-page .series-pager-link,
.bs-network-page .run-card,
.bs-network-page .cmp-card,
.bs-network-page .cmp-families,
.bs-network-page .arch-node,
.bs-network-page .arch-engines {
  background-color: var(--bs-surface);
}

.bs-network-page .blog-body pre { background-color: var(--bs-surface); }

/* Legacy posts can declare their legend styling after the shared stylesheet. */
.bs-network-page .chart-legend .legend-wrapper { background-color: var(--bs-surface); }

.bs-network-page .cmp-sheet .cmp-card, .bs-network-page .series-pager .series-pager-link {
  background-color: var(--bs-surface);
}

#blog-content .blog-header,
#blog-content .blog-section > h2,
#blog-content .blog-section > h3,
#blog-content .blog-section > h4,
#blog-content .blog-section > p,
#blog-content .blog-section > .blog-list,
#blog-content .blog-body > .series-nav,
#blog-content .blog-body > .series-pager,
#blog-content .blog-section > .series-nav,
#blog-content .blog-section > .series-pager,
#blog-content .blog-section > .blog-info-box,
#blog-content .blog-section > .part-intro,
#blog-content .blog-section > .disclaimer-box,
#blog-content .blog-section > blockquote {
  width: auto;
  max-width: none;
}

@media (min-width: 901px) {

  #blog-content .blog-section > p {
    text-justify: inter-word;
    text-wrap: pretty;
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
  }
}

@media (max-width: 620px) {
  .bs-demos .demo-hero { padding-top: 52px; }
  .bs-demos .demo-hero h1 { font-size: 37px; }
  .bs-demos .info-content { padding: 24px; }
}

@media (min-width: 1200px) {

  .blog-toc.desktop {
    top: calc(var(--bs-header-h, 68px) + 40px);
    max-height: calc(100dvh - var(--bs-header-h, 68px) - 68px);
  }
}

.blog-toc.mobile {
  width: min(340px, calc(100vw - 24px));
  height: 100dvh;
  max-height: 100dvh;
}

@media (min-width: 1200px) {

  .blog-with-toc #blog-content {
    width: auto;
    max-width: calc(var(--bs-container, 1140px) + 2 * var(--bs-gutter, 40px));
    padding-inline: var(--bs-gutter, 40px);
  }
}

/* ==========================================================================
   MOTION AND PRINT OPT-OUTS
   --------------------------------------------------------------------------
   The opt-outs, gathered here so they always win at equal specificity and
   never have to be repeated. Under reduced motion every animation and
   transition is off and the static frame shows. Print drops the decoration
   and lays both hero cards out in flow.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* smooth anchor scrolling only on new pages, and only if motion is welcome */
  html:has(> body.bs-page) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(> body.bs-page) { scroll-behavior: auto; }

  .js-reveal .reveal, .js-reveal .reveal.is-in {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .btn-primary,
  .btn-secondary,
  .card--hover,
  .link-arrow::after,
  .site-nav-toggle-bar,
  .skip-link {
    transition: none !important;
  }

  /* The mobile panel appears in place instead of dropping in. */
  .site-header.is-nav-open .site-nav { animation: none; }

  .btn-primary:hover, .btn-secondary:hover, .card--hover:hover, .link-arrow:hover::after {
    transform: none !important;
  }

  .modal, .bs-input, .social-chip {
    animation: none !important;
    transition: none !important;
  }

  .fnd-opt, .fnd-alt, .cat-chip, .fnd-copy, .fnd-bench-fill, .fnd-meter-fill {
    transition: none !important;
    animation: none !important;
  }

  .b3-button, .b3-proof-choice { transition: none; }

  .b3-page-network {
    position: absolute;
    background-image: url('/images/hero-network.svg?v=3.7');
    -webkit-mask-image: none;
    mask-image: none;
    opacity: .34;
  }

  .b3-page-network-canvas { display: none; }

  .blog-toc.desktop, .blog-toc-item {
    animation: none;
    opacity: 1;
  }

  .blog-toc.mobile, .blog-toc-indicator, .blog-toc-item a { transition: none; }

  /* Keep the static fallback visible even while a media-change event is pending. */
  .bs-network-page .b3-page-network { background-image: url('/images/hero-network.svg?v=3.7'); }

  /* The car cartoon, the javelin cartoon and the deck all stop here. One rule
     covers them because this section comes last. */
  .b3-hero-cartoon, .b3-hero-cartoon * { animation: none; }

  /* The tabs still choose a card; only the movement goes away. Both selectors
     match the specificity of the rules they have to beat. */
  .b3-hero-deck .b3-hero-card { transition: none; animation: none; }

  .b3-hero-tab.is-active .b3-hero-tab-progress { animation: none; }
}

@media print {
  .b3-page-network { display: none; }
  .bs-home .b3-hero { min-height: 0; }
  .blog-toc, .blog-toc-toggle, .blog-toc-overlay { display: none !important; }
  .blog-with-toc #blog-content { width: auto; }
  .b3-hero-cartoon, .b3-hero-cartoon * { animation: none; }
  .b3-hero-tabs { display: none; }
  .b3-hero-tab.is-active .b3-hero-tab-progress { animation: none; }
  .b3-hero-deck { display: block; padding-bottom: 0; }

  .b3-hero-deck .b3-hero-card {
    grid-area: auto;
    transform: none;
    opacity: 1;
    filter: none;
    cursor: auto;
    transition: none;
  }

  .b3-hero-deck .b3-hero-card + .b3-hero-card { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce), print {
  .bs-page [data-motion-bar] { clip-path: none !important; }
  .bs-page .bs-motion-final { opacity: 1; }
  .bs-page .bs-motion-current { display: none !important; }
  .b5-bit { transition: none; }
}