/* Qualified Controls - base theme CSS.
   Tokens come from tokens.css. Header/footer from qc-global.css.
   This file: global resets, typography defaults, containers, buttons, and
   shared helpers so assembled page content renders on-brand. Page-specific
   inline styles from the source HTML are preserved inside each page's content. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--qc-font-body);
	font-size: var(--qc-text-base);
	line-height: var(--qc-lh-body);
	color: var(--qc-warm-slate);
	background: var(--qc-clean-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--qc-font-heading);
	font-weight: var(--qc-fw-bold);
	line-height: var(--qc-lh-tight);
	color: inherit; /* was deep-navy: forced dark headings invisible on dark-bg page sections. Inherit lets each section (dark hero -> white, light -> navy via body) control it. */
	margin: 0 0 0.5em;
}
h1 { font-size: var(--qc-h1); font-weight: var(--qc-fw-extrabold); letter-spacing: var(--qc-heading-tracking); }
h2 { font-size: var(--qc-h2); }
h3 { font-size: var(--qc-h3); }
h4 { font-size: var(--qc-h4); }

p { margin: 0 0 1em; }

a { color: var(--qc-regulatory-teal); text-decoration: none; transition: color var(--qc-dur-fast) var(--qc-ease); }
a:hover { color: var(--qc-teal-light); }

img { max-width: 100%; height: auto; }
iframe, video { max-width: 100%; }

/* ---- Layout helpers ---- */
.qc-container { max-width: var(--qc-container); margin-inline: auto; padding-inline: var(--qc-gutter); }
.qc-container--wide { max-width: var(--qc-container-wide); }
.qc-container--prose { max-width: var(--qc-container-prose); }
.qc-section { padding-block: var(--qc-section-y-alt); }

@media (max-width: 768px) {
	.qc-section { padding-top: var(--qc-section-y-mobile); padding-bottom: var(--qc-section-y-mobile-b); }
}

/* ---- Eyebrow / mono label ---- */
.qc-eyebrow, .eyebrow {
	font-family: var(--qc-font-mono);
	text-transform: uppercase;
	letter-spacing: var(--qc-eyebrow-tracking);
	font-size: var(--qc-eyebrow);
	color: var(--qc-muted-gold);
}

/* Every .qc-eyebrow in the assembled pages sits on a white or soft-gray section
   (resources hub, the four hubs, contact, 404), where plain gold is 2.21:1 and
   fails axe at 11 to 12px. Darkened on-light gold instead. The unprefixed
   .eyebrow alias is left on the dark-surface token because pasted source pages
   use it inside dark heroes and supply their own overrides. */
.qc-eyebrow { color: var(--qc-muted-gold-on-light); }

/* Same problem in the document-library filter bar, which renders on white.
   The library markup ships with the qc-core plugin, so this is a theme-side
   override; the extra `body` keeps it winning regardless of stylesheet order. */
body .qc-filter-group__label { color: var(--qc-muted-gold-on-light); }

/* Same class of defect, different accent: --qc-teal-light on white is 3.31:1, which
   is fine for button fills and large text but fails for the 11px card line label.
   --qc-regulatory-teal is the on-light teal (6.20:1). Theme-side override for the
   same reason as above: the card markup ships with qc-core. */
body .qc-doc-card__line { color: var(--qc-regulatory-teal); }

/* ---- Buttons ---- */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--qc-font-heading);
	font-weight: var(--qc-fw-semibold);
	font-size: var(--qc-text-sm);
	color: #fff;
	background: var(--qc-grad-cta);
	border: none;
	border-radius: var(--qc-radius-lg);
	padding: 12px 24px;
	cursor: pointer;
	box-shadow: var(--qc-shadow-cta);
	transition: transform var(--qc-dur-fast) var(--qc-ease), box-shadow var(--qc-dur-fast) var(--qc-ease);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--qc-shadow-cta-hover); }

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--qc-font-heading);
	font-weight: var(--qc-fw-semibold);
	font-size: var(--qc-text-sm);
	color: var(--qc-regulatory-teal);
	background: transparent;
	border: 1px solid var(--qc-regulatory-teal);
	border-radius: var(--qc-radius-lg);
	padding: 11px 23px;
	cursor: pointer;
	transition: background var(--qc-dur-fast) var(--qc-ease), color var(--qc-dur-fast) var(--qc-ease);
}
.btn-secondary:hover { background: var(--qc-regulatory-teal); color: #fff; }

/* ---- Document single ---- */
.qc-document__crumbs { font-family: var(--qc-font-mono); font-size: var(--qc-text-xs); color: var(--qc-text-muted); display: flex; gap: 8px; margin-bottom: 16px; }
.qc-document__title { margin-bottom: 12px; }
.qc-document__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; }
.qc-document__pn { font-family: var(--qc-font-mono); font-size: var(--qc-text-sm); color: var(--qc-regulatory-teal); }
.qc-document__type { font-size: var(--qc-text-sm); color: var(--qc-text-muted); }

/* Print: hide site chrome, show only the document body. */
@media print {
	.utility-bar, .primary-nav, .qc-footer, .qc-print-btn, .qc-document__crumbs { display: none !important; }
	body { color: #000; }
}

/* ---- Skip link (a11y) ---- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #fff; padding: 8px 16px; z-index: 100000; }

/* ---- Header brand wordmark (placeholder until transparent logo arrives) ---- */
.brand-wordmark { display: inline-flex; align-items: center; gap: 10px; }
.brand-wordmark__icon { display: inline-flex; }
.brand-wordmark__text {
	font-family: var(--qc-font-heading);
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.5px;
	color: #fff;
	display: inline-flex;
	gap: 6px;
}
.brand-wordmark__sub { color: var(--qc-teal-light); }

/* ---- Homepage SPA embed: hide the bundler's own duplicate chrome (theme provides common header/footer) ---- */
#qc-main .utility-bar,
#qc-main .primary-nav,
#qc-main nav[data-qc-global-header],
#qc-main .qc-footer,
#qc-main footer[data-qc-global-footer],
#qc-main #__bundler_loading { display: none !important; }

/* ================= Document (spec sheet) pages ================= */
.qc-doc-hero {
	background: linear-gradient(135deg, var(--qc-deep-navy), var(--qc-navy-mid));
	color: #fff;
	padding: 48px 0 40px;
	border-bottom: 3px solid var(--qc-teal-light);
}
.qc-doc-hero__crumbs { font-family: var(--qc-font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--qc-muted-gold); display: flex; gap: 8px; margin-bottom: 18px; }
.qc-doc-hero__crumbs a { color: var(--qc-muted-gold); }
.qc-doc-hero__crumbs a:hover { color: #fff; }
.qc-doc-hero__title { color: #fff; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 18px; }
.qc-doc-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qc-doc-badge { font-family: var(--qc-font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; background: var(--qc-teal-light); color: #04241b; padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.qc-doc-pn { font-family: var(--qc-font-mono); font-size: 13px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--qc-glass-border); padding: 6px 12px; border-radius: 8px; }
.qc-doc-line { font-size: 13px; color: var(--qc-on-dark-muted); }
.qc-doc-hero__meta .qc-print-btn { margin-left: auto; }

/* Let the source spec sheet's OWN CSS/layout drive the body. We only provide a
   centered container and image safety - no table/heading/width overrides (those
   were squeezing the doc's two-column layout and shrinking the images). */
.qc-document__wrap { padding: 0 0 64px; }
.qc-document__body { max-width: 1180px; margin: 0 auto; padding: 40px 24px 0; }
/* :where() keeps this at the specificity of a bare img selector. Written as
   .qc-document__body img it outranked the documents' own class rules, so on the
   Nova SPY User Guide its height:auto beat .cover-logo{height:48px} and the cover
   logo was drawn 780px wide instead of 174px. This rule is only a safety net for
   unstyled images; any size the source sets must win. (17 Sept) */
:where(.qc-document__body) img { max-width: 100%; height: auto; }
.qc-document__body,
.qc-post-body,
.qc-page { min-width: 0; }

@media (max-width: 640px) {
	.qc-doc-hero { padding: 36px 0 30px; }
	.qc-doc-hero__crumbs { flex-wrap: wrap; overflow-wrap: anywhere; }
	.qc-doc-hero__meta .qc-print-btn { margin-left: 0; width: 100%; }
	.qc-document__body { padding: 28px 16px 0; }
	.qc-document__body pre,
	.qc-post-body pre { max-width: 100%; overflow-x: auto; }
	/* Same :not(:has(doc-page)) exclusion as the block below: a scaled
	   <doc-page> sheet must keep its tables as tables. */
	.qc-document__body:not(:has(doc-page)) table,
	.qc-post-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.qc-document__body iframe,
	.qc-document__body video,
	.qc-document__body canvas,
	.qc-post-body iframe,
	.qc-post-body video { max-width: 100% !important; }
}

/* Imported legal pages: prevent CSS Grid's min-content sizing from widening
   the single-column mobile layout around long table cells and TOC labels. */
@media (max-width: 1024px) {
	.page-id-47 .privacy-layout,
	.page-id-274 .privacy-layout,
	.page-id-275 .privacy-layout { grid-template-columns: minmax(0, 1fr) !important; }
	.page-id-47 .privacy-layout,
	.page-id-47 .privacy-toc,
	.page-id-47 .privacy-content,
	.page-id-274 .privacy-layout,
	.page-id-274 .privacy-toc,
	.page-id-274 .privacy-content,
	.page-id-275 .privacy-layout,
	.page-id-275 .privacy-toc,
	.page-id-275 .privacy-content { min-width: 0 !important; width: 100%; max-width: 100% !important; }
	.page-id-47 .privacy-table,
	.page-id-274 .privacy-table,
	.page-id-275 .privacy-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.page-id-47 .privacy-content,
	.page-id-274 .privacy-content,
	.page-id-275 .privacy-content { overflow: hidden; }
}

/* MySirius dashboard tabs are intentionally horizontally scrollable on phones;
   contain that scroll inside the dashboard instead of widening the document. */
@media (max-width: 680px) {
	.page-id-55 .ms-dash,
	.page-id-55 .ms-dash-frame,
	.page-id-55 .ms-tabs { min-width: 0 !important; width: 100%; max-width: 100% !important; }
	.page-id-55 .ms-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; contain: inline-size; }
	.page-id-55 .ms-tab,
	.page-id-55 .ms-tab-actions { flex: 0 0 auto; }
	.page-id-55 .ms-tab-actions { display: none !important; }
	.page-id-55 .stat-band-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.page-id-55 .stat-cell { min-width: 0 !important; width: 100%; max-width: 100% !important; }
}

/* Imported industry pages share the same risk grid. Long compliance copy must
   be allowed to shrink when the grid collapses to one column. */
@media (max-width: 1024px) {
	.page-id-39 .risk-layout,
	.page-id-42 .risk-layout,
	.page-id-43 .risk-layout,
	.page-id-45 .risk-layout { grid-template-columns: minmax(0, 1fr) !important; }
	.page-id-39 .risk-layout,
	.page-id-39 .risk-prose,
	.page-id-42 .risk-layout,
	.page-id-42 .risk-prose,
	.page-id-43 .risk-layout,
	.page-id-43 .risk-prose,
	.page-id-45 .risk-layout,
	.page-id-45 .risk-prose { min-width: 0 !important; width: 100%; max-width: 100% !important; overflow-wrap: anywhere; }
	.page-id-45 .val-step,
	.page-id-45 .val-body { min-width: 0 !important; max-width: 100% !important; }
	.page-id-45 .val-body { overflow-wrap: anywhere; }
}

/* Keep wide comparison tables scrollable inside their own cards. */
@media (max-width: 768px) {
	.page-id-31 .comparison-table-wrap,
	.page-id-40 .comparison-table-wrap { display: block; min-width: 0 !important; width: 100%; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; contain: inline-size; }
	.page-id-31 .comparison-table,
	.page-id-40 .comparison-table { display: table !important; width: max-content !important; min-width: 720px !important; max-width: none !important; }
	.page-id-31 .signal-flow { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; gap: 16px !important; }
	.page-id-31 .flow-node { flex: 1 1 calc(50% - 8px); min-width: 0 !important; max-width: calc(50% - 8px); padding: 8px !important; }
	.page-id-31 .flow-line { display: none !important; }
	.page-id-31 .comparison-section,
	.page-id-31 .section-container,
	.page-id-40 .comparison-section { overflow-x: hidden !important; }
	.page-id-30 .checklist-item { min-width: 0 !important; width: 100%; max-width: 100% !important; }
	.page-id-30 .checklist-item > * { min-width: 0; overflow-wrap: anywhere; }
	.page-id-15 .pill-toc,
	.page-id-15 .pill-toc-container { box-sizing: border-box; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: visible !important; flex-wrap: wrap !important; white-space: normal !important; justify-content: center !important; }
	.page-id-15 .pill-toc-item { min-width: 0 !important; max-width: 100%; white-space: normal !important; text-align: center; }
}

/* Technical-document source files use several generations of two-column
   layouts. On phones, consistently stack those columns and contain heavy
   guide imagery/tables without changing their desktop spec-sheet design.

   Scoped with :not(:has(doc-page)). Documents rebuilt on the <doc-page>
   custom element carry their own scaled sheet and already fit the viewport;
   forcing width:100% on their logos and figures, and turning their spec
   tables into scrollers, breaks that layout. This block is only for the
   older plain-HTML documents. */
@media (max-width: 640px) {
	.qc-document:not(:has(doc-page)) .body,
	.qc-document:not(:has(doc-page)) .body-cols,
	.qc-document:not(:has(doc-page)) .two-col,
	.qc-document:not(:has(doc-page)) .columns,
	.qc-document:not(:has(doc-page)) .cols,
	.qc-document:not(:has(doc-page)) .layout,
	.qc-document:not(:has(doc-page)) .title-band { grid-template-columns: minmax(0, 1fr) !important; flex-direction: column !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
	.qc-document:not(:has(doc-page)) .body,
	.qc-document:not(:has(doc-page)) .body-cols,
	.qc-document:not(:has(doc-page)) .two-col,
	.qc-document:not(:has(doc-page)) .title-band { padding-left: 16px !important; padding-right: 16px !important; }
	.qc-document:not(:has(doc-page)) .col,
	.qc-document:not(:has(doc-page)) .col-left,
	.qc-document:not(:has(doc-page)) .col-right,
	.qc-document:not(:has(doc-page)) .title-left,
	.qc-document:not(:has(doc-page)) .title-right { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
	/* Bare img was in this group until 17 Sept. width:100% !important plus
	   height:auto !important blew every image up to the column width on phones,
	   including ones the source sizes by height: the Nova guide's 36px symbol
	   icons rendered at 252px and its cover logo far past its 44px. Containment
	   is all this block needs for images, and the global img{max-width:100%}
	   already gives it. The img-* classes below appear in none of the current
	   source files and are left as they were. */
	.qc-document:not(:has(doc-page)) .img-center,
	.qc-document:not(:has(doc-page)) .img-medium,
	.qc-document:not(:has(doc-page)) .img-large { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain; }
	.qc-document:not(:has(doc-page)) .img-row { min-width: 0 !important; width: 100% !important; max-width: 100% !important; flex-wrap: wrap !important; }
	.qc-document:not(:has(doc-page)) table,
	.qc-document:not(:has(doc-page)) thead,
	.qc-document:not(:has(doc-page)) tbody { max-width: 100% !important; }
	.qc-document:not(:has(doc-page)) table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
	.qc-document:not(:has(doc-page)) code,
	.qc-document:not(:has(doc-page)) .content { overflow-wrap: anywhere; word-break: break-word; }
	.qc-document:not(:has(doc-page)) .content { min-width: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden; }
	.qc-document:not(:has(doc-page)) { overflow-x: hidden; }

	/* Remaining imported page components with desktop min-content widths. */
	.page-id-9 .industry-grid,
	.page-id-17 .industry-grid,
	.page-id-21 .capability-grid,
	.page-id-45 .sc-rating-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.page-id-9 .industry-card,
	.page-id-17 .industry-card,
	.page-id-21 .capability-card,
	.page-id-21 .capability-card-body,
	.page-id-21 .checklist-item,
	.page-id-45 .sc-rating-card { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
	.page-id-46 .hero-split,
	.page-id-46 .hero-left,
	.page-id-23 .rem-layer,
	.page-id-23 .input-group,
	.page-id-12 .deep-dive-main,
	.page-id-49 .tech-stat-card { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
	.page-id-33 .comparison-table-wrap { width: 100%; max-width: 100% !important; overflow-x: auto !important; contain: inline-size; }
	.page-id-33 .comparison-section { overflow-x: hidden !important; }
	/* Keep each deliberately scrollable table inside the imported page canvas.
	   Chromium otherwise includes the table's min-content width in body.scrollWidth. */
	.page-id-17 .qc-page,
	.page-id-31 .qc-page,
	.page-id-33 .qc-page,
	.page-id-40 .qc-page { overflow-x: clip !important; contain: paint; }
	.page-id-17 .comparison-table-wrap,
	.page-id-17 .table-wrap { display: block; min-width: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; contain: inline-size; }

	.page-id-46 .tl-step,
	.page-id-46 .tl-body,
	.page-id-21 .checklist-item-content,
	.page-id-23 .hero-text-content,
	.page-id-23 .rem-layer-badge { box-sizing: border-box; min-width: 0 !important; width: 100% !important; max-width: 100% !important; overflow-wrap: anywhere; }
	.page-id-9 .qc-page,
	.page-id-21 .qc-page,
	.page-id-23 .qc-page,
	.page-id-42 .qc-page,
	.page-id-45 .qc-page,
	.page-id-46 .qc-page { overflow-x: clip !important; }
	.page-id-42 .diff-grid-bottom { box-sizing: border-box; min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
	.page-id-6 .qc-page,
	.page-id-27 .qc-page,
	.page-id-38 .qc-page { overflow-x: hidden; }
}

/* Document feature pills (ul.benefits): source styles them light-mint on translucent
   teal for a DARK bg; on the white doc body that is invisible. Make them readable chips. */
.qc-document__body ul.benefits { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qc-document__body ul.benefits li {
	background: rgba(15,110,86,.10) !important;
	color: var(--qc-regulatory-teal) !important;
	border: 1px solid rgba(15,110,86,.28);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--qc-font-body);
}

/* =====================================================================
   R2 — REM / Solutions full-bleed dark hero
   The .solution-hero (used on all REM + Solutions hub pages) is capped at
   max-width:1400 + margin:auto in the page CSS. Its dark background lives on
   ::before (inset:0), so on the theme's white body the cap shows large white
   strips left/right on wide screens. Let the hero bleed edge to edge; its inner
   .solution-hero-content stays centered (max-width:780).
   ===================================================================== */
.solution-hero { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }

/* Same cap, different selector. A few pages in this family (S-49 today) name the
   band `<section class="hero">` instead of `.solution-hero`, so the cap comes from
   the page's bare `section { max-width: 1400px; margin: 0 auto }` rule and the rule
   above never matches. The client's own S-56 source writes `section:not(.hero)` for
   exactly this reason, so exempting the hero band is their intent, not ours.
   `.pill-toc ~` scopes this to the REM / Solutions landing family: the pill sub-nav
   is present on all 17 of those pages and on no other page in the site, and it is a
   sibling of the hero, so no page-ID hardcoding is needed. On family pages whose
   hero was never capped (A-05, S-54, S-56) this is a no-op. */
.pill-toc ~ section.hero { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* =====================================================================
   R3 — Pill TOC (REM / Solutions hub pages) tidier on mobile
   The sub-nav pills wrapped centered (ragged 2-2-3-1 rows). Keep them all
   visible (Brad's preference = no horizontal scroll) but pack them from the
   left as a clean tag row, with a tighter gap and a max-width inner band so
   the block reads intentionally rather than ragged-centered.
   ===================================================================== */
@media (max-width: 640px) {
  .pill-toc { justify-content: flex-start !important; gap: 8px !important; padding: 12px 16px !important; }
  .pill-toc > *, .pill-toc .pill-link, .pill-toc .pill { font-size: 12.5px !important; padding: 7px 13px !important; }
}
/* R3 stronger: beat the page's own inline `nav.pill-toc{...!important}` overlay */
@media (max-width: 640px) {
  #qc-main nav.pill-toc, #qc-main .pill-toc { justify-content: flex-start !important; gap: 8px !important; padding: 12px 16px !important; }
}

/* =====================================================================
   R1 — Tighter mobile gutter so content uses more of the viewport
   ===================================================================== */
@media (max-width: 640px) {
  :root { --qc-gutter: 16px; }
}

/* ---------------------------------------------------------------------------
   Case studies: the one image framing the authoring sidecar used to carry.

   11_Case_Studies ships a .image-slots.state.json alongside the source pages.
   It is an authoring sidecar for <image-slot> and cannot be served from a
   WordPress permalink, so it is deliberately not carried (see
   02_WORKING/imports/import-case-studies-v41.py). Of its three entries, two
   store the default transform and are no-ops. This is the third, and the only
   one with a real value: a 0.94% horizontal pan on one Versiti figure.

   The rule has to be `left`, not object-position. The slot's shadow image
   renders with object-fit: fill, absolutely positioned at left: 50% with
   transform: translate(-50%, -50%), so object-position does nothing at all.
   The sidecar's own maths is l = (50 + x)%, with x = -0.9386329210656754.

   !important is required: the runtime writes left: 50% as an inline style, and
   a ::part rule loses to an inline style without it.

   Client approved dropping the sidecar for this on 27 Aug 2026.
   --------------------------------------------------------------------------- */
image-slot#versiti-fig-02::part(image) { left: 49.0614% !important; }

/* ---------------------------------------------------------------------------
   Contrast repairs, 29 Aug audit.

   204 nodes measured below the 4.5:1 the AA level requires. These are the
   clusters, each darkened to the nearest value that clears it while staying
   recognisably the same colour. Selectors come from the audit.

   The two QC Orange failures on /risk-assessment/ and the LoRa spec sheet are
   NOT fixed here: that colour is recorded as retired in the project brief, so
   whether it should be on the page at all is Brad's decision, not a contrast
   tweak.
   --------------------------------------------------------------------------- */

/* Pricing page: 54 nodes at 4.18:1 on white. */
.px-roi-stat-label,
.px-roi-stat-sub,
.px-roi-projection-eyebrow,
.px-roi-projection-y5 > .lab,
.px-matrix-wrap .lab { color: #5c636f !important; }

/* Case studies: #94a3b8 on white, 2.56:1, the worst on the site. */
/* The case-study #94A3B8 cluster the audit reported is NOT fixed here, because
   it does not exist in the rendered page. The colour appears 19 times in the
   stored markup, but that markup is the <x-dc> template the runtime hides and
   replaces; walking the live DOM finds zero elements computing to
   rgb(148, 163, 184). The finding was measured against the hidden template.
   A rule here would have been dead code, and the first version of it was. */

/* Resources hub: filter labels and counts on the navy bar, 3.60 to 3.77:1. */
.subnav-label,
.pill-num { color: #9aa4ae !important; }

/* Keyboard-reachable scroll regions get the same focus ring as everything else.
   See assets/js/qc-a11y.js, which is what makes them focusable. */
[role="region"][tabindex="0"]:focus-visible {
  outline: 2px solid var(--qc-teal-bright, #14A07A);
  outline-offset: 2px;
}