.bs-auto-demo { display: none; }

@media (min-width: 1200px) {
    .bs-auto-takedowns > .scan-carousel-slide > .screenshot-frame { display: none; }
    .bs-auto-takedowns .bs-auto-demo {
        --bs-auto-play: paused;
        --bs-auto-duration: 10s;
        position: relative;
        display: flex !important; /* Reveal the hidden-by-default desktop illustration. */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 578px;
        padding: 44px 34px 62px;
        box-sizing: border-box;
        border: 1px solid #e8def6;
        border-radius: 18px;
        background: radial-gradient(ellipse at 6% 4%, #d9c3ff 0, transparent 59%), radial-gradient(ellipse at 99% 94%, #b7eed0 0, transparent 54%), linear-gradient(150deg, #f6f1fb, #f7f8f7);
        isolation: isolate;
        color: #07100c;
    }
    .bs-auto-demo .bs-auto-demo__card {
        position: relative;
        width: min(100%, 386px);
        overflow: hidden;
        border: 1px solid #e7e4ef;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 20px 40px -20px #47305e45, 0 4px 10px #47305e0a;
        text-align: left;
    }
    .bs-auto-demo .bs-auto-demo__header { min-height: 70px; padding: 23px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; font: 18px/24px "Matter Medium", sans-serif; }
    .bs-auto-demo .bs-auto-demo__header svg { width: 17px; height: 17px; color: #91938f; }
    .bs-auto-demo .bs-auto-demo__row { display: flex; align-items: flex-start; gap: 14px; min-height: 82px; padding: 14px 24px; box-sizing: border-box; }
    .bs-auto-demo .bs-auto-demo__row + .bs-auto-demo__row { border-top: 1px solid #f0f0f3; }
    .bs-auto-demo .bs-auto-demo__platform { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; box-sizing: border-box; border: 2px solid #eee6ff; border-radius: 50%; }
    .bs-auto-demo .bs-auto-demo__platform svg { width: 16px; height: 16px; }
    .bs-auto-demo .bs-auto-demo__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .bs-auto-demo .bs-auto-demo__name { font: 13px/17px "Matter Regular", sans-serif; }
    .bs-auto-demo .bs-auto-demo__count { height: 32px; overflow: hidden; color: #46ce84; font: 30px/32px "Matter Medium", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
    .bs-auto-demo .bs-auto-demo__digits { transform: translateY(-128px); }
    .bs-auto-demo .bs-auto-demo__digits span { display: block; height: 32px; }
    .bs-auto-demo .bs-auto-demo__row-status { position: relative; align-self: center; width: 73px; height: 28px; }
    .bs-auto-demo .bs-auto-demo__pending { position: absolute; top: 2px; right: 0; padding: 4px 8px; background: #fff0f3; color: #d63755; border-radius: 20px; font: 11px/16px "Matter Medium", sans-serif; opacity: 0; }
    .bs-auto-demo .bs-auto-demo__check { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #35b873; background: #46ce841a; }
    .bs-auto-demo .bs-auto-demo__check svg { width: 15px; height: 15px; }
    .bs-auto-demo .bs-auto-demo__footer { position: relative; display: flex; align-items: center; gap: 12px; padding: 22px 20px; background: #07100c; color: #fff; }
    .bs-auto-demo .bs-auto-demo__bolt { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #ffffff20; color: #c1a8ff; }
    .bs-auto-demo .bs-auto-demo__bolt svg { width: 18px; height: 18px; }
    .bs-auto-demo .bs-auto-demo__footer-copy { flex: 1; min-width: 0; }
    .bs-auto-demo .bs-auto-demo__footer-copy > span { display: block; font: 14px/19px "Matter Medium", sans-serif; }
    .bs-auto-demo .bs-auto-demo__footer-copy small { display: block; margin-top: 3px; font: 11px/14px "Matter Regular", sans-serif; color: #b4bab7; max-width: 170px; }
    .bs-auto-demo .bs-auto-demo__switch { position: relative; flex: 0 0 44px; height: 25px; border-radius: 20px; background: #343c38; }
    .bs-auto-demo .bs-auto-demo__switch::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #46ce84; }
    .bs-auto-demo .bs-auto-demo__switch > span { position: absolute; left: 3px; top: 3px; height: 19px; width: 19px; border-radius: 50%; background: #fff; transform: translateX(19px); box-shadow: 0 1px 3px #0002; }
    .bs-auto-demo .bs-auto-demo__cursor { position: absolute; right: 19px; bottom: 12px; width: 25px; height: 25px; opacity: 0; }
    .bs-auto-demo .bs-auto-demo__caption { position: relative; width: 100%; height: 22px; margin-top: 23px; font: 14px/22px "Matter Medium", sans-serif; color: #4f4960; text-align: center; }
    .bs-auto-demo .bs-auto-demo__caption > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .bs-auto-demo .bs-auto-demo__caption-pending { opacity: 0; }
    .bs-auto-demo .bs-auto-demo__caption-done svg { width: 18px; height: 18px; color: #28875a; }
    .bs-auto-demo .bs-auto-demo__sample { position: absolute; bottom: 17px; font: 10px/14px "Matter Regular", sans-serif; letter-spacing: .3px; color: #787087; }

    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__card { animation: bs-auto-card-cycle var(--bs-auto-duration) linear infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__digits { animation: bs-auto-digits var(--bs-auto-duration) cubic-bezier(.22, 1, .36, 1) infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__count { animation: bs-auto-count-color var(--bs-auto-duration) linear infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__pending,
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__caption-pending { animation: bs-auto-pending var(--bs-auto-duration) linear infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__check,
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__caption-done { animation: bs-auto-completed var(--bs-auto-duration) linear infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__switch::before { animation: bs-auto-switch-color var(--bs-auto-duration) linear infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__switch > span { animation: bs-auto-switch-knob var(--bs-auto-duration) cubic-bezier(.22, 1, .36, 1) infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo__cursor { animation: bs-auto-cursor var(--bs-auto-duration) cubic-bezier(.22, 1, .36, 1) infinite; }
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo *,
    .bs-auto-takedowns.bs-auto-ready .bs-auto-demo *::before { animation-play-state: var(--bs-auto-play); }

    @keyframes bs-auto-card-cycle { 0%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
    @keyframes bs-auto-digits { 0%, 29% { transform: translateY(0); } 32%, 40% { transform: translateY(-32px); } 43%, 51% { transform: translateY(-64px); } 54%, 62% { transform: translateY(-96px); } 65%, 100% { transform: translateY(-128px); } }
    @keyframes bs-auto-count-color { 0%, 63% { color: #fd4263; } 66%, 100% { color: #46ce84; } }
    @keyframes bs-auto-pending { 0%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
    @keyframes bs-auto-completed { 0%, 64% { opacity: 0; } 68%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
    @keyframes bs-auto-switch-color { 0%, 19% { opacity: 0; } 22%, 100% { opacity: 1; } }
    @keyframes bs-auto-switch-knob { 0%, 19% { transform: translateX(0); } 22%, 100% { transform: translateX(19px); } }
    @keyframes bs-auto-cursor { 0%, 8% { opacity: 0; transform: translate(42px, 38px); } 15%, 19% { opacity: 1; transform: translate(0, 0); } 20% { opacity: 1; transform: scale(.84); } 22% { opacity: 1; transform: scale(1); } 29%, 100% { opacity: 0; transform: translate(12px, 14px); } }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .bs-auto-takedowns .bs-auto-demo *,
    .bs-auto-takedowns .bs-auto-demo *::before { animation: none !important; }
}