.case-frame .case-dark {
  transition: background-color .4s, color .4s;
}

.case-frame .case-dark:hover, .case-frame .case-dark:focus-within {
  color: #201a31;
  background: #eeebfb;
}

.case-frame .case-dark:hover .case-story h3, .case-frame .case-dark:focus-within .case-story h3 {
  color: #201a31;
}

.case-frame .case-dark:hover .case-story p, .case-frame .case-dark:focus-within .case-story p {
  color: #514760;
}

.case-frame .case-dark:hover .case-focus, .case-frame .case-dark:focus-within .case-focus, .case-frame .case-dark:hover .case-focus span, .case-frame .case-dark:focus-within .case-focus span {
  color: #65537f;
}

.case-frame .case-dark:hover .case-badge, .case-frame .case-dark:focus-within .case-badge {
  color: #514166;
  background: #fff6;
  border-color: #8d7aa14d;
}

.case-frame .case-learnmore > .case-notch {
  width: calc(100% + 47px);
  height: calc(100% + 2px);
  top: -1px;
  left: -45px;
}

.case-slider > .case-card {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .case-frame .case-dark {
    transition: none;
  }
}

.case-studies-section .slider-bottom {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  display: grid;
}

.case-studies-section .slider-dots {
  grid-column: 2;
  margin: 0;
  position: static;
  transform: none;
}

@media (width <= 640px) {
  .case-studies-section .slider-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .case-studies-section .slider-dots {
    grid-column: 1;
    justify-self: center;
  }
}

.case-frame .case-dark {
  color: #fff;
  isolation: isolate;
  background: none;
  position: relative;
}

.case-frame .case-dark:hover, .case-frame .case-dark:focus-within {
  background: none;
}

.case-frame .case-dark:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: #1c1922;
  transition: background-color .4s;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110'%3E%3Cpath d='M0 112 C45 112 45 19 115 19 H272 Q302 19 302 -3 V112 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110'%3E%3Cpath d='M0 112 C45 112 45 19 115 19 H272 Q302 19 302 -3 V112 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-position: center, 100% 100%;
  mask-position: center, 100% 100%;
  -webkit-mask-size: 100% 100%, 300px 110px;
  mask-size: 100% 100%, 300px 110px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.case-frame .case-dark:hover:before, .case-frame .case-dark:focus-within:before {
  background: #eeebfb;
}

.case-frame .case-learnmore {
  width: 255px;
  height: 90px;
  box-shadow: none;
  background: none;
  padding: 18px 0 0 20px;
}

.case-frame .case-learnmore > .case-notch {
  display: none;
}

.case-frame .case-learnmore > span {
  align-items: center;
  width: 235px;
  min-width: 0;
  min-height: 72px;
  display: flex;
}

@media (width <= 767px) {
  .case-frame .case-dark:before {
    -webkit-mask-size: 100% 100%, 260px 100px;
    mask-size: 100% 100%, 260px 100px;
  }

  .case-frame .case-learnmore {
    width: 220px;
    height: 82px;
    padding: 16px 0 0 20px;
  }

  .case-frame .case-learnmore > span {
    width: 200px;
    min-height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-frame .case-dark:before {
    transition: none;
  }
}

.case-studies-section .case-frame, .case-studies-section .case-card, .case-studies-section .case-dark, .case-studies-section .case-dark:hover, .case-studies-section .case-dark:focus-within, .case-studies-section .case-learnmore {
  background: none !important;
}

.case-studies-section .case-learnmore:before, .case-studies-section .case-learnmore:after, .case-studies-section .case-learnmore > .case-notch {
  content: none !important;
  box-shadow: none !important;
  display: none !important;
}

.case-studies-section .case-dark:before {
  -webkit-mask-composite: xor;
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110'%3E%3Cpath d='M0 112 C45 112 45 19 115 19 H272 Q302 19 302 -3 V112 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-position: center, 100% 100%;
  -webkit-mask-size: 100% 100%, 300px 110px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: alpha, alpha;
  mask-mode: alpha, alpha;
}

.case-studies-section .case-card:hover .case-dark:before, .case-studies-section .case-card:focus-within .case-dark:before {
  background: #eeebfb;
}

.case-studies-section .case-card:hover .case-dark .case-story h3, .case-studies-section .case-card:focus-within .case-dark .case-story h3 {
  color: #201a31 !important;
}

.case-studies-section .case-card:hover .case-dark .case-story p, .case-studies-section .case-card:focus-within .case-dark .case-story p {
  opacity: 1;
  color: #40364f !important;
}

.case-studies-section .case-card:hover .case-dark .case-focus, .case-studies-section .case-card:hover .case-dark .case-focus span, .case-studies-section .case-card:focus-within .case-dark .case-focus, .case-studies-section .case-card:focus-within .case-dark .case-focus span {
  opacity: 1;
  color: #51405f !important;
}

.case-studies-section .case-card:hover .case-badge, .case-studies-section .case-card:focus-within .case-badge {
  background: #fff6;
  border-color: #8d7aa14d;
  color: #51405f !important;
}

@media (width <= 767px) {
  .case-studies-section .case-dark:before {
    -webkit-mask-size: 100% 100%, 260px 100px;
    mask-size: 100% 100%, 260px 100px;
  }
}

.case-article-panel h3 {
  color: #292139;
  margin: 28px 0 14px;
  font-size: 18px;
  font-weight: 600;
}

.case-article-panel > ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
}

.case-article-panel > ul li {
  color: #625473;
  background: #faf9fe;
  border: 1px solid #e5deef;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.case-context-tags a {
  color: #5d3d99;
  background: #eee8fb;
  border-radius: 24px;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  font-size: 13px;
  text-decoration: none;
  transition: background .2s;
  display: inline-flex;
}

.case-context-tags a:hover {
  background: #dfd4f4;
}

.case-article-outcome > ul li {
  background: #ffffff80;
}

@media (width <= 600px) {
  .case-article-panel > ul {
    grid-template-columns: 1fr;
  }
}