/* SingRank BLACK & WHITE (2026-10-18, owner: "black background on every page, white text, white
   accent; the motion films stay white"). Loads LAST on every page (app/layout.js + the blog and
   page templates in functions/), so it wins over theme.css and the older ink-* layers with the
   same `html:is(.sr-night,#bw#bw#bw)` + !important weight. Rollback: remove the <link> to this file.
   The story films and card loops are white pictures on purpose: they sit on the black page as
   white panels. */

/* ---- tokens: every layer's colour variables point at black / white ---- */
html:is(.sr-night,#bw#bw#bw) {
  --sr-paper: #000; --sr-soft: #0f0f0f; --sr-surface: #0b0b0b; --sr-ink: #fff; --sr-body: #e9e9e9;
  --sr-muted: #a8a8a8; --sr-rule: #262626; --sr-accent: #fff; --sr-accent-text: #fff; --sr-sand: #1a1a1a; --sr-faint: #8a8a8a;
  --bg: #000; --surface: #0b0b0b; --surface-2: #141414; --fg: #fff; --fg-inverse: #000; --muted: #a8a8a8; --muted-2: #8a8a8a;
  --border: #262626; --border-strong: #363636; --border-dark: #262626; --dark: #000; --dark-soft: #0b0b0b;
  --ed-ink: #fff; --ed-rule: #262626; --ed-card: #0b0b0b; --ed-red-inv: #fff; --ed-rule-inv: #333;
  --shadow-card: 0 0 0 1px #262626; --shadow-card-hover: 0 0 0 1px #4a4a4a, 0 24px 60px -30px rgba(255, 255, 255, .12);
  color-scheme: dark;
  background: #000 !important;
}
html:is(.sr-night,#bw#bw#bw), html:is(.sr-night,#bw#bw#bw) * {
  --accent: #fff !important; --accent-dark: #d9d9d9 !important; --accent-soft: #1a1a1a !important; --ink-red: #fff !important;
}
html:is(.sr-night,#bw#bw#bw) body { background: #000 !important; color: #e9e9e9 !important; }
html:is(.sr-night,#bw#bw#bw) main, html:is(.sr-night,#bw#bw#bw) main > *, html:is(.sr-night,#bw#bw#bw) section, html:is(.sr-night,#bw#bw#bw) .sv, html:is(.sr-night,#bw#bw#bw) .sv > section,
html:is(.sr-night,#bw#bw#bw) .sv-paper, html:is(.sr-night,#bw#bw#bw) .sv-trust, html:is(.sr-night,#bw#bw#bw) .ed-sec, html:is(.sr-night,#bw#bw#bw) .ed-sec-alt, html:is(.sr-night,#bw#bw#bw) .container {
  background-color: transparent !important;
}

/* ---- type: white headings, light grey reading text ---- */
html:is(.sr-night,#bw#bw#bw) :is(h1, h2, h3, h4, h5, h6, strong, b, dt, summary, th, label, figcaption strong) { color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(p, li, dd, td, blockquote, figcaption, small, span.muted, .muted) { color: inherit; }
html:is(.sr-night,#bw#bw#bw) main :is(p, li, dd, td, blockquote) { color: #e3e3e3 !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sv-kicker, .eyebrow, [class$="-kicker"], [class$="-eyebrow"], [class$="-label"]) { color: #bdbdbd !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sv-lead, .li-lead, .hh-lead, .hh-band-lead, .lead, .hh-price, [class$="-lead"]) { color: #b9b9b9 !important; }
html:is(.sr-night,#bw#bw#bw) a { color: #fff; }
html:is(.sr-night,#bw#bw#bw) main a:not([class]) { color: #fff !important; text-decoration-color: rgba(255, 255, 255, .45) !important; }
html:is(.sr-night,#bw#bw#bw) ::selection { background: #fff; color: #000; }

/* ---- surfaces: cards and panels become near-black with a thin grey line ---- */
html:is(.sr-night,#bw#bw#bw) :is(.card, .hh-grid li, .hh-svc a, .hh-svc-card, .sv-evidence-card, .sv-value, .sv-step, .svp-plan, .srp-plan,
  .ed-get-cell, .ed-step, .ed-price, .ed-card, .bcard, .news-latest-card, .proof-card, .sgd-col, .sv-client, .sv-faq details,
  .pcta, .news-cta, .article-promo-banner, .toc-rail, .article-service-rail, .ss3-card, .lead-form, .sv-ask, .cro-disclosure) {
  background: #0b0b0b !important; border-color: #262626 !important; color: #e9e9e9 !important; box-shadow: none !important;
}
html:is(.sr-night,#bw#bw#bw) :is(.hh-svc a:hover, .card:hover, .bcard:hover) { border-color: #5a5a5a !important; box-shadow: 0 24px 60px -34px rgba(255, 255, 255, .18) !important; }
html:is(.sr-night,#bw#bw#bw) hr, html:is(.sr-night,#bw#bw#bw) :is(.hh-band, .sv-faq details, .sf-bot) { border-color: #262626 !important; }

/* ---- buttons: solid = white on black text; outline = white line ---- */
html:is(.sr-night,#bw#bw#bw) :is(.sv-button, .svh-primary, .btn-primary, .srp-btn:not(.is-outline), .ed-btn-red, .ed-btn, .sh-cta, .sf-cta,
  .news-cta-link, .pcta-row a:first-child, .ss3-cta, .hh-close .sv-button) {
  background: #fff !important; color: #000 !important; border-color: #fff !important;
}
html:is(.sr-night,#bw#bw#bw) :is(.sv-button, .svh-primary, .btn-primary, .srp-btn:not(.is-outline), .ed-btn-red, .ed-btn, .sh-cta, .sf-cta,
  .news-cta-link, .ss3-cta):hover { background: #d9d9d9 !important; border-color: #d9d9d9 !important; color: #000 !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sv-button, .ed-btn, .sh-cta) * { color: inherit !important; }
html:is(.sr-night,#bw#bw#bw) :is(.svh-secondary, .sv-button-outline, .srp-btn.is-outline, .ed-btn-ghost, .btn-secondary) {
  background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .55) !important;
}
html:is(.sr-night,#bw#bw#bw) :is(.svh-secondary, .sv-button-outline, .srp-btn.is-outline, .ed-btn-ghost, .btn-secondary):hover { border-color: #fff !important; background: rgba(255, 255, 255, .08) !important; }

/* ---- header + footer ---- */
html:is(.sr-night,#bw#bw#bw) :is(.sh, .sh-bar, .sh-in, .sh-wrap, header.sh, .sh-panel, .sh-drop, .sh-menu, .mn, .mn-panel) { background: rgba(0, 0, 0, .86) !important; color: #fff !important; border-color: #262626 !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sh a, .sh button, .mn a, .mn button) { color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) .sh-cta, html:is(.sr-night,#bw#bw#bw) .sh .sh-cta { color: #000 !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sf, .sf-in) { background: #000 !important; color: #a8a8a8 !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sf a, .sf-a, .sf-h) { color: #e9e9e9 !important; }
html:is(.sr-night,#bw#bw#bw) .sr-mark { background-color: #fff !important; }

/* ---- accents that were red are white now (homepage + films chrome) ---- */
html:is(.sr-night,#bw#bw#bw) .hh-problems li { border-top-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(.hh-n, .hh-svc-more, .ed-step-no) { color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sd-wait.hh-steps, .sd-wait.ed-steps)::after { background: #fff !important; }
html:is(.sr-night,#bw#bw#bw) .hh-film { box-shadow: 0 0 0 1px #262626, 0 40px 90px -50px rgba(255, 255, 255, .18) !important; }
html:is(.sr-night,#bw#bw#bw) :is(.hh-card-film, .hh-svc-film) { border-color: #262626 !important; }
html:is(.sr-night,#bw#bw#bw) .hh-sound.is-on, html:is(.sr-night,#bw#bw#bw) .hh-sound:hover { background: #fff !important; color: #000 !important; }
html:is(.sr-night,#bw#bw#bw) .ed-price-check { color: #fff !important; }

/* ---- forms ---- */
html:is(.sr-night,#bw#bw#bw) :is(input, textarea, select) { background: #0b0b0b !important; color: #fff !important; border-color: #363636 !important; }
html:is(.sr-night,#bw#bw#bw) :is(input, textarea)::placeholder { color: #7a7a7a !important; }

/* ---- images that are black line art on white (etchings, logos) read as white on black ---- */
html:is(.sr-night,#bw#bw#bw) :is(.sv-logo img, .sv-etching img) { filter: invert(1) grayscale(1) !important; mix-blend-mode: screen; }

/* ---- components found by the page scan (2026-10-18): their own light panels / dark text ---- */
html:is(.sr-night,#bw#bw#bw) :is(.sh-row, .sv-paper, .im-card, .svp-plan, .sv-advantage, .sr-promo, .srp-plan, .srp-service, .srp-info, .srp-close,
  .srp-answer, .sv-form, .news-latest-wide, .news-latest-card, .bcard, .rs-live-frame, .rs-client, .proof-slide, .uxm-toggle,
  .sv-wrap, .news-card, .news-story, .ss3-panel, .sv-ask-card, .sv-evidence-more, .sgd, .sgd-card, .faq-item) {
  background: #0b0b0b !important; border-color: #262626 !important; color: #e9e9e9 !important; box-shadow: none !important;
}
html:is(.sr-night,#bw#bw#bw) :is(.sv-wrap, .sv-paper, .sgd) { background: transparent !important; }
html:is(.sr-night,#bw#bw#bw) .sh-row { background: rgba(10, 10, 10, .9) !important; backdrop-filter: blur(10px); }
html:is(.sr-night,#bw#bw#bw) :is(.srp-plan.is-featured, .svp-plan:nth-child(2)) { border-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(.srp-badge, .bcard-tag, .proof-badge) { background: #fff !important; color: #000 !important; border-color: #fff !important; }
/* text that some layers pinned dark */
html:is(.sr-night,#bw#bw#bw) :is(.sh-brand, .sh-link, .sv-link, .sv-small, .sv-body, .sv-h3, .svp-term, figcaption, .ss3-p, .ss3-fine,
  .srp-plan-label, .srp-price, .srp-plan-copy, .srp-plan-note, .srp-answer, .srp-service-price, .srp-service-copy,
  .news-story-meta, .news-card-arrow, .rs-industry, .rs-n, .rs-t, .rs-h3, .rs-p, .rs-caveat, .proof-query, .proof-result,
  .sv-client-name, .sv-client figcaption, label, em, s, small) { color: #e3e3e3 !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sv-small, .ss3-fine, .rs-caveat, .srp-plan-note, .news-story-meta, figcaption, small) { color: #a8a8a8 !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sv-h3, .srp-price, .rs-h3, .rs-n, .sh-brand) { color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) main span:not([class]) { color: inherit !important; }
html:is(.sr-night,#bw#bw#bw) .uxm-toggle { color: #fff !important; border: 1px solid #333 !important; }

/* ---- second scan (2026-10-18): method, technology, blog, results, case studies, article tables ---- */
html:is(.sr-night,#bw#bw#bw) :is(.svm-deliverables, .svm-measures, .svm-step, .ts-hero-stack, .ts-cap-grid, .ts-cap, .ts-mark,
  .live-results-entry, .action-band, .news-latest-list li, .news-list li, li.fx-rise, .sst, .ts-stack) {
  background: #0b0b0b !important; border-color: #262626 !important; color: #e3e3e3 !important; box-shadow: none !important;
}
html:is(.sr-night,#bw#bw#bw) main article:not([class]) { background: transparent !important; color: #e3e3e3 !important; }
html:is(.sr-night,#bw#bw#bw) .ts-mark-logo { background: #fff !important; color: #000 !important; }
html:is(.sr-night,#bw#bw#bw) .sh-link:is([aria-current], .is-active, .active, :hover) { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sst-q, .sst-a, .ts-stack-label, .ts-cap-output, .rs-page, .rs-delta, time) { color: #d6d6d6 !important; }
html:is(.sr-night,#bw#bw#bw) main a:is(.news-latest-card, .bcard, :not([class])) *:not(.bcard-tag):not(.post-tag) { color: inherit !important; }
html:is(.sr-night,#bw#bw#bw) .post-tag { background: #fff !important; color: #000 !important; }
/* articles: tables and code */
html:is(.sr-night,#bw#bw#bw) :is(table, thead, tbody, tr, th, td) { background: transparent !important; color: #e3e3e3 !important; border-color: #303030 !important; }
html:is(.sr-night,#bw#bw#bw) thead th, html:is(.sr-night,#bw#bw#bw) tr:first-child th { background: #141414 !important; color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(pre, code, kbd) { background: #111 !important; color: #f0f0f0 !important; border-color: #2a2a2a !important; }
html:is(.sr-night,#bw#bw#bw) .news-topics a { background: transparent !important; color: #fff !important; border: 1px solid #3a3a3a !important; }
html:is(.sr-night,#bw#bw#bw) .news-topics a:is(:hover, [aria-current], .is-active) { background: #fff !important; color: #000 !important; border-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) .action-band, html:is(.sr-night,#bw#bw#bw) .action-band * { color: #fff !important; }

/* ---- last red details found by the red scan (2026-10-18) ---- */
html:is(.sr-night,#bw#bw#bw) .im-heading::after, html:is(.sr-night,#bw#bw#bw) .ed-ch-no::after { background: #fff !important; border-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(.sv-kicker, .eyebrow)::before { background: #fff !important; color: #fff !important; border-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) .ed-ch-no { color: #fff !important; outline-color: #fff !important; border-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) summary::after, html:is(.sr-night,#bw#bw#bw) summary::before { color: #fff !important; border-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(.edi-red, [stroke="#d93248"], [stroke="#d81f26"]) { stroke: #fff !important; }
html:is(.sr-night,#bw#bw#bw) :is(.edi-dot, [fill="#d93248"], [fill="#d81f26"]) { fill: #fff !important; }
html:is(.sr-night,#bw#bw#bw) main li::before { color: #fff !important; border-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) .ts-proof { border-top-color: #fff !important; }
html:is(.sr-night,#bw#bw#bw) .apb-card::after { background: #fff !important; color: #000 !important; border-color: #fff !important; }

/* ---- client logo wall (2026-10-18 owner: "logos small, white, with an effect, motion graphic") ----
   smaller tiles, 8 per row, every logo white; a slow wave of light runs across the wall (nth-child
   delays) and each logo lifts on hover. Reduced motion: still, fully visible. */
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; border-color: #1f1f1f !important; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client { border-color: #1f1f1f !important; background: transparent !important; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logo { height: 104px !important; padding: 18px 14px !important; background: transparent !important; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos img {
  height: calc(var(--lh, 64px) * .5) !important; filter: grayscale(1) invert(1) brightness(1.6) contrast(1.2) !important;
  mix-blend-mode: screen !important; opacity: .55 !important; animation: bw-logo-wave 7s ease-in-out infinite;
}
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:hover img { opacity: 1 !important; transform: translateY(-3px) scale(1.06); animation-play-state: paused; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-client-name { font-size: 17px !important; color: #fff !important; opacity: .7; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-client figcaption { font-size: 11px !important; color: #6f6f6f !important; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-client-next .sv-client-name { color: #fff !important; opacity: 1; }
@keyframes bw-logo-wave { 0%, 70%, 100% { opacity: .5; } 82% { opacity: 1; } }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:nth-child(8n+2) img { animation-delay: .35s; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:nth-child(8n+3) img { animation-delay: .7s; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:nth-child(8n+4) img { animation-delay: 1.05s; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:nth-child(8n+5) img { animation-delay: 1.4s; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:nth-child(8n+6) img { animation-delay: 1.75s; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:nth-child(8n+7) img { animation-delay: 2.1s; }
html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos .sv-client:nth-child(8n) img { animation-delay: 2.45s; }
@media (max-width: 1100px) { html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logo { height: 84px !important; } }
@media (prefers-reduced-motion: reduce) { html:is(.sr-night,#bw#bw#bw) .sv-home .sv-logos img { animation: none; opacity: .8 !important; } }

/* homepage proof (HomeProof.js): white screenshots as panels on black, captions in grey */
html:is(.sr-night,#bw#bw#bw) .hh-proof-h3 { margin: 44px 0 6px !important; font-size: 20px !important; font-family: var(--sr-sans) !important; font-weight: 700 !important; }
html:is(.sr-night,#bw#bw#bw) .hh-proof-note { margin: 0 0 18px; color: #a8a8a8 !important; font-size: 15px; }
html:is(.sr-night,#bw#bw#bw) .hh-proof-list { display: grid; gap: 22px; }
html:is(.sr-night,#bw#bw#bw) .hh-proof-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 14px; }
html:is(.sr-night,#bw#bw#bw) .hh-proof-fig { margin: 0; }
html:is(.sr-night,#bw#bw#bw) .hh-proof-fig img { display: block; width: 100%; height: auto; border-radius: 12px; }
html:is(.sr-night,#bw#bw#bw) .hh-proof-fig figcaption { margin-top: 10px; font-size: 15px; color: #c9c9c9 !important; }
html:is(.sr-night,#bw#bw#bw) .hh-proof-dash { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center; margin-top: 48px; }
@media (max-width: 899px) {
  html:is(.sr-night,#bw#bw#bw) .hh-proof-two, html:is(.sr-night,#bw#bw#bw) .hh-proof-dash { grid-template-columns: 1fr; }
}