.soft-noise {
    background-image:
        radial-gradient(
            circle at 50% 50%,
            rgb(255 255 255 / 90%),
            transparent 24rem
        ),
        radial-gradient(
            circle at 60% 40%,
            var(--sw-color-glow-warm),
            transparent 20rem
        ),
        radial-gradient(
            circle at 40% 70%,
            var(--sw-color-glow-cool),
            transparent 20rem
        );
}

/* The plus turns as soon as the answer starts to close, while the details element is still open. */
details[open]:not([data-faq-closing="true"]) .faq-plus {
    transform: rotate(45deg);
}

#faq summary {
    -webkit-user-select: none;
    user-select: none;
}

.process-scroll {
    scrollbar-width: none;
}

.process-scroll::-webkit-scrollbar {
    display: none;
}

.process-scroll:focus-visible {
    outline: 0.18rem solid rgb(33 34 36 / 30%);
    outline-offset: 0.4rem;
}

.process-step {
    opacity: 0.58;
    transform: scale(0.93) translateY(0.75rem);
}

.process-step.is-active {
    opacity: 1;
    transform: scale(0.98) translateY(0);
}

.process-dot:focus-visible,
.process-arrow:focus-visible {
    outline: 0.18rem solid rgb(33 34 36 / 35%);
    outline-offset: 0.25rem;
}

@media (max-width: 1023.98px) {
    .home-hero-title {
        font-size: 3rem;
        line-height: 1.04;
    }
}

.testimonial-avatar-stage,
.testimonial-stage {
    display: grid;
    overflow: hidden;
}

.testimonial-avatar,
.testimonial-slide {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transform: translateX(2rem);
    transition:
        opacity var(--sw-duration-slow) ease,
        transform var(--sw-duration-slow) var(--sw-ease);
}

.testimonial-avatar {
    justify-self: center;
}

.testimonial-slide.is-active,
.testimonial-avatar.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.testimonial-slide.from-left,
.testimonial-avatar.from-left {
    transform: translateX(-2rem);
}

.testimonial-slide.from-right,
.testimonial-avatar.from-right {
    transform: translateX(2rem);
}

.testimonial-slide.to-left,
.testimonial-avatar.to-left {
    opacity: 0;
    transform: translateX(-2rem);
}

.testimonial-slide.to-right,
.testimonial-avatar.to-right {
    opacity: 0;
    transform: translateX(2rem);
}

@media (min-width: 768px) {
    .testimonial-avatar {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-step,
    .testimonial-avatar,
    .testimonial-slide {
        transition: none;
    }
}