/* =============================================================
   OPTION 3 PREVIEW THEME  —  "Heritage Sovereign"
   Cream + caviar charcoal + oxblood crimson  |  Inter font
   Same component styling as Option 2; colors only differ.
   ============================================================= */

:root {
    --o3-cream:        #F5F2EA;  /* primary body (warm oatmeal, Anthropic-adjacent) */
    --o3-cream-deep:   #EFEAE0;  /* banded sections */
    --o3-cream-soft:   #FAF7F0;  /* lightest variant */
    --o3-ink:          #1A1A1A;  /* caviar charcoal (text, dark bands) */
    --o3-ink-soft:     #2A2A2A;
    --o3-slate-700:    #3A3A38;  /* body text secondary */
    --o3-slate-500:    #6B6862;  /* muted */
    --o3-line:         #DDD8CD;  /* warm 1px separator that fits cream */
    --o3-oxblood:      #4A0E17;  /* primary accent (logo, CTAs) */
    --o3-oxblood-dk:   #3A0913;  /* hover */
    --o3-oxblood-soft: #58111A;  /* alt mention */
    --o3-charcoal-icon:#3A3A38;  /* icons */
}

/* ============ TYPOGRAPHY ============ */
body, html,
.article-body,
.slider_content,
.features_content,
.services_content,
.single_testimonial,
.section_title,
.faq-question,
.faq-answer,
.platform-tabs,
.platform-tab-panel,
input, textarea, select, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.title, .sub_title, .name, .features_title, .services_title, .slider_title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: -0.02em;
    font-weight: 700;
}

body {
    color: var(--o3-ink);
    background: var(--o3-cream);
}

p, li { color: var(--o3-slate-700); }

/* ============ TOP NAV ============ */
.header_navbar {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.header_navbar.sticky {
    background: var(--o3-cream) !important;
    border-bottom-color: var(--o3-line);
    box-shadow: none !important;
}
.navbar-nav .nav-item > a {
    color: var(--o3-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
}
.header_navbar.sticky .navbar-nav .nav-item > a {
    color: var(--o3-ink) !important;
}
.navbar-nav .nav-item:hover > a,
.navbar-nav .nav-item.active > a {
    color: var(--o3-oxblood) !important;
}
.navbar-nav .sub-menu li a {
    color: var(--o3-ink-soft) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
}
.navbar-nav .sub-menu li a:hover {
    color: var(--o3-oxblood) !important;
    background: var(--o3-cream-deep);
}
.navbar-nav .sub-menu {
    background: var(--o3-cream-soft) !important;
    border: 1px solid var(--o3-line);
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.06);
}

/* Logo swap: dark-back variant for the dark hero, light-back when sticky on cream */
.navbar-brand .logo-light { display: inline-block; } /* default: cream nav over cream hero */
.navbar-brand .logo-dark  { display: none; }
.header_navbar.sticky .navbar-brand .logo-light { display: inline-block; }
.header_navbar.sticky .navbar-brand .logo-dark  { display: none; }
/* If the hero is set to charcoal (see hero overrides below), flip the defaults: */
body.option3-dark-hero .navbar-brand .logo-light { display: none; }
body.option3-dark-hero .navbar-brand .logo-dark  { display: inline-block; }
body.option3-dark-hero .header_navbar.sticky .navbar-brand .logo-light { display: inline-block; }
body.option3-dark-hero .header_navbar.sticky .navbar-brand .logo-dark  { display: none; }

/* ============ BUTTONS ============ */
.main-btn,
.main-btn:visited {
    background: var(--o3-oxblood) !important;
    border: 1.5px solid var(--o3-oxblood) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    letter-spacing: 0;
    padding: 12px 22px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.main-btn:hover {
    background: var(--o3-oxblood-dk) !important;
    border-color: var(--o3-oxblood-dk) !important;
    color: #FFFFFF !important;
}
.main-btn.main-btn-outline,
a.main-btn.main-btn-outline {
    background: transparent !important;
    border-color: var(--o3-ink) !important;
    color: var(--o3-ink) !important;
}
.main-btn.main-btn-outline:hover {
    background: var(--o3-ink) !important;
    color: var(--o3-cream) !important;
}
/* Hero CTAs over cream hero (slides 2 & 3) — second button = outline charcoal */
.hero-buttons .main-btn + .main-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--o3-ink) !important;
    border: 1.5px solid var(--o3-ink) !important;
}
.hero-buttons .main-btn + .main-btn:hover {
    background: var(--o3-ink) !important;
    background-color: var(--o3-ink) !important;
    color: var(--o3-cream) !important;
    border: 1.5px solid var(--o3-ink) !important;
}
/* Slide 1 only (video background) — secondary CTA = outline white */
.single_slider:has(.slide-video-bg) .hero-buttons .main-btn + .main-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid #FFFFFF !important;
}
.single_slider:has(.slide-video-bg) .hero-buttons .main-btn + .main-btn:hover {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: var(--o3-ink) !important;
    border: 1.5px solid #FFFFFF !important;
}
/* Slide 1 primary CTA (first button) — oxblood reads dark on dark video,
   add a thin semi-transparent white border to define the button shape. */
.single_slider:has(.slide-video-bg) .hero-buttons .main-btn:first-child {
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.single_slider:has(.slide-video-bg) .hero-buttons .main-btn:first-child:hover {
    border-color: rgba(255, 255, 255, 0.85) !important;
}
/* Top-right nav CTAs — sized down for the modern B2B header aesthetic
   (Rogo / Cursor / Linear / Vercel pattern: ~13px, tighter padding).
   The legacy .main-btn has fixed height:50px + line-height:50px which
   makes padding overrides useless; we explicitly reset both so padding
   can actually shrink the button. */
.navbar-btn .main-btn {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
    padding: 9px 16px !important;
}

/* Sticky nav CTAs */
.header_navbar.sticky .navbar-btn .main-btn {
    background: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
    color: #FFFFFF !important;
}
.navbar-btn .main-btn + .main-btn {
    background: transparent !important;
    color: var(--o3-ink) !important;
    border-color: var(--o3-ink) !important;
}
/* Customer Login hover state (applies on first page load AND when sticky)
   — black fill, cream text */
.navbar-btn .main-btn + .main-btn:hover,
.header_navbar.sticky .navbar-btn .main-btn + .main-btn:hover {
    background: var(--o3-ink) !important;
    color: var(--o3-cream) !important;
    border-color: var(--o3-ink) !important;
}
.header_navbar.sticky .navbar-btn .main-btn + .main-btn {
    background: transparent !important;
    color: var(--o3-ink) !important;
    border-color: var(--o3-ink) !important;
}

/* ============ HERO  (cream-dominant per Option 1 brief) ============
   Hero stays cream; charcoal headlines + oxblood accents.
   Slide 1 is the exception: it has a dark video background, so its title
   and secondary CTA are overridden to white below.                       */
.header_slider,
.header_area {
    background: var(--o3-cream) !important;
}
.single_slider {
    background-color: var(--o3-cream) !important;
    border-radius: 0 !important;
}
/* Cream wash on slides 2/3 — light enough that the underlying image stays
   legible while still tinting it warmly. */
.single_slider.slide-with-overlay::before {
    background: linear-gradient(135deg, rgba(245, 242, 234, 0.70), rgba(245, 242, 234, 0.50)) !important;
}

/* Override the legacy brand-blue nav-item underline accent (3px bar that
   animates on hover/active) so it picks up the Option 3 oxblood instead. */
.navbar-nav .nav-item a::before {
    background-color: var(--o3-oxblood) !important;
}

/* Platform-tabs CTA row: keep first button (Request Demo) as the filled primary,
   and render the remaining buttons (For Corporate Teams, For Private Equity)
   as oxblood-outline secondaries. */
.platform-buttons .main-btn:not(:first-child) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--o3-oxblood) !important;
    border: 1.5px solid var(--o3-oxblood) !important;
}
.platform-buttons .main-btn:not(:first-child):hover {
    background: var(--o3-oxblood) !important;
    background-color: var(--o3-oxblood) !important;
    color: #FFFFFF !important;
    border-color: var(--o3-oxblood) !important;
}
.slider_title { color: var(--o3-ink) !important; }
.slider_content p { color: var(--o3-slate-700) !important; }
.slick-dots li button:before { color: rgba(26, 26, 26, 0.35) !important; }
.slick-dots li.slick-active button:before { color: var(--o3-oxblood) !important; }

/* ===== Slide 1 only (video background) — white title + outline secondary CTA ===== */
.single_slider:has(.slide-video-bg) .slider_title {
    color: #FFFFFF !important;
}
.single_slider:has(.slide-video-bg) .slider_content p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* ============ SECTION BANDS ============ */
.features_area.blue-bg,
.features_area {
    background: var(--o3-cream) !important;
}
#why.features_area {
    background: var(--o3-cream-deep) !important;
    border-top: 1px solid var(--o3-line);
    border-bottom: 1px solid var(--o3-line);
}
.about_area,
.services_area,
.testimonial_area {
    background: var(--o3-cream) !important;
}
.testimonial_area {
    background: var(--o3-cream-soft) !important;
    border-top: 1px solid var(--o3-line);
    border-bottom: 1px solid var(--o3-line);
}

/* Section titles */
.section_title .sub_title {
    color: var(--o3-oxblood) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem !important;
    font-weight: 700;
}
.section_title .title,
.section_title h3.title,
.section_title h4.title {
    color: var(--o3-ink) !important;
    font-weight: 700;
}

/* ============ CARDS ============ */
.single_features,
.single_services,
.single_testimonial {
    background: var(--o3-cream-soft) !important;
    border: 1px solid var(--o3-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 28px !important;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.single_features:hover,
.single_services:hover,
.single_testimonial:hover {
    border-color: var(--o3-oxblood) !important;
    transform: translateY(-2px);
    box-shadow: none !important;
}

/* Use case cards: full-bleed image with bottom text overlay */
.single_case {
    background: transparent !important;
    border: 1px solid var(--o3-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
    padding: 0 !important;
    opacity: 1 !important;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.single_case:hover {
    border-color: var(--o3-oxblood) !important;
    transform: translateY(-2px);
    box-shadow: none !important;
}
.single_case .case_image::before {
    background: linear-gradient(to top, rgba(26, 26, 26, 0.92) 0%, rgba(26, 26, 26, 0) 70%) !important;
}

/* Card titles */
.features_title a,
.services_title,
.single_testimonial .testimonial_name .name,
.single_case .case_content h4 {
    color: var(--o3-ink) !important;
    font-weight: 700 !important;
}
.features_content p,
.services_content p { color: var(--o3-slate-700) !important; }

/* Testimonial sub_title -> oxblood accent */
.single_testimonial .testimonial_name .sub_title {
    color: var(--o3-oxblood) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem !important;
    font-weight: 700;
}
.single_testimonial .testimonial_content i.lni-quotation { color: var(--o3-oxblood) !important; }
.single_testimonial p a {
    color: var(--o3-oxblood) !important;
    font-weight: 600;
}

/* ============ PLATFORM TABS ============ */
.platform-tabs {
    border-bottom: 1px solid var(--o3-line) !important;
}
.platform-tab {
    font-weight: 600;
    color: var(--o3-slate-500) !important;
    border-bottom: 2px solid transparent !important;
    padding-bottom: 12px;
    background: transparent !important;
}
.platform-tab.active,
.platform-tab:hover {
    color: var(--o3-oxblood) !important;
    border-bottom-color: var(--o3-oxblood) !important;
}
.skill_header .sub_title {
    color: var(--o3-ink) !important;
    font-weight: 700;
}

/* ============ FAQ ============ */
.faq-item {
    border: 1px solid var(--o3-line) !important;
    border-radius: 8px !important;
    background: var(--o3-cream-soft) !important;
    margin-bottom: 12px;
    box-shadow: none !important;
}
.faq-question {
    color: var(--o3-ink) !important;
    font-weight: 600 !important;
    background: transparent !important;
}
.faq-icon { color: var(--o3-oxblood) !important; }

/* ============ FOOTER (dark charcoal band) ============ */
.footer_area {
    background: var(--o3-ink) !important;
    color: rgba(245, 242, 234, 0.85);
    border-top: none;
}
.footer_area p,
.footer_area .footer_title,
.footer_area ul.link li a {
    color: rgba(245, 242, 234, 0.85) !important;
}
.footer_area .footer_title {
    color: var(--o3-cream) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

/* Footer body text + link list + tagline + copyright, sized down to match
   the modern B2B header treatment (~13px / weight 400) */
.footer_area .footer_link .link li a {
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 5px 0 !important;
}
.footer_area .footer_about p {
    font-size: 13px !important;
    line-height: 1.6 !important;
}
.footer_area .social li,
.footer_about .social li {
    font-size: 13px !important;
}
.footer_area .text-left.pb-30,
.footer_area p.text-left {
    font-size: 12px !important;
    opacity: 0.65;
}
.footer_area ul.link li a:hover { color: var(--o3-oxblood) !important; }

/* "Follow on LinkedIn" / "Subscribe on Substack" text sits as a text node
   inside the <li> (outside the <a>). Force it to the same light cream as
   the rest of the footer text so it reads on the dark charcoal footer. */
.footer_area .social li,
.footer_about .social li {
    color: rgba(245, 242, 234, 0.85) !important;
}

/* Social icon badge: light icon on a subtle light circular badge.
   On hover, the badge fills to cream and the icon flips to dark. */
.footer_area .social li a,
.footer_about .social li a {
    color: rgba(245, 242, 234, 0.92) !important;
    background-color: rgba(245, 242, 234, 0.10) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.footer_area .social li a:hover,
.footer_about .social li a:hover {
    background-color: var(--o3-cream) !important;
    color: var(--o3-ink) !important;
}

/* Substack icon is a PNG (color baked in). Use a brightness filter to
   render it white in the default dark-badge state, then drop the filter
   on hover so it shows in its original tones against the cream badge. */
.footer_area .social li a img,
.footer_about .social li a img {
    filter: brightness(0) invert(1);
    opacity: 0.92;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.footer_area .social li a:hover img,
.footer_about .social li a:hover img {
    filter: none;
    opacity: 1;
}

/* ============ LINKS ============ */
.article-body a,
.article-body a:visited {
    color: var(--o3-oxblood) !important;
}

/* ============ MISC ============ */
hr { border-top-color: var(--o3-line) !important; }
.back-to-top {
    background: var(--o3-oxblood) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
}
.hero-buttons { margin-top: 28px; gap: 12px; display: flex; flex-wrap: wrap; }
.hero-buttons .main-btn { margin-right: 0 !important; }

/* ============ LUCIDE ICONS ============ */
[data-lucide],
.features_icon svg,
.services_header svg,
.services_icon svg,
.testimonial_content svg,
.footer_area svg,
.back-to-top svg {
    stroke-width: 1.75;
    vertical-align: middle;
}

.features_icon {
    background: none !important;
    color: var(--o3-charcoal-icon) !important;
    margin-bottom: 18px;
}
.features_icon svg {
    width: 40px; height: 40px;
    color: var(--o3-charcoal-icon);
    transition: color 0.15s ease;
}
.single_features:hover .features_icon svg { color: var(--o3-oxblood) !important; }

.services_header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px;
}
.services_header svg {
    width: 36px; height: 36px;
    color: var(--o3-charcoal-icon);
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.single_services:hover .services_header svg { color: var(--o3-oxblood) !important; }

.testimonial_content svg {
    width: 28px; height: 28px;
    color: var(--o3-oxblood);
    margin-bottom: 8px;
    opacity: 0.85;
}

/* Social badge: light icon on subtle light circle by default, inverted on
   hover (white badge + dark icon). Matches the legacy badge geometry from
   .footer_about .social li a (45px circle).
   Use !important + explicit stroke so Lucide's inline attributes can't
   leak a dark stroke through. */
.footer_area .social svg,
.footer_about .social svg {
    width: 18px !important;
    height: 18px !important;
    color: rgba(245, 242, 234, 0.92) !important;
    stroke: rgba(245, 242, 234, 0.92) !important;
    fill: none !important;
    vertical-align: -3px;
    margin-right: 6px;
    transition: color 0.15s ease, stroke 0.15s ease;
}
.footer_area .social li a:hover svg,
.footer_about .social li a:hover svg {
    color: var(--o3-ink) !important;
    stroke: var(--o3-ink) !important;
}
/* Also force the legacy LineIcons font glyph (used on root + insights
   pages that haven't been swapped to Lucide) to render light cream. */
.footer_area .social li a i.lni,
.footer_about .social li a i.lni {
    color: rgba(245, 242, 234, 0.92) !important;
}
.footer_area .social li a:hover i.lni,
.footer_about .social li a:hover i.lni {
    color: var(--o3-ink) !important;
}

.back-to-top svg {
    width: 18px; height: 18px;
    color: #FFFFFF;
}

.single_case svg[data-lucide="arrow-right"],
.single_case [data-lucide="arrow-right"] {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    color: #FFFFFF;
    stroke-width: 2;
}

/* =============================================================
   LEGACY BRAND-BLUE FULL OVERRIDE
   Catches all remaining #2980b9 / #0898E7 / #0873ae references
   from style.css and article.css that weren't covered by the
   theme rules above. Repaints them in oxblood / ink for the
   Option 3 cream-and-crimson palette.
   ============================================================= */

/* ---- Buttons ---- */
.main-btn.main-btn-2:hover,
.main-btn.main-btn-outline {
    color: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
}
.main-btn.main-btn-outline:hover {
    background-color: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
    color: #FFFFFF !important;
}
.navbar-btn .main-btn:hover {
    background-color: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
}

/* ---- ROI metric badge ---- */
.roi-metric-badge {
    color: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
}

/* ---- Sub-nav toggler ---- */
.navbar-nav .sub-nav-toggler { color: var(--o3-ink) !important; }

/* ---- Article body (insights pages) ---- */
.article-body a,
.article-body a:visited {
    color: var(--o3-oxblood) !important;
}
.article-body a:hover {
    color: var(--o3-oxblood-dk) !important;
    border-bottom-color: var(--o3-oxblood-dk) !important;
}
.article-body h3 { color: var(--o3-oxblood) !important; }
.article-body .material-icons.icon-info { color: var(--o3-oxblood) !important; }
.article-body .callout,
.callout {
    border-left-color: var(--o3-oxblood) !important;
    background: var(--o3-cream-deep) !important;
}

/* Sidebar header right above the article-download button — was #2980b9
   brand blue in article.css. */
.article-sidebar .sub_title {
    color: var(--o3-oxblood) !important;
}

/* Article download button (sidebar) */
.article-download-btn {
    background-color: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
    color: #FFFFFF !important;
}
.article-download-btn:hover,
.article-download-btn:focus {
    background-color: #FFFFFF !important;
    border-color: var(--o3-oxblood) !important;
    color: var(--o3-oxblood) !important;
}

/* Article download modal — overrides for inline-styled header + submit button */
.modal-header[style*="background"] {
    background: var(--o3-oxblood) !important;
}
#article-download-submit {
    background: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
}
#article-download-submit:hover {
    background: var(--o3-oxblood-dk) !important;
    border-color: var(--o3-oxblood-dk) !important;
}

/* ---- Slick carousel dots (all variants) ---- */
.testimonial_active .slick-dots li.slick-active button {
    background-color: var(--o3-oxblood) !important;
}
.about_image .platform-slider .slick-dots li.slick-active button:before {
    color: var(--o3-oxblood) !important;
}
.about_image .platform-slider .slick-next,
.about_image .platform-slider .slick-prev { color: var(--o3-oxblood) !important; }
.about_image .platform-slider .slick-next:hover:before,
.about_image .platform-slider .slick-prev:hover:before { color: var(--o3-oxblood-dk) !important; }

/* ---- Spotlight items (legacy demo videos sidebar) ---- */
.spotlight-item:hover,
.spotlight-item.active { color: var(--o3-oxblood) !important; }

/* ---- Blog ---- */
.single_blog .blog_content .more i,
.single_blog .blog_content p { color: var(--o3-oxblood) !important; }

/* ---- Services icon hover ---- */
.single_services:hover .services_icon i { color: var(--o3-oxblood) !important; }

/* ---- Testimonial name + sub-titles ---- */
.testimonial_name { color: var(--o3-ink) !important; }

/* ---- Footer ---- */
.footer_title { color: var(--o3-cream) !important; }
.footer_form .single_form button:hover,
.footer_form .single_form input:focus { border-color: var(--o3-oxblood) !important; }

/* ---- Back-to-top hover ---- */
.back-to-top:hover {
    background-color: var(--o3-oxblood-dk) !important;
    color: #FFFFFF !important;
}

/* ---- FAQ ---- */
.faq-question[aria-expanded="true"] { color: var(--o3-oxblood) !important; }
.faq-question[aria-expanded="true"] .faq-icon { color: var(--o3-oxblood) !important; }

/* ---- Platform tab active border ---- */
.platform-tab.active { color: var(--o3-oxblood) !important; }

/* ---- Platform accordion icon (mobile) ---- */
.platform-accordion-icon { color: var(--o3-oxblood) !important; }
.platform-accordion-header.open .platform-accordion-icon { color: var(--o3-oxblood-dk) !important; }
.spotlight-mobile-link:hover {
    color: var(--o3-oxblood) !important;
    border-color: var(--o3-oxblood) !important;
}

/* ---- Form inputs (focus states) ---- */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--o3-oxblood) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 14, 23, 0.12) !important;
}

/* ---- Preloader (low priority, but kill the blue dots) ---- */
.preloader .loader .ytp-spinner-left .ytp-spinner-circle,
.preloader .loader .ytp-spinner-right .ytp-spinner-circle {
    border-color: var(--o3-oxblood) var(--o3-oxblood) #f7f7fd !important;
}

/* Three Pillars cards are now full-card-clickable via data-href + main.js
   click handler. Give them the same affordance as the other clickable cards
   on the page (cursor pointer + subtle hover lift). */
.single_features[data-href] {
    cursor: pointer;
    transition: transform 0.15s ease;
}
.single_features[data-href]:hover {
    transform: translateY(-3px);
}

/* Article tables: kill article.css's cool-gray even-row stripe (#f7f9fc)
   which reads as a white patch against the warm cream Option 3 body.
   Cells with explicit inline backgrounds (e.g. the navy column on the
   strategic-services tier table) paint on top of the row and are unaffected. */
.article-body table tbody tr,
.article-body table tbody tr:nth-child(even) {
    background-color: transparent !important;
}