/* ===================================================
   ZeroHack — Public Theme Layer
   Loaded after style.css / responsive.css on every public page.

   Two jobs:
     1. Style the shared-header theme toggle (theme-neutral — it has to
        look right in both palettes).
     2. Provide the dark palette. Everything in section 2 is scoped under
        [data-theme="dark"] and leans on !important, because the pages set
        many of these colours in per-page <style> blocks and inline style=""
        attributes. Without !important the light rules would win and dark
        mode would only half-apply.

   The light palette is never touched here, so the default rendering of
   every page is byte-for-byte what it was before this file existed.
   =================================================== */

/* ---------------------------------------------------------------
   1. Shared-header theme toggle
   --------------------------------------------------------------- */

.zh-theme-item {
    display: flex;
    align-items: center;
}

/* The control is deliberately colourless: no fill, no border, no shadow. It
   sits inside the nav bar, which floats over the hero on the marketing pages,
   so anything opaque reads as a blob covering the artwork. The only affordance
   is a faint ring on hover/focus. */
.zh-theme-toggle {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 2px 0 10px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #0A192F;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.zh-theme-toggle:hover {
    background: transparent;
    border-color: transparent;
    color: #0067DA;
    box-shadow: 0 0 0 3px rgba(0, 103, 218, .16);
}

.zh-theme-toggle:active {
    box-shadow: 0 0 0 3px rgba(0, 103, 218, .1);
}

.zh-theme-toggle:focus-visible {
    outline: 2px solid #0067DA;
    outline-offset: 2px;
}

/* The icon is inline SVG so the control also works on the pages that never
   load Font Awesome (error pages, checkout, whitepaper). */
.zh-theme-toggle .zh-theme-icon {
    display: block;
    width: 17px;
    height: 17px;
}

/* Standalone pages have no navbar to sit in, so the button can also be parked
   in a `[data-zh-theme-slot]` element or pinned to the corner. */
.zh-theme-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 20px rgba(10, 25, 47, .18);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
}

[data-theme="dark"] .zh-theme-float {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5) !important;
}

/* Over a hero the bar is transparent and the links are white, so the icon has
   to inherit that treatment instead of adding a chip of its own. Scoped to the
   pages that declare it: on every other public page the top band is a white
   content strip, and forcing white ink here painted the control invisible
   whenever the visitor was at the top of the page. */
#banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .zh-theme-toggle {
    background: transparent;
    border-color: transparent;
    color: #fff;
}

#banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .zh-theme-toggle:hover {
    background: transparent;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
}

/* In dark mode the bar is dark at every scroll position, but the control is
   still just an icon on it. */
[data-theme="dark"] #banner .zh-theme-toggle,
[data-theme="dark"] #banner.nav-scrolled .zh-theme-toggle,
[data-theme="dark"] #banner.scrolled .zh-theme-toggle,
[data-theme="dark"] #banner.shrink .zh-theme-toggle,
[data-theme="dark"] #banner:not(.nav-scrolled):not(.shrink) .zh-theme-toggle {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--zh-dark-text) !important;
    box-shadow: none !important;
}

[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .zh-theme-toggle,
[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .zh-theme-toggle:hover {
    color: #fff !important;
}

[data-theme="dark"] #banner .zh-theme-toggle:hover,
[data-theme="dark"] #banner:not(.nav-scrolled):not(.shrink) .zh-theme-toggle:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--zh-dark-brand) !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, .22) !important;
}

/* Second control for narrow viewports. The nav list lives in a Bootstrap
   collapse, so below `lg` the menu-level button is not reachable at all; this
   copy sits next to the hamburger and is the one that shows there. */
.zh-theme-item--bar {
    display: none;
    align-items: center;
    margin: 0 2px 0 0;
}

@media (max-width: 991.98px) {
    #banner .navbar-collapse .zh-theme-item {
        display: none;
    }
    #banner .zh-theme-item--bar {
        display: flex;
    }
}

/* Inside the expanded mobile menu everything sits on a light panel. */
@media (max-width: 992px) {
    #banner .navbar-collapse .zh-theme-toggle {
        background: transparent;
        border-color: transparent;
        color: #1a1a2e;
    }
    #banner .navbar-collapse .zh-theme-item {
        padding: 6px 0 2px 12px;
    }
    #banner .navbar-collapse .zh-theme-toggle:hover {
        background: transparent;
        color: #1565ff;
        box-shadow: 0 0 0 3px rgba(21, 101, 255, .16);
    }
}

/* Smooth swap. Scoped to a class the toggle adds for ~400ms so the page
   never animates on first paint (the boot snippet already set the theme).

   The list is every interpolable paint property the layer (or a page) can move
   across a swap. `scripts/theme-transition-audit.mjs` (npm run theme:audit)
   parses this file and fails if a declaration here stops covering one.

   `background-image` is deliberately absent — CSS cannot interpolate two
   image/gradient lists, so listing it would hide the gap rather than close it.
   Backgrounds that must not blink therefore keep their art and blend it against
   a transitioning `background-color` (see the `multiply` notes below).

   `opacity` is here for the login placeholder, which the dark palette dims;
   `opacity` is interpolable, so it belongs on the list. `-webkit-text-fill-color`
   is here because the partnership price gradient is clipped to the text and the
   `/mo` suffix has to re-point its own fill on the tier cards. */
.zh-theme-anim body,
.zh-theme-anim body *,
.zh-theme-anim #banner,
.zh-theme-anim #banner * {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease,
        box-shadow .3s ease, fill .3s ease, stroke .3s ease, filter .3s ease,
        backdrop-filter .3s ease, outline-color .3s ease, opacity .3s ease,
        -webkit-text-fill-color .3s ease,
        text-decoration-color .3s ease, column-rule-color .3s ease,
        caret-color .3s ease !important;
}

/* `body *` does not match a pseudo-element, so these would otherwise be the
   loudest snaps in the swap: every input placeholder on a form page, the text
   selection highlight, and the hand-rolled FAQ scrollbar. */
.zh-theme-anim ::placeholder,
.zh-theme-anim ::-webkit-input-placeholder,
.zh-theme-anim ::selection,
.zh-theme-anim ::-moz-selection,
.zh-theme-anim ::-webkit-scrollbar-thumb,
.zh-theme-anim ::-webkit-scrollbar-track {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}

/* The partnership band paints its glows and its orbit ring on pseudo-elements,
   which `body *` never matches, so those repaints snapped during a swap. Same
   interpolable set as the blocks above. */
.zh-theme-anim .zh-elite-network::before,
.zh-theme-anim .zh-elite-network::after,
.zh-theme-anim .zh-perks::before,
.zh-theme-anim .zh-perks::after {
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .zh-theme-toggle {
        transition: none;
    }
    .zh-theme-anim body,
    .zh-theme-anim body *,
    .zh-theme-anim #banner,
    .zh-theme-anim #banner *,
    .zh-theme-anim .zh-elite-network::before,
    .zh-theme-anim .zh-elite-network::after,
    .zh-theme-anim .zh-perks::before,
    .zh-theme-anim .zh-perks::after {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------
   2. Dark palette
   --------------------------------------------------------------- */

[data-theme="dark"] {
    --zh-dark-page: #080d18;
    --zh-dark-surface: #101a2c;
    --zh-dark-surface-2: #16233a;
    --zh-dark-surface-3: #1d2c46;
    --zh-dark-border: #25344e;
    --zh-dark-border-soft: #1c2940;
    --zh-dark-text: #e8eef8;
    --zh-dark-text-strong: #f6f9ff;
    --zh-dark-muted: #9aabc4;
    --zh-dark-brand: #5b9bff;
    --zh-dark-cyan: #4fd8ff;
    --zh-dark-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    /* The `.footer-content-area.spec` variant is forced light by an inline
       `background: ... !important` on 19 pages, and an inline !important beats
       a stylesheet !important, so those inline declarations read from these
       variables instead. Unset in light mode, where the fallback in the inline
       rule keeps the original light palette. */
    --zh-footer-bg: var(--zh-dark-surface);
    --zh-footer-fg: var(--zh-dark-text);
}

/* --- page shell --- */

[data-theme="dark"] body,
[data-theme="dark"] body.light-version {
    background: var(--zh-dark-page) !important;
    background-image: none !important;
    color: var(--zh-dark-text) !important;
}

/* --- typography --- */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .light-version h2,
[data-theme="dark"] .light-version h3,
[data-theme="dark"] .light-version h4,
[data-theme="dark"] .light-version h5,
[data-theme="dark"] .light-version h6,
[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .zh-sec-head h2,
[data-theme="dark"] .zh-section-head h2,
[data-theme="dark"] .zh-section-head p,
[data-theme="dark"] .section-header h3 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .light-version p,
[data-theme="dark"] p,
[data-theme="dark"] .light-version .group label {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .section-heading span {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] a {
    transition: color .25s ease;
}

[data-theme="dark"] hr,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom {
    border-color: var(--zh-dark-border) !important;
}

/* --- shared navbar ---
   ------------------------------------------------------------------------
   NAVBAR INK

   This is the single place navbar text colour is decided, for BOTH palettes.
   Two independent inputs decide it, and nothing else may:

     1. the surface the bar is sitting on
          `hero`  — the page opted in with data-zh-nav="over-hero" and the bar is
                    still transparent (no .nav-scrolled / .shrink), so the bar
                    floats over full-bleed hero ARTWORK. That art is dark in
                    both palettes, so the ink is white in both. Scroll position
                    alone must never decide this.
          `solid` — everything else: a real bar behind the ink (white in the
                    light palette, deep navy in the dark one), so the ink is
                    simply the palette's reading colour.

     2. the palette, via [data-theme] on <html>.

   Rules are written light-first, then dark, and each palette's `hero` variant
   carries one extra attribute selector so it outranks its own `solid` variant.

   Two things this replaces, both of which made the toggle look broken:

     - a `body:not([data-theme="dark"])` block in style.css. The attribute is
       on <html>, so `:not()` always matched: the "light" rules fired in the
       dark palette too and out-specified the dark ones below.
     - `applyNavColors()` in js/script.js writing inline colours from scroll
       position alone. An inline colour cannot be re-resolved when the visitor
       flips the palette, so the bar kept the ink it had at load. script.js now
       only toggles .nav-scrolled/.shrink — the classes this block keys off. */

[data-theme="light"] #banner .navbar-brand,
[data-theme="light"] #banner .navbar-brand:hover,
[data-theme="light"] #banner .nav-link,
[data-theme="light"] #banner .navbar-nav .nav-item .nav-link,
[data-theme="light"] #banner .navbar-nav .nav-item .dropdown-toggle {
    color: #0A192F !important;
}

[data-theme="light"] #banner .navbar-nav .nav-item .nav-link:hover,
[data-theme="light"] #banner .navbar-nav .nav-item .dropdown-toggle:hover,
[data-theme="light"] #banner .nav-link:hover {
    color: #0067da !important;
}

[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .navbar-brand,
[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .navbar-brand:hover,
[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .nav-link,
[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .nav-link:hover,
[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .navbar-nav .nav-item .nav-link,
[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .navbar-nav .nav-item .nav-link:hover,
[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .navbar-nav .nav-item .dropdown-toggle {
    color: #fff !important;
}

/* `.zh-nav-account` is the signed-out Sign In link on the pages that use the
   plain anchor instead of the `.login-btn` pill. It has no background of its
   own, so it has to follow the same ink as the rest of the bar or it is the
   one white word left on a white bar. */
[data-theme="light"] #banner .zh-nav-account,
[data-theme="light"] #banner .zh-nav-account:hover {
    color: #0A192F !important;
}

[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .zh-nav-account,
[data-theme="light"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .zh-nav-account:hover {
    color: #fff !important;
}

[data-theme="dark"] #banner,
[data-theme="dark"] #banner.shrink,
[data-theme="dark"] #banner.nav-scrolled,
[data-theme="dark"] #banner.scrolled,
[data-theme="dark"] .navbar-white {
    background-color: rgba(8, 13, 24, .92) !important;
    background-image: none !important;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* When the navbar is over a hero (transparent at rest) in dark mode,
   keep it colorless/transparent at the very top so hero text isn't blocked. */
[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) {
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] #banner .navbar-brand,
[data-theme="dark"] .navbar-white .navbar-brand,
[data-theme="dark"] .navbar-white .navbar-brand span,
[data-theme="dark"] .navbar-white .navbar-brand.text-dark,
[data-theme="dark"] #banner .nav-link,
[data-theme="dark"] .navbar-white .nav-link,
[data-theme="dark"] #banner .nav-link:hover,
[data-theme="dark"] #banner .navbar-nav .nav-item .nav-link:hover,
[data-theme="dark"] #banner .zh-nav-account,
[data-theme="dark"] .navbar-nav .nav-item .nav-link {
    color: var(--zh-dark-text) !important;
}

/* For hero-over pages in dark mode at top, keep nav links colorless/white to not block hero text */
[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .nav-link,
[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .navbar-brand,
[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .zh-nav-account,
[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .navbar-nav .nav-item .nav-link,
[data-theme="dark"] #banner[data-zh-nav="over-hero"]:not(.nav-scrolled):not(.shrink) .dropdown-toggle {
    color: #fff !important;
}

/* Some pages ship a light-theme header override inline:
     #banner .navbar-nav .nav-item .nav-link { color:#0A192F !important }
   Both selectors carry !important, so the dark rule has to out-specify them
   (same id + class chain, plus the [data-theme] attribute) to win. */
[data-theme="dark"] #banner .navbar-nav .nav-item .nav-link,
[data-theme="dark"] #banner .navbar-nav .nav-item .dropdown-toggle {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] #banner .navbar-nav .nav-item .nav-link:hover,
[data-theme="dark"] #banner .navbar-nav .nav-item .dropdown-toggle:hover {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] #banner.navbar-white.shrink,
[data-theme="dark"] #banner.nav-scrolled,
[data-theme="dark"] #banner.scrolled {
    background: rgba(8, 13, 24, .94) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45) !important;
}

[data-theme="dark"] #banner .navbar-brand:hover {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] #banner .dropdown-menu,
[data-theme="dark"] .navbar-white .dropdown-menu,
[data-theme="dark"] #banner .navbar-collapse .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: var(--zh-dark-shadow) !important;
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] #banner .dropdown-item,
[data-theme="dark"] .navbar-white .dropdown-item,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: transparent !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] #banner .navbar-toggler,
[data-theme="dark"] #banner.nav-scrolled .navbar-toggler,
[data-theme="dark"] #banner.shrink .navbar-toggler,
[data-theme="dark"] #banner .navbar-toggler:hover,
[data-theme="dark"] #banner .navbar-toggler:focus {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] #banner .navbar-toggler-icon,
[data-theme="dark"] #banner.nav-scrolled .navbar-toggler-icon,
[data-theme="dark"] #banner.shrink .navbar-toggler-icon,
[data-theme="dark"] #banner .navbar-toggler:hover .navbar-toggler-icon,
[data-theme="dark"] #banner .navbar-toggler:focus .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(232, 238, 248, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .login-btn {
    background: var(--zh-dark-brand) !important;
    border-color: var(--zh-dark-brand) !important;
    color: #06101f !important;
}

[data-theme="dark"] .login-btn:hover {
    background: var(--zh-dark-cyan) !important;
    border-color: var(--zh-dark-cyan) !important;
    color: #06101f !important;
}

/* Expanded mobile panel */
@media (max-width: 992px) {
    [data-theme="dark"] #banner .navbar-collapse,
    [data-theme="dark"] #banner .navbar-collapse.show,
    [data-theme="dark"] #banner .navbar-collapse.collapsing {
        background: var(--zh-dark-page) !important;
    }
    [data-theme="dark"] #banner .navbar-collapse .nav-link,
    [data-theme="dark"] #banner .navbar-collapse .nav-link:hover,
    [data-theme="dark"] #banner .navbar-collapse .nav-link:focus,
    [data-theme="dark"] #banner .navbar-collapse .nav-link.zh-nav-account {
        color: var(--zh-dark-text) !important;
    }
    [data-theme="dark"] #banner .navbar-collapse .dropdown-item:hover {
        background: var(--zh-dark-surface-3) !important;
        color: var(--zh-dark-brand) !important;
    }
    [data-theme="dark"] #banner {
        background-color: rgba(8, 13, 24, .96) !important;
    }
}

@media (max-width: 500px) {
    [data-theme="dark"] #banner,
    [data-theme="dark"] #banner.nav-scrolled,
    [data-theme="dark"] #banner.shrink {
        background: var(--zh-dark-page) !important;
    }
}

/* Signed-in avatar dropdown (styles injected by nav-auth.js) */
[data-theme="dark"] .navbar .dropdown-menu.zh-nav-menu {
    background: var(--zh-dark-surface) !important;
    box-shadow: var(--zh-dark-shadow), 0 0 0 1px var(--zh-dark-border) !important;
}

[data-theme="dark"] .zh-nav-head-name,
[data-theme="dark"] .zh-nav-item {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-nav-head-email {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-nav-divider {
    background: var(--zh-dark-border) !important;
}

[data-theme="dark"] .zh-nav-item:hover {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-text-strong) !important;
}

/* --- footer --- */

[data-theme="dark"] .footer-bg {
    background: var(--zh-dark-page) !important;
    background-image: none !important;
}

[data-theme="dark"] .footer-content-area,
[data-theme="dark"] .footer-content-area.spec,
[data-theme="dark"] .footer-content-area.demo {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .footer-logo a,
[data-theme="dark"] .copywrite_text > p,
[data-theme="dark"] .copywrite_text > p > a,
[data-theme="dark"] .footer-content-area .contact_info h5,
[data-theme="dark"] .footer-content-area .contact_info p,
[data-theme="dark"] .footer-copywrite-info p {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .footer-content-area .contact_info a:hover,
[data-theme="dark"] .footer-content-area .copywrite_text a:hover {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .footer-social-info a {
    background: var(--zh-dark-surface-3) !important;
}

[data-theme="dark"] .footer-copywrite-info {
    border-top-color: var(--zh-dark-border) !important;
}

/* --- generic surfaces: sections, cards, panels --- */

[data-theme="dark"] .light-version .single-blog-area,
[data-theme="dark"] .single-blog-area,
[data-theme="dark"] .article.special,
[data-theme="dark"] .article.special.box-shadow,
[data-theme="dark"] .article.special.box-shadow .post-content,
[data-theme="dark"] .article.special.box-shadow .post-thumb,
[data-theme="dark"] .zh-card,
[data-theme="dark"] .zh-box,
[data-theme="dark"] .c-facts-box,
[data-theme="dark"] .section-padding-100-70,
[data-theme="dark"] .pricing,
[data-theme="dark"] .creative-facts,
[data-theme="dark"] .service-advanced-box,
[data-theme="dark"] .service-card-footer,
[data-theme="dark"] .about-card,
[data-theme="dark"] .about-why-item,
[data-theme="dark"] .framework-item,
[data-theme="dark"] .future-item,
[data-theme="dark"] .sec-card,
[data-theme="dark"] .upg-card,
[data-theme="dark"] .wp-cover-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .contact_info,
[data-theme="dark"] .contact_info_area,
[data-theme="dark"] .single_price_table_content,
[data-theme="dark"] .price_table_text {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .single-blog-area,
[data-theme="dark"] .article.special,
[data-theme="dark"] .article.special.box-shadow {
    box-shadow: none !important;
    border: 1px solid var(--zh-dark-border-soft) !important;
}

[data-theme="dark"] .single-blog-area h2,
[data-theme="dark"] .single-blog-area h3,
[data-theme="dark"] .single-blog-area h4,
[data-theme="dark"] .article.special .post-content h2,
[data-theme="dark"] .article.special .post-content h3,
[data-theme="dark"] .article.special .post-content h4,
[data-theme="dark"] .c-facts-box h1,
[data-theme="dark"] .about-card h3,
[data-theme="dark"] .sec-card h3,
[data-theme="dark"] .contact_info h5,
[data-theme="dark"] .single_price_table_content .table_text_details h2,
[data-theme="dark"] .price_table_text .price {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .post-meta p a,
[data-theme="dark"] .article.special .post-content p,
[data-theme="dark"] .article.special .post-content ul li,
[data-theme="dark"] .single-blog-area p,
[data-theme="dark"] .c-facts-box p,
[data-theme="dark"] .table_text_details p {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .light-version .timelineBox {
    background: var(--zh-dark-surface-2) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .light-version .single-team-member:after {
    background-color: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .light-version .trust-item,
[data-theme="dark"] .fw-card {
    border-color: var(--zh-dark-border) !important;
}

/* --- pricing tables --- */

[data-theme="dark"] .table,
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-hover,
[data-theme="dark"] .table-responsive {
    background: transparent !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background: var(--zh-dark-surface-3) !important;
}

[data-theme="dark"] .table_btn,
[data-theme="dark"] .table_btn a,
[data-theme="dark"] .green-btn,
[data-theme="dark"] .info-btn {
    border-color: var(--zh-dark-brand) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .table_btn:hover,
[data-theme="dark"] .table_btn a:hover {
    background: var(--zh-dark-brand) !important;
    color: #06101f !important;
}

/* --- forms --- */

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .search-box input,
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .filter-bar select,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .search-box input::placeholder {
    color: #6f819c !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .form-input:focus {
    border-color: var(--zh-dark-brand) !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, .18) !important;
    outline: none !important;
}

[data-theme="dark"] .form-label,
[data-theme="dark"] .form-field-label-hint,
[data-theme="dark"] .form-field-hint {
    color: var(--zh-dark-muted) !important;
}

/* --- FAQ accordion --- */

[data-theme="dark"] .zh-faq-item,
[data-theme="dark"] .faq-cat,
[data-theme="dark"] .zh-help-card,
[data-theme="dark"] .zh-feat,
[data-theme="dark"] .zh-contact-card,
[data-theme="dark"] .zh-location-card {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .zh-help-card {
    border-top-color: #00d4ff !important;
}

[data-theme="dark"] .zh-faq-q {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-faq-a {
    color: var(--zh-dark-muted) !important;
}

/* --- hero-adjacent helpers stay dark-friendly --- */

[data-theme="dark"] .breadcrumb-badge,
[data-theme="dark"] .legal-badge,
[data-theme="dark"] .policy-badge,
[data-theme="dark"] .global-badge,
[data-theme="dark"] .zh-help-badge,
[data-theme="dark"] .zh-sec-badge,
[data-theme="dark"] .zh-contact-tag,
[data-theme="dark"] .zh-time-badge,
[data-theme="dark"] .zh-cat-badge,
[data-theme="dark"] .category-tag,
[data-theme="dark"] .paper-tag,
[data-theme="dark"] .paper-tags .paper-tag,
[data-theme="dark"] .cve-tag,
[data-theme="dark"] .es-finding-tag,
[data-theme="dark"] .exploit-tag,
[data-theme="dark"] .zeroday-tag,
[data-theme="dark"] .api-badge {
    background: rgba(91, 155, 255, .14) !important;
    border-color: rgba(91, 155, 255, .4) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .highlight-box {
    background: linear-gradient(135deg, #123a7a, #0d5f7a) !important;
}

/* --- papers --- */

[data-theme="dark"] .papers-hero,
[data-theme="dark"] .zh-contact-hero,
[data-theme="dark"] .faq-hero,
[data-theme="dark"] .terms-hero,
[data-theme="dark"] .blog-hero,
[data-theme="dark"] .wp-hero,
[data-theme="dark"] .partnership-hero {
    background: linear-gradient(135deg, #0b1526 0%, #14243f 100%) !important;
}

[data-theme="dark"] .section-toggle,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .filter-section,
[data-theme="dark"] .ps-pill,
[data-theme="dark"] .paper-card,
[data-theme="dark"] .papers-stats {
    background: var(--zh-dark-surface) !important;
    box-shadow: none !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .toggle-btn {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-muted) !important;
}

/* The active-filter pill uses dark ink on the brand blue so the two states are
   distinguishable by colour alone; #06101f on #5b9bff is 6.9:1, which clears
   the threshold for the 13.6px label. */
[data-theme="dark"] .toggle-btn.active,
[data-theme="dark"] .cat-btn.active,
[data-theme="dark"] .sev-btn.active {
    background: var(--zh-dark-brand) !important;
    border-color: var(--zh-dark-brand) !important;
    color: #06101f !important;
}

[data-theme="dark"] .cat-btn,
[data-theme="dark"] .sev-btn,
[data-theme="dark"] .cve-pagination .page-btn {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .cat-btn:hover,
[data-theme="dark"] .sev-btn:hover {
    border-color: var(--zh-dark-brand) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .paper-card h3,
[data-theme="dark"] .ps-pill .ps-num,
[data-theme="dark"] .cve-table th,
[data-theme="dark"] .stat-pill .stat-num,
[data-theme="dark"] .zh-help-card h3,
[data-theme="dark"] .zh-help-row h6,
[data-theme="dark"] .zh-contact-card h4 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .paper-card .paper-meta,
[data-theme="dark"] .ps-pill .ps-label,
[data-theme="dark"] .paper-card-foot .pf-stats,
[data-theme="dark"] .cve-table td,
[data-theme="dark"] .cve-pagination .page-info,
[data-theme="dark"] .stat-pill .stat-label,
[data-theme="dark"] .zh-help-row p,
[data-theme="dark"] .zh-contact-desc {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .paper-card .paper-abstract {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .paper-card-foot {
    border-top-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .pf-btn-locked {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .pf-btn-outline {
    border-color: var(--zh-dark-brand) !important;
    color: var(--zh-dark-brand) !important;
}

/* --- CVE / zero-day --- */

[data-theme="dark"] .cve-table-wrap,
[data-theme="dark"] .endpoint-table,
[data-theme="dark"] .sec-table {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .cve-table th,
[data-theme="dark"] .endpoint-table th,
[data-theme="dark"] .sec-table th {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .cve-table td,
[data-theme="dark"] .endpoint-table td,
[data-theme="dark"] .sec-table td {
    background: transparent !important;
    border-color: var(--zh-dark-border-soft) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .cve-table tr:hover td,
[data-theme="dark"] .endpoint-table tr:hover td {
    background: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .stat-pill,
[data-theme="dark"] .cve-detail-item,
[data-theme="dark"] .cve-ioc-card,
[data-theme="dark"] .zday-card,
[data-theme="dark"] .zday-partner-card,
[data-theme="dark"] .api-box,
[data-theme="dark"] .sidebar-box,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .search-box {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .sev-badge,
[data-theme="dark"] .zda-badge,
[data-theme="dark"] .zdc-sev-badge {
    border: 1px solid transparent !important;
}

[data-theme="dark"] .sev-badge.sev-critical {
    background: rgba(220, 38, 38, .16) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .sev-badge.sev-high {
    background: rgba(234, 88, 12, .16) !important;
    color: #fdba74 !important;
}

[data-theme="dark"] .sev-badge.sev-medium {
    background: rgba(202, 138, 4, .16) !important;
    color: #fde047 !important;
}

[data-theme="dark"] .sev-badge.sev-low {
    background: rgba(13, 148, 136, .16) !important;
    color: #5eead4 !important;
}

[data-theme="dark"] .zdc-sev-badge {
    background: rgba(91, 155, 255, .14) !important;
    border: 1px solid rgba(91, 155, 255, .4) !important;
    color: var(--zh-dark-brand) !important;
}

/* --- blogs --- */

[data-theme="dark"] .featured-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .zh-blog-card,
[data-theme="dark"] .skel-card,
[data-theme="dark"] .newsletter-section {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .featured-body h2,
[data-theme="dark"] .section-header h3,
[data-theme="dark"] .post-count {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .card-excerpt,
[data-theme="dark"] .featured-body .excerpt,
[data-theme="dark"] .card-meta span,
[data-theme="dark"] .featured-meta,
[data-theme="dark"] .meta-item {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .card-author-name,
[data-theme="dark"] .card-footer {
    color: var(--zh-dark-muted) !important;
    border-top-color: var(--zh-dark-border) !important;
}

/* --- legal / docs pages --- */

[data-theme="dark"] .policy-content,
[data-theme="dark"] .agreement-summary {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .summary-card,
[data-theme="dark"] .summary-item,
[data-theme="dark"] .contact-item,
[data-theme="dark"] .contact-grid .contact-item {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .summary-card h4,
[data-theme="dark"] .contact-item h4,
[data-theme="dark"] .legal-contact h3,
[data-theme="dark"] .policy-content h2,
[data-theme="dark"] .policy-content h3,
[data-theme="dark"] .policy-content strong {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .summary-card p,
[data-theme="dark"] .contact-item p,
[data-theme="dark"] .policy-content p,
[data-theme="dark"] .policy-content ul li {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .policy-content ul li {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border-soft) !important;
}

[data-theme="dark"] .policy-content ul li:hover {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .policy-content h2 {
    border-bottom-color: var(--zh-dark-border) !important;
}

/* --- partnership form --- */

[data-theme="dark"] .form-section {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .form-section-header,
[data-theme="dark"] .form-header {
    border-bottom-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .form-section-title,
[data-theme="dark"] .form-header-title {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .form-section-desc,
[data-theme="dark"] .form-header-subtitle,
[data-theme="dark"] .form-submit-meta {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .interest-card,
[data-theme="dark"] .ecosystem-card-light,
[data-theme="dark"] .regional-item,
[data-theme="dark"] .compliance-item,
[data-theme="dark"] .stat-box {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .interest-card-inner,
[data-theme="dark"] .compliance-item-desc,
[data-theme="dark"] .regional-item-desc,
[data-theme="dark"] .checkbox-text {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .compliance-item-name,
[data-theme="dark"] .regional-item-name,
[data-theme="dark"] .form-section-number {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .form-submit-btn {
    background: var(--zh-dark-brand) !important;
    color: #06101f !important;
    border-color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .form-submit-btn:hover {
    background: var(--zh-dark-cyan) !important;
    border-color: var(--zh-dark-cyan) !important;
}

/* --- scroll-up / misc --- */

[data-theme="dark"] .light-version #scrollUp {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] #preloader {
    background: var(--zh-dark-page) !important;
}

[data-theme="dark"] ::selection {
    background: rgba(91, 155, 255, .35);
    color: #fff;
}

/* --- error pages (404 / 500) ---
   The page background is already covered by the generic `[data-theme="dark"]
   body` rule above (the inline light `body` rule carries no !important).
   These carry their own inline light palette, so the rest has to
   out-specify it. */

[data-theme="dark"] .error-code {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .error-title {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .error-msg {
    color: var(--zh-dark-muted) !important;
}

/* The stock artwork is a light illustration — dim it so it does not glare. */
[data-theme="dark"] .error-img {
    filter: brightness(.82) contrast(1.05);
}

[data-theme="dark"] .btn-home {
    background: var(--zh-dark-brand) !important;
    color: #06101f !important;
}

[data-theme="dark"] .btn-home:hover {
    background: var(--zh-dark-cyan) !important;
    color: #06101f !important;
}

/* ---------------------------------------------------------------
   3. White paper (screen only)
   ---------------------------------------------------------------
   The white paper is a print-first document: it ships its own A4
   print stylesheet and "Download as PDF" runs window.print(). The
   dark palette is therefore wrapped in @media screen so printing
   still produces the original light document.

   The page is mostly dark navy cards on a light page, so dark mode
   means: flip the page to the dark surface, lift the navy cards so
   they stay readable against it, and re-tint the handful of light
   panels (tables, executive summary, cover card, mobile nav).
   Every rule is scoped to .wp-web / .whitepaper-body because this
   file is loaded on every public page.
   --------------------------------------------------------------- */

@media screen {
    [data-theme="dark"] {
        /* The page drives its copy colours from these three, so flipping them
           re-tints every paragraph, list and caption at once. */
        --text-primary: #e6edf8;
        --text-secondary: #b9cff0;
        --text-muted: #8ba1bd;
        --light-gray: #101a2c;
        --border-gray: #25344e;
    }

    /* --- typography --- */

    [data-theme="dark"] .whitepaper-body h1,
    [data-theme="dark"] .whitepaper-body h2,
    [data-theme="dark"] .whitepaper-body h3,
    [data-theme="dark"] .whitepaper-body h4,
    [data-theme="dark"] .whitepaper-body h5,
    [data-theme="dark"] .whitepaper-body h6,
    [data-theme="dark"] .whitepaper-body strong,
    [data-theme="dark"] .whitepaper-body b {
        color: var(--zh-dark-text-strong) !important;
    }

    [data-theme="dark"] .whitepaper-body p,
    [data-theme="dark"] .whitepaper-body li,
    [data-theme="dark"] .whitepaper-body td,
    [data-theme="dark"] .whitepaper-body .desc,
    [data-theme="dark"] .whitepaper-body .comment {
        color: var(--text-secondary) !important;
    }

    [data-theme="dark"] .whitepaper-body .text-muted,
    [data-theme="dark"] .whitepaper-body .diagram-placeholder {
        color: var(--text-muted) !important;
    }

    [data-theme="dark"] .whitepaper-body .section-title {
        color: var(--zh-dark-text-strong) !important;
        border-bottom-color: var(--zh-dark-border) !important;
    }

    [data-theme="dark"] .whitepaper-body .subsection-title {
        color: var(--zh-dark-text-strong) !important;
    }

    /* The callouts and code blocks are navy panels with their own copy colour;
       keep them reading as panels instead of inheriting the page text colour.
       `.pipe-chip` belongs here only in its default (navy) variant — `.alt` and
       `.go` are saturated fills, and a pale label on #1C90ED drops to 2:1. */
    [data-theme="dark"] .whitepaper-body .callout,
    [data-theme="dark"] .whitepaper-body .callout p,
    [data-theme="dark"] .whitepaper-body .callout li,
    [data-theme="dark"] .whitepaper-body .code-block,
    [data-theme="dark"] .whitepaper-body .code-block .comment,
    [data-theme="dark"] .whitepaper-body .code-block .string,
    [data-theme="dark"] .whitepaper-body .code-block .keyword,
    [data-theme="dark"] .whitepaper-body .pipe-chip {
        color: #b9cff0 !important;
    }

    /* The two filled chip variants keep navy ink on the blue (5.2:1) and go
       white on a deepened green, because the light palette's #17a268 is only
       3.3:1 against white. */
    [data-theme="dark"] .whitepaper-body .pipe-chip.alt {
        color: #0A192F !important;
    }

    [data-theme="dark"] .whitepaper-body .pipe-chip.go {
        background: linear-gradient(135deg, #0e8357, #0b6f49) !important;
        color: #fff !important;
    }

    /* Body copy that hard-codes a mid blue-grey. */
    [data-theme="dark"] .whitepaper-body .about-why-item span {
        color: var(--text-muted) !important;
    }

    /* Icon glyphs sized to read as headings, not as body copy. */
    [data-theme="dark"] .whitepaper-body .subsection-title .msi {
        color: var(--zh-dark-brand) !important;
    }

    /* --- navy cards lifted off the dark page --- */

    [data-theme="dark"] .whitepaper-body .stat-card,
    [data-theme="dark"] .whitepaper-body .about-card,
    [data-theme="dark"] .whitepaper-body .framework-item,
    [data-theme="dark"] .whitepaper-body .future-item,
    [data-theme="dark"] .whitepaper-body .toc,
    [data-theme="dark"] .whitepaper-body .roadmap .phase,
    [data-theme="dark"] .whitepaper-body .arrow-flow .step {
        background: var(--zh-dark-surface) !important;
        border-color: var(--zh-dark-border) !important;
        box-shadow: var(--zh-dark-shadow) !important;
    }

    /* --- tables --- */

    [data-theme="dark"] .whitepaper-body .table-wrap {
        border-color: var(--zh-dark-border) !important;
        background: var(--zh-dark-surface) !important;
    }

    [data-theme="dark"] .whitepaper-body table td {
        background: transparent !important;
        border-color: var(--zh-dark-border-soft) !important;
        color: var(--zh-dark-text) !important;
    }

    [data-theme="dark"] .whitepaper-body table td:first-child {
        color: var(--zh-dark-text-strong) !important;
    }

    [data-theme="dark"] .whitepaper-body table tr:nth-child(even) td {
        background: var(--zh-dark-surface-2) !important;
    }

    [data-theme="dark"] .whitepaper-body table tr:hover td {
        background: var(--zh-dark-surface-3) !important;
    }

    /* --- light panels --- */

    [data-theme="dark"] .whitepaper-body .executive-summary {
        background: linear-gradient(135deg, #0e1a2e 0%, #12233d 60%, #0d1728 100%) !important;
        border-color: var(--zh-dark-border) !important;
        box-shadow: var(--zh-dark-shadow) !important;
    }

    [data-theme="dark"] .whitepaper-body .executive-summary h3 {
        color: var(--zh-dark-brand) !important;
    }

    [data-theme="dark"] .whitepaper-body .es-chip,
    [data-theme="dark"] .whitepaper-body .es-finding,
    [data-theme="dark"] .whitepaper-body .es-metric {
        background: var(--zh-dark-surface-2) !important;
        border-color: var(--zh-dark-border) !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] .whitepaper-body .es-chip {
        color: var(--zh-dark-brand) !important;
    }

    [data-theme="dark"] .whitepaper-body .es-metrics {
        border-top-color: var(--zh-dark-border) !important;
    }

    [data-theme="dark"] .whitepaper-body .about-why-item,
    [data-theme="dark"] .whitepaper-body .diagram-placeholder {
        background: var(--zh-dark-surface) !important;
        border-color: var(--zh-dark-border) !important;
    }

    [data-theme="dark"] .whitepaper-body .zp-list li {
        color: var(--text-secondary) !important;
        border-bottom-color: var(--zh-dark-border-soft) !important;
    }

    /* --- hero cover card (the printed cover mock-up) --- */

    [data-theme="dark"] .wp-web .wp-cover-card {
        background: var(--zh-dark-surface) !important;
        color: var(--zh-dark-text) !important;
        border: 1px solid var(--zh-dark-border) !important;
    }

    [data-theme="dark"] .wp-web .wp-cover-title,
    [data-theme="dark"] .wp-web .wp-cover-title .hl,
    [data-theme="dark"] .wp-web .wp-cover-sub b,
    [data-theme="dark"] .wp-web .wp-cover-list li b {
        color: var(--zh-dark-text-strong) !important;
    }

    [data-theme="dark"] .wp-web .wp-cover-sub,
    [data-theme="dark"] .wp-web .wp-cover-list li {
        color: var(--zh-dark-muted) !important;
    }

    [data-theme="dark"] .wp-web .wp-cover-tag,
    [data-theme="dark"] .wp-web .wp-cover-meta span {
        background: var(--zh-dark-surface-3) !important;
        color: var(--zh-dark-brand) !important;
    }

    [data-theme="dark"] .wp-web .wp-cover-foot {
        color: var(--zh-dark-muted) !important;
    }

    /* --- mobile nav panel --- */

    [data-theme="dark"] .wp-web .wp-nav-links.open {
        background: var(--zh-dark-surface) !important;
    }

    [data-theme="dark"] .wp-web .wp-nav-links a {
        color: var(--zh-dark-text) !important;
    }

    /* The mobile nav's own CTA is a filled blue pill, so it keeps the navy ink
       the light palette gives it — the flat link colour above is 2.9:1 on it.
       Scoped to the page's own `max-width: 900px` block, which is the only
       place that pill background is declared: above it the element is a plain
       nav link on the navy bar, and navy ink there is 1:1 — invisible. */
    @media (max-width: 900px) {
        [data-theme="dark"] .wp-web .wp-nav-links a.wp-nav-cta-mobile,
        [data-theme="dark"] .wp-web .wp-nav-links a.wp-nav-cta-mobile:hover {
            color: #0A192F !important;
        }
    }

    [data-theme="dark"] .wp-web .wp-nav-links a:hover {
        background: var(--zh-dark-surface-2) !important;
        color: var(--zh-dark-brand) !important;
    }
}

/* The toggle sits in the white paper's own navy nav, next to the primary CTA. */
.wp-nav .zh-theme-toggle {
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #eef4ff;
}

.wp-nav .zh-theme-toggle:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

[data-theme="dark"] .wp-nav .zh-theme-toggle {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* ---------------------------------------------------------------
   4. Checkout / upgrade page — light palette
   ---------------------------------------------------------------
   The checkout page was built dark-only: its palette lives in
   `--zh-*` custom properties on :root. Rather than fork that
   stylesheet, light mode just redefines the same variables on
   `body.zh-upg` — every card, badge, input and status chip on the
   page reads them, so the whole page follows in one move.

   Scoped to `.zh-upg` on purpose: `--zh-*` is also the portal /
   admin token set (sidebar-shared.css) and this file is loaded on
   every public page.
   --------------------------------------------------------------- */

/* Dark mode keeps the page's own token names but aligns the values with the
   shared dark palette, so the checkout cards sit on the same surfaces as the
   rest of the site. */
[data-theme="dark"] .zh-upg {
    --zh-bg: #080d18;
    --zh-surface: #101a2c;
    --zh-border: #25344e;
    --zh-text: #e8eef8;
    --zh-text-secondary: #b9cff0;
    --zh-text-muted: #9aabc4;
    --zh-primary: #5b9bff;
    --zh-primary-solid: #2563eb;
}

[data-theme="light"] .zh-upg {
    --zh-bg: #f4f7fc;
    --zh-surface: #ffffff;
    --zh-border: #d7e0ee;
    --zh-text: #0f1b2d;
    --zh-text-secondary: #475569;
    --zh-text-muted: #64748b;
    --zh-primary: #1d63d6;
    --zh-primary-solid: #1d63d6;
    --zh-radius: 14px;
}

[data-theme="light"] .zh-upg .upg-card {
    box-shadow: 0 8px 26px rgba(15, 27, 45, .07);
}

/* ---------------------------------------------------------------
   ctf/vpn.html — `.zh-vpn`, the CTF VPN setup page.

   Same token names as `.zh-upg` and `.zh-reader`, but this page used
   to ship the boot snippet and `theme.js` WITHOUT this stylesheet, so
   it mounted a working-looking toggle over a page that could not
   change: every `--zh-*` it reads fell back to its hard-coded light
   value and nothing in either palette existed to move it. The toggle
   now has a palette to switch to.
   --------------------------------------------------------------- */

[data-theme="dark"] .zh-vpn {
    --zh-bg: #080d18;
    --zh-surface: #101a2c;
    --zh-surface-2: #16233a;
    --zh-border: #25344e;
    --zh-text: #e8eef8;
    --zh-text-secondary: #b9cff0;
    --zh-text-muted: #9aabc4;
    --zh-primary: #5b9bff;
}

[data-theme="light"] .zh-vpn {
    --zh-bg: #f4f7fc;
    --zh-surface: #ffffff;
    --zh-surface-2: #eef3fb;
    --zh-border: #d7e0ee;
    --zh-text: #0f1b2d;
    --zh-text-secondary: #475569;
    --zh-text-muted: #64748b;
    --zh-primary: #1d63d6;
}

[data-theme="light"] .zh-upg .upg-card.featured {
    box-shadow: 0 0 0 1px var(--zh-primary), 0 18px 38px rgba(29, 99, 214, .14);
}

[data-theme="light"] .zh-upg .upg-feats li i {
    color: #059669;
}

/* The success/err status chips were tuned for a dark page; these two
   are the light-mode equivalents with the same meaning. */
[data-theme="light"] .zh-upg .co-status.ok {
    color: #047857;
}

[data-theme="light"] .zh-upg .co-status.err {
    color: #b91c1c;
}

[data-theme="light"] .zh-upg .upg-cta.active {
    background: rgba(5, 150, 105, .1) !important;
    color: #047857 !important;
    border-color: #059669 !important;
}

[data-theme="light"] .zh-upg .upg-foot a,
[data-theme="light"] .zh-upg .zh-btn-link {
    color: var(--zh-primary) !important;
}

/* ---------------------------------------------------------------
   4b. Academy reader — light palette
   ---------------------------------------------------------------
   Same shape as the checkout page: the reader was authored dark-only
   on a `--zh-*` token set declared in its own <style> block, so light
   mode redefines those tokens on `body.zh-reader` and only the handful
   of hard-coded fills below need explicit rules.
   --------------------------------------------------------------- */

[data-theme="light"] .zh-reader {
    --zh-bg: #f4f7fc;
    --zh-surface: #ffffff;
    --zh-surface-hover: #eef2f9;
    --zh-border: #d7e0ee;
    --zh-text: #0f1b2d;
    --zh-text-secondary: #475569;
    --zh-text-muted: #64748b;
    --zh-primary: #1d63d6;
    --zh-danger: #b91c1c;
    --zh-shadow-md: 0 8px 24px rgba(15, 27, 45, .08);
}

/* Dark mode keeps the page's token names but lifts the values to the shared
   dark palette — the page's authored #64748b muted grey is 3.7:1 on its own
   top bar. */
[data-theme="dark"] .zh-reader {
    --zh-bg: #080d18;
    --zh-surface: #101a2c;
    --zh-surface-hover: #16233a;
    --zh-border: #25344e;
    --zh-text: #e8eef8;
    --zh-text-secondary: #b9cff0;
    --zh-text-muted: #9aabc4;
    --zh-primary: #4fd8ff;
    --zh-danger: #f87171;
    --zh-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
}

/* The watermark footer is dark chrome in both palettes, so its own greys need
   lifting by hand — they cannot read the page tokens. The crest gradient is
   deepened here too: the page's #00d4ff start only gives white 1.8:1. */
[data-theme="dark"] .zh-reader .watermark .wm-txt span,
[data-theme="light"] .zh-reader .watermark .wm-txt span {
    color: #9fb0c9;
}

[data-theme="dark"] .zh-reader .watermark .wm-crest,
[data-theme="light"] .zh-reader .watermark .wm-crest {
    background: linear-gradient(135deg, #0e7490, #1e40af) !important;
    color: #fff;
}


/* The quota chips read as status colours, not body text: the dark-palette
   ambers are tuned for a dark page and wash out on white. */
[data-theme="light"] .zh-reader .reader-topbar .chip.pro {
    color: #a16207 !important;
    border-color: rgba(161, 98, 7, .38) !important;
}

[data-theme="light"] .zh-reader .reader-topbar .chip.low {
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, .38) !important;
}

/* Inline code sits on the page, so it needs the page's chip colours; inside a
   `pre` the panel stays dark in both palettes and keeps its own ink. */
[data-theme="light"] .zh-reader .doc-content p code,
[data-theme="light"] .zh-reader .doc-content li code,
[data-theme="light"] .zh-reader .doc-content td code {
    background: rgba(29, 99, 214, .09) !important;
    color: #1a4fb4 !important;
}

/* The panel keeps its dark fill in both palettes, so its ring has to stay dark
   too — the page's light `--zh-border` would draw a near-white halo on it. */
[data-theme="light"] .zh-reader .doc-content pre {
    color: #e2e8f0 !important;
    border-color: #2a3a56 !important;
}

/* The watermark is anti-piracy chrome, not page content: the veil, the
   centre mark and the footer bar stay dark-on-purpose in both palettes,
   but a white veil is invisible on a light page, so the mark inverts. */
[data-theme="light"] .zh-reader .watermark .wm-veil {
    filter: brightness(0);
    opacity: .07;
}

[data-theme="light"] .zh-reader .watermark .wm-badge b,
[data-theme="light"] .zh-reader .watermark .wm-badge span {
    color: #0f1b2d;
}

/* The control is colourless over a navbar hero, but the reader's slot sits on a
   solid bar, so it needs a real ink and a visible hover ring. */
[data-theme="dark"] .zh-reader .zh-theme-toggle {
    color: var(--zh-text-secondary) !important;
    border-color: var(--zh-border) !important;
}

[data-theme="dark"] .zh-reader .zh-theme-toggle:hover {
    color: var(--zh-primary) !important;
    border-color: var(--zh-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, .16) !important;
}

[data-theme="light"] .zh-reader .zh-theme-toggle {
    color: var(--zh-text-secondary) !important;
    border-color: var(--zh-border) !important;
}

[data-theme="light"] .zh-reader .zh-theme-toggle:hover {
    color: var(--zh-primary) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 3px rgba(29, 99, 214, .16) !important;
}

/* ---------------------------------------------------------------
   3. Surfaces that were still rendering light
   --------------------------------------------------------------- */

/* Every rule below was found by rendering the page in dark mode and reading
   back computed styles, so each one names the light rule it has to outrank.
   Selectors carry the full light selector (not just the class) because
   several of the offenders are compound — `.light-version .how .service_single_content`
   is specificity (0,3,0) and a bare `[data-theme="dark"] .service_single_content`
   would lose to it. */

/* Framework cards: `.light-version .how .service_single_content { background:#fff }` */
[data-theme="dark"] .service_single_content,
[data-theme="dark"] .light-version .service_single_content,
[data-theme="dark"] .light-version .how .service_single_content,
[data-theme="dark"] .our_services_area .service_single_content,
[data-theme="dark"] .our_services_area .service_single_content.v2,
[data-theme="dark"] .services-block-four .service_single_content {
    background: var(--zh-dark-surface) !important;
    background-image: none !important;
    border: 1px solid var(--zh-dark-border-soft) !important;
    box-shadow: var(--zh-dark-shadow) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .service_single_content h1,
[data-theme="dark"] .service_single_content h2,
[data-theme="dark"] .service_single_content h3,
[data-theme="dark"] .service_single_content h4,
[data-theme="dark"] .service_single_content h5,
[data-theme="dark"] .service_single_content h6 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .service_single_content p,
[data-theme="dark"] .service_single_content li {
    color: var(--zh-dark-muted) !important;
}

/* "Verified Hackers" / "Vulnerabilities Found": `.c-facts-box .single_cool_fact { background:#fff }` */
[data-theme="dark"] .single_cool_fact,
[data-theme="dark"] .c-facts-box .single_cool_fact {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    border-bottom: 3px solid var(--zh-dark-brand) !important;
    box-shadow: none !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .single_cool_fact .cool_fact_detail h3 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .single_cool_fact .cool_fact_detail h2 {
    color: var(--zh-dark-muted) !important;
}

/* Stock photography must not blink out of the page on a theme swap.

   `background-image` cannot be interpolated by CSS, so the generic
   `background:` shorthand above would drop these textures in one frame. Keeping
   the image and multiplying it against the dark surface instead makes the
   texture fade in step with the (transitionable) `background-color`, so the band
   stays art-directed in dark mode and animates like every other surface.

   The blend is declared inside the dark scope only, so light-mode rendering is
   untouched. `background-repeat/position/size` still come from `style.css`; only
   the image itself has to be restored, because the dark `background:` shorthand
   above reset it. */
[data-theme="dark"] .creative-facts,
[data-theme="dark"] .light-version .creative-facts {
    background-color: #16213a !important;
    background-image: url("../img/bg-img/facts-bg.jpg") !important;
    background-blend-mode: multiply !important;
}

[data-theme="dark"] .faq-timeline-area,
[data-theme="dark"] .light-version .faq-timeline-area {
    background-color: #1b2740 !important;
    background-image: url("../img/bg-img/bread-bg.png") !important;
    background-size: cover !important;
    background-blend-mode: multiply !important;
    color: var(--zh-dark-text) !important;
}

/* Client trust: `.zh-testi { background:linear-gradient(180deg,#f8fafc,#eef3f9) }` */
[data-theme="dark"] .zh-testi {
    background: linear-gradient(180deg, var(--zh-dark-page), var(--zh-dark-surface)) !important;
}

/* The logo wall and the testimonial cards are rendered client-side from
   Firestore, so they are absent from a static markup audit and have to be
   themed by class. */
[data-theme="dark"] .zh-logo-card {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .zh-logo-name {
    color: var(--zh-dark-text-strong) !important;
}

/* Partner logos are monochrome wordmarks in dark ink. The cards already mute
   them with `grayscale(1)`, so flipping to light ink here keeps them readable
   without changing the muted look. Drop this rule if a logo ever needs to
   stay in its printed colours. */
[data-theme="dark"] .zh-logo-card .zh-logo-img,
[data-theme="dark"] .zh-logo-card:hover .zh-logo-img {
    filter: grayscale(1) invert(1) brightness(1.35);
}

[data-theme="dark"] .zh-testi-card {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .zh-testi-msg {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-testi-name {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-testi-role {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-testi-logo img {
    background: var(--zh-dark-surface-3) !important;
}

[data-theme="dark"] .zh-testi-carousel .owl-dot span {
    background: rgba(255, 255, 255, .22) !important;
}

[data-theme="dark"] .zh-testi-carousel .owl-dot.active span {
    background: var(--zh-dark-brand) !important;
}

/* "Contact CTO" in the client-trust band: `.cta-btn { background:#fff }` */
[data-theme="dark"] .cta-btn {
    background: var(--zh-dark-surface-2) !important;
    border: 1px solid var(--zh-dark-border) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .cta-btn:hover {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-text-strong) !important;
    border-color: var(--zh-dark-brand) !important;
}

/* ---------------------------------------------------------------
   4. Content pages: legal, incident response, partnership, contact
   --------------------------------------------------------------- */

/* Same story as section 3, one family per block. These pages set their light
   colours in per-page <style> blocks (and a few inline styles), so each rule
   has to out-specify the page rule it replaces — hence the repeated
   `!important` and, where the page used a compound selector, the compound
   selector repeated here. */

/* --- legal / policy pages ------------------------------------- */

[data-theme="dark"] .policy-content,
[data-theme="dark"] .security-content,
[data-theme="dark"] .policy-top-banner {
    background: var(--zh-dark-page) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .policy-content .container,
[data-theme="dark"] .security-content .container {
    background: transparent !important;
}

[data-theme="dark"] .breadcrumb-bar {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .breadcrumb-bar a {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .policy-content h1,
[data-theme="dark"] .policy-content h2,
[data-theme="dark"] .policy-content h3,
[data-theme="dark"] .security-content h1,
[data-theme="dark"] .security-content h2,
[data-theme="dark"] .security-content h3 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .policy-content p,
[data-theme="dark"] .policy-content li,
[data-theme="dark"] .policy-content td,
[data-theme="dark"] .security-content p,
[data-theme="dark"] .security-content li,
[data-theme="dark"] .security-content td {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .policy-content table,
[data-theme="dark"] .security-content table {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .policy-content th,
[data-theme="dark"] .security-content th {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .policy-content td,
[data-theme="dark"] .security-content td {
    border-color: var(--zh-dark-border) !important;
}

/* Tinted notice / callout boxes: #f8fafc, #eef4ff, #fef2f2 and friends. */
[data-theme="dark"] .security-notice,
[data-theme="dark"] .highlight-box,
[data-theme="dark"] .privacy-summary,
[data-theme="dark"] .summary-item,
[data-theme="dark"] .compliance-item,
[data-theme="dark"] .regional-item,
[data-theme="dark"] .compliance-banner,
[data-theme="dark"] .agreement-summary,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .legal-meta span,
[data-theme="dark"] .contact-item {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .security-notice-title,
[data-theme="dark"] .highlight-box h3,
[data-theme="dark"] .summary-card h4 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .compliance-banner span {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* Badges: rgba(91,155,255,.14) over a light page reads as a pale blue slab. */
[data-theme="dark"] .policy-badge,
[data-theme="dark"] .zh-sec-badge {
    background: rgba(91, 155, 255, .16) !important;
    border-color: rgba(91, 155, 255, .35) !important;
    color: var(--zh-dark-brand) !important;
}

/* --- security incident response ------------------------------- */

[data-theme="dark"] .sec-hero,
[data-theme="dark"] .sec-section,
[data-theme="dark"] .sec-grid {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* The `.sec-hero` band is navy art in both themes; flattening it to a plain
   surface would delete the depth the page is built around. The image list is
   left byte-identical to light and multiplied against a dark tint instead, so
   the only thing that changes across a swap is the transitioning
   `background-color` — the band darkens smoothly rather than snapping. */
[data-theme="dark"] .sec-hero {
    background-image: linear-gradient(120deg, #0a192f 0%, #12356b 55%, #0d4f9e 100%) !important;
    background-color: #4d6a99 !important;
    background-blend-mode: multiply !important;
}

[data-theme="dark"] .sec-hero h1,
[data-theme="dark"] .sec-section h2,
[data-theme="dark"] .sec-section h3 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .sec-hero-tag {
    background: rgba(91, 155, 255, .16) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .sec-callout {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .sec-callout.warn {
    background: rgba(248, 113, 113, .12) !important;
    border-color: rgba(248, 113, 113, .4) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .sec-callout strong,
[data-theme="dark"] .sec-callout b {
    color: var(--zh-dark-text-strong) !important;
}

/* The page re-declares navy on the inline emphasis in the scope list and the
   SLA table (`.sec-section li b`, `.sec-table td b`) — both outrank a bare
   `b` rule, so they need their own dark entry. */
[data-theme="dark"] .sec-section li b,
[data-theme="dark"] .sec-table td b,
[data-theme="dark"] .sec-section li strong,
[data-theme="dark"] .sec-table td strong {
    color: var(--zh-dark-text-strong) !important;
}

/* Body links keep the light palette's #007bff, which is 4.0:1 on a dark
   surface; the shared dark brand is 5.7:1. */
[data-theme="dark"] .sec-section a,
[data-theme="dark"] .sec-callout a,
[data-theme="dark"] .sec-table a,
[data-theme="dark"] .sec-form a,
[data-theme="dark"] a.mail {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .sec-section a:hover,
[data-theme="dark"] .sec-callout a:hover,
[data-theme="dark"] .sec-table a:hover,
[data-theme="dark"] a.mail:hover {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .sec-form label,
[data-theme="dark"] .sec-form .hint {
    background: transparent !important;
    color: var(--zh-dark-muted) !important;
}

/* --- partnership tiers, forms, contact split ------------------ */

[data-theme="dark"] .zh-tier,
[data-theme="dark"] .zh-perk,
[data-theme="dark"] .zh-split,
[data-theme="dark"] .zh-split-form,
[data-theme="dark"] .fw-card {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .zh-tier-featured {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .zh-tier h3,
[data-theme="dark"] .zh-tier h4,
[data-theme="dark"] .zh-perk h3,
[data-theme="dark"] .zh-perk h4,
[data-theme="dark"] .fw-card h3,
[data-theme="dark"] .fw-card h4 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-tier p,
[data-theme="dark"] .zh-perk p,
[data-theme="dark"] .fw-card p {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-tier-type {
    background: rgba(79, 216, 255, .14) !important;
    border-color: rgba(79, 216, 255, .38) !important;
    color: var(--zh-dark-cyan) !important;
}

/* The tier body copy is a list, not a `p`, so the muted rule above never reached
   it: #475569 on --zh-dark-surface is 2.3:1. The audience line and the price meta
   are lighter still (3.7:1), which is under AA at the 12-13px they render at. */
[data-theme="dark"] .zh-tier-features li {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-tier-price-note {
    color: var(--zh-dark-muted) !important;
}

/* The /mo suffix sits inside the gradient-clipped price, so it inherits
   `-webkit-text-fill-color:transparent` and needs its own fill or it disappears. */
[data-theme="dark"] .zh-tier-price-sub {
    -webkit-text-fill-color: var(--zh-dark-muted) !important;
}

/* #e2e8f0 dashed rules around the price block glare once the card is dark. */
[data-theme="dark"] .zh-tier-price {
    border-color: var(--zh-dark-border) !important;
}

/* The ghost CTA is #0A192F on `background:transparent`, so it landed straight on
   the dark card as navy-on-navy — 1.0:1, which made the Apply Now / Contact Sales
   / Request Briefing buttons unreadable. The primary CTA keeps its navy gradient,
   where white ink is still the correct contrast, so it is left alone. */
[data-theme="dark"] .zh-tier-btn-ghost {
    color: var(--zh-dark-text-strong) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .zh-tier-btn-ghost:hover {
    background: var(--zh-dark-brand) !important;
    border-color: var(--zh-dark-brand) !important;
    color: #06101f !important;
}

/* The pricing note's plate is a translucent cyan wash, which composites fine over
   the dark page — but both of its inks were light-palette values that were never
   given a dark rule: the bold lead-in was #0A192F (1.1:1, invisible) and the body
   #64748b (4.1:1, under AA at 14px). */
[data-theme="dark"] .zh-tier-note {
    background-color: rgba(79, 216, 255, .10) !important;
    border-top-color: rgba(79, 216, 255, .30) !important;
    border-right-color: rgba(79, 216, 255, .30) !important;
    border-bottom-color: rgba(79, 216, 255, .30) !important;
    border-left-color: var(--zh-dark-cyan) !important;
}

[data-theme="dark"] .zh-tier-note strong {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-tier-note span {
    color: var(--zh-dark-muted) !important;
}

/* #0067DA on the dark page is 3.7:1; the cyan token is 10.5:1. */
[data-theme="dark"] .zh-tier-note > i {
    color: var(--zh-dark-cyan) !important;
}

[data-theme="dark"] .interest-card-inner,
[data-theme="dark"] .form-section-header,
[data-theme="dark"] .zh-contact-meta {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .form-section-header h3,
[data-theme="dark"] .zh-contact-meta strong {
    color: var(--zh-dark-text-strong) !important;
}

/* The partnership enquiry band is `style="background:#f8f9fa"` inline. */
[data-theme="dark"] #enquiry-form {
    background: var(--zh-dark-page) !important;
    color: var(--zh-dark-text) !important;
}

/* Services page: the "Deep-Dive Engagements" band. */
[data-theme="dark"] section.section-padding-70 {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

/* Blog + docs chrome. */
[data-theme="dark"] .blog-content {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] code {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-cyan) !important;
}

/* Inline-styled light boxes that carry no class, e.g.
   `<div style="background:#f8fafc;border:1px solid #e2e8f0">`. Matched on the
   style attribute so the markup does not have to be edited page by page. */
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f5f8fc"],
[data-theme="dark"] [style*="background: #f5f8fc"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"] {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* Radio/checkbox option cards on the contact form: the label itself is the
   clickable chip and `.zh-option label` paints it. */
[data-theme="dark"] .zh-option label {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* Striped policy tables keep their own row background. */
[data-theme="dark"] .policy-content tr,
[data-theme="dark"] .security-content tr {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .policy-content tbody tr:nth-child(even),
[data-theme="dark"] .security-content tbody tr:nth-child(even) {
    background: var(--zh-dark-surface-2) !important;
}

/* Inline dark text on themed surfaces.

   The rules above re-tint inline `background:#f8fafc` boxes to the dark
   surface, but text inside them carries its own inline `color:#0A192F` (or
   `#334155`), and an inline declaration beats an inherited value — so the
   box goes dark while its copy stays navy, which is the 1.0:1 case.

   These two values plus `#64748b` below account for every dark inline text
   colour in the markup, so matching on the style attribute is exhaustive here.
   Scoped to `[data-theme="dark"]`, so the light palette is untouched. */
[data-theme="dark"] [style*="color:#0A192F"],
[data-theme="dark"] [style*="color: #0A192F"],
[data-theme="dark"] [style*="color:#0a192f"],
[data-theme="dark"] [style*="color: #0a192f"],
[data-theme="dark"] [style*="color:#0A2558"],
[data-theme="dark"] [style*="color: #0A2558"],
[data-theme="dark"] [style*="color:#0a2558"],
[data-theme="dark"] [style*="color: #0a2558"] {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #334155"] {
    color: var(--zh-dark-muted) !important;
}

/* #64748b is the light palette's muted slate and the third most common inline ink
   in the markup. The two rules above re-tint the boxes it sits in, but not the
   ink itself, so section subtitles held at 4.1:1 once the page shell went dark —
   under AA at the 14-16px they render at. Matching it here covers them the same
   way as #0A192F rather than page by page (the partnership page's "Flexible
   engagement models…" lead-in is one of them). */
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748B"],
[data-theme="dark"] [style*="color: #64748B"] {
    color: var(--zh-dark-muted) !important;
}

/* Inline near-white backgrounds. Measured across the public pages, this
   matches only six elements: four empty 80px spacer divs under <body>, the
   blog subscribe button, and two inline-styled chips on the CVE page. All six
   read as white slabs in dark mode, so they all follow the palette. Matching
   on the style attribute keeps the markup untouched. */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* The empty spacers under <body> exist only to clear the fixed navbar, so
   they should disappear into the page rather than become a dark card. */
[data-theme="dark"] div[style*="background:#fff"]:empty,
[data-theme="dark"] div[style*="background: #fff"]:empty,
[data-theme="dark"] div[style*="background:#ffffff"]:empty,
[data-theme="dark"] div[style*="background: #ffffff"]:empty {
    background: var(--zh-dark-page) !important;
    border-color: transparent !important;
}

/* Newsletter bar button: `.newsletter-bar button { background:#fff }` */
[data-theme="dark"] .newsletter-bar button {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .newsletter-bar button:hover {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-text-strong) !important;
}

/* ==========================================================================
   TEXT-COLOUR FIXES (found by a contrast probe, not the background audit)

   The background-luminance sweep could not see any of the following: the
   surfaces were already dark or already correct, but the TEXT on them was
   still painted with the light palette. Measured against the real rendered
   pages, the worst cases were:

     .card-title a          #0A192F on #101a2c  -> 1.01  (blog listing titles)
     .article-content       white body, text  -> 2.33  (blog detail, 98 nodes)
     footer inline links    #334155 on #101a2c -> 1.68
     footer inline <strong> #0A192F on #101a2c -> 1.01

   Two distinct causes, both of which beat the cascade in different ways:

   1. Page-level <style> blocks (index-blog.html, index-single-blog.html,
      index-single-blog2.html) hardcode the light palette. A later stylesheet
      with equal-or-lower specificity loses, so these need !important.
   2. Inline style="" attributes in the markup (footer.html links, the copy
      button, the author email). Only !important can override those.
   ========================================================================== */

/* --- blog listing: the title anchor was never themed, only its h3 -------- */
[data-theme="dark"] .card-title a,
[data-theme="dark"] .card-title a:visited,
[data-theme="dark"] .blog-card h2 a,
[data-theme="dark"] .blog-card h3 a,
[data-theme="dark"] .blog-grid h3 a,
[data-theme="dark"] .featured-body h2 a,
[data-theme="dark"] .rail-entry h3 a,
[data-theme="dark"] .related-card h3 a {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .card-title a:hover,
[data-theme="dark"] .blog-card h2 a:hover,
[data-theme="dark"] .blog-card h3 a:hover,
[data-theme="dark"] .blog-grid h3 a:hover,
[data-theme="dark"] .featured-body h2 a:hover,
[data-theme="dark"] .rail-entry h3 a:hover,
[data-theme="dark"] .related-card h3 a:hover {
    color: var(--zh-dark-brand) !important;
}

/* --- blog detail: `.article-content { background: white }` in a page style - */
[data-theme="dark"] .article-content,
[data-theme="dark"] .article-body {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .article-content h1,
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .article-content h3,
[data-theme="dark"] .article-content h4,
[data-theme="dark"] .article-body h1,
[data-theme="dark"] .article-body h2,
[data-theme="dark"] .article-body h3,
[data-theme="dark"] .article-body h4 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .article-content p,
[data-theme="dark"] .article-body p,
[data-theme="dark"] .article-body li,
[data-theme="dark"] .article-content li,
[data-theme="dark"] .article-content ul,
[data-theme="dark"] .article-content ol {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .article-content strong,
[data-theme="dark"] .article-body strong {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .article-content a,
[data-theme="dark"] .article-body a {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .article-body blockquote,
[data-theme="dark"] .article-content blockquote {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-muted) !important;
    border-left-color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .article-content pre,
[data-theme="dark"] .article-body pre {
    background: var(--zh-dark-page) !important;
    color: #dbe6f5 !important;
    border: 1px solid var(--zh-dark-border);
}

[data-theme="dark"] .article-content code,
[data-theme="dark"] .article-body code {
    background: var(--zh-dark-surface-3) !important;
    color: #ff9db4 !important;
}

[data-theme="dark"] .article-meta {
    border-bottom-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .article-meta span,
[data-theme="dark"] .article-content .article-meta span {
    color: var(--zh-dark-muted) !important;
}

/* Article buttons carry no colour of their own. The share chips that do live
   further down this file and deliberately override this rule — a chip's ink is
   per-brand, so it cannot be reduced to a single muted step here.
   `.share-btn` was dropped: nothing in the blog templates emits that class
   (the listing page uses `.card-share-btn`, a different component). */
[data-theme="dark"] .article-content button,
[data-theme="dark"] .tag-btn {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-muted) !important;
}

/* --- newsletter mini CTA: muted grey on the blue brand button ------------
   rgba(255,255,255,.88) on the #1565ff fill only reaches 3.9:1, and the
   #dce8ff used to lift it further drops that to 3.4:1. Pure white measures
   4.9:1 on the same fill, so that is the value that has to land here. */
[data-theme="dark"] .mini-cta p,
[data-theme="dark"] .newsletter-bar p {
    color: #ffffff !important;
}

/* Several pages (index-blog.html, index-single-blog*.html) inline the whole
   newsletter bar rather than using `.newsletter-bar`, so the copy stays at
   rgba(255,255,255,.88) on the #1565ff fill — 2.1:1 once the surrounding
   section is re-tinted. `!important` in a stylesheet outranks an inline
   declaration, so a plain descendant selector is enough. */
[data-theme="dark"] .newsletter-section p,
[data-theme="dark"] .newsletter-section h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .newsletter-section input[type="email"] {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .35) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .newsletter-section input::placeholder {
    color: rgba(255, 255, 255, .75) !important;
}

[data-theme="dark"] .newsletter-section button {
    background: #ffffff !important;
    color: #123a7a !important;
}

/* --- footer: inline-styled links, paragraph and the author email --------- */
[data-theme="dark"] .footer-content-area .contact_info a,
[data-theme="dark"] .footer-content-area .contact_info strong,
[data-theme="dark"] .footer-content-area .copywrite_text,
[data-theme="dark"] .footer-content-area .copywrite_text p,
[data-theme="dark"] .footer-content-area .copywrite_text strong,
[data-theme="dark"] .footer-content-area .footer-menu a,
[data-theme="dark"] .footer-content-area .footer_widget ul li a {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .footer-content-area .contact_info a:hover,
[data-theme="dark"] .footer-content-area .footer-menu a:hover,
[data-theme="dark"] .footer-content-area .copywrite_text a:hover {
    color: var(--zh-dark-brand) !important;
}

/* --------------------------------------------------------------------------
   Round 2: text colours the first contrast pass surfaced, plus tables.

   Firestore blog bodies carry their own inline table styling (light cell
   background, slate text), and several landing-page widgets hardcode the
   light palette. `.counter` in style.css even uses `!important`, so these
   overrides must be `!important` too and must out-specify it.
   -------------------------------------------------------------------------- */

[data-theme="dark"] .article-body table,
[data-theme="dark"] .article-content table {
    background: transparent !important;
    color: var(--zh-dark-text) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .article-body td,
[data-theme="dark"] .article-body th,
[data-theme="dark"] .article-content td,
[data-theme="dark"] .article-content th {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-text) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .article-body thead th,
[data-theme="dark"] .article-content thead th {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-text-strong) !important;
}

/* --- author-written plates and inks inside the article body ---------------
   `.article-body` is raw editor HTML, so an author can drop an inline
   `background:#f1f5f9` callout into a post. The rules above force every text
   node in the body to the light-on-dark palette, but a stylesheet cannot see
   that plate — so the text landed on a near-white background at 1.06:1 and the
   section read as blank.

   The earlier remedy was `[style*="background:#f8f9fa"]`, one hardcoded hex at
   a time, which is why this looked intermittent: only the hexes someone
   remembered were re-tinted. index-single-blog.html now classifies each plate
   by luminance and marks it `data-zh-plate="light"` / `data-zh-ink="dark"`, so
   the palette stays here in CSS and covers every colour an editor can pick.

   Gradients and url() backgrounds are deliberately excluded in JS: those are
   brand art rather than plates, and flattening them would lose the design. */
[data-theme="dark"] .article-body [data-zh-plate="light"],
[data-theme="dark"] .article-content [data-zh-plate="light"] {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .article-body [data-zh-ink="dark"],
[data-theme="dark"] .article-content [data-zh-ink="dark"] {
    color: var(--zh-dark-text) !important;
}

/* A plate that carried a light border keeps a visible edge against the
   surface it now sits on. */
[data-theme="dark"] .article-body [data-zh-plate="light"] img,
[data-theme="dark"] .article-content [data-zh-plate="light"] img {
    background: var(--zh-dark-surface-3) !important;
}

/* --- structural elements an author can produce but nothing themed --------
   Every one of these was reachable from the editor and defaulted to the light
   palette's ink, which is invisible on the dark article surface. */
[data-theme="dark"] .article-body h5,
[data-theme="dark"] .article-body h6,
[data-theme="dark"] .article-content h5,
[data-theme="dark"] .article-content h6 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .article-body hr,
[data-theme="dark"] .article-content hr {
    border-top-color: var(--zh-dark-border) !important;
    background: var(--zh-dark-border) !important;
}

[data-theme="dark"] .article-body figure,
[data-theme="dark"] .article-content figure {
    background: transparent !important;
}

[data-theme="dark"] .article-body figcaption,
[data-theme="dark"] .article-content figcaption {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .article-body dl,
[data-theme="dark"] .article-body dt,
[data-theme="dark"] .article-body dd,
[data-theme="dark"] .article-content dl,
[data-theme="dark"] .article-content dt,
[data-theme="dark"] .article-content dd {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .article-body dt,
[data-theme="dark"] .article-content dt {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .article-body mark,
[data-theme="dark"] .article-content mark {
    background: rgba(0, 212, 255, 0.18) !important;
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .article-body small,
[data-theme="dark"] .article-content small,
[data-theme="dark"] .article-body sub,
[data-theme="dark"] .article-content sub,
[data-theme="dark"] .article-body sup,
[data-theme="dark"] .article-content sup,
[data-theme="dark"] .article-body abbr,
[data-theme="dark"] .article-content abbr {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .article-body caption,
[data-theme="dark"] .article-content caption {
    background: transparent !important;
    color: var(--zh-dark-muted) !important;
}

/* `<details>`/`<summary>` are how several posts ship FAQ blocks. The marker
   stays light-on-dark in both states, and the disclosure triangle keeps its
   native ink because it is not a text node. */
[data-theme="dark"] .article-body details,
[data-theme="dark"] .article-content details {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .article-body summary,
[data-theme="dark"] .article-content summary {
    color: var(--zh-dark-text-strong) !important;
}

/* Embedded media sits flush against the article surface; without a plate and
   an edge a light iframe reads as a hole punched in the page. */
[data-theme="dark"] .article-body iframe,
[data-theme="dark"] .article-body video,
[data-theme="dark"] .article-content iframe,
[data-theme="dark"] .article-content video {
    background: var(--zh-dark-surface-2) !important;
    border: 1px solid var(--zh-dark-border) !important;
}

/* Ordered/unordered list markers are painted from `color`, so they follow the
   li rules above; `.article-body ul/ol` were missing where `.article-content`
   had them, which left nested lists inheriting the page default. */
[data-theme="dark"] .article-body ul,
[data-theme="dark"] .article-body ol,
[data-theme="dark"] .article-content ul,
[data-theme="dark"] .article-content ol {
    color: var(--zh-dark-text) !important;
}

/* FAQ question text was left at the light palette's navy. */
[data-theme="dark"] .zh-faq-qt,
[data-theme="dark"] .faq-timeline-area .zh-faq-qt {
    color: var(--zh-dark-text-strong) !important;
}

/* `.counter { color:#13287e !important }` in style.css - out-specify it. */
[data-theme="dark"] .counter,
[data-theme="dark"] .single_cool_fact .counter,
[data-theme="dark"] .c-facts-box .counter {
    color: var(--zh-dark-brand) !important;
}

/* Cyan pill badges: the light-palette #0284b8 is too dark on a dark surface. */
[data-theme="dark"] .zh-help-badge,
[data-theme="dark"] .zh-contact-tag {
    color: #7dd3fc !important;
    background: rgba(0, 212, 255, 0.14) !important;
    border-color: rgba(0, 212, 255, 0.35) !important;
}

/* Brand-on-brand text was 1.92:1 - use white on the blue fill. */
[data-theme="dark"] a.info-btn,
[data-theme="dark"] .info-btn,
[data-theme="dark"] button.info-btn,
[data-theme="dark"] .green-btn {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Round 3: surfaces the automated contrast pass found in the live DOM.
   These are all inline-styled elements, so a stylesheet rule needs the
   attribute selector plus !important to beat the inline declaration.
   -------------------------------------------------------------------------- */

/* The footer's bottom bar (inline #64748b / #0067DA on every page) sat at
   3.7:1 and 3.3:1 against the dark footer surface. The markup now carries
   .zh-footer-copy / .zh-footer-tag so this is a plain class rule. */
[data-theme="dark"] .zh-footer-copy {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-footer-tag {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .zh-footer-bottom {
    border-top-color: var(--zh-dark-border) !important;
}

/* `.more-btn` is #007bff on a #101a2c card (4.38:1). `--zh-dark-brand` is
   lighter and clears the threshold with room to spare. */
[data-theme="dark"] a.more-btn,
[data-theme="dark"] .more-btn {
    color: var(--zh-dark-brand) !important;
}

/* Eyebrow/pill labels used the light #0067DA on the cyan-tinted pill. */
[data-theme="dark"] .zh-sec-eyebrow {
    color: #7dd3fc !important;
}

/* services.html builds its own card system rather than the shared one:
   .service-badge paints a #eef5ff pill with #0066ff text, and
   .service-card-footer span is hardcoded navy #0a2558 (1.18:1 on dark).
   Both need the surface re-tinted as well as the text, otherwise fixing the
   foreground just moves the failure. */
[data-theme="dark"] .service-badge {
    color: #7dd3fc !important;
    background: rgba(0, 212, 255, .14) !important;
}

[data-theme="dark"] .service-card-footer span {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .service-list li {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .service-card-footer {
    border-top-color: var(--zh-dark-border) !important;
}

/* The trust badges on index.html are inline `#fff on #0067da`, which measures
   4.6:1 in light — fine. In dark the pill has to stay the same saturated
   blue, so only the text needs lifting to pure white. */
[data-theme="dark"] .badge[style*="0067da"] {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Policy / legal pages share their own component set (compliance-certifications
   and ethical-hacking-policy are near-identical files): .policy-meta span and
   .security-contact span are hardcoded navy #0A192F (1.0-1.1:1 on a dark card),
   and .security-contact a is #0077CC (3.7:1).
   -------------------------------------------------------------------------- */

[data-theme="dark"] .policy-meta span,
[data-theme="dark"] .security-contact span {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .policy-meta strong,
[data-theme="dark"] .security-contact strong {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .security-contact a {
    color: var(--zh-dark-brand) !important;
}

/* terms-of-service.html uses its own names for the same two components. */
[data-theme="dark"] .legal-meta span {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .legal-meta span i {
    color: var(--zh-dark-brand) !important;
}

/* index-partnership.html keeps its own form styles inside a media query, so
   the label (#334155) and the trust row (#0A192F) are never restyled by the
   shared form rules and land at 1.7:1 / 1.1:1 on the dark card. */
[data-theme="dark"] .form-field label {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .form-header-trust span {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .form-header-trust span i {
    color: var(--zh-dark-cyan) !important;
}

[data-theme="dark"] .legal-badge {
    background: rgba(91, 155, 255, .14) !important;
    color: #9dc4ff !important;
}

[data-theme="dark"] .legal-badge i {
    color: #9dc4ff !important;
}

[data-theme="dark"] .terms-hero .hero-text {
    color: var(--zh-dark-muted) !important;
}

/* The terms-of-service contact block: `.contact-item span, .contact-item a`
   share one #64748b declaration, and `.contact-item strong` is navy
   #0a2558 (1.2:1 on the dark card). The .contact-icon is a gradient badge
   with `color:#fff !important`, so it needs the fill darkened instead. */
[data-theme="dark"] .contact-item span,
[data-theme="dark"] .contact-item a {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .contact-item a:hover {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .contact-item strong {
    color: var(--zh-dark-text-strong) !important;
}

/* The icon badge glyph needs pure white: --zh-dark-text on the #2f6fd0 end of
   the gradient is 4.18:1, white is 4.88:1. The badge is a <span> inside
   .contact-item, so it has to out-specify the `.contact-item span` rule above
   rather than just match later. */
[data-theme="dark"] .contact-item .contact-icon {
    background: linear-gradient(135deg, #2f6fd0, #1d4ed8) !important;
    color: #ffffff !important;
}

/* The Gig AI assistant panel and the cookie-consent box are theme-neutral:
   both inject their own dark stylesheet at runtime and look identical in
   either palette, so their header gradients are fixed at the source
   (js/ai-assistant.js, js/zh-analytics.js) rather than forked here. */

/* --------------------------------------------------------------------------
   Round 4: page-local components the background sweep flagged as painting a
   literal near-white surface with no [data-theme="dark"] counterpart. Each of
   these is a self-contained card/modal/popover defined in one page's own
   <style>, so the dark version is a surface + text swap rather than a
   variable redefinition.
   -------------------------------------------------------------------------- */

/* academy/landing.html — course + marketing cards */
[data-theme="dark"] .specialty-track,
[data-theme="dark"] .pathway-card,
[data-theme="dark"] .course-category,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .portal-preview {
    background: var(--zh-dark-surface) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .specialty-track h5,
[data-theme="dark"] .pathway-card h3,
[data-theme="dark"] .category-header h3,
[data-theme="dark"] .testimonial-card p,
[data-theme="dark"] .portal-preview h4 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .specialty-track p,
[data-theme="dark"] .course-category .course-item,
[data-theme="dark"] .testimonial-card .testimonial-text {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .category-header {
    background: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .track-length,
[data-theme="dark"] .course-category .category-badge {
    background: rgba(0, 212, 255, .14) !important;
    color: #7dd3fc !important;
}

/* academy/landing.html — specialized-tracks carousel (Round 6: flat cards,
   auto-flowing track). The card borders are light by default; swap them for
   dark border tones and tint the icon chip + arrow-style hover. */
[data-theme="dark"] .specialty-track {
    border-color: var(--zh-dark-border) !important;
    border-top-color: #00D4FF !important;
}

[data-theme="dark"] .track-ico {
    background: rgba(0, 212, 255, .16) !important;
    color: #7dd3fc !important;
}

[data-theme="dark"] .track-head h5 {
    color: var(--zh-dark-text-strong) !important;
}

/* academy/landing.html — learning-pathways cards (Round 7: card internals the
   generic heading/paragraph rules do not reach — list items, region-tag pills,
   pricing plate and the dark-navy price emphasis). Headings, desc and plain
   paragraphs are already handled by the global h1-h6 / p overrides above. */
[data-theme="dark"] .pathway-features li {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .pathway-features i {
    color: #7dd3fc !important;
}

[data-theme="dark"] .region-tag {
    background: rgba(0, 212, 255, .14) !important;
    color: #7dd3fc !important;
    border: 1px solid rgba(0, 212, 255, .25) !important;
}

[data-theme="dark"] .pathway-pricing {
    background: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .pathway-pricing p {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .price-free {
    color: #4ade80 !important;
}

[data-theme="dark"] .price-starting {
    color: #FF6B35 !important;
}

[data-theme="dark"] .price-discount {
    color: var(--zh-dark-text-strong) !important;
}

/* academy/landing.html — curriculum catalog (#courses) and CTA fill. The
   section itself carries inline ``style="background:#f8f9fa"`` (and the CTA a
   `#edf6fd` fill), which beats every non-!important stylesheet rule; the rest
   here repair the card internals the Round-4 sweep did not reach
   (.course-list, .enrollment-stats and the h4 heading the existing selector
   had missed). */
[data-theme="dark"] section#courses,
[data-theme="dark"] section.section-padding-70[style*="#edf6fd"] {
    background: var(--zh-dark-bg) !important;
}

[data-theme="dark"] .course-category .category-header h4,
[data-theme="dark"] .course-category .category-content p {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .course-list li {
    color: var(--zh-dark-muted) !important;
    border-bottom-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .enrollment-stats {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-text) !important;
}

/* academy/{login,register}-legacy.html */
[data-theme="dark"] .social-btn {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .social-btn:hover {
    background: var(--zh-dark-surface-3) !important;
    border-color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .country-select {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* client/landing.html — the portal preview tabs */
[data-theme="dark"] .client-portal-tabs .tab-content {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .client-portal-tabs .nav-tabs .nav-link {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .client-portal-tabs .nav-tabs .nav-link.active {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text-strong) !important;
    border-color: var(--zh-dark-border) !important;
}

/* index-blog.html / index-cve.html — pagination + share popover */
[data-theme="dark"] .pagination-wrap .page-btn,
[data-theme="dark"] .share-menu {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .share-menu a {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .share-menu a:hover {
    background: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .pagination-wrap .page-btn:hover:not(.active) {
    border-color: var(--zh-dark-brand) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .pagination-wrap .page-btn.active {
    background: var(--zh-dark-brand) !important;
    border-color: var(--zh-dark-brand) !important;
    color: #06101f !important;
}

/* Modals: index-cve.html (.cve-modal), papers/index.html (.paper-modal, .pay-modal) */
[data-theme="dark"] .cve-modal,
[data-theme="dark"] .paper-modal,
[data-theme="dark"] .pay-modal {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .cve-modal h2,
[data-theme="dark"] .cve-modal h3,
[data-theme="dark"] .paper-modal h2,
[data-theme="dark"] .paper-modal h3,
[data-theme="dark"] .pay-modal h3 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .pay-method-btn {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .pay-method-btn:hover,
[data-theme="dark"] .pay-method-btn.selected {
    background: var(--zh-dark-surface-3) !important;
    border-color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .cat-sidebar-inner,
[data-theme="dark"] .cat-sidebar-inner h3 {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .cat-sidebar-inner a {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .cat-sidebar-inner a:hover,
[data-theme="dark"] .cat-sidebar-inner a.active {
    color: var(--zh-dark-brand) !important;
}

/* security-incident-response.html + index-partnership.html accents */
[data-theme="dark"] .sec-cta {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-perk-num {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .zday-partner-btn {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* contact-us.html form shell */
[data-theme="dark"] .contact_form {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-text) !important;
}

/* --- academy/login-legacy.html + academy/register-legacy.html -----------
   Both pages float a near-opaque white card (`rgba(255,255,255,.95/.97)`)
   over a gradient backdrop. Because that white is painted on the card itself,
   every child inherits it as its backdrop — so repainting the card is what
   turns the headings and the form labels legible; without it they render
   near-white on near-white. The rest of the block follows the same idea for
   the pieces that hard-code a light fill or a #333/#555/#999 text colour. */
[data-theme="dark"] .login-card,
[data-theme="dark"] .register-card {
    background: rgba(16, 26, 44, .95) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55) !important;
}

[data-theme="dark"] .login-card:hover,
[data-theme="dark"] .register-card:hover {
    box-shadow: 0 25px 70px rgba(0, 0, 0, .65) !important;
}

[data-theme="dark"] .login-card .form-input,
[data-theme="dark"] .register-card .form-input,
[data-theme="dark"] .login-card .country-select,
[data-theme="dark"] .register-card .country-select {
    background-color: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .login-card .form-input::placeholder {
    color: var(--zh-dark-muted) !important;
    opacity: 0.75 !important;
}

[data-theme="dark"] .login-card .form-label,
[data-theme="dark"] .register-card .form-label,
[data-theme="dark"] .login-card .social-login h3,
[data-theme="dark"] .register-card .social-login h3,
[data-theme="dark"] .login-card .remember-me label,
[data-theme="dark"] .register-card .terms-checkbox label {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .login-card .social-btn,
[data-theme="dark"] .register-card .social-btn {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

/* The GitHub mark is #333 on the provider's own white chip; on a dark chip it
   has to go light or the glyph disappears. */
[data-theme="dark"] .login-card .social-btn.github i,
[data-theme="dark"] .register-card .social-btn.github i {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .login-card .divider:before,
[data-theme="dark"] .login-card .divider:after,
[data-theme="dark"] .register-card .progress-steps:before,
[data-theme="dark"] .register-card .social-login,
[data-theme="dark"] .register-card .login-link {
    background: var(--zh-dark-border) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .login-card .divider span,
[data-theme="dark"] .register-card .step-label {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .register-card .step-circle {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .register-card .terms-checkbox {
    background: rgba(79, 216, 255, .07) !important;
    border-color: rgba(79, 216, 255, .22) !important;
}

/* The cyan links sit on a #0A192F card; in dark the hover target is the page
   text, not navy, or the hover swallows the label. */
[data-theme="dark"] .login-card .forgot-password,
[data-theme="dark"] .register-card .terms-checkbox a,
[data-theme="dark"] .login-card .register-link a,
[data-theme="dark"] .register-card .login-link a {
    color: var(--zh-dark-cyan) !important;
}

[data-theme="dark"] .login-card .forgot-password:hover,
[data-theme="dark"] .login-card .register-link a:hover,
[data-theme="dark"] .register-card .login-link a:hover {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .login-card .register-link,
[data-theme="dark"] .login-card .password-toggle {
    border-top-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .login-card .register-link p,
[data-theme="dark"] .register-card .login-link p,
[data-theme="dark"] .login-card .welcome-text p,
[data-theme="dark"] .register-card .welcome-section p,
[data-theme="dark"] .register-card .academy-tagline {
    color: var(--zh-dark-muted) !important;
}

/* --- client/landing.html ------------------------------------------------
   The portal-preview tabs paint their own #f8fafc fill, so the muted label
   colour the tab set already uses lands on a near-white chip. */
[data-theme="dark"] .client-portal-tabs .nav-tabs .nav-link {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .client-portal-tabs .nav-tabs .nav-link:hover {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-brand) !important;
}

/* Bootstrap's outline-primary keeps its #007bff label on a dark card. */
[data-theme="dark"] .btn-outline-primary {
    color: var(--zh-dark-brand) !important;
    border-color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
    background: var(--zh-dark-brand) !important;
    color: var(--zh-dark-page) !important;
}

/* --- papers/index.html --------------------------------------------------
   The category rail is built from divs, so the existing `.cat-sidebar-inner a`
   rules never matched it — `.cat-name` kept its #334155 on the dark card. */
[data-theme="dark"] .cat-item .cat-name,
[data-theme="dark"] .cat-all-item .cat-name {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .cat-item .cat-icon,
[data-theme="dark"] .cat-item .cat-count {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .cat-item:hover,
[data-theme="dark"] .cat-all-item:hover {
    background: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .cat-item.active,
[data-theme="dark"] .cat-all-item.active,
[data-theme="dark"] .cat-item.active .cat-name,
[data-theme="dark"] .cat-all-item.active .cat-name,
[data-theme="dark"] .cat-item.active .cat-icon,
[data-theme="dark"] .cat-item.active .cat-count {
    background: rgba(91, 155, 255, .16) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .cat-sidebar-header,
[data-theme="dark"] .cat-all-item {
    border-color: var(--zh-dark-border-soft) !important;
}

/* --- academy/certificates.html -------------------------------------------
   A bare <footer> rather than the shared `.footer-content-area`, so it falls
   outside the footer block: #64748b is 4.1:1 on the page, the muted token is
   6.2:1. */
[data-theme="dark"] .zh-cert-footer {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-cert-footer a {
    color: var(--zh-dark-text) !important;
}

/* --- contact-us.html ------------------------------------------------------
   `.zh-contact-card` is flipped to --zh-dark-surface-2 by the generic surfaces
   block, but the card body keeps the light palette's hard-coded slate-700
   (#334155, 1.5:1) and brand blue (#0067DA, 3.0:1) from its page <style>. Both
   need re-pointing at the dark tokens now the plate behind them is dark. */
[data-theme="dark"] .zh-contact-card .zh-cm-row span,
[data-theme="dark"] .zh-contact-card .zh-cm-label {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-contact-card .zh-cm-row a {
    color: var(--zh-dark-brand) !important;
}

/* --- faq.html -------------------------------------------------------------
   `.zh-faq-num` sits on a tinted plate (#0e2d41) that the FAQ block already
   darkens, while its digits stayed the light palette's #0067DA — 2.7:1. The
   brand token is 5.2:1 on that plate. Same for the help-card link. */
[data-theme="dark"] .zh-faq-num {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .zh-help-row a {
    color: var(--zh-dark-brand) !important;
}

/* --- index-blog-with-sidebar.html -----------------------------------------
   The "Don't miss" rail keeps #222 from its page <style>; the sidebar area is
   dark in this palette, so the headline link read at 1.2:1. */
[data-theme="dark"] .single-dont-miss-post .dont-miss-post-content a {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .single-dont-miss-post .dont-miss-post-content a:hover {
    color: var(--zh-dark-brand) !important;
}

/* --- index-partnership.html -----------------------------------------------
   `.ecosystem-card-light` is named for its light plate, which the generic
   surfaces block turns dark — but its list body (#475569, 2.3:1) and its
   purple deep-link (#6f42c1, 2.7:1) were left on the light values. */
[data-theme="dark"] .ecosystem-card-light li {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .ecosystem-card-light a {
    color: #a78bfa !important;
}

[data-theme="dark"] .ecosystem-card-light a:hover {
    color: #c4b5fd !important;
}

/* --- index-partnership.html: compliance band ------------------------------
   The band is authored as an inline `background:linear-gradient(180deg,#f8fafc
   0%,#fff 100%)`. The generic inline matcher above keys on `background:#f8fafc`
   and cannot reach it — the declaration is a gradient, not a solid fill — so the
   band stayed near-white in dark mode. Its inline `color:#0A192F` heading and
   stat figures *were* re-pointed at the dark text token, which left light ink on
   a white plate. Same opt-in-per-selector shape as `.zh-testi` above. */
[data-theme="dark"] .zh-sec-alt {
    background: linear-gradient(180deg, var(--zh-dark-page), var(--zh-dark-surface)) !important;
}

/* Muted slate inside the band has no inline matcher of its own: #64748b is
   3.7:1 on --zh-dark-surface, the muted token is 7.5:1. */
[data-theme="dark"] .zh-sec-alt [style*="color:#64748b"],
[data-theme="dark"] .zh-sec-alt [style*="color: #64748b"] {
    color: var(--zh-dark-muted) !important;
}

/* The 1px trust-bar rules are near-white in the light palette and glare once the
   band behind them is dark. */
[data-theme="dark"] .zh-sec-alt [style*="background:#e2e8f0"] {
    background: var(--zh-dark-border) !important;
}

/* The badge plate behind each standard's glyph is
   `rgba(0,212,255,.10) → rgba(10,25,47,.05)` — 92% transparent, so it composited
   over the now-dark card as near-black navy while its ink stayed #0A192F. That is
   the 1.0:1 case: the shields, buildings and padlocks rendered as holes, not
   icons. The gradient is left byte-identical (CSS cannot interpolate two image
   lists) and only the ink moves, with a transitioning cyan wash added *beneath*
   the art so the plate still reads as a chip instead of a cut-out. */
[data-theme="dark"] .compliance-item-icon {
    background-color: rgba(79, 216, 255, .14) !important;
    color: var(--zh-dark-cyan) !important;
}

/* Hover swaps that plate for a solid #00D4FF→#0A192F gradient and asks for white
   ink. It is authored without `!important`, so the dark resting rule above would
   otherwise out-specify it and leave the cyan glyph on the navy end of the
   gradient. */
[data-theme="dark"] .compliance-item:hover .compliance-item-icon {
    color: #ffffff !important;
}

/* The regional flag plate is an opaque #f1f5f9 — a white hole punched in the
   dark card, and the only light plate left in this band. */
[data-theme="dark"] .regional-item-flag {
    background: var(--zh-dark-surface-3) !important;
}

/* --- index-partnership.html: elite research network band --------------------
   The band carried no dark rule at all: its authored background is a 93%-opaque
   white veil over the photo, and every child ink was a light hex (#0A192F,
   #475569, #1e293b), so flipping the toggle left a white stripe through the
   middle of the page with dark-on-dark once the page shell went dark.

   The veil is one layer of the `background-image` list, which CSS cannot
   interpolate, so it is left byte-identical and multiplied against a dark
   `background-color` instead — the same shape as `.sec-hero`. The veil is
   near-opaque, so the multiply lands on a deep navy band with the dot grid still
   faintly reading through it, and the only property that moves across the swap
   is the transitioning colour. */
[data-theme="dark"] .zh-elite-network {
    background-color: #0b1424 !important;
    background-blend-mode: multiply !important;
    border-color: var(--zh-dark-border) !important;
}

/* The cyan badge: #0284b8 is a 3.4:1 ink for the light plate and 2.3:1 on navy,
   so both the chip and its label move to the dark cyan token (as `.zh-tier-type`
   already does). */
[data-theme="dark"] .zh-elite-badge {
    background: rgba(79, 216, 255, .14) !important;
    border-color: rgba(79, 216, 255, .38) !important;
    color: var(--zh-dark-cyan) !important;
}

[data-theme="dark"] .zh-elite-title {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-elite-title span {
    color: var(--zh-dark-brand) !important;
}

/* #475569 on the dark band is 2.3:1; the muted token is 8:1. */
[data-theme="dark"] .zh-elite-text {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-elite-text strong {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-elite-points li {
    color: var(--zh-dark-text) !important;
}

/* The primary pill is a navy gradient on a navy band, so it needs a dark drop
   shadow to read as a raised surface instead of a hole. */
[data-theme="dark"] .zh-elite-btn-primary {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55) !important;
}

[data-theme="dark"] .zh-elite-btn-primary:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .65) !important;
}

[data-theme="dark"] .zh-elite-btn-ghost {
    background: transparent !important;
    border-color: var(--zh-dark-border) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-elite-btn-ghost:hover {
    background: var(--zh-dark-surface-3) !important;
    border-color: var(--zh-dark-cyan) !important;
    color: var(--zh-dark-text-strong) !important;
}

/* `.zh-perk` itself is already covered by the shared surfaces block, and its
   `p` by the muted rule there — but the heading is an `h6` inside
   `.zh-perk-body`, so the `.zh-perk h3, .zh-perk h4` rule never reached it. */
[data-theme="dark"] .zh-perk-body h6 {
    color: var(--zh-dark-text-strong) !important;
}

/* Hover restores a shadow (the surfaces block flattens the resting one) and
   re-tints the frame, and the `01`–`04` tab on the card corner follows it. */
[data-theme="dark"] .zh-perk:hover {
    border-color: var(--zh-dark-cyan) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55) !important;
}

[data-theme="dark"] .zh-perk:hover .zh-perk-num {
    border-color: var(--zh-dark-cyan) !important;
    color: var(--zh-dark-cyan) !important;
}

/* The orbit ring is 16% brand blue — invisible once the band is navy. */
[data-theme="dark"] .zh-perks::before {
    border-color: rgba(91, 155, 255, .3) !important;
}

/* --- index-single-blog.html: related-posts rail ---------------------------
   The rail is generated at runtime, so it was built from inline styles. Two
   consequences the generic inline matchers could not fix:

     • `onmouseover="this.style.color='#0A192F'"` wrote the LIGHT ink back as
       a style property the moment a reader hovered a title, overriding the
       themed colour — dark-on-dark links in dark mode. The hover state is a
       CSS `:hover` now, so the cascade stays in one place.
     • #f1f5f9 dividers and thumbnail plates, #94a3b8 dates and #64748b empty
       text had no matcher at all and kept the light values.

   The rail body sits on `.sidebar-card`, which the generic surfaces block
   already turns to --zh-dark-surface. */
[data-theme="dark"] .rp-item {
    border-bottom-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .rp-thumb {
    background: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .rp-title {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .rp-title:hover,
[data-theme="dark"] .rp-title:focus-visible {
    color: var(--zh-dark-cyan) !important;
}

[data-theme="dark"] .rp-meta {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .rp-empty {
    color: var(--zh-dark-muted) !important;
}

/* The skeleton shimmer runs on near-white stops, so it flashes white blocks on
   the dark rail between the first paint and the response landing. */
[data-theme="dark"] .art-skel-hero,
[data-theme="dark"] .art-skel-line,
[data-theme="dark"] .art-skel-block,
[data-theme="dark"] .rp-skel-thumb,
[data-theme="dark"] .rp-skel-lines i {
    background: linear-gradient(90deg, var(--zh-dark-surface-2) 25%, var(--zh-dark-surface-3) 37%, var(--zh-dark-surface-2) 63%) !important;
}

[data-theme="dark"] .rp-skel-row {
    border-bottom-color: var(--zh-dark-border) !important;
}

/* Share chips on the article.

   The light palette parks them all on #f0f7ff, a bright plate in dark mode, and
   each one sets its own brand ink inline. The old fix was a
   `[style*="background:#f0f7ff"]` matcher plus `.article-content a` re-pointing
   the ink to --zh-dark-brand — which flattened all seven chips to the same blue
   and lost the brand identity the chips exist to convey.

   They are class-styled now, and each carries a --chip-ink chosen to clear
   4.5:1 on the dark surface, so the hue survives. The hover state is CSS too:
   it was an onmouseover handler writing white on the brand fill, which is
   1.98:1 on WhatsApp, and no stylesheet rule could have overridden it. */
[data-theme="dark"] .article-content .share-row {
    border-top-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .article-content .share-label {
    color: var(--zh-dark-text-strong) !important;
}

/* Scoped under .article-content deliberately: the generic
   `[data-theme="dark"] .article-content a` rule above sets --zh-dark-brand on
   every article link and is (0,2,1) — more specific than a bare `.share-chip`
   at (0,2,0). Without this extra class every chip collapsed back to the same
   #5b9bff and lost the brand identity the chips exist to show. */
[data-theme="dark"] .article-content .share-chip {
    background: var(--zh-dark-surface-2) !important;
    color: var(--chip-ink-dark) !important;
    border-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .article-content .share-chip:hover,
[data-theme="dark"] .article-content .share-chip:focus-visible {
    background: var(--chip-tint) !important;
    color: var(--chip-ink-dark) !important;
    border-color: var(--chip-brand) !important;
}

/* The copy button is a neutral action rather than a brand; the dark rule for
   `.article-content button` already lands it on --zh-dark-muted, so it needs
   no colour of its own here. Only its hover needs to lift back up. */
[data-theme="dark"] .article-content .share-chip--copy:hover,
[data-theme="dark"] .article-content .share-chip--copy:focus-visible {
    color: var(--chip-ink-dark) !important;
}

/* The article tag badges ride the same #f0f7ff plate as the share chips above,
   but they are class-styled rather than inline, so the `[style*=]` matcher never
   reached them. Half-themed is what made them look broken: `.article-content a`
   re-pointed their ink to --zh-dark-brand while the plate stayed near-white, so
   the tags rendered as #5b9bff on #f0f7ff — 2.6:1, inside an already-dark
   article. Both halves move together here.

   A tag badge is a link on index-single-blog.html and a span on
   index-single-blog2.html, so this covers both blog templates. */
[data-theme="dark"] .tag-badge,
[data-theme="dark"] a.tag-badge,
[data-theme="dark"] span.tag-badge {
    background: var(--zh-dark-surface-2) !important;
    border: 1px solid var(--zh-dark-border) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] a.tag-badge:hover,
[data-theme="dark"] a.tag-badge:focus-visible {
    background: var(--zh-dark-surface-3) !important;
    border-color: var(--zh-dark-brand) !important;
    color: var(--zh-dark-cyan) !important;
}

/* services.html: icon boxes use color (currentColor) now; dark palette needs its own surface. */
[data-theme="dark"] .service-icon-box {
    background: var(--zh-dark-surface-3) !important;
    color: var(--zh-dark-brand) !important;
    border: 1px solid var(--zh-dark-border) !important;
}

/* --- contact-us.html: security notice --- */
[data-theme="dark"] .zh-security-notice {
    background: linear-gradient(135deg, rgba(79, 216, 255, .10), rgba(91, 155, 255, .08)) !important;
    border-color: rgba(79, 216, 255, .38) !important;
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-security-notice-icon {
    background: linear-gradient(135deg, var(--zh-dark-cyan), var(--zh-dark-brand)) !important;
    color: #06101f !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45) !important;
}

[data-theme="dark"] .zh-security-notice-content h5 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-security-notice-content p {
    color: var(--zh-dark-text) !important;
}

[data-theme="dark"] .zh-sec-badge {
    background: rgba(91, 155, 255, .14) !important;
    border-color: rgba(91, 155, 255, .4) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .zh-sec-badge i {
    color: var(--zh-dark-brand) !important;
}

/* --- contact-us.html: CTO block on split hero --- */
[data-theme="dark"] .zh-split-hero::after {
    background: linear-gradient(90deg, rgba(11, 20, 36, 0) 0%, rgba(11, 20, 36, .6) 55%, var(--zh-dark-surface) 100%) !important;
}

[data-theme="dark"] .zh-cto-badge {
    background: linear-gradient(135deg, var(--zh-dark-cyan), var(--zh-dark-brand)) !important;
    color: #06101f !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55) !important;
}

[data-theme="dark"] .zh-cto-quote {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-cto-byline {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-cto-byline strong {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-cto-byline .zh-cto-role {
    color: var(--zh-dark-cyan) !important;
}

[data-theme="dark"] .zh-cto-trust span {
    color: var(--zh-dark-text) !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .22) !important;
}

[data-theme="dark"] .zh-cto-trust i {
    color: var(--zh-dark-cyan) !important;
}

/* --- CVE page: status chips (.zdc-status) --- */
[data-theme="dark"] .zdc-status.active-attack,
[data-theme="dark"] .zdc-status.kev,
[data-theme="dark"] .zdc-status.ransomware {
    background: rgba(220, 38, 38, .16) !important;
    border: 1px solid rgba(248, 113, 113, .5) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .zdc-status.active-attack .pulse,
[data-theme="dark"] .zdc-status.kev .pulse,
[data-theme="dark"] .zdc-status.ransomware .pulse {
    background: #f87171 !important;
    animation: pulseDark 1.5s infinite !important;
}

[data-theme="dark"] .zdc-status.weaponized {
    background: rgba(234, 88, 12, .16) !important;
    border: 1px solid rgba(251, 146, 60, .5) !important;
    color: #fdba74 !important;
}

[data-theme="dark"] .zdc-status.weaponized .pulse {
    background: #fb923c !important;
    animation: pulseDarkOrange 1.5s infinite !important;
}

[data-theme="dark"] .zdc-status.poc {
    background: rgba(202, 138, 4, .16) !important;
    border: 1px solid rgba(250, 204, 21, .5) !important;
    color: #fde047 !important;
}

[data-theme="dark"] .zdc-status.poc .pulse {
    background: #facc15 !important;
    animation: pulseDarkAmber 1.5s infinite !important;
}

[data-theme="dark"] .zdc-status.zero-day {
    background: rgba(0, 103, 218, .16) !important;
    border: 1px solid rgba(91, 155, 255, .5) !important;
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .zdc-status.zero-day .pulse {
    background: var(--zh-dark-brand) !important;
    animation: pulseDarkBlue 1.5s infinite !important;
}

@keyframes pulseDark {
    0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .45); }
    70% { box-shadow: 0 0 0 5px rgba(248, 113, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

@keyframes pulseDarkOrange {
    0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, .45); }
    70% { box-shadow: 0 0 0 5px rgba(251, 146, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); }
}

@keyframes pulseDarkAmber {
    0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .45); }
    70% { box-shadow: 0 0 0 5px rgba(250, 204, 21, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

@keyframes pulseDarkBlue {
    0% { box-shadow: 0 0 0 0 rgba(91, 155, 255, .45); }
    70% { box-shadow: 0 0 0 5px rgba(91, 155, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(91, 155, 255, 0); }
}

/* --- index-cve.html: data sources icons --- */
[data-theme="dark"] .sidebar-box h4,
[data-theme="dark"] .sidebar-box h6 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .sidebar-box p {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#eff6ff"] {
    background: rgba(91, 155, 255, .14) !important;
    border: 1px solid rgba(91, 155, 255, .4) !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#eff6ff"] i {
    color: var(--zh-dark-brand) !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#fef2f2"] {
    background: rgba(220, 38, 38, .16) !important;
    border: 1px solid rgba(248, 113, 113, .5) !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#fef2f2"] i {
    color: #fca5a5 !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#f0fdfa"] {
    background: rgba(13, 148, 136, .16) !important;
    border: 1px solid rgba(45, 212, 191, .5) !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#f0fdfa"] i {
    color: #5eead4 !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#fefce8"] {
    background: rgba(202, 138, 4, .16) !important;
    border: 1px solid rgba(250, 204, 21, .5) !important;
}

[data-theme="dark"] .sidebar-box > div > div > div[style*="background:#fefce8"] i {
    color: #fde047 !important;
}

/* --------------------------------------------------------------------------
   Round 5: portal landing sweeps (academy / client / researcher).
   Inline style="" colours win over every non-!important rule, so each of
   these targets the specific inline-light-background elements the Round-4
   background sweep could not reach: section padding fills and a handful of
   notice/info plates. Text inside them is re-lit via neighbouring selectors.
   -------------------------------------------------------------------------- */

/* --- academy: #courses + CTA fill (inline #f8f9fa / #edf6fd) --- */
[data-theme="dark"] section.section-padding-70[style*="#edf6fd"],
[data-theme="dark"] section.section-padding-70[style*="#f8f9fa"],
[data-theme="dark"] section.section-padding-70-50[style*="#f8f9fa"] {
    background: var(--zh-dark-bg) !important;
}

[data-theme="dark"] section.section-padding-70[style*="#edf6fd"] h2,
[data-theme="dark"] section.section-padding-70-50[style*="#f8f9fa"] h2 {
    color: var(--zh-dark-text-strong) !important;
}

/* --- client: dashed info plates (inline #f0f4ff) --- */
[data-theme="dark"] div[style*="background:#f0f4ff"] {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-brand) !important;
}
[data-theme="dark"] div[style*="background:#f0f4ff"] p,
[data-theme="dark"] div[style*="background:#f0f4ff"] strong {
    color: var(--zh-dark-muted) !important;
}

/* --- researcher: "New to ZeroHack" plate (inline #eff6ff) --- */
[data-theme="dark"] div[style*="background:#eff6ff"] {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-brand) !important;
}
[data-theme="dark"] div[style*="background:#eff6ff"] h4 {
    color: var(--zh-dark-text-strong) !important;
}
[data-theme="dark"] div[style*="background:#eff6ff"] p {
    color: var(--zh-dark-muted) !important;
}

/* --- researcher: apply-via-portal CTA block + security/encryption notices --- */
[data-theme="dark"] .zh-apply-block h3,
[data-theme="dark"] .zh-apply-block h5 {
    color: var(--zh-dark-text-strong) !important;
}
[data-theme="dark"] .zh-apply-block p {
    color: var(--zh-dark-muted) !important;
}
[data-theme="dark"] .encryption-notice,
[data-theme="dark"] .security-notice {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
}
[data-theme="dark"] .encryption-notice {
    border-left-color: #00d4ff !important;
}
[data-theme="dark"] .security-notice-content h5 {
    color: var(--zh-dark-text-strong) !important;
}
[data-theme="dark"] .security-notice-content p {
    color: var(--zh-dark-muted) !important;
}
[data-theme="dark"] .security-badge {
    background: rgba(34, 197, 94, .14) !important;
    border-color: rgba(34, 197, 94, .25) !important;
    color: #86efac !important;
}

/* Round 8 — client/landing.html + researcher/landing.html fixes.
   client: the tab-row border is set to navy #0A192F by a late per-page rule, so
   it vanishes in dark; and the dashed demo-plate inner <span> (inline #333) was
   the one piece the #f0f4ff block did not reach. */
[data-theme="dark"] .client-portal-tabs .nav-tabs {
    border-bottom-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] div[style*="background:#f0f4ff"] span {
    color: var(--zh-dark-muted) !important;
}

/* researcher/landing.html — membership benefits. The section has an inline
   #f8f9fa fill and the cards hard-code white + a light border + #0A192F ink. */
[data-theme="dark"] .membership-benefits {
    background: var(--zh-dark-surface) !important;
}

[data-theme="dark"] .membership-benefits p[style*="color"],
[data-theme="dark"] .membership-benefits p {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .benefit-card {
    background: var(--zh-dark-surface-2) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .benefit-card h5 {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .benefit-card p {
    color: var(--zh-dark-muted) !important;
}

/* Round 9 — researcher/landing.html: Free vs Premium comparison grid.
   The .zh-cmp table hard-codes light fills/borders/ink; theme it. */
[data-theme="dark"] .zh-cmp {
    background: var(--zh-dark-surface) !important;
    border-color: var(--zh-dark-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .zh-cmp-cell {
    background: var(--zh-dark-surface) !important;
    color: var(--zh-dark-muted) !important;
    border-bottom-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .zh-cmp-cell:nth-child(6n+4),
[data-theme="dark"] .zh-cmp-cell:nth-child(6n+5),
[data-theme="dark"] .zh-cmp-cell:nth-child(6n+6) {
    background: var(--zh-dark-surface-2) !important;
}

[data-theme="dark"] .zh-cmp-cell.zh-cmp-prem {
    background: rgba(0, 86, 179, .16) !important;
}

[data-theme="dark"] .zh-cmp .zh-cmp-head {
    background: #0e1f3d !important;
    border-bottom-color: var(--zh-dark-border) !important;
}

[data-theme="dark"] .zh-cmp .zh-cmp-head.zh-cmp-prem {
    background: #0d3b8c !important;
}

[data-theme="dark"] .zh-cmp-feat {
    color: var(--zh-dark-text-strong) !important;
}

[data-theme="dark"] .zh-cmp-feat i {
    color: #7dd3fc !important;
}

[data-theme="dark"] .zh-cmp-val small {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-cmp-note {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-muted) !important;
    border-left-color: #00d4ff !important;
}

[data-theme="dark"] .zh-cmp-note i {
    color: #7dd3fc !important;
}

[data-theme="dark"] .zh-cmp-meta {
    color: var(--zh-dark-muted) !important;
}

[data-theme="dark"] .zh-cmp-foot .btn[style*="background:#f1f5f9"] {
    background: var(--zh-dark-surface-2) !important;
    color: var(--zh-dark-text-strong) !important;
    border-color: var(--zh-dark-border) !important;
}