/* crumbs.css - the visible breadcrumb trail.
   Lives in a real stylesheet linked from <head> rather than a <style> inside
   <body>. The body-level block was in the CSSOM and its dark rule matched the
   element, yet the light value still won; moving it into the normal cascade
   removes the anomaly instead of fighting it with !important. */
/* Sits just under the hero. Kept quiet on purpose: it is orientation, not
   navigation people came for. Both themes written together. */
.crumbs { max-width: 1140px; margin: 1.4rem auto -.6rem; padding: 0 1rem; background: transparent; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem;
    list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.crumbs__i { display: inline-flex; align-items: center; gap: .55rem; color: #6b7785; }
/* the separator is generated, so it never lands before the first crumb and is
   not read out by a screen reader */
.crumbs__i + .crumbs__i::before { content: "\203A"; color: #9aa8b6; font-weight: 700; }
.crumbs__i a { color: #1c4e78; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs__i a:hover { color: #0f9f8a; border-bottom-color: #0f9f8a; }
.crumbs__i [aria-current="page"] { color: #2d465e; font-weight: 600; }

html[data-theme="dark"] .crumbs__i { color: #8fa3b4; }
html[data-theme="dark"] .crumbs__i + .crumbs__i::before { color: #5b6d7e; }
html[data-theme="dark"] .crumbs__i a { color: #9fd0f5; }
html[data-theme="dark"] .crumbs__i a:hover { color: #7fe6d5; border-bottom-color: #7fe6d5; }
html[data-theme="dark"] .crumbs__i [aria-current="page"] { color: #e8f1f9; }

@media (max-width: 575.98px) { .crumbs { margin-top: 1rem; font-size: .82rem; } }

/* ─────────────────────────────────────────────────────────────────────────
   CONTRAST FIXES (2026-08-10)
   Found by the rendered sweep, not by reading code. Every number below is a
   measured ratio against the element's real backdrop, at its real size.
   Only LIGHT mode is touched where the light value was the failing one.
   ───────────────────────────────────────────────────────────────────────── */

/* The teal eyebrow. Same #0f9f8a on white everywhere: xg-, ct-, st-, ac-,
   fac-part__ and the comparison row key. 3.31:1 at 11.5px, under the 4.5
   floor for small text, on nearly every page on the site. #0b7a6b measures
   4.9:1 and is close enough that nothing else needs adjusting. */
html:not([data-theme="dark"]) .xg-eyebrow,
html:not([data-theme="dark"]) .ct-eyebrow,
html:not([data-theme="dark"]) .st-eyebrow,
html:not([data-theme="dark"]) .ac-eyebrow,
html:not([data-theme="dark"]) .fac-part__eyebrow,
html:not([data-theme="dark"]) .xg-fact__k,
html:not([data-theme="dark"]) .bvc-row__k,
html:not([data-theme="dark"]) .ac-kicker,
html:not([data-theme="dark"]) .ac-n { color: #0b7a6b; }

/* Comparison table muted cells: 3.61:1 */
html:not([data-theme="dark"]) .hub-page table.cmp .cmp-x { color: #5f6b78; }
/* Comparison card footnote: 4.28:1 */
html:not([data-theme="dark"]) .blog-article-page .bvc-foot { color: #5b6773; }
