.testimonial-play {
    background-color: transparent;
    cursor: pointer;
    display: block;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    border: 0;
    outline: none;
}

.testimonial-play__svg {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.15s;
}

.testimonial-play__svg-line1,
.testimonial-play__svg-line2,
.testimonial-play__svg-line3,
.testimonial-play__svg-ring1,
.testimonial-play__svg-ring2,
.testimonial-play__svg-ring3 {
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
    animation-fill-mode: forwards;
    stroke: currentColor;
    transition: stroke 0.3s;
    transform-origin: 50px 50px;
}

.testimonial-play__svg-ring1 {
    opacity: 0.3;
}

.testimonial-play:active .testimonial-play__svg {
    transform: scale(0.9);
}

/* Playing State */
.testimonial-play[data-playing="true"] .testimonial-play__svg-line1 {
    animation-name: testimonial-play-line1;
    stroke-dasharray: 40 74.44;
}

.testimonial-play[data-playing="true"] .testimonial-play__svg-line2 {
    animation-name: testimonial-play-line2;
    stroke-dasharray: 74.44 68.88;
}

.testimonial-play[data-playing="true"] .testimonial-play__svg-line3 {
    animation-name: testimonial-play-line3;
    stroke-dasharray: 34.44 48.44;
}

.testimonial-play[data-playing="true"] .testimonial-play__svg-ring1 {
    animation-name: testimonial-play-ring1a, testimonial-play-ring1b;
    animation-timing-function: linear, cubic-bezier(0.12, 0, 0.39, 0);
}

.testimonial-play[data-playing="true"] .testimonial-play__svg-ring2 {
    animation-name: testimonial-play-ring2;
    animation-timing-function: linear;
}

/* Paused State */
.testimonial-play[data-playing="false"] .testimonial-play__svg-line1 {
    animation-name: testimonial-pause-line1;
    stroke-dasharray: 40 68.88;
}

.testimonial-play[data-playing="false"] .testimonial-play__svg-line2 {
    animation-name: testimonial-pause-line2;
    stroke-dasharray: 34.44 34.44 34.44 44.44;
}

.testimonial-play[data-playing="false"] .testimonial-play__svg-line3 {
    animation-name: testimonial-pause-line3;
    stroke-dasharray: 34.44 84.44;
}

.testimonial-play[data-playing="false"] .testimonial-play__svg-ring1 {
    animation-name: testimonial-pause-ring1a, testimonial-pause-ring1b;
    animation-timing-function: linear, cubic-bezier(0.61, 1, 0.88, 1);
    stroke-dasharray: 289 344;
}

.testimonial-play[data-playing="false"] .testimonial-play__svg-ring3 {
    animation-name: testimonial-pause-ring3;
}

/* Animations */
/* testimonial-play-line1: framesPause=65 */
@keyframes testimonial-play-line1 {

    0%,
    23.08% {
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
        stroke-dashoffset: 0;
    }

    43.08% {
        stroke-dashoffset: -74.44;
    }

    69.23% {
        stroke-dashoffset: -122.88;
    }

    84.62%,
    100% {
        stroke-dashoffset: -114.44;
    }
}

@keyframes testimonial-play-line2 {

    0%,
    23.08% {
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
        stroke-dashoffset: 40;
    }

    43.08%,
    100% {
        stroke-dashoffset: -34.44;
    }
}

@keyframes testimonial-play-line3 {

    0%,
    43.08% {
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
        stroke-dashoffset: 0;
    }

    69.23%,
    100% {
        stroke-dashoffset: -48.44;
    }
}

@keyframes testimonial-play-ring1a {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 289 344;
    }

    63.08%,
    100% {
        stroke-dashoffset: 55;
        stroke-dasharray: 55 344;
    }
}

@keyframes testimonial-play-ring1b {
    0% {
        transform: scale(-1, 1) rotate(-90deg);
    }

    53.08%,
    100% {
        transform: scale(-1, 1) rotate(-442deg);
    }
}

@keyframes testimonial-play-ring2 {
    0% {
        stroke-dashoffset: 344;
    }

    63.08% {
        stroke-dashoffset: 0;
    }

    80% {
        animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
        stroke-dashoffset: -45;
    }

    96.92%,
    100% {
        stroke-dashoffset: -35;
    }
}

/* testimonial-pause-line1: framesPlay=60 */
@keyframes testimonial-pause-line1 {

    0%,
    20% {
        stroke-dashoffset: -108.88;
    }

    33.33% {
        stroke-dashoffset: -98.88;
    }

    50%,
    66.67% {
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
        stroke-dashoffset: -177.76;
    }

    83.33%,
    100% {
        stroke-dashoffset: -217.76;
    }
}

@keyframes testimonial-pause-line2 {

    0%,
    33.33% {
        stroke-dashoffset: 113.33;
    }

    50% {
        animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
        stroke-dasharray: 34.44 34.44 34.44 44.44;
        stroke-dashoffset: 68.88;
    }

    75% {
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
        stroke-dasharray: 34.44 34.44 34.44 44.44;
        stroke-dashoffset: 51.66;
    }

    100% {
        stroke-dasharray: 68.88 0 34.44 44.44;
        stroke-dashoffset: 34.44;
    }
}

@keyframes testimonial-pause-line3 {

    0%,
    33.33% {
        stroke-dashoffset: 74.44;
    }

    66.67%,
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes testimonial-pause-ring1a {

    0%,
    25% {
        stroke-dashoffset: 130;
        stroke-dasharray: 40 379;
    }

    91.67%,
    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 289 379;
    }
}

@keyframes testimonial-pause-ring1b {

    0%,
    49.17% {
        transform: scale(-1, -1) rotate(-81deg);
    }

    91.67%,
    100% {
        transform: scale(-1, -1) rotate(90deg);
    }
}

@keyframes testimonial-pause-ring3 {
    0% {
        stroke-dashoffset: -35;
        stroke-dasharray: 40 365;
    }

    20% {
        stroke-dashoffset: -35;
        stroke-dasharray: 46 365;
    }

    25% {
        stroke-dashoffset: -35;
        stroke-dasharray: 40 365;
    }

    100% {
        stroke-dashoffset: 289;
        stroke-dasharray: 40 365;
    }
}
.testimonial { cursor:pointer; }
.testimonial .testimonial-play { position:absolute; top:16px; left:16px; z-index:4; width:56px; height:56px; color:#fff; background:transparent; border:0; border-radius:0; opacity:1; transform:none; filter:drop-shadow(0 4px 3px #00000012); transition:transform .3s; }
.testimonial .testimonial-play:hover { transform:scale(1.1); }
.testimonial .testimonial-play:focus-visible,.testimonial-mute:focus-visible { outline:2px solid #80dc63; outline-offset:4px; }
.testimonial::before { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; z-index:5; background:linear-gradient(90deg,transparent,#22c55e,transparent); pointer-events:none; }
.testimonial::after { inset:50% 0 0; transition:opacity .5s; pointer-events:none; }
.testimonial-caption { left:24px; right:24px; bottom:20px; z-index:3; transition:opacity .5s; pointer-events:none; }
.testimonial-caption strong { font-size:24px; line-height:32px; font-weight:500; }
.testimonial-caption small { font-size:16px; line-height:20px; margin-top:8px; }
.testimonial > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.testimonial.has-started > video { opacity:1; }
.testimonial.has-started > img,.testimonial.has-started .testimonial-caption,.testimonial.has-started::after { opacity:0; }
.testimonial > img { transition:opacity .3s,transform .3s; }
.testimonial:hover > img { transform:scale(1.02); }
.testimonial-mute { position:absolute; right:16px; top:16px; z-index:4; width:40px; height:40px; border-radius:50%; background:#0008; display:grid; place-items:center; backdrop-filter:blur(8px); }
.testimonial-mute[hidden] { display:none; }
.testimonial-mute svg { width:20px; height:20px; }
.testimonial.is-playing .muted-cross { display:none; }
.testimonial.is-muted .muted-cross { display:block; }
@media(min-width:1024px) { .testimonial:not(.is-active):not(.is-neighbor) .testimonial-play { display:none; } }
@media(max-width:639px) { .testimonial .testimonial-play { width:48px; height:48px; } .testimonial-caption { left:16px; right:16px; bottom:16px; } .testimonial-caption strong { font-size:20px; line-height:28px; } .testimonial-caption small { font-size:14px; line-height:17.5px; } .testimonial-mute { width:36px; height:36px; } }
@media(prefers-reduced-motion:reduce) { .testimonial-play svg * { animation-duration:.01ms!important; } }

.testimonial.is-muted .volume-waves { display:none; }
.testimonial:not(.is-muted) .volume-waves { display:block; }

/* Source thumbnail rail: 52px portraits with circular distance falloff. */
.testimonial-dots { position:relative; display:block; height:96px; margin-top:48px; padding:0; overflow:hidden; }
.testimonial-dots button { position:absolute; left:calc(50% - 26px); top:22px; width:52px; height:52px; margin:0; padding:0; border:2px solid #ffffff4d; transform:translateX(var(--dot-x,0px)) scale(var(--dot-scale,0)); opacity:var(--dot-opacity,0); transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .7s,border-color .7s,box-shadow .7s; }
.testimonial-dots button.active { transform:translateX(var(--dot-x,0px)) scale(var(--dot-scale,1.1)); opacity:1; border-color:white; box-shadow:0 10px 15px -3px #0003; }
.testimonial-dots button:disabled { opacity:0; pointer-events:none; }
.testimonial-dots.is-rebasing button { transition:none; }
.testimonial-track.is-rebasing,.testimonial-track.is-dragging { scroll-snap-type:none; scroll-behavior:auto; }
.testimonial-track.is-rebasing .testimonial { transition:none; }
.testimonial-track.is-dragging { cursor:grabbing; user-select:none; }
.testimonial > img { -webkit-user-drag:none; user-select:none; }
@media(max-width:1023px) { .testimonial-track { --testimonial-width:max(280px,calc((100vw - 80px)/1.5)); gap:24px; } .testimonial-dots { margin-top:32px; } }
@media(prefers-reduced-motion:reduce) { .testimonial-dots button { transition:none; } }

@media(min-width:1024px) { .testimonial-track { padding-block:32px; } }