/*! OKAYPLAY public redesign v2, 2026-05-13. Inspired by clean launch-page systems, not a copy. */


:root {
    --okp-bg: #ffffff;
    --okp-bg-hero: #ffffff;
    --okp-bg-section-alt: #f5f7fb;
    --okp-bg-section-dark: #ffffff;
    --okp-surface: #f6f8fc;
    --okp-surface-2: #eef2f8;
    --okp-panel: #f7f9fd;
    --okp-text-primary: #111318;
    --okp-text-secondary: #2f3540;
    --okp-text-muted: #555f6d;
    --okp-text-faint: #9aa2af;
    --okp-border-color: #e6ebf2;
    --okp-line: #e6ebf2;
    --okp-blue: #1a73e8;
    --okp-red: #ea4335;
    --okp-yellow: #fbbc04;
    --okp-green: #34a853;
    --okp-font-display: "Google Sans", "Product Sans", "Roboto", Arial, sans-serif;
    --okp-font-body: "Google Sans", "Product Sans", "Roboto", Arial, sans-serif;
    --okp-radius-sm: 6px;
    --okp-radius-md: 8px;
    --okp-radius-lg: 8px;
    --okp-radius-pill: 999px;
    --okp-shadow-sm: none;
    --okp-shadow-md: 0 18px 50px rgba(25, 32, 46, 0.08);
    --okp-shadow-lg: 0 30px 90px rgba(25, 32, 46, 0.10);
    --okp-nav-height: 64px;
    --okp-nav-bg: rgba(255, 255, 255, 0.82);
    --okp-nav-blur: blur(20px);
    --okp-btn-bg: #111318;
    --okp-btn-color: #ffffff;
    --okp-btn-secondary-bg: #ffffff;
    --okp-btn-secondary-color: #111318;
    --okp-btn-secondary-border: #dfe5ee;
    --bg: var(--okp-bg);
    --fg: var(--okp-text-primary);
    --t1: var(--okp-text-primary);
    --t2: var(--okp-text-secondary);
    --t3: var(--okp-text-muted);
    --t4: var(--okp-text-faint);
    --line: var(--okp-line);
    --surface: var(--okp-surface);
    --border: var(--okp-border-color);
}

html.dark-mode,
body.dark-mode,
[data-theme="dark"] {
    --okp-bg: #ffffff;
    --okp-bg-hero: #ffffff;
    --okp-bg-section-alt: #f5f7fb;
    --okp-bg-section-dark: #ffffff;
    --okp-surface: #f6f8fc;
    --okp-surface-2: #eef2f8;
    --okp-panel: #f7f9fd;
    --okp-text-primary: #111318;
    --okp-text-secondary: #3f4652;
    --okp-text-muted: #68707d;
    --okp-text-faint: #9aa2af;
    --okp-border-color: #e6ebf2;
    --okp-line: #e6ebf2;
    --okp-nav-bg: rgba(255, 255, 255, 0.82);
    --okp-btn-bg: #111318;
    --okp-btn-color: #ffffff;
    --okp-btn-secondary-bg: #ffffff;
    --okp-btn-secondary-color: #111318;
    --okp-btn-secondary-border: #dfe5ee;
}

html {
    background: var(--okp-bg) !important;
    scroll-padding-top: 86px;
}

body {
    position: relative;
    isolation: isolate;
    background: var(--okp-bg) !important;
    color: var(--okp-text-primary) !important;
    font-family: var(--okp-font-body) !important;
    font-weight: 400 !important;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    letter-spacing: 0 !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0), rgba(246,248,252,0.72) 62%, rgba(255,255,255,0));
}

html.dark-mode body::before,
body.dark-mode::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0), rgba(246,248,252,0.72) 62%, rgba(255,255,255,0));
}

* {
    letter-spacing: 0 !important;
}

body,
body * {
    text-shadow: none !important;
}

::selection {
    background: rgba(26, 115, 232, 0.16) !important;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.section-headline,
.blog-card-title,
.card-name {
    color: var(--okp-text-primary) !important;
    font-family: var(--okp-font-display) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

p, li, td, th,
.lead,
.hero-sub,
.blog-hero-sub,
.blog-card-excerpt,
.section .sub,
.cta-section p,
.faq-a,
.faq-item p,
.adv-preview-intro,
.net-card p,
.hero .lead,
.wp-hero .lead,
.blog-index-hero p {
    color: var(--okp-text-muted) !important;
    font-weight: 400 !important;
}

a {
    text-underline-offset: 3px;
}

nav {
    height: var(--okp-nav-height) !important;
    padding: 14px 44px !important;
    background: var(--okp-nav-bg) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

#hero-particles,
.dot-bg::before,
.dot-bg::after {
    display: none !important;
}

#hero-particles,
.hero canvas {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.nav-logo {
    gap: 10px !important;
}

.nav-logo img {
    height: 20px !important;
}

.nav-logo span {
    font-size: 18px !important;
    color: var(--okp-text-primary) !important;
    font-weight: 500 !important;
}

.nav-links {
    gap: 24px !important;
}

.nav-links a:not(.nav-btn-outline) {
    color: var(--okp-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.nav-links a::after {
    display: none !important;
}

.nav-links a:hover {
    color: var(--okp-text-primary) !important;
}

.nav-btn-outline,
.nav-btn,
.btn-primary,
.btn-secondary,
.btn-link,
.cta-btn,
.wp-cta-btn,
.chip,
.tab-btn,
.timer-preset-btn,
.jog-step-btn,
.brainwave-btn,
.cookie-btn,
.cookie-btn-ghost,
.share-card a,
button {
    border-radius: var(--okp-radius-pill) !important;
}

.nav-btn-outline,
.nav-btn,
.btn-primary,
.cta-btn,
.wp-cta-btn,
.cookie-btn,
.share-card a {
    background: var(--okp-btn-bg) !important;
    color: var(--okp-btn-color) !important;
    border: 1px solid var(--okp-btn-bg) !important;
    box-shadow: none !important;
}

.btn-secondary,
.cookie-btn-ghost,
.mobile-menu-buttons .nav-btn-outline {
    background: var(--okp-btn-secondary-bg) !important;
    color: var(--okp-btn-secondary-color) !important;
    border: 1px solid var(--okp-btn-secondary-border) !important;
}

#cookieBanner .cookie-btn[style*="transparent"] {
    background: transparent !important;
    color: var(--okp-text-secondary) !important;
    border: 1px solid var(--okp-btn-secondary-border) !important;
}

.btn-primary,
.btn-secondary,
.cta-btn,
.wp-cta-btn,
.nav-btn,
.nav-btn-outline {
    min-height: 44px;
    padding: 12px 26px !important;
    align-items: center;
    justify-content: center;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.cta-btn:hover,
.wp-cta-btn:hover,
.nav-btn:hover,
.nav-btn-outline:hover {
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

.theme-btn,
.text-size-toggle {
    min-height: 40px !important;
    border: 1px solid var(--okp-border-color) !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: var(--okp-text-secondary) !important;
    box-shadow: none !important;
}

html.dark-mode .theme-btn,
html.dark-mode .text-size-toggle,
body.dark-mode .theme-btn,
body.dark-mode .text-size-toggle {
    background: rgba(255, 255, 255, 0.66) !important;
}

.mobile-menu {
    background: var(--okp-bg) !important;
}

.mobile-menu a {
    border-bottom: 1px solid var(--okp-line) !important;
}

.hero,
.section--hero,
.blog-hero,
.wp-hero {
    min-height: 82vh !important;
    padding: 132px 40px 156px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden;
}

.hero::before,
.blog-hero::before,
.wp-hero::before {
    content: none !important;
    display: none !important;
}

.hero::after {
    content: none !important;
    display: none !important;
}

.hero-inner,
.section--hero .hero-inner,
.blog-hero,
.wp-hero > * {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    z-index: 1;
}

.hero h1,
.section--hero h1,
.blog-hero h1,
.wp-hero h1 {
    font-size: 96px !important;
    line-height: 1.04 !important;
    font-weight: 400 !important;
    margin-bottom: 24px !important;
    color: var(--okp-text-primary) !important;
}

.hero h1 .gradient,
.blog-hero h1 .highlight {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
}

.hero-sub,
.blog-hero-sub {
    max-width: 720px !important;
    font-size: 18px !important;
    line-height: 1.58 !important;
    margin-bottom: 34px !important;
}

.lead,
.hero .lead,
.wp-hero .lead,
.section > p,
.section .sub,
.adv-preview-intro,
.cta-section p {
    max-width: 760px !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--okp-text-muted) !important;
}

.hero .lead,
.wp-hero .lead {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ev-section {
    padding-top: 36px !important;
}

.hero-ctas {
    gap: 14px !important;
}

section,
.section,
.roles-section,
.quote-section,
.trust-signals,
.cta-section {
    background: transparent !important;
}

section,
.section,
.role-block,
.quote-section,
.cta-section,
.trust-signals {
    padding-top: 112px !important;
    padding-bottom: 112px !important;
}

.container,
.container--sm,
.container--md,
.container--lg,
.blog-content,
.blog-list,
.blog-index,
.legal-page,
.sp-page {
    max-width: 1120px !important;
}

.blog-content,
.legal-page {
    max-width: 760px !important;
}

.section-label,
.role-block-tag,
.blog-hero-badge,
.blog-card-badge,
.prov-plan-tag,
.scenario-label,
.label,
.tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 28px !important;
    padding: 5px 12px !important;
    border-radius: var(--okp-radius-pill) !important;
    border: 1px solid var(--okp-border-color) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--okp-text-muted) !important;
    text-transform: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

html.dark-mode .section-label,
html.dark-mode .role-block-tag,
html.dark-mode .blog-hero-badge,
html.dark-mode .blog-card-badge,
html.dark-mode .prov-plan-tag,
html.dark-mode .scenario-label,
html.dark-mode .label,
html.dark-mode .tag {
    background: rgba(255, 255, 255, 0.05) !important;
}

.section-label::before,
.role-block-tag::before,
.blog-hero-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--okp-blue), var(--okp-green)) !important;
    animation: none !important;
}

.card,
.glow-card,
.tilt-card,
.benefit-card,
.provider-card,
.wp-alt-card,
.wp-step,
.step-card,
.compare-card,
.faq-item,
.team-card,
.blog-card,
.blog-quote,
.blog-cta,
.blog-stat-card,
.insight-card,
.platform-card,
.detail-item,
.arch-box,
.vision-item,
.scenario-card,
.sit-card,
.people-card,
.article-card,
.item,
.sp-track,
.sp-stat,
.share-card {
    border-radius: var(--okp-radius-lg) !important;
    background: var(--okp-panel) !important;
    border: 1px solid var(--okp-border-color) !important;
    box-shadow: none !important;
}

.card:hover,
.benefit-card:hover,
.provider-card:hover,
.wp-alt-card:hover,
.step-card:hover,
.compare-card:hover,
.faq-item:hover,
.team-card:hover,
.blog-card:hover,
.article-card:hover,
.item:hover,
.sp-track:hover {
    transform: none !important;
    border-color: #ccd6e4 !important;
    box-shadow: var(--okp-shadow-md) !important;
}

.ev-wrap,
.video-card,
.mock-browser,
.mock-screen,
.wp-code-wrap,
.code-block,
.dashboard-mock,
.sp-stats,
.stats-bar,
.trust-grid,
.feature-list,
.blog-card-img,
.card-img,
.wp-path,
.jog-wrap,
.adv-tgt-flow,
.arch-flow,
.ev-preview-bg {
    border-radius: var(--okp-radius-lg) !important;
}

.ev-wrap {
    max-width: 1120px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%) !important;
    border: 1px solid var(--okp-border-color) !important;
    box-shadow: none !important;
}

.hero::after,
.ev-wrap {
    box-shadow: none !important;
}

.ev-preview-bg {
    background:
        radial-gradient(circle at 50% 45%, rgba(26, 115, 232, 0.10), transparent 34%),
        radial-gradient(circle at 42% 54%, rgba(52, 168, 83, 0.08), transparent 28%),
        #ffffff !important;
}

.ev-wrap .ev-scene,
.ev-wrap .ev-scene.ev-s6 {
    background: #ffffff !important;
    color: var(--okp-text-primary) !important;
}

.ev-s6 .ev-headline {
    color: var(--okp-text-primary) !important;
}

.ev-s6 .ev-sub-text,
.ev-s6 .ev-logo-end {
    color: var(--okp-text-muted) !important;
}

.ev-s6 .ev-pill-final {
    background: #111318 !important;
    color: #ffffff !important;
}

.ev-s6 .ev-pill-final .pc {
    border-color: rgba(255, 255, 255, 0.36) !important;
}

.ev-preview-logo,
.ev-preview-title,
.ev-preview-sub,
.ev-preview-play-label,
.ev-preview-duration {
    color: var(--okp-text-primary) !important;
}

.ev-play-ring-dark {
    background: #ffffff !important;
    border-color: var(--okp-border-color) !important;
    color: var(--okp-text-primary) !important;
}

.ev-preview-title,
.ev-headline,
.ev-quote {
    letter-spacing: 0 !important;
}

.roles-section {
    margin-top: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%) !important;
    color: var(--okp-text-primary) !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.roles-section .container {
    max-width: 1040px !important;
}

.roles-section .role-block {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.roles-section .role-block h3,
.roles-section .role-block p,
.roles-section .role-block li,
.roles-section .role-cta {
    color: var(--okp-text-primary) !important;
}

.roles-section .role-block p,
.roles-section .role-block li {
    color: var(--okp-text-muted) !important;
}

.roles-section .role-block-tag {
    background: #ffffff !important;
    border-color: var(--okp-border-color) !important;
    color: var(--okp-text-muted) !important;
    align-self: flex-start !important;
}

.role-block {
    border-top: 1px solid var(--okp-line) !important;
}

.roles-section .role-block {
    border-top: 1px solid var(--okp-line) !important;
}

.role-block h3,
.section h2,
.section-headline,
.cta-section h2,
.quote-section blockquote {
    font-size: 44px !important;
    line-height: 1.14 !important;
    font-weight: 400 !important;
}

.role-block > .container > p,
.cta-section p,
.quote-section cite {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

.feature-list li,
.check-item,
.wp-check,
.compare-item,
.tl-item,
.timeline-item {
    color: var(--okp-text-secondary) !important;
}

.dot-accent,
.check-icon,
.wp-check-icon,
.compare-check,
.timeline-dot {
    background: linear-gradient(135deg, var(--okp-blue), var(--okp-green)) !important;
}

.compare-x,
.cross,
.neg {
    color: var(--okp-red) !important;
}

.blog-hero {
    display: block !important;
    padding-top: 150px !important;
    min-height: auto !important;
}

.blog-hero h1 {
    max-width: 940px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.blog-content h2 {
    font-size: 34px !important;
    line-height: 1.22 !important;
    font-weight: 500 !important;
    margin-top: 72px !important;
}

.blog-content p,
.blog-content li {
    font-size: 18px !important;
    line-height: 1.82 !important;
}

.blog-card {
    overflow: hidden !important;
}

.blog-card-img,
.card-img {
    background: #eef2f8 !important;
}

.legal-page {
    padding-top: 140px !important;
    padding-bottom: 110px !important;
}

.legal-page h1 {
    font-size: 56px !important;
    line-height: 1.08 !important;
    font-weight: 400 !important;
}

.legal-page h2 {
    font-size: 30px !important;
    margin-top: 56px !important;
}

.wp-code,
pre,
code {
    border-radius: var(--okp-radius-md) !important;
}

.okp-player {
    background: #000 !important;
    color: #fff !important;
    border-radius: var(--okp-radius-pill) !important;
}

.cookie-banner {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html.dark-mode .cookie-banner,
body.dark-mode .cookie-banner {
    background: rgba(255, 255, 255, 0.92) !important;
}

footer {
    background: var(--okp-bg) !important;
    border-top: 1px solid var(--okp-line) !important;
    padding-top: 64px !important;
}

.footer-inner {
    max-width: 1120px !important;
}

.footer-grid {
    gap: 32px !important;
}

.footer-col-title {
    color: var(--okp-text-primary) !important;
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.footer-col a,
.footer-bottom {
    color: var(--okp-text-muted) !important;
}

body > main[style] {
    max-width: none !important;
    padding-top: 96px !important;
}

.sp-page,
.container:has(.header),
.share-card {
    padding-top: 120px !important;
}

.sp-header,
.header {
    border-bottom-color: var(--okp-line) !important;
}

.sp-avatar,
.avatar {
    border-radius: 50% !important;
    box-shadow: 0 0 0 8px var(--okp-surface) !important;
}

.sp-name,
.header h1,
.share-card h1 {
    font-size: 44px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
}

.article-list,
.list,
.sp-tracks {
    gap: 12px !important;
}

/* Pixel tuning pass: cleaner header, tighter rhythm, fewer empty zones. */
nav {
    height: 64px !important;
    padding: 0 48px !important;
    align-items: center !important;
}

.nav-logo img {
    display: none !important;
}

.nav-logo span {
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.nav-links {
    gap: 28px !important;
}

.nav-links a:not(.nav-btn-outline) {
    line-height: 44px !important;
}

#textSizeBtn,
#textSizeBtnMobile,
.text-size-toggle {
    display: none !important;
}

.nav-right-mobile {
    gap: 14px !important;
}

.burger-btn {
    width: 44px !important;
    height: 44px !important;
}

.hero,
.section--hero,
.blog-hero,
.wp-hero {
    min-height: 760px !important;
    padding: 148px 40px 116px !important;
}

.hero h1,
.section--hero h1,
.blog-hero h1,
.wp-hero h1 {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 88px !important;
    line-height: 1.06 !important;
    text-wrap: balance;
}

.hero-sub,
.blog-hero-sub {
    max-width: 690px !important;
    font-size: 18px !important;
    line-height: 1.56 !important;
}

.hero-ctas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
}

.btn-link,
.role-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 12px 22px !important;
    border-radius: var(--okp-radius-pill) !important;
    color: var(--okp-text-secondary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.btn-link {
    border: 1px solid transparent !important;
}

.btn-link:hover,
.role-cta:hover {
    color: var(--okp-text-primary) !important;
    background: #f5f7fb !important;
}

section,
.section,
.quote-section,
.trust-signals,
.cta-section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

.ev-section {
    padding-top: 24px !important;
    padding-bottom: 88px !important;
}

.ev-wrap {
    border-radius: 10px !important;
}

.roles-section {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 536px)) !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 96px 40px !important;
    background: #ffffff !important;
}

.roles-section .role-block {
    margin: 0 !important;
    padding: 44px !important;
    min-height: 360px !important;
    display: flex !important;
    border: 1px solid var(--okp-line) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important;
}

.roles-section .role-block.dot-bg::before,
.roles-section .role-block.dot-bg::after {
    display: none !important;
}

.roles-section .role-block .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.roles-section .role-block h3 {
    max-width: 430px !important;
    margin-top: 18px !important;
    margin-bottom: 14px !important;
    font-size: 34px !important;
    line-height: 1.14 !important;
}

.roles-section .role-block p {
    max-width: 460px !important;
    margin-bottom: 28px !important;
    font-size: 16px !important;
    line-height: 1.58 !important;
}

.roles-section .feature-list {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    gap: 0 !important;
}

.roles-section .feature-list li {
    padding: 11px 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.roles-section .role-cta {
    margin-top: auto !important;
    align-self: flex-start !important;
    padding-left: 0 !important;
}

.trust-grid {
    max-width: 960px !important;
}

.quote-section blockquote {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: balance;
}

.cookie-banner {
    left: 50% !important;
    right: auto !important;
    bottom: 20px !important;
    width: min(940px, calc(100% - 40px)) !important;
    transform: translateX(-50%) !important;
    border: 1px solid var(--okp-line) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 18px 60px rgba(25, 32, 46, 0.10) !important;
}

.cookie-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.cookie-content p {
    margin: 0 !important;
    max-width: 620px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* Motion pass: subtle launch-page movement without bringing back the cursor. */
@keyframes okpFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes okpHeroField {
    0% {
        background-position: 0 0, 0 0;
        transform: translate3d(0, 0, 0);
    }
    50% {
        background-position: 80px 16px, 0 0;
        transform: translate3d(0, -8px, 0);
    }
    100% {
        background-position: 160px 32px, 0 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes okpWordToVoice {
    0% {
        background-position: -40px 0, 0 0;
        opacity: 0.22;
    }
    45% {
        background-position: 44px -4px, 0 0;
        opacity: 0.30;
    }
    100% {
        background-position: 132px 0, 0 0;
        opacity: 0.22;
    }
}

@keyframes okpConversionStream {
    0% {
        background-position: -180px 0;
        opacity: 0.46;
    }
    45% {
        background-position: 80px 0;
        opacity: 0.68;
    }
    100% {
        background-position: 360px 0;
        opacity: 0.46;
    }
}

@keyframes okpPulseDot {
    0%, 100% {
        transform: scale(1);
        opacity: 0.72;
    }
    50% {
        transform: scale(1.45);
        opacity: 1;
    }
}

@keyframes okpPulseRing {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.14);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(26, 115, 232, 0);
    }
}

@keyframes okpVoiceField {
    0% {
        background-position: 0 -42px, 240px 492px, 0 0;
        transform: translate3d(0, 0, 0);
        opacity: 0.28;
    }
    50% {
        background-position: 150px -50px, 80px 482px, 0 0;
        transform: translate3d(-10px, -4px, 0);
        opacity: 0.36;
    }
    100% {
        background-position: 300px -42px, -80px 492px, 0 0;
        transform: translate3d(-20px, 0, 0);
        opacity: 0.28;
    }
}

@keyframes okpCardFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -5px, 0);
    }
}

@keyframes okpButtonSheen {
    0% {
        transform: translateX(-120%) skewX(-18deg);
    }
    45%, 100% {
        transform: translateX(220%) skewX(-18deg);
    }
}

@keyframes okpHumanWave {
    0%, 100% {
        transform: scaleY(0.45);
        opacity: 0.55;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes okpHumanCardFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -4px, 0);
    }
}

.hero::before,
.section--hero::before,
.blog-hero::before,
.wp-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 70px 0 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='240' viewBox='0 0 680 240'%3E%3Cg font-family='Arial,sans-serif' font-size='13' font-weight='700'%3E%3Crect x='28' y='48' width='68' height='28' rx='14' fill='%23111318' opacity='.055'/%3E%3Ctext x='48' y='67' fill='%23111318' opacity='.28'%3EWort%3C/text%3E%3Crect x='112' y='48' width='56' height='28' rx='14' fill='%231a73e8' opacity='.07'/%3E%3Ctext x='128' y='67' fill='%231a73e8' opacity='.34'%3EText%3C/text%3E%3Crect x='184' y='48' width='60' height='28' rx='14' fill='%23111318' opacity='.05'/%3E%3Ctext x='200' y='67' fill='%23111318' opacity='.24'%3ESatz%3C/text%3E%3C/g%3E%3Cg fill='%23111318' opacity='.075'%3E%3Crect x='32' y='98' width='210' height='7' rx='3.5'/%3E%3Crect x='32' y='120' width='280' height='7' rx='3.5'/%3E%3Crect x='32' y='142' width='230' height='7' rx='3.5'/%3E%3C/g%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M330 120c26 0 40 0 64 0' stroke='%231a73e8' stroke-width='2.4' opacity='.28'/%3E%3Cpath d='M386 110l12 10-12 10' stroke='%231a73e8' stroke-width='2.4' opacity='.30'/%3E%3Cpath d='M430 120C454 74 478 166 502 120S550 74 574 120S626 166 660 120' stroke='%231a73e8' stroke-width='3' opacity='.34'/%3E%3Cpath d='M430 102C454 132 478 72 502 102S550 132 574 102S626 72 660 102' stroke='%2334a853' stroke-width='2.2' opacity='.22'/%3E%3Cpath d='M430 140C454 114 478 166 502 140S550 114 574 140S626 166 660 140' stroke='%23ea4335' stroke-width='2' opacity='.18'/%3E%3C/g%3E%3Cg stroke='%231a73e8' stroke-linecap='round' stroke-width='2.4' opacity='.22'%3E%3Cpath d='M470 108v24'/%3E%3Cpath d='M486 96v48'/%3E%3Cpath d='M502 114v12'/%3E%3Cpath d='M594 104v32'/%3E%3Cpath d='M610 92v56'/%3E%3Cpath d='M626 110v20'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle, rgba(26, 115, 232, 0.10) 1px, transparent 1.5px) !important;
    background-size: 680px 240px, 52px 52px !important;
    opacity: 0.26 !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 58%, transparent 88%) !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 58%, transparent 88%) !important;
    animation: okpWordToVoice 14s ease-in-out infinite !important;
}

.hero::after,
.section--hero::after,
.blog-hero::after,
.wp-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 84px 0 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 110C24 58 68 162 112 110S200 58 244 110S332 162 376 110S464 58 540 110' stroke='%231a73e8' stroke-width='2.8' opacity='.42'/%3E%3Cpath d='M-20 90C22 126 64 54 106 90S190 126 232 90S316 54 358 90S442 126 540 90' stroke='%2334a853' stroke-width='2.2' opacity='.28'/%3E%3Cpath d='M-20 134C18 98 56 170 94 134S170 98 208 134S284 170 322 134S398 98 540 134' stroke='%23ea4335' stroke-width='2.2' opacity='.25'/%3E%3Cpath d='M-20 154C28 122 76 184 124 154S220 122 268 154S364 184 412 154S508 122 540 154' stroke='%23fbbc04' stroke-width='2' opacity='.22'/%3E%3C/g%3E%3Cg stroke='%231a73e8' stroke-linecap='round' stroke-width='3' opacity='.28'%3E%3Cpath d='M54 102v16'/%3E%3Cpath d='M70 94v32'/%3E%3Cpath d='M86 106v8'/%3E%3Cpath d='M312 100v20'/%3E%3Cpath d='M328 88v44'/%3E%3Cpath d='M344 104v12'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 110C24 58 68 162 112 110S200 58 244 110S332 162 376 110S464 58 540 110' stroke='%231a73e8' stroke-width='2.8' opacity='.42'/%3E%3Cpath d='M-20 90C22 126 64 54 106 90S190 126 232 90S316 54 358 90S442 126 540 90' stroke='%2334a853' stroke-width='2.2' opacity='.28'/%3E%3Cpath d='M-20 134C18 98 56 170 94 134S170 98 208 134S284 170 322 134S398 98 540 134' stroke='%23ea4335' stroke-width='2.2' opacity='.25'/%3E%3Cpath d='M-20 154C28 122 76 184 124 154S220 122 268 154S364 184 412 154S508 122 540 154' stroke='%23fbbc04' stroke-width='2' opacity='.22'/%3E%3C/g%3E%3Cg stroke='%231a73e8' stroke-linecap='round' stroke-width='3' opacity='.28'%3E%3Cpath d='M54 102v16'/%3E%3Cpath d='M70 94v32'/%3E%3Cpath d='M86 106v8'/%3E%3Cpath d='M312 100v20'/%3E%3Cpath d='M328 88v44'/%3E%3Cpath d='M344 104v12'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0)) !important;
    background-size: 520px 220px, 520px 220px, 100% 100% !important;
    background-repeat: repeat-x, repeat-x, no-repeat !important;
    opacity: 0.30 !important;
    mask-image: radial-gradient(circle at 50% 46%, #000 0%, #000 44%, transparent 76%) !important;
    -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0%, #000 44%, transparent 76%) !important;
    animation: okpVoiceField 18s ease-in-out infinite !important;
}

.hero-inner,
.section--hero .hero-inner,
.blog-hero > *,
.wp-hero > * {
    z-index: 2 !important;
}

.hero-inner,
.section--hero .hero-inner {
    isolation: isolate !important;
}

.hero-inner::before,
.hero-inner::after,
.section--hero .hero-inner::before,
.section--hero .hero-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    width: min(1120px, calc(100vw - 56px)) !important;
    height: 96px !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform: translateX(-50%) !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='96' viewBox='0 0 980 96'%3E%3Cg font-family='Arial,sans-serif' font-size='12' font-weight='700'%3E%3Crect x='20' y='31' width='66' height='26' rx='13' fill='%23111318' opacity='.055'/%3E%3Ctext x='39' y='48' fill='%23111318' opacity='.28'%3EWort%3C/text%3E%3Crect x='104' y='31' width='58' height='26' rx='13' fill='%231a73e8' opacity='.07'/%3E%3Ctext x='119' y='48' fill='%231a73e8' opacity='.34'%3EText%3C/text%3E%3Crect x='180' y='31' width='72' height='26' rx='13' fill='%23111318' opacity='.05'/%3E%3Ctext x='197' y='48' fill='%23111318' opacity='.24'%3EArtikel%3C/text%3E%3C/g%3E%3Cg fill='%23111318' opacity='.075'%3E%3Crect x='278' y='28' width='96' height='6' rx='3'/%3E%3Crect x='278' y='45' width='132' height='6' rx='3'/%3E%3Crect x='278' y='62' width='86' height='6' rx='3'/%3E%3C/g%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M446 48h78' stroke='%231a73e8' stroke-width='2.4' opacity='.30'/%3E%3Cpath d='M514 38l13 10-13 10' stroke='%231a73e8' stroke-width='2.4' opacity='.34'/%3E%3Cpath d='M566 48C594 12 622 84 650 48S706 12 734 48S790 84 818 48S890 12 960 48' stroke='%231a73e8' stroke-width='3' opacity='.42'/%3E%3Cpath d='M566 32C594 58 622 6 650 32S706 58 734 32S790 6 818 32S890 58 960 32' stroke='%2334a853' stroke-width='2.1' opacity='.25'/%3E%3Cpath d='M566 65C594 44 622 86 650 65S706 44 734 65S790 86 818 65S890 44 960 65' stroke='%23ea4335' stroke-width='2' opacity='.18'/%3E%3C/g%3E%3Cg stroke='%231a73e8' stroke-linecap='round' stroke-width='2.8' opacity='.24'%3E%3Cpath d='M626 35v26'/%3E%3Cpath d='M643 25v46'/%3E%3Cpath d='M660 39v18'/%3E%3Cpath d='M806 33v30'/%3E%3Cpath d='M823 20v56'/%3E%3Cpath d='M840 38v20'/%3E%3C/g%3E%3C/svg%3E") center / 980px 96px repeat-x !important;
    opacity: 0.56 !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
    animation: okpConversionStream 13s ease-in-out infinite !important;
}

.hero-inner::before,
.section--hero .hero-inner::before {
    top: -126px !important;
}

.hero-inner::after,
.section--hero .hero-inner::after {
    bottom: -126px !important;
    opacity: 0.38 !important;
    animation-delay: -6.5s !important;
}

.hero h1,
.section--hero h1,
.blog-hero h1,
.wp-hero h1 {
    animation: okpFadeUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both !important;
}

.hero-sub,
.blog-hero-sub,
.wp-hero .lead,
.hero .lead {
    animation: okpFadeUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 210ms both !important;
}

.hero-ctas,
.wp-hero .hero-ctas {
    animation: okpFadeUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 340ms both !important;
}

.human-voice-strip {
    width: min(920px, 100%) !important;
    margin: 22px auto 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    animation: okpFadeUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both !important;
}

.human-voice-card {
    min-width: 252px !important;
    min-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px 9px 9px !important;
    border-radius: var(--okp-radius-pill) !important;
    border: 1px solid rgba(214, 222, 234, 0.92) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 14px 42px rgba(25, 32, 46, 0.07) !important;
    animation: okpHumanCardFloat 6.8s ease-in-out infinite !important;
}

.human-voice-card:nth-child(2) {
    animation-delay: -2.1s !important;
}

.human-voice-card:nth-child(3) {
    animation-delay: -4.2s !important;
}

.human-voice-avatar {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #111318 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.9), transparent 34%),
        linear-gradient(135deg, rgba(251, 188, 4, 0.34), rgba(26, 115, 232, 0.22) 48%, rgba(234, 67, 53, 0.20)) !important;
}

.human-voice-copy {
    min-width: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    line-height: 1.1 !important;
}

.human-voice-copy strong {
    color: var(--okp-text-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.human-voice-copy small {
    margin-top: 4px !important;
    color: var(--okp-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.human-voice-wave {
    height: 28px !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.human-voice-wave i {
    width: 3px !important;
    height: 24px !important;
    display: block !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--okp-blue), var(--okp-green)) !important;
    transform-origin: center !important;
    animation: okpHumanWave 1.15s ease-in-out infinite !important;
}

.human-voice-wave i:nth-child(2) {
    animation-delay: -0.22s !important;
}

.human-voice-wave i:nth-child(3) {
    animation-delay: -0.44s !important;
}

.human-voice-wave i:nth-child(4) {
    animation-delay: -0.66s !important;
}

.human-voice-wave i:nth-child(5) {
    animation-delay: -0.88s !important;
}

.ev-wrap {
    animation: okpFadeUp 820ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both !important;
    transition: transform 220ms ease, border-color 220ms ease !important;
}

.ev-wrap:hover {
    transform: translateY(-3px) !important;
    border-color: #d5dde8 !important;
}

.roles-section .role-block {
    position: relative !important;
    overflow: hidden !important;
    animation: okpCardFloat 7.5s ease-in-out infinite !important;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease !important;
}

.roles-section .role-block::after,
.roles-section .role-block.dot-bg::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 28px !important;
    top: 28px !important;
    width: 132px !important;
    height: 48px !important;
    pointer-events: none !important;
    opacity: 0.18 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='48' viewBox='0 0 132 48'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='2.4'%3E%3Cpath d='M2 24C13 8 24 40 35 24S57 8 68 24S90 40 101 24S123 8 130 24' stroke='%231a73e8'/%3E%3Cpath d='M2 30C15 18 28 42 41 30S67 18 80 30S106 42 130 30' stroke='%2334a853' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
    transform: translate3d(0, 0, 0) !important;
    transition: opacity 220ms ease, transform 220ms ease !important;
}

.roles-section .role-block::before,
.roles-section .role-block.dot-bg::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 28px !important;
    bottom: 28px !important;
    width: 176px !important;
    height: 92px !important;
    pointer-events: none !important;
    opacity: 0.18 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='92' viewBox='0 0 176 92'%3E%3Cg fill='%23111318'%3E%3Crect x='4' y='10' width='78' height='6' rx='3' opacity='.24'/%3E%3Crect x='4' y='28' width='104' height='6' rx='3' opacity='.18'/%3E%3Crect x='4' y='46' width='88' height='6' rx='3' opacity='.16'/%3E%3C/g%3E%3Cpath d='M100 30h28' stroke='%231a73e8' stroke-width='2' stroke-linecap='round' opacity='.22'/%3E%3Cpath d='M122 23l9 7-9 7' fill='none' stroke='%231a73e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.25'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M132 31C140 19 148 43 156 31S170 19 176 31' stroke='%231a73e8' stroke-width='2.3' opacity='.28'/%3E%3Cpath d='M132 42C142 34 152 50 162 42S172 34 176 42' stroke='%2334a853' stroke-width='1.8' opacity='.18'/%3E%3C/g%3E%3Crect x='4' y='70' width='58' height='6' rx='3' fill='%231a73e8' opacity='.14'/%3E%3C/svg%3E") center / contain no-repeat !important;
    transition: opacity 220ms ease, transform 220ms ease !important;
}

.roles-section .role-block .container {
    position: relative !important;
    z-index: 1 !important;
}

.roles-section .role-block:hover {
    animation-play-state: paused !important;
    transform: translateY(-7px) !important;
    border-color: #d3dce8 !important;
    background:
        radial-gradient(circle at 82% 16%, rgba(26, 115, 232, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
    box-shadow: 0 24px 80px rgba(25, 32, 46, 0.10) !important;
}

.roles-section .role-block:hover::after {
    opacity: 0.34 !important;
    transform: translate3d(-6px, 0, 0) !important;
}

.roles-section .role-block:hover::before {
    opacity: 0.28 !important;
    transform: translate3d(0, -3px, 0) !important;
}

.roles-section .role-block:nth-child(2) {
    animation-delay: -1.8s !important;
}

.roles-section .role-block:nth-child(3) {
    animation-delay: -3.4s !important;
}

.roles-section .role-block:nth-child(4) {
    animation-delay: -5s !important;
}

.section-label::before,
.role-block-tag::before,
.blog-hero-badge::before,
.dot-accent {
    animation: okpPulseDot 2.8s ease-in-out infinite !important;
    transform-origin: center !important;
}

.role-cta svg,
.btn-primary svg,
.cta-btn svg,
.wp-cta-btn svg {
    transition: transform 180ms ease !important;
}

.role-cta:hover svg,
.btn-primary:hover svg,
.cta-btn:hover svg,
.wp-cta-btn:hover svg {
    transform: translateX(3px) !important;
}

.ev-play-ring-dark,
.ev-play-ring {
    animation: okpPulseRing 2.6s ease-in-out infinite !important;
}

.btn-primary,
.nav-btn-outline,
.cta-btn,
.wp-cta-btn {
    position: relative !important;
    overflow: hidden !important;
}

.btn-primary::after,
.nav-btn-outline::after,
.cta-btn::after,
.wp-cta-btn::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -40% auto -40% 0 !important;
    width: 42px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent) !important;
    pointer-events: none !important;
    animation: okpButtonSheen 4.6s ease-in-out infinite !important;
}

/* Fresh pass: younger, brighter, still white and voice-first. */
:root {
    --okp-fresh-blue: #1a73e8;
    --okp-fresh-mint: #00c28a;
    --okp-fresh-coral: #ff5f57;
    --okp-fresh-yellow: #fbbc04;
    --okp-fresh-lilac: #7c5cff;
}

nav {
    background: rgba(255, 255, 255, 0.74) !important;
    border-bottom: 1px solid rgba(230, 235, 242, 0.72) !important;
}

.nav-logo span {
    background: linear-gradient(90deg, #111318 0%, var(--okp-fresh-blue) 48%, var(--okp-fresh-mint) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.nav-links a:not(.nav-btn-outline):hover {
    color: var(--okp-fresh-blue) !important;
}

.btn-primary,
.nav-btn-outline,
.cta-btn,
.wp-cta-btn {
    background:
        linear-gradient(135deg, #111318 0%, #1a73e8 54%, #00c28a 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 12px 34px rgba(26, 115, 232, 0.16) !important;
}

.btn-primary:hover,
.nav-btn-outline:hover,
.cta-btn:hover,
.wp-cta-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 48px rgba(26, 115, 232, 0.22) !important;
}

.btn-secondary,
.btn-link {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.32), rgba(0, 194, 138, 0.30), rgba(255, 95, 87, 0.22)) border-box !important;
    border: 1px solid transparent !important;
}

.btn-secondary:hover,
.btn-link:hover {
    background:
        linear-gradient(180deg, #ffffff 0%, #f4fbff 100%) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.52), rgba(0, 194, 138, 0.46), rgba(255, 95, 87, 0.30)) border-box !important;
}

.human-voice-card {
    border-color: transparent !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 252, 255, 0.88)) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.28), rgba(0, 194, 138, 0.28), rgba(255, 95, 87, 0.20)) border-box !important;
    box-shadow: 0 16px 46px rgba(25, 32, 46, 0.08), 0 4px 16px rgba(26, 115, 232, 0.08) !important;
}

.human-voice-avatar {
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.98), transparent 34%),
        linear-gradient(135deg, rgba(251, 188, 4, 0.62), rgba(26, 115, 232, 0.38) 47%, rgba(0, 194, 138, 0.36) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.62) !important;
}

.human-voice-wave i {
    background: linear-gradient(180deg, var(--okp-fresh-blue), var(--okp-fresh-mint) 70%, var(--okp-fresh-yellow)) !important;
}

.roles-section {
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 46%, #ffffff 100%) !important;
}

.roles-section .role-block {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(0, 194, 138, 0.15), rgba(255, 95, 87, 0.12)) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 0 16px 48px rgba(25, 32, 46, 0.045) !important;
}

.roles-section .role-block:hover {
    background:
        radial-gradient(circle at 82% 16%, rgba(0, 194, 138, 0.09), transparent 34%),
        linear-gradient(#ffffff, #f8fcff) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.38), rgba(0, 194, 138, 0.35), rgba(255, 95, 87, 0.20)) border-box !important;
}

.role-block-tag,
.section-label,
.blog-hero-badge {
    background:
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.22), rgba(0, 194, 138, 0.18)) border-box !important;
    border-color: transparent !important;
}

.dot-accent,
.section-label::before,
.role-block-tag::before,
.blog-hero-badge::before {
    background: linear-gradient(135deg, var(--okp-fresh-blue), var(--okp-fresh-mint), var(--okp-fresh-yellow)) !important;
}

.ev-wrap {
    background:
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(0, 194, 138, 0.13), rgba(255, 95, 87, 0.10)) border-box !important;
    border: 1px solid transparent !important;
}

.cookie-banner {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 255, 0.94)) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.16), rgba(0, 194, 138, 0.14)) border-box !important;
    border: 1px solid transparent !important;
}

/* Clean white pass: no decorative background images, no mouseover movement. */
body::before,
.hero::before,
.section--hero::before,
.blog-hero::before,
.wp-hero::before,
.hero::after,
.section--hero::after,
.blog-hero::after,
.wp-hero::after,
.hero-inner::before,
.hero-inner::after,
.section--hero .hero-inner::before,
.section--hero .hero-inner::after,
.roles-section .role-block::before,
.roles-section .role-block::after,
.roles-section .role-block.dot-bg::before,
.roles-section .role-block.dot-bg::after,
.ev-preview-grain,
#hero-particles,
.hero canvas {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
}

body,
html,
.hero,
.section--hero,
.blog-hero,
.wp-hero,
section,
.section,
.roles-section,
.quote-section,
.trust-signals,
.cta-section {
    background: #ffffff !important;
    background-image: none !important;
}

.roles-section .role-block {
    animation: none !important;
}

.nav-links a:hover,
.btn-primary:hover,
.btn-secondary:hover,
.cta-btn:hover,
.wp-cta-btn:hover,
.nav-btn:hover,
.nav-btn-outline:hover,
.btn-link:hover,
.role-cta:hover,
.card:hover,
.benefit-card:hover,
.provider-card:hover,
.wp-alt-card:hover,
.step-card:hover,
.compare-card:hover,
.faq-item:hover,
.team-card:hover,
.blog-card:hover,
.article-card:hover,
.item:hover,
.sp-track:hover,
.ev-wrap:hover,
.roles-section .role-block:hover,
.ev-play-overlay:hover .ev-play-ring-dark,
.ev-play-overlay:hover .ev-play-ring,
.ev-ctrls button:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.btn-primary:hover,
.nav-btn-outline:hover,
.cta-btn:hover,
.wp-cta-btn:hover {
    background: linear-gradient(135deg, #111318 0%, #1a73e8 54%, #00c28a 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 12px 34px rgba(26, 115, 232, 0.16) !important;
}

.btn-secondary:hover,
.btn-link:hover {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.32), rgba(0, 194, 138, 0.30), rgba(255, 95, 87, 0.22)) border-box !important;
}

.roles-section .role-block:hover {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(0, 194, 138, 0.15), rgba(255, 95, 87, 0.12)) border-box !important;
    border-color: transparent !important;
}

.role-cta:hover svg,
.btn-primary:hover svg,
.cta-btn:hover svg,
.wp-cta-btn:hover svg {
    transform: none !important;
}

.ev-preview-bg {
    background: #ffffff !important;
    background-image: none !important;
}

.ev-preview-logo,
.ev-preview-title,
.ev-preview-sub,
.ev-preview-play-label,
.ev-preview-duration {
    color: var(--okp-text-primary) !important;
}

.ev-play-overlay:hover .ev-play-ring {
    background: transparent !important;
}

.ev-play-overlay:hover .ev-play-ring svg {
    fill: currentColor !important;
}

@keyframes okpWordChipSpeak {
    0%, 16%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.58;
    }
    34%, 58% {
        transform: translate3d(5px, 0, 0);
        opacity: 1;
    }
}

@keyframes okpVoiceDotTravel {
    0% {
        transform: translate3d(-22px, 0, 0) scale(0.72);
        opacity: 0;
    }
    25%, 70% {
        opacity: 1;
    }
    100% {
        transform: translate3d(22px, 0, 0) scale(1);
        opacity: 0;
    }
}

@keyframes okpSpeakerBreathe {
    0%, 100% {
        box-shadow: 0 12px 34px rgba(26, 115, 232, 0.10);
    }
    50% {
        box-shadow: 0 16px 46px rgba(0, 194, 138, 0.16);
    }
}

.voice-transform-visual {
    width: min(720px, 100%) !important;
    min-height: 68px !important;
    margin: 0 auto 32px !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: auto 112px auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    border: 1px solid rgba(222, 229, 238, 0.96) !important;
    border-radius: var(--okp-radius-pill) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 54px rgba(25, 32, 46, 0.07) !important;
    animation: okpFadeUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 390ms both !important;
}

.voice-transform-words {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.voice-transform-words span {
    min-height: 34px !important;
    padding: 8px 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--okp-border-color) !important;
    border-radius: var(--okp-radius-pill) !important;
    color: var(--okp-text-secondary) !important;
    background: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    animation: okpWordChipSpeak 4.8s ease-in-out infinite !important;
}

.voice-transform-words span:nth-child(2) {
    animation-delay: 0.55s !important;
}

.voice-transform-words span:nth-child(3) {
    animation-delay: 1.1s !important;
}

.voice-transform-flow {
    min-width: 112px !important;
    height: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(90deg, transparent, rgba(26, 115, 232, 0.22), transparent) !important;
}

.voice-transform-flow i {
    width: 7px !important;
    height: 7px !important;
    display: block !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--okp-fresh-blue), var(--okp-fresh-mint)) !important;
    animation: okpVoiceDotTravel 2.4s ease-in-out infinite !important;
}

.voice-transform-flow i:nth-child(2) {
    animation-delay: 0.28s !important;
}

.voice-transform-flow i:nth-child(3) {
    animation-delay: 0.56s !important;
}

.voice-transform-flow i:nth-child(4) {
    animation-delay: 0.84s !important;
}

.voice-transform-speaker {
    min-height: 46px !important;
    padding: 7px 12px 7px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--okp-radius-pill) !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(26, 115, 232, 0.42), rgba(0, 194, 138, 0.34), rgba(251, 188, 4, 0.24)) border-box !important;
    animation: okpSpeakerBreathe 3.4s ease-in-out infinite !important;
}

.voice-face {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: var(--okp-text-primary) !important;
    background: linear-gradient(135deg, rgba(251, 188, 4, 0.62), rgba(26, 115, 232, 0.28), rgba(0, 194, 138, 0.32)) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.voice-bars {
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.voice-bars i {
    width: 3px !important;
    height: 22px !important;
    display: block !important;
    border-radius: var(--okp-radius-pill) !important;
    background: linear-gradient(180deg, var(--okp-fresh-blue), var(--okp-fresh-mint)) !important;
    transform-origin: center !important;
    animation: okpHumanWave 1s ease-in-out infinite !important;
}

.voice-bars i:nth-child(2) { animation-delay: -0.14s !important; }
.voice-bars i:nth-child(3) { animation-delay: -0.28s !important; }
.voice-bars i:nth-child(4) { animation-delay: -0.42s !important; }
.voice-bars i:nth-child(5) { animation-delay: -0.56s !important; }
.voice-bars i:nth-child(6) { animation-delay: -0.70s !important; }

@media (max-width: 768px) {
    .voice-transform-visual {
        width: 100% !important;
        max-width: 336px !important;
        min-height: auto !important;
        margin-bottom: 24px !important;
        padding: 12px !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        border-radius: 22px !important;
    }

    .voice-transform-words {
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .voice-transform-flow {
        width: 100% !important;
        min-width: 0 !important;
    }

    .voice-transform-speaker {
        justify-content: center !important;
    }
}

/* Black/white contrast pass: copy must stay readable on white. */
:root,
html.dark-mode,
body.dark-mode,
[data-theme="dark"] {
    --okp-text-primary: #000000;
    --okp-text-secondary: #111111;
    --okp-text-muted: #242424;
    --okp-text-faint: #4a4a4a;
    --okp-border-color: #111111;
    --okp-line: #d7d7d7;
    --okp-panel: #ffffff;
    --okp-surface: #ffffff;
    --okp-surface-2: #ffffff;
    --okp-btn-bg: #000000;
    --okp-btn-color: #ffffff;
    --okp-btn-secondary-bg: #ffffff;
    --okp-btn-secondary-color: #000000;
    --okp-btn-secondary-border: #111111;
    --fg: #000000;
    --t1: #000000;
    --t2: #111111;
    --t3: #242424;
    --t4: #4a4a4a;
    --line: #d7d7d7;
    --surface: #ffffff;
    --border: #111111;
}

body,
p,
li,
td,
th,
.lead,
.hero-sub,
.blog-hero-sub,
.blog-card-excerpt,
.section .sub,
.cta-section p,
.faq-a,
.faq-item p,
.adv-preview-intro,
.net-card p,
.hero .lead,
.wp-hero .lead,
.blog-index-hero p,
.role-block > .container > p,
.roles-section .role-block p,
.roles-section .role-block li,
.benefit-card p,
.google p,
.google-list li,
.proof-item .desc,
.inline-cta-box p,
.stat-card .label,
.hero-note {
    color: #111111 !important;
}

h1, h2, h3, h4, h5, h6,
strong,
.section-title,
.section-headline,
.blog-card-title,
.card-name,
.ba-metric strong,
.stat-card .num {
    color: #000000 !important;
}

.section-label,
.role-block-tag,
.blog-hero-badge,
.blog-card-badge,
.prov-plan-tag,
.scenario-label,
.label,
.tag,
.ba-label,
.benefit-icon,
.hero-badge,
.compare-table th {
    color: #000000 !important;
}

.card,
.glow-card,
.tilt-card,
.benefit-card,
.provider-card,
.wp-alt-card,
.wp-step,
.step-card,
.compare-card,
.faq-item,
.team-card,
.blog-card,
.article-card,
.item,
.sp-track,
.stat-card,
.inline-cta-box,
.segment-item,
.ba-card,
.voice-transform-visual,
.human-voice-card {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #111111 !important;
    box-shadow: none !important;
}

.benefit-hover-bg {
    display: none !important;
    background: none !important;
    background-image: none !important;
}

.btn-primary,
.nav-btn-outline,
.cta-btn,
.wp-cta-btn,
.cookie-btn,
.share-card a {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-primary::after,
.nav-btn-outline::after,
.cta-btn::after,
.wp-cta-btn::after {
    display: none !important;
}

.btn-secondary,
.btn-link,
.cookie-btn-ghost,
.mobile-menu-buttons .nav-btn-outline,
.voice-transform-words span {
    background: #ffffff !important;
    border-color: #111111 !important;
    color: #000000 !important;
}

.nav-logo span {
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important;
}

.dot-accent,
.section-label::before,
.role-block-tag::before,
.blog-hero-badge::before,
.ba-bar-fill,
.ba-before .ba-bar-fill,
.ba-after .ba-bar-fill,
.human-voice-wave i,
.voice-transform-flow i,
.voice-bars i {
    background: #000000 !important;
}

.ba-visual {
    gap: 14px !important;
}

.ba-card {
    padding: 34px 30px !important;
    border: 1px solid #111111 !important;
    border-radius: 10px !important;
    color: #000000 !important;
}

.ba-card.ba-before {
    opacity: 1 !important;
}

.ba-card.ba-after {
    border: 2px solid #000000 !important;
}

.ba-label {
    margin-bottom: 22px !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

.ba-metric {
    color: #000000 !important;
    font-size: 15px !important;
}

.ba-metric span,
.ba-metric strong {
    color: #000000 !important;
}

.ba-bar {
    height: 7px !important;
    background: #e3e3e3 !important;
}

.ba-arrow {
    color: #000000 !important;
}

.voice-transform-speaker,
.human-voice-avatar,
.voice-face {
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    color: #000000 !important;
}

/* Publisher comparison cards: black/white, cleaner, more premium. */
.compare {
    max-width: 1260px !important;
}

.compare-grid {
    gap: 18px !important;
    align-items: stretch !important;
}

.compare .compare-card {
    min-height: 680px !important;
    padding: 44px 44px 36px !important;
    border-radius: 18px !important;
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.compare .compare-card.highlight {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.compare .compare-card .tag {
    min-height: 32px !important;
    padding: 7px 14px !important;
    margin-bottom: 22px !important;
    border-radius: 999px !important;
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.compare .compare-card.highlight .tag {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

.compare .compare-card h3 {
    margin-bottom: 32px !important;
    color: #000000 !important;
    font-size: 31px !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
}

.compare .compare-card.highlight h3 {
    color: #ffffff !important;
}

.compare-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.compare-list li {
    min-height: 82px !important;
    padding: 16px 0 !important;
    display: grid !important;
    grid-template-columns: 54px 1fr !important;
    align-items: center !important;
    gap: 18px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
    color: #000000 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
}

.compare .compare-card.highlight .compare-list li {
    border-bottom-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.compare-list li:last-child {
    border-bottom: 0 !important;
}

.compare-list li span {
    color: inherit !important;
    padding-top: 0 !important;
}

.compare svg.ci,
.compare svg.ci.neg {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
}

.compare .compare-card.highlight svg.ci {
    background: #000000 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.compare svg.ci *,
.compare svg.ci.neg * {
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
}

.compare .compare-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 980px) {
    .compare-grid {
        grid-template-columns: 1fr !important;
    }

    .compare .compare-card {
        min-height: auto !important;
        padding: 32px 28px !important;
    }
}

@media (max-width: 768px) {
    .compare {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .compare .compare-card h3 {
        font-size: 26px !important;
    }

    .compare-list li {
        min-height: 74px !important;
        grid-template-columns: 46px 1fr !important;
        gap: 14px !important;
        font-size: 15px !important;
    }

    .compare svg.ci,
    .compare svg.ci.neg {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 9px !important;
    }
}

@media (max-width: 1100px) {
    .nav-links {
        display: none !important;
    }

    .nav-right-mobile {
        display: flex !important;
    }

    .burger-btn {
        display: flex !important;
    }
}

@media (max-width: 980px) {
    nav {
        padding: 0 24px !important;
    }

    .hero,
    .section--hero,
    .blog-hero,
    .wp-hero {
        min-height: auto !important;
        padding: 128px 24px 82px !important;
    }

    .hero h1,
    .section--hero h1,
    .blog-hero h1,
    .wp-hero h1 {
        font-size: 64px !important;
    }

    .role-block h3,
    .section h2,
    .section-headline,
    .cta-section h2,
    .quote-section blockquote {
        font-size: 36px !important;
    }

    .roles-section {
        grid-template-columns: minmax(0, 680px) !important;
        padding: 76px 24px !important;
    }
}

@media (max-width: 768px) {
    body::before {
        background-size: 24px 24px, 100% 100%;
    }

    .hero,
    .section--hero,
    .blog-hero,
    .wp-hero {
        min-height: auto !important;
        padding: 104px 20px 64px !important;
    }

    .hero::after,
    .section--hero::after,
    .blog-hero::after,
    .wp-hero::after {
        opacity: 0.18 !important;
        background-size: 390px 165px, 390px 165px, 100% 100% !important;
    }

    .hero::before,
    .section--hero::before,
    .blog-hero::before,
    .wp-hero::before {
        opacity: 0.14 !important;
    }

    .hero-inner::before,
    .section--hero .hero-inner::before {
        top: -86px !important;
        height: 72px !important;
        opacity: 0.28 !important;
        background-size: 735px 72px !important;
    }

    .hero-inner::after,
    .section--hero .hero-inner::after {
        bottom: -92px !important;
        height: 72px !important;
        opacity: 0.22 !important;
        background-size: 735px 72px !important;
    }

    .hero h1,
    .section--hero h1,
    .blog-hero h1,
    .wp-hero h1 {
        font-size: 44px !important;
        line-height: 1.08 !important;
    }

    .hero-sub,
    .blog-hero-sub {
        font-size: 16px !important;
        line-height: 1.58 !important;
        margin-bottom: 28px !important;
    }

    .human-voice-strip {
        width: 100% !important;
        max-width: 336px !important;
        margin-top: 20px !important;
        margin-bottom: 24px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .human-voice-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;
        padding-right: 11px !important;
    }

    .human-voice-card:nth-child(3) {
        display: none !important;
    }

    .human-voice-copy small {
        max-width: 205px !important;
        white-space: normal !important;
    }

    .hero-ctas {
        width: 100% !important;
        max-width: 336px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero-ctas .btn-primary,
    .hero-ctas .btn-secondary,
    .hero-ctas .btn-link {
        width: 100% !important;
        max-width: 336px !important;
    }

    .hero-ctas .btn-link {
        border: 1px solid var(--okp-btn-secondary-border) !important;
        background: #ffffff !important;
    }

    section,
    .section,
    .role-block,
    .quote-section,
    .cta-section,
    .trust-signals {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .ev-section {
        padding: 18px 20px 64px !important;
    }

    .roles-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 64px 20px !important;
    }

    .roles-section .role-block {
        min-height: auto !important;
        padding: 28px !important;
    }

    .roles-section .role-block h3 {
        font-size: 28px !important;
        margin-top: 16px !important;
    }

    .roles-section .role-block p,
    .roles-section .feature-list li {
        font-size: 15px !important;
    }

    .role-block h3,
    .section h2,
    .section-headline,
    .cta-section h2,
    .quote-section blockquote,
    .legal-page h1,
    .sp-name,
    .header h1,
    .share-card h1 {
        font-size: 30px !important;
    }

    .btn-primary,
    .btn-secondary,
    .cta-btn,
    .wp-cta-btn {
        width: 100% !important;
        max-width: 340px !important;
    }

    .trust-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .sp-header,
    .item,
    .sp-track {
        align-items: flex-start !important;
    }

    .cookie-banner {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        transform: none !important;
        padding: 14px !important;
    }

    .cookie-content {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* Silicon Valley startup polish: light, precise, monochrome. */
:root,
html.dark-mode,
body.dark-mode,
[data-theme="dark"] {
    --okp-bg: #ffffff;
    --okp-bg-hero: #ffffff;
    --okp-bg-section-alt: #fbfbf8;
    --okp-surface: #ffffff;
    --okp-surface-2: #fbfbf8;
    --okp-panel: #ffffff;
    --okp-text-primary: #050505;
    --okp-text-secondary: #191919;
    --okp-text-muted: #333333;
    --okp-text-faint: #5c5c5c;
    --okp-border-color: #deded8;
    --okp-line: #e9e9e4;
    --okp-shadow-md: 0 24px 80px rgba(0, 0, 0, 0.055);
    --okp-shadow-lg: 0 34px 110px rgba(0, 0, 0, 0.075);
    --bg: #ffffff;
    --fg: #050505;
    --t1: #050505;
    --t2: #191919;
    --t3: #333333;
    --t4: #5c5c5c;
    --line: #e9e9e4;
    --surface: #ffffff;
    --border: #deded8;
}

body {
    background: #ffffff !important;
    color: #050505 !important;
    -webkit-font-smoothing: antialiased;
}

nav {
    height: 68px !important;
    padding: 0 56px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
}

.nav-logo span {
    color: #050505 !important;
    font-weight: 700 !important;
}

.nav-links a:not(.nav-btn-outline) {
    color: #1f1f1f !important;
    font-size: 15px !important;
}

.hero,
.section--hero,
.blog-hero,
.wp-hero {
    min-height: 760px !important;
    padding-top: 148px !important;
    padding-bottom: 112px !important;
}

.hero h1,
.section--hero h1,
.blog-hero h1,
.wp-hero h1 {
    max-width: 1120px !important;
    color: #050505 !important;
    font-size: clamp(56px, 7vw, 96px) !important;
    line-height: 1.02 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.hero-sub,
.blog-hero-sub,
.hero .lead,
.wp-hero .lead {
    max-width: 740px !important;
    color: #303030 !important;
    font-size: 19px !important;
    line-height: 1.62 !important;
}

section,
.section,
.quote-section,
.trust-signals,
.cta-section,
.roles-section,
.benefits,
.compare,
.google,
.steps,
.stats,
.proof,
.faq,
.inline-cta {
    padding-top: 104px !important;
    padding-bottom: 104px !important;
}

.section h2,
.section-headline,
.benefits h2,
.compare h2,
.google h2,
.steps h2,
.stats h2,
.proof h2,
.faq h2,
.cta-section h2,
.quote-section blockquote {
    color: #050505 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.section p,
.benefits > p,
.google p,
.cta-section p,
.faq-item p,
.proof-item .desc,
.inline-cta-box p,
.role-block > .container > p,
.roles-section .role-block p,
.roles-section .feature-list li {
    color: #303030 !important;
}

.card,
.glow-card,
.tilt-card,
.benefit-card,
.provider-card,
.wp-alt-card,
.wp-step,
.step-card,
.compare-card,
.faq-item,
.team-card,
.blog-card,
.article-card,
.item,
.sp-track,
.stat-card,
.inline-cta-box,
.segment-item,
.ba-card,
.roles-section .role-block,
.human-voice-card,
.voice-transform-visual,
.ev-wrap {
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbf8 100%) !important;
    color: #050505 !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.045) !important;
}

.benefit-card,
.provider-card,
.wp-alt-card,
.step-card,
.team-card,
.blog-card,
.article-card,
.stat-card,
.inline-cta-box,
.roles-section .role-block {
    padding: 34px !important;
}

.benefits-grid,
.stats-grid,
.trust-grid {
    gap: 18px !important;
}

.section-label,
.role-block-tag,
.blog-hero-badge,
.blog-card-badge,
.prov-plan-tag,
.scenario-label,
.label,
.tag,
.hero-badge,
.compare .compare-card .tag,
.voice-transform-words span {
    border-radius: 999px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    background: #ffffff !important;
    color: #050505 !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.035) !important;
    letter-spacing: 0 !important;
}

.btn-primary,
.nav-btn-outline,
.cta-btn,
.wp-cta-btn,
.cookie-btn,
.share-card a {
    min-height: 46px !important;
    background: #050505 !important;
    border-color: #050505 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12) !important;
}

.btn-secondary,
.btn-link,
.cookie-btn-ghost {
    min-height: 46px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #050505 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.035) !important;
}

.human-voice-card,
.voice-transform-visual {
    border-radius: 999px !important;
}

.human-voice-avatar,
.voice-face,
.voice-transform-speaker {
    border-color: rgba(0, 0, 0, 0.18) !important;
    background: #ffffff !important;
    color: #050505 !important;
}

.human-voice-wave i,
.voice-bars i,
.voice-transform-flow i,
.dot-accent,
.section-label::before,
.role-block-tag::before,
.blog-hero-badge::before {
    background: #050505 !important;
}

.roles-section {
    gap: 18px !important;
    background: #ffffff !important;
}

.roles-section .role-block h3 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
}

.compare-grid {
    gap: 18px !important;
}

.compare .compare-card {
    min-height: 660px !important;
    padding: 46px !important;
    border-radius: 8px !important;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.055) !important;
}

.compare .compare-card.highlight {
    background: #050505 !important;
    color: #ffffff !important;
    border-color: #050505 !important;
}

.compare .compare-card.highlight .tag {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: #ffffff !important;
    color: #050505 !important;
}

.compare .compare-card h3 {
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
}

.compare-list li {
    min-height: 80px !important;
    border-bottom-color: rgba(0, 0, 0, 0.10) !important;
    color: #111111 !important;
    font-size: 16px !important;
}

.compare .compare-card.highlight .compare-list li {
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

.compare svg.ci,
.compare svg.ci.neg {
    border-radius: 8px !important;
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: #050505 !important;
}

.compare .compare-card.highlight svg.ci {
    background: #050505 !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: #ffffff !important;
}

.ba-card {
    border-radius: 8px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.045) !important;
}

.ba-card.ba-after {
    border: 1px solid #050505 !important;
}

footer {
    background: #ffffff !important;
}

@media (max-width: 980px) {
    nav {
        padding: 0 24px !important;
    }

    .hero h1,
    .section--hero h1,
    .blog-hero h1,
    .wp-hero h1 {
        font-size: 58px !important;
    }

    .compare .compare-card {
        min-height: auto !important;
        padding: 34px !important;
    }
}

@media (max-width: 768px) {
    .hero,
    .section--hero,
    .blog-hero,
    .wp-hero {
        padding-top: 112px !important;
        padding-bottom: 68px !important;
    }

    .hero h1,
    .section--hero h1,
    .blog-hero h1,
    .wp-hero h1 {
        font-size: 44px !important;
        line-height: 1.06 !important;
    }

    .hero-sub,
    .blog-hero-sub,
    .hero .lead,
    .wp-hero .lead {
        font-size: 16px !important;
    }

    section,
    .section,
    .quote-section,
    .trust-signals,
    .cta-section,
    .roles-section,
    .benefits,
    .compare,
    .google,
    .steps,
    .stats,
    .proof,
    .faq,
    .inline-cta {
        padding-top: 68px !important;
        padding-bottom: 68px !important;
    }

    .benefit-card,
    .provider-card,
    .wp-alt-card,
    .step-card,
    .team-card,
    .blog-card,
    .article-card,
    .stat-card,
    .inline-cta-box,
    .roles-section .role-block,
    .compare .compare-card {
        padding: 28px !important;
    }

    .compare-list li {
        grid-template-columns: 44px 1fr !important;
        min-height: 72px !important;
        gap: 14px !important;
        font-size: 15px !important;
    }

    .compare svg.ci,
    .compare svg.ci.neg {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }
}

/* FAQ polish: compact, calm, readable accordion rows. */
.faq,
.faq-section {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.faq h2 {
    margin-bottom: 28px !important;
    text-align: left !important;
}

.faq-cat {
    margin: 44px 0 14px !important;
    color: #5c5c5c !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
}

.faq-item,
details.faq-item {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbf8 100%) !important;
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.035) !important;
    overflow: hidden !important;
}

details.faq-item summary,
.faq-item h3,
.faq-q {
    min-height: 74px !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    list-style: none !important;
    color: #050505 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.32 !important;
}

details.faq-item summary::-webkit-details-marker {
    display: none !important;
}

details.faq-item summary::after,
.faq-item h3::after,
.faq-q::after {
    content: "+" !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    background: #ffffff !important;
    color: #050505 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: none !important;
}

details[open].faq-item summary::after,
.faq-item.open h3::after,
.faq-q.open::after {
    content: "-" !important;
    background: #050505 !important;
    border-color: #050505 !important;
    color: #ffffff !important;
    transform: none !important;
}

details.faq-item p,
.faq-item.open p,
.faq-a.open {
    max-height: 420px !important;
    margin: 0 !important;
    padding: 0 24px 24px !important;
    color: #303030 !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    opacity: 1 !important;
}

.faq-item p,
.faq-a {
    margin: 0 !important;
    color: #303030 !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
}

.faq-a {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 24px !important;
}

.faq-a.open {
    padding-bottom: 24px !important;
}

details.faq-item[open],
.faq-item.open {
    border-color: rgba(0, 0, 0, 0.18) !important;
    background: #ffffff !important;
}

@media (max-width: 768px) {
    .faq,
    .faq-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    details.faq-item summary,
    .faq-item h3,
    .faq-q {
        min-height: 66px !important;
        padding: 18px 18px !important;
        gap: 16px !important;
        font-size: 16px !important;
    }

    details.faq-item summary::after,
    .faq-item h3::after,
    .faq-q::after {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    details.faq-item p,
    .faq-item.open p,
    .faq-a.open {
        padding: 0 18px 20px !important;
        font-size: 15px !important;
    }
}

/* Living voice motion: automatic, human, never hover-dependent. */
@keyframes okpSoulBreath {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 18px 58px rgba(0, 0, 0, 0.035);
    }
    50% {
        transform: translate3d(0, -3px, 0) scale(1.006);
        box-shadow: 0 30px 96px rgba(0, 0, 0, 0.070);
    }
}

@keyframes okpVoiceTalk {
    0%, 100% {
        transform: scaleY(0.34);
        opacity: 0.46;
    }
    22% {
        transform: scaleY(0.92);
        opacity: 0.92;
    }
    41% {
        transform: scaleY(0.58);
        opacity: 0.66;
    }
    66% {
        transform: scaleY(1.18);
        opacity: 1;
    }
}

@keyframes okpWordDance {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        border-color: rgba(0, 0, 0, 0.12);
    }
    34% {
        transform: translate3d(4px, -1px, 0);
        border-color: rgba(0, 0, 0, 0.32);
    }
    68% {
        transform: translate3d(-2px, 1px, 0);
        border-color: rgba(0, 0, 0, 0.20);
    }
}

@keyframes okpDotCelebrate {
    0%, 100% {
        transform: translate3d(-20px, 0, 0) scale(0.72);
        opacity: 0;
    }
    20%, 72% {
        opacity: 1;
    }
    48% {
        transform: translate3d(4px, -5px, 0) scale(1.08);
    }
    100% {
        transform: translate3d(28px, 0, 0) scale(0.82);
        opacity: 0;
    }
}

@keyframes okpInkPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
    }
    50% {
        opacity: 0.92;
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
    }
}

@keyframes okpTextAlive {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -2px, 0);
    }
}

.hero h1,
.section--hero h1,
.blog-hero h1,
.wp-hero h1 {
    animation:
        okpFadeUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both,
        okpTextAlive 7.4s ease-in-out 1.2s infinite !important;
}

.human-voice-card,
.voice-transform-visual,
.roles-section .role-block,
.benefit-card,
.provider-card,
.wp-alt-card,
.step-card,
.team-card,
.blog-card,
.article-card,
.stat-card,
.inline-cta-box,
.ba-card,
.compare .compare-card,
.faq-item,
details.faq-item {
    animation: okpSoulBreath 8.8s ease-in-out infinite !important;
    transform-origin: center !important;
    will-change: transform, box-shadow !important;
}

.human-voice-card:nth-child(2),
.roles-section .role-block:nth-child(2),
.benefit-card:nth-child(2),
.compare .compare-card:nth-child(2),
.faq-item:nth-child(2),
details.faq-item:nth-child(2) {
    animation-delay: -2.2s !important;
}

.human-voice-card:nth-child(3),
.roles-section .role-block:nth-child(3),
.benefit-card:nth-child(3),
.faq-item:nth-child(3),
details.faq-item:nth-child(3) {
    animation-delay: -4.4s !important;
}

.roles-section .role-block:nth-child(4),
.benefit-card:nth-child(4),
.faq-item:nth-child(4),
details.faq-item:nth-child(4) {
    animation-delay: -6.4s !important;
}

.btn-primary,
.nav-btn-outline,
.cta-btn,
.wp-cta-btn,
.cookie-btn {
    animation: okpInkPulse 4.8s ease-in-out infinite !important;
}

.human-voice-wave i,
.voice-bars i {
    animation: okpVoiceTalk 980ms cubic-bezier(0.45, 0, 0.2, 1) infinite !important;
}

.human-voice-wave i:nth-child(2),
.voice-bars i:nth-child(2) {
    animation-duration: 760ms !important;
    animation-delay: -0.21s !important;
}

.human-voice-wave i:nth-child(3),
.voice-bars i:nth-child(3) {
    animation-duration: 1120ms !important;
    animation-delay: -0.43s !important;
}

.human-voice-wave i:nth-child(4),
.voice-bars i:nth-child(4) {
    animation-duration: 840ms !important;
    animation-delay: -0.62s !important;
}

.human-voice-wave i:nth-child(5),
.voice-bars i:nth-child(5) {
    animation-duration: 1280ms !important;
    animation-delay: -0.84s !important;
}

.voice-bars i:nth-child(6) {
    animation-duration: 900ms !important;
    animation-delay: -1.04s !important;
}

.voice-transform-words span {
    animation: okpWordDance 3.9s ease-in-out infinite !important;
}

.voice-transform-words span:nth-child(2) {
    animation-delay: -1.2s !important;
}

.voice-transform-words span:nth-child(3) {
    animation-delay: -2.4s !important;
}

.voice-transform-flow i {
    animation: okpDotCelebrate 2.1s ease-in-out infinite !important;
}

.voice-transform-flow i:nth-child(2) {
    animation-delay: -0.38s !important;
}

.voice-transform-flow i:nth-child(3) {
    animation-delay: -0.76s !important;
}

.voice-transform-flow i:nth-child(4) {
    animation-delay: -1.14s !important;
}

.section-label::before,
.role-block-tag::before,
.blog-hero-badge::before,
.dot-accent {
    animation: okpVoiceTalk 1.9s ease-in-out infinite !important;
}

.ev-play-ring-dark,
.ev-play-ring {
    animation: okpSoulBreath 3.2s ease-in-out infinite !important;
}

/* Creative audit pass: keep the site alive without image gimmicks or hover-only behavior. */
.sit-card.sit-card-flip {
    perspective: none !important;
    min-height: 190px !important;
}

.sit-card-flip .flip-inner,
.sit-card-flip:hover .flip-inner,
.sit-card-flip.flipped .flip-inner {
    height: auto !important;
    min-height: 100% !important;
    transform: none !important;
    cursor: default !important;
}

.sit-card-flip .flip-front {
    position: relative !important;
    min-height: 100% !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

.sit-card-flip .flip-back {
    display: none !important;
}

.step-card-visual[style*="background:url"],
.step-card-visual[style*="background: url"],
.compare-img[style*="background-image"] {
    background: #fafafa !important;
}

.compare-img[style*="background-image"] {
    display: none !important;
}

.step-card-visual[style*="background:url"]::before,
.step-card-visual[style*="background: url"]::before {
    content: "";
    width: min(72%, 260px);
    height: 74px;
    display: block;
    background:
        linear-gradient(90deg, transparent 0 3%, #111 3% 5%, transparent 5% 9%, #111 9% 12%, transparent 12% 18%, #111 18% 22%, transparent 22% 28%, #111 28% 31%, transparent 31% 38%, #111 38% 43%, transparent 43% 51%, #111 51% 54%, transparent 54% 62%, #111 62% 67%, transparent 67% 76%, #111 76% 79%, transparent 79% 100%);
    border-radius: 8px;
    opacity: 0.94;
    animation: okpVoiceTalk 1.25s ease-in-out infinite !important;
}

.card:hover,
.blog-card:hover,
.feature-card:hover,
.benefit-card:hover,
.compare-card:hover,
.people-card:hover,
.sit-card:hover,
.team-card:hover,
.value-card:hover,
.platform-card:hover,
.step-card:hover,
.sp-hub-card:hover,
.net-card:hover,
.tgt-node:hover,
.role-block .role-cta:hover,
.btn-primary:hover,
.btn-secondary:hover,
.cta-btn:hover,
.wp-cta-btn:hover,
.nav-btn:hover,
.nav-btn-outline:hover {
    transform: none !important;
}

.contact-signal,
.blog-index-signal,
.speaker-proof {
    box-shadow: 0 16px 48px rgba(0,0,0,0.04) !important;
}

.cta-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 420px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    background:
        radial-gradient(circle at 50% 8%, rgba(0,0,0,0.035), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
}

.cta-section > h2,
.cta-section > p,
.cta-section > div {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cta-section > h2 {
    max-width: 920px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    color: #050505 !important;
    font-size: clamp(42px, 5.4vw, 76px) !important;
    line-height: 1.04 !important;
    font-weight: 520 !important;
}

.cta-section > p {
    max-width: 680px !important;
    margin-top: 0 !important;
    margin-bottom: 34px !important;
    color: #202020 !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
}

.cta-section > div {
    max-width: 680px !important;
}

.cta-section .btn-primary {
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.human-voice-strip,
.voice-transform-visual {
    display: none !important;
}

@media (max-width: 768px) {
    .human-voice-card,
    .voice-transform-visual,
    .roles-section .role-block,
    .benefit-card,
    .provider-card,
    .wp-alt-card,
    .step-card,
    .team-card,
    .blog-card,
    .article-card,
    .stat-card,
    .inline-cta-box,
    .ba-card,
    .compare .compare-card,
    .faq-item,
    details.faq-item {
        animation-duration: 10.5s !important;
    }

    .cta-section {
        min-height: 360px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .cta-section > h2 {
        max-width: 360px !important;
        font-size: 40px !important;
        line-height: 1.08 !important;
    }

    .cta-section > p {
        max-width: 340px !important;
        font-size: 17px !important;
        line-height: 1.55 !important;
    }
}

/* Hero baseline: keep public page titles aligned with /fuer-publisher. */
body .hero,
body .section--hero,
body .blog-hero,
body .wp-hero {
    min-height: 0 !important;
    padding: 120px 40px 80px !important;
    justify-content: flex-start !important;
}

@media (max-width: 768px) {
    body .hero,
    body .section--hero,
    body .blog-hero,
    body .wp-hero {
        padding: 100px 20px 60px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Header brand lock: black/white only, logo always visible. */
nav .nav-logo {
    gap: 10px !important;
    position: relative !important;
}

nav .nav-logo::before {
    content: "" !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    background: url("/img/logo-black.png") center center / contain no-repeat !important;
    opacity: 1 !important;
    filter: none !important;
}

nav .nav-logo img {
    display: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
}

nav .nav-logo span {
    color: #111 !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #111 !important;
}

nav .nav-links a:not(.nav-btn-outline):hover {
    color: #111 !important;
}

/* Publisher hero image lock. */
body .hero.hero-parallax {
    position: relative !important;
    overflow: hidden !important;
}

body .hero.hero-parallax::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: url("/img/publisher-hero.webp") center center / cover no-repeat !important;
    opacity: 0.18 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    filter: grayscale(1) !important;
    transform: translateY(var(--parallax-y, 0)) !important;
    will-change: transform !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.8) 65%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.1) 90%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.8) 65%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.1) 90%, transparent 100%) !important;
}

body .hero.hero-parallax > * {
    position: relative !important;
    z-index: 1 !important;
}