.success-stories {
    padding-top: 0 !important;
}

.success-story {
    --story-accent: #1b5bff;
    --story-soft: #e8eefb;
}

.success-story--green {
    --story-accent: #178a57;
    --story-soft: #e4f4ec;
}

.success-story--orange {
    --story-accent: #de7626;
    --story-soft: #fae6d2;
}

.success-story--gray {
    --story-accent: #3a4150;
    --story-soft: #e4e8f0;
}

.success-story--red {
    --story-accent: #c24557;
    --story-soft: #fae6e9;
}

.success-story__accent {
    color: var(--story-accent);
}

.success-story__quote {
    border: 0;
    padding: 0;
}

.success-story__avatar {
    flex: none;
    color: var(--story-accent);
    background: var(--story-soft);
}

.success-story__avatar-image {
    display: block;
    object-fit: cover;
}

.success-story__link:focus-visible {
    outline: var(--focus-ring, 3px solid #1b5bff);
    outline-offset: 3px;
}

.success-story__link {
    transition: all 0.2s ease-in-out;
}

.success-story__link:hover {
    gap: 12px;
}

.success-stories__navigation[hidden],
.success-stories__status[hidden] {
    display: none !important;
}

.success-stories__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.success-stories__filter {
    padding: 10px 18px;
    border: 1.5px solid rgba(23, 26, 32, 0.2);
    border-radius: 22px;
    color: #3a4150;
    background: #fff;
    font: 600 14px var(--font-body, sans-serif);
    cursor: pointer;
}

.success-stories__filter.is-active {
    border-color: #171a20;
    color: #fff;
    background: #171a20;
}

.success-stories__filter-select {
    display: none;
}

body.dq-dark .success-stories__filter-select {
    border-color: rgba(255, 255, 255, 0.16);
    color: #f2f4f8;
    background: #151a24;
}

.success-stories__arrow {
    font-size: 18px;
    transition:
        background-color 0.25s,
        border-color 0.25s,
        color 0.25s,
        opacity 0.25s;
}

.success-stories__arrow:not(:disabled):hover {
    border-color: #171a20;
    color: #fff;
    background: #171a20;
}

.success-stories__arrow:disabled {
    cursor: default;
    opacity: 0.3;
}

.success-story[hidden] {
    display: none !important;
}

.success-stories__progress {
    width: 0;
    transition:
        width 0.2s,
        left 0.15s;
}

.success-stories :is(button, a):focus-visible {
    outline: var(--focus-ring, 3px solid #1b5bff);
    outline-offset: 3px;
}

@media (min-width: 1025px) {
    .success-stories.has-slider .success-stories__track {
        display: flex;
        overflow-x: auto;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        cursor: grab;
        -webkit-overflow-scrolling: touch;
    }

    .success-stories.has-slider .success-stories__track::-webkit-scrollbar {
        display: none;
    }

    .success-stories.has-slider .success-story {
        flex: 0 0 calc((100% - 44px) / 3);
        min-width: 0;
        scroll-snap-align: start;
        cursor: grab;
    }

    .success-stories.has-slider .success-stories__track.is-dragging,
    .success-stories.has-slider .success-stories__track.is-dragging .success-story {
        cursor: grabbing;
    }

    .success-stories.has-slider .success-stories__track.is-dragging {
        scroll-behavior: auto;
        scroll-snap-type: none;
        user-select: none;
    }
}

@media (max-width: 1024px) {
    .success-stories header {
        align-items: flex-start;
        flex-direction: column;
    }

    .success-stories [data-r="storygrid"] {
        display: flex !important;
        width: 100%;
        max-width: none;
        gap: 16px !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .success-stories [data-r="storygrid"]::-webkit-scrollbar {
        display: none;
    }

    .success-stories [data-story-card] {
        box-sizing: border-box;
        flex: 0 0 min(88%, 520px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .success-stories__navigation,
    .success-stories__status {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .success-stories {
        padding-top: 0 !important;
        padding-bottom: 74px !important;
    }

    .success-stories__controls {
        align-items: flex-start;
    }

    .success-stories__controls > span:first-child {
        flex-basis: 100%;
    }

    .success-stories__filters {
        display: none;
    }

    .success-stories__filter-select {
        display: block;
        width: 100%;
        min-height: 46px;
        padding: 0 14px;
        border: 1.5px solid rgba(23, 26, 32, 0.2);
        border-radius: 10px;
        color: #171a20;
        background: #fff;
        font: 600 15px var(--font-body, sans-serif);
    }

    .success-stories__controls > .u-flex-1 {
        display: none;
    }

    .success-stories [data-story-card] {
        flex-basis: calc(100% - 36px);
    }
}