.sgsp-agent-demo {
    box-sizing: border-box;
    width: min(calc(100% - 32px), 1280px);
    margin: clamp(32px, 6vw, 80px) auto;
    padding: clamp(20px, 4vw, 52px);
    display: grid;
    grid-template-columns: minmax(0, clamp(300px, 29vw, 380px)) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
    background: radial-gradient(ellipse at 15% 0%, #25234d 0%, #141525 50%, #10111b 100%);
    border: 1px solid #383558;
    border-radius: 24px;
    color: #f6f5fc;
    scroll-margin-top: 120px;
}
.sgsp-agent-demo__copy { grid-column: 2; grid-row: 1; }
.sgsp-agent-demo__video {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    background: #111424;
}
.sgsp-agent-demo__eyebrow {
    color: #c4b9ff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.sgsp-agent-demo h2 {
    color: inherit;
    margin: .35em 0;
    font-size: clamp(1.85rem, 4vw, 3.5rem);
    line-height: 1.05;
}
.sgsp-agent-demo__copy p:not(.sgsp-agent-demo__eyebrow) {
    max-width: 40ch;
    color: #d1cee2;
    line-height: 1.6;
}
.sgsp-agent-demo__cta, .sgsp-agent-demo-link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: 700;
}
.sgsp-agent-demo__cta {
    margin-top: .75rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    color: #15112c;
    background: #d8d0ff;
    text-decoration: none;
}
.sgsp-agent-demo__cta:hover { background: #eee9ff; color: #15112c; }
.sgsp-agent-demo-link {
    margin-top: .75rem;
    color: #c4b9ff;
    text-decoration: underline;
    text-underline-offset: .25em;
}
.sgsp-agent-demo__cta:focus-visible, .sgsp-agent-demo-link:focus-visible {
    outline: 2px solid #c4b9ff;
    outline-offset: 4px;
}
@media (max-width: 700px) {
    .sgsp-agent-demo {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .sgsp-agent-demo__copy, .sgsp-agent-demo__video { grid-column: 1; grid-row: auto; }
    .sgsp-agent-demo__video { width: min(100%, 360px); justify-self: center; }
    .sgsp-agent-demo__copy { display: contents; }
    .sgsp-agent-demo__copy h2, .sgsp-agent-demo__copy p { margin: 0; }
    .sgsp-agent-demo__cta { grid-row: 5; justify-self: start; margin: 0; }
}