.voice-systems:has(.system-mockup){display:block;min-width:0;padding:0;width:100%;max-width:none}
.voice-crm-link:has(.system-mockup){width:100%;max-width:none;margin-inline:0;padding-inline:0;padding-bottom:0}
.voice-crm-link:has(.system-mockup) .voice-crm-link__inner{width:100%;column-gap:clamp(2rem,6vw,6rem)}
.voice-crm-link:has(.system-mockup) .voice-crm-link__inner>h2{padding-left:clamp(1.25rem,6vw,6rem)}
.voice-crm-link:has(.system-mockup) .voice-crm-link__copy{padding-right:clamp(1.25rem,6vw,6rem)}
.system-mockup{--accent:#1766f5;--wash:#e2ecff;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,7rem);align-items:center;padding:5rem 0 6rem;border-bottom:1px solid #dce5ef}
.system-mockup--1{--accent:#7852b8;--wash:#eadffa}.system-mockup--2{--accent:#13815f;--wash:#d9f0e5}.system-mockup--3{--accent:#a16b15;--wash:#fff0cf}
.system-mockup:nth-child(even) .system-mockup__text{order:2}
.system-mockup__number{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:22px}
.system-mockup__text h3{font-size:clamp(2rem,3.3vw,3.2rem);line-height:1.1;letter-spacing:-.04em;margin:0 0 24px}
.system-mockup__text p{font-size:1.05rem;line-height:1.8;color:#40597a;margin:0}
.system-mockup__text a{display:inline-flex;align-items:center;gap:10px;margin-top:24px;color:var(--accent);font-weight:650;text-underline-offset:5px}
.system-mockup__visual{position:relative;padding:25px 0 25px 55px;min-width:0}
.system-mockup__back{position:absolute;inset:0 45px 20px 0;padding:28px;border-radius:26px;background:var(--wash);color:var(--accent);transform:rotate(-5deg)}
.system-mockup__back>span{display:block;font-size:.65rem;letter-spacing:.12em;font-weight:700;margin-bottom:20px}
.system-mockup__back p{font-size:.75rem;position:absolute;bottom:12px}
.system-mockup__bars i{display:block;height:6px;background:currentColor;opacity:.12;border-radius:5px;margin:12px 0;width:65%}
.system-mockup__front{position:relative;background:#ffffffed;border:1px solid #dce4ee;border-radius:22px;box-shadow:0 25px 55px #17395516;overflow:hidden;backdrop-filter:blur(15px)}
.system-mockup__toolbar{display:flex;align-items:center;gap:5px;padding:16px 20px;border-bottom:1px solid #e7ecf3;background:#f8fafc}
.system-mockup__toolbar>span{height:6px;width:6px;background:#c7d2e2;border-radius:50%}.system-mockup__toolbar small{margin-left:auto;color:#76869c;font-size:.65rem}
.system-mockup__screen{padding:26px}
.system-mockup__icon{display:grid;place-items:center;width:52px;height:52px;background:var(--wash);color:var(--accent);border-radius:15px;margin-bottom:20px}
.system-mockup__screen h4{font-size:1.4rem;margin:0 0 10px;letter-spacing:-.03em}
.system-mockup__status{font-size:.65rem;color:#65758a;display:flex;align-items:center;gap:6px}.system-mockup__status i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.system-mockup__fields{margin:22px 0}.system-mockup__fields>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid #e9edf3;font-size:.78rem;color:#425772}.system-mockup__fields b{width:30px;height:5px;border-radius:3px;background:var(--wash)}.system-mockup__fields svg{color:var(--accent)}
.system-mockup__screen footer{display:flex;justify-content:space-between;gap:5px;background:var(--wash);padding:12px;border-radius:9px;font-size:.65rem;color:var(--accent)}
@media(max-width:700px){.system-mockup{grid-template-columns:1fr;gap:2rem;padding:3rem 0 4rem}.system-mockup:nth-child(even) .system-mockup__text{order:0}.system-mockup__visual{max-width:440px;width:100%;box-sizing:border-box;margin:auto;padding-left:30px}.system-mockup__screen{padding:20px}}
.voice-systems .system-mockup{min-height:100svh;box-sizing:border-box;width:100%;padding:clamp(5rem,10vh,8rem) clamp(1.5rem,8vw,9rem);background:#f5f8ff}
.voice-systems .system-mockup--1{background:#f6f1fc}.voice-systems .system-mockup--2{background:#eff8f3}.voice-systems .system-mockup--3{background:#fffaef}
/* Keep each full-screen integration in place as the next surface covers it. */
@media(min-width:901px) and (min-height:740px) and (prefers-reduced-motion:no-preference){
 body.voice-agent-page{overflow-x:clip;overflow-y:visible}
 .voice-systems:has(.system-mockup){overflow:visible;isolation:isolate}
 .voice-systems .system-mockup{position:sticky;top:0}
 .voice-systems .system-mockup--0{z-index:1}
 .voice-systems .system-mockup--1{z-index:2}
 .voice-systems .system-mockup--2{z-index:3}
 .voice-systems .system-mockup--3{z-index:4}
}
@media(max-width:760px){.voice-crm-link:has(.system-mockup) .voice-crm-link__inner>h2,.voice-crm-link:has(.system-mockup) .voice-crm-link__copy{padding-inline:1.25rem}}
