/*
  ZX Studios full visual refresh.
  Premium black / white interface with #01B1C8 as the single major accent.
*/

:root,
html[data-theme],
html[data-theme="cyan"] {
  --bg: #020304;
  --surface: #070909;
  --surface-2: #0c1011;
  --surface-3: #121718;
  --panel: rgba(7, 10, 10, .92);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #ffffff;
  --muted: #98a4a8;
  --muted-2: #687579;
  --accent: #01B1C8;
  --accent-2: #01B1C8;
  --accent-rgb: 1, 177, 200;
  --accent-2-rgb: 1, 177, 200;
  --good: #01B1C8;
  --warning: #ffffff;
  --danger: #e8848d;
  --max: 1320px;
  --radius: 8px;
  --shadow: 0 34px 100px rgba(0, 0, 0, .55);
  --ease-premium: cubic-bezier(.16, .84, .24, 1);
}

* {
  box-sizing: border-box;
  scrollbar-color: rgba(1, 177, 200, .45) rgba(255, 255, 255, .04);
}

*::selection {
  background: rgba(1, 177, 200, .34);
  color: #fff;
}

html {
  background: #020304;
}

body {
  min-height: 100vh;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(1, 177, 200, .065), transparent 280px),
    linear-gradient(115deg, rgba(255, 255, 255, .034), transparent 20%, transparent 76%, rgba(1, 177, 200, .05)),
    #020304 !important;
  letter-spacing: 0;
  overflow-x: hidden;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .62;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(140deg, transparent 0 42%, rgba(1, 177, 200, .05) 42% 42.18%, transparent 42.18% 100%);
  background-size: 112px 112px, 112px 112px, 100% 100%;
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .58) 48%, transparent 92%);
}

body:after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255, 255, 255, .05) 3px 4px);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container,
.docs-library-shell,
.docs-layout {
  width: min(calc(100% - 48px), var(--max)) !important;
  margin-left: auto;
  margin-right: auto;
}

.hidden {
  display: none !important;
}

/* Loading and feedback */
.zx-site-loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  background: #020304;
  color: #fff;
  transition: opacity .55s var(--ease-premium), visibility .55s var(--ease-premium);
}

.zx-site-loader:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: .32;
}

.zx-loader-ambient {
  display: none !important;
}

.zx-loader-core {
  position: relative;
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(5, 8, 9, .78);
  box-shadow: 0 0 80px rgba(1, 177, 200, .14);
}

.zx-loader-rings {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}

.zx-loader-rings span {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(1, 177, 200, .28);
  animation: zxPulse 1.4s ease-in-out infinite;
}

.zx-loader-rings span:nth-child(2) {
  width: 68%;
  height: 68%;
  animation-delay: .12s;
}

.zx-loader-rings span:nth-child(3) {
  width: 42%;
  height: 42%;
  background: #01B1C8;
  border-color: #01B1C8;
  box-shadow: 0 0 34px rgba(1, 177, 200, .36);
}

.zx-loader-logo {
  position: absolute;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #001114;
  background: #01B1C8;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 950;
}

.zx-loader-copy {
  display: grid;
  gap: 5px;
  text-align: center;
}

.zx-loader-copy strong {
  font-size: 12px;
  letter-spacing: .18em;
}

.zx-loader-copy small {
  color: #7f8a8f;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zx-site-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
}

@keyframes zxPulse {
  0%, 100% {
    transform: scale(.86);
    opacity: .5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

.loader {
  width: 28px;
  height: 28px;
  margin: 30px auto;
  border: 2px solid rgba(255, 255, 255, .08) !important;
  border-top-color: #01B1C8 !important;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

.toast-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 12000;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 40px));
}

.toast,
.toast.success,
.toast.error {
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-left: 2px solid #01B1C8 !important;
  border-radius: 8px !important;
  background: rgba(5, 8, 9, .94) !important;
  color: #fff !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .52) !important;
  backdrop-filter: blur(18px);
}

/* Navigation */
#site-header {
  position: relative !important;
  z-index: 10000 !important;
  isolation: isolate;
  overflow: visible !important;
}

.nav-wrap {
  position: sticky !important;
  top: 0;
  z-index: 10001 !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  background: rgba(2, 3, 4, .88) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.nav-wrap.nav-scrolled {
  background: rgba(2, 3, 4, .95) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .42);
}

.nav {
  position: relative !important;
  height: 86px !important;
  display: grid !important;
  grid-template-columns: minmax(210px, .7fr) auto minmax(210px, .7fr);
  align-items: center;
  gap: 24px;
  overflow: visible !important;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  color: #fff;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

.brand-mark,
.review-avatar,
.zx-chat-launcher-mark,
.zx-chat-avatar,
.checkout-modal-logo,
.docs-product-icon,
.docs-brand-chip,
.admin-product-thumb {
  border-radius: 5px !important;
}

.brand-mark {
  position: relative;
  width: 42px !important;
  height: 42px !important;
  display: grid;
  place-items: center;
  color: #001114 !important;
  background: #01B1C8 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 34px rgba(1, 177, 200, .22) !important;
  font-size: 12px;
  font-weight: 950;
}

.brand-mark:after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 2px;
}

.nav-links {
  justify-self: center;
  display: flex !important;
  align-items: center;
  gap: 3px !important;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: #8f9ca0 !important;
  font-size: 11px !important;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 13px !important;
  border: 1px solid transparent;
  border-radius: 5px !important;
  color: inherit;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff !important;
  background: rgba(1, 177, 200, .075) !important;
  border-color: rgba(1, 177, 200, .18);
}

.nav-links a.active:after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 1px;
  background: #01B1C8;
  box-shadow: 0 0 12px rgba(1, 177, 200, .9);
}

.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px !important;
}

.icon-btn,
.btn,
.code-head button,
.docs-inline-copy {
  min-height: 42px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .095) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .028) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s var(--ease-premium), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.icon-btn {
  width: 42px;
  padding: 0;
  position: relative;
}

.btn:hover,
.icon-btn:hover,
.code-head button:hover,
.docs-inline-copy:hover {
  transform: translateY(-2px);
  border-color: rgba(1, 177, 200, .35) !important;
  background: rgba(1, 177, 200, .06) !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .35), 0 0 28px rgba(1, 177, 200, .08) !important;
}

.btn.primary {
  border-color: #01B1C8 !important;
  background: #01B1C8 !important;
  color: #001114 !important;
  box-shadow: 0 12px 36px rgba(1, 177, 200, .2) !important;
}

.btn.primary:hover {
  background: #2ed3e4 !important;
  border-color: #2ed3e4 !important;
  box-shadow: 0 18px 50px rgba(1, 177, 200, .28) !important;
}

.btn.full {
  width: 100%;
}

.btn:disabled,
.icon-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #020304 !important;
  border-radius: 99px;
  background: #01B1C8 !important;
  color: #001114;
  font-size: 10px;
  font-weight: 950;
}

.mobile-menu,
.theme-picker {
  display: none !important;
}

/* Promo rail */
.discount-promo-bar,
.discount-topbar {
  position: relative;
  z-index: 10002;
  height: 38px !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(1, 177, 200, .16) !important;
  background: linear-gradient(90deg, rgba(1, 177, 200, .09), rgba(2, 3, 4, .98) 26%, rgba(2, 3, 4, .98) 74%, rgba(1, 177, 200, .09)) !important;
}

.discount-ticker,
.discount-ticker-track,
.discount-ticker-group {
  height: 38px;
  display: flex;
  align-items: center;
}

.discount-ticker-item {
  height: 38px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 34px !important;
  color: #cfd8da;
  font-size: 10px !important;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.discount-ticker-dot,
.status-dot,
.zx-featured-foot i,
.product-status i,
.page-hero-meta i {
  background: #01B1C8 !important;
  box-shadow: 0 0 13px rgba(1, 177, 200, .8) !important;
}

/* Home */
.hero.hero-premium {
  position: relative;
  min-height: calc(100vh - 86px);
  display: block;
  overflow: hidden;
  padding: 92px 0 0 !important;
  text-align: center !important;
  isolation: isolate;
}

.hero.hero-premium:before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(1, 177, 200, .1), transparent 18%, transparent 82%, rgba(1, 177, 200, .08)),
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 22%, transparent 78%, rgba(1, 177, 200, .05)) !important;
  filter: none !important;
}

.hero.hero-premium:after {
  content: "ZX";
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: -1;
  transform: translate(-50%, -50%);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .035);
  font-size: min(45vw, 690px);
  font-weight: 1000;
  line-height: .78;
  letter-spacing: -.12em;
  pointer-events: none;
}

.hero-ambient,
.visual-glow,
.hero-ambient-one,
.hero-ambient-two,
.floating-chip {
  display: none !important;
}

.hero-grid {
  display: block !important;
}

.hero-copy {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.eyebrow,
.section-kicker,
.account-kicker,
.reviews-kicker,
.admin-kicker,
.docs-section-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #01B1C8 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow:before,
.section-kicker:before,
.account-kicker:before,
.reviews-kicker:before,
.docs-section-label:before {
  content: "";
  width: 32px;
  height: 1px;
  background: #01B1C8;
  box-shadow: 0 0 13px rgba(1, 177, 200, .82);
}

.dot,
.eyebrow .dot {
  display: none !important;
}

.hero h1 {
  max-width: 1060px !important;
  margin: 0 auto 26px !important;
  color: #fff;
  text-align: center !important;
  font-size: clamp(64px, 9.4vw, 142px) !important;
  font-weight: 950;
  line-height: .82 !important;
  letter-spacing: -.055em !important;
}

.hero h1 span {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

.hero p {
  max-width: 730px !important;
  margin: 0 auto !important;
  color: #a0abad !important;
  text-align: center;
  font-size: clamp(15px, 1.45vw, 20px) !important;
  line-height: 1.75;
}

.hero-actions {
  justify-content: center !important;
  margin-top: 34px !important;
  gap: 10px !important;
}

.btn-lg {
  min-height: 52px !important;
  padding: 0 20px !important;
}

.btn-arrow {
  transition: transform .2s var(--ease-premium);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.hero-proof {
  justify-content: center !important;
  gap: 14px 24px !important;
  margin-top: 35px !important;
  color: #6f7b7f !important;
  font-size: 10px !important;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.proof-icon {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(1, 177, 200, .22);
  border-radius: 50%;
  background: rgba(1, 177, 200, .075);
  color: #01B1C8;
  font-size: 9px;
  font-style: normal;
}

.hero-visual {
  width: min(1180px, 100%);
  margin: 72px auto 0;
  perspective: none;
}

.showcase-window {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 38vw, 510px);
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 8px !important;
  background: #050707 !important;
  box-shadow: 0 42px 130px rgba(0, 0, 0, .72), 0 0 70px rgba(1, 177, 200, .08) !important;
}

.showcase-window:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 177, 200, .18), transparent 22%, transparent 78%, rgba(255, 255, 255, .08)),
    url("/uploads/products/zx-banking-1787239594449.png") center / cover no-repeat;
  filter: grayscale(1) contrast(1.2) saturate(.16);
  opacity: .54;
}

.showcase-window:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 3, 4, .14), rgba(2, 3, 4, .92)),
    linear-gradient(90deg, #020304, transparent 22%, transparent 78%, #020304);
}

.showcase-top,
.showcase-body {
  position: relative;
  z-index: 1;
}

.showcase-top {
  height: 52px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(2, 3, 4, .68) !important;
}

.window-dots span {
  width: 6px !important;
  height: 6px !important;
  background: rgba(255, 255, 255, .36) !important;
}

.window-dots span:first-child,
.showcase-status span {
  background: #01B1C8 !important;
  box-shadow: 0 0 12px rgba(1, 177, 200, .9) !important;
}

.showcase-status {
  color: #aab3b6 !important;
  font-size: 10px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.showcase-body {
  min-height: calc(100% - 52px);
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .55fr);
  align-items: end;
  gap: 34px;
  padding: clamp(24px, 4vw, 54px) !important;
}

.showcase-heading {
  text-align: left;
}

.showcase-kicker,
.showcase-icon,
.showcase-check {
  color: #01B1C8 !important;
}

.showcase-kicker {
  font-size: 10px !important;
  letter-spacing: .2em !important;
}

.showcase-heading strong {
  display: block;
  max-width: 610px;
  margin-top: 12px;
  color: #fff;
  font-size: clamp(34px, 5vw, 70px) !important;
  line-height: .9 !important;
  letter-spacing: -.055em !important;
}

.showcase-heading p {
  max-width: 500px !important;
  margin: 16px 0 0 !important;
  color: #a1acae !important;
  text-align: left;
}

.showcase-list {
  display: grid;
  gap: 10px !important;
}

.showcase-row {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px !important;
  align-items: center;
  min-height: 72px;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 6px !important;
  background: rgba(2, 3, 4, .72) !important;
  backdrop-filter: blur(12px);
}

.showcase-row:hover {
  border-color: rgba(1, 177, 200, .28) !important;
  background: rgba(1, 177, 200, .055) !important;
}

.showcase-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(1, 177, 200, .22) !important;
  border-radius: 4px !important;
  background: rgba(1, 177, 200, .08) !important;
  font-size: 10px !important;
  font-weight: 950;
}

.showcase-row strong {
  color: #fff;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.showcase-row small {
  color: #7c878b;
  font-size: 10px;
}

.trust-rail {
  border-top: 1px solid rgba(255, 255, 255, .075) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
  background: rgba(255, 255, 255, .018) !important;
}

.trust-rail-inner {
  min-height: 86px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.trust-label {
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px !important;
}

.trust-pills span,
.zx-featured-chips span,
.product-status,
.page-hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, .022) !important;
  color: #899599 !important;
  font-size: 10px !important;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Sections and cards */
.section {
  padding: 110px 0 !important;
}

.section-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 28px !important;
  margin-bottom: 36px !important;
}

.section-head h2,
.zx-faq-intro h2,
.customer-auth-card h2,
.customer-library-head h2,
.order-lookup-help h3 {
  margin: 0 0 10px !important;
  color: #fff;
  font-size: clamp(36px, 4vw, 64px) !important;
  line-height: .92 !important;
  letter-spacing: -.045em !important;
  font-weight: 950;
}

.section-head p,
.zx-faq-intro p,
.customer-auth-card p,
.customer-library-head p,
.order-lookup-help p {
  max-width: 680px;
  margin: 0 !important;
  color: #9ba6a9 !important;
  line-height: 1.75;
}

.zx-featured-section {
  position: relative;
  overflow: hidden;
  padding: 118px 0 126px !important;
  border-top: 1px solid rgba(255, 255, 255, .075);
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 30%, rgba(1, 177, 200, .025)) !important;
}

.zx-featured-section:before {
  content: "CATALOG";
  position: absolute;
  right: -2vw;
  top: 24px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .035);
  font-size: min(17vw, 230px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.08em;
}

.grid,
.premium-product-grid,
.reviews-grid,
.docs-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.zx-marquee-shell {
  position: relative;
}

.zx-marquee-viewport {
  overflow: hidden;
}

.zx-marquee-track,
.zx-marquee-group {
  display: flex;
  gap: 18px;
}

.zx-marquee-group {
  flex: 0 0 auto;
  padding: 12px 9px;
}

.zx-marquee-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 11vw;
  pointer-events: none;
}

.zx-marquee-edge-left {
  left: 0;
  background: linear-gradient(90deg, #020304, rgba(2, 3, 4, .72), transparent) !important;
}

.zx-marquee-edge-right {
  right: 0;
  background: linear-gradient(270deg, #020304, rgba(2, 3, 4, .72), transparent) !important;
}

.zx-featured-card,
.product-card,
.premium-product-media,
.premium-product-video,
.premium-product-buy-card,
.premium-product-section,
.premium-product-requirements,
.compatibility-table > div,
.release-entry,
.product-review-card,
.product-faq-list details,
.product-empty-block,
.summary,
.cart-item,
.customer-auth-card,
.customer-order-card,
.lookup-result-card,
.order-lookup-help,
.review-card,
.review-form-card,
.docs-product-card,
.docs-sidebar,
.docs-hero-card,
.docs-mini-card,
.docs-callout,
.code-block,
.docs-api-row,
.docs-config-row,
.docs-event-group,
.docs-event-card,
.legal,
.order-card {
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 34%),
    rgba(7, 10, 11, .9) !important;
  box-shadow: 0 22px 72px rgba(0, 0, 0, .28) !important;
}

.zx-featured-card,
.product-card {
  overflow: hidden;
  transition: transform .24s var(--ease-premium), border-color .24s ease, box-shadow .24s ease;
}

.zx-featured-card {
  flex: 0 0 min(410px, calc(100vw - 48px));
  display: grid;
  grid-template-rows: 230px minmax(0, 1fr);
}

.product-card {
  display: flex !important;
  flex-direction: column;
}

.zx-featured-card:hover,
.product-card:hover,
.docs-product-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(1, 177, 200, .35) !important;
  box-shadow: 0 34px 96px rgba(0, 0, 0, .55), 0 0 50px rgba(1, 177, 200, .07) !important;
}

.zx-featured-image,
.product-image,
.premium-product-main-image,
.cart-thumb {
  position: relative;
  overflow: hidden;
  display: block;
  background: #050707 !important;
}

.product-image {
  aspect-ratio: 16 / 10;
}

.zx-featured-image img,
.product-image img,
.premium-product-main-image img,
.premium-product-thumb img,
.cart-thumb img,
.admin-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) saturate(.16) !important;
  transition: filter .25s ease, transform .35s var(--ease-premium), opacity .25s ease;
}

.zx-featured-card:hover .zx-featured-image img,
.product-card:hover .product-image img,
.premium-product-main-image:hover img,
.premium-product-thumb:hover img {
  filter: grayscale(.45) contrast(1.12) saturate(.65) !important;
  transform: scale(1.035);
}

.zx-featured-image:after,
.product-image:after,
.premium-product-main-image:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 38%, rgba(2, 3, 4, .88)),
    linear-gradient(115deg, rgba(1, 177, 200, .2), transparent 30%, transparent 78%, rgba(255, 255, 255, .08));
}

.product-image .placeholder,
.zx-featured-placeholder,
.premium-product-placeholder .placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(1, 177, 200, .22), transparent 34%),
    #050707;
  font-size: 42px;
  font-weight: 1000;
  letter-spacing: -.08em;
}

.zx-featured-badge,
.badge,
.premium-product-badge,
.docs-product-badge,
.verified-review,
.order-status,
.admin-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  padding: 0 8px !important;
  border: 1px solid rgba(1, 177, 200, .25) !important;
  border-radius: 4px !important;
  background: rgba(1, 177, 200, .075) !important;
  color: #dffcff !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.zx-featured-badge,
.badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(2, 3, 4, .78) !important;
  backdrop-filter: blur(12px);
}

.zx-featured-body,
.product-body {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 20px !important;
}

.zx-featured-meta,
.product-meta,
.premium-product-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.zx-featured-category,
.product-category,
.premium-product-labels span:first-child {
  color: #01B1C8 !important;
  font-size: 10px !important;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.zx-featured-version,
.product-status span {
  color: #727e82 !important;
  font-size: 10px !important;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zx-featured-card h3,
.product-card h3 {
  margin: 0 0 10px !important;
  color: #fff;
  font-size: 22px !important;
  line-height: 1.05;
  letter-spacing: -.02em !important;
}

.zx-featured-card h3 a:hover,
.product-card h3 a:hover {
  color: #01B1C8 !important;
}

.zx-featured-copy,
.product-card p {
  margin: 0 !important;
  min-height: 0 !important;
  color: #9aa5a9 !important;
  font-size: 13px !important;
  line-height: 1.65;
}

.zx-featured-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.zx-featured-bottom,
.product-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .075) !important;
}

.product-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 9px !important;
  border-top: 0 !important;
}

.product-actions .btn {
  width: 100%;
}

.zx-featured-price,
.price,
.premium-product-price,
.sale-price {
  color: #fff !important;
  font-weight: 950;
}

.zx-featured-price s,
.old-price {
  margin-left: 7px;
  color: #667174 !important;
}

.zx-featured-price small,
.sale-note {
  display: block;
  color: #01B1C8 !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zx-featured-view {
  min-height: 38px !important;
  padding: 0 12px !important;
}

.zx-featured-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  color: #6f7b7f !important;
  font-size: 10px !important;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.product-status {
  width: max-content;
  gap: 8px;
  margin-top: 16px;
}

.product-status i,
.page-hero-meta i,
.status-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
}

/* Page heroes and store */
.page-hero.premium-page-hero,
.product-backbar {
  position: relative;
  overflow: hidden;
  padding: 90px 0 54px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background:
    linear-gradient(115deg, rgba(1, 177, 200, .075), transparent 26%, transparent 74%, rgba(255, 255, 255, .035)),
    rgba(255, 255, 255, .01) !important;
}

.page-hero h1,
.legal h1,
.docs-library-hero h1 {
  max-width: 980px !important;
  margin: 0 0 16px !important;
  color: #fff;
  text-align: left !important;
  font-size: clamp(48px, 7vw, 104px) !important;
  font-weight: 950;
  line-height: .86 !important;
  letter-spacing: -.055em !important;
}

.page-hero p,
.legal p,
.docs-library-hero p {
  max-width: 760px !important;
  margin: 0;
  color: #9ca7aa !important;
  font-size: 16px;
  line-height: 1.75;
}

.page-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.store-section {
  padding-top: 42px !important;
}

.store-control-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 28px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 8px !important;
  background: rgba(6, 9, 10, .78) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(16px);
}

.category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px !important;
  margin: 0 !important;
}

.chip {
  min-height: 36px;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #879397 !important;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.chip:hover,
.chip.active {
  border-color: rgba(1, 177, 200, .24) !important;
  background: rgba(1, 177, 200, .075) !important;
  color: #fff !important;
}

.store-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 10px !important;
  margin: 0 !important;
}

.search {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #01B1C8;
}

.search input,
.select,
.review-input,
.customer-form input,
.customer-form select,
.customer-form textarea,
.checkout-form input,
.checkout-form select,
.checkout-modal-field input,
.docs-search input,
.admin-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .03) !important;
  color: #fff !important;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search input {
  padding: 0 13px 0 37px !important;
}

.select {
  padding: 0 13px !important;
}

.search input:focus,
.select:focus,
.review-input:focus,
.customer-form input:focus,
.customer-form select:focus,
.customer-form textarea:focus,
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-modal-field input:focus,
.docs-search input:focus,
.admin-input:focus {
  border-color: rgba(1, 177, 200, .55) !important;
  box-shadow: 0 0 0 3px rgba(1, 177, 200, .08) !important;
  background: rgba(1, 177, 200, .035) !important;
}

/* Product pages */
.product-backbar {
  padding: 28px 0 !important;
}

.back-link,
.docs-back-link {
  color: #01B1C8 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-detail.product-detail-premium,
.product-detail {
  display: block !important;
  padding: 46px 0 110px !important;
}

.premium-product-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.24fr) minmax(360px, .56fr);
  gap: 22px !important;
  align-items: start;
}

.premium-product-media {
  overflow: hidden;
}

.premium-product-main-image {
  aspect-ratio: 16 / 9;
  background: #050707;
}

.premium-product-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, .075);
  background: rgba(0, 0, 0, .24);
}

.premium-product-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 5px;
  background: #050707;
}

.premium-product-thumb.active {
  border-color: rgba(1, 177, 200, .72);
  box-shadow: 0 0 18px rgba(1, 177, 200, .18);
}

.premium-product-video {
  margin-top: 18px;
  overflow: hidden;
}

.premium-video-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.premium-video-head span,
.premium-product-section-head > span,
.release-heading span {
  color: #01B1C8 !important;
  font-size: 10px !important;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.premium-product-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.premium-product-buy-card {
  position: sticky !important;
  top: 108px !important;
  padding: 22px !important;
  backdrop-filter: blur(18px);
}

.premium-product-buy-card h1 {
  max-width: none !important;
  margin: 8px 0 14px !important;
  text-align: left !important;
  color: #fff;
  font-size: clamp(38px, 4vw, 64px) !important;
  line-height: .9 !important;
  letter-spacing: -.05em !important;
}

.premium-product-buy-card p,
.product-muted-copy {
  color: #9ba6a9 !important;
  line-height: 1.72;
}

.product-rating-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  color: #dce6e8;
  font-size: 12px;
  font-weight: 850;
}

.review-stars {
  color: #01B1C8 !important;
  letter-spacing: 2px;
}

.premium-product-price {
  margin: 16px 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -.045em;
}

.premium-buy-button {
  min-height: 54px !important;
  margin-bottom: 9px;
}

.premium-product-meta,
.lookup-result-head,
.order-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.lookup-result-head,
.order-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
}

.premium-product-meta > div,
.lookup-result-head > div,
.order-meta > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 6px;
  background: rgba(255, 255, 255, .022);
}

.premium-product-meta span,
.order-meta span,
.summary-row span:first-child,
.customer-library-head span,
.lookup-result-head span {
  display: block;
  color: #6e7b7f !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.premium-product-meta strong,
.lookup-result-head strong,
.order-meta strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 12px;
  word-break: break-word;
}

.product-trust-list {
  display: grid;
  gap: 9px;
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

.product-trust-list span,
.product-requirements-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #96a1a5;
  font-size: 12px;
  font-weight: 800;
}

.product-trust-list i,
.product-requirements-list i,
.zx-feature-item i,
.zxfg-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(1, 177, 200, .25) !important;
  border-radius: 4px !important;
  background: rgba(1, 177, 200, .07) !important;
  color: #01B1C8 !important;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.premium-product-nav {
  position: sticky !important;
  top: 98px !important;
  z-index: 10;
  width: max-content !important;
  max-width: 100%;
  display: flex;
  gap: 4px !important;
  margin: 28px auto 0 !important;
  padding: 5px !important;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 8px !important;
  background: rgba(2, 3, 4, .88) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .34) !important;
  scrollbar-width: none;
}

.premium-product-nav a {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #899599 !important;
  font-size: 10px !important;
  font-weight: 950;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.premium-product-nav a:hover,
.premium-product-nav a.is-active {
  color: #fff !important;
  border-color: rgba(1, 177, 200, .22) !important;
  background: rgba(1, 177, 200, .075) !important;
}

.premium-product-section {
  margin-top: 28px;
  padding: clamp(28px, 4vw, 48px) !important;
  scroll-margin-top: 150px !important;
}

.premium-product-section-head {
  max-width: 880px;
  margin-bottom: 24px;
}

.premium-product-section-head h2 {
  margin: 8px 0 12px !important;
  color: #fff;
  font-size: clamp(34px, 4.8vw, 72px) !important;
  line-height: .92 !important;
  letter-spacing: -.052em !important;
}

.premium-product-section-head p {
  margin: 0 !important;
  color: #9ba6a9 !important;
  font-size: 15px !important;
  line-height: 1.78;
}

.premium-feature-grid,
.zx-feature-groups,
.zxfg-grid,
.product-review-grid,
.docs-grid-two,
.docs-event-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.premium-feature-grid article,
.zx-feature-group,
.zxfg-group {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .022) !important;
}

.premium-feature-grid article:before,
.zx-feature-group:before,
.zxfg-group:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: #01B1C8 !important;
  opacity: .65;
}

.premium-feature-grid article span,
.zx-feature-group-number,
.zxfg-num {
  color: #01B1C8 !important;
  font-size: 10px;
  font-weight: 950;
}

.premium-feature-grid article strong {
  display: block;
  margin-top: 8px;
  color: #eaf0f1;
  font-size: 13px;
  line-height: 1.45;
}

.zx-feature-summary,
.zxfg-summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 9px 11px;
  border: 1px solid rgba(1, 177, 200, .2) !important;
  border-radius: 5px !important;
  background: rgba(1, 177, 200, .055) !important;
  color: #8d999d !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.zx-feature-summary strong,
.zxfg-summary strong {
  color: #fff;
}

.zx-feature-summary i,
.zxfg-summary i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #01B1C8 !important;
}

.zx-feature-group-wide,
.zxfg-group:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.zx-feature-group-head,
.zxfg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
}

.zx-feature-group-number,
.zxfg-num {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(1, 177, 200, .22) !important;
  border-radius: 4px !important;
  background: rgba(1, 177, 200, .075) !important;
}

.zx-feature-group-head h3,
.zxfg-head h3 {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zx-feature-group-head small,
.zxfg-head small {
  display: block;
  margin-top: 4px;
  color: #6f7b7f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.zx-feature-group-wide .zx-feature-list,
.zxfg-group:last-child:nth-child(odd) .zxfg-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.zx-feature-item,
.zxfg-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .065) !important;
  color: #b8c2c5 !important;
  font-size: 12px;
  line-height: 1.45;
}

.premium-product-requirements {
  display: grid;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 22px;
  padding: 22px;
}

.premium-product-requirements h3 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.035em;
}

.product-requirements-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.compatibility-table {
  display: grid;
  gap: 10px;
}

.compatibility-table > div {
  display: grid;
  grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
}

.compatibility-table strong,
.release-heading strong {
  color: #fff;
}

.compatibility-table i {
  color: #01B1C8;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.release-timeline,
.product-faq-list,
.zx-faq-list,
.customer-orders,
.lookup-items,
.order-items {
  display: grid;
  gap: 10px;
}

.release-entry {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
}

.release-line span {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: #01B1C8;
  box-shadow: 0 0 16px rgba(1, 177, 200, .7);
}

.release-heading,
.product-faq-list summary,
.zx-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.release-heading time,
.release-notes p {
  color: #9ba6a9;
  font-size: 12px;
}

.product-review-card,
.review-card {
  padding: 20px;
}

.product-review-card p,
.review-text {
  color: #c1cacd !important;
}

.product-faq-list details,
.zx-faq-list details {
  overflow: hidden;
}

.product-faq-list summary,
.zx-faq-list summary {
  padding: 18px 20px;
  color: #fff !important;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

.product-faq-list summary::-webkit-details-marker,
.zx-faq-list summary::-webkit-details-marker {
  display: none;
}

.product-faq-list summary span,
.zx-faq-list summary i {
  color: #01B1C8 !important;
  transition: transform .18s ease;
}

.product-faq-list details[open] summary span,
.zx-faq-list details[open] summary i {
  transform: rotate(45deg);
}

.product-faq-list p,
.zx-faq-answer p {
  margin: 0 !important;
  padding: 0 20px 18px;
  color: #9ba6a9 !important;
}

.product-empty-block {
  padding: 28px;
  color: #8c989c;
}

/* Cart, account and orders */
.cart-layout,
.account-page,
.order-lookup-page {
  padding: 42px 0 110px !important;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
}

.cart-items {
  display: grid;
  gap: 12px;
}

.cart-item {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
}

.cart-thumb {
  width: 124px;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  color: #01B1C8;
  font-weight: 950;
  border-radius: 6px !important;
}

.cart-item h3,
.summary h3 {
  margin: 0 0 6px;
  color: #fff;
}

.cart-item p {
  margin: 0;
  color: #8e9a9e;
  font-size: 12px;
}

.qty {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}

.qty button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 5px;
  background: rgba(255, 255, 255, .03);
  color: #fff;
}

.summary {
  position: sticky;
  top: 108px;
  padding: 22px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  color: #a4afb2;
  font-size: 13px;
}

.summary-row.total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  font-weight: 950;
}

.notice,
.sale-notice,
.promo-hint {
  padding: 12px 14px !important;
  border: 1px solid rgba(1, 177, 200, .18) !important;
  border-radius: 6px !important;
  background: rgba(1, 177, 200, .055) !important;
  color: #d8faff !important;
  font-size: 12px;
  line-height: 1.55;
}

.promo-hint {
  text-align: center;
  color: #7f8b8f !important;
  background: rgba(255, 255, 255, .018) !important;
  border-color: rgba(255, 255, 255, .075) !important;
}

.empty {
  padding: 58px 22px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
  color: #8f9b9f;
  text-align: center;
}

.empty h3 {
  margin: 0 0 8px;
  color: #fff;
}

.customer-auth-card {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, .64fr);
  gap: 28px;
  align-items: start;
  padding: 28px;
}

.customer-form,
.review-form {
  display: grid;
  gap: 14px;
}

.customer-form label,
.review-form label {
  display: grid;
  gap: 8px;
  color: #dfe6e8;
  font-size: 12px;
  font-weight: 900;
}

.customer-form label > span,
.review-form label > span,
.review-rating-row > span {
  color: #899599;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.customer-remember {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
}

.customer-remember input {
  width: 18px;
  height: 18px;
  accent-color: #01B1C8;
}

.customer-remember small {
  display: block;
  color: #778286;
  font-weight: 700;
}

.customer-message,
.review-message {
  color: #8f9b9f;
  font-size: 12px;
}

.customer-message.error,
.review-message.error {
  color: #f0a0a8;
}

.customer-message.success,
.review-message.success {
  color: #dffcff;
}

.customer-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.customer-order-card,
.lookup-result-card,
.order-card {
  padding: 22px;
}

.library-product,
.lookup-item,
.order-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

.library-product:first-child,
.lookup-item:first-child,
.order-item:first-child {
  border-top: 0;
}

.library-unavailable,
.download-muted {
  color: #7f8b8f;
  font-size: 11px;
  font-weight: 850;
}

.order-lookup-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, .45fr);
  gap: 20px;
  align-items: start;
}

.customer-form-card,
.order-lookup-help {
  padding: 24px;
}

.order-lookup-help a,
.lookup-result-foot a {
  color: #01B1C8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lookup-result-card {
  margin-top: 22px;
}

.lookup-result-foot,
.order-help {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  margin: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
  color: #879397;
  font-size: 12px;
}

.order-card {
  max-width: 980px;
  margin: 32px auto 110px;
}

/* Reviews and FAQ */
.reviews-section,
.zx-home-faq {
  position: relative;
  padding: 112px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .01) !important;
}

.reviews-summary {
  min-width: 164px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 8px;
  background: rgba(7, 10, 11, .9);
  text-align: right;
}

.reviews-summary strong {
  display: block;
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.reviews-summary span {
  display: block;
  margin-top: 5px;
  color: #7f8b8f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.review-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.review-card-top,
.review-author,
.review-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-text {
  flex: 1;
  margin: 16px 0 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

.review-author {
  justify-content: flex-start;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

.review-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #01B1C8 !important;
  color: #001114;
  font-size: 12px;
  font-weight: 950;
}

.reviews-empty,
.zx-featured-empty {
  grid-column: 1 / -1;
  padding: 26px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: #899599;
  text-align: center;
}

.review-form-card {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, .52fr) minmax(0, 1fr);
  gap: 28px;
  padding: 26px;
}

.review-form-copy h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.04em;
}

.review-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-textarea {
  min-height: 126px;
  padding: 12px !important;
  resize: vertical;
}

.review-star-picker {
  display: flex;
  gap: 5px;
}

.review-star-picker button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 5px;
  background: rgba(255, 255, 255, .026);
  color: #596467;
  font-size: 18px;
}

.review-star-picker button:hover,
.review-star-picker button.selected {
  color: #001114;
  background: #01B1C8;
  border-color: #01B1C8;
}

.zx-faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
  gap: 42px;
  align-items: start;
}

/* Documentation */
.docs-library-page {
  min-height: calc(100vh - 86px);
  padding: 92px 0 120px !important;
}

.docs-library-hero {
  max-width: 880px !important;
  margin-bottom: 42px !important;
}

.docs-product-card {
  min-height: 290px !important;
  display: flex !important;
  flex-direction: column;
  padding: 22px !important;
  transition: transform .2s var(--ease-premium), border-color .2s ease, background .2s ease;
}

.docs-product-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.docs-product-icon,
.docs-brand-chip {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(1, 177, 200, .22) !important;
  background: rgba(1, 177, 200, .075) !important;
  color: #01B1C8 !important;
  font-size: 11px;
  font-weight: 950;
}

.docs-product-card h2 {
  margin: 34px 0 10px !important;
  color: #fff;
  font-size: 28px !important;
  line-height: 1;
  letter-spacing: -.035em;
}

.docs-product-card p,
.docs-library-note {
  color: #95a0a4 !important;
  line-height: 1.7;
}

.docs-product-open {
  margin-top: auto;
  padding-top: 24px;
  color: #01B1C8 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.docs-library-note {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
  font-size: 12px;
}

.docs-page {
  padding: 36px 0 110px;
}

.docs-layout {
  max-width: 1500px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 220px;
  gap: 20px;
  align-items: start;
}

.docs-mobile-bar {
  display: none;
}

.docs-sidebar,
.docs-toc {
  position: sticky;
  top: 106px;
  max-height: calc(100vh - 126px);
  overflow: auto;
}

.docs-sidebar,
.docs-toc {
  padding: 16px;
}

.docs-sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.docs-search {
  position: relative;
  display: grid;
  margin-bottom: 16px;
}

.docs-search span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #01B1C8;
}

.docs-search input {
  padding: 0 42px 0 34px !important;
}

.docs-search kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #647073;
  font-size: 10px;
}

.docs-nav {
  display: grid;
  gap: 10px;
}

.docs-nav-group {
  border-top: 1px solid rgba(255, 255, 255, .065);
  padding-top: 10px;
}

.docs-group-title {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}

.docs-subnav {
  display: grid;
  gap: 4px;
}

.docs-nav a,
.docs-nav-link,
.docs-toc a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #839095 !important;
  font-size: 12px;
  font-weight: 800;
}

.docs-nav a:hover,
.docs-nav a.active,
.docs-nav-link:hover,
.docs-nav-link.active,
.docs-toc a:hover,
.docs-toc a.active {
  color: #fff !important;
  border-color: rgba(1, 177, 200, .18) !important;
  background: rgba(1, 177, 200, .06) !important;
}

.docs-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .065);
  color: #7f8b8f;
  font-size: 11px;
}

.docs-content {
  min-width: 0;
}

.docs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .36fr);
  gap: 20px;
  align-items: end;
  padding: 36px 0 18px;
}

.docs-hero h1 {
  margin: 0 0 14px !important;
  color: #fff;
  font-size: clamp(48px, 6vw, 96px) !important;
  line-height: .86 !important;
  letter-spacing: -.055em !important;
}

.docs-hero p,
.docs-section p,
.docs-section li,
.docs-mini-card p,
.docs-hero-card p,
.docs-api-row p,
.docs-config-row p,
.docs-event-description {
  color: #9ba6a9 !important;
  font-size: 14px !important;
  line-height: 1.78 !important;
}

.docs-hero-card,
.docs-mini-card,
.docs-callout {
  padding: 18px;
}

.docs-hero-card span,
.docs-mini-card span,
.docs-callout strong,
.docs-toc span {
  color: #01B1C8 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.docs-hero-card strong,
.docs-mini-card strong {
  display: block;
  margin: 8px 0;
  color: #fff;
  font-size: 18px;
}

.docs-hero-card a {
  color: #01B1C8;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.docs-section {
  padding: 42px 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
  scroll-margin-top: 120px;
}

.docs-section h2 {
  margin: 0 0 14px !important;
  color: #fff;
  font-size: clamp(32px, 4.2vw, 58px) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
}

.docs-checklist,
.docs-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.docs-checklist li,
.docs-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}

.docs-checklist li:before,
.docs-steps li > span {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(1, 177, 200, .22);
  border-radius: 5px;
  background: rgba(1, 177, 200, .065);
  color: #01B1C8;
  font-size: 10px;
  font-weight: 950;
}

code:not(pre code) {
  padding: .15em .32em;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  background: rgba(255, 255, 255, .035);
  color: #e9f7f9;
}

.code-block {
  overflow: hidden;
  margin: 18px 0;
}

.code-head,
.docs-api-card-head,
.docs-event-card-head,
.docs-config-card-head {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: rgba(0, 0, 0, .22);
}

.code-head span,
.docs-api-kind,
.docs-event-kind,
.docs-config-kind {
  color: #01B1C8 !important;
  font-size: 10px !important;
  font-weight: 950;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

.code-head button,
.docs-inline-copy {
  min-height: 28px !important;
  padding: 0 9px !important;
  font-size: 10px !important;
}

.code-block pre {
  margin: 0;
  padding: 18px;
  overflow: auto;
  background: rgba(0, 0, 0, .28);
}

.code-block pre code,
.docs-api-signature code,
.docs-event-signature code,
.docs-config-path {
  color: #effbfc !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

.lua-keyword,
.js-keyword,
.api-token-keyword,
.lua-fn,
.js-fn,
.api-token-function,
.cfg-command,
.api-token-call,
.lua-call {
  color: #01B1C8 !important;
  font-weight: 800;
}

.lua-string,
.js-string,
.api-token-resource,
.api-token-event,
.cfg-resource {
  color: #ffffff !important;
}

.lua-number,
.js-prop,
.api-token-param,
.docs-config-option,
.config-token-section {
  color: #cdd6d8 !important;
}

.lua-comment,
.js-comment,
.cfg-comment {
  color: #667174 !important;
  font-style: italic;
}

.docs-api-list,
.docs-config-list,
.docs-event-list {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 18px;
}

.docs-api-row,
.docs-config-row {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  overflow: hidden;
  padding: 0 !important;
}

.docs-api-row > p,
.docs-config-row > p {
  margin: 0 !important;
  padding: 14px 16px 16px !important;
}

.docs-api-signature,
.docs-event-signature {
  position: relative;
  padding: 16px 70px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
  background: rgba(0, 0, 0, .2);
}

.docs-inline-copy {
  position: absolute;
  top: 13px;
  right: 13px;
}

.docs-config-options,
.docs-event-params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.docs-config-option,
.docs-event-param {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, .028) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 10px !important;
}

.docs-event-group {
  overflow: hidden;
}

.docs-event-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  color: #fff;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

.docs-event-card {
  overflow: hidden;
  box-shadow: none !important;
}

.docs-event-name {
  padding: 12px 14px 0;
  color: #01B1C8 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.docs-event-description {
  margin: 0;
  padding: 10px 14px 14px;
}

/* Legal */
.legal {
  max-width: 920px !important;
  margin: 56px auto 110px !important;
  padding: clamp(24px, 4vw, 46px) !important;
}

.legal h2 {
  margin: 34px 0 10px !important;
  color: #fff;
  font-size: 24px;
  letter-spacing: -.02em;
}

/* Footer */
.footer {
  position: relative;
  overflow: hidden;
  padding: 54px 0 30px !important;
  border-top: 1px solid rgba(255, 255, 255, .075) !important;
  background: linear-gradient(115deg, rgba(1, 177, 200, .055), transparent 34%), #020304 !important;
}

.footer:before {
  content: "ZX STUDIOS";
  position: absolute;
  right: -12px;
  bottom: -24px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .035);
  font-size: min(16vw, 220px);
  font-weight: 1000;
  line-height: .8;
  letter-spacing: -.06em;
}

.footer .container {
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(0, .62fr));
  gap: 32px;
}

.footer p {
  max-width: 380px;
  color: #819096 !important;
  font-size: 13px !important;
  line-height: 1.75;
}

.footer h4 {
  margin: 0 0 14px;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 950;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

.footer a {
  display: block;
  margin: 9px 0;
  color: #849095 !important;
  font-size: 12px !important;
  font-weight: 800;
}

.footer a:hover {
  color: #01B1C8 !important;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .075) !important;
  color: #657175 !important;
  font-size: 11px !important;
  font-weight: 800;
}

/* Assistant and modal */
.zx-ai-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 12050;
}

.zx-chat-launcher,
.zx-chat-panel,
.checkout-modal {
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 8px !important;
  background: rgba(5, 8, 9, .94) !important;
  color: #fff !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55), 0 0 44px rgba(1, 177, 200, .08) !important;
  backdrop-filter: blur(20px);
}

.zx-chat-launcher {
  min-width: 148px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
}

.zx-chat-launcher-glow,
.checkout-modal-glow {
  display: none !important;
}

.zx-chat-launcher-mark,
.zx-chat-avatar,
.checkout-modal-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #01B1C8 !important;
  color: #001114 !important;
  box-shadow: none !important;
  font-weight: 950;
}

.zx-chat-launcher-mark {
  width: 40px;
  height: 40px;
  font-size: 11px;
}

.zx-chat-launcher-label {
  display: grid;
  text-align: left;
}

.zx-chat-launcher-label strong {
  font-size: 12px;
}

.zx-chat-launcher-label small,
.zx-chat-head-copy span,
.zx-chat-foot {
  color: #788488;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zx-chat-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: min(420px, calc(100vw - 28px));
  height: min(650px, calc(100vh - 118px));
  min-height: 450px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .22s var(--ease-premium), visibility .2s ease;
}

.zx-ai-chat.is-open .zx-chat-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.zx-chat-head,
.checkout-modal-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.product-title-first { color: #fff !important; }
.product-title-accent { color: #fff !important; }
.product-card::before {
  background: radial-gradient(350px circle at var(--card-x, 50%) var(--card-y, 0%), rgba(1,177,200,.12), transparent 62%) !important;
}
.zx-chat-compose:focus-within {
  border-color: rgba(1,177,200,.55) !important;
  box-shadow: 0 0 0 3px rgba(1,177,200,.075) !important;
}
.zx-chat-send, .zx-chat-send:hover:not(:disabled) {
  box-shadow: 0 9px 24px rgba(1,177,200,.22) !important;
}
.zx-chat-launcher-glow {
  background: radial-gradient(circle, rgba(1,177,200,.22), transparent 54%) !important;
}
.zx-chat-clear:hover, .zx-chat-close:hover, .zx-chat-product-card:hover,
.zx-chat-action:hover, .zx-chat-quick button:hover {
  background: rgba(1,177,200,.08) !important;
  border-color: rgba(1,177,200,.3) !important;
  color: #fff !important;
}
.zx-chat-head {
  background: linear-gradient(180deg, rgba(1,177,200,.055), transparent) !important;
  min-height: 72px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.zx-chat-avatar {
  width: 38px;
  height: 38px;
  font-size: 10px;
}

.zx-chat-head-copy {
  min-width: 0;
  flex: 1;
  display: grid;
}

.zx-chat-head-copy strong {
  font-size: 13px;
}

.zx-chat-head-copy i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #01B1C8 !important;
  box-shadow: 0 0 11px rgba(1, 177, 200, .75) !important;
}

.zx-chat-clear,
.zx-chat-close,
.checkout-modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 5px;
  background: rgba(255, 255, 255, .028);
  color: #8d999d;
}

.zx-chat-context,
.zx-chat-action,
.zx-chat-quick button {
  border: 1px solid rgba(1, 177, 200, .18);
  border-radius: 5px;
  background: rgba(1, 177, 200, .055);
  color: #dffcff !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.zx-chat-context {
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 9px 14px 0;
  padding: 6px 8px;
}

.zx-chat-messages {
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 10px;
}

.zx-chat-message {
  display: flex;
  margin-bottom: 10px;
}

.zx-chat-message-user {
  justify-content: flex-end;
}

.zx-chat-bubble {
  max-width: 92%;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #c2cbce;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.zx-chat-message-user .zx-chat-bubble {
  border-color: rgba(1, 177, 200, .24);
  background: rgba(1, 177, 200, .09);
  color: #fff;
}

.zx-chat-actions,
.zx-chat-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.zx-chat-action,
.zx-chat-quick button {
  min-height: 30px;
  padding: 0 9px;
}

.zx-chat-quick {
  padding: 0 14px 10px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.zx-chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 8px;
  background: rgba(0, 0, 0, .24);
}

.zx-chat-input {
  min-height: 42px;
  max-height: 112px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  padding: 10px 8px;
  font-size: 12px;
}

.zx-chat-send {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: #01B1C8;
  color: #001114;
}

.checkout-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}

.checkout-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.checkout-modal {
  position: relative;
  width: min(540px, 100%);
  overflow: hidden;
  padding: 24px;
}

.checkout-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.checkout-modal-logo {
  width: 42px;
  height: 42px;
}

.checkout-modal-brand span,
.checkout-modal-kicker,
.checkout-modal-field span,
.checkout-required-chip {
  color: #01B1C8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.checkout-modal h2 {
  margin: 8px 0 10px;
  color: #fff;
  font-size: 34px;
  line-height: .98;
  letter-spacing: -.045em;
}

.checkout-modal-copy,
.checkout-modal-tip,
.checkout-modal-secure {
  color: #8f9b9f;
  font-size: 12px;
}

.checkout-input-shell {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 6px;
  background: rgba(255, 255, 255, .026);
}

.checkout-input-shell input {
  min-height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.checkout-modal-tip {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 6px;
  background: rgba(255, 255, 255, .02);
}

.checkout-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.checkout-modal-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.checkout-modal-secure span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #01B1C8;
}

.cart-mini-confirm {
  position: fixed;
  z-index: 13000;
  right: 18px;
  bottom: 88px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(1, 177, 200, .24);
  border-radius: 8px;
  background: rgba(5, 8, 9, .95);
  color: #fff;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .48);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.cart-mini-confirm.show {
  opacity: 1;
  transform: translateY(0);
}

.cart-mini-check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #01B1C8;
  color: #001114;
}

/* Admin refresh */
.admin-body,
.admin-sidebar {
  background: #020304 !important;
}

.admin-shell {
  background: linear-gradient(115deg, rgba(1, 177, 200, .045), transparent 32%), #020304;
}

.admin-sidebar {
  border-right: 1px solid rgba(255, 255, 255, .085) !important;
}

.admin-nav-link {
  border-radius: 6px !important;
  color: #8f9ca0 !important;
}

.admin-nav-link:hover,
.admin-nav-link.active {
  background: rgba(1, 177, 200, .075) !important;
  color: #fff !important;
}

.admin-stat,
.admin-panel,
.admin-auth-card,
.admin-detail-card,
.admin-item-card,
.admin-info-card,
.discount-product-option,
.discount-card,
.admin-review-card,
.admin-leader-list article,
.admin-upload-card,
.admin-product-row,
.fulfillment-health-list article,
.admin-current-ip-card {
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 8px !important;
  background: rgba(7, 10, 11, .9) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24) !important;
}

.admin-header h1,
.admin-auth-card h1 {
  color: #fff;
  letter-spacing: -.055em;
}

.admin-table th {
  background: #090d0e !important;
}

.admin-table tbody tr:hover {
  background: rgba(1, 177, 200, .045) !important;
}

.admin-status.paid,
.admin-status.free,
.admin-pill.good,
.discount-code,
.discount-code.automatic,
.admin-review-verified,
.admin-file-button {
  border-color: rgba(1, 177, 200, .22) !important;
  background: rgba(1, 177, 200, .07) !important;
  color: #dffcff !important;
}

.revenue-bar-track span {
  background: #01B1C8 !important;
  box-shadow: 0 -5px 20px rgba(1, 177, 200, .24) !important;
}

/* Motion */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-premium), transform .7s var(--ease-premium);
}

[data-reveal].revealed,
.page-ready [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .nav {
    grid-template-columns: 1fr auto auto;
  }

  .premium-product-hero {
    grid-template-columns: 1fr;
  }

  .premium-product-buy-card,
  .summary,
  .docs-sidebar,
  .docs-toc,
  .admin-product-list-panel {
    position: static !important;
    top: auto !important;
  }

  .docs-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }
}

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

  .mobile-menu {
    display: inline-flex !important;
  }

  .nav-actions .btn.ghost {
    display: none;
  }

  .nav-links {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10002 !important;
    display: grid !important;
    gap: 4px !important;
    padding: 8px !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    background: rgba(2, 3, 4, .98) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .nav-links.mobile-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .nav-links a {
    width: 100% !important;
    min-height: 46px !important;
  }

  .showcase-body {
    grid-template-columns: 1fr;
  }

  .store-control-panel,
  .cart-layout,
  .customer-auth-card,
  .order-lookup-grid,
  .review-form-card,
  .zx-faq-layout,
  .premium-product-requirements,
  .docs-layout,
  .docs-hero {
    grid-template-columns: 1fr;
  }

  .grid,
  .premium-product-grid,
  .reviews-grid,
  .docs-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docs-mobile-bar {
    position: sticky;
    top: 72px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
    background: rgba(2, 3, 4, .94);
  }
}

@media (max-width: 720px) {
  .container,
  .docs-layout,
  .docs-library-shell {
    width: min(calc(100% - 28px), var(--max)) !important;
  }

  .hero.hero-premium {
    min-height: auto;
    padding-top: 58px !important;
  }

  .hero h1 {
    font-size: clamp(48px, 17vw, 76px) !important;
    line-height: .88 !important;
  }

  .hero p,
  .page-hero p,
  .docs-hero p {
    font-size: 14px !important;
  }

  .hero-visual {
    margin-top: 46px;
  }

  .showcase-window {
    height: auto;
  }

  .showcase-body {
    padding: 22px !important;
  }

  .showcase-heading strong {
    font-size: 34px !important;
  }

  .showcase-list {
    display: none;
  }

  .trust-rail-inner,
  .section-head,
  .customer-library-head,
  .review-card-top,
  .lookup-result-foot,
  .footer-bottom {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .trust-pills {
    justify-content: flex-start;
  }

  .section,
  .zx-featured-section,
  .reviews-section,
  .zx-home-faq {
    padding: 76px 0 !important;
  }

  .page-hero.premium-page-hero {
    padding: 66px 0 38px !important;
  }

  .page-hero h1,
  .legal h1,
  .docs-library-hero h1,
  .docs-hero h1 {
    font-size: clamp(44px, 15vw, 66px) !important;
  }

  .store-tools,
  .grid,
  .premium-product-grid,
  .reviews-grid,
  .docs-library-grid,
  .premium-feature-grid,
  .zx-feature-groups,
  .zxfg-grid,
  .product-review-grid,
  .product-requirements-list,
  .docs-grid-two,
  .docs-event-card-grid,
  .review-form-grid,
  .lookup-result-head,
  .order-meta,
  .premium-product-meta {
    grid-template-columns: 1fr !important;
  }

  .product-actions {
    grid-template-columns: 1fr !important;
  }

  .premium-product-nav {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    justify-content: flex-start;
    margin-top: 20px !important;
  }

  .premium-product-section {
    padding: 22px !important;
  }

  .premium-product-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cart-item {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .cart-thumb {
    width: 88px;
  }

  .cart-item > div:last-child {
    grid-column: 2;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .zx-ai-chat {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .zx-chat-launcher {
    min-width: 56px;
    width: 56px;
    padding: 8px;
    margin-left: auto;
  }

  .zx-chat-launcher-label {
    display: none;
  }

  .zx-chat-panel {
    right: 0;
    bottom: 66px;
    width: 100%;
    height: min(650px, calc(100dvh - 92px));
  }
}

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

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Final composition: a full-width opening with the actual resource artwork. */
body, button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
*, *:before, *:after { letter-spacing: 0 !important; }
.hero.hero-premium { min-height: 0; padding: 76px 0 0 !important; }
.hero.hero-premium:before { background: url('/uploads/products/zx-banking-1787239594449.png') center / cover no-repeat !important; opacity: .13; filter: grayscale(1); }
.hero.hero-premium:after { display: none; }
.hero h1 { width: 100% !important; font-size: 112px !important; line-height: 1 !important; max-width: 1200px !important; }
.hero h1 span { display: inline !important; color: #01B1C8 !important; }
.hero-statement { font-size: 26px; margin: 0 0 18px; font-weight: 600; }
.hero p { font-size: 17px !important; max-width: 650px !important; }
.hero-visual { margin-top: 40px; width: 100%; min-height: 0 !important; height: auto !important; }
body[data-page="admin"] main, .admin-shell, .admin-layout { min-width: 0 !important; max-width: 100%; }
body[data-page="admin"] { overflow-wrap: anywhere; }
.showcase-window { width: 100% !important; height: 290px; border: 0 !important; border-top: 1px solid #333 !important; border-radius: 0 !important; box-shadow: none !important; }
.reveal, [data-reveal] { filter: none !important; opacity: 1 !important; transform: none !important; }
.showcase-window:before { opacity: .7; }
.showcase-top { display: none; }
.showcase-body { min-height: 100%; padding: 32px !important; }
.showcase-heading strong { font-size: 42px !important; }
.showcase-row { border-radius: 0 !important; background: #060909cc !important; }
.nav-links { border: 0; background: transparent; }
.nav-links a { border-radius: 0 !important; }
.zx-featured-foot { display: none; }
.section-head h2 { font-size: 48px !important; }
.page-hero h1, .docs-library-hero h1, .docs-hero h1 { font-size: 68px !important; }
.premium-product-info h1 { font-size: 48px !important; }
@media (max-width: 900px) {
  .hero h1 { font-size: 76px !important; }
  .hero.hero-premium { padding-top: 48px !important; }
}
@media (max-width: 600px) {
  .admin-shell { display: block !important; width: 100%; }
  .admin-sidebar, .admin-main, .admin-auth-wrap, .admin-auth-card { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
  .admin-nav { max-width: 100%; overflow-x: auto; }
  .admin-main { padding: 16px !important; }
  .hero h1 { font-size: 44px !important; }
  .hero-statement { font-size: 20px; line-height: 1.4; }
  .hero p { font-size: 15px !important; }
  .hero-visual { margin-top: 32px; }
  .showcase-window { height: auto; }
  .showcase-body { padding: 24px 8px !important; }
  .showcase-heading strong { font-size: 32px !important; }
  .section-head h2 { font-size: 32px !important; }
  .page-hero h1, .docs-library-hero h1, .docs-hero h1 { font-size: 40px !important; }
}

/* Reset legacy geometry so documentation has one consistent reading layout. */
.docs-page { padding: 0 0 64px !important; }
.docs-layout { width: 100% !important; max-width: none !important; grid-template-columns: 248px minmax(0, 1fr) 196px !important; gap: 0 !important; }
.docs-sidebar { width: auto !important; min-width: 0; padding: 28px 18px !important; top: 0 !important; height: calc(100dvh - var(--docs-sidebar-top, 86px)) !important; max-height: none !important; overflow-y: auto; border: 0 !important; border-right: 1px solid #202526 !important; border-radius: 0 !important; background: #070909 !important; box-shadow: none !important; }
.docs-sidebar-head { margin: 16px 0 22px !important; }
.docs-brand-chip { background: #01b1c815 !important; border: 1px solid #01b1c840 !important; color: #01B1C8 !important; box-shadow: none !important; }
.docs-search { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; height: 44px !important; padding: 0 10px !important; border: 1px solid #303738 !important; border-radius: 6px !important; background: #101414 !important; margin-bottom: 24px !important; }
.docs-search:focus-within { border-color: #01B1C8 !important; box-shadow: 0 0 0 2px #01b1c81a; }
.docs-search > span { position: static !important; transform: none !important; flex: 0 0 16px; color: #01B1C8 !important; }
.docs-search input { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #fff !important; font: 13px Arial, sans-serif !important; }
.docs-search input::placeholder { color: #a0abab !important; opacity: 1; }
.docs-search kbd { position: static !important; transform: none !important; flex: 0 0 20px; height: 22px !important; background: transparent !important; color: #8b9898; }
.docs-nav { gap: 16px !important; }
.docs-group-title { font-size: 11px !important; }
.docs-nav-link { padding: 8px 10px !important; font-size: 13px !important; line-height: 1.45 !important; font-weight: 500 !important; }
.docs-content { width: 100% !important; max-width: 1080px !important; padding: 44px 36px 72px !important; min-width: 0 !important; overflow-wrap: anywhere; }
.docs-checklist li { display: block !important; position: relative; padding: 14px 16px 14px 48px !important; min-height: 50px; width: 100%; overflow-wrap: break-word; }
.docs-checklist li::before { position: absolute !important; left: 14px !important; top: 16px !important; width: 20px !important; height: 20px !important; margin: 0 !important; }
.docs-hero { display: block !important; padding: 0 0 32px !important; }
.docs-hero h1 { font-size: 40px !important; line-height: 1.12 !important; max-width: 100% !important; }
.docs-hero-card { width: 100% !important; max-width: none !important; margin-top: 24px; padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid #263030 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.docs-section { padding-top: 36px !important; }
.docs-section h2 { font-size: 28px !important; line-height: 1.2 !important; }
.docs-section h3 { font-size: 19px !important; line-height: 1.4 !important; }
.docs-section pre { max-width: 100%; overflow-x: auto; }
.docs-api-row, .docs-config-row { min-width: 0 !important; }
.docs-toc { width: auto !important; min-width: 0; padding: 38px 16px !important; top: 20px !important; max-height: calc(100vh - 40px) !important; border-left: 1px solid #202526 !important; background: transparent !important; }
.docs-toc a { padding: 7px 8px !important; font-size: 12px !important; line-height: 1.5; font-weight: 500 !important; }
.docs-product-card::after { display: none !important; }
.docs-product-icon, .docs-inline-copy:hover, .docs-event-group[open] summary { color: #01B1C8 !important; border-color: #01b1c838 !important; background: #01b1c80c !important; }
.docs-back-link, .docs-back-link:hover { color: #01B1C8 !important; }

/* Loader rings share a center with the mark, without legacy purple shadows. */
.zx-loader-core { width: 240px; padding: 32px 24px; gap: 20px; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.zx-loader-rings { position: relative !important; width: 96px !important; height: 96px !important; margin: 0 !important; }
.zx-loader-rings span { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; border: 1px solid #01b1c826 !important; border-top-color: #01B1C8 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; animation: zxLoaderSpin 1.8s linear infinite !important; }
.zx-loader-rings span:nth-child(2) { inset: 10px !important; animation-direction: reverse !important; }
.zx-loader-rings span:nth-child(3) { display: none !important; }
.zx-loader-logo { top: 58px !important; left: calc(50% - 22px) !important; width: 44px !important; height: 44px !important; animation: none !important; transform: none !important; background: #01B1C8 !important; box-shadow: 0 0 20px #01b1c822 !important; font: 800 14px Arial, sans-serif !important; }
.zx-loader-copy, .zx-loader-copy strong, .zx-loader-copy small { font-family: Arial, sans-serif !important; }
.zx-loader-copy strong { color: #fff !important; }
.nav-actions > .cart-link .cart-count, .cart-link .cart-count { background: #01B1C8 !important; border-color: #070909 !important; color: #001114 !important; box-shadow: 0 0 14px #01b1c833 !important; }
.release-heading > div span { background: #01b1c814 !important; border-color: #01b1c83d !important; color: #01B1C8 !important; }
.release-line span, .release-entry.current .release-line span { background: #01B1C8 !important; box-shadow: 0 0 0 5px #01b1c818 !important; }
.release-entry { background: #090d0d !important; border-color: #263030 !important; }
.nav-links a.active { box-shadow: inset 0 0 0 1px #01b1c81f !important; }
.premium-video-head span, .premium-demo-link small, .product-faq-list summary span { color: #01B1C8 !important; }
.premium-product-section-head > div > span { color: #01B1C8 !important; }
.docs-note, .docs-api-kind.server, .docs-event-kind.server { background: #01b1c810 !important; border-color: #01b1c82b !important; color: #01B1C8 !important; }
@media (max-width: 1150px) {
  .docs-layout { grid-template-columns: 230px minmax(0, 1fr) !important; }
  .docs-toc { display: none !important; }
  .docs-content { padding: 36px 28px 64px !important; }
}
@media (max-width: 980px) {
  .docs-layout { display: block !important; }
  .docs-mobile-bar { display: flex !important; position: sticky !important; top: 0 !important; z-index: 100; background: #080c0c !important; }
  .docs-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: min(300px, 85vw) !important; height: 100dvh !important; max-height: 100dvh !important; z-index: 10003 !important; transform: translateX(-105%) !important; transition: transform .2s ease; }
  .docs-menu-open .docs-sidebar { transform: translateX(0) !important; }
  .docs-content { padding: 32px 22px 64px !important; }
  .docs-hero h1 { font-size: 32px !important; }
  .docs-api-row, .docs-config-row { grid-template-columns: minmax(0, 1fr) !important; }
}