/* Neuron palette: cyan light, violet energy and charcoal surfaces. */
.oox-neuron-theme {
  --oox-indigo: #25b8ff;
  --oox-violet: #b04dff;
  --oox-emerald: #62e6cf;
  --oox-ink: #f2f4ff;
  background: #080a12;
  color: #f2f4ff;
}

.oox-neuron-theme :is(.ops-grad, .ops-banner) { background: linear-gradient(120deg, #1983cb, #8045db 70%, #a34ae5) !important; }
.oox-neuron-theme :is(h1, h2, h3, h4, h5, h6) { color: #f2f4ff; }
.oox-neuron-theme .ops-grad-text { color: transparent; background-image: linear-gradient(115deg, #52cbff, #b77bff 75%); }
.oox-neuron-theme .ops-banner { background: radial-gradient(ellipse at 25% 0%, #193d61, transparent 65%), radial-gradient(ellipse at 80% 30%, #38205d, transparent 70%), #0b0c17 !important; }
.oox-neuron-theme [class~="bg-white"],
.oox-neuron-theme [class~="bg-white/60"],
.oox-neuron-theme [class~="bg-[#F7F9FC]"],
.oox-neuron-theme [class~="bg-[#f8fafc]"],
.oox-neuron-theme [class~="bg-[#F5F3FF]"] { background-color: #111420 !important; }
.oox-neuron-theme [class~="text-black"],
.oox-neuron-theme [class~="lg:text-black"],
.oox-neuron-theme [class~="text-[#0f172a]"],
.oox-neuron-theme [class~="text-[#202124]"] { color: #f2f4ff !important; }
.oox-neuron-theme [class~="text-[#334155]"],
.oox-neuron-theme [class~="text-[#475569]"],
.oox-neuron-theme [class~="text-[#5F6168]"] { color: #acb6cd !important; }
.oox-neuron-theme [class~="text-[#64748b]"],
.oox-neuron-theme [class~="text-[#94a3b8]"] { color: #929fb9 !important; }
.oox-neuron-theme [class~="text-[#4f46e5]"],
.oox-neuron-theme [class~="lg:text-[#4f46e5]"],
.oox-neuron-theme [class~="text-[#6d28d9]"] { color: #7cceff !important; }
.oox-neuron-theme [class~="text-[#0f766e]"],
.oox-neuron-theme [class~="text-[#14b8a6]"] { color: #62e6cf !important; }
.oox-neuron-theme [class~="text-[#b45309]"] { color: #ffc475 !important; }
.oox-neuron-theme [class*="border-[#"],
.oox-neuron-theme [class~="border-white"] { border-color: #ffffff15 !important; }
.oox-neuron-theme [class*="ring-[#"] { --tw-ring-color: #ffffff15 !important; }
.oox-neuron-theme .oox-dark-band { background: radial-gradient(ellipse at 0 0, #142841, transparent 65%), radial-gradient(ellipse at 100% 100%, #28153b, transparent 65%), #060810; }
.oox-neuron-theme header > div { background: #080a12c9 !important; backdrop-filter: blur(20px); border-bottom: 1px solid #ffffff0a; }
.oox-neuron-theme .main-menu > nav > ul > li > a:hover { color: #6dcfff !important; }
.oox-neuron-theme .tp-btn-hover { box-shadow: none; }
.oox-neuron-theme .tp-btn-hover:hover { box-shadow: 0 8px 36px #974dff35; }
.oox-neuron-theme input,
.oox-neuron-theme textarea,
.oox-neuron-theme select { color: #f2f4ff; background-color: #0a0d17; border-color: #ffffff20; }
.oox-neuron-theme input::placeholder,
.oox-neuron-theme textarea::placeholder { color: #929fb9; }
.oox-neuron-theme footer { border-top: 1px solid #ffffff0c; }
.oox-neuron-theme footer a:hover { color: #71d2ff; }
.oox-neuron-theme main > section[style*="service-3-bg"] { background-image: radial-gradient(ellipse at 10% 0%, #144668, transparent 65%), radial-gradient(ellipse at 90% 100%, #492065, transparent 70%), linear-gradient(#111426, #101320) !important; }
.oox-neuron-theme .mock-flag { background: #181e30e6; border: 1px solid #ffffff12; }

.oox-neuron-hero { position: relative; isolation: isolate; overflow: hidden; padding: 158px 0 0; background: #060810; }
.oox-hero-aurora { pointer-events: none; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 87% 36%, #51157619 0, transparent 43%), radial-gradient(ellipse at 55% 20%, #0b60911a, transparent 55%); }
.oox-hero-layout { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 35px; }
.oox-hero-copy { position: relative; z-index: 2; padding-bottom: 35px; }
.oox-hero-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 9px; color: #a8c7dd; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-decoration: none; margin-bottom: 26px; }
.oox-hero-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #54e5cd; box-shadow: 0 0 14px #54e5cd80; }
.oox-hero-eyebrow > i { margin-left: 5px; color: #6bcaff; }
.oox-hero-copy h1 { color: #f8f9ff; font-family: "Onest", "Segoe UI", sans-serif; font-size: clamp(48px, 4.7vw, 72px); font-weight: 600; line-height: 1.075; letter-spacing: -.06em; margin: 0 0 26px; text-wrap: nowrap; }
.oox-neon-text { color: #9cc4ff; background: linear-gradient(105deg, #52ceff 0%, #85a4ff 50%, #c579ff 95%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.oox-hero-lead { max-width: 520px; font-size: 19px; line-height: 1.65; color: #c1c9db; margin-bottom: 18px; }
.oox-hero-detail { max-width: 510px; font-size: 14px; line-height: 1.85; color: #8e9bb5; margin-bottom: 30px; }
.oox-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.oox-hero-actions > a { font-size: 14px; height: 52px; line-height: 52px; padding: 0 25px; border-radius: 12px; }
.oox-hero-actions > a:nth-child(2) { background: #ffffff06 !important; border: 1px solid #ffffff24 !important; color: #dbe3f6 !important; }
.oox-hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: 11px; color: #94a3bc; }
.oox-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.oox-hero-trust i { color: #66cfca; font-size: 10px; }
.oox-hero-origin { margin-top: 32px; color: #a9b6ce; font-size: 12px; }
.oox-hero-origin span { color: #71cbff; }
.oox-sync-experience { position: relative; min-width: 0; width: 100%; }
.oox-sync-topline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: #8191af; font-size: 10px; letter-spacing: .02em; }
.oox-sync-topline > span:first-child { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .13em; color: #8ccae2; }
.oox-sync-topline i, .oox-workspace-caption i { display: inline-block; width: 5px; height: 5px; border-radius: 100%; background: #66e4c8; box-shadow: 0 0 12px #66e4c860; }
.oox-neuron-stage { position: relative; width: 100%; aspect-ratio: 1.25; margin-top: 16px; isolation: isolate; }
.oox-neuron-canvas { position: absolute; z-index: -1; width: 122%; height: 122%; left: -11%; top: -13%; pointer-events: none; mix-blend-mode: screen; mask-image: radial-gradient(ellipse at 50% 48%, #000 25%, #000b 48%, transparent 72%); opacity: .95; transition: opacity 1.2s ease; }
.oox-neuron-fallback { position: absolute; inset: 5% 6%; z-index: -2; opacity: .8; background: radial-gradient(circle at 50% 48%, #72d5ff65, transparent 7%), repeating-conic-gradient(from 18deg at 50% 48%, transparent 0deg 11deg, #a33aff14 12deg, transparent 13deg 19deg), radial-gradient(ellipse at 50% 48%, #8c31cf28, transparent 58%); mask-image: radial-gradient(ellipse, black 10%, transparent 70%); }
.oox-neuron-stage.is-webgl-ready .oox-neuron-fallback { opacity: .18; }
.oox-sync-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.oox-link-base { fill: none; stroke: #73caff26; stroke-width: 1; }
.oox-link-flow { fill: none; stroke: #90dfff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; filter: drop-shadow(0 0 4px #44caff); }
[data-connection].is-inbound .oox-link-flow { animation: oox-packet-in 1.15s ease-in-out both; }
[data-connection].is-outbound .oox-link-flow { stroke: #c48aff; filter: drop-shadow(0 0 4px #b04dff); animation: oox-packet-out .9s ease-in-out both; }
.oox-sync-hub { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 142px; height: 164px; padding: 14px 10px; border: 1px solid #7dd8ff50; background: linear-gradient(145deg, #101b2ee8, #141028f5); box-shadow: 0 0 70px #51b7ff27, 0 0 22px #a754ff20, inset 0 0 22px #5b83fd0a; border-radius: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.oox-sync-hub img { width: 30px; height: 30px; margin-bottom: 8px; border-radius: 8px; }
.oox-sync-hub > strong { font-size: 14px; letter-spacing: -.02em; color: #f2f7ff; }
.oox-sync-hub > span { margin-top: 3px; font-size: 6px; letter-spacing: .18em; color: #8ca3c6; }
.oox-hub-stock { display: flex; gap: 6px; align-items: baseline; margin-top: 7px; }
.oox-hub-stock b { color: #96ddff; font-size: 26px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.oox-hub-stock span { font-size: 9px; color: #9daac5; }
.oox-sync-hub small { margin-top: 6px; color: #6ee2c8; font-size: 8px; }
.oox-sync-hub.is-processing { border-color: #c58affb3; box-shadow: 0 0 90px #9a49ff40, 0 0 30px #40caff35; }
.oox-channel-node { position: absolute; left: var(--node-x); top: var(--node-y); transform: translate(-50%, -50%); width: 136px; padding: 11px 12px 9px; border: 1px solid #b8c9ff1c; border-radius: 13px; background: linear-gradient(145deg, #101622f0, #0c101bee); backdrop-filter: blur(12px); box-shadow: 0 8px 28px #0003; transition: border-color .5s, box-shadow .5s, background .5s; }
.oox-channel-title { display: flex; align-items: center; gap: 6px; }
.oox-channel-title strong { font-size: 10px; color: #dce4f5; font-weight: 500; white-space: nowrap; letter-spacing: -.015em; }
.oox-channel-mark { width: 21px; height: 23px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; }
.oox-mark-shopify { color: #a4cf5d; }
.oox-mark-amazon { color: #ffb254; }
.oox-mark-pos { color: #81caff; }
.oox-mark-takealot { color: #64c6ff; font-weight: 800; font-size: 23px; font-style: italic; }
.oox-mark-store { color: #cf9fff; }
.oox-mark-woocommerce { color: #d9a9ff; font-weight: 800; font-size: 9px; background: #7b49b338; border-radius: 5px; height: 17px; }
.oox-channel-led { width: 4px; height: 4px; background: #5ae0bd; border-radius: 50%; margin-left: auto; }
.oox-channel-stock { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0 4px; }
.oox-channel-stock span { font-size: 9px; color: #8b9ab7; }
.oox-channel-stock b { color: #edf3ff; font-size: 19px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oox-channel-state { display: flex; justify-content: space-between; align-items: center; font-size: 8px; color: #6fa89f; line-height: 1.5; }
.oox-channel-state i { font-size: 7px; }
.oox-channel-node.is-order { border-color: #69d3ff99; background: #102638f0; box-shadow: 0 0 32px #25b8ff26; }
.oox-channel-node.is-updating { border-color: #b04dff80; }
.oox-channel-node.is-updating .oox-channel-state { color: #c599f6; }
.oox-channel-node.is-synced { border-color: #62e6cf6b; box-shadow: 0 0 25px #62e6cf14; }
.oox-channel-node.is-synced [data-channel-stock] { animation: oox-stock-pop .6s ease; color: #8ee8d4; }
.oox-sync-event { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: 430px; width: 88%; min-height: 64px; padding: 11px 13px; margin: -4px auto 0; border: 1px solid #8fbbff25; border-radius: 13px; background: linear-gradient(120deg, #102033e6, #1a122be6); box-shadow: 0 8px 25px #0002; }
.oox-event-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 32px; border-radius: 9px; background: #51baff14; color: #8cd7ff; flex-shrink: 0; font-size: 16px; }
.oox-sync-event > div { min-width: 0; flex: 1; }
.oox-sync-event strong { display: block; color: #e1edff; font-size: 11px; font-weight: 500; line-height: 1.65; }
.oox-sync-event div > span { display: block; color: #8c9dbb; font-size: 9px; line-height: 1.65; }
.oox-event-tag { font-size: 7px; letter-spacing: .05em; padding: 5px 6px; border-radius: 5px; background: #62e6cf0c; color: #70d9c5; white-space: nowrap; }
.oox-sync-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 430px; width: 88%; margin: 12px auto 0; font-size: 9px; color: #718099; }
.oox-sync-controls button { display: inline-flex; align-items: center; gap: 5px; color: #a8b7cf; padding: 6px 9px; background: #ffffff06; border: 1px solid #ffffff12; border-radius: 6px; cursor: pointer; font: inherit; }
.oox-sync-controls button:hover { color: #bce8ff; border-color: #25b8ff60; }
.oox-sync-controls button:focus-visible, .oox-hero-eyebrow:focus-visible { outline: 2px solid #70cfff; outline-offset: 4px; }
.oox-sync-a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.oox-hero-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 37px; padding-bottom: 30px; margin-top: 45px; border-top: 1px solid #ffffff0c; }
.oox-hero-bottom > span { font-size: 8px; letter-spacing: .16em; color: #67758e; }
.oox-hero-bottom > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 25px; font-size: 11px; font-weight: 500; color: #8b99b2; }
.oox-hero-bottom > a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ffffff20; color: #a1b9d3; }
.oox-product-intro { background: radial-gradient(ellipse at 50% 100%, #211332, transparent 65%), #080a12; padding: 65px 0 100px; }
.oox-workspace-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; gap: 20px; }
.oox-workspace-caption > span { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .12em; color: #8eb9d8; }
.oox-workspace-caption p { font-size: 12px; color: #8594af; margin: 0; }
.oox-neuron-theme .oox-dashboard-preview { max-width: 1180px; margin: 0 auto; border: 1px solid #94b7ff25; background: #111725 !important; padding: 9px; box-shadow: 0 0 100px #814bff12; }
.oox-neuron-theme .oox-dashboard-preview img { clip-path: inset(0 round 12px); }
[data-sync-experience].is-paused *, [data-sync-experience].is-paused *::before, [data-sync-experience].is-paused *::after { animation-play-state: paused !important; }

@keyframes oox-packet-in { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 1; stroke-dasharray: 12 88; } 85% { opacity: 1; } 100% { stroke-dasharray: 12 88; stroke-dashoffset: -100; opacity: 0; } }
@keyframes oox-packet-out { 0% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } 12% { opacity: 1; stroke-dasharray: 12 88; } 85% { opacity: 1; } 100% { stroke-dasharray: 12 88; stroke-dashoffset: 0; opacity: 0; } }
@keyframes oox-stock-pop { 40% { transform: translateY(-3px); text-shadow: 0 0 14px #62e6cf80; } }

@media (min-width: 1600px) { .oox-hero-layout { max-width: 1540px; gap: 55px; } .oox-hero-copy h1 { font-size: 78px; } .oox-channel-node { width: 148px; padding: 13px; } }
@media (max-width: 1199px) and (min-width: 1024px) { .oox-hero-layout { gap: 18px; grid-template-columns: 1fr 1fr; } .oox-hero-copy h1 { font-size: 54px; } .oox-hero-lead { font-size: 17px; } .oox-channel-node { width: 113px; padding: 9px; } .oox-channel-title strong { font-size: 8px; } .oox-channel-mark { width: 17px; font-size: 15px; } .oox-sync-hub { width: 116px; height: 147px; padding: 12px 8px; } .oox-sync-hub img { width: 25px; height: 25px; } .oox-hero-actions > a { padding: 0 17px; font-size: 12px; } }
@media (max-width: 1023px) { .oox-neuron-hero { padding-top: 125px; } .oox-hero-layout { grid-template-columns: 1fr; gap: 25px; max-width: 800px; } .oox-hero-copy { text-align: center; padding-bottom: 0; } .oox-hero-copy h1 { font-size: clamp(48px, 7.4vw, 68px); } .oox-hero-lead, .oox-hero-detail { margin-left: auto; margin-right: auto; } .oox-hero-actions, .oox-hero-trust { justify-content: center; } .oox-hero-origin { margin-top: 24px; } .oox-sync-experience { max-width: 650px; margin: 8px auto 0; } .oox-hero-bottom { margin-top: 35px; justify-content: center; } .oox-hero-bottom > span { width: 100%; text-align: center; } .oox-product-intro { padding: 45px 0 70px; } }
@media (max-width: 599px) { .oox-neuron-hero { padding-top: 111px; } .oox-hero-layout { gap: 31px; } .oox-hero-eyebrow { font-size: 8px; letter-spacing: .08em; gap: 6px; margin-bottom: 21px; } .oox-hero-copy h1 { font-size: clamp(38px, 10.2vw, 57px); letter-spacing: -.055em; margin-bottom: 20px; } .oox-hero-lead { font-size: 16px; line-height: 1.65; max-width: 375px; margin-bottom: 15px; } .oox-hero-detail { font-size: 12px; line-height: 1.8; max-width: 365px; margin-bottom: 23px; } .oox-hero-actions { gap: 9px; } .oox-hero-actions > a { padding: 0 18px; font-size: 12px; height: 48px; line-height: 48px; } .oox-hero-trust { gap: 12px; font-size: 9px; margin-top: 19px; } .oox-hero-trust i { font-size: 8px; } .oox-hero-origin { font-size: 10px; } .oox-sync-topline { padding: 0 4px; font-size: 8px; } .oox-sync-topline > span:first-child { letter-spacing: .07em; } .oox-neuron-stage { aspect-ratio: 1.06; margin-top: 14px; } .oox-neuron-canvas { width: 118%; height: 118%; left: -9%; top: -11%; } .oox-channel-node { width: 105px; padding: 8px; border-radius: 10px; } .oox-channel-title { gap: 3px; } .oox-channel-title strong { font-size: 8px; } .oox-channel-mark { width: 17px; height: 18px; font-size: 14px; } .oox-mark-takealot { font-size: 20px; } .oox-mark-woocommerce { font-size: 7px; height: 14px; } .oox-channel-stock { padding: 7px 0 3px; } .oox-channel-stock span { font-size: 8px; } .oox-channel-stock b { font-size: 17px; } .oox-channel-state { font-size: 7px; } .oox-sync-hub { width: 104px; height: 133px; border-radius: 16px; padding: 10px 6px; } .oox-sync-hub img { width: 24px; height: 24px; margin-bottom: 6px; } .oox-sync-hub > strong { font-size: 11px; } .oox-sync-hub > span { font-size: 5px; } .oox-hub-stock { margin-top: 6px; } .oox-hub-stock b { font-size: 22px; } .oox-hub-stock span, .oox-sync-hub small { font-size: 7px; } .oox-sync-event, .oox-sync-controls { width: 98%; } .oox-sync-event { min-height: 62px; padding: 9px 10px; margin-top: 0; gap: 8px; } .oox-sync-event strong { font-size: 10px; } .oox-sync-event div > span { font-size: 8px; } .oox-event-tag { font-size: 6px; padding: 5px; } .oox-sync-controls { font-size: 8px; } .oox-hero-bottom { padding-top: 27px; padding-bottom: 26px; gap: 18px; } .oox-hero-bottom > div { gap: 13px 20px; font-size: 10px; } .oox-hero-bottom > a { display: none; } .oox-workspace-caption { flex-direction: column; text-align: center; gap: 9px; margin-bottom: 20px; } .oox-workspace-caption p { font-size: 10px; } }
@media (max-width: 359px) { .oox-channel-node { width: 91px; padding: 7px; } .oox-channel-title strong { font-size: 7px; } .oox-channel-mark { width: 14px; font-size: 12px; } .oox-hero-actions > a { padding: 0 12px; font-size: 11px; } .oox-hero-trust { gap: 8px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .oox-neuron-canvas { transition: none; } .oox-link-flow { animation: none !important; } }

/* The same right-hand hero card is shared by every inner page. */
.oox-inner-hero { position: relative; isolation: isolate; overflow: hidden; padding: 145px 0 80px; background: #060810; border-bottom: 1px solid #ffffff09; }
.oox-inner-hero.oox-inner-overlap { padding-bottom: 245px; }
.oox-inner-copy { max-width: 590px; padding-bottom: 18px; }
.oox-inner-eyebrow { display: inline-block; max-width: 100%; padding: 8px 12px; margin-bottom: 25px; border: 1px solid #70cfff25; background: #25b8ff08; border-radius: 8px; color: #86d5ff; font-size: 10px; line-height: 1.6; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.oox-inner-copy h1 { font-family: "Onest", "Segoe UI", sans-serif; font-size: clamp(42px, 4.2vw, 62px); font-weight: 600; letter-spacing: -.05em; line-height: 1.12; margin-bottom: 25px; }
.oox-inner-copy h1 > span { color: #aab7ff; }
.oox-inner-lead { max-width: 540px; color: #acbad2; font-size: 17px; line-height: 1.8; margin-bottom: 0; }
.oox-sync-card { padding: 22px 20px 18px; border: 1px solid #9ab9ff20; border-radius: 24px; background: radial-gradient(ellipse at 95% 0, #51157616, transparent 60%), linear-gradient(145deg, #0b111c, #0a0c16); box-shadow: 0 24px 85px #0002; overflow: hidden; }
.oox-sync-card .oox-sync-topline { padding: 0 2px; }
.oox-channel-node.is-featured { border-color: #8eb4ff80; box-shadow: 0 0 26px #8267ff1b; }
.oox-channel-node.is-featured .oox-channel-title strong { color: #b8dcff; }
.oox-sync-workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 460px; margin: 16px auto 0; padding: 0; list-style: none; }
.oox-sync-workflow li { display: flex; align-items: flex-start; gap: 6px; font-size: 8px; line-height: 1.5; color: #8192af; transition: color .3s; }
.oox-sync-workflow b { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #ffffff20; border-radius: 50%; font-size: 7px; font-weight: 500; transition: border-color .3s, background .3s; }
.oox-sync-workflow span { padding-top: 2px; }
.oox-sync-workflow li.is-active { color: #a3dfff; }
.oox-sync-workflow li.is-active b { border-color: #64cfff88; background: #25b8ff18; }
.oox-sync-workflow li.is-complete { color: #85c5b9; }
.oox-sync-workflow li.is-complete b { border-color: #62e6cf66; background: #62e6cf10; }
.oox-sync-profile-note { color: #7d8ba7; font-size: 9px; line-height: 1.6; text-align: center; margin: 14px 0 0; }
.oox-auth-visual { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 40px; min-width: 0; background: radial-gradient(ellipse at 90% 30%, #22123980, transparent 70%), #080c15; }
.oox-auth-visual .oox-sync-card { max-width: 690px; }
.oox-auth-visual > p { max-width: 420px; margin-top: 25px; font-size: 17px; line-height: 1.7; color: #a9b9d0; text-align: center; }
.oox-neuron-theme [class~="bg-white/95"] { background-color: #101420f2 !important; }
.oox-integration-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.oox-integration-jump a { color: #afc0dc; font-size: 12px; padding: 10px 15px; border: 1px solid #ffffff1b; border-radius: 999px; background: #111523; transition: border-color .3s, color .3s; }
.oox-integration-jump a:hover, .oox-integration-jump a[aria-current="page"] { color: #91d9ff; border-color: #6dcaff70; background: #122438; }
@media (max-width: 359px) { .oox-sync-card .oox-channel-node { width: 84px; padding: 6px; } .oox-sync-card .oox-channel-title strong { font-size: 6.5px; } .oox-sync-card .oox-channel-mark { width: 12px; font-size: 11px; } }
@media (max-width: 1199px) and (min-width: 1024px) { .oox-inner-copy h1 { font-size: 48px; } .oox-inner-lead { font-size: 15px; } .oox-sync-card { padding: 18px 13px 16px; } .oox-sync-topline { font-size: 8px; } .oox-sync-workflow { gap: 5px; } .oox-sync-workflow li { font-size: 7px; } }
@media (max-width: 1023px) { .oox-inner-hero { padding: 120px 0 65px; } .oox-inner-hero.oox-inner-overlap { padding-bottom: 235px; } .oox-inner-copy { max-width: 680px; text-align: center; margin: 0 auto; padding-bottom: 0; } .oox-inner-copy h1 { font-size: 52px; } .oox-inner-lead { margin-left: auto; margin-right: auto; } .oox-inner-eyebrow { margin-bottom: 20px; } .oox-auth-visual { padding: 45px 30px; } }
@media (max-width: 599px) { .oox-inner-hero { padding-top: 110px; padding-bottom: 50px; } .oox-inner-hero.oox-inner-overlap { padding-bottom: 225px; } .oox-inner-copy h1 { font-size: 37px; line-height: 1.15; margin-bottom: 19px; } .oox-inner-lead { font-size: 14px; line-height: 1.8; } .oox-inner-eyebrow { font-size: 8px; padding: 7px 10px; letter-spacing: .09em; margin-bottom: 18px; } .oox-sync-card { padding: 17px 12px 14px; border-radius: 19px; } .oox-sync-card .oox-sync-topline { font-size: 7px; } .oox-sync-card .oox-sync-topline > span:first-child { max-width: 67%; font-size: 7px; line-height: 1.6; } .oox-sync-card .oox-sync-topline > span:last-child { flex-shrink: 0; } .oox-sync-card .oox-sync-event { padding: 9px 8px; gap: 6px; } .oox-sync-card .oox-sync-event strong { font-size: 9px; } .oox-sync-card .oox-sync-event div > span { font-size: 7px; } .oox-sync-workflow { gap: 5px; } .oox-sync-workflow li { font-size: 7px; gap: 4px; } .oox-sync-workflow b { width: 14px; height: 14px; font-size: 6px; } .oox-sync-profile-note { font-size: 8px; } .oox-auth-visual { padding: 32px 16px; } .oox-auth-visual > p { font-size: 14px; } .oox-integration-jump { gap: 8px; } .oox-integration-jump a { font-size: 11px; padding: 9px 12px; } }

/* Integration navigation works with hover, keyboard and the mobile drawer. */
.oox-nav-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 7px; border: 0; background: transparent; color: #e0e6f4; font: 500 15px/24px "Onest", sans-serif; padding: 30px 0; cursor: pointer; }
.oox-nav-trigger > i { font-size: 9px; color: #8a9ab7; transition: transform .25s; }
.oox-nav-trigger.is-current, .oox-nav-trigger:hover, .oox-integration-nav.is-open > .oox-nav-trigger { color: #7cd2ff; }
.oox-integration-nav.is-open > .oox-nav-trigger > i { transform: rotate(180deg); }
.oox-nav-trigger:focus-visible, .oox-integration-menu a:focus-visible { outline: 2px solid #7bd6ff; outline-offset: 4px; }
.oox-integration-menu { position: absolute; top: calc(100% - 4px); left: -24px; z-index: 100; width: 370px; padding: 17px 12px 10px; border: 1px solid #b6cbff28; border-radius: 17px; background: #101522fa; backdrop-filter: blur(22px); box-shadow: 0 25px 75px #0009, 0 0 35px #5742ff0c; }
.oox-integration-menu[hidden] { display: none !important; }
.oox-nav-menu-heading { display: block; color: #7c96b8; font-size: 8px; letter-spacing: .14em; padding: 0 12px 12px; }
.oox-neuron-theme .oox-integration-menu a.oox-integration-menu-link { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 10px; line-height: 1.5; color: #e7edf9; transition: background .2s, border-color .2s; }
.oox-integration-menu-link:hover { background: #25b8ff0b; border-color: #25b8ff20 !important; }
.oox-integration-menu-link::after { display: none !important; }
.oox-integration-menu-link > span:nth-child(2) { flex: 1; min-width: 0; }
.oox-integration-menu-link strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.oox-integration-menu-link small { display: block; font-size: 10px; color: #90a0bc; font-weight: 400; white-space: normal; }
.oox-integration-menu-link > i { color: #7591b3; font-size: 10px; }
.oox-nav-channel-icon { flex-shrink: 0; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: #ffffff05; border: 1px solid #ffffff0b; font-size: 20px; }
.oox-neuron-theme .oox-integration-menu a.oox-nav-all-integrations { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px; margin-top: 6px; border-top: 1px solid #ffffff10; color: #89d7ff; font-size: 11px; font-weight: 500; line-height: 1.5; }
.oox-nav-all-integrations > i { font-size: 10px; }
@media (min-width: 1024px) and (max-width: 1199px) { .main-menu > nav > ul > li { margin-left: 7px !important; margin-right: 7px !important; } .oox-integration-menu { left: -80px; } }
@media (max-width: 1023px) { .oox-nav-trigger { width: 100%; padding: 15px 0; color: #e0e6f4; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #ffffff1a; } .oox-nav-trigger > i { font-size: 11px; } .tp-offcanvas-menu .oox-integration-menu { position: static; width: 100%; margin: 10px 0 13px; padding: 12px 7px 8px; border-radius: 12px; background: #111827; box-shadow: none; } .tp-offcanvas-menu .oox-integration-menu a.oox-integration-menu-link { padding: 10px 7px; gap: 8px; border-bottom: none; } .tp-offcanvas-menu .oox-integration-menu a.oox-integration-menu-link strong { font-size: 12px; } .tp-offcanvas-menu .oox-integration-menu a.oox-integration-menu-link small { font-size: 9px; line-height: 1.6; } .tp-offcanvas-menu .oox-nav-channel-icon { width: 28px; height: 31px; font-size: 17px; border-radius: 8px; } .tp-offcanvas-menu .oox-nav-menu-heading { padding-left: 8px; font-size: 7px; } .tp-offcanvas-menu .oox-integration-menu a.oox-nav-all-integrations { font-size: 10px; padding: 12px 7px 6px; } }

/* Channel-specific, selectable workflow previews. */
.oox-has-workbench { position: relative; isolation: isolate; }
.oox-has-workbench > :not(.oox-neuron-stage) { position: relative; z-index: 2; }
.oox-has-workbench .oox-neuron-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; aspect-ratio: auto !important; margin: 15px 0 !important; overflow: visible; padding: 0; }
.oox-has-workbench .oox-channel-node { position: relative; inset: auto; transform: none; width: auto; min-width: 0; z-index: 2; padding: 10px; border-radius: 10px; background: #0c1422e8; }
.oox-has-workbench .oox-channel-title { gap: 5px; }
.oox-has-workbench .oox-channel-title strong { font-size: 10px; white-space: normal; }
.oox-has-workbench .oox-channel-stock { padding-top: 5px; }
.oox-has-workbench .oox-channel-stock b { font-size: 19px; }
.oox-has-workbench .oox-channel-stock span { font-size: 8px; }
.oox-has-workbench .oox-channel-state { font-size: 7px; overflow-wrap: anywhere; }
.oox-has-workbench .oox-sync-hub, .oox-has-workbench .oox-sync-links { visibility: hidden; pointer-events: none; }
.oox-has-workbench .oox-neuron-canvas { z-index: -1; opacity: .3; top: -165%; height: 340%; left: -10%; width: 120%; pointer-events: none; }
.oox-has-workbench .oox-neuron-fallback { opacity: .2; }
.oox-has-workbench .oox-operation-panel { max-width: none; width: 100%; margin-bottom: 12px; }
.oox-has-workbench .oox-operation-panel, .oox-has-workbench .oox-sync-workflow { display: none; }
.oox-has-workbench [data-workflow-visual]:focus-visible { outline: 2px solid #78ceff; outline-offset: 4px; border-radius: 18px; }
.oox-inner-hero:has(.oox-has-workbench) .oox-hero-layout { align-items: start; }
.oox-inner-hero:has(.oox-has-workbench) .oox-inner-copy { padding-top: 80px; }
.oox-has-workbench .oox-sync-event, .oox-has-workbench .oox-sync-controls { max-width: none; width: 100%; }
.oox-has-workbench .oox-sync-event strong { font-size: 12px; }
.oox-has-workbench .oox-sync-event div > span { font-size: 10px; }
.oox-has-workbench .oox-sync-profile-note { font-size: 10px; line-height: 1.7; }
.oox-has-workbench .oox-sync-controls { font-size: 10px; }
@media (max-width: 1023px) {
  .oox-inner-hero:has(.oox-has-workbench) .oox-inner-copy { padding-top: 0; }
}
.oox-workflow-variants { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 14px; }
.oox-workflow-variants[hidden] { display: none; }
.oox-workflow-variants button { color: #94a8c6; font: 500 9px/1.5 "Onest", sans-serif; border: 1px solid #ffffff13; background: #ffffff03; padding: 6px 8px; border-radius: 20px; cursor: pointer; }
.oox-workflow-variants button[aria-pressed="true"] { color: #d7c1ff; background: #b04dff12; border-color: #b04dff60; }
.oox-workflow-variants button:focus-visible { outline: 2px solid #85d8ff; outline-offset: 3px; }
.oox-channel-node.is-retry { border-color: #eab57388; }
@media (min-width: 1024px) and (max-width: 1399px) {
  .oox-neuron-theme .main-menu > nav > ul > li { margin-left: 7px !important; margin-right: 7px !important; }
  .oox-neuron-theme .main-menu > nav > ul > li > a, .oox-nav-trigger { font-size: 13px; }
  header .ops-wrap > div > div:first-child > a { margin-right: 17px; }
  header .ops-wrap > div > div:last-child > a { font-size: 13px; }
  header .ops-wrap > div > div:last-child > div { margin-left: 14px; }
}
@media (max-width: 599px) {
  .oox-has-workbench .oox-neuron-stage { gap: 6px; }
  .oox-has-workbench .oox-channel-node { padding: 8px 6px; width: auto; }
  .oox-has-workbench .oox-channel-title strong { font-size: 8px; }
  .oox-has-workbench .oox-channel-mark { width: 14px; font-size: 13px; }
  .oox-has-workbench .oox-mark-woocommerce { font-size: 6px; }
  .oox-has-workbench .oox-channel-stock b { font-size: 17px; }
  .oox-has-workbench .oox-channel-stock span { font-size: 7px; }
  .oox-workflow-variants button { font-size: 8px; padding: 6px 7px; }
}
.oox-workflow-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 7px; }
.oox-workflow-tabs button { appearance: none; border: 1px solid #ffffff17; border-radius: 7px; background: #ffffff03; color: #94a6c4; font: 500 10px/1.4 "Onest", sans-serif; padding: 8px 10px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.oox-workflow-tabs button[aria-selected="true"] { background: #25b8ff10; border-color: #6ecaff66; color: #9ee1ff; }
.oox-workflow-tabs button:hover { color: #d9efff; border-color: #80d5ff66; }
.oox-workflow-tabs button:focus-visible, .oox-operation-panel:focus-visible { outline: 2px solid #78ceff; outline-offset: 3px; }
.oox-sync-card:has([data-workflow-tab]) .oox-neuron-stage { aspect-ratio: 1.5; margin-top: 0; }
.oox-operation-panel { width: 92%; max-width: 480px; margin: 0 auto 14px; padding: 12px 14px; border: 1px solid #9e85ff25; border-radius: 11px; background: linear-gradient(125deg, #101c2be8, #171329e8); }
.oox-operation-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.oox-operation-title > strong { color: #c9d9f0; font-size: 10px; font-weight: 500; }
.oox-operation-title > span { color: #78dcca; font-size: 6px; letter-spacing: .1em; background: #62e6cf0d; padding: 4px 6px; border-radius: 4px; }
.oox-operation-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.oox-operation-metrics > div { min-width: 0; border-left: 1px solid #ffffff13; padding-left: 12px; }
.oox-operation-metrics > div:first-child { border: 0; padding-left: 0; }
.oox-operation-metrics span { display: block; color: #7d91b0; font-size: 8px; line-height: 1.6; }
.oox-operation-metrics strong { display: block; color: #c3e8ff; font-size: 12px; font-weight: 500; line-height: 1.8; overflow-wrap: anywhere; }
[data-workflow-kind="price"] .oox-hub-stock b, [data-workflow-kind="fees"] .oox-hub-stock b { font-size: 22px; }
[data-workflow-kind="price"] .oox-hub-stock, [data-workflow-kind="fees"] .oox-hub-stock { gap: 4px; }
@media (max-width: 1199px) and (min-width: 1024px) { .oox-workflow-tabs { gap: 5px; } .oox-workflow-tabs button { font-size: 8px; padding: 7px; } .oox-operation-metrics strong { font-size: 10px; } [data-workflow-kind="price"] .oox-hub-stock b, [data-workflow-kind="fees"] .oox-hub-stock b { font-size: 18px; } }
@media (max-width: 599px) { .oox-workflow-tabs { gap: 5px; margin-top: 15px; } .oox-workflow-tabs button { font-size: 8px; padding: 7px 8px; } .oox-sync-card:has([data-workflow-tab]) .oox-neuron-stage { aspect-ratio: 1.12; } .oox-operation-panel { width: 98%; padding: 10px; margin-bottom: 12px; } .oox-operation-title > strong { font-size: 9px; } .oox-operation-metrics { gap: 6px; } .oox-operation-metrics > div { padding-left: 7px; } .oox-operation-metrics span { font-size: 7px; } .oox-operation-metrics strong { font-size: 10px; } [data-workflow-kind="price"] .oox-hub-stock b, [data-workflow-kind="fees"] .oox-hub-stock b { font-size: 18px; } }