/* Homepage layout, product scenes and motion. Shared chrome and typography are separate. */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-copy {
  text-align: center;
  margin: 0 auto;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
}

.kicker:before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--radius-5);
  background: linear-gradient(90deg,var(--violet),var(--blue),var(--cyan));
}

.kicker:after {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--radius-5);
  background: linear-gradient(90deg,var(--violet),var(--blue),var(--cyan));
}

.ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.meta span {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.meta i {
  border-radius: var(--radius-4);
}

.hero-product {
  z-index: 1;
}

.halo {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
  border-radius: var(--radius-4);
  animation: breathe 7s ease-in-out infinite;
}

.frame {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(203,213,225,.88);
  transition: .3s;
}

.frame img {
  width: 100%;
  height: auto;
}

.frame.main {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
  animation: floatA 8s ease-in-out infinite;
}

.frame.search {
  z-index: 4;
  transform: rotate(-1deg);
  animation: floatB 9s ease-in-out infinite;
}

.frame.shortcut {
  z-index: 3;
  transform: rotate(1deg);
  animation: floatC 10s ease-in-out infinite;
}

.signal-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

.signal {
  display: flex;
  align-items: center;
  gap: var(--space-13);
  border-right: 1px solid var(--line);
}

.signal:last-child {
  border-right: 0;
}

.signal-dot {
  border-radius: var(--radius-4);
  flex: 0 0 auto;
}

.signal b {
  display: block;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr .72fr;
  align-items: end;
}

.section-head p {
  margin: 0;
}

.workflow-tabs {
  flex-wrap: wrap;
}

.workflow-tab {
  cursor: pointer;
}

.workflow-stage {
  position: relative;
}

.workflow-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .55s ease,transform .55s ease;
  pointer-events: none;
}

.workflow-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.workflow-image img {
  height: auto;
}

.workflow-progress {
  gap: var(--space-7);
}

.workflow-progress span {
  border-radius: var(--radius-5);
}

.cta-box {
  position: relative;
  overflow: hidden;
}

.cta-box p {
  font-size: var(--text-16);
  margin: 0;
}

.lazy.reveal-pending {
  opacity: 0;
  transform: translateY(18px);
}

.lazy.reveal-enter {
  animation: sectionReveal .65s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.lazy.reveal-pending:focus-within {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lazy.reveal-pending { opacity: 1; transform: none; }
  .lazy.reveal-enter { animation: none; }
}

@media print {
  .lazy.reveal-pending { opacity: 1; transform: none; }
  .lazy.reveal-enter { animation: none; }
}

img[loading="lazy"] {
  background: var(--color-f1f5f9);
}

@keyframes floatA {
  0%,100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

@keyframes floatB {
  0%,100% {
    transform: rotate(-1deg) translateY(0);
  }

  50% {
    transform: rotate(-1deg) translateY(7px);
  }
}

@keyframes floatC {
  0%,100% {
    transform: rotate(1deg) translateY(0);
  }

  50% {
    transform: rotate(1deg) translateY(-6px);
  }
}

@keyframes breathe {
  0%,100% {
    transform: translate(-50%,-50%) scale(1);
    opacity: .86;
  }

  50% {
    transform: translate(-50%,-50%) scale(1.05);
    opacity: 1;
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 10px));
  }
}

@media(max-width:1050px) {
  .signal-grid {
    grid-template-columns: 1fr 1fr;
  }

  .signal:nth-child(2) {
    border-right: 0;
  }

  .signal:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
}

@media(max-width:720px) {
  .signal-grid {
    grid-template-columns: 1fr;
  }

  .signal {
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .signal:first-child {
    border-top: 0;
  }

  .section-head {
    display: block;
  }

  .section-head p {
    margin-top: var(--space-14);
  }

  .cta .ctas {
    justify-content: flex-start;
    margin-top: var(--space-24);
  }
}

.plugin-panel {
  overflow: hidden;
  position: relative;
}

.plugin-panel:before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.plugin-panel-head {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr .7fr;
  align-items: end;
}

.plugin-panel-head p {
  font-size: var(--text-15);
  line-height: 1.7;
  margin: 0;
}

.plugin-small {
  aspect-ratio: 1/1;
  overflow: hidden;
  transition: .2s ease;
}

@media(max-width:1050px) {
  .plugin-panel-head {
    grid-template-columns: 1fr;
  }
}

.hero-product:before {
  left: 50%;
  transform: translateX(-50%);
}

.signal-strip {
  position: relative;
}

.signal-strip:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--mixso-violet),var(--mixso-blue),var(--mixso-cyan),transparent);
  opacity: .45;
}

.plugin-panel {
  color: var(--text) !important;
}

.plugin-panel-head {
  color: var(--text) !important;
}

.plugin-panel-head .kicker {
  color: var(--blue) !important;
}

.plugin-scroll-wrap {
  overflow: hidden;
}

.plugin-row-scroll {
  width: max-content;
  padding: var(--space-4) 0;
}

.plugin-row-scroll.row-1 {
  animation: scrollLeft 32s linear infinite;
}

.plugin-row-scroll.row-2 {
  animation: scrollRight 36s linear infinite;
  margin-top: var(--space-12);
}

.plugin-scroll-wrap:hover .plugin-row-scroll {
  animation-play-state: paused;
}

.plugin-small {
  flex: 0 0 72px;
  background: var(--color-white) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
}

.plugin-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 6px));
  }
}

@keyframes scrollRight {
  from {
    transform: translateX(calc(-50% - 6px));
  }

  to {
    transform: translateX(0);
  }
}

.workflow-tab.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: var(--radius-2);
}

.cta-box:before {
  content: "";
  position: absolute;
  top: 0;
  border-radius: var(--radius-9);
}

body {
  letter-spacing: 0;
}

a {
  -webkit-tap-highlight-color: transparent;
}

button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 3px solid rgba(49, 92, 255, .25);
  outline-offset: 3px;
}

button:focus-visible {
  outline: 3px solid rgba(49, 92, 255, .25);
  outline-offset: 3px;
}

.hero:before {
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 62%);
}

.kicker {
  color: var(--blue);
  font-size: var(--text-14);
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
}

.kicker:before {
  display: none;
}

.kicker:after {
  display: none;
}

.ctas {
  gap: var(--space-10);
  margin-top: var(--space-29);
}

.meta {
  gap: var(--space-20);
  margin-top: var(--space-21);
  color: var(--color-8892a1);
  font-size: var(--text-13);
}

.meta i {
  width: 6px;
  height: 6px;
  background: var(--color-27a56e);
  box-shadow: var(--shadow-8);
}

.hero-product:before {
  top: 34px;
  width: min(970px, 84vw);
}

.halo {
  width: 820px;
  height: 430px;
  background: radial-gradient(circle, rgba(49, 92, 255, .105), rgba(117, 98, 238, .045) 38%, transparent 68%);
  filter: blur(20px);
  animation-duration: 10s;
}

.frame {
  border-color: rgba(198, 207, 218, .9);
  background: var(--color-eef2f6);
}

.frame img {
  filter: saturate(1.015) contrast(1.008);
}

.frame.main {
  animation-duration: 11s;
}

.frame.search {
  animation-duration: 12s;
}

.frame.shortcut {
  animation-duration: 13s;
}

.signal-strip {
  border-color: var(--line);
}

.signal-strip:before {
  display: none;
}

.signal {
  padding: var(--space-22) var(--space-25);
  border-color: var(--line);
}

.signal-dot {
  width: 9px;
  height: 9px;
}

.signal:nth-child(2) .signal-dot {
  opacity: .82;
}

.signal:nth-child(3) .signal-dot {
  opacity: .66;
}

.signal:nth-child(4) .signal-dot {
  opacity: .5;
}

.signal b {
  margin-bottom: var(--space-5);
  font-size: var(--text-15);
  font-weight: 600;
}

.signal span {
  color: var(--color-778292);
  font-size: var(--text-13);
}

.section {
  padding: var(--space-108) 0;
}

.section-head {
  gap: var(--space-60);
  margin-bottom: var(--space-44);
}

.section-head p {
  color: var(--color-6b7687);
  font-size: var(--text-16);
  line-height: 1.75;
}

.workflow-tab.active:after {
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--blue);
}

.workflow-progress span {
  height: 3px;
  background: var(--color-dce2ea);
}

.workflow-progress span.on {
  background: var(--blue);
}

.workflow-experience {
  display: grid;
  align-items: stretch;
}

.workflow-tabs {
  align-items: stretch;
  margin: 0;
}

.workflow-tab {
  overflow: hidden;
  font-size: var(--text-13);
  font-weight: 600;
  height: auto;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.workflow-tab:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .23);
  outline-offset: 2px;
}

.workflow-tab-index {
  display: grid;
  place-items: center;
  font-weight: 600;
  letter-spacing: .06em;
}

.workflow-tab b {
  display: block;
}

.workflow-tab.active:after {
  display: none;
}

.workflow-copy {
  align-self: start;
}

.workflow-image {
  position: relative;
  overflow: visible;
  background: var(--color-white);
}

.workflow-image:before {
  content: "Quick  ·  Workflow preview";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  align-items: center;
  padding: 0 var(--space-15);
  border-bottom: 1px solid var(--color-e8edf4);
  background: rgba(255, 255, 255, .92);
  color: var(--color-687587);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
}

html:lang(zh) .workflow-image:before {
  content: "Quick  ·  场景演示";
}

.workflow-image:after {
  content: "";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-4);
  background: var(--color-3ad28a);
  box-shadow: var(--shadow-9);
}

.workflow-image img {
  display: block;
  filter: saturate(1.02) contrast(1.015);
}

.workflow-progress {
  margin-top: var(--space-28);
}

.workflow-progress span {
  width: 27px;
}

.quick-launch-demo {
  display: grid;
  place-items: center;
  padding: var(--space-46) var(--space-28) var(--space-28);
}

.launch-key {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  margin: 0 0 var(--space-22);
  color: var(--color-8190a7);
}

.launch-key kbd {
  display: inline-grid;
  place-items: center;
  min-width: 49px;
  height: 31px;
  padding: 0 var(--space-9);
  border: 1px solid var(--color-d8e1ef);
  border-bottom-color: var(--color-c1cede);
  border-radius: var(--radius-10);
  background: var(--color-white);
  color: var(--color-40516b);
  box-shadow: var(--shadow-10);
  font-family: var(--font-stack-5);
  font-size: var(--text-12);
  font-weight: 600;
}

.launch-search kbd {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-d8e1ef);
  border-bottom-color: var(--color-c1cede);
  background: var(--color-white);
  font-family: var(--font-stack-5);
  font-weight: 600;
}

.launch-key i {
  font-style: normal;
  font-size: var(--text-16);
  font-weight: 600;
}

.launch-window {
  width: min(100%, 420px);
  overflow: hidden;
  border: 1px solid rgba(203, 215, 233, .9);
  border-radius: var(--radius-11);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-11);
}

.launch-window-top {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 31px;
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--color-ecf0f6);
  color: var(--color-8793a5);
  font-size: var(--text-10);
}

.launch-window-top span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-4);
  background: var(--color-d6deeb);
}

.launch-window-top b {
  margin-left: var(--space-6);
  color: var(--color-6d7c91);
  font-size: var(--text-10);
  letter-spacing: .02em;
}

.launch-search {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  margin: var(--space-14);
  padding: var(--space-10) var(--space-11);
  border: 1px solid var(--color-d9e4f7);
  border-radius: var(--radius-12);
  color: var(--color-9aa7b7);
  font-size: var(--text-12);
}

.launch-search em {
  width: 11px;
  height: 11px;
  border: 2px solid var(--color-7999e9);
  border-radius: var(--radius-4);
  position: relative;
}

.launch-search em:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 2px;
  right: -4px;
  bottom: -2px;
  transform: rotate(45deg);
  border-radius: var(--radius-13);
}

.launch-search kbd {
  min-width: 23px;
  height: 20px;
  margin-left: auto;
  padding: 0 var(--space-5);
  box-shadow: none;
  border-radius: var(--radius-14);
  color: var(--color-9aa7b7);
  font-size: var(--text-9);
}

.launch-shortcuts {
  display: flex;
  gap: var(--space-12);
  padding: 0 var(--space-14) var(--space-15);
  color: var(--color-8996a8);
  font-size: var(--text-10);
}

.launch-shortcuts span {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.launch-shortcuts b {
  color: var(--color-5d73a5);
  font-size: var(--text-10);
}

.plugin-panel-head {
  gap: var(--space-48);
}

.plugin-row-scroll {
  gap: var(--space-11);
}

.plugin-row-scroll.row-1 {
  animation-duration: 42s;
}

.plugin-row-scroll.row-2 {
  animation-duration: 46s;
}

.plugin-small {
  width: 70px !important;
  height: 70px !important;
  flex-basis: 70px;
}

.plugin-small:hover {
  transform: translateY(-2px) scale(1.025) !important;
  border-color: var(--color-cbd7ff) !important;
  box-shadow: var(--shadow-12) !important;
}

.cta-box:before {
  left: 48px;
  width: 150px;
  height: 3px;
}



@keyframes floatA {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

@keyframes floatB {
  0%, 100% {
    transform: rotate(-.7deg) translateY(0);
  }

  50% {
    transform: rotate(-.7deg) translateY(4px);
  }
}

@keyframes floatC {
  0%, 100% {
    transform: rotate(.7deg) translateY(0);
  }

  50% {
    transform: rotate(.7deg) translateY(-3px);
  }
}

@media (max-width: 720px) {
  .hero-product:before {
    top: 27px;
  }

  .section {
    padding: var(--space-74) 0;
  }

  .workflow-tabs {
    overflow-x: auto;
  }

  .workflow-image:before {
    height: 30px;
    padding: 0 var(--space-12);
    font-size: var(--text-10);
  }

  .workflow-image:after {
    top: 11px;
    right: 12px;
  }

  .plugin-small {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px;
  }

  .cta-box:before {
    left: 26px;
    width: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  *:before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.workflow-heading {
  align-items: start;
  margin-bottom: var(--space-38);
}

.workflow-heading p {
  max-width: 470px;
  padding-top: var(--space-5);
  font-size: var(--text-15);
  line-height: 1.8;
}

.workflow-experience {
  grid-template-columns: 222px minmax(0, 1fr);
  gap: var(--space-18);
}

.workflow-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-10) 0;
  border: 0;
  border-radius: var(--radius-15);
  background: transparent;
  box-shadow: none;
}

.workflow-tabs:before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 20px;
  width: 1px;
  background: var(--color-dce3ec);
}

.workflow-tab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-11);
  min-height: 72px;
  width: 100%;
  padding: var(--space-9) var(--space-12) var(--space-9) 0;
  border: 0;
  border-radius: var(--radius-15);
  background: transparent;
  color: var(--color-677386);
  text-align: left;
  box-shadow: none;
  transform: none;
}

.workflow-tab:hover {
  border-color: transparent;
  background: transparent;
  color: var(--color-26344a);
  transform: none;
}

.workflow-tab:after {
  display: none;
}

.workflow-tab-index {
  width: 41px;
  height: 41px;
  border: 1px solid var(--color-dce3ec);
  border-radius: var(--radius-4);
  background: var(--color-f7f9fc);
  color: var(--color-8b96a6);
  font-size: var(--text-10);
  box-shadow: var(--shadow-13);
}

.workflow-tab b {
  font-family: var(--font-stack-6);
  color: inherit;
  font-weight: 600;
}

.workflow-tab.active {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workflow-tab.active .workflow-tab-index {
  color: var(--color-white);
}

.workflow-tab.active b {
  color: var(--color-18243a);
  font-weight: 600;
}

.workflow-stage {
  min-height: 600px;
  min-width: 0;
  background: transparent;
}

.workflow-slide {
  gap: var(--space-22);
}

.workflow-copy {
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: var(--space-32);
  align-items: center;
  padding: 0 0 var(--space-22);
  border-bottom: 1px solid var(--color-e8edf3);
}

.workflow-copy p {
  margin: 0;
  color: var(--color-6f7c8e);
  font-size: var(--text-14);
  line-height: 1.75;
}

.workflow-progress {
  display: none;
}

.workflow-image {
  border-radius: var(--radius-17);
}

.workflow-image:before {
  border-radius: var(--radius-18);
}

.workflow-image img {
  border-radius: var(--radius-17);
}

@media (max-width: 960px) {
  .workflow-experience {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .workflow-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
  }

  .workflow-tabs:before {
    top: 20px;
    right: 10%;
    bottom: auto;
    left: 10%;
    width: auto;
    height: 1px;
  }

  .workflow-tab {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-8);
    padding: 0 var(--space-8) var(--space-12);
    text-align: center;
  }

  .workflow-tab-index {
    box-shadow: var(--shadow-15);
  }
}

@media (max-width: 720px) {
  .workflow-heading {
    margin-bottom: var(--space-28);
  }

  .workflow-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2) 0;
    overflow: visible;
  }

  .workflow-tabs:before {
    display: none;
  }

  .workflow-tab {
    grid-template-columns: 34px 1fr;
    justify-items: start;
    min-width: 0;
    min-height: 56px;
    padding: var(--space-6) var(--space-8);
    text-align: left;
  }

  .workflow-tab-index {
    width: 30px;
    height: 30px;
    box-shadow: none;
  }

  .workflow-slide {
    gap: var(--space-18);
  }

  .workflow-copy {
    padding-bottom: var(--space-17);
  }

  .workflow-copy p {
    margin-top: var(--space-8);
    font-size: var(--text-13);
  }

  .quick-launch-demo {
    padding: var(--space-44) var(--space-14) var(--space-18);
  }
}

body {
  color: var(--color-151a22);
  font-family: var(--font-stack-7);
}

.hero:before {
  opacity: .18;
}

.hero .lead {
  color: var(--color-596678);
  line-height: 1.75;
}

.hero-product:before {
  height: 2px;
  opacity: .52;
}

.halo {
  opacity: .72;
}

.frame {
  border-radius: var(--radius-19);
  box-shadow: var(--shadow-16);
}

.frame.main {
  box-shadow: var(--shadow-17);
}

.frame.search {
  box-shadow: var(--shadow-18);
}

.frame.shortcut {
  box-shadow: var(--shadow-18);
}

.signal-strip {
  background: var(--color-fbfcfe);
  box-shadow: none;
}

.signal {
  min-height: 88px;
}

.section.soft {
  background: var(--color-f5f7fa);
}

.section-head p {
  max-width: 500px;
}

.plugin-panel:before {
  inset: 0 auto auto 0;
  width: 148px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), transparent) !important;
}

.plugin-panel-head p {
  color: var(--color-697688) !important;
}

.plugin-scroll-wrap {
  padding: var(--space-4) 0 var(--space-12);
}

.plugin-small {
  border-color: var(--color-dde4ec) !important;
  border-radius: var(--radius-17) !important;
  box-shadow: var(--shadow-19) !important;
}

.cta-box p {
  color: var(--color-697688);
}

.workflow-image:before {
  display: none;
}

.workflow-image:after {
  display: none;
}

.workflow-slide:nth-child(-n+3) .workflow-image {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-dbe3ec);
  background-color: var(--color-edf2f7);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 12px 32px -18px rgba(32,68,58,.2);
}

.workflow-slide .workflow-image {
  width: min(100%, 720px);
}

.workflow-slide:nth-child(1) .workflow-image {
  aspect-ratio: 1380 / 822;
}

.workflow-slide:nth-child(2) .workflow-image {
  aspect-ratio: 1382 / 1033;
  background-image: url("/mixso-assets/assets/quick-clipboard.png?v=f7b5cad43d45");
}

.workflow-slide:nth-child(3) .workflow-image {
  aspect-ratio: 1370 / 1028;
}

.workflow-slide:nth-child(4) .workflow-image {
  aspect-ratio: 1392 / 1032;
  overflow: hidden;
}

.workflow-slide:nth-child(1) .workflow-image,
.workflow-slide:nth-child(3) .workflow-image,
.workflow-slide:nth-child(4) .workflow-image {
  max-height: none;
  background-color: transparent;
}

.workflow-slide:nth-child(1) .workflow-image > img,
.workflow-slide:nth-child(3) .workflow-image > img,
.workflow-slide:nth-child(4) .workflow-image > img {
  display: block;
  height: auto;
  max-height: none;
  filter: none;
}

.workflow-slide:nth-child(2) .workflow-image > img {
  display: none;
}

.hero-copy {
  max-width: 1040px;
}

.frame {
  animation: none!important;
  background-color: var(--color-eef3f8);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
}

.frame img {
  opacity: 0;
}

.frame.main {
  width: min(940px,84vw);
  background-image: url("/mixso-assets/assets/quick-home.png?v=6f4b462cd0cc");
}

.frame.search {
  left: 0;
  bottom: 4px;
  width: min(390px,39vw);
  background-image: url("/mixso-assets/assets/quick-clipboard.png?v=f7b5cad43d45");
}

.frame.shortcut {
  right: 0;
  bottom: -8px;
  width: min(390px,39vw);
  background-image: url("/mixso-assets/assets/quick-plugin-market.png?v=e73b234d31c9");
}

.plugin-panel {
  display: grid;
  grid-template-columns: minmax(280px,.78fr) minmax(420px,1.22fr);
  gap: var(--space-52);
  align-items: center;
  padding: var(--space-42)!important;
  border: 1px solid var(--color-dce4ee)!important;
  border-radius: var(--radius-20) !important;
  background: var(--color-white)!important;
  box-shadow: var(--shadow-21) !important;
}

.plugin-panel:before {
  display: none;
}

.plugin-panel-head {
  display: block;
  margin: 0;
  padding: 0;
}

.plugin-panel-copy p {
  margin: var(--space-22) 0 0;
  color: var(--color-697688);
  font-size: var(--text-15);
  line-height: 1.78;
}

.plugin-panel-link {
  display: inline-flex;
  margin-top: var(--space-20);
  color: var(--blue);
  font-size: var(--text-14);
  font-weight: 600;
}

.plugin-scroll-wrap {
  min-height: 350px;
  border: 1px solid var(--color-dce4ee);
  border-radius: var(--radius-19);
  background: #edf2f7 url("/mixso-assets/assets/quick-plugin-market.png?v=e73b234d31c9") top left/contain no-repeat;
  box-shadow: var(--shadow-22);
  mask-image: none;
  -webkit-mask-image: none;
}

.plugin-row-scroll {
  display: none;
}

@media(max-width:900px) {
  .plugin-panel {
    grid-template-columns: 1fr;
    gap: var(--space-30);
  }

  .plugin-scroll-wrap {
    min-height: 0;
    aspect-ratio: 1373/1030;
  }
}

@media(max-width:720px) {
  .frame.main {
    width: 92vw;
  }

  .frame.search {
    width: 42vw;
  }

  .frame.shortcut {
    width: 42vw;
  }

  .plugin-panel {
    padding: var(--space-28) var(--space-22)!important;
  }
}

.hero-product {
  max-width: 1080px;
}

.hero-stage {
  grid-template-columns: minmax(0,2fr) minmax(260px,1fr);
  grid-template-rows: repeat(2,auto);
  align-items: center;
  justify-content: center;
  gap: var(--space-16) var(--space-18);
  perspective: none;
}

.hero-stage .halo {
  display: none;
}

.hero-stage .frame {
  inset: auto!important;
  transform: none!important;
  width: 100%!important;
  border-radius: var(--radius-16);
  background-size: cover;
  background-position: top left;
}

.hero-stage .frame.main {
  grid-row: 1/3;
  grid-column: 1;
  background-size: contain;
  box-shadow: var(--shadow-23);
}

.hero-stage .frame.search {
  grid-column: 2;
}

.hero-stage .frame.shortcut {
  grid-column: 2;
}

.window-section {
  overflow: hidden;
  border-top: 1px solid var(--color-e1e7ef);
  border-bottom: 1px solid var(--color-e1e7ef);
  color: var(--color-1a2438);
}

.window-advantage {
  display: grid;
  grid-template-columns: minmax(300px,.8fr) minmax(520px,1.2fr);
  align-items: center;
}

.window-copy>p {
  max-width: 590px;
  margin: var(--space-25) 0 var(--space-32);
  color: var(--color-667286);
  font-size: var(--text-17);
  line-height: 1.8;
}

.window-points {
  border-top: 1px solid var(--color-dce3ec);
}

.window-points>div {
  display: grid;
  grid-template-columns: minmax(145px,.8fr) minmax(170px,1.2fr);
  gap: var(--space-20);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-dce3ec);
}

.window-points b {
  font-size: var(--text-14);
  color: var(--color-1a2438);
}

.window-points span {
  font-size: var(--text-14);
  line-height: 1.55;
  color: var(--color-6f7c8f);
}

.window-demo {
  gap: var(--space-16);
}

.standalone-window {
  position: relative;
  min-height: 155px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-ced9e7);
  border-radius: var(--radius-11);
  background-color: var(--color-edf2f7);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
  box-shadow: var(--shadow-24);
}

.standalone-window.clipboard {
  background-image: url("/mixso-assets/assets/quick-clipboard.png?v=f7b5cad43d45");
}

.standalone-window.json {
  background-image: url("/mixso-assets/assets/quick-home.png?v=6f4b462cd0cc");
}

.standalone-window.market {
  background-image: url("/mixso-assets/assets/quick-plugin-market.png?v=e73b234d31c9");
}

html[lang="zh-CN"] .standalone-window.market {
  background-image: url("/mixso-assets/assets/quick-plugin-market-zh-20260928.webp?v=d9cad88c58d7");
}

.window-bar {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-12);
}

.window-bar i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-4);
}

.window-bar b {
  margin-left: var(--space-5);
  font-size: var(--text-12);
  letter-spacing: .01em;
}

.standalone-window>span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: var(--space-6) var(--space-9);
  border-radius: var(--radius-1);
  font-size: var(--text-11);
}

@media(max-width:900px) {
  .window-advantage {
    grid-template-columns: 1fr;
  }

  .window-demo {
    grid-template-columns: 1fr 1fr;
  }

  .standalone-window:first-child {
    grid-column: 1/-1;
  }
}

@media(max-width:720px) {
  .hero-stage {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .hero-stage .frame.main {
    grid-column: auto;
  }

  .window-points>div {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .window-demo {
    grid-template-columns: 1fr;
  }

  .standalone-window:first-child {
    grid-column: auto;
  }
}

.hero {
  display: grid;
  grid-template-columns: minmax(390px,.82fr) minmax(560px,1.18fr);
  gap: var(--space-54);
  align-items: center;
  width: min(calc(100% - 64px),1240px);
  min-height: 690px;
  margin: 0 auto;
  padding: var(--space-76) 0 var(--space-68);
  text-align: left;
  background: radial-gradient(circle at 82% 12%,rgba(7,139,112,.1),transparent 26%),
    radial-gradient(circle at 70% 42%,rgba(53,185,151,.07),transparent 24%),
    radial-gradient(circle at 56% 68%,rgba(7,139,112,.055),transparent 24%),
    var(--color-white);
}

.hero-copy.container {
  width: auto;
  max-width: none;
  margin: 0;
}

.hero-product.container {
  width: auto;
  max-width: none;
  margin: 0;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero .hero-copy {
  text-align: left;
}

.hero .lead {
  max-width: 600px;
  margin: var(--space-24) 0 0;
  font-size: var(--text-18);
}

.hero .ctas {
  justify-content: flex-start;
}

.hero .meta {
  justify-content: flex-start;
}

.hero-product {
  position: relative;
  margin-top: 0;
}

.hero-product:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% -10% -5% -12%;
  border-radius: var(--radius-21);
  filter: blur(22px);
  animation: heroLight 8s ease-in-out infinite;
}

.hero-stage {
  position: relative;
  display: block;
  min-height: 520px;
}

.hero-stage .frame {
  position: absolute!important;
  overflow: hidden;
  border-color: rgba(184,199,222,.74);
  background-color: var(--color-eef3f8);
  box-shadow: var(--shadow-25);
}

.hero-stage .frame.main {
  aspect-ratio: 1378/608;
  transform: translateY(-50%) rotate(-1.2deg)!important;
}

.hero-stage .frame.search {
  transform: rotate(1.1deg)!important;
}

.hero-stage .frame.shortcut {
  transform: rotate(-1deg)!important;
}

@keyframes heroLight {
  50% {
    transform: scale(1.06);
    opacity: .76;
  }
}

@keyframes heroMainFloat {
  50% {
    transform: translateY(calc(-50% - 5px)) rotate(-.7deg);
  }
}

@keyframes heroTopFloat {
  50% {
    transform: translateY(-7px) rotate(.5deg);
  }
}

@keyframes heroBottomFloat {
  50% {
    transform: translateY(7px) rotate(-.4deg);
  }
}

.window-section {
  background: linear-gradient(180deg,var(--color-f7f9fc) 0%,var(--color-f3f6fa) 100%);
}

.window-advantage {
  gap: var(--space-64);
}

.window-bar {
  height: 34px;
  border-bottom: 1px solid rgba(204,216,232,.86);
  background: rgba(255,255,255,.92);
  color: var(--color-283449);
  backdrop-filter: blur(10px);
}

.window-bar i {
  background: var(--color-b7c3d3);
}

.window-bar i:first-child {
  background: var(--color-21b9b1);
}

.standalone-window>span {
  border: 1px solid rgba(114,142,190,.16);
  background: rgba(255,255,255,.92);
  color: var(--color-49617f);
  box-shadow: var(--shadow-26);
}

@media(max-width:1000px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-30);
    width: min(calc(100% - 40px),820px);
    padding-top: var(--space-72);
    text-align: center;
  }

  .hero .hero-copy {
    text-align: center;
  }

  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero .ctas {
    justify-content: center;
  }

  .hero .meta {
    justify-content: center;
  }

  .hero-product {
    margin-top: var(--space-12);
  }

  .hero-stage {
    min-height: 500px;
  }
}

@media(max-width:720px) {
  .hero {
    display: block;
    width: min(100% - 28px,620px);
    min-height: 0;
    padding: var(--space-66) 0 var(--space-44);
  }

  .hero-product {
    margin-top: var(--space-42);
  }

  .hero-stage {
    display: block;
    min-height: 390px;
  }
}

.hero-product {
  animation: heroStageIn .9s cubic-bezier(.2,.75,.25,1) .12s both;
}

.hero-product:after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 14%;
  bottom: 7%;
  width: 70%;
  height: 12%;
  border-radius: var(--radius-4);
  background: rgba(75,111,201,.13);
  filter: blur(30px);
  animation: heroGroundLight 7s ease-in-out infinite;
}

.hero-stage {
  z-index: 1;
}

.hero-product:hover .frame {
  animation-play-state: running!important;
}

@keyframes heroStageIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroGroundLight {
  50% {
    transform: translateX(8%) scaleX(1.08);
    opacity: .68;
  }
}

@keyframes heroMainFloat {
  50% {
    transform: translateY(calc(-50% - 9px)) rotate(-.45deg);
    box-shadow: var(--shadow-27);
  }
}

@keyframes heroTopFloat {
  50% {
    transform: translate(-6px,-12px) rotate(.35deg);
    box-shadow: var(--shadow-28);
  }
}

@keyframes heroBottomFloat {
  50% {
    transform: translate(7px,10px) rotate(-.3deg);
    box-shadow: var(--shadow-29);
  }
}

html[lang="zh"] body {
  font-size: var(--text-16);
  line-height: 1.75;
  letter-spacing: 0;
}

html[lang="zh"] .signal b {
  font-size: var(--text-15);
  font-weight: 600;
}

html[lang="zh"] .signal span {
  font-size: var(--text-13);
  line-height: 1.65;
}

html[lang="zh"] .section-head p {
  font-size: var(--text-16);
  line-height: 1.9;
}

html[lang="zh"] .window-copy>p {
  font-size: var(--text-16);
  line-height: 1.9;
}

html[lang="zh"] .workflow-tab b {
  font-size: var(--text-14);
  line-height: 1.5;
}

html[lang="zh"] .workflow-copy p {
  font-size: var(--text-15);
  line-height: 1.9;
}

html[lang="zh"] .window-points b {
  font-size: var(--text-15);
  font-weight: 600;
}

html[lang="zh"] .window-points span {
  font-size: var(--text-14);
  line-height: 1.75;
}

@media(max-width:720px) {
  html[lang="zh"] body {
    font-size: var(--text-15);
  }
}

.hero-stage .frame.main {
  inset: 50% auto auto 3%!important;
  z-index: 1;
}

.hero-product:hover .frame.search {
  animation-play-state: running!important;
}

.hero-product:hover .frame.shortcut {
  animation-play-state: running!important;
}

@keyframes heroBackdropClean {
  0%,100% {
    transform: translateY(-50%) scale(.985) rotate(-.8deg);
    opacity: .43;
  }

  50% {
    transform: translateY(-50%) scale(1.015) rotate(-.25deg);
    opacity: .58;
  }
}

@keyframes heroFeatureA {
  0%,42% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }

  48%,92% {
    opacity: 0;
    transform: translateY(calc(-50% + 24px)) translateX(18px) scale(.93);
  }

  98%,100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

@keyframes heroFeatureB {
  0%,42% {
    opacity: 0;
    transform: translateY(calc(-50% + 24px)) translateX(18px) scale(.93);
  }

  48%,92% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }

  98%,100% {
    opacity: 0;
    transform: translateY(calc(-50% + 24px)) translateX(18px) scale(.93);
  }
}

@media(max-width:720px) {
  .hero-stage .frame.main {
    inset: 50% auto auto 2%!important;
  }
}

html[lang="zh"] body {
  font-family: var(--font-stack-8);
  font-weight: 400;
  font-synthesis: none;
}

html[lang="zh"] .hero .lead {
  max-width: 550px;
  font-size: var(--text-16);
  line-height: 1.95;
}

@media(max-width:1120px) and (min-width:721px) {
  .hero {
    grid-template-columns: minmax(330px,.8fr) minmax(440px,1.2fr);
    gap: var(--space-38);
    width: min(calc(100% - 48px),1040px);
  }
}

.hero-stage .frame.search {
  overflow: hidden;
}

.hero-stage .frame.shortcut {
  overflow: hidden;
}

.hero-stage .frame.search:after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: var(--space-7) var(--space-11);
  border: 1px solid rgba(173,190,216,.62);
  border-radius: var(--radius-12);
  background: rgba(255,255,255,.92);
  color: var(--color-34445c);
  box-shadow: var(--shadow-30);
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  backdrop-filter: blur(10px);
}

.hero-stage .frame.search:after {
  content: "Clipboard";
}

.hero-stage .frame.shortcut:after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: var(--space-7) var(--space-11);
  border: 1px solid rgba(173,190,216,.62);
  border-radius: var(--radius-12);
  background: rgba(255,255,255,.92);
  color: var(--color-34445c);
  box-shadow: var(--shadow-30);
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  backdrop-filter: blur(10px);
  content: "Plugin Market";
}

html:lang(zh) .hero-stage .frame.search:after {
  content: "剪贴板";
}

html:lang(zh) .hero-stage .frame.shortcut:after {
  content: "插件市场";
}

@media(prefers-reduced-motion:reduce) {
  .hero-product {
    animation: none!important;
  }

  .hero-product:before {
    animation: none!important;
  }

  .hero-product:after {
    animation: none!important;
  }

  .hero-stage .frame {
    animation: none!important;
  }
}

html:lang(zh) body {
  font-family: var(--font-stack-9);
  font-weight: 400;
  font-synthesis: none;
}

html:lang(zh) .hero .lead {
  max-width: 520px;
  font-size: var(--text-16);
  line-height: 1.9;
}

html:lang(zh) .signal b {
  font-size: var(--text-16);
  font-weight: 400;
  color: var(--color-brand-dark);
  letter-spacing: 0;
}

html:lang(zh) .window-points b {
  font-size: var(--text-15);
  font-weight: 400;
  color: var(--color-brand-dark);
  letter-spacing: 0;
}

html:lang(zh) .section-head p {
  font-size: var(--text-15);
  line-height: 1.9;
}

html:lang(zh) .window-copy>p {
  font-size: var(--text-15);
  line-height: 1.9;
}

html:lang(zh) .workflow-copy p {
  font-size: var(--text-15);
  line-height: 1.9;
}

.hero-stage .frame.search {
  inset: 50% 0 auto auto!important;
  z-index: 4;
  width: 68%!important;
  aspect-ratio: 4/3;
  background-position: top left;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  transform-origin: 78% 70%;
  will-change: transform,opacity,filter;
}

.hero-stage .frame.shortcut {
  inset: 50% 0 auto auto!important;
  z-index: 4;
  width: 68%!important;
  aspect-ratio: 4/3;
  background-position: top left;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  transform-origin: 78% 70%;
  will-change: transform,opacity,filter;
}

.hero-stage .frame.update {
  inset: 50% 0 auto auto!important;
  z-index: 4;
  width: 68%!important;
  aspect-ratio: 4/3;
  background-position: top left;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  transform-origin: 78% 70%;
  will-change: transform,opacity,filter;
}

.hero-stage .frame.main {
  width: 96%!important;
  opacity: .36;
  filter: saturate(.68) contrast(.94);
  animation: mixsoHeroBackdrop 12s ease-in-out infinite!important;
}

.hero-stage .frame.search {
  animation: mixsoHeroSceneA 12s cubic-bezier(.4,0,.2,1) infinite!important;
}

.hero-stage .frame.shortcut {
  animation: mixsoHeroSceneB 12s cubic-bezier(.4,0,.2,1) infinite!important;
}

.hero-stage .frame.update {
  animation: mixsoHeroSceneC 12s cubic-bezier(.4,0,.2,1) infinite!important;
}

.hero-stage .frame.update:after {
  content: "Plugin Updates";
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: var(--space-7) var(--space-11);
  border: 1px solid rgba(173,190,216,.62);
  border-radius: var(--radius-12);
  background: rgba(255,255,255,.94);
  color: var(--color-34445c);
  box-shadow: var(--shadow-30);
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  backdrop-filter: blur(10px);
}

html:lang(zh) .hero-stage .frame.update:after {
  content: "插件更新";
}

@keyframes mixsoHeroBackdrop {
  0%,100% {
    transform: translateY(-50%) scale(.98) rotate(-.9deg);
    opacity: .32;
  }

  50% {
    transform: translateY(-50%) scale(1.025) rotate(-.2deg);
    opacity: .48;
  }
}

@keyframes mixsoHeroSceneA {
  0%,25% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-50%) translateX(0) scale(1);
    box-shadow: var(--shadow-31);
  }

  31%,93% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(calc(-50% + 30px)) translateX(28px) scale(.9);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

@keyframes mixsoHeroSceneB {
  0%,27% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(calc(-50% + 30px)) translateX(28px) scale(.9);
  }

  34%,58% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-50%) translateX(0) scale(1);
    box-shadow: var(--shadow-31);
  }

  65%,100% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(calc(-50% + 30px)) translateX(28px) scale(.9);
  }
}

@keyframes mixsoHeroSceneC {
  0%,60% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(calc(-50% + 30px)) translateX(28px) scale(.9);
  }

  67%,91% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-50%) translateX(0) scale(1);
    box-shadow: var(--shadow-31);
  }

  98%,100% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(calc(-50% + 30px)) translateX(28px) scale(.9);
  }
}

@media(min-width:961px) {
  .workflow-stage {
    height: 600px;
    min-height: 600px;
  }
}

@media(max-width:960px) {
  .workflow-tabs {
    min-height: 0;
    height: auto;
  }

  .workflow-tab {
    flex: none;
  }
}

@media(max-width:720px) {
  html:lang(zh) .hero .lead {
    font-size: var(--text-15);
    line-height: 1.9;
  }

  .hero-stage .frame.search {
    inset: 50% 1% auto auto!important;
    width: 80%!important;
  }

  .hero-stage .frame.shortcut {
    inset: 50% 1% auto auto!important;
    width: 80%!important;
  }

  .hero-stage .frame.update {
    inset: 50% 1% auto auto!important;
    width: 80%!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-stage .frame.search {
    opacity: 1!important;
    filter: none!important;
    transform: translateY(-50%)!important;
  }

  .hero-stage .frame.shortcut {
    opacity: 0!important;
  }

  .hero-stage .frame.update {
    opacity: 0!important;
  }
}

@media(max-width:720px) {
  .cta-box>.ctas {
    display: grid;
    grid-template-columns: 1fr;
  }
}

html:lang(en) body {
  font-family: var(--font-stack-4);
  font-weight: 400;
  font-synthesis: none;
}

html:lang(en) .hero .lead {
  max-width: 560px;
  font-size: var(--text-16);
  line-height: 1.82;
}

html:lang(en) .signal b {
  font-weight: 600;
  letter-spacing: 0;
}

html:lang(en) .window-points b {
  font-weight: 600;
  letter-spacing: 0;
}

html:lang(en) .workflow-tab b {
  font-weight: 600;
  letter-spacing: 0;
}

a:focus-visible {
  outline-color: rgba(7,139,112,.26);
}

button:focus-visible {
  outline-color: rgba(7,139,112,.26);
}

.cta-box:before {
  background: linear-gradient(90deg,var(--color-brand-dark),var(--color-brand-light))!important;
}

.hero:before {
  background-image: radial-gradient(rgba(7,139,112,.11) 1px,transparent 1.2px);
}

.hero-product:before {
  background: radial-gradient(circle at 52% 44%,rgba(7,139,112,.2),rgba(53,185,151,.1) 38%,transparent 68%);
}

.hero .kicker {
  color: var(--color-brand);
}

.hero .kicker:before {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-10);
  background: transparent url("/mixso-assets/assets/mixso-logo-transparent.png?v=3f47e12f3258") center/contain no-repeat;
  box-shadow: var(--shadow-32);
}

.hero .kicker:after {
  display: none;
}

.signal:nth-child(1) .signal-dot {
  background: var(--color-19a987);
  box-shadow: var(--shadow-33);
}

.signal:nth-child(2) .signal-dot {
  background: var(--color-19a987);
  box-shadow: var(--shadow-33);
}

.signal:nth-child(3) .signal-dot {
  background: var(--color-19a987);
  box-shadow: var(--shadow-33);
}

.signal:nth-child(4) .signal-dot {
  background: var(--color-19a987);
  box-shadow: var(--shadow-33);
}

.workflow-tab.active .workflow-tab-index {
  border-color: var(--color-brand);
  background: var(--color-brand);
  box-shadow: var(--shadow-34);
}

.workflow-tab.active {
  color: var(--color-075f50);
}

.quick-launch-demo {
  background: radial-gradient(circle at 50% 15%,rgba(7,139,112,.14),transparent 38%),linear-gradient(145deg,var(--color-fbfefd),var(--color-eff9f5));
}

.launch-search {
  border-color: var(--color-cde9df);
  background: var(--color-f6fbf9);
}

.launch-search em {
  border-color: var(--color-159b7d);
}

.launch-search em:after {
  background: var(--color-159b7d);
}

.cta {
  padding: var(--space-78) 0;
  background: var(--color-f6f8fa);
}

.cta-box {
  min-height: 430px;
  padding: var(--space-68) var(--space-52) var(--space-62);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  text-align: center;
  border: 1px solid var(--color-e0e7e4);
  border-radius: var(--radius-22);
  background: var(--color-white);
  box-shadow: var(--shadow-35);
}

.cta-box:before {
  display: none;
}

.cta-box .download-copy {
  max-width: 720px;
}

.cta-box .download-copy p {
  margin: 0;
  color: var(--color-69778b);
  font-size: var(--text-17);
  line-height: 1.75;
}

.cta-box>.ctas {
  justify-content: center;
  margin-top: var(--space-34);
  gap: var(--space-14);
}

.cta-box .download-meta {
  margin: var(--space-24) 0 0;
  color: var(--color-748196);
  font-size: var(--text-14);
  line-height: 1.5;
}

@media(max-width:720px) {
  .cta {
    padding: var(--space-48) 0;
  }

  .cta-box {
    min-height: 0;
    padding: var(--space-48) var(--space-22);
    border-radius: var(--radius-23);
  }

  .cta-box .download-copy p {
    font-size: var(--text-15);
  }

  .cta-box>.ctas {
    width: 100%;
    margin-top: var(--space-28);
  }
}

@media(min-width:961px) {
  .workflow-experience {
    grid-template-columns: 330px minmax(0,1fr);
    gap: var(--space-34);
  }

  .workflow-tabs {
    min-height: 600px;
    padding: var(--space-12) 0;
  }

  .workflow-tab {
    flex: 1;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;
    min-height: 0;
    padding: var(--space-18) var(--space-18) var(--space-18) 0;
    border-radius: var(--radius-6);
  }

  .workflow-tab.active {
    background: linear-gradient(90deg,rgba(7,139,112,.085),rgba(7,139,112,.018));
  }

  .workflow-tab.active:after {
    content: "";
    display: block;
    position: absolute;
    inset: 14px auto 14px 0;
    width: 4px;
    border-radius: var(--radius-8);
    background: var(--color-0b9678);
    box-shadow: var(--shadow-36);
  }
}

.workflow-tab-copy {
  display: block;
  min-width: 0;
}

.workflow-tab b {
  font-size: var(--text-15);
  line-height: 1.35;
}

.workflow-tab small {
  display: block;
  margin-top: var(--space-6);
  max-width: 245px;
  color: var(--color-7a8799);
  font-size: var(--text-12_5);
  font-weight: 400;
  line-height: 1.62;
}

.workflow-tab.active small {
  color: var(--color-586c68);
}

.workflow-slide {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0,1fr);
}

.workflow-copy {
  display: none;
}

.workflow-image {
  align-self: center;
  width: 100%;
  max-width: none;
  margin: 0;
}

.workflow-image img {
  width: 100%;
  object-fit: contain;
}

.window-demo {
  position: relative;
  display: block;
  min-height: 560px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-15);
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.window-demo:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 11% 5% 8%;
  border-radius: var(--radius-4);
  background: radial-gradient(circle,rgba(7,139,112,.12),rgba(7,139,112,.035) 46%,transparent 72%);
  filter: blur(22px);
}

.window-demo .standalone-window {
  position: absolute;
  min-height: 176px;
  border-color: rgba(193,207,220,.92);
  background-color: var(--color-white);
  box-shadow: var(--shadow-37);
}

.window-demo .standalone-window.clipboard {
  z-index: 3;
  top: 0;
  left: 0;
  width: 88%;
  transform: rotate(-.8deg);
}

.window-demo .standalone-window.json {
  z-index: 2;
  top: 190px;
  right: 0;
  width: 77%;
  transform: rotate(.65deg);
}

.window-demo .standalone-window.market {
  z-index: 1;
  bottom: 0;
  left: 5%;
  width: 84%;
  transform: rotate(-.35deg);
}

@media(max-width:960px) {
  .window-demo {
    min-height: 520px;
  }
}

@media(max-width:720px) {
  .window-demo {
    display: grid;
    gap: var(--space-14);
    min-height: 0;
  }

  .window-demo:before {
    inset: 10% 0;
    border-radius: var(--radius-24);
    filter: blur(18px);
  }

  .window-demo .standalone-window {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 150px;
    transform: none;
  }

  .window-demo .standalone-window.clipboard {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 150px;
    transform: none;
  }

  .window-demo .standalone-window.json {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 150px;
    transform: none;
  }

  .window-demo .standalone-window.market {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 150px;
    transform: none;
  }
}

.workflow-slide {
  padding: var(--space-20) var(--space-12);
  justify-items: center;
}

.workflow-image {
  max-height: none;
  border: 1px solid rgba(196,211,206,.9);
  box-shadow: 0 12px 32px -18px rgba(32,68,58,.2);
}

.workflow-image img {
  max-height: none;
}

.quick-launch-demo {
  min-height: 430px;
  padding-top: var(--space-64);
}

@media(max-width:960px) {
  .workflow-stage {
    min-height: 580px;
  }

  .workflow-slide {
    padding: var(--space-16) var(--space-8);
  }

  .workflow-tab small {
    display: block;
  }
}

@media(max-width:720px) {
  .workflow-stage {
    min-height: clamp(270px, 80vw, 430px);
  }

  .workflow-slide {
    padding: var(--space-12) 0;
  }

  .workflow-tab small {
    display: none;
  }

  .quick-launch-demo {
    min-height: 360px;
    padding-top: var(--space-52);
  }
}