/* ═══════════════════════════════════════════════════════════════════
Nova AI Ops — Blog ARTICLE: white canvas + enterprise-clean (2026-06-14)
White reading canvas, quiet neutral typography, restrained green accent,
LIGHT cards (white, hairline border, soft shadow), calm motion.
Linked per-article for staged rollout; remove the to revert.
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Canvas → white ── */
body.blog-dark{background:#ffffff !important;color:#374151 !important;}
body.blog-dark::before,body.blog-dark::after{display:none !important;}
/* ── 2. Typography → quiet neutral slate, green only as a sparing accent ── */
.blog-article h1{color:#0f172a !important;text-shadow:none !important;letter-spacing:-0.035em !important;}
.blog-article h1 em{color:#0f172a !important;font-style:normal !important;background:none !important;-webkit-text-fill-color:#0f172a !important;}
.blog-article h1 em::after{display:none !important;}
.blog-article .subtitle{color:#64748b !important;}
.blog-meta span{color:#64748b !important;}
.blog-article h2{color:#0f172a !important;opacity:1 !important;transform:none !important;}
.blog-article h3{color:#1e293b !important;}
.blog-article p,.blog-article li{color:#374151 !important;}
.blog-article strong{color:#0f172a !important;font-weight:700 !important;}
.blog-article a:not(.btn-primary){color:#1f7a00 !important;border-bottom-color:rgba(31,122,0,0.30) !important;} /* AA: 5.5:1 on white */
.blog-article a:not(.btn-primary):hover{color:#155c08 !important;border-bottom-color:rgba(31,122,0,0.60) !important;}
.blog-article p a:not(.btn-primary),.blog-article li a:not(.btn-primary){background-image:linear-gradient(90deg,#1f7a00,#1f7a00) !important;}
/* numbered h2 → plain muted number, no green pill */
.blog-article h2::before{background:none !important;border:none !important;padding:0 !important;color:#94a3b8 !important;font-size:0.6em !important;letter-spacing:0.10em !important;opacity:1 !important;transform:none !important;}
.blog-article h2 + p::before{display:none !important;}
/* drop the magazine dropcap */
.blog-article .toc + p:first-letter,
.blog-article .blog-sim + p:first-letter,
.blog-article .blog-sim + h2 + p:first-letter{float:none !important;font-size:inherit !important;line-height:inherit !important;font-weight:inherit !important;padding:0 !important;margin:0 !important;background:none !important;-webkit-text-fill-color:currentColor !important;color:inherit !important;}
/* blockquotes → quiet light callouts */
.blog-article blockquote{background:#f6f8fa !important;border-left-color:#94a3b8 !important;}
.blog-article blockquote p{color:#1e293b !important;}
.blog-article blockquote.blog-closing-quote{background:#f1f5f9 !important;}
.blog-article blockquote.blog-closing-quote p{color:#0f172a !important;}
/* ── 3. Cards → LIGHT (white surface, hairline border, soft shadow) ── */
.blog-article .toc,
.blog-article .subscribe-box,
.blog-article .blog-cta,
.blog-article .stat-card,
.blog-share,
.blog-inline-subscribe,
.blog-author,
.blog-related-frame,
.blog-related-card{
background:#ffffff !important;
border:1px solid #e6e9ee !important;
box-shadow:0 1px 2px rgba(15,23,42,0.04),0 12px 32px -22px rgba(15,23,42,0.22) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
/* subtly tinted "action" cards */
.blog-inline-subscribe,.blog-article .subscribe-box,.blog-article .blog-cta,.blog-article .stat-card{background:#f8fafc !important;}
.blog-article .toc::before,
.blog-article .subscribe-box::before,
.blog-article .blog-cta::before,
.blog-article .stat-card::before,
.blog-inline-subscribe::before{display:none !important;}
/* TOC inner */
.blog-article .toc h4{color:#64748b !important;}
.blog-article .toc a{color:#1f7a00 !important;}
.blog-article .toc a:hover{color:#155c08 !important;}
.blog-article .toc li{color:#64748b !important;}
/* Newsletter box inner */
.blog-inline-subscribe h4{color:#0f172a !important;}
.blog-inline-subscribe p{color:#475569 !important;}
.blog-inline-subscribe .blog-inline-subscribe-msg{color:#64748b !important;}
.blog-inline-subscribe input{background:#ffffff !important;border:1px solid #cbd5e1 !important;color:#0f172a !important;}
.blog-inline-subscribe input::placeholder{color:#94a3b8 !important;}
/* subscribe-box / blog-cta / stat-card inner (other posts) */
.blog-article .subscribe-box h4,.blog-article .blog-cta h3{color:#0f172a !important;}
.blog-article .subscribe-box p,.blog-article .blog-cta p{color:#475569 !important;}
.blog-article .subscribe-box input,.blog-article .blog-cta input{background:#ffffff !important;border:1px solid #cbd5e1 !important;color:#0f172a !important;}
.blog-article .stat-card .num{color:#1f7a00 !important;text-shadow:none !important;}
.blog-article .stat-card .label{color:#64748b !important;}
/* Author bio (other posts) */
.blog-author-name{color:#0f172a !important;}
.blog-author-title{color:#1f7a00 !important;}
.blog-author-bio{color:#475569 !important;}
.blog-author-avatar{background:#f1f5f9 !important;border:1px solid #e2e8f0 !important;}
.blog-author-links a{background:#ffffff !important;border:1px solid #cbd5e1 !important;color:#334155 !important;}
/* ── 4. Share row → light + CENTERED ── */
.blog-share{justify-content:center !important;}
.blog-share-label{color:#64748b !important;}
.blog-share-btn{background:#ffffff !important;border:1px solid #cbd5e1 !important;color:#334155 !important;box-shadow:none !important;}
.blog-share-btn:hover{background:#f1f5f9 !important;border-color:#94a3b8 !important;color:#0f172a !important;}
.blog-share-btn-label,.blog-share-btn svg{color:inherit !important;}
/* ── 5. "Keep reading" related → light ── */
.blog-related-frame::before{display:none !important;}
.blog-related-orb{display:none !important;}
.blog-related-eyebrow{color:#64748b !important;background:#f1f5f9 !important;border:1px solid #e2e8f0 !important;}
.blog-related-eyebrow svg{animation:none !important;}
.blog-article .blog-related-heading,.blog-related-heading{color:#1f7a00 !important;} /* "More on this topic" → green */
.blog-related-allbtn{background:#ffffff !important;border:1px solid #cbd5e1 !important;color:#334155 !important;}
.blog-related-allbtn:hover{background:#f1f5f9 !important;border-color:#94a3b8 !important;color:#0f172a !important;box-shadow:none !important;}
.blog-related-card:hover{border-color:#cbd5e1 !important;background:#ffffff !important;box-shadow:0 14px 32px -18px rgba(15,23,42,0.28) !important;}
.blog-related-num{-webkit-text-stroke-color:rgba(15,23,42,0.14) !important;color:transparent !important;}
.blog-related-card:hover .blog-related-num{-webkit-text-stroke-color:rgba(31,122,0,0.45) !important;color:rgba(31,122,0,0.06) !important;}
.blog-related-tag{color:#1f7a00 !important;background:rgba(31,122,0,0.10) !important;border:1px solid rgba(31,122,0,0.25) !important;}
.blog-related-title{color:#0f172a !important;}
.blog-related-card:hover .blog-related-title{color:#155c08 !important;}
.blog-related-meta{color:#64748b !important;}
.blog-related-cta{color:#1f7a00 !important;}
.blog-related-foot{border-top-color:rgba(15,23,42,0.08) !important;}
/* ── 6. Sim widget fallback (being removed on rollout; keep flat-dark if present) ── */
.blog-sim{background:#0d1623 !important;border:1px solid rgba(148,163,184,0.16) !important;box-shadow:0 1px 3px rgba(2,6,12,0.40) !important;backdrop-filter:none !important;}
.blog-sim::before{display:none !important;}
.blog-sim .bsim-badge .dot,.blog-sim .dot{box-shadow:none !important;animation:none !important;}
/* ── 7. Hero banner (refined; only applies if a post keeps one) ── */
.blog-hero-art,
.blog-hero-art[data-cat]{
background:
radial-gradient(130% 130% at 50% -25%, rgba(88,217,0,0.13) 0%, transparent 52%),
radial-gradient(90% 120% at 88% 115%, rgba(56,189,248,0.06) 0%, transparent 55%),
linear-gradient(165deg,#0a1120 0%,#0e1828 55%,#0b111c 100%) !important;
border:1px solid rgba(148,163,184,0.14) !important;border-radius:0 !important;
box-shadow:0 28px 64px -34px rgba(2,6,12,0.85), inset 0 1px 0 rgba(255,255,255,0.06) !important;
overflow:hidden !important;
}
.blog-hero-art::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:1 !important;pointer-events:none !important;opacity:1 !important;background-image:none !important;background-size:30px 30px !important;-webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 42%,#000 28%,transparent 82%) !important;mask-image:radial-gradient(ellipse 78% 72% at 50% 42%,#000 28%,transparent 82%) !important;}
.blog-hero-art::after{content:"" !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:1px !important;z-index:3 !important;display:block !important;width:auto !important;background:linear-gradient(90deg,transparent,rgba(159,232,112,0.55),transparent) !important;}
.blog-hero-art svg{filter:drop-shadow(0 10px 22px rgba(0,0,0,0.45)) !important;}
.blog-hero-art[data-anim],.blog-hero-art[data-anim] svg{animation:none !important;}
/* ── 8. Calm motion + no neon glows ── */
.blog-article h2,.blog-article h3,.blog-article blockquote,
.blog-article .stat-highlight,.blog-article .blog-cta,.blog-article .subscribe-box,
.blog-article .related-posts,.blog-article .toc{opacity:1 !important;transform:none !important;}
.blog-meta .tag::before{animation:none !important;}
.blog-to-top{box-shadow:0 10px 24px -10px rgba(2,6,12,0.50) !important;}
.blog-reading-progress{box-shadow:none !important;background:#2f8f00 !important;}
/* ── 9. Footer chrome (this page) — calm, matches the index ── */
.ftv4-grid{animation:none !important;}
.nova-status-ring::after{animation:none !important;display:none !important;}
/* ── 10. Green container edges — matched to /platform/monitor (2px solid #58d900) ── */
.blog-article .toc,
.blog-article .subscribe-box,
.blog-article .blog-cta,
.blog-article .stat-card,
.blog-share,
.blog-inline-subscribe,
.blog-author,
.blog-related-frame,
.blog-related-card{
border:2px solid #58d900 !important;
}
/* smaller pills / controls: solid green, 1px for proportion */
.blog-share-btn,
.blog-related-allbtn,
.blog-author-links a,
.blog-inline-subscribe input,
.blog-article .subscribe-box input,
.blog-article .blog-cta input{
border:1px solid #58d900 !important;
}
.blog-article blockquote{border-left:3px solid #58d900 !important;}
.blog-related-card:hover,
.blog-share-btn:hover,
.blog-related-allbtn:hover{border-color:#3fb800 !important;}
/* ── 11. Page-specific component fixes (tables, static related-posts) ── */
/* table headers are inline-styled light-green in some posts → readable on white */
.blog-article th{color:#1f7a00 !important;}
/* static "Related Articles" section (.related-posts) → light cards, green edge */
.blog-article .related-posts h4{color:#1f7a00 !important;}
.blog-article .related-posts a{background:#ffffff !important;border:2px solid #58d900 !important;color:#1f7a00 !important;}
.blog-article .related-posts a::before{display:none !important;}
.blog-article .related-posts a:hover{border-color:#3fb800 !important;}
/* ══════════════════════════════════════════════════════════════════════════
ARTICLE PAGES → the /services design language (2026-07-31)
Founder: "clean up all the blogs pages when a user clicks on them. No
distractions anywhere."
One file covers all 2288 posts: every one of them links
/blog-article-clean.css, and it is the LAST stylesheet in the chain
(fonts → shared → blog-chrome → blog-theme → blog-sims → this), so equal
specificity resolves here. The two template variants differ only in which
NAV they carry, which is chrome and is deliberately not selected.
What was shouting: every panel on the page (table of contents, inline
subscribe, share row, related frame and its three cards) carried a 2px
#58d900 border with square corners, each h2 had a green left bar, the
subscribe and back-to-top buttons were the 135deg neon gradient, and the
reading-progress bar was #2f8f00.
Target, same tokens as /services and the /blog index: white panels on
hairline #E3E6E9, 10px radius, the house two-layer elevation shadow, ink
#0E1113 headings over #545B60 body, and ONE accent #15803d kept for links
and the read affordance only.
══════════════════════════════════════════════════════════════════════════ */
.blog-article,
.toc,
.blog-inline-subscribe,
.blog-share,
.blog-related-frame,
.blog-related-card{
--ac-panel:#FFFFFF; --ac-ink:#0E1113; --ac-ink2:#545B60; --ac-ink3:#878F94;
--ac-rule:#E3E6E9; --ac-rule2:#CDD2D6; --ac-accent:#15803d;
--ac-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03);
}
/* ── 1. Panels. One shape everywhere, replacing the 2px green square boxes. ── */
.toc,
.blog-inline-subscribe,
.blog-share,
.blog-related-frame,
.blog-related-card,
.blog-article .related-posts a{
background:#FFFFFF !important;
background-image:none !important;
border:1px solid #E3E6E9 !important;
border-radius:10px !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
/* /services panels do not move or glow on hover; they darken their hairline. */
.blog-related-card:hover,
.blog-share-btn:hover,
.blog-related-allbtn:hover,
.blog-article .related-posts a:hover{
border-color:#CDD2D6 !important;
transform:none !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
/* ── 2. Section headings. The green left bar becomes a hairline rule, which
keeps the indent the layout depends on instead of collapsing it. ── */
.blog-article h2{
border-left-color:#E3E6E9 !important;
border-left-width:2px !important;
}
.blog-article h1,.blog-article h2,.blog-article h3,.blog-article h4{
color:#0E1113 !important;
}
/* the 01 / 02 counters beside each heading */
.blog-article h2::before,
.blog-article h2 > span:first-child{
color:#878F94 !important;
}
/* ── 3. One accent, on links only. #58d900 is ~2.3:1 on white and cannot
carry text; #15803d is the audited on-white green used site-wide. ── */
.toc a,
.blog-article .related-posts h4,
.blog-article th,
.blog-related-card .blog-related-cat{
color:#15803d !important;
}
.toc a:hover{color:#0E1113 !important;}
.blog-article blockquote{border-left-color:#E3E6E9 !important;}
/* the TOC label reads as a /services mono key */
.toc-label,
.toc > :first-child{
font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace !important;
letter-spacing:.16em !important;
color:#545B60 !important;
}
/* ── 4. Controls: the dark-ink primary and the quiet bordered secondary. ── */
.blog-inline-subscribe button,
.blog-inline-subscribe .btn,
.blog-to-top{
background:#0E1113 !important;
background-image:none !important;
color:#FFFFFF !important;
border:1px solid #0E1113 !important;
border-radius:6px !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
.blog-inline-subscribe button:hover,
.blog-to-top:hover{background:#23282C !important;background-image:none !important;transform:none !important;}
.blog-share-btn,
.blog-related-allbtn{
background:#FFFFFF !important;
background-image:none !important;
border:1px solid #CDD2D6 !important;
border-radius:6px !important;
color:#0E1113 !important;
}
.blog-inline-subscribe input,
.blog-article input[type="email"]{
background:#FFFFFF !important;
border:1px solid #CDD2D6 !important;
border-radius:6px !important;
color:#0E1113 !important;
}
.blog-inline-subscribe input:focus,
.blog-article input[type="email"]:focus{
outline:none !important;
border-color:#0E1113 !important;
box-shadow:0 0 0 3px rgba(14,17,19,0.08) !important;
}
/* ── 5. The reading-progress bar was a bright green stripe across the top of
every article. Ink reads as a measurement, not an alert. ── */
.blog-reading-progress{background:#0E1113 !important;background-image:none !important;}
/* ══════════════════════════════════════════════════════════════════════════
ARTICLE PAGES → the /services design language (2026-07-31)
Founder: "clean up all the blogs pages when a user clicks on them. No
distractions anywhere."
One file covers all 2288 posts: every one links /blog-article-clean.css,
and it is the LAST stylesheet in the chain (fonts → shared → blog-chrome →
blog-theme → blog-sims → this). The two template variants differ only in
which NAV they carry, which is chrome and is deliberately not selected.
THE SELECTORS BELOW MIRROR SECTION 10/11 ABOVE EXACTLY. That section sets
the green edges at `.blog-article .toc` specificity (0,2,0); a bare `.toc`
is 0,1,0 and loses to it no matter how late it appears. Matching the
grouped selector list and relying on document order is what makes these
overrides actually win. Verified on the rendered page, not by reading.
Section 10's own comment says the 2px #58d900 edge was "matched to
/platform/monitor" — that page has since been cleaned too, so this is the
last surface still carrying it.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Panels: white, hairline, 10px, house elevation. ── */
.blog-article .toc,
.blog-article .subscribe-box,
.blog-article .blog-cta,
.blog-article .stat-card,
.blog-share,
.blog-inline-subscribe,
.blog-author,
.blog-related-frame,
.blog-related-card,
.blog-article .related-posts a{
background:#FFFFFF !important;
background-image:none !important;
border:1px solid #E3E6E9 !important;
border-radius:10px !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
/* ── 2. Controls: the quiet bordered secondary and the /services field. ── */
.blog-share-btn,
.blog-related-allbtn,
.blog-author-links a{
background:#FFFFFF !important;
background-image:none !important;
border:1px solid #CDD2D6 !important;
border-radius:6px !important;
color:#0E1113 !important;
}
.blog-inline-subscribe input,
.blog-article .subscribe-box input,
.blog-article .blog-cta input{
background:#FFFFFF !important;
border:1px solid #CDD2D6 !important;
border-radius:6px !important;
color:#0E1113 !important;
}
.blog-inline-subscribe input:focus,
.blog-article .subscribe-box input:focus,
.blog-article .blog-cta input:focus{
outline:none !important;
border-color:#0E1113 !important;
box-shadow:0 0 0 3px rgba(14,17,19,0.08) !important;
}
/* the dark-ink primary */
.blog-inline-subscribe button,
.blog-article .subscribe-box button,
.blog-article .blog-cta button,
.blog-to-top{
background:#0E1113 !important;
background-image:none !important;
color:#FFFFFF !important;
border:1px solid #0E1113 !important;
border-radius:6px !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
.blog-inline-subscribe button:hover,
.blog-article .subscribe-box button:hover,
.blog-article .blog-cta button:hover,
.blog-to-top:hover{background:#23282C !important;background-image:none !important;transform:none !important;}
/* ── 3. Hover: /services panels darken their hairline, they do not move. ── */
.blog-related-card:hover,
.blog-share-btn:hover,
.blog-related-allbtn:hover,
.blog-article .related-posts a:hover{
border-color:#CDD2D6 !important;
background:#FFFFFF !important;
transform:none !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
/* ── 4. Headings. The green left bar becomes a hairline, keeping the indent
the layout depends on rather than collapsing it. ── */
.blog-article h2{border-left-color:#E3E6E9 !important;}
.blog-article h1,.blog-article h2,.blog-article h3,.blog-article h4{color:#0E1113 !important;}
.blog-article blockquote{border-left-color:#E3E6E9 !important;}
/* ── 5. One accent. #58d900 is ~2.3:1 on white and #1f7a00 is a second green
that drifted in; both collapse onto the audited #15803d used site-wide. ── */
.blog-article .toc a,
.blog-article th,
.blog-article .related-posts h4,
.blog-article .related-posts a,
.blog-related-tag,
.blog-related-cat{color:#15803d !important;}
.blog-article .toc a:hover{color:#0E1113 !important;}
.blog-related-tag{
background:rgba(21,128,61,0.07) !important;
border:1px solid rgba(21,128,61,0.22) !important;
}
.blog-related-card:hover .blog-related-title{color:#0E1113 !important;}
/* ── 6. The reading-progress stripe ran bright green across the top of every
article. Ink reads as a measurement, not an alert. ── */
.blog-reading-progress{background:#0E1113 !important;background-image:none !important;}
/* ══════════════════════════════════════════════════════════════════════════
ARTICLE PAGES → the /services design language (2026-07-31)
Founder: "clean up all the blogs pages when a user clicks on them. No
distractions anywhere."
One file covers all 2288 posts: every one links /blog-article-clean.css,
and it is the LAST stylesheet in the chain (fonts → shared → blog-chrome →
blog-theme → blog-sims → this). The two template variants differ only in
which NAV they carry, which is chrome and is deliberately not selected.
THE SELECTORS BELOW MIRROR SECTION 10/11 ABOVE EXACTLY. That section sets
the green edges at `.blog-article .toc` specificity (0,2,0); a bare `.toc`
is 0,1,0 and loses to it no matter how late it appears. Matching the
grouped selector list and relying on document order is what makes these
overrides actually win. Verified on the rendered page, not by reading.
Section 10's own comment says the 2px #58d900 edge was "matched to
/platform/monitor" — that page has since been cleaned too, so this is the
last surface still carrying it.
══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Panels: white, hairline, 10px, house elevation. ── */
.blog-article .toc,
.blog-article .subscribe-box,
.blog-article .blog-cta,
.blog-article .stat-card,
.blog-share,
.blog-inline-subscribe,
.blog-author,
.blog-related-frame,
.blog-related-card,
.blog-article .related-posts a{
background:#FFFFFF !important;
background-image:none !important;
border:1px solid #E3E6E9 !important;
border-radius:10px !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
/* ── 2. Controls: the quiet bordered secondary and the /services field. ── */
.blog-share-btn,
.blog-related-allbtn,
.blog-author-links a{
background:#FFFFFF !important;
background-image:none !important;
border:1px solid #CDD2D6 !important;
border-radius:6px !important;
color:#0E1113 !important;
}
.blog-inline-subscribe input,
.blog-article .subscribe-box input,
.blog-article .blog-cta input{
background:#FFFFFF !important;
border:1px solid #CDD2D6 !important;
border-radius:6px !important;
color:#0E1113 !important;
}
.blog-inline-subscribe input:focus,
.blog-article .subscribe-box input:focus,
.blog-article .blog-cta input:focus{
outline:none !important;
border-color:#0E1113 !important;
box-shadow:0 0 0 3px rgba(14,17,19,0.08) !important;
}
/* the dark-ink primary */
.blog-inline-subscribe button,
.blog-article .subscribe-box button,
.blog-article .blog-cta button,
.blog-to-top{
background:#0E1113 !important;
background-image:none !important;
color:#FFFFFF !important;
border:1px solid #0E1113 !important;
border-radius:6px !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
.blog-inline-subscribe button:hover,
.blog-article .subscribe-box button:hover,
.blog-article .blog-cta button:hover,
.blog-to-top:hover{background:#23282C !important;background-image:none !important;transform:none !important;}
/* ── 3. Hover: /services panels darken their hairline, they do not move. ── */
.blog-related-card:hover,
.blog-share-btn:hover,
.blog-related-allbtn:hover,
.blog-article .related-posts a:hover{
border-color:#CDD2D6 !important;
background:#FFFFFF !important;
transform:none !important;
box-shadow:0 1px 2px rgba(14,17,19,.05),0 1px 1px rgba(14,17,19,.03) !important;
}
/* ── 4. Headings. The green left bar becomes a hairline, keeping the indent
the layout depends on rather than collapsing it. ── */
.blog-article h2{border-left-color:#E3E6E9 !important;}
.blog-article h1,.blog-article h2,.blog-article h3,.blog-article h4{color:#0E1113 !important;}
.blog-article blockquote{border-left-color:#E3E6E9 !important;}
/* ── 5. One accent. #58d900 is ~2.3:1 on white and #1f7a00 is a second green
that drifted in; both collapse onto the audited #15803d used site-wide. ── */
.blog-article .toc a,
.blog-article th,
.blog-article .related-posts h4,
.blog-article .related-posts a,
.blog-related-tag,
.blog-related-cat{color:#15803d !important;}
.blog-article .toc a:hover{color:#0E1113 !important;}
.blog-related-tag{
background:rgba(21,128,61,0.07) !important;
border:1px solid rgba(21,128,61,0.22) !important;
}
.blog-related-card:hover .blog-related-title{color:#0E1113 !important;}
/* ── 6. The reading-progress stripe ran bright green across the top of every
article. Ink reads as a measurement, not an alert. ── */
.blog-reading-progress{background:#0E1113 !important;background-image:none !important;}
/* ── 7. The SECOND green. Section 8 above routes every article link through
`.blog-article a:not(.btn-primary){color:#1f7a00}`, specificity (0,2,1).
Because the share buttons and related cards are themselves , they and
every icon inheriting currentColor pick it up, which is why a plain
`.blog-share-btn{color:…}` at (0,1,0) silently lost. #1f7a00 is a second
brand green that drifted in; the site's audited on-white accent is
#15803d. Everything below either takes that accent or goes ink. ── */
.blog-article a:not(.btn-primary){
color:#15803d !important;
border-bottom-color:rgba(21,128,61,0.30) !important;
}
.blog-article p a:not(.btn-primary),
.blog-article li a:not(.btn-primary){
background-image:linear-gradient(90deg,#15803d,#15803d) !important;
}
.blog-article .stat-card .num,
.blog-author-title,
.blog-article .blog-related-frame .blog-related-cta{color:#15803d !important;}
/* Controls and cards are surfaces, not links: they read ink. (0,3,0) beats
the (0,2,1) link rule above. */
.blog-article .blog-share .blog-share-btn,
.blog-article .blog-share .blog-share-btn-label,
.blog-article .blog-related-frame .blog-related-allbtn{color:#0E1113 !important;}
.blog-article .blog-related-frame .blog-related-card,
.blog-article .blog-related-frame .blog-related-foot{color:#545B60 !important;}
.blog-article .blog-related-heading,
.blog-related-heading{color:#0E1113 !important;}
/* ── 8. Article titles: cap the display size and balance the wrap ──────────
Founder: "Arrange all the blogs titles, this looks scattered in 3 rows.
Make it 2 -- AIOps Platforms: The Complete 2026 Buyer's Guide".
The h1 topped out at 64px in a 796px column, so a 48-character title broke
over THREE ragged lines. Measured against all 2288 real article titles:
64px -> 349 titles (15.3%) run past two lines
46px -> 25 titles ( 1.1%)
46px is not an arbitrary pick: it is exactly the /services hero size
(.svcx-hero h1 clamps to 46px), so the articles now sit on the same type
scale as the page this whole cleanup is modelled on. The fluid middle of
the clamp is kept so narrow viewports still scale down.
text-wrap:balance is what fixes "scattered": without it the browser fills
line one and drops whatever is left onto line two, which strands a word or
two. Balance evens the measure across both lines.
The 25 titles still needing three lines are genuinely long (up to 83
characters). They are NOT clamped or truncated: an article h1 is the
page's real heading and silently cutting it would be worse than a third
line. ── */
.blog-article h1{
font-size:clamp(28px,4.6vw,46px) !important;
line-height:1.1 !important;
text-wrap:balance !important;
}