/* ==========================================================================
   darkmode.css — Stratum dark-mode visual overrides
   Loaded LAST via index.php addCustomTag. Flat selectors (no nesting).
   Token remaps live in theme.css ([data-bs-theme="dark"]).
   ========================================================================== */

/* ── Bootstrap body bg override ─────────────────────────────── */
[data-bs-theme="dark"] { --bs-body-bg: #0A0E1A; --bs-body-color: #C7CEDB; }
[data-bs-theme="dark"] body,
html.t4-dark body { background-color: #0A0E1A !important; color: #C7CEDB; }

/* ── Page sections ───────────────────────────────────────────── */
[data-bs-theme="dark"] .t4-section,
html.t4-dark .t4-section { background-color: #0A0E1A; }

/* T4 emits the band class as `t4-palette-{gray,blue,dark}` on the FULL-WIDTH
   .t4-section (T4 core paints the light color: gray #F4F7FB / blue #0062FF).
   These dark overrides previously targeted `.t4-section.color-gray` (a class
   that is NEVER rendered) so they never fired → in dark the full-width section
   stayed #0A0E1A while only the centered .acm-* band showed its color, leaving
   ~76px dark gaps each side (the band looked cut off / not full-bleed).
   Fix: target the real `.t4-palette-*` class + !important to beat T4 core's
   same-specificity light rule that loads after darkmode.css. SHARED. */
[data-bs-theme="dark"] .t4-section.t4-palette-gray,
html.t4-dark .t4-section.t4-palette-gray { background-color: #0F1525 !important; }

[data-bs-theme="dark"] .t4-section.t4-palette-blue,
html.t4-dark .t4-section.t4-palette-blue { background-color: #0062FF !important; }

[data-bs-theme="dark"] .t4-section.t4-palette-dark,
html.t4-dark .t4-section.t4-palette-dark { background-color: #060912 !important; }

/* ── Header ──────────────────────────────────────────────────── */
[data-bs-theme="dark"] .ja-header,
html.t4-dark .ja-header { background-color: #0A0E1A !important; border-bottom: 1px solid #161C28 !important; }

[data-bs-theme="dark"] .t4-megamenu .nav-link,
html.t4-dark .t4-megamenu .nav-link { color: #C7CEDB; }

[data-bs-theme="dark"] .t4-megamenu .nav-link:hover,
html.t4-dark .t4-megamenu .nav-link:hover { color: #3B82F6; }

[data-bs-theme="dark"] .btn-signin,
html.t4-dark .btn-signin { color: #C7CEDB; }

/* ── Logo: inline brand themes itself (mark stays blue, wordmark via
   --stratum-heading). No invert filter — that wrongly whitened the blue mark. ── */

/* ── Muted text / body copy ──────────────────────────────────── */
[data-bs-theme="dark"] .text-muted,
html.t4-dark .text-muted { color: #7E8799 !important; }

/* ── Cards / surfaces ────────────────────────────────────────── */
[data-bs-theme="dark"] .card,
html.t4-dark .card { background-color: #121829; border-color: #232B3D; }

[data-bs-theme="dark"] .acm-feature-card,
html.t4-dark .acm-feature-card { background-color: #121829 !important; border-color: #232B3D !important; }

[data-bs-theme="dark"] .step-card,
html.t4-dark .step-card { background-color: #121829; border-color: #232B3D; }

[data-bs-theme="dark"] .testimonial-card,
html.t4-dark .testimonial-card { background-color: #121829; border-color: #232B3D; }

[data-bs-theme="dark"] .faq-item,
html.t4-dark .faq-item { background-color: #121829; border-color: #232B3D; }

[data-bs-theme="dark"] .pricing-card,
html.t4-dark .pricing-card { background-color: #121829 !important; border-color: #232B3D !important; }

/* featured card uses surface bg + primary 2px border (not solid fill) */
[data-bs-theme="dark"] .pricing-card.featured,
html.t4-dark .pricing-card.featured { background-color: #121829 !important; border: 2px solid #0062FF !important; }

[data-bs-theme="dark"] .scale-viz,
html.t4-dark .scale-viz { background-color: #121829 !important; border-color: #232B3D !important; }

/* category-blog subcategory description box ships a light #E9ECEF border (fine on
   white, harsh on the dark bg) — soften it to the dark border token like the cards. */
[data-bs-theme="dark"] .com-content-category-blog__description,
[data-bs-theme="dark"] .category-desc,
html.t4-dark .com-content-category-blog__description,
html.t4-dark .category-desc { border-color: #232B3D !important; }

/* ── Typography ──────────────────────────────────────────────── */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
html.t4-dark h1, html.t4-dark h2, html.t4-dark h3,
html.t4-dark h4, html.t4-dark h5, html.t4-dark h6 { color: #F5F7FA; }

[data-bs-theme="dark"] .section-title h2,
html.t4-dark .section-title h2 { color: #F5F7FA; }

/* ── Clients strip ───────────────────────────────────────────── */
/* (no border — .pen Logos BaCXY has no stroke; removed top/bottom rule) */
[data-bs-theme="dark"] .client-name,
html.t4-dark .client-name { color: #F5F7FA; }

/* ── Buttons ─────────────────────────────────────────────────── */
/* btn-primary stays identical in dark (#0062FF fill is theme-independent) */
[data-bs-theme="dark"] .btn-primary,
html.t4-dark .btn-primary {
  background-color: #0062FF;
  border-color: #0062FF;
  color: #ffffff;
}
[data-bs-theme="dark"] .btn-primary:hover,
html.t4-dark .btn-primary:hover {
  background-color: #3B82F6;   /* primary-hover dark = #3B82F6 (tokens) */
  border-color: #3B82F6;
  color: #ffffff;
}

/* btn-outline-secondary / btn-outline-primary: dark token values
   heading #F5F7FA, surface #121829, border-strong #323C52, elevated #0F1525 */
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-primary,
html.t4-dark .btn-outline-secondary,
html.t4-dark .btn-outline-primary {
  color: #F5F7FA;
  background-color: #121829;
  border-color: #323C52;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-primary:hover,
html.t4-dark .btn-outline-secondary:hover,
html.t4-dark .btn-outline-primary:hover {
  color: #0062FF;
  background-color: #0F1525;
  border-color: #0062FF;
}

/* btn-light (featured pricing primary CTA) = same as btn-primary */
[data-bs-theme="dark"] .btn-light,
html.t4-dark .btn-light {
  background-color: #0062FF;
  border-color: #0062FF;
  color: #ffffff;
}
[data-bs-theme="dark"] .btn-light:hover,
html.t4-dark .btn-light:hover {
  background-color: #3B82F6;
  border-color: #3B82F6;
  color: #ffffff;
}

/* btn-white / btn-outline-white on primary bands = identical in both themes
   (bands stay #0062FF in dark, so inverted white stays white) */

/* stratum-price-card__cta (canvas pricing page) */
[data-bs-theme="dark"] .stratum-price-card__cta,
html.t4-dark .stratum-price-card__cta {
  color: #F5F7FA;
  background-color: #121829;
  border-color: #323C52;
}
[data-bs-theme="dark"] .stratum-price-card__cta:hover,
html.t4-dark .stratum-price-card__cta:hover {
  color: #0062FF;
  background-color: #0F1525;
  border-color: #0062FF;
}
[data-bs-theme="dark"] .stratum-price-card__cta--primary,
html.t4-dark .stratum-price-card__cta--primary {
  background-color: #0062FF;
  border-color: #0062FF;
  color: #ffffff;
}
[data-bs-theme="dark"] .stratum-price-card__cta--primary:hover,
html.t4-dark .stratum-price-card__cta--primary:hover {
  background-color: #3B82F6;
  border-color: #3B82F6;
  color: #ffffff;
}

/* CTA band heading is on a #0062FF (primary) fill in BOTH themes — its label is the
   `on-primary` token (#FFFFFF) and must NEVER recolor. The generic dark-heading rule
   `[data-bs-theme=dark] h1..h6 {color:#F5F7FA}` (0,1,1) was hijacking the <h2> title
   (.stratum-cta-band__title is only 0,1,0), tinting it off-white. Pin it back to pure
   on-primary white. [PALETTE-HEADING-LEAK on a primary band] — SHARED across every page
   using .stratum-cta-band (Categories, Featured-Articles, FAQ, Changelog, Integrations…). */
[data-bs-theme="dark"] .stratum-cta-band .stratum-cta-band__title,
html.t4-dark .stratum-cta-band .stratum-cta-band__title {
  color: #ffffff;
}
[data-bs-theme="dark"] .stratum-cta-band .stratum-cta-band__sub,
html.t4-dark .stratum-cta-band .stratum-cta-band__sub {
  color: rgba(255, 255, 255, 0.75);
}

/* stratum-cta-band__btn (canvas CTA band, inverted on primary) */
[data-bs-theme="dark"] .stratum-cta-band__btn,
html.t4-dark .stratum-cta-band__btn {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #0062FF;
}
[data-bs-theme="dark"] .stratum-cta-band__btn:hover,
html.t4-dark .stratum-cta-band__btn:hover {
  background-color: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.90);
  color: #0062FF;
}
/* Contact CTA outline/ghost stays translucent-white in dark too (band is #0062FF
   in BOTH themes, so the button look must NOT flip to the solid-white primary). */
[data-bs-theme="dark"] .stratum-contact-page .stratum-cta-band__btn--ghost,
html.t4-dark .stratum-contact-page .stratum-cta-band__btn--ghost {
  background-color: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.40);
  color: #ffffff;
}
[data-bs-theme="dark"] .stratum-contact-page .stratum-cta-band__btn--ghost:hover,
[data-bs-theme="dark"] .stratum-contact-page .stratum-cta-band__btn--ghost:focus-visible,
html.t4-dark .stratum-contact-page .stratum-cta-band__btn--ghost:hover,
html.t4-dark .stratum-contact-page .stratum-cta-band__btn--ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

/* ── Footer dark strip ───────────────────────────────────────── */
[data-bs-theme="dark"] .t4-section.color-dark,
html.t4-dark .t4-section.color-dark { background-color: #060912; }

/* ── Blog cards ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .stratum-post-card,
html.t4-dark .stratum-post-card { background-color: #121829; border-color: #232B3D; }

[data-bs-theme="dark"] .stratum-blog-lead-card,
html.t4-dark .stratum-blog-lead-card { background-color: #121829; border-color: #232B3D; }

[data-bs-theme="dark"] .stratum-post-card:hover,
html.t4-dark .stratum-post-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.35); }

[data-bs-theme="dark"] .stratum-post-card__title,
html.t4-dark .stratum-post-card__title { color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-blog-lead-card__title,
html.t4-dark .stratum-blog-lead-card__title { color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-blog-sidebar ul li,
html.t4-dark .stratum-blog-sidebar ul li { border-bottom-color: #232B3D; }

[data-bs-theme="dark"] .stratum-blog-sidebar .module-title,
html.t4-dark .stratum-blog-sidebar .module-title { border-bottom-color: #232B3D; }

/* ── Blog masthead ───────────────────────────────────────────── */
[data-bs-theme="dark"] .stratum-blog-masthead,
html.t4-dark .stratum-blog-masthead { background-color: #0A0E1A; }

[data-bs-theme="dark"] .stratum-blog-masthead__title,
html.t4-dark .stratum-blog-masthead__title { color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-blog-masthead__sub,
html.t4-dark .stratum-blog-masthead__sub { color: #7E8799; }

/* ── Breadcrumb band ─────────────────────────────────────────── */
[data-bs-theme="dark"] .stratum-breadcrumb-band,
html.t4-dark .stratum-breadcrumb-band { background-color: #0A0E1A; }
[data-bs-theme="dark"] .stratum-breadcrumb-band .breadcrumb,
html.t4-dark .stratum-breadcrumb-band .breadcrumb { border-bottom-color: #232B3D; }

/* ── Featured band + card ────────────────────────────────────── */
[data-bs-theme="dark"] .stratum-featured-band,
html.t4-dark .stratum-featured-band { background-color: #0F1525; }
[data-bs-theme="dark"] .stratum-featured-card__cover,
html.t4-dark .stratum-featured-card__cover { background-color: #11203F; }
[data-bs-theme="dark"] .stratum-featured-card__title,
html.t4-dark .stratum-featured-card__title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-featured-card__title a,
html.t4-dark .stratum-featured-card__title a { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-featured-card__excerpt,
html.t4-dark .stratum-featured-card__excerpt { color: #7E8799; }
[data-bs-theme="dark"] .stratum-featured-card__author-name,
html.t4-dark .stratum-featured-card__author-name { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-featured-card__date,
html.t4-dark .stratum-featured-card__date { color: #7E8799; }
[data-bs-theme="dark"] .stratum-featured-card__badge,
html.t4-dark .stratum-featured-card__badge { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-featured-card__avatar,
html.t4-dark .stratum-featured-card__avatar { background-color: #11203F; color: #0062FF; }

/* ── Sidebar cards ───────────────────────────────────────────── */
[data-bs-theme="dark"] .blog-sidebar .t4-module,
html.t4-dark .blog-sidebar .t4-module { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .blog-sidebar .t4-module.stratum-blog-search,
html.t4-dark .blog-sidebar .t4-module.stratum-blog-search { background-color: transparent; border-color: transparent; }
[data-bs-theme="dark"] .blog-sidebar li a,
html.t4-dark .blog-sidebar li a { color: #C7CEDB; }
[data-bs-theme="dark"] .blog-sidebar .mod-finder,
html.t4-dark .blog-sidebar .mod-finder { background-color: #121829 !important; border-color: #232B3D !important; }
[data-bs-theme="dark"] .blog-sidebar .mod-finder .form-control,
html.t4-dark .blog-sidebar .mod-finder .form-control { color: #C7CEDB; }
[data-bs-theme="dark"] .blog-sidebar .mod-tags-popular a,
html.t4-dark .blog-sidebar .mod-tags-popular a { background-color: #0F1525; border-color: #232B3D; color: #C7CEDB; }

/* Categories list */
[data-bs-theme="dark"] .stratum-cat-list li,
html.t4-dark .stratum-cat-list li { border-bottom-color: #232B3D; }
[data-bs-theme="dark"] .stratum-cat-list li a,
html.t4-dark .stratum-cat-list li a { color: #C7CEDB; }

/* Tag cloud */
[data-bs-theme="dark"] .stratum-tag-cloud a,
html.t4-dark .stratum-tag-cloud a { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-tag-cloud a:hover,
html.t4-dark .stratum-tag-cloud a:hover { background-color: #0062FF; color: #fff; }

/* Popular posts */
[data-bs-theme="dark"] .stratum-popular-item,
html.t4-dark .stratum-popular-item { border-bottom-color: #232B3D; }
[data-bs-theme="dark"] .stratum-popular-title,
html.t4-dark .stratum-popular-title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-popular-thumb,
html.t4-dark .stratum-popular-thumb { background-color: #11203F; }

/* ── Single Article ──────────────────────────────────────────── */
[data-bs-theme="dark"] .stratum-article-title,
html.t4-dark .stratum-article-title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-article-dek,
html.t4-dark .stratum-article-dek { color: #7E8799; }
[data-bs-theme="dark"] .stratum-article-author,
html.t4-dark .stratum-article-author { color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-article-prose p,
html.t4-dark .stratum-article-prose p,
[data-bs-theme="dark"] .stratum-article-prose ul.stratum-check-list li,
html.t4-dark .stratum-article-prose ul.stratum-check-list li { color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-article-prose h2,
html.t4-dark .stratum-article-prose h2 { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-article-prose blockquote p,
html.t4-dark .stratum-article-prose blockquote p { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-article-tags a,
html.t4-dark .stratum-article-tags a { background-color: #0F1525; border-color: #232B3D; color: #C7CEDB; }

[data-bs-theme="dark"] .stratum-article-authorbox,
html.t4-dark .stratum-article-authorbox { background-color: #0F1525; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-article-authorbox__name,
html.t4-dark .stratum-article-authorbox__name { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-article-authorbox__bio,
html.t4-dark .stratum-article-authorbox__bio { color: #7E8799; }
[data-bs-theme="dark"] .stratum-article-authorbox__follow,
html.t4-dark .stratum-article-authorbox__follow { border-color: #323C52; color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-related-band,
html.t4-dark .stratum-related-band { background-color: #0F1525; }
[data-bs-theme="dark"] .stratum-related-band .module-title,
html.t4-dark .stratum-related-band .module-title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-article-prose pre.stratum-code,
html.t4-dark .stratum-article-prose pre.stratum-code { background-color: #060912; border: 1px solid #232B3D; }

/* ── Marketing bands / Pricing ───────────────────────────────── */
/* Blanket: only plain .stratum-band (no colored modifier). Excludes
   --primary and --elevated so page-scoped colored bands (e.g. .stratum-tags-cta-band,
   .stratum-tags-cloud-section on B10; any canvas CTA / stats band) are never
   overridden to #0A0E1A by this rule — no per-page !important needed. */
[data-bs-theme="dark"] .stratum-band:not(.stratum-band--primary):not(.stratum-band--elevated),
html.t4-dark .stratum-band:not(.stratum-band--primary):not(.stratum-band--elevated) { background-color: #0A0E1A; }
[data-bs-theme="dark"] .stratum-band--elevated,
html.t4-dark .stratum-band--elevated { background-color: #0F1525; }
[data-bs-theme="dark"] .stratum-band--primary,
html.t4-dark .stratum-band--primary { background-color: #0062FF; }
[data-bs-theme="dark"] .stratum-band-title,
html.t4-dark .stratum-band-title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-band-sub,
html.t4-dark .stratum-band-sub { color: #7E8799; }

[data-bs-theme="dark"] .stratum-billing-toggle,
html.t4-dark .stratum-billing-toggle { background-color: #0F1525; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-billing-toggle__opt.is-active,
html.t4-dark .stratum-billing-toggle__opt.is-active { background-color: #121829; color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-price-card,
html.t4-dark .stratum-price-card { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-price-card--featured,
html.t4-dark .stratum-price-card--featured { border-color: #0062FF; }
[data-bs-theme="dark"] .stratum-price-card__plan,
html.t4-dark .stratum-price-card__plan { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-price-card__price .v,
html.t4-dark .stratum-price-card__price .v { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-price-card--featured .stratum-price-card__price .v,
html.t4-dark .stratum-price-card--featured .stratum-price-card__price .v { color: #0062FF; }
[data-bs-theme="dark"] .stratum-price-card__pop,
html.t4-dark .stratum-price-card__pop { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-price-card__cta,
html.t4-dark .stratum-price-card__cta { background-color: transparent; border-color: #323C52; color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-price-card__cta--primary,
html.t4-dark .stratum-price-card__cta--primary { background-color: #0062FF; border-color: #0062FF; color: #fff; }
[data-bs-theme="dark"] .stratum-feature-list li,
html.t4-dark .stratum-feature-list li { color: #C7CEDB; }

[data-bs-theme="dark"] .stratum-compare-table,
html.t4-dark .stratum-compare-table { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-compare-table th,
html.t4-dark .stratum-compare-table th,
[data-bs-theme="dark"] .stratum-compare-table td,
html.t4-dark .stratum-compare-table td { border-bottom-color: #232B3D; }
[data-bs-theme="dark"] .stratum-compare-table thead th,
html.t4-dark .stratum-compare-table thead th { background-color: #0F1525; color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-compare-table tbody td,
html.t4-dark .stratum-compare-table tbody td { color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-compare-table tbody td:first-child,
html.t4-dark .stratum-compare-table tbody td:first-child { color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-faq-item,
html.t4-dark .stratum-faq-item { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-faq-item__q,
html.t4-dark .stratum-faq-item__q { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-faq-item__a,
html.t4-dark .stratum-faq-item__a { color: #7E8799; }
[data-bs-theme="dark"] .stratum-cta-band__btn,
html.t4-dark .stratum-cta-band__btn { background-color: #fff; color: #0062FF; }

/* ── Marketing sections (About/Team/etc.) ────────────────────── */
[data-bs-theme="dark"] .stratum-heading-lg,
html.t4-dark .stratum-heading-lg { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-band-h,
html.t4-dark .stratum-band-h { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-story__text p,
html.t4-dark .stratum-story__text p { color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-quote-card,
html.t4-dark .stratum-quote-card { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-quote-card__q,
html.t4-dark .stratum-quote-card__q { color: #F5F7FA; }

[data-bs-theme="dark"] .stratum-kpi__v,
html.t4-dark .stratum-kpi__v { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-kpi:not(:last-child)::after,
html.t4-dark .stratum-kpi:not(:last-child)::after { background-color: #232B3D; }

/* KPI values/labels on primary bands must stay white in dark — override the generic F5F7FA above */
[data-bs-theme="dark"] .stratum-band--primary .stratum-kpi__v,
[data-bs-theme="dark"] .stratum-band--primary .stratum-kpi__l,
html.t4-dark .stratum-band--primary .stratum-kpi__v,
html.t4-dark .stratum-band--primary .stratum-kpi__l { color: #ffffff !important; }

/* Section-head eyebrow + band titles inside primary bands stay white in dark */
[data-bs-theme="dark"] .stratum-band--primary .stratum-eyebrow,
[data-bs-theme="dark"] .stratum-band--primary .stratum-section-head .stratum-eyebrow,
html.t4-dark .stratum-band--primary .stratum-eyebrow,
html.t4-dark .stratum-band--primary .stratum-section-head .stratum-eyebrow { color: rgba(255,255,255,0.7) !important; }

/* About MOBILE: the stats band is a PRIMARY blue band in BOTH light AND dark
   (design FxCxB / T6XmL). The blanket dark .stratum-band rule (line ~320) would
   otherwise paint it #0A0E1A — keep it primary blue + white KPI text on mobile. */
@media (max-width: 767.98px) {
  [data-bs-theme="dark"] .stratum-page--about .stratum-band.stratum-stats,
  html.t4-dark .stratum-page--about .stratum-band.stratum-stats { background-color: #0062FF !important; }
  [data-bs-theme="dark"] .stratum-page--about .stratum-stats .stratum-kpi__v,
  html.t4-dark .stratum-page--about .stratum-stats .stratum-kpi__v { color: #ffffff !important; }
  [data-bs-theme="dark"] .stratum-page--about .stratum-stats .stratum-kpi__l,
  html.t4-dark .stratum-page--about .stratum-stats .stratum-kpi__l { color: rgba(255,255,255,0.8) !important; }

  /* Features MOBILE stats band: design BwIAZ→JTUgO = PRIMARY blue in BOTH
     light AND dark (desktop is elevated). Blanket .stratum-band--elevated dark
     rule (line ~322) would paint it #0F1525 — keep it primary blue + white KPI
     text/title/eyebrow on mobile. */
  [data-bs-theme="dark"] .stratum-page--features .stratum-band.stratum-stats-band,
  html.t4-dark .stratum-page--features .stratum-band.stratum-stats-band { background-color: #0062FF !important; }
  [data-bs-theme="dark"] .stratum-page--features .stratum-stats-band .stratum-kpi__v,
  html.t4-dark .stratum-page--features .stratum-stats-band .stratum-kpi__v { color: #ffffff !important; }
  [data-bs-theme="dark"] .stratum-page--features .stratum-stats-band .stratum-kpi__l,
  html.t4-dark .stratum-page--features .stratum-stats-band .stratum-kpi__l { color: rgba(255,255,255,0.8) !important; }
  [data-bs-theme="dark"] .stratum-page--features .stratum-stats-band .stratum-band-title,
  html.t4-dark .stratum-page--features .stratum-stats-band .stratum-band-title { color: #ffffff !important; }
  [data-bs-theme="dark"] .stratum-page--features .stratum-stats-band .stratum-eyebrow,
  html.t4-dark .stratum-page--features .stratum-stats-band .stratum-eyebrow { color: rgba(255,255,255,0.7) !important; }
}

[data-bs-theme="dark"] .stratum-value-card,
html.t4-dark .stratum-value-card,
[data-bs-theme="dark"] .stratum-team-card,
html.t4-dark .stratum-team-card,
[data-bs-theme="dark"] .stratum-testi-card,
html.t4-dark .stratum-testi-card { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-value-card h3,
html.t4-dark .stratum-value-card h3,
[data-bs-theme="dark"] .stratum-value-card p,
html.t4-dark .stratum-value-card p { }
[data-bs-theme="dark"] .stratum-value-card h3,
html.t4-dark .stratum-value-card h3 { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-value-card p,
html.t4-dark .stratum-value-card p { color: #7E8799; }
[data-bs-theme="dark"] .stratum-value-card__ico,
html.t4-dark .stratum-value-card__ico,
[data-bs-theme="dark"] .stratum-team-card__avatar,
html.t4-dark .stratum-team-card__avatar,
[data-bs-theme="dark"] .stratum-testi-card__avatar,
html.t4-dark .stratum-testi-card__avatar { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-team-card__name,
html.t4-dark .stratum-team-card__name { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-testi-card__q,
html.t4-dark .stratum-testi-card__q { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-testi-card__name,
html.t4-dark .stratum-testi-card__name { color: #F5F7FA; }

/* FAQ groups + help card */
[data-bs-theme="dark"] .stratum-faq-group__title,
html.t4-dark .stratum-faq-group__title { color: #F5F7FA; }
/* help-card bg = elevated dark (#0F1525), matching the light mode fix ($elevated = $F4F7FB) */
[data-bs-theme="dark"] .stratum-help-card,
html.t4-dark .stratum-help-card { background-color: #0F1525; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-help-card__ico,
html.t4-dark .stratum-help-card__ico { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-help-card__title,
html.t4-dark .stratum-help-card__title { color: #F5F7FA; }

/* Feature splits + mockup + big quote */
[data-bs-theme="dark"] .stratum-split__text p,
html.t4-dark .stratum-split__text p { color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-mock,
html.t4-dark .stratum-mock { background-color: #121829; border-color: #232B3D; box-shadow: 0 14px 36px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .stratum-mock__bar,
html.t4-dark .stratum-mock__bar { border-bottom-color: #232B3D; }
[data-bs-theme="dark"] .stratum-mock__bar i,
html.t4-dark .stratum-mock__bar i { background-color: #323C52; }
[data-bs-theme="dark"] .stratum-mock__body,
html.t4-dark .stratum-mock__body { background: linear-gradient(160deg, #11203F 0%, #0F1525 100%); }
[data-bs-theme="dark"] .stratum-bigquote__q,
html.t4-dark .stratum-bigquote__q { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-bigquote__avatar,
html.t4-dark .stratum-bigquote__avatar { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-bigquote__name,
html.t4-dark .stratum-bigquote__name { color: #F5F7FA; }

/* Auth pages */
[data-bs-theme="dark"] .stratum-auth-card,
html.t4-dark .stratum-auth-card { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-band-title--auth,
html.t4-dark .stratum-band-title--auth { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-auth-form label,
html.t4-dark .stratum-auth-form label { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-auth-form input,
html.t4-dark .stratum-auth-form input,
[data-bs-theme="dark"] .stratum-auth-form select,
html.t4-dark .stratum-auth-form select { background-color: #0A0E1A; border-color: #232B3D; color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-auth-divider::before,
html.t4-dark .stratum-auth-divider::before,
[data-bs-theme="dark"] .stratum-auth-divider::after,
html.t4-dark .stratum-auth-divider::after { background-color: #232B3D; }
[data-bs-theme="dark"] .stratum-auth-social,
html.t4-dark .stratum-auth-social { border-color: #323C52; color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-auth-remember,
html.t4-dark .stratum-auth-remember { color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-register-sub,
html.t4-dark .stratum-register-sub { color: #7E8799; }
[data-bs-theme="dark"] .stratum-register-benefits .stratum-check-list li,
html.t4-dark .stratum-register-benefits .stratum-check-list li { color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-type-sample,
html.t4-dark .stratum-type-sample,
[data-bs-theme="dark"] .stratum-type-quote,
html.t4-dark .stratum-type-quote { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-type-row,
html.t4-dark .stratum-type-row { border-bottom-color: #232B3D; }
[data-bs-theme="dark"] .stratum-type-body,
html.t4-dark .stratum-type-body { color: #C7CEDB; }

/* Contact */
[data-bs-theme="dark"] .stratum-contact-form,
html.t4-dark .stratum-contact-form,
[data-bs-theme="dark"] .stratum-contact-detail,
html.t4-dark .stratum-contact-detail,
[data-bs-theme="dark"] .stratum-hours,
html.t4-dark .stratum-hours { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-contact-form__title,
html.t4-dark .stratum-contact-form__title,
[data-bs-theme="dark"] .stratum-contact-detail__value,
html.t4-dark .stratum-contact-detail__value,
[data-bs-theme="dark"] .stratum-hours__title,
html.t4-dark .stratum-hours__title { color: #F5F7FA; }
/* Form labels = mono / muted-dark #7E8799 (design pacwS); NOT white */
[data-bs-theme="dark"] .stratum-field > label,
html.t4-dark .stratum-field > label,
[data-bs-theme="dark"] .stratum-field label[id$="-lbl"],
html.t4-dark .stratum-field label[id$="-lbl"],
[data-bs-theme="dark"] .stratum-contact-detail__label,
html.t4-dark .stratum-contact-detail__label { color: #7E8799; }
[data-bs-theme="dark"] .stratum-hours__sub,
html.t4-dark .stratum-hours__sub { color: #7E8799; }
/* Inputs: bg #0A0E1A (design gsYLk) + border-strong-dark #323C52 + text #C7CEDB */
[data-bs-theme="dark"] .stratum-field input,
html.t4-dark .stratum-field input,
[data-bs-theme="dark"] .stratum-field textarea,
html.t4-dark .stratum-field textarea { background-color: #0A0E1A; border-color: #323C52; color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-field input::placeholder,
html.t4-dark .stratum-field input::placeholder,
[data-bs-theme="dark"] .stratum-field textarea::placeholder,
html.t4-dark .stratum-field textarea::placeholder { color: #7E8799; }
[data-bs-theme="dark"] .stratum-field--check .form-check-label,
html.t4-dark .stratum-field--check .form-check-label,
[data-bs-theme="dark"] .stratum-field--check a,
html.t4-dark .stratum-field--check a { color: #7E8799; }
[data-bs-theme="dark"] .stratum-contact-detail__ico,
html.t4-dark .stratum-contact-detail__ico { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-hours__list li,
html.t4-dark .stratum-hours__list li { border-bottom-color: #232B3D; }
[data-bs-theme="dark"] .stratum-hours__list li span:last-child,
html.t4-dark .stratum-hours__list li span:last-child { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-map,
html.t4-dark .stratum-map { border-color: #232B3D; background-image: linear-gradient(135deg, #11203F 0%, #121829 100%), repeating-linear-gradient(0deg, transparent 0 79px, #232B3D 79px 80px), repeating-linear-gradient(90deg, transparent 0 79px, #232B3D 79px 80px); }

/* Integrations */
[data-bs-theme="dark"] .stratum-filter-search,
html.t4-dark .stratum-filter-search { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-filter-pill,
html.t4-dark .stratum-filter-pill { background-color: #121829; border-color: #232B3D; color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-filter-pill.is-active,
html.t4-dark .stratum-filter-pill.is-active { background-color: #0062FF; border-color: #0062FF; color: #fff; }
[data-bs-theme="dark"] .stratum-integration-card,
html.t4-dark .stratum-integration-card { background-color: #121829; border-color: #232B3D; }
/* icon stays primary #0062FF in dark (.pen dark Gkdca fill #0062FF); box elevated-dark */
[data-bs-theme="dark"] .stratum-integration-card__ico,
html.t4-dark .stratum-integration-card__ico { background-color: #0F1525; color: #0062FF; }
[data-bs-theme="dark"] .stratum-integration-card__name,
html.t4-dark .stratum-integration-card__name { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-codeblock,
html.t4-dark .stratum-codeblock { background-color: #060912; border: 1px solid #232B3D; }
/* Integrations split body = muted-dark #7E8799 (.pen yhHiO), overriding shared #C7CEDB */
[data-bs-theme="dark"] .stratum-page--integrations .stratum-split__text p,
html.t4-dark .stratum-page--integrations .stratum-split__text p { color: #7E8799; }

/* Changelog timeline + subscribe */
[data-bs-theme="dark"] .stratum-subscribe input,
html.t4-dark .stratum-subscribe input { background-color: #121829; border-color: #232B3D; color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-timeline__card,
html.t4-dark .stratum-timeline__card { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-timeline__title,
html.t4-dark .stratum-timeline__title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-timeline__line,
html.t4-dark .stratum-timeline__line { background-color: #323C52; }
/* .pen dark LI text = #C7CEDB (text token dark), NOT muted #7E8799 */
[data-bs-theme="dark"] .stratum-cl-changes li,
html.t4-dark .stratum-cl-changes li { color: #C7CEDB; }
[data-bs-theme="dark"] .stratum-cl-badge--new,
html.t4-dark .stratum-cl-badge--new { background-color: #11203F; color: #0062FF; }

/* Author + Profile avatars */
[data-bs-theme="dark"] .stratum-author-avatar-lg,
html.t4-dark .stratum-author-avatar-lg { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-profile-avatar,
html.t4-dark .stratum-profile-avatar { background-color: #11203F; color: #0062FF; }
[data-bs-theme="dark"] .stratum-profile-card dl > dd,
html.t4-dark .stratum-profile-card dl > dd { color: #F5F7FA; border-bottom-color: #232B3D; }
[data-bs-theme="dark"] .stratum-profile-card legend,
html.t4-dark .stratum-profile-card legend { color: #F5F7FA; }

/* Category cards */
[data-bs-theme="dark"] .stratum-cat-card,
html.t4-dark .stratum-cat-card { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-cat-card__title,
html.t4-dark .stratum-cat-card__title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-cat-card__ico,
html.t4-dark .stratum-cat-card__ico { background-color: #11203F; color: #0062FF; }

/* Solutions topology diagram */
[data-bs-theme="dark"] .stratum-topo,
html.t4-dark .stratum-topo { background-color: #121829; border-color: #232B3D; }
[data-bs-theme="dark"] .stratum-topo__title,
html.t4-dark .stratum-topo__title { color: #F5F7FA; }
[data-bs-theme="dark"] .stratum-topo__row,
html.t4-dark .stratum-topo__row { background-color: #0F1525; color: #C7CEDB; }
/* Topo dot colors are theme-independent hardcoded values — no dark override needed */