.solution-experience {
  color: #231d34;
}

.solution-experience h1, .solution-experience h2, .solution-experience h3 {
  letter-spacing: -.045em;
}

.solution-experience h2 {
  margin: 0;
  font-size: clamp(32px, 3.8vw, 51px);
  line-height: 1.12;
}

.solution-experience h3 {
  font-size: 24px;
  line-height: 1.2;
}

.solution-experience p {
  line-height: 1.7;
}

.solution-detail-hero {
  background: radial-gradient(at 80% 20%, #dde5fb 0, #0000 58%), linear-gradient(140deg, #faf8fc, #f0e9f9);
  padding: 140px 0 45px;
  overflow: hidden;
}

.solution-breadcrumb {
  color: #81758e;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 13px;
  display: flex;
}

.solution-breadcrumb a {
  color: #634692;
}

.solution-hero-grid {
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 65px;
  display: grid;
}

.solution-hero-text h1 {
  margin: 20px 0 25px;
  font-size: clamp(42px, 4.9vw, 68px);
  line-height: 1.06;
}

.solution-hero-text h1 span {
  color: #7551c8;
}

.solution-hero-lead {
  max-width: 650px;
  margin-bottom: 18px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4 !important;
}

.solution-hero-description {
  color: #71677f;
  max-width: 630px;
  font-size: 16px;
}

.solution-hero-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
  display: flex;
}

.solution-audience {
  color: #675a77;
  border-top: 1px solid #dcd2e8;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 46px;
  padding-top: 28px;
  font-size: 13px;
  display: flex;
}

.solution-audience > span:first-child {
  letter-spacing: .15em;
  color: #9b8cae;
  font-size: 10px;
  font-weight: 600;
}

.solution-audience > span:not(:first-child) {
  border-left: 1px solid #cfc1e1;
  padding-left: 18px;
}

.solution-blueprint {
  color: #fff;
  background: linear-gradient(150deg, #262235, #181826);
  border: 1px solid #47405b;
  border-radius: 34px;
  min-height: 400px;
  padding: 27px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 55px #35214c20;
}

.solution-blueprint:before {
  content: "";
  background: radial-gradient(circle, #7962bb55, #0000 70%);
  border-radius: 50%;
  width: 260px;
  height: 260px;
  position: absolute;
  top: -70px;
  right: -70px;
}

.solution-blueprint-top, .solution-blueprint-bottom {
  z-index: 1;
  letter-spacing: .12em;
  color: #a89abf;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
  display: flex;
  position: relative;
}

.solution-blueprint-top {
  margin-bottom: 30px;
}

.solution-blueprint-orbit {
  border: 1px solid #7d65aa25;
  border-radius: 50%;
  width: 430px;
  height: 430px;
  animation: 15s ease-in-out infinite solution-orbit;
  position: absolute;
  top: 10%;
  left: 20%;
}

.solution-blueprint-orbit:after {
  content: "";
  border: 1px solid #788be726;
  border-radius: 50%;
  position: absolute;
  inset: 38px;
}

.solution-blueprint-nodes {
  z-index: 1;
  gap: 12px;
  display: grid;
  position: relative;
}

.solution-blueprint-nodes > div {
  background: #ffffff09;
  border: 1px solid #ffffff17;
  border-radius: 14px;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  transition: transform .3s;
  display: flex;
}

.solution-blueprint-nodes > div:hover {
  transform: translateX(4px);
}

.solution-blueprint-nodes span {
  color: #b19adb;
  font-size: 11px;
}

.solution-blueprint-nodes strong {
  flex: 1;
  font-size: 14px;
  font-weight: 450;
}

.solution-blueprint-nodes svg {
  color: #8f80b1;
}

.solution-blueprint-core {
  z-index: 1;
  background: linear-gradient(115deg, #7954bb35, #5479cc25);
  border: 1px solid #8b74c060;
  border-radius: 16px;
  grid-template-columns: auto 1fr;
  gap: 9px;
  margin: 25px 0;
  padding: 20px 17px;
  display: grid;
  position: relative;
}

.solution-core-dot {
  background: #ac8fea;
  border-radius: 50%;
  align-self: center;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 17px #9372d8;
}

.solution-blueprint-core strong {
  font-size: 17px;
  line-height: 1.4;
}

.solution-blueprint-core > span:last-child {
  color: #b7acc9;
  grid-column: 2;
  font-size: 11px;
}

.solution-blueprint-bottom {
  letter-spacing: 0;
  font-size: 11px;
}

.solution-opportunity {
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  padding-top: 78px;
  padding-bottom: 78px;
  display: grid;
}

.solution-opportunity > div:last-child > p:last-child {
  color: #7f748d;
  margin-top: 20px;
  font-size: 16px;
}

.solution-problem {
  color: #51415f;
  margin-top: 0;
  font-size: 23px;
  line-height: 1.5 !important;
}

.solution-capabilities {
  background: #f7f5fa;
  padding: 75px 0;
  scroll-margin-top: 110px;
}

.solution-module-layout {
  grid-template-columns: 330px 1fr;
  gap: 35px;
  margin-top: 40px;
  display: grid;
}

.solution-module-tabs {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.solution-module-tabs button {
  text-align: left;
  color: #85778f;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid #e2dae9;
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  padding: 19px 17px;
  font-size: 15px;
  transition: background .25s, color .25s;
  display: flex;
}

.solution-module-tabs button > span {
  color: #b1a4bd;
  font-size: 11px;
}

.solution-module-tabs button > svg {
  flex-shrink: 0;
  margin-left: auto;
}

.solution-module-tabs button:hover, .solution-module-tabs button.is-active {
  color: #6f45aa;
  background: #fff;
  box-shadow: 0 7px 25px #50396506;
}

.solution-module-panel {
  background: radial-gradient(at 90% 5%, #e4ddf455, #0000 70%), #fff;
  border: 1px solid #e7deed;
  border-radius: 30px;
  min-height: 380px;
  padding: 45px;
  animation: .3s ease-out solution-panel-in;
  position: relative;
  overflow: hidden;
}

.solution-panel-number {
  color: #d9cde8;
  letter-spacing: -.065em;
  margin-bottom: 45px;
  font-size: 68px;
  font-weight: 250;
  line-height: 1;
  display: block;
}

.solution-module-panel h3 {
  max-width: 540px;
  margin: 15px 0;
  font-size: 35px;
}

.solution-module-panel > p:not(.eyebrow) {
  color: #786982;
  max-width: 610px;
}

.solution-panel-note {
  color: #998ca3;
  border-top: 1px solid #ece5f1;
  align-items: flex-start;
  gap: 10px;
  margin-top: 25px;
  padding-top: 18px;
  font-size: 12px;
  display: flex;
}

.solution-panel-note svg {
  color: #9b81bb;
  flex-shrink: 0;
}

.solution-panel-art {
  align-items: center;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 30px;
  right: 35px;
  transform: rotate(-15deg);
}

.solution-panel-art span {
  background: linear-gradient(135deg, #eae2f422, #b7c9e45c);
  border: 1px solid #c9b4e055;
  border-radius: 12px;
  width: 38px;
  height: 74px;
  box-shadow: 6px 6px 20px #9882b015;
}

.solution-panel-art span:nth-child(2) {
  height: 100px;
}

.solution-workflow {
  color: #f9f5ff;
  background: radial-gradient(at 80% 90%, #292942, #0000 80%), #211c2c;
  padding: 75px 0;
}

.solution-workflow .eyebrow {
  color: #b89cdf;
}

.solution-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 45px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.solution-flow > li {
  border-top: 1px solid #7b638c66;
  padding-top: 24px;
}

.solution-flow > li > span {
  color: #c6acdf;
  font-size: 12px;
}

.solution-flow h3 {
  letter-spacing: -.02em;
  margin: 20px 0 15px;
  font-size: 21px;
  line-height: 1.35;
}

.solution-flow p {
  color: #b4a8c1;
  font-size: 14px;
}

.solution-use-cases {
  padding-top: 78px;
  padding-bottom: 78px;
}

.solution-use-case-heading {
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-bottom: 40px;
  display: flex;
}

.solution-use-case-heading > p {
  color: #8a7b93;
  max-width: 360px;
  margin: 0;
  font-size: 15px;
}

.solution-use-case-layout {
  grid-template-columns: .9fr 1.1fr;
  align-items: stretch;
  gap: 55px;
  display: grid;
}

.solution-use-case-layout > img {
  object-fit: cover;
  border-radius: 28px;
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 590px;
}

.solution-use-case-layout > div {
  align-content: center;
  display: grid;
}

.solution-use-case-layout article {
  border-bottom: 1px solid #e7dfee;
  gap: 24px;
  padding: 25px 0;
  display: flex;
}

.solution-use-case-layout article > span {
  color: #b79acf;
  padding-top: 6px;
  font-size: 11px;
}

.solution-use-case-layout h3 {
  margin: 0 0 12px;
  font-size: 23px;
}

.solution-use-case-layout p {
  color: #7e6e89;
  margin: 0;
  font-size: 15px;
}

.solution-integrations {
  background: #eff2f8;
  padding: 75px 0;
}

.solution-integrations > .section-wrap {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 85px;
  display: grid;
}

.solution-integrations > .section-wrap > div:first-child > p:last-child {
  color: #7b738a;
  max-width: 500px;
  margin-top: 25px;
  font-size: 15px;
}

.solution-integration-list {
  gap: 0;
  display: grid;
}

.solution-integration-list article {
  border-bottom: 1px solid #dbe0eb;
  align-items: flex-start;
  gap: 22px;
  padding: 23px 0;
  display: flex;
}

.solution-integration-list article:first-child {
  padding-top: 0;
}

.solution-integration-list article > span {
  color: #7478b5;
  background: #e1e6f3;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
}

.solution-integration-list h3 {
  margin: 0 0 10px;
  font-size: 21px;
}

.solution-integration-list p {
  color: #7c768c;
  margin: 0;
  font-size: 14px;
}

.solution-outcomes {
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding-top: 78px;
  padding-bottom: 78px;
  display: grid;
}

.solution-outcomes > div:last-child {
  gap: 24px;
  display: grid;
}

.solution-outcomes article {
  border-left: 2px solid #c0a4dc;
  padding-left: 25px;
  transition: border-color .25s;
}

.solution-outcomes article:hover {
  border-color: #577fe5;
}

.solution-outcomes h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

.solution-outcomes p {
  color: #84748e;
  margin: 0;
  font-size: 15px;
}

.solution-rollout {
  background: #faf8fc;
  padding: 65px 0;
}

.solution-rollout > .section-wrap > div:last-child {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
  margin-top: 40px;
  display: grid;
}

.solution-rollout article {
  border-top: 1px solid #dbd0e6;
  padding-top: 20px;
}

.solution-rollout article > span {
  color: #a389ba;
  font-size: 12px;
}

.solution-rollout h3 {
  font-size: 23px;
}

.solution-rollout p {
  color: #8c7b96;
  font-size: 14px;
}

.solution-faq {
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  padding-top: 78px;
  padding-bottom: 78px;
  display: grid;
}

.solution-faq details {
  border-bottom: 1px solid #e4dbea;
  padding: 20px 0;
}

.solution-faq details:first-child {
  padding-top: 0;
}

.solution-faq summary {
  cursor: pointer;
  justify-content: space-between;
  gap: 15px;
  font-size: 17px;
  line-height: 1.5;
  list-style: none;
  display: flex;
}

.solution-faq summary::-webkit-details-marker {
  display: none;
}

.solution-faq summary > span {
  color: #9d78b8;
  font-size: 22px;
  transition: transform .25s;
}

.solution-faq details[open] summary > span {
  transform: rotate(45deg);
}

.solution-faq details > p {
  color: #897692;
  font-size: 15px;
}

.solution-catalog {
  padding-top: 70px;
  padding-bottom: 75px;
  scroll-margin-top: 110px;
}

.solution-catalog-header {
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 35px;
  display: flex;
}

.solution-catalog-header > p {
  color: #8b7a96;
  max-width: 360px;
  margin: 0;
  font-size: 15px;
}

.solution-filters {
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
  display: flex;
}

.solution-filters button {
  color: #867090;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e1d6eb;
  border-radius: 99px;
  padding: 10px 20px;
  font-size: 13px;
  transition: background .2s, color .2s;
}

.solution-filters button.is-active, .solution-filters button:hover {
  color: #fff;
  background: #7955bd;
  border-color: #7955bd;
}

.solution-result-count {
  color: #aa98b4;
  margin: 20px 0;
  font-size: 12px;
}

.solution-catalog-grid {
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  display: grid;
}

.solution-catalog-card {
  height: 100%;
  color: inherit;
  background: #fff;
  border: 1px solid #e7dfee;
  border-radius: 30px;
  text-decoration: none;
  transition: box-shadow .35s, transform .35s;
  display: block;
  overflow: hidden;
}

.solution-catalog-card:hover, .solution-catalog-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px #39284915;
}

.solution-card-art {
  isolation: isolate;
  background-position: center;
  background-size: cover;
  flex-direction: column;
  justify-content: space-between;
  min-height: 235px;
  padding: 24px;
  display: flex;
  position: relative;
}

.solution-card-art:before {
  content: "";
  z-index: -1;
  background: linear-gradient(135deg, #22162ac2, #35294144);
  transition: opacity .4s;
  position: absolute;
  inset: 0;
}

.solution-catalog-card:hover .solution-card-art:before {
  opacity: .75;
}

.solution-card-art > span {
  letter-spacing: .12em;
  color: #eee4ff;
  font-size: 10px;
}

.solution-card-art > div {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.solution-card-art > div > span {
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffff16;
  border: 1px solid #ffffff3b;
  border-radius: 99px;
  padding: 6px 10px;
  font-size: 11px;
}

.solution-card-body {
  padding: 30px;
}

.solution-card-body h3 {
  margin: 0 0 18px;
  font-size: 28px;
}

.solution-card-body > p {
  color: #897890;
  min-height: 50px;
  margin-bottom: 25px;
  font-size: 15px;
}

.solution-card-link {
  color: #705087;
  border-top: 1px solid #ede6f1;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.solution-card-link svg {
  transition: transform .3s;
}

.solution-catalog-card:hover .solution-card-link svg {
  transform: translate(3px, -3px);
}

.solution-hub-note {
  background: #faf8fc;
  border-radius: 30px;
  margin-bottom: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.solution-hub-note > p:not(.eyebrow) {
  color: #8d7b97;
  max-width: 700px;
  margin: 25px 0;
  font-size: 16px;
}

.solution-hub .solution-detail-hero {
  padding-bottom: 70px;
}

@keyframes solution-orbit {
  50% {
    transform: translate(-8px, 6px) scale(1.04);
  }
}

@keyframes solution-panel-in {
  from {
    opacity: .45;
    transform: translateY(5px);
  }

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

@media (width <= 1000px) {
  .solution-hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 35px;
  }

  .solution-blueprint {
    padding: 22px;
  }

  .solution-module-layout {
    grid-template-columns: 280px 1fr;
    gap: 22px;
  }

  .solution-module-panel {
    padding: 30px;
  }

  .solution-opportunity, .solution-integrations > .section-wrap, .solution-outcomes, .solution-faq {
    gap: 40px;
  }

  .solution-use-case-layout {
    gap: 30px;
  }

  .solution-flow {
    gap: 20px;
  }

  .solution-flow h3 {
    font-size: 19px;
  }

  .solution-blueprint-core strong {
    font-size: 15px;
  }
}

@media (width <= 767px) {
  .solution-detail-hero {
    padding-top: 112px;
    padding-bottom: 35px;
  }

  .solution-breadcrumb {
    margin-bottom: 25px;
  }

  .solution-hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .solution-hero-text h1 {
    font-size: 42px;
  }

  .solution-hero-lead {
    font-size: 20px;
  }

  .solution-hero-actions {
    gap: 20px;
  }

  .solution-hero-actions .pill {
    font-size: 13px;
  }

  .solution-blueprint {
    min-height: 350px;
  }

  .solution-audience {
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
  }

  .solution-audience > span:first-child {
    width: 100%;
  }

  .solution-audience > span:not(:first-child) {
    border: 0;
    padding-left: 0;
    font-size: 12px;
  }

  .solution-opportunity, .solution-integrations > .section-wrap, .solution-outcomes, .solution-faq {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .solution-opportunity, .solution-use-cases, .solution-outcomes, .solution-faq {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  .solution-capabilities, .solution-workflow, .solution-integrations {
    padding: 45px 0;
  }

  .solution-module-layout {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
  }

  .solution-module-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    display: grid;
  }

  .solution-module-tabs button {
    gap: 7px;
    padding: 13px 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  .solution-module-tabs button svg {
    display: none;
  }

  .solution-module-panel {
    min-height: 350px;
    padding: 27px;
  }

  .solution-module-panel h3 {
    font-size: 28px;
  }

  .solution-panel-number {
    margin-bottom: 35px;
    font-size: 55px;
  }

  .solution-flow {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .solution-flow h3 {
    font-size: 18px;
  }

  .solution-flow p {
    font-size: 13px;
  }

  .solution-use-case-heading, .solution-catalog-header {
    margin-bottom: 30px;
    display: block;
  }

  .solution-use-case-heading > p, .solution-catalog-header > p {
    margin-top: 20px;
  }

  .solution-use-case-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .solution-use-case-layout > img {
    height: 260px;
    min-height: 0;
  }

  .solution-rollout {
    padding: 45px 0;
  }

  .solution-rollout > .section-wrap > div:last-child {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .solution-catalog {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  .solution-catalog-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .solution-card-art {
    min-height: 210px;
  }

  .solution-card-body {
    padding: 25px;
  }

  .solution-card-body h3 {
    font-size: 26px;
  }

  .solution-card-body > p {
    min-height: 0;
  }

  .solution-hub-note {
    border-radius: 0;
    margin-bottom: 35px;
    padding: 35px 25px;
  }

  .solution-hub .solution-detail-hero {
    padding-bottom: 45px;
  }

  .solution-experience h2 {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution-blueprint-orbit, .solution-module-panel {
    animation: none;
  }

  .solution-experience * {
    scroll-behavior: auto;
    transition: none !important;
  }
}