/* Zlix Logo Refinement v5: keeps Legacy Original unchanged and adds refined original-based options. */
.brand-logo {
  width: 290px;
  max-width: 290px;
  display: block;
  overflow: visible;
}

.brand-logo .zlix-logo-svg {
  width: 290px;
  max-width: none;
  height: auto;
  display: block;
  overflow: visible;
}

.footer-logo,
.footer-logo .zlix-logo-svg,
.footer-logo svg {
  width: 340px;
  max-width: 340px;
  height: auto;
}

.zlix-logo-svg .zlix-logo-option {
  display: none;
}

html[data-logo="legacy"] .zlix-logo-svg .logo-legacy,
html:not([data-logo]) .zlix-logo-svg .logo-legacy,
html[data-logo="refined-tech"] .zlix-logo-svg .logo-refined-tech,
html[data-logo="refined-balanced"] .zlix-logo-svg .logo-refined-balanced,
html[data-logo="refined-strong"] .zlix-logo-svg .logo-refined-strong,
html[data-logo="refined-compact"] .zlix-logo-svg .logo-refined-compact,
html[data-logo="refined-theme"] .zlix-logo-svg .logo-refined-theme,
html[data-logo="refined-theme-accent"] .zlix-logo-svg .logo-refined-theme-accent,
html[data-logo="ring"] .zlix-logo-svg .logo-ring,
html[data-logo="small-mark"] .zlix-logo-svg .logo-small-mark,
html[data-logo="wordmark-underline"] .zlix-logo-svg .logo-wordmark-underline,
html[data-logo="executive-x"] .zlix-logo-svg .logo-executive-x,
html[data-logo="uppercase"] .zlix-logo-svg .logo-uppercase,
html[data-logo="zx"] .zlix-logo-svg .logo-zx,
html[data-logo="control-frame"] .zlix-logo-svg .logo-control-frame,
html[data-logo="minimal"] .zlix-logo-svg .logo-minimal,
html[data-logo="full-name"] .zlix-logo-svg .logo-full-name {
  display: block;
}

@media (max-width: 900px) {
  .brand-logo,
  .brand-logo .zlix-logo-svg {
    width: 240px;
    max-width: 240px;
  }
}

@media (max-width: 720px) {
  .brand-logo,
  .brand-logo .zlix-logo-svg {
    width: 200px;
    max-width: 200px;
  }
}

/* Responsive logo choice:
   Desktop uses Compact Header.
   Mobile uses Refined Strong.
   This only affects the default/legacy comparison path when no explicit logo is being previewed. */

/* When previewing compact on desktop, keep it tuned for the header. */
html[data-logo="refined-compact"] .brand-logo,
html[data-logo="refined-compact"] .brand-logo .zlix-logo-svg {
  width: 290px;
  max-width: 290px;
}

/* Refined Strong needs a touch less width on desktop so it does not crowd the nav. */
html[data-logo="refined-strong"] .brand-logo,
html[data-logo="refined-strong"] .brand-logo .zlix-logo-svg {
  width: 270px;
  max-width: 270px;
}

@media (max-width: 720px) {
  html[data-logo="refined-compact"] .brand-logo,
  html[data-logo="refined-compact"] .brand-logo .zlix-logo-svg {
    width: 200px;
    max-width: 200px;
  }

  html[data-logo="refined-strong"] .brand-logo,
  html[data-logo="refined-strong"] .brand-logo .zlix-logo-svg {
    width: 215px;
    max-width: 215px;
  }
}

/* Final A/B Theme Lab logo rendering.
   Applies only when Theme Lab or published branding selects these explicit logo IDs.
   The inline original SVG remains untouched and becomes visible again for legacy/original-current. */
html[data-logo="final-a-clean"] .brand-logo,
html[data-logo="final-b-dotted"] .brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

html[data-logo="final-a-clean"] .brand-logo > svg,
html[data-logo="final-b-dotted"] .brand-logo > svg {
  display: none !important;
}

html[data-logo="final-a-clean"] .brand-logo::before,
html[data-logo="final-b-dotted"] .brand-logo::before {
  content: "" !important;
  display: inline-block !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

html[data-logo="final-a-clean"] .brand-logo::before {
  background-image: url("/assets/svg/zlix-mark-clean-final-a.svg") !important;
}

html[data-logo="final-b-dotted"] .brand-logo::before {
  background-image: url("/assets/svg/zlix-mark-primary-final-b.svg") !important;
}

html[data-logo="final-a-clean"] .brand-logo::after,
html[data-logo="final-b-dotted"] .brand-logo::after {
  content: "Zlix Technologies" !important;
  display: inline-block !important;
  color: var(--zlix-logo-text, #ffffff) !important;
  font-weight: 850 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
}

/* Header-specific final logo polish.
   Keep Final A/B readable on dark/navy themes while letting Theme Lab palettes drive color. */
html[data-logo="final-a-clean"] .site-header .brand-logo::after,
html[data-logo="final-b-dotted"] .site-header .brand-logo::after {
  color: var(--zlix-logo-text, #ffffff) !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::before,
html[data-logo="final-b-dotted"] .site-header .brand-logo::before {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.22)) !important;
}

@media (max-width: 720px) {
  html[data-logo="final-a-clean"] .brand-logo::before,
  html[data-logo="final-b-dotted"] .brand-logo::before {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  html[data-logo="final-a-clean"] .brand-logo::after,
  html[data-logo="final-b-dotted"] .brand-logo::after {
    font-size: 20px !important;
  }
}



/* Final A/B curated wordmark and tagline options.
   Theme Lab preview-safe controls. Default is Balanced, not Strong. */
html[data-logo="final-a-clean"] .brand-logo::after,
html[data-logo="final-b-dotted"] .brand-logo::after {
  font-weight: 750 !important;
  font-size: clamp(18px, 1.95vw, 25px) !important;
  letter-spacing: -0.035em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="strong"] .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-wordmark="strong"] .brand-logo::after {
  font-weight: 850 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  letter-spacing: -0.045em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="balanced"] .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-wordmark="balanced"] .brand-logo::after {
  font-weight: 750 !important;
  font-size: clamp(18px, 1.95vw, 25px) !important;
  letter-spacing: -0.035em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="refined"] .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-wordmark="refined"] .brand-logo::after {
  font-weight: 700 !important;
  font-size: clamp(18px, 1.85vw, 24px) !important;
  letter-spacing: -0.025em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="compact"] .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-wordmark="compact"] .brand-logo::after {
  font-weight: 800 !important;
  font-size: clamp(17px, 1.65vw, 22px) !important;
  letter-spacing: -0.03em !important;
}

html[data-logo="final-a-clean"][data-logo-tagline="ops"] .brand-logo,
html[data-logo="final-b-dotted"][data-logo-tagline="ops"] .brand-logo {
  gap: 10px !important;
  align-items: center !important;
}

html[data-logo="final-a-clean"][data-logo-tagline="ops"] .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-tagline="ops"] .brand-logo::after {
  content: "Zlix Technologies\A Practical solutions for secure operations" !important;
  white-space: pre-line !important;
  line-height: 1.02 !important;
  font-size: clamp(15px, 1.55vw, 21px) !important;
  letter-spacing: -0.02em !important;
}

html[data-logo="final-a-clean"][data-logo-tagline="ops"][data-logo-wordmark="compact"] .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-tagline="ops"][data-logo-wordmark="compact"] .brand-logo::after {
  font-size: clamp(14px, 1.4vw, 19px) !important;
}

@media (max-width: 860px) {
  html[data-logo="final-a-clean"][data-logo-tagline="ops"] .brand-logo::after,
  html[data-logo="final-b-dotted"][data-logo-tagline="ops"] .brand-logo::after {
    content: "Zlix Technologies" !important;
    white-space: nowrap !important;
  }
}


/* Final A/B separate tagline layout.
   Fixes the header tagline so it is secondary, smaller, and under the wordmark. */
html[data-logo="final-a-clean"] .site-header .brand-logo,
html[data-logo="final-b-dotted"] .site-header .brand-logo {
  align-items: center !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-text,
html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-text {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  line-height: 1.02 !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-wordmark {
  color: var(--zlix-logo-text, #ffffff) !important;
  font-weight: 750 !important;
  font-size: clamp(18px, 1.95vw, 25px) !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="strong"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-wordmark="strong"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-weight: 850 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  letter-spacing: -0.045em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="balanced"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-wordmark="balanced"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-weight: 750 !important;
  font-size: clamp(18px, 1.95vw, 25px) !important;
  letter-spacing: -0.035em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="refined"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-wordmark="refined"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-weight: 700 !important;
  font-size: clamp(18px, 1.85vw, 24px) !important;
  letter-spacing: -0.025em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="compact"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-wordmark="compact"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-weight: 800 !important;
  font-size: clamp(17px, 1.65vw, 22px) !important;
  letter-spacing: -0.03em !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-tagline,
html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-tagline {
  margin-top: 3px !important;
  color: color-mix(in srgb, var(--zlix-logo-text, #ffffff) 78%, transparent) !important;
  font-weight: 600 !important;
  font-size: clamp(9.5px, .78vw, 12px) !important;
  letter-spacing: 0.045em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.16) !important;
}

html[data-logo="final-a-clean"][data-logo-tagline-active="yes"] .site-header .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-tagline-active="yes"] .site-header .brand-logo::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 980px) {
  html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-tagline,
  html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-tagline {
    display: none !important;
  }
}


/* Final A/B duplicate wordmark suppression v2.
   Only suppresses the CSS pseudo wordmark when the structured tagline renderer is active. */
html[data-logo="final-a-clean"][data-logo-custom-render="yes"] .site-header .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-custom-render="yes"] .site-header .brand-logo::after {
  content: none !important;
  display: none !important;
}

html[data-logo="final-a-clean"][data-logo-custom-render="no"] .site-header .brand-logo .zlix-final-logo-text,
html[data-logo="final-b-dotted"][data-logo-custom-render="no"] .site-header .brand-logo .zlix-final-logo-text {
  display: none !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-text,
html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-text {
  pointer-events: none !important;
}


/* Final A/B tagline v3 CSS override. */
html[data-logo="final-a-clean"][data-logo-custom-render="yes"] .site-header .brand-logo::after,
html[data-logo="final-b-dotted"][data-logo-custom-render="yes"] .site-header .brand-logo::after {
  content: none !important;
  display: none !important;
}

html[data-logo="final-a-clean"][data-logo-custom-render="yes"] .site-header .brand-logo .zlix-final-logo-text,
html[data-logo="final-b-dotted"][data-logo-custom-render="yes"] .site-header .brand-logo .zlix-final-logo-text {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  line-height: 1.02 !important;
}

html[data-logo="final-a-clean"][data-logo-custom-render="yes"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-custom-render="yes"] .site-header .brand-logo .zlix-final-logo-wordmark {
  color: var(--zlix-logo-text, #ffffff) !important;
  font-weight: 750 !important;
  font-size: clamp(18px, 1.95vw, 25px) !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
}

html[data-logo="final-a-clean"][data-logo-custom-render="yes"][data-logo-wordmark="strong"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-custom-render="yes"][data-logo-wordmark="strong"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-weight: 850 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  letter-spacing: -0.045em !important;
}

html[data-logo="final-a-clean"][data-logo-custom-render="yes"][data-logo-wordmark="refined"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-custom-render="yes"][data-logo-wordmark="refined"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-weight: 700 !important;
  font-size: clamp(18px, 1.85vw, 24px) !important;
  letter-spacing: -0.025em !important;
}

html[data-logo="final-a-clean"][data-logo-custom-render="yes"][data-logo-wordmark="compact"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"][data-logo-custom-render="yes"][data-logo-wordmark="compact"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-weight: 800 !important;
  font-size: clamp(17px, 1.65vw, 22px) !important;
  letter-spacing: -0.03em !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-tagline,
html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-tagline {
  margin-top: 3px !important;
  color: color-mix(in srgb, var(--zlix-logo-text, #ffffff) 78%, transparent) !important;
  font-weight: 600 !important;
  font-size: clamp(9.5px, .78vw, 12px) !important;
  letter-spacing: 0.045em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.16) !important;
}

html[data-logo="final-a-clean"][data-logo-custom-render="no"] .site-header .brand-logo .zlix-final-logo-text,
html[data-logo="final-b-dotted"][data-logo-custom-render="no"] .site-header .brand-logo .zlix-final-logo-text {
  display: none !important;
}

@media (max-width: 980px) {
  html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-tagline,
  html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-tagline {
    display: none !important;
  }
}


/* Original Current Snapshot visible restore.
   Ensures the old inline SVG logo is visible when Original Current Snapshot is selected. */
html[data-logo="original-current"] .site-header .brand-logo,
html[data-logo="legacy"] .site-header .brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

html[data-logo="original-current"] .site-header .brand-logo > svg,
html[data-logo="legacy"] .site-header .brand-logo > svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-logo="original-current"] .site-header .brand-logo::before,
html[data-logo="original-current"] .site-header .brand-logo::after,
html[data-logo="legacy"] .site-header .brand-logo::before,
html[data-logo="legacy"] .site-header .brand-logo::after {
  content: none !important;
  display: none !important;
}

html[data-logo="original-current"] .site-header .brand-logo .zlix-final-logo-text,
html[data-logo="legacy"] .site-header .brand-logo .zlix-final-logo-text {
  display: none !important;
}


/* Final A/B footer logo Theme Lab sync.
   Mirrors Final A/B logo selections into the footer while keeping footer quieter/smaller.
   Original Current Snapshot and legacy keep the original inline SVG footer logo. */
html[data-logo="final-a-clean"] .site-footer .footer-logo,
html[data-logo="final-b-dotted"] .site-footer .footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-bottom: 14px !important;
  text-decoration: none !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo > svg,
html[data-logo="final-b-dotted"] .site-footer .footer-logo > svg {
  display: none !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::before,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
  content: "" !important;
  display: inline-block !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.20)) !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::before {
  background-image: url("/assets/svg/zlix-mark-clean-final-a.svg") !important;
}

html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
  background-image: url("/assets/svg/zlix-mark-primary-final-b.svg") !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::after {
  content: "Zlix Technologies" !important;
  display: inline-block !important;
  color: var(--zlix-logo-text, #ffffff) !important;
  font-weight: 750 !important;
  font-size: 20px !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.16) !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="strong"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"][data-logo-wordmark="strong"] .site-footer .footer-logo::after {
  font-weight: 850 !important;
  font-size: 21px !important;
  letter-spacing: -0.045em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="refined"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"][data-logo-wordmark="refined"] .site-footer .footer-logo::after {
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.025em !important;
}

html[data-logo="final-a-clean"][data-logo-wordmark="compact"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"][data-logo-wordmark="compact"] .site-footer .footer-logo::after {
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.03em !important;
}

html[data-logo="original-current"] .site-footer .footer-logo,
html[data-logo="legacy"] .site-footer .footer-logo {
  display: block !important;
  width: 190px !important;
  margin-bottom: 12px !important;
}

html[data-logo="original-current"] .site-footer .footer-logo > svg,
html[data-logo="legacy"] .site-footer .footer-logo > svg {
  display: block !important;
  width: 190px !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-logo="original-current"] .site-footer .footer-logo::before,
html[data-logo="original-current"] .site-footer .footer-logo::after,
html[data-logo="legacy"] .site-footer .footer-logo::before,
html[data-logo="legacy"] .site-footer .footer-logo::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 720px) {
  html[data-logo="final-a-clean"] .site-footer .footer-logo::before,
  html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }

  html[data-logo="final-a-clean"] .site-footer .footer-logo::after,
  html[data-logo="final-b-dotted"] .site-footer .footer-logo::after {
    font-size: 18px !important;
  }
}


/* Final A/B proportional logo size CSS.
   These presets scale the icon, wordmark, spacing, footer, and mobile size together. */

/* Default / Balanced */
html[data-logo="final-a-clean"],
html[data-logo="final-b-dotted"] {
  --zlix-final-header-icon: 46px;
  --zlix-final-header-gap: 10px;
  --zlix-final-header-wordmark: clamp(18px, 1.95vw, 25px);
  --zlix-final-footer-icon: 34px;
  --zlix-final-footer-wordmark: 20px;
  --zlix-final-mobile-icon: 38px;
  --zlix-final-mobile-wordmark: 20px;
}

/* Compact */
html[data-logo-size="compact"][data-logo="final-a-clean"],
html[data-logo-size="compact"][data-logo="final-b-dotted"] {
  --zlix-final-header-icon: 42px;
  --zlix-final-header-gap: 9px;
  --zlix-final-header-wordmark: clamp(17px, 1.75vw, 23px);
  --zlix-final-footer-icon: 30px;
  --zlix-final-footer-wordmark: 18px;
  --zlix-final-mobile-icon: 34px;
  --zlix-final-mobile-wordmark: 19px;
}

/* Balanced */
html[data-logo-size="balanced"][data-logo="final-a-clean"],
html[data-logo-size="balanced"][data-logo="final-b-dotted"] {
  --zlix-final-header-icon: 46px;
  --zlix-final-header-gap: 10px;
  --zlix-final-header-wordmark: clamp(18px, 1.95vw, 25px);
  --zlix-final-footer-icon: 34px;
  --zlix-final-footer-wordmark: 20px;
  --zlix-final-mobile-icon: 38px;
  --zlix-final-mobile-wordmark: 20px;
}

/* Large */
html[data-logo-size="large"][data-logo="final-a-clean"],
html[data-logo-size="large"][data-logo="final-b-dotted"] {
  --zlix-final-header-icon: 50px;
  --zlix-final-header-gap: 11px;
  --zlix-final-header-wordmark: clamp(19px, 2.05vw, 26px);
  --zlix-final-footer-icon: 38px;
  --zlix-final-footer-wordmark: 21px;
  --zlix-final-mobile-icon: 40px;
  --zlix-final-mobile-wordmark: 20px;
}

/* Prominent */
html[data-logo-size="prominent"][data-logo="final-a-clean"],
html[data-logo-size="prominent"][data-logo="final-b-dotted"] {
  --zlix-final-header-icon: 54px;
  --zlix-final-header-gap: 12px;
  --zlix-final-header-wordmark: clamp(20px, 2.15vw, 27px);
  --zlix-final-footer-icon: 40px;
  --zlix-final-footer-wordmark: 22px;
  --zlix-final-mobile-icon: 42px;
  --zlix-final-mobile-wordmark: 21px;
}

/* Apply proportional variables to normal one-line header logo. */
html[data-logo="final-a-clean"] .site-header .brand-logo,
html[data-logo="final-b-dotted"] .site-header .brand-logo {
  gap: var(--zlix-final-header-gap) !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::before,
html[data-logo="final-b-dotted"] .site-header .brand-logo::before {
  width: var(--zlix-final-header-icon) !important;
  height: var(--zlix-final-header-icon) !important;
  flex-basis: var(--zlix-final-header-icon) !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::after,
html[data-logo="final-b-dotted"] .site-header .brand-logo::after {
  font-size: var(--zlix-final-header-wordmark) !important;
}

/* Apply proportional variables to structured tagline renderer too. */
html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-wordmark,
html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-wordmark {
  font-size: var(--zlix-final-header-wordmark) !important;
}

/* Keep footer proportional but quieter than the header. */
html[data-logo="final-a-clean"] .site-footer .footer-logo::before,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
  width: var(--zlix-final-footer-icon) !important;
  height: var(--zlix-final-footer-icon) !important;
  flex-basis: var(--zlix-final-footer-icon) !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::after {
  font-size: var(--zlix-final-footer-wordmark) !important;
}

/* Mobile caps. */
@media (max-width: 720px) {
  html[data-logo="final-a-clean"] .site-header .brand-logo::before,
  html[data-logo="final-b-dotted"] .site-header .brand-logo::before {
    width: var(--zlix-final-mobile-icon) !important;
    height: var(--zlix-final-mobile-icon) !important;
    flex-basis: var(--zlix-final-mobile-icon) !important;
  }

  html[data-logo="final-a-clean"] .site-header .brand-logo::after,
  html[data-logo="final-b-dotted"] .site-header .brand-logo::after,
  html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-wordmark,
  html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-wordmark {
    font-size: var(--zlix-final-mobile-wordmark) !important;
  }
}


/* Final A/B header tagline style CSS.
   Makes tagline a true secondary line and gives safe style presets. */

/* Default tagline style is subtle. */
html[data-logo="final-a-clean"],
html[data-logo="final-b-dotted"] {
  --zlix-final-tagline-size: clamp(8.5px, .68vw, 10.5px);
  --zlix-final-tagline-weight: 500;
  --zlix-final-tagline-opacity: .68;
  --zlix-final-tagline-spacing: .025em;
  --zlix-final-tagline-margin: 2px;
}

/* Subtle: safest header treatment. */
html[data-logo-tagline-style="subtle"][data-logo="final-a-clean"],
html[data-logo-tagline-style="subtle"][data-logo="final-b-dotted"] {
  --zlix-final-tagline-size: clamp(8.5px, .68vw, 10.5px);
  --zlix-final-tagline-weight: 500;
  --zlix-final-tagline-opacity: .68;
  --zlix-final-tagline-spacing: .025em;
  --zlix-final-tagline-margin: 2px;
}

/* Balanced: visible, but still secondary. */
html[data-logo-tagline-style="balanced"][data-logo="final-a-clean"],
html[data-logo-tagline-style="balanced"][data-logo="final-b-dotted"] {
  --zlix-final-tagline-size: clamp(9px, .72vw, 11px);
  --zlix-final-tagline-weight: 550;
  --zlix-final-tagline-opacity: .74;
  --zlix-final-tagline-spacing: .03em;
  --zlix-final-tagline-margin: 3px;
}

/* Visible: for marketing-style preview only. */
html[data-logo-tagline-style="visible"][data-logo="final-a-clean"],
html[data-logo-tagline-style="visible"][data-logo="final-b-dotted"] {
  --zlix-final-tagline-size: clamp(9.5px, .78vw, 12px);
  --zlix-final-tagline-weight: 600;
  --zlix-final-tagline-opacity: .82;
  --zlix-final-tagline-spacing: .035em;
  --zlix-final-tagline-margin: 3px;
}

html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-tagline,
html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-tagline {
  margin-top: var(--zlix-final-tagline-margin) !important;
  color: color-mix(in srgb, var(--zlix-logo-text, #ffffff) calc(var(--zlix-final-tagline-opacity) * 100%), transparent) !important;
  font-weight: var(--zlix-final-tagline-weight) !important;
  font-size: var(--zlix-final-tagline-size) !important;
  letter-spacing: var(--zlix-final-tagline-spacing) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}

/* Keep header from becoming billboard-like with a tagline. */
html[data-logo="final-a-clean"][data-logo-tagline-active="yes"] .site-header .brand-logo,
html[data-logo="final-b-dotted"][data-logo-tagline-active="yes"] .site-header .brand-logo {
  gap: max(8px, calc(var(--zlix-final-header-gap, 10px) - 1px)) !important;
}

/* Hide header tagline earlier on narrower layouts. */
@media (max-width: 1120px) {
  html[data-logo="final-a-clean"] .site-header .brand-logo .zlix-final-logo-tagline,
  html[data-logo="final-b-dotted"] .site-header .brand-logo .zlix-final-logo-tagline {
    display: none !important;
  }
}


/* Final A/B public logo fallback.
   Production-safe renderer for public pages where Theme Lab preview JS is not active. */
html[data-logo="final-a-clean"] .site-header .brand-logo,
html[data-logo="final-b-dotted"] .site-header .brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--zlix-final-header-gap, 10px) !important;
  min-width: max-content !important;
  text-decoration: none !important;
  color: var(--zlix-logo-text, #ffffff) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo > svg,
html[data-logo="final-b-dotted"] .site-header .brand-logo > svg {
  display: none !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::before,
html[data-logo="final-b-dotted"] .site-header .brand-logo::before {
  content: "" !important;
  display: block !important;
  width: var(--zlix-final-header-icon, 46px) !important;
  height: var(--zlix-final-header-icon, 46px) !important;
  flex: 0 0 var(--zlix-final-header-icon, 46px) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.24)) !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::before {
  background-image: url("/assets/svg/zlix-mark-clean-final-a.svg") !important;
}

html[data-logo="final-b-dotted"] .site-header .brand-logo::before {
  background-image: url("/assets/svg/zlix-mark-primary-final-b.svg") !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::after,
html[data-logo="final-b-dotted"] .site-header .brand-logo::after {
  content: "Zlix Technologies" !important;
  display: block !important;
  color: var(--zlix-logo-text, #ffffff) !important;
  font-family: var(--zlix-font-display, inherit) !important;
  font-size: var(--zlix-final-header-wordmark, clamp(18px, 1.95vw, 25px)) !important;
  font-weight: 760 !important;
  line-height: .95 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.16) !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo,
html[data-logo="final-b-dotted"] .site-footer .footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo > svg,
html[data-logo="final-b-dotted"] .site-footer .footer-logo > svg {
  display: none !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::before,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
  content: "" !important;
  display: block !important;
  width: var(--zlix-final-footer-icon, 34px) !important;
  height: var(--zlix-final-footer-icon, 34px) !important;
  flex: 0 0 var(--zlix-final-footer-icon, 34px) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::before {
  background-image: url("/assets/svg/zlix-mark-clean-final-a.svg") !important;
}

html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
  background-image: url("/assets/svg/zlix-mark-primary-final-b.svg") !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::after {
  content: "Zlix Technologies" !important;
  display: block !important;
  color: var(--zlix-logo-text, #ffffff) !important;
  font-family: var(--zlix-font-display, inherit) !important;
  font-size: var(--zlix-final-footer-wordmark, 20px) !important;
  font-weight: 740 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  html[data-logo="final-a-clean"] .site-header .brand-logo::before,
  html[data-logo="final-b-dotted"] .site-header .brand-logo::before {
    width: var(--zlix-final-mobile-icon, 38px) !important;
    height: var(--zlix-final-mobile-icon, 38px) !important;
    flex-basis: var(--zlix-final-mobile-icon, 38px) !important;
  }

  html[data-logo="final-a-clean"] .site-header .brand-logo::after,
  html[data-logo="final-b-dotted"] .site-header .brand-logo::after {
    font-size: var(--zlix-final-mobile-wordmark, 20px) !important;
  }
}