/* Voice capability illustrations share motion controls, not a repeated card shell. */
.sms-page[data-product="voice-message"] .sms-values--editorial .sms-values__item[open] { background:transparent; }
.sms-page[data-product="voice-message"] .sms-values--editorial .sms-values__demo-surface { padding:0; background:transparent; border:0; border-radius:0; }
.voice-art { position:relative; isolation:isolate; display:grid; align-content:center; gap:22px; min-height:320px; padding:25px 16px 30px; color:#172e51; --va-blue:#2458be; --va-shadow:0 14px 30px -15px #173c7540; }
.voice-art *, .voice-art *::before, .voice-art *::after { box-sizing:border-box; }
.voice-art svg { display:block; flex:none; width:23px; height:23px; }
.voice-art strong { font-weight:500; }
.voice-art__note { margin:0; color:#526178; font-size:11px; line-height:1.7; text-align:center; }
.voice-art__wave { display:flex; align-items:center; justify-content:center; gap:5px; height:50px; color:#28745b; }
.voice-art__wave i { display:block; flex:0 1 5px; width:5px; min-width:2px; border-radius:3px; background:currentColor; transform-origin:center; }
.voice-art__wire { position:relative; display:block; height:3px; background:#bfd1ed; overflow:hidden; }
.voice-art__wire i { position:absolute; display:block; top:0; left:0; width:14px; height:3px; background:#2458be; }
.voice-art__outbound { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:26px; align-items:center; }
.voice-art__request { display:grid; gap:17px; padding:20px; border-radius:13px; background:#172e51; color:#e8effb; }
.voice-art__request>span { font-size:11px; color:#b9d0f4; }
.voice-art__request>code { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.voice-art__request>div { display:grid; gap:8px; padding-top:16px; border-top:1px solid #42618b; }
.voice-art__request>div>span { font-size:10px; color:#b9d0f4; }
.voice-art__request strong { font-size:13px; line-height:1.5; }
.voice-art__request>i { display:flex; justify-content:end; padding:9px 12px; border-radius:8px; color:#fff; background:#2458be; }
.voice-art__call { display:grid; justify-items:center; gap:10px; text-align:center; min-width:0; }
.voice-art__call-phone { display:grid; place-items:center; width:63px; height:63px; border-radius:50%; background:#dcefe6; color:#205d47; }
.voice-art__call-phone svg { width:28px; height:28px; }
.voice-art__call>strong { font-size:17px; line-height:1.4; }
.voice-art__call>span:not(.voice-art__call-phone):not(.voice-art__wave) { font-size:11px; color:#526178; }
.voice-art__call .voice-art__wave { height:40px; width:100%; }
.voice-art__connected { display:flex; align-items:center; justify-content:center; gap:6px; line-height:1.5; }
.voice-art__connected svg { width:16px; height:16px; color:#205d47; }
.voice-art__sip { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); align-items:start; gap:0; }
.voice-art__endpoint { position:relative; z-index:1; display:grid; justify-items:center; gap:14px; padding-top:18px; }
.voice-art__endpoint>svg { width:58px; height:58px; padding:16px; border-radius:50%; color:#fff; background:#2458be; }
.voice-art__endpoint>span { min-height:40px; font-size:12px; line-height:1.6; text-align:center; overflow-wrap:anywhere; }
.voice-art__endpoint--green>svg { background:#dcefe6; color:#205d47; }
.voice-art__protocols { display:grid; gap:20px; }
.voice-art__protocols>div { display:grid; justify-items:center; gap:9px; }
.voice-art__protocols>div>span:not(.voice-art__wire) { width:78px; padding:9px; border-radius:8px; background:#dce7fb; color:#214f9f; text-align:center; font-size:13px; }
.voice-art__protocols>div:nth-child(2)>span:not(.voice-art__wire) { background:#dcefe6; color:#205d47; }
.voice-art__protocols .voice-art__wire { width:100%; }
.voice-art__protocols>div:nth-child(2) .voice-art__wire { background:#c2dfcf; }
.voice-art__protocols>div:nth-child(2) .voice-art__wire i { background:#28745b; }
.voice-art__otp { width:90%; max-width:380px; justify-self:center; padding:22px; border-radius:14px; background:#fff; box-shadow:var(--va-shadow); }
.voice-art__otp>header { display:flex; align-items:center; gap:12px; }
.voice-art__otp>header>span { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:#e5dff5; color:#624887; }
.voice-art__otp>header>div { display:grid; gap:5px; }
.voice-art__otp strong { font-size:17px; }
.voice-art__otp small { font-size:11px; color:#526178; }
.voice-art__otp-audio { margin-top:19px; padding:12px; border-radius:10px; background:#f0ecf8; text-align:center; }
.voice-art__otp-audio .voice-art__wave { color:#7655a0; }
.voice-art__otp-audio>span:last-child { display:block; margin-top:5px; font-size:11px; color:#624887; }
.voice-art__digits { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:20px; text-align:center; }
.voice-art__digits>span { min-width:0; display:grid; gap:9px; }
.voice-art__digits b { display:block; font-size:30px; line-height:1.2; font-weight:500; font-variant-numeric:tabular-nums; }
.voice-art__digits i { height:3px; border-radius:3px; background:#a38ac6; transform-origin:left; }
.voice-art__notification { position:relative; width:90%; justify-self:center; padding:32px 24px 22px; border-radius:5px 16px 16px; background:#2458be; color:#fff; }
.voice-art__tts { position:absolute; top:-17px; left:22px; padding:8px 13px; border-radius:8px; background:#dcefe6; color:#205d47; font-size:11px; }
.voice-art__notification>p { margin:0 0 23px; font-size:23px; line-height:1.5; }
.voice-art__playback { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.voice-art__playback>span:first-child { font-size:11px; line-height:1.5; color:#dce7fb; }
.voice-art__playback .voice-art__wave { flex:0 1 108px; color:#b1d9c5; }
.voice-art__playhead { height:3px; margin-top:13px; border-radius:3px; background:#658bd2; }
.voice-art__playhead i { display:block; width:100%; height:100%; border-radius:3px; background:#b1d9c5; transform-origin:left; }
.voice-art__mask { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr); align-items:start; gap:10px; }
.voice-art__party { position:relative; z-index:1; display:grid; justify-items:center; gap:13px; padding-top:13px; }
.voice-art__party>svg { width:44px; height:44px; padding:11px; background:#dce7fb; color:#2458be; border-radius:50%; }
.voice-art__party:last-of-type>svg { background:#dcefe6; color:#205d47; }
.voice-art__party>span { font-size:12px; line-height:1.5; text-align:center; }
.voice-art__private { position:relative; z-index:1; display:grid; justify-items:center; gap:12px; text-align:center; }
.voice-art__lock { display:grid; place-items:center; width:70px; height:70px; border-radius:21px; background:#7655a0; color:#fff; }
.voice-art__lock svg { width:32px; height:32px; }
.voice-art__private strong { font-size:18px; line-height:1.4; white-space:nowrap; }
.voice-art__private>span:last-child { font-size:11px; color:#624887; }
.voice-art__mask-wire { position:absolute; top:35px; left:13%; right:13%; }
.voice-art__mask-wire .voice-art__wire { background:#d8cce8; }
.voice-art__mask-wire i { background:#7655a0; }
.voice-art__ivr { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); align-items:center; gap:32px; }
.voice-art__keypad { padding:18px; border-radius:14px; background:#172e51; color:#fff; }
.voice-art__keypad>span { display:block; margin-bottom:16px; font-size:13px; }
.voice-art__keypad>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.voice-art__keypad i { display:grid; place-items:center; height:32px; font-size:14px; font-style:normal; border-radius:7px; background:#35547e; }
.voice-art__keypad i[data-va-key] { background:#b1d9c5; color:#205d47; }
.voice-art__menu { position:relative; display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.voice-art__menu::before { content:''; position:absolute; left:-16px; top:24px; bottom:24px; width:1px; background:#b8cdec; }
.voice-art__menu li { position:relative; display:flex; align-items:center; gap:9px; min-height:48px; padding:10px 12px; border-radius:9px; background:#e5edfc; color:#214f9f; font-size:12px; line-height:1.5; }
.voice-art__menu li::before { content:''; position:absolute; top:50%; left:-16px; width:16px; height:1px; background:#b8cdec; }
.voice-art__menu svg { width:17px; height:17px; }
.voice-art__menu .is-selected { background:#dcefe6; color:#205d47; }
.voice-art__menu li>i { position:absolute; top:50%; left:-32px; width:32px; height:3px; background:#28745b; transform-origin:left; }
.voice-art__click { width:88%; max-width:380px; justify-self:center; }
.voice-art__click>header,.voice-art__browser>header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; color:#526178; background:#e5edfc; border-radius:12px 12px 0 0; font-size:11px; }
.voice-art__click>header>span,.voice-art__browser>header>span { display:flex; gap:5px; }
.voice-art__click>header i,.voice-art__browser>header i { width:5px; height:5px; border-radius:50%; background:#9fb5d8; }
.voice-art__contact { display:flex; align-items:center; gap:12px; padding:23px 17px; border-radius:0 0 12px 12px; background:#fff; box-shadow:var(--va-shadow); }
.voice-art__contact>span:first-child { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#2458be; background:#dce7fb; flex:none; }
.voice-art__contact>strong { flex:1; font-size:17px; line-height:1.4; }
.voice-art__call-button { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; background:#2458be; color:#fff; }
.voice-art__click-path { position:relative; display:flex; justify-content:center; margin:0 auto; width:3px; height:42px; }
.voice-art__click-path .voice-art__wire { position:absolute; width:42px; rotate:90deg; top:19px; }
.voice-art__click-path>span:not(.voice-art__wire) { position:absolute; top:42px; display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:#dcefe6; color:#205d47; }
.voice-art__click-result { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:53px; font-size:11px; line-height:1.6; color:#205d47; }
.voice-art__click-result svg { width:16px; height:16px; }
.voice-art__rtc { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(32px,.8fr) 72px; align-items:start; }
.voice-art__rtc-audio { min-width:0; display:grid; gap:13px; text-align:center; }
.voice-art__rtc-audio .voice-art__wave { width:100%; height:66px; justify-content:space-between; gap:3px; color:#7655a0; }
.voice-art__rtc-audio>strong { font-size:12px; line-height:18px; }
.voice-art__rtc-audio>span:last-child { color:#624887; font-size:11px; line-height:1.5; }
.voice-art__duplex { display:grid; gap:13px; margin-top:24px; }
.voice-art__duplex .voice-art__wire:last-child { rotate:180deg; }
.voice-art__socket { display:grid; justify-items:stretch; gap:13px; text-align:center; }
.voice-art__socket>span { display:grid; place-items:center; width:100%; height:66px; border-radius:17px; background:#7655a0; color:#fff; }
.voice-art__socket strong { font-size:12px; line-height:18px; }
@media(max-width:600px) {
 .voice-art { padding-inline:10px; }
 .voice-art__outbound { gap:16px; }
 .voice-art__request { padding:16px 13px; gap:14px; }
 .voice-art__request strong { font-size:11px; }
 .voice-art__request code { font-size:11px; }
 .voice-art__call>strong { font-size:15px; }
 .voice-art__call>span:not(.voice-art__call-phone):not(.voice-art__wave) { font-size:10px; }
 .voice-art__endpoint>span { font-size:11px; }
 .voice-art__otp { width:100%; padding:19px; }
 .voice-art__digits { gap:6px; }
 .voice-art__digits b { font-size:27px; }
 .voice-art__notification { width:100%; padding:29px 20px 20px; }
 .voice-art__notification>p { font-size:21px; }
 .voice-art__private strong { font-size:15px; }
 .voice-art__party>span { font-size:11px; }
 .voice-art__ivr { gap:26px; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); }
 .voice-art__keypad { padding:15px 12px; }
 .voice-art__keypad>div { gap:5px; }
 .voice-art__keypad i { height:29px; }
 .voice-art__menu li { padding:10px; gap:6px; font-size:11px; }
 .voice-art__menu li>i { left:-26px; width:26px; }
 .voice-art__click { width:100%; }
 .voice-art__contact { gap:10px; padding-inline:14px; }
 .voice-art__contact>strong { font-size:16px; }
 .voice-art__rtc { grid-template-columns:minmax(0,1.3fr) minmax(24px,.65fr) 64px; }
 .voice-art__rtc-audio .voice-art__wave { height:56px; }
 .voice-art__duplex { margin-top:19px; }
 .voice-art__socket>span { height:56px; }
 .voice-art__socket strong { font-size:11px; }
}
/* The browser is one functional call panel; the transport and receiver stay outside. */
.rtc-call { width:100%; max-width:480px; justify-self:center; display:grid; grid-template-columns:minmax(0,1fr) 40px 80px; align-items:center; }
.rtc-call__panel { min-width:0; display:grid; gap:17px; padding-bottom:19px; border-radius:14px; background:#fff; box-shadow:var(--va-shadow); overflow:hidden; }
.rtc-call__browser { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; color:#214f9f; background:#e5edfc; }
.rtc-call__browser>span { display:flex; gap:5px; }
.rtc-call__browser i { width:5px; height:5px; border-radius:50%; background:#9fb5d8; }
.rtc-call__browser strong { font-size:12px; }
.rtc-call__origin { display:flex; align-items:center; gap:12px; margin:2px 18px 0; }
.rtc-call__origin>span:first-child { display:grid; place-items:center; flex:none; width:43px; height:43px; border-radius:50%; background:#e5dff5; color:#624887; }
.rtc-call__origin>span:last-child { font-size:12px; line-height:1.5; color:#526178; }
.rtc-call__dial { display:flex; align-items:center; justify-content:center; gap:9px; margin:0 18px; padding:10px 12px; border-radius:8px; background:#2458be; color:#fff; font-size:12px; line-height:1.5; }
.rtc-call__dial svg { width:18px; height:18px; }
.rtc-call__bridge { display:grid; gap:12px; }
.rtc-call__bridge>span { display:block; height:3px; background:#c1d1eb; overflow:hidden; }
.rtc-call__bridge>span:last-child { rotate:180deg; }
.rtc-call__bridge i { display:block; width:100%; height:100%; transform-origin:left; background:#7655a0; }
.rtc-call__remote { display:grid; justify-items:center; gap:13px; position:relative; }
.rtc-call__service { position:absolute; top:-31px; font-size:11px; }
.rtc-call__receiver { display:grid; place-items:center; width:80px; height:80px; border-radius:50%; background:#dcefe6; color:#205d47; }
.rtc-call__receiver svg { width:30px; height:30px; }
.rtc-call__target { position:absolute; top:93px; width:100%; text-align:center; font-size:11px; line-height:1.5; color:#526178; }
.rtc-call__audio { margin:0 18px; padding-top:13px; border-top:1px solid #e5eaf2; }
.rtc-call__audio .voice-art__wave { gap:5px; height:43px; color:#28745b; }
.rtc-call__status { display:flex; align-items:center; justify-content:center; gap:7px; margin-inline:18px; color:#205d47; font-size:11px; }
.rtc-call__status>span:first-child { display:grid; place-items:center; flex:none; width:21px; height:21px; border-radius:50%; background:#dcefe6; }
.rtc-call__status svg { width:14px; height:14px; }
.rtc-call__state { display:block; height:20px; overflow:hidden; min-width:100px; }
.rtc-call__state>span { display:block; transform:translateY(-66.666667%); }
.rtc-call__state i { display:block; height:20px; font-style:normal; line-height:20px; }
@media(max-width:600px) {
 .rtc-call { grid-template-columns:minmax(0,1fr) 24px 64px; }
 .rtc-call__panel { gap:15px; }
 .rtc-call__browser { padding:12px 14px; }
 .rtc-call__origin { margin-inline:14px; gap:9px; }
 .rtc-call__origin>span:first-child { width:35px; height:35px; }
 .rtc-call__origin>span:last-child { font-size:11px; }
 .rtc-call__dial { margin-inline:14px; font-size:11px; gap:6px; padding-inline:9px; }
 .rtc-call__receiver { width:64px; height:64px; }
 .rtc-call__audio { margin-inline:14px; }
 .rtc-call__audio .voice-art__wave { gap:4px; }
 .rtc-call__status { margin-inline:14px; font-size:10px; gap:5px; }
 .rtc-call__state { min-width:91px; }
 .rtc-call__service { font-size:10px; }
 .rtc-call__target { top:77px; font-size:10px; }
}