/* service-process-preview.css */
.service-process.service-process--preview {
    --service-process-bg: var(--color-gray-10);
}

.service-process--preview .service-process-preview {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(125deg,color-mix(in srgb,var(--color-spot-cyan-light) 75%,var(--color-spot-cyan-mid)) 0%,color-mix(in srgb,var(--color-spot-cyan-light) 75%,var(--color-spot-indigo-light)) 40%,color-mix(in srgb,var(--color-spot-indigo-light) 80%,var(--color-spot-indigo-mid)) 72%,color-mix(in srgb,var(--color-spot-indigo-light) 65%,var(--color-spot-indigo-mid)) 100%);
}

.service-process-preview-phone {
    position: absolute;
    top: 52px;
    left: 50%;
    width: var(--service-preview-phone-width,min(329px,calc(100% - 40px)));
    height: 570px;
    transform: translateX(-50%) scale(var(--service-preview-phone-scale,1));
    transform-origin: top center;
    overflow: hidden;
    border: 5px solid var(--color-bg-white);
    border-radius: 30px;
    background: var(--color-bg-white);
    box-shadow: 0 16px 36px rgb(30 41 59 / 18%),0 3px 10px rgb(30 41 59 / 10%);
}

.service-process-preview-screen {
    height: 100%;
    background: var(--color-bg-white);
}

.service-process.service-process--preview, .service-process--preview .service-process-number {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
}

@media(min-width:1025px) {
    .service-process.service-process--preview .service-process-inner {
        padding: var(--spacing-40) var(--spacing-64);
    }
    .service-process--preview .service-process-visual {
        transform: translateX(calc(var(--spacing-40) - var(--spacing-64)));
    }
    .service-process--preview .service-process-block-reverse {
        grid-template-columns: minmax(360px,.88fr) minmax(0,.92fr);
    }
    .service-process--preview .service-process-block-reverse .service-process-visual {
        transform: translateX(calc(var(--spacing-64) - var(--spacing-40)));
    }
}

@media(max-width:1024px) {
    .service-process--preview .service-process-preview {
        max-width: 520px;
    }
    .service-process.service-process--preview .service-process-inner {
        gap: var(--spacing-48);
    }
}

@media(max-width:768px) {
    .service-process.service-process--preview .service-process-inner {
        gap: var(--spacing-24);
    }
    .service-process--preview .service-process-preview {
        height: 340px;
    }
    .service-process-preview-phone {
        top: 44px;
    }
}

@media(max-width:480px) {
    .service-process--preview .service-process-preview {
        height: 300px;
    }
    .service-process-preview-phone {
        width: var(--service-preview-phone-width,min(292px,calc(100% - 40px)));
    }
}

@media(max-width:320px) {
    .service-process.service-process--preview .service-process-inner {
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
    }
}