/* Mold Scanner v2 token override (2026-04-25) Loaded LAST in . Flips CSS custom properties from dark→white without touching layout/classes/components on any page. Both --* (live home / blog / topic / state / legal) and --ms-* (tools) covered. */ :root { /* live-home / blog / topic / state / legal token set */ --bg: #F8F7F4 !important; --bg-soft: #FFFFFF !important; --bg-panel: #FFFFFF !important; --bg-card: #FFFFFF !important; --border: #e6e2dc !important; --border-strong: #cfcac0 !important; --text: #0A0A0A !important; --text-muted: #6b6b6b !important; --text-dim: #888888 !important; --brand: #FF6B1A !important; --brand-dim: #cc4f0a !important; --brand-soft: rgba(255,107,26,0.08) !important; --shadow-glow: 0 30px 60px -20px rgba(204,79,10,0.18) !important; /* tool-layout token set */ --ms-bg: #F8F7F4 !important; --ms-bg-soft: #FFFFFF !important; --ms-bg-panel: #FFFFFF !important; --ms-bg-card: #FFFFFF !important; --ms-border: #e6e2dc !important; --ms-border-strong: #cfcac0 !important; --ms-text: #0A0A0A !important; --ms-text-muted: #6b6b6b !important; --ms-text-dim: #888888 !important; --ms-brand: #FF6B1A !important; --ms-brand-dim: #cc4f0a !important; --ms-brand-soft: rgba(255,107,26,0.08) !important; --ms-shadow-glow: 0 30px 60px -20px rgba(204,79,10,0.18) !important; } /* Hardcoded background fallbacks — many pages use bare #000 outside the variable system */ html, body { background: #F8F7F4 !important; color: #0A0A0A !important; } /* Scanner-bg overlay (live home + some pages) — neutralize the dark grid */ .scanner-bg, .scanner-bg .grid-overlay { opacity: 0 !important; pointer-events: none !important; } /* Nav glass-blur was rgba(0,0,0,0.75) — flip to warm white */ header.nav, .ms-nav { background: rgba(248,247,244,0.85) !important; } /* Solid nav-cta dark variants — keep orange brand button */ .nav-cta, .ms-nav-cta { background: #0A0A0A !important; color: #FFFFFF !important; } .nav-cta:hover, .ms-nav-cta:hover { background: #cc4f0a !important; color: #FFFFFF !important; } /* Footer + disclaimer text — ensure legibility on white */ footer, footer * { color: inherit; } .footer-text, .footer-bottom { color: #6b6b6b !important; } .disclaimer, .ms-disclaimer { color: #262626 !important; background: rgba(255,107,26,0.06) !important; border-color: rgba(255,107,26,0.25) !important; } .disclaimer strong, .ms-disclaimer strong { color: #0A0A0A !important; } /* Default link colors — flip blue browser default to brand orange */ a { color: #cc4f0a; } a:hover { color: #FF6B1A; } a:visited { color: #cc4f0a; } /* Heading text — many pages set h1/h2/h3 color to #fff via per-page CSS */ h1, h2, h3, h4, h5, h6 { color: #0A0A0A !important; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit !important; } /* Body / paragraph text fallback */ p, li, td, th, dd, dt, blockquote { color: #262626; } /* Tool tile / hub-card thumb — used to be dark; force light backplate so titles render */ .ms-hub-card, .ms-hub-card .ms-hub-thumb, .tool-card, .tool-thumb { background: #FFFFFF !important; color: #0A0A0A !important; } .ms-hub-card .ms-hub-thumb { border: 1px solid #e6e2dc !important; } .ms-hub-card *, .tool-card * { color: #0A0A0A; } .ms-hub-card .ms-hub-tag, .tool-card .tag { color: #cc4f0a !important; background: rgba(255,107,26,0.08) !important; } /* Cards / panels with dark hardcoded bg */ .card, .panel, .stat, .step, .feature, .price, .scan-card, .diff, .hc-room, .hc-item, details, .research-card { background: #FFFFFF !important; } /* Inputs / selects / textareas — dark theme had dark fills */ input, select, textarea { background: #FFFFFF !important; color: #0A0A0A !important; border-color: #cfcac0 !important; } input::placeholder, textarea::placeholder { color: #888 !important; } /* Forced-white text rules — many per-page CSS hardcoded color: #fff or color: white */ [style*="color:#fff"], [style*="color: #fff"], [style*="color:white"], [style*="color: white"] { color: #0A0A0A !important; } /* Force text-on-orange-button to keep dark for contrast */ .btn-primary, .ms-btn-primary, .nav-cta { color: #FFFFFF !important; } .btn-primary { background: #0A0A0A !important; } .ms-btn-primary { background: #FF6B1A !important; color: #0A0A0A !important; } .ms-btn-primary:hover { background: #cc4f0a !important; color: #FFFFFF !important; } .btn { color: inherit; } /* Ensure scanner hero / dark hero overlays are fully neutralized */ .hero, .hero-section, .ms-tool-hero, section.hero { background-image: none !important; } .hero::before, .hero::after, .ms-tool-hero::before, .ms-tool-hero::after { display: none !important; } /* Phone mockup bg should stay dark — it's the device. Don't override .phone or .phone-screen */ .phone, .phone *, .phone-screen, .phone-screen * { color: revert; background: revert; } .phone { background: linear-gradient(180deg,#2c2c2c 0%,#1a1a1a 100%) !important; } /* ============ INLINE STYLE HIJACK ============ Many legacy pages bake dark colors into element style="..." attributes: style="background:#111;border:1px solid #1f1f1f;color:#f5f5f5" CSS attribute selectors with !important DO override inline styles (inline rules don't carry !important by default, so stylesheet wins). This is the only way to flip these without editing every page individually. */ /* Dark backgrounds → white paper */ [style*="background:#111"], [style*="background: #111"], [style*="background:#0a0a0a"], [style*="background: #0a0a0a"], [style*="background:#0f0f0f"], [style*="background: #0f0f0f"], [style*="background:#141414"], [style*="background: #141414"] { background: #FFFFFF !important; border-color: #e6e2dc !important; } /* Pure black backgrounds (used as device chrome AND as nav-logo image bg) */ [style*="background:#000"], [style*="background: #000"], [style*="background:black"] { background: transparent !important; } img[style*="background:#000"], img[style*="background: #000"] { background: transparent !important; } /* Dark borders on cards */ [style*="border:1px solid #1f1f1f"], [style*="border: 1px solid #1f1f1f"], [style*="border:1px solid #2a2a2a"], [style*="border: 1px solid #2a2a2a"], [style*="border-color:#1f1f1f"], [style*="border-color: #1f1f1f"] { border-color: #e6e2dc !important; } /* White text in inline styles → ink */ [style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"], [style*="color: #FFF"], [style*="color:white"], [style*="color: white"], [style*="color:#f5f5f5"], [style*="color: #f5f5f5"], [style*="color:#f3f4f6"], [style*="color: #f3f4f6"], [style*="color:#e5e7eb"], [style*="color: #e5e7eb"] { color: #0A0A0A !important; } /* Muted gray text in inline styles → muted ink */ [style*="color:#9ca3af"], [style*="color: #9ca3af"], [style*="color:#6b7280"], [style*="color: #6b7280"], [style*="color:#a1a1aa"], [style*="color: #a1a1aa"] { color: #6b6b6b !important; } /* Specific known dark backgrounds in stylesheets that don't use vars */ .toc, .toc *, .related-cards a, .related-cards .card, .keep-reading a, .gate-card, .gate-card input, .also-searched a, .also-searched .item, table.data th, table.data thead, .season-row .bar { background: #FFFFFF !important; color: #0A0A0A !important; border-color: #e6e2dc !important; } /* Also-searched / Keep-reading grids (the dark cards in screenshot) */ [class*="searched"] a, [class*="related"] a, [class*="keep"] a, [class*="searched"] .item, [class*="related"] .item, [class*="keep"] .item { background: #FFFFFF !important; border: 1px solid #e6e2dc !important; color: #0A0A0A !important; } [class*="searched"] a *, [class*="related"] a *, [class*="keep"] a * { color: inherit !important; } /* Footer dark band on legacy pages */ footer[style*="background:#0a"], footer[style*="background: #0a"], .footer-band[style*="background:#0a"] { background: #F8F7F4 !important; } /* How-it-works step icon circles — original CSS sets bg:var(--ms-brand) (orange) but the inner SVG icon also strokes #FF6B1A (orange) → invisible icon on orange circle. Flip the circle to a light orange tint so the orange icon shows. Affects every tool page that uses .how-step-num pattern. */ .how-step-num { background: rgba(255,107,26,0.12) !important; border: 1px solid rgba(255,107,26,0.32) !important; color: #cc4f0a !important; } .how-step-num svg { display: block; } .how-step-num svg path[stroke="#FF6B1A"] { stroke: #cc4f0a !important; } .how-step-num svg path[fill="#FF6B1A"] { fill: #cc4f0a !important; } /* ============ Site-wide dark→white residual cleanup (2026-04-25 v1.31.4) ============ */ /* Bare `.nav` (no header. prefix) on 64 pages had hardcoded background: rgba(0,0,0,0.85). The v2-tokens header.nav rule earlier doesn't catch this selector. Cover both. */ .nav, header.nav, nav.nav { background: rgba(248,247,244,0.92) !important; border-bottom: 1px solid #e6e2dc !important; } .nav-logo { color: #0A0A0A !important; } /* Nav logo black square frame: the icon.png is self-contained and the inline `background:#000` was a fallback before the icon loaded. On white theme it creates a black square. */ .nav img[style*="background:#000"], .nav img[style*="background: #000"], .ms-nav img[style*="background:#000"], .ms-nav img[style*="background: #000"] { background: transparent !important; } /* Related-guide / keep-reading cards inline-styled background:#111 with color:#f5f5f5 → unreadable on white. v2-tokens variable override doesn't catch hardcoded inline values. */ a[style*="background:#111"], a[style*="background: #111"], div[style*="background:#111"], div[style*="background: #111"] { background: #FFFFFF !important; border-color: #e6e2dc !important; } a[style*="background:#111"] *[style*="color:#f5f5f5"], div[style*="background:#111"] *[style*="color:#f5f5f5"] { color: #0A0A0A !important; } *[style*="color:#f5f5f5"] { color: #0A0A0A !important; } *[style*="color:#9ca3af"] { color: #6b6b6b !important; } *[style*="border:1px solid #1f1f1f"] { border-color: #e6e2dc !important; } /* Hero figure border was #1f1f1f (almost-black) on every topic-page hero. Soften to brand border. */ figure img[style*="border:1px solid #1f1f1f"] { border-color: #e6e2dc !important; } /* TOC sidebar dark inline styles. */ *[style*="background:#0a0a0a"], *[style*="background: #0a0a0a"] { background: #F8F7F4 !important; } /* CTA-section bottom-banner inline `background:#0a0a0a` + `color:#f5f5f5` on the four-tools strip below the article. */ div[style*="background:#0a0a0a"][style*="border-top"] { background: #FFFFFF !important; border-top-color: #e6e2dc !important; } /* ============ Loom 2026-04-25 fixes ============ */ /* FAQ accordion summary needs a pointer cursor + soft hover state. Native
/ defaults to default-arrow on most browsers. */ details summary, .faq-item summary, .faq-item h3, details > summary { cursor: pointer !important; } .faq-item:hover, details.faq-item:hover { border-color: #FF6B1A !important; background: #FFFFFF !important; box-shadow: 0 1px 0 0 rgba(255,107,26,0.04), 0 8px 24px -16px rgba(204,79,10,0.18) !important; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } details.faq-item summary { list-style: none; } details.faq-item summary::-webkit-details-marker { display: none; } /* Nav "Get Early Access" CTA hover — premium feel. Subtle lift + brand-orange glow + tight color shift, not a flat color flop. */ .nav-cta, header .nav-cta, .ms-nav-cta { transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease !important; } .nav-cta:hover, header .nav-cta:hover, .ms-nav-cta:hover { background: #FF6B1A !important; color: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(255,107,26,0.18), 0 12px 24px -10px rgba(204,79,10,0.45) !important; transform: translateY(-1px) !important; } .nav-cta:active, header .nav-cta:active, .ms-nav-cta:active { transform: translateY(0) !important; box-shadow: 0 0 0 2px rgba(255,107,26,0.22) !important; } /* ============ v1.31.8: .btn premium hover everywhere ============ */ .btn, .cta-section .btn, .checklist-callout .btn, .form-submit, a.btn { transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease !important; background: #FF6B1A !important; color: #FFFFFF !important; } .btn:hover, .cta-section .btn:hover, .checklist-callout .btn:hover, .form-submit:hover, a.btn:hover { background: #cc4f0a !important; color: #FFFFFF !important; box-shadow: 0 0 0 4px rgba(255,107,26,0.18), 0 14px 28px -10px rgba(204,79,10,0.5) !important; transform: translateY(-2px) !important; } .btn:active, .cta-section .btn:active, .checklist-callout .btn:active, .form-submit:active, a.btn:active { transform: translateY(0) !important; box-shadow: 0 0 0 3px rgba(255,107,26,0.22) !important; } /* ============ v1.31.9: Site-wide hovers + TOC link styling ============ */ /* Table of contents (TOC) sidebar — links must look clickable */ ol li a, ol li > a, .toc a, [aria-label="Table of contents"] a, nav.toc a { color: #FF6B1A !important; text-decoration: none !important; border-bottom: 1px solid transparent !important; transition: color .15s ease, border-bottom-color .15s ease; } ol li a:hover, ol li > a:hover, .toc a:hover { color: #cc4f0a !important; border-bottom-color: #cc4f0a !important; } /* "On this page" sidebar specifically — uppercase kicker section */ [class*="toc"] ol li a, .on-this-page ol li a, ul.toc-list a { color: #FF6B1A !important; } /* All inline content links in articles get the brand orange treatment */ .content-section a, .faq a, .snippet a, p a, li a, article a { color: #FF6B1A !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,107,26,0.3) !important; transition: color .15s ease, border-bottom-color .15s ease; } .content-section a:hover, .faq a:hover, .snippet a:hover, p a:hover, li a:hover, article a:hover { color: #cc4f0a !important; border-bottom-color: #cc4f0a !important; } /* Brand-colored breadcrumb */ .breadcrumb a { color: #FF6B1A !important; transition: color .15s ease; } .breadcrumb a:hover { color: #cc4f0a !important; text-decoration: underline; } /* Card-style links (related-guide / keep-reading thumbnail cards) */ a[style*="border-radius:12px"]:hover, a[style*="border-radius: 12px"]:hover, a.card:hover, .keep-reading a:hover { border-color: #FF6B1A !important; box-shadow: 0 1px 0 0 rgba(255,107,26,0.04), 0 12px 32px -16px rgba(204,79,10,0.28) !important; transform: translateY(-2px) !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } a[style*="border-radius:12px"], a[style*="border-radius: 12px"], a.card, .keep-reading a { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } /* Footer links */ footer a, .footer a { color: #FF6B1A !important; text-decoration: none !important; transition: color .15s ease; } footer a:hover, .footer a:hover { color: #cc4f0a !important; text-decoration: underline; } /* Nav-logo (Mold Scanner AI wordmark in nav) — subtle hover */ .nav-logo, header .nav-logo { transition: opacity .15s ease; } .nav-logo:hover, header .nav-logo:hover { opacity: 0.78 !important; } /* ============ v1.31.17: Site-wide brand footer (matches home) ============ */ .footer-v2 { padding: 64px 0 40px; background: #F8F7F4; border-top: 1px solid #e6e2dc; color: #0A0A0A; font-family: 'Inter', -apple-system, system-ui, sans-serif; } .footer-v2 .footer-v2-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .footer-v2 .footer-v2-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #e6e2dc; } @media (max-width: 800px) { .footer-v2 .footer-v2-grid { grid-template-columns: 1fr 1fr; } } /* Footer bracketed wordmark — matches header lockup exactly */ .footer-v2 .footer-v2-brand { display: inline-flex; align-items: center; gap: 0; margin-bottom: 20px; position: relative; padding: 12px 18px; } .footer-v2 .footer-v2-brand::before, .footer-v2 .footer-v2-brand::after, .footer-v2 .footer-v2-brand .brand-word::before, .footer-v2 .footer-v2-brand .brand-word::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2.5px solid #FF6B1A; pointer-events: none; } .footer-v2 .footer-v2-brand::before { top: 0; left: 0; border-right: none; border-bottom: none; } .footer-v2 .footer-v2-brand::after { top: 0; right: 0; border-left: none; border-bottom: none; } .footer-v2 .footer-v2-brand .brand-word::before { bottom: 0; left: 0; border-right: none; border-top: none; } .footer-v2 .footer-v2-brand .brand-word::after { bottom: 0; right: 0; border-left: none; border-top: none; } .footer-v2 .footer-v2-brand img { display: none !important; } .footer-v2 .footer-v2-brand .brand-word { font-weight: 900; font-size: 26px; letter-spacing: -0.04em; color: #0A0A0A !important; line-height: 1.0; position: static; font-family: 'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; } .footer-v2 .footer-v2-brand .brand-word sup { color: #FF6B1A !important; font-size: 0.42em; font-weight: 900; margin-left: 3px; vertical-align: super; letter-spacing: 0.02em; } .footer-v2 .footer-v2-text { color: #6b6b6b; font-size: 14px; line-height: 1.55; max-width: 320px; margin: 0; } .footer-v2 .footer-v2-links h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 16px; color: #0A0A0A !important; font-weight: 800; } .footer-v2 .footer-v2-links a { display: block; color: #6b6b6b !important; font-size: 14px; padding: 5px 0; font-weight: 500; text-decoration: none !important; border-bottom: none !important; transition: color .15s ease; } .footer-v2 .footer-v2-links a:hover { color: #FF6B1A !important; } .footer-v2 .footer-v2-disclaimer { padding: 24px 0; font-size: 13px; color: #6b6b6b; line-height: 1.6; max-width: 1100px; margin: 0 auto; border-bottom: 1px solid #e6e2dc; } .footer-v2 .footer-v2-disclaimer strong { color: #0A0A0A; font-weight: 700; } .footer-v2 .footer-v2-bottom { padding-top: 24px; text-align: center; font-size: 13px; color: #6b6b6b; } .footer-v2 .footer-v2-bottom strong { color: #0A0A0A; font-weight: 600; } .footer-v2 .footer-v2-bottom a { color: #FF6B1A !important; font-weight: 700; text-decoration: none !important; border-bottom: none !important; } .footer-v2 .footer-v2-bottom a:hover { color: #cc4f0a !important; } /* Social icons row */ .footer-v2 .footer-v2-social { display: flex; justify-content: center; gap: 14px; padding-top: 26px; } .footer-v2 .footer-v2-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f1ede6; color: #6b6b6b; transition: background .18s ease, color .18s ease, transform .18s ease; border-bottom: none !important; } .footer-v2 .footer-v2-social a:hover { background: #FF6B1A; color: #fff !important; transform: translateY(-2px); } .footer-v2 .footer-v2-social svg { width: 20px; height: 20px; display: block; } /* Force footer-v2 left-aligned to override page-level `footer{text-align:center}` */ .footer-v2 { text-align: left !important; } .footer-v2 .footer-v2-bottom { text-align: center !important; } .footer-v2 .footer-v2-grid > div { text-align: left !important; } .footer-v2 .footer-v2-disclaimer { text-align: left !important; } /* Footer disclaimer should span full container width like the home page (not 1100px-centered). */ .footer-v2 .footer-v2-disclaimer { max-width: none !important; margin: 0 !important; } /* Subtle orange-glow top edge to match home (the coral bleed founder mentioned). */ .footer-v2 { box-shadow: inset 0 1px 0 0 rgba(255,107,26,0.18), 0 -1px 0 0 rgba(255,107,26,0.06) !important; } /* Footer-v2 max-width should match the page's own article content (800px on topic pages), so footer brand chip aligns horizontally with the Sources block above it. */ .footer-v2 .footer-v2-container { max-width: 1100px !important; } /* ===== UNIFIED HEADER (matches home /index.html) ===== */ header.nav { position: sticky; top: 0; z-index: 50; background: rgba(248,247,244,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #e6e2dc; } header.nav .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } /* Bracketed wordmark — matches /index.html exactly */ header.nav .brand-lockup { display: inline-flex; align-items: center; text-decoration: none; position: relative; padding: 14px 22px; gap: 0; } header.nav .brand-lockup::before, header.nav .brand-lockup::after, header.nav .brand-lockup .brand-word::before, header.nav .brand-lockup .brand-word::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2.5px solid #FF6B1A; pointer-events: none; } header.nav .brand-lockup::before { top: 0; left: 0; border-right: none; border-bottom: none; } header.nav .brand-lockup::after { top: 0; right: 0; border-left: none; border-bottom: none; } header.nav .brand-lockup .brand-word::before { bottom: 0; left: 0; border-right: none; border-top: none; } header.nav .brand-lockup .brand-word::after { bottom: 0; right: 0; border-left: none; border-top: none; } header.nav .brand-lockup .brand-icon { display: none !important; } header.nav .brand-lockup .brand-word { font-weight: 900; font-size: 32px; letter-spacing: -0.04em; color: #0A0A0A; line-height: 1.0; position: static; font-family: 'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; } header.nav .brand-lockup .brand-word sup { color: #FF6B1A; font-size: 0.42em; font-weight: 900; margin-left: 3px; vertical-align: super; letter-spacing: 0.02em; } @media (max-width: 640px) { header.nav .brand-lockup::before, header.nav .brand-lockup::after, header.nav .brand-lockup .brand-word::before, header.nav .brand-lockup .brand-word::after { display: none; } header.nav .brand-lockup { padding: 14px 0; } header.nav .brand-lockup .brand-word { font-size: 26px; } } header.nav .nav-links { display: flex; gap: 32px; font-size: 14px; font-weight: 600; color: #262626; } header.nav .nav-links a { color: inherit; text-decoration: none; } header.nav .nav-links a:hover { color: #FF6B1A; } header.nav .nav-cta { padding: 12px 22px; background: #0A0A0A; color: #fff !important; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; transition: all .15s ease; } header.nav .nav-cta:hover { background: #FF6B1A; color: #fff !important; transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(255,107,26,0.18), 0 12px 24px -10px rgba(204,79,10,0.45); } @media (max-width: 820px) { header.nav .nav-links { display: none; } } /* ===== TOPIC ARTICLE BODY ALIGNMENT ===== On topic pages the hero-image / byline / TOC are constrained to 800px and centered, but .content-section (Sources, content blocks) and .faq filled the parent 1100px container — making Sources visually flush-left vs the rest of the article body. Match them to 800px so everything reads as one centered article column. */ /* Match every content-section / faq / keep-reading container to 800px so they stay aligned with the byline/hero/TOC column. The Sources block is rendered as an orphan (outside
) on most topic pages, so the selector has to match anywhere — not just `main > .content-section`. */ .content-section, .faq, main ~ .container, main ~ .container > h2 { max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; } /* ===== INTERNAL LINK GRAPH: Related guides card grid (v1.60.0, 2026-05-18) ===== Mirrors the /tools/_shared/tool-layout.css ms-thumb-card pattern so every SEO page can ship a "Related guides on Mold Scanner AI" block with thumbnail cards. Loaded universally via v2-tokens.css. */ .ms-internal-links { max-width: 800px !important; margin: 48px auto 24px !important; padding: 28px 24px 8px !important; border-top: 1px solid #e6e2dc !important; } .ms-internal-links h2 { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #6b6b6b !important; margin: 0 0 20px !important; } .ms-internal-links .ms-thumb-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 16px !important; } .ms-internal-links .ms-thumb-card { background: #FFFFFF !important; border: 1px solid #e6e2dc !important; border-radius: 12px !important; text-decoration: none !important; color: #0A0A0A !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important; } .ms-internal-links .ms-thumb-card:hover { transform: translateY(-3px) !important; border-color: #FF6B1A !important; box-shadow: 0 16px 36px -18px rgba(204,79,10,0.30) !important; color: #0A0A0A !important; } .ms-internal-links .ms-thumb-card .ms-thumb-img { width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; background: #F8F7F4 !important; } .ms-internal-links .ms-thumb-card .ms-thumb-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .4s ease !important; } .ms-internal-links .ms-thumb-card:hover .ms-thumb-img img { transform: scale(1.04) !important; } .ms-internal-links .ms-thumb-card .ms-thumb-body { padding: 14px 16px 18px !important; } .ms-internal-links .ms-thumb-card h4 { font-size: 15px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; margin: 0 0 6px !important; color: #0A0A0A !important; } .ms-internal-links .ms-thumb-card p { color: #6b6b6b !important; font-size: 13px !important; line-height: 1.5 !important; margin: 0 !important; } @media (max-width: 640px) { .ms-internal-links .ms-thumb-grid { grid-template-columns: 1fr !important; } }