@layer components {
  .case-results {
    position: relative;
    isolation: isolate;
    block-size: 166.75cqi;
    overflow: hidden;
    background-color: oklch(24.039% 0.0015 17.26 / 0.8);
    color: oklch(31.714% 0 0);
    font-family: var(--font-hero);
  }

  .case-results__eyebrow {
    position: absolute;
    inset-block-start: 12cqi;
    inset-inline-start: 34.75cqi;
    inline-size: 30.25cqi;
    color: oklch(100% 0 0);
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.25cqi;
    text-align: center;
    white-space: nowrap;
  }

  .case-results__eyebrow-line {
    position: absolute;
    inset-block-start: 20cqi;
    inset-inline-start: 35cqi;
    inline-size: 29.5cqi;
    block-size: 2.25cqi;
    max-inline-size: none;
  }

  .case-results__title {
    position: absolute;
    inset-block-start: 24.25cqi;
    inset-inline-start: 24.75cqi;
    inline-size: 50cqi;
    color: oklch(95.066% 0.1212 101.83);
    font-size: 12cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.6cqi;
    text-align: center;
    white-space: nowrap;
  }

  .case-results__slider {
    position: absolute;
    inset-block-start: 43.75cqi;
    inset-inline-start: 2.5cqi;
    inline-size: 95cqi;
    block-size: 109cqi;
  }

  .case-results__track {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: flex;
    gap: 4cqi;
    inline-size: 95cqi;
    block-size: 102.5cqi;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .case-results__track::-webkit-scrollbar {
    display: none;
  }

  .case-results__pagination {
    position: absolute;
    inset-block-start: 106.5cqi;
    inset-inline-start: 38cqi;
    display: flex;
    gap: 3cqi;
    align-items: center;
    inline-size: 19cqi;
    block-size: 2.5cqi;
  }

  .case-results__dot {
    display: block;
    flex: 0 0 2.5cqi;
    inline-size: 2.5cqi;
    block-size: 2.5cqi;
    border: 0;
    border-radius: 50%;
    background-color: oklch(88.5% 0 0);
    padding: 0;
  }

  button.case-results__dot {
    cursor: pointer;
  }

  .case-results__dot--active {
    background-color: oklch(95.066% 0.1212 101.83);
  }

  .case-card {
    position: relative;
    flex: 0 0 95cqi;
    block-size: 102.5cqi;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .case-card__panel {
    position: absolute;
    z-index: 1;
    inset-block-start: 5.25cqi;
    inset-inline-start: 5cqi;
    inline-size: 85cqi;
    block-size: 97.25cqi;
    border: 1cqi solid oklch(100% 0 0);
    border-radius: 1cqi;
    background-color: oklch(97.015% 0 0);
    pointer-events: none;
  }

  .case-card__arrow {
    position: absolute;
    z-index: 0;
    inset-block-start: 46.5cqi;
    inline-size: 15cqi;
    block-size: 15cqi;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
  }

  .case-card__arrow--prev {
    inset-inline-start: 0;
  }

  .case-card__arrow--next {
    inset-inline-start: 80cqi;
  }

  .case-card__arrow img {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
  }

  .case-card__arrow--next img {
    transform: rotate(180deg);
  }

  .case-card__tag,
  .case-card__name,
  .case-card__account,
  .case-card__info,
  .case-card__bar,
  .case-card__label,
  .case-card__copy {
    position: absolute;
    z-index: 2;
  }

  .case-card__tag {
    inset-block-start: 10.75cqi;
    inset-inline-start: 10cqi;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 32.75cqi;
    block-size: 5cqi;
    border-radius: 7.5cqi;
    background-color: oklch(31.714% 0 0);
    color: oklch(100% 0 0);
    font-size: 3.25cqi;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1625cqi;
    white-space: nowrap;
  }

  .case-card__tag--wide {
    inline-size: 39cqi;
  }

  .case-card__name {
    inset-block-start: 16.75cqi;
    inset-inline-start: 10cqi;
    inline-size: 42.75cqi;
    color: oklch(31.714% 0 0);
    font-size: 4cqi;
    font-weight: 900;
    line-height: 1.4;
  }

  .case-card--dental .case-card__name {
    font-size: 3.75cqi;
  }

  .case-card__account {
    inset-block-start: 22.75cqi;
    inset-inline-start: 10cqi;
    color: oklch(31.714% 0 0);
    font-size: 2.5cqi;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.125cqi;
    white-space: nowrap;
  }

  .case-card--meili .case-card__account,
  .case-card--dental .case-card__account {
    inset-block-start: 28.25cqi;
  }

  .case-card__info {
    inset-block-start: 29.25cqi;
    inset-inline-start: 6cqi;
    inline-size: 83cqi;
    block-size: 46.75cqi;
    background-color: oklch(93.1% 0 0);
  }

  .case-card--meili .case-card__info {
    inset-block-start: 34.75cqi;
    block-size: 42.75cqi;
  }

  .case-card--dental .case-card__info {
    inset-block-start: 34.75cqi;
    block-size: 38.75cqi;
  }

  .case-card__bar {
    inline-size: 0.5cqi;
    block-size: 3.75cqi;
    background-color: oklch(31.714% 0 0);
  }

  .case-card__bar--industry {
    inset-block-start: 3.5cqi;
    inset-inline-start: 4.25cqi;
  }

  .case-card__bar--scope {
    inset-block-start: 18.25cqi;
    inset-inline-start: 4.25cqi;
  }

  .case-card--meili .case-card__bar--scope,
  .case-card--dental .case-card__bar--scope {
    inset-block-start: 14.25cqi;
  }

  .case-card__label {
    inline-size: 36.25cqi;
    color: oklch(31.714% 0 0);
    font-size: 3.25cqi;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1625cqi;
  }

  .case-card__label--industry {
    inset-block-start: 3cqi;
    inset-inline-start: 5.75cqi;
  }

  .case-card__label--scope {
    inset-block-start: 17.75cqi;
    inset-inline-start: 5.75cqi;
  }

  .case-card--meili .case-card__label--scope,
  .case-card--dental .case-card__label--scope {
    inset-block-start: 13.75cqi;
  }

  .case-card__copy {
    color: oklch(31.714% 0 0);
    font-family: var(--font-sans);
    font-size: 3cqi;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.15cqi;
    text-align: justify;
  }

  .case-card__copy--industry {
    inset-block-start: 7.75cqi;
    inset-inline-start: 4cqi;
    inline-size: 38.75cqi;
  }

  .case-card--meili .case-card__copy--industry,
  .case-card--dental .case-card__copy--industry {
    inline-size: 40cqi;
  }

  .case-card__copy--scope {
    inset-block-start: 22.75cqi;
    inset-inline-start: 4cqi;
    inline-size: 38.75cqi;
  }

  .case-card--meili .case-card__copy--scope,
  .case-card--dental .case-card__copy--scope {
    inset-block-start: 18.75cqi;
  }

  .case-card__bar--target {
    inset-block-start: 79.5cqi;
    inset-inline-start: 10.25cqi;
  }

  .case-card__label--target {
    inset-block-start: 79cqi;
    inset-inline-start: 11.75cqi;
  }

  .case-card__copy--target {
    inset-block-start: 84.5cqi;
    inset-inline-start: 10cqi;
    inline-size: 75cqi;
  }

  .case-card--meili .case-card__bar--target {
    inset-block-start: 81cqi;
  }

  .case-card--meili .case-card__label--target {
    inset-block-start: 80.5cqi;
  }

  .case-card--meili .case-card__copy--target {
    inset-block-start: 86cqi;
  }

  .case-card--dental .case-card__bar--target {
    inset-block-start: 77cqi;
  }

  .case-card--dental .case-card__label--target {
    inset-block-start: 76.5cqi;
  }

  .case-card--dental .case-card__copy--target {
    inset-block-start: 82cqi;
  }

  .case-phone {
    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline-start: 53.25cqi;
    overflow: visible;
  }

  .case-phone--y2k {
    inline-size: 33.75cqi;
    block-size: 68.5cqi;
  }

  .case-phone--meili,
  .case-phone--dental {
    inline-size: 34cqi;
    block-size: 69cqi;
  }

  .case-phone__frame {
    position: absolute;
    z-index: 5;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
  }

  .case-phone__white {
    position: absolute;
    z-index: 0;
    inset-inline-start: 1.75cqi;
    inline-size: 30.5cqi;
    block-size: 5cqi;
    border-start-start-radius: 5cqi;
    border-start-end-radius: 5cqi;
    background-color: oklch(100% 0 0);
  }

  .case-phone__white--y2k {
    inset-block-start: 1cqi;
  }

  .case-phone__white--standard {
    inset-block-start: 1.25cqi;
  }

  .case-phone__slice {
    position: absolute;
    z-index: 1;
    inset-inline-start: 1.75cqi;
    inline-size: 30.5cqi;
    overflow: hidden;
    background-color: oklch(100% 0 0);
  }

  .case-phone__img {
    position: absolute;
    inset-inline-start: 0;
    inline-size: 30.5cqi;
    block-size: 66cqi;
    max-inline-size: none;
  }

  .case-phone__slice--y2k-top {
    inset-block-start: 5.5cqi;
    block-size: 18.36cqi;
  }

  .case-phone__img--y2k-top {
    inset-block-start: -3.26cqi;
  }

  .case-phone__slice--y2k-tab {
    inset-block-start: 23.68cqi;
    block-size: 5cqi;
  }

  .case-phone__img--y2k-tab {
    inset-block-start: -24.18cqi;
  }

  .case-phone__slice--y2k-bottom {
    inset-block-start: 23.95cqi;
    block-size: 43.04cqi;
  }

  .case-phone__img--y2k-bottom {
    inset-block-start: -2.74cqi;
  }

  .case-phone__slice--meili-top {
    inset-block-start: 5.75cqi;
    block-size: 19cqi;
  }

  .case-phone__img--meili-top {
    inset-block-start: -2.5cqi;
  }

  .case-phone__slice--meili-tab {
    inset-block-start: 24.75cqi;
    block-size: 13.25cqi;
  }

  .case-phone__img--meili-tab {
    inset-block-start: -24.25cqi;
  }

  .case-phone__slice--meili-bottom {
    inset-block-start: 24.7cqi;
    block-size: 43.04cqi;
  }

  .case-phone__img--meili-bottom {
    inset-block-start: 6.05cqi;
  }

  .case-phone__slice--dental-top {
    inset-block-start: 5.75cqi;
    block-size: 18.5cqi;
  }

  .case-phone__img--dental-top {
    inset-block-start: -2.75cqi;
  }

  .case-phone__slice--dental-tab {
    inset-block-start: 24.25cqi;
    block-size: 13.25cqi;
  }

  .case-phone__img--dental-tab {
    inset-block-start: -26cqi;
  }

  .case-phone__slice--dental-bottom {
    inset-block-start: 37.5cqi;
    block-size: 30.25cqi;
  }

  .case-phone__img--dental-bottom {
    inset-block-start: -9.75cqi;
  }

  .case-phone__emoji {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    inline-size: 1.625cqi;
    block-size: 1.75cqi;
    background-color: oklch(100% 0 0);
    color: oklch(100% 0 0);
    font-size: 1.125cqi;
    font-weight: 700;
    line-height: 1.4;
  }

  .case-phone__emoji--meili-a {
    inset-block-start: 10.75cqi;
    inset-inline-start: 14cqi;
  }

  .case-phone__emoji--meili-b {
    inset-block-start: 19.75cqi;
    inset-inline-start: 21.5cqi;
  }

  .case-phone__emoji--dental-a {
    inset-block-start: 18cqi;
    inset-inline-start: 26.35cqi;
    font-size: 1.25cqi;
  }

  .case-phone__emoji--dental-b {
    inset-block-start: 13.25cqi;
    inset-inline-start: 26.35cqi;
    font-size: 1.25cqi;
  }
}