/* Restore SvgTrace's original purple/pink palette on the homepage. */
body.ux-landing {
  --primary-color: #331b69;
  --primary-color-rgb: 51, 27, 105;
  --secondary-color: #f453c4;
  --secondary-color-rgb: 244, 83, 196;
  --production-paper: #fff;
  --production-border: #e9e5f0;
  background: #fff;
}
body.ux-landing :is(#wrapper, #content) { background: #fff; }
body.ux-landing :is(h1, h2, h3, h4, h5, h6),
.ux-landing .machine-card h3 { color: #331b69; }
.ux-landing #content .hero-section {
  background: linear-gradient(180deg, #fff, #f8f9fa) !important;
  border-color: #e9e5f0;
}
.ux-landing #navbar.site-navigation {
  --primary-color: #331b69;
  --primary-color-rgb: 51, 27, 105;
  --secondary-color: #f453c4;
  --secondary-color-rgb: 244, 83, 196;
}
.ux-landing #navbar.site-navigation .st-desktop-header { background: #fff !important; border-color: #e9e5f0; }
.ux-landing #navbar.site-navigation .st-mobile-bar { background: #fff; }
.ux-landing #navbar.site-navigation #mainmenu a:hover,
.ux-landing .hero-pricing:hover { color: #6542c9; }
.ux-landing #navbar.site-navigation .btn-main,
.ux-landing #navbar.site-navigation .st-mobile-bar-cta,
.ux-landing #navbar.site-navigation .st-mobile-drawer-cta,
.ux-landing #content a.btn-main,
.ux-landing .hero-signup { background: #2563eb !important; border-color: #2563eb !important; }
.ux-landing #content a.btn-main:hover,
.ux-landing .hero-signup:hover { background: #1d4ed8 !important; }
.ux-landing #navbar .st-new-badge,
.ux-landing .hero-section .production-eyebrow,
.ux-landing .production-formats { background: #f2eafb; color: #331b69; }
.ux-landing #navbar .st-mobile-trace-orders,
.ux-landing #navbar .lang-menu a[aria-current="true"],
.ux-landing .machine-format { background: #f2eafb; color: #6542c9; border-color: #e1d8f1; }
.ux-landing #upload-area.upload-area {
  background: linear-gradient(135deg, #e0f7fa4d, #e0f7fa80);
  border: 2px dashed #026e97;
  box-shadow: 0 4px 12px #026e971a;
}
.ux-landing #upload-area.upload-area:hover,
.ux-landing #upload-area.upload-area.dragging { background: #e0f7fab3; border-color: #025a7a; }
.ux-landing #upload-area .upload-icon { color: #026e97; }
.ux-landing #upload-area .upload-link { color: #026e97; }
.ux-landing :is(.machine-workflows, .production-examples) { background: #fff; border-color: #e9e5f0; }
.ux-landing .machine-card,
.ux-landing .production-photo img,
.ux-landing .ux-order-card { border-color: #e9e5f0; }
.ux-landing :is(.social-video-section, .advanced-editing) { background: #f8f9fa; border-color: #e9e5f0; }
.ux-landing #content #trace-orders-promo { background: #f4effb !important; border-color: #e5daf3; }
.ux-landing .ux-order-card { background: #fff; }
.ux-landing .ux-order-link:hover,
.ux-landing .editing-tool[aria-pressed=true] { background: #f2eafb; color: #331b69; border-color: #d9cbed; }
.ux-landing .ux-order-link:focus-visible,
.ux-landing a:focus-visible,
.ux-landing .upload-link:focus-visible { outline-color: #6542c9; }
.ux-landing #footer,
.ux-landing #footer footer.footer { background: #fff; border-color: #e9e5f0; }
.ux-landing #footer .subfooter { background: #f8f9fa; border-color: #e9e5f0; }
.ux-landing #footer .footer-links a:hover { color: #6542c9; }

/* Original homepage artwork, below the upload hero. */
.ux-landing :is(#artwork-before-after, #artwork-color-layers) { padding: 48px 0 !important; margin: 0 !important; }
.ux-landing :is(#artwork-before-after, #artwork-color-layers) .container { max-width: 1184px; padding: 0 32px; }
.ux-landing :is(#artwork-before-after, #artwork-color-layers) .row { row-gap: 28px; }
.ux-landing :is(#artwork-before-after, #artwork-color-layers) h2 { font-size: 30px; line-height: 1.2; }
.ux-landing :is(#artwork-before-after, #artwork-color-layers) p { font-size: 16px; line-height: 1.65; }
.ux-landing #artwork-color-layers { background: #f8f9fa; }
.ux-landing #artwork-color-layers object { display: block; width: 100%; aspect-ratio: 2 / 1; }
.ux-landing [data-artwork-comparison] { aspect-ratio: 2 / 1; height: auto; border-radius: 12px; }
.ux-landing [data-artwork-comparison] .slider-image { background-size: contain; background-repeat: no-repeat; }
.ux-landing .artwork-comparison-range { position: absolute; inset: 0; z-index: 12; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; touch-action: pan-y; }
.ux-landing [data-artwork-comparison]:focus-within { outline: 3px solid #2563eb; outline-offset: 4px; }
.ux-landing [data-artwork-comparison] .slider-line { pointer-events: none; }
@media (max-width: 767px) {
  .ux-landing :is(#artwork-before-after, #artwork-color-layers) .container { padding: 0 24px; }
  .ux-landing :is(#artwork-before-after, #artwork-color-layers) { padding: 32px 0 !important; }
}