/* Voice extends the shared product layout; the legacy route stays compatible. */
.sms-page[data-product="voice-message"] { --voice-ink:#15233b; --voice-muted:#526178; }
.voice-container { width:min(1200px,100%); margin-inline:auto; }
.voice-product-section { padding:96px max(24px,calc((100vw - 1200px)/2)); color:var(--voice-ink); }
.voice-heading { max-width:760px; margin-bottom:48px; }
.voice-heading h2 { margin:0; font-size:clamp(32px,3.4vw,48px); line-height:1.15; letter-spacing:-.025em; text-wrap:balance; }
.voice-heading p { margin:24px 0 0; max-width:70ch; font-size:17px; line-height:1.7; color:var(--voice-muted); }
.voice-product-section h3 { margin:0; font-size:21px; line-height:1.35; }
.voice-product-section article p { margin:16px 0 0; color:var(--voice-muted); font-size:16px; line-height:1.7; }
.voice-extras { display:flex; flex-wrap:wrap; gap:12px; margin:36px 0 0; padding:0; list-style:none; }
.voice-extras li { padding:10px 16px; border-radius:8px; background:#eef4ff; color:#244b8e; font-size:14px; }
.voice-advantages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.voice-advantages article { padding-top:24px; border-top:1px solid #dae2ed; }
.voice-console { margin:0; min-width:0; padding:28px; border-radius:16px; background:#fff; box-shadow:0 22px 70px #183b7620; color:#15233b; }
.voice-console__bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:24px; border-bottom:1px solid #e2e8f0; }
.voice-console__bar strong { font-size:26px; }
.voice-console__bar span { font-size:14px; color:#526178; }
.voice-console__call { display:flex; align-items:center; gap:12px; padding:24px 0; border-bottom:1px solid #e2e8f0; }
.voice-console__call>svg { width:24px; flex-shrink:0; color:#2463df; }
.voice-console__call>span:not(.voice-wave) { flex:1; min-width:0; }
.voice-console__call strong,.voice-console__call small { display:block; line-height:1.6; }
.voice-console__call strong { font-size:15px; }
.voice-console__call small { margin-top:4px; font-size:12px; color:#526178; }
.voice-console__call b { font-size:12px; font-variant-numeric:tabular-nums; }
.voice-console__footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:24px; font-size:12px; color:#2b579f; }
.voice-console figcaption { margin-top:20px; font-size:12px; line-height:1.6; color:#526178; }
.voice-wave { display:flex; align-items:center; gap:3px; height:28px; }
.voice-wave i { width:3px; height:calc(8px + var(--wave)*2px); background:#2563eb; border-radius:3px; animation:voice-wave 1.2s ease-in-out infinite alternate; animation-delay:calc(var(--wave)*-.13s); }
@keyframes voice-wave { to { transform:scaleY(.35); } }
.sms-page[data-product="voice-message"] .sms-use-cases__tabs { display:flex; overflow-x:auto; }
.sms-page[data-product="voice-message"] .sms-use-cases__tab { flex:1 0 auto; font-size:16px; gap:6px; padding-inline:12px; }
.sms-page[data-product="voice-message"] .sms-use-cases__tab img { width:24px; height:24px; }
.sms-page[data-product="voice-message"] .sms-use-cases__media-slot--static { display:grid; align-items:center; top:76px; left:24px; width:calc(100% - 48px); height:calc(100% - 100px); padding:0; aspect-ratio:auto; transform:none; overflow:visible; }
.sms-page[data-product="voice-message"] .sms-use-cases__panel { height:auto; min-height:460px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.sms-page[data-product="voice-message"] .sms-use-cases__media { height:100%; min-height:460px; }
.sms-page[data-product="voice-message"] .sms-use-cases__panel h3 { min-height:72px; align-items:flex-start; }
.sms-page[data-product="voice-message"] .sms-use-cases__panel-copy>p { min-height:130px; }
.sms-page[data-product="voice-message"] .sms-use-cases__cta { margin-top:auto; }
.sms-page[data-product="voice-message"] .sms-use-cases__copy { gap:28px; }
.voice-scenario { width:100%; padding:28px; background:#fff; border-radius:16px; box-shadow:0 16px 40px #234b8012; color:#15233b; }
.voice-scenario[hidden] { display:none; }
.voice-scenario__title { display:flex; align-items:center; gap:12px; font-size:20px; }
.voice-scenario__title svg { width:28px; color:#2563eb; }
.voice-scenario ol { display:grid; gap:16px; padding:0; margin:28px 0; list-style:none; counter-reset:voice-step; }
.voice-scenario li { display:flex; gap:16px; align-items:center; font-size:16px; line-height:1.5; counter-increment:voice-step; }
.voice-scenario li::before { content:counter(voice-step); display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; background:#edf3ff; color:#215bd0; font-size:13px; font-weight:600; }
.voice-scenario>p { margin:0; color:#526178; font-size:12px; }
.sms-page[data-product="voice-message"] .sms-api-editor__lines { overflow-x:auto; }
.sms-page[data-product="voice-message"] .sms-api-editor__lines code { white-space:pre; }
.sms-page[data-product="voice-message"] .sms-developer-experience { min-height:0; padding-bottom:48px; }
.sms-page[data-product="voice-message"] .sms-api-workspace { height:auto; }
.sms-page[data-product="voice-message"] .sms-api-workspace__content { height:auto; }
.sms-page[data-product="voice-message"] .sms-api-editor,
.sms-page[data-product="voice-message"] .sms-api-response { min-height:0; }
.sms-page[data-product="voice-message"] .sms-api-editor__lines { height:auto; }
.sms-page[data-product="voice-message"] .sms-api-response__heading-copy small,
.sms-page[data-product="voice-message"] .sms-api-progress__labels,
.sms-page[data-product="voice-message"] .sms-hero__metric dd { color:#526178; }
@media(min-width:921px) and (max-width:1279px) {
 .sms-page[data-product="voice-message"] .sms-hero__columns { padding-inline:48px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; }
 .sms-page[data-product="voice-message"] .sms-hero__tags { gap:8px; }
 .sms-page[data-product="voice-message"] .sms-hero__tags li { padding-inline:10px; }
}
@media(max-width:920px) {
 .sms-page[data-product="voice-message"] .sms-use-cases__panel { grid-template-columns:1fr; }
 .sms-page[data-product="voice-message"] .sms-use-cases__media { height:420px; min-height:420px; }
 .sms-page[data-product="voice-message"] .sms-use-cases__panel h3 { min-height:0; }
 .sms-page[data-product="voice-message"] .sms-use-cases__panel-copy>p { min-height:104px; }
}
@media(max-width:1000px) {
 .voice-product-section { padding:72px 32px; }
 .voice-advantages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
 .sms-page[data-product="voice-message"] .sms-use-cases__tabs { display:flex; overflow-x:auto; }
 .sms-page[data-product="voice-message"] .sms-use-cases__tab { flex:0 0 auto; padding-inline:18px; }
}
@media(max-width:600px) {
 .voice-product-section { padding:56px 24px; }
 .voice-heading { margin-bottom:32px; }
 .voice-heading h2 { font-size:32px; }
 .voice-heading p { font-size:16px; }
 .voice-advantages { grid-template-columns:1fr; gap:24px; }
 .voice-console { padding:20px; }
 .voice-console__call { gap:8px; }
 .voice-console__call strong { font-size:14px; }
 .sms-page[data-product="voice-message"] .sms-use-cases__media { height:390px; min-height:390px; }
 .voice-scenario { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { .voice-wave i { animation:none; } }

/* Reuse the shared product accordion; only the voice flow demo is specific. */
.sms-page[data-product="voice-message"] .sms-values .voice-capability-description { margin:0 0 20px; }
.sms-page[data-product="voice-message"] .sms-values .voice-extras { margin-top:8px; gap:8px; }
.sms-page[data-product="voice-message"] .sms-values .voice-extras li { padding:8px 12px; font-size:13px; }
.voice-capability-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.voice-capability-flow li { position:relative; display:grid; align-items:center; min-width:0; min-height:128px; padding:20px 12px; background:#eef4ff; border-radius:12px; color:#244b8e; text-align:center; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.voice-capability-flow li:not(:last-child)::after { content:''; position:absolute; top:50%; left:calc(100% + 8px); width:8px; height:8px; border-top:1.5px solid #526178; border-right:1.5px solid #526178; transform:translateY(-50%) rotate(45deg); }
@media(max-width:480px) {
 .voice-capability-flow { grid-template-columns:1fr; gap:20px; }
 .voice-capability-flow li { min-height:64px; padding:12px 16px; }
 .voice-capability-flow li:not(:last-child)::after { top:calc(100% + 6px); left:50%; transform:translateX(-50%) rotate(135deg); }
}

/* One plane for the device, screen, status bar and controls. */
.voice-phone-scene { position:relative; margin:0; display:grid; justify-items:center; gap:30px; min-width:0; padding:24px 0; }
.voice-phone { position:relative; width:286px; height:580px; border:7px solid #182237; border-radius:46px; background:#182237; box-shadow:16px 28px 48px #142d5726; transform:translateX(-28px); }
.voice-phone__screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:37px; background:#fafafa; color:#142b50; }
.voice-phone__screen>* { position:absolute; left:50%; transform:translateX(-50%); }
.voice-phone__island { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:86px; height:23px; border-radius:20px; background:#182237; z-index:2; }
.voice-phone__top { position:absolute; inset:17px 24px auto; display:flex; justify-content:space-between; color:#15294c; font-size:11px; font-weight:600; z-index:1; }
.voice-phone__brand { top:62px; font-size:12px; color:#4c6080; white-space:nowrap; }
.voice-phone__portrait { top:108px; display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:#316bdf; color:#fff; font-size:25px; }
.voice-phone__name { top:201px; width:100%; text-align:center; font-size:26px; line-height:1.3; }
.voice-phone__number { top:243px; font-size:14px; color:#526580; font-variant-numeric:tabular-nums; white-space:nowrap; }
.voice-phone__status { top:282px; width:100%; display:grid; justify-items:center; gap:10px; font-size:14px; }
.voice-phone__status time { font-size:16px; font-variant-numeric:tabular-nums; opacity:0; }
.voice-phone-scene[data-call-phase="connected"] time { opacity:1; }
.voice-phone__wave { top:343px; height:40px; display:flex; align-items:center; gap:4px; opacity:0; }
.voice-phone__wave i { width:3px; height:var(--height); border-radius:3px; background:#316bdf; animation:voice-speech 650ms ease-in-out infinite alternate; animation-delay:calc(var(--bar)*-97ms); }
.voice-phone-scene[data-call-phase="connected"] .voice-phone__wave { opacity:1; }
.voice-phone-scene[data-call-phase="ringing"] .voice-phone__portrait { animation:voice-ring 1.2s ease-out infinite; }
.voice-phone__controls { top:411px; display:flex; gap:30px; }
.voice-phone__controls span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#ebedf0; }
.voice-phone__controls svg { width:21px; height:21px; }
.voice-phone__hangup { top:478px; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#df4254; color:#fff; }
.voice-phone__hangup svg { width:25px; height:25px; transform:rotate(135deg); }
.voice-phone__home { bottom:10px; width:92px; height:4px; border-radius:5px; background:#182237; }
.voice-call-toast { position:absolute; z-index:3; top:250px; right:0; display:flex; align-items:center; gap:16px; width:242px; padding:22px; border-radius:14px; background:#fff; color:#142b50; box-shadow:0 14px 36px #142d5726; opacity:0; visibility:hidden; transform:translate(20px,12px) scale(.96); transition:opacity 350ms ease,transform 500ms cubic-bezier(.16,1,.3,1),visibility 350ms; pointer-events:none; }
.voice-phone-scene[data-call-phase="connected"] .voice-call-toast { opacity:1; visibility:visible; transform:translate(0,0) scale(1); }
.voice-call-toast__icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; background:#edf2ff; color:#2f6ee9; }
.voice-call-toast__icon svg { width:20px; height:20px; }
.voice-call-toast strong,.voice-call-toast span:not(.voice-call-toast__icon),.voice-call-toast small { display:block; line-height:1.5; }
.voice-call-toast strong { font-size:17px; font-weight:650; letter-spacing:-.02em; }
.voice-call-toast div>span { margin-top:8px; font-size:12px; color:#657083; }

.voice-phone-scene figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; color:#526178; font-size:12px; line-height:1.6; }
.voice-phone-scene button { padding:8px; border:0; color:#215bd0; background:none; font:inherit; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.voice-phone-scene button[hidden] { display:none; }
.voice-phone-scene button:focus-visible { outline:2px solid #215bd0; outline-offset:3px; }
.voice-phone-scene[data-paused="true"] * { animation-play-state:paused; }
@keyframes voice-speech { to { transform:scaleY(.25); } }
@keyframes voice-ring { from { box-shadow:0 0 0 0 #316bdf30; } to { box-shadow:0 0 0 18px #316bdf00; } }
@media(max-width:1279px) and (min-width:921px) { .voice-call-toast { width:198px; padding:14px; top:300px; } }
@media(max-width:600px) { .voice-phone-scene { padding:12px 0; } .voice-phone { width:264px; transform:none; } .voice-call-toast { top:354px; right:0; width:192px; padding:14px; } }
@media(prefers-reduced-motion:reduce) { .voice-phone-scene * { animation:none!important; transition:none!important; } }

/* Status icons share the island's vertical centre, inside the same device plane. */
.voice-phone__top { top:10px; bottom:auto; height:23px; align-items:center; font-size:11px; line-height:1; }
.voice-phone__signals { display:flex; align-items:center; gap:4px; }
.voice-phone__signals svg { display:block; width:12px; height:11px; }
.voice-phone__signals .voice-phone__battery { width:20px; height:12px; }

/* Centre the visible composition in each call state, without changing layout height. */
.voice-phone { transform:none; }
.voice-phone-scene[data-call-phase="connected"] .voice-phone { transform:none; }
.voice-call-toast { left:calc(50% + 90px); right:auto; }
.voice-phone-scene figcaption { position:absolute; top:0; right:0; z-index:4; }
@media(min-width:921px) and (max-width:1279px) {
 .voice-phone-scene[data-call-phase="connected"] .voice-phone { transform:none; }
 .voice-call-toast { left:calc(50% + 48px); right:auto; }
}
@media(max-width:600px) {
 .voice-phone-scene { padding-top:40px; }
 .voice-phone-scene[data-call-phase="connected"] .voice-phone { transform:none; }
 .voice-call-toast { left:calc(50% - 72px); right:auto; width:192px; }
}

.voice-phone__brand { width:calc(100% - 40px); text-align:center; white-space:normal; line-height:1.5; }
.voice-phone__status>span { max-width:calc(100% - 24px); text-align:center; }
.voice-phone-scene[data-call-outcome="machine"] .voice-phone__wave { opacity:0; }
.voice-phone-scene[data-call-outcome="machine"] time { visibility:hidden; }

/* Only call content fades. Device geometry and controls stay anchored. */
.voice-phone__brand,.voice-phone__portrait,.voice-phone__name,
.voice-phone__number,.voice-phone__status { opacity:var(--call-content-opacity,1); }
.voice-phone-scene[data-call-phase="connected"] .voice-phone__wave,
.voice-phone-scene[data-call-phase="connected"] .voice-call-toast { opacity:var(--call-content-opacity,1); }
.voice-phone-scene[data-call-outcome="machine"] .voice-phone__wave { opacity:0; }

.voice-phone__brand,.voice-phone__portrait,.voice-phone__name,
.voice-phone__number,.voice-phone__status { translate:0 calc((1 - var(--call-content-opacity,1)) * 3px); }
@media(prefers-reduced-motion:reduce) {
 .voice-phone__brand,.voice-phone__portrait,.voice-phone__name,
 .voice-phone__number,.voice-phone__status { translate:none; }
}

/* Compact notification: stable rows across all three call outcomes. */
.voice-call-toast { top:220px; width:232px; min-height:92px; padding:16px; gap:12px; border-radius:12px; align-items:center; box-shadow:0 10px 28px #142d571a; }
.voice-call-toast__icon { width:30px; height:30px; border-radius:9px; background:#edf2ff; }
.voice-call-toast__icon svg { width:17px; height:17px; }
.voice-call-toast>div { min-width:0; flex:1; }
.voice-call-toast strong { font-size:14px; font-weight:600; line-height:20px; letter-spacing:0; }
.voice-call-toast div>span { margin-top:5px; font-size:11px; line-height:17px; color:#657083; }
@media(min-width:921px) and (max-width:1279px) { .voice-call-toast { top:220px; width:210px; padding:14px; gap:10px; } }
@media(max-width:600px) { .voice-call-toast { top:220px; width:208px; padding:14px; gap:10px; } }


/* Scene illustrations use real text layout; SVG is limited to icons and connection paths. */
.sms-page[data-product="voice-message"] .sms-scenario{--scene-ink:#010c3d;--scene-muted:#526b84;--scene-soft:#edf3ff;--scene-line:#48751e}
.sms-page[data-product="voice-message"] .sms-scenario--reports,.sms-page[data-product="voice-message"] .sms-scenario--routing{--scene-line:#c7e981}
.sms-page[data-product="voice-message"] .sms-scenario:nth-child(5){background:#fff}
.sms-page[data-product="voice-message"] .sms-scenario:nth-child(6){background:#eaf0f5;--card-ink:#010c3d;--card-muted:#435778;--scene-line:#48751e}
.sms-page[data-product="voice-message"] .sms-scenario-visual{display:block;margin:0;width:100%;height:238px;aspect-ratio:auto}
.sms-page[data-product="voice-message"] .sms-scenario--reports .sms-scenario-visual{display:block}
.vsc-art{height:100%;width:100%;color:var(--scene-ink);font-family:inherit;font-size:13px;line-height:1.4;position:relative}
.vsc-art *{box-sizing:border-box}.vsc-art strong{font-weight:600}.vsc-art small{display:block;font-size:11px;color:var(--scene-muted)}
.vsc-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--scene-soft);color:#2f6ee9}
.vsc-icon svg{display:block;width:18px;height:18px;flex:none}.vsc-row{display:flex;align-items:center;gap:12px;min-width:0}.vsc-row>div{min-width:0;display:grid;gap:4px}.vsc-row strong{display:block}
.vsc-status{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#e8f2cf;color:#365919;border-radius:30px;padding:7px 12px;font-size:11px;font-weight:600;white-space:nowrap}.vsc-status .vsc-icon{background:none;width:14px;height:14px;flex-basis:14px;color:inherit}.vsc-status svg{width:14px;height:14px}
.vsc-support{height:100%;display:grid;grid-template-columns:42% 46%;justify-content:space-between;align-items:center;position:relative}
.vsc-call{background:#fff;border-radius:16px;padding:20px;position:relative;z-index:1}.vsc-call-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #e0e7f3;color:#48751e;font-size:11px}.vsc-route-arrow{font-size:22px;line-height:1}
.vsc-agents{display:grid;gap:12px;position:relative;z-index:1}.vsc-agent{height:66px;display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border-radius:12px}.vsc-agent strong{font-size:11px}.vsc-agent>span:last-child{margin-left:auto;color:#61728b;font-size:10px}.vsc-agent.is-selected{background:#e8f2cf}.vsc-agent.is-selected>span:last-child{color:#365919}.vsc-agent .vsc-icon{width:30px;height:30px;flex-basis:30px}
.vsc-support-wire,.vsc-privacy-wire,.vsc-sip-wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--scene-line);stroke-width:2;z-index:0}
.vsc-otp{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:18px}.vsc-on-dark{color:#fff}.vsc-on-dark small{color:#c4d2ed}.vsc-code{background:#fff;padding:20px;border-radius:16px;display:grid;gap:14px}.vsc-code>span{font-size:13px;color:#435778}.vsc-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.vsc-digits b{display:grid;place-items:center;background:var(--scene-soft);border-radius:10px;height:54px;font-size:28px;font-weight:500;color:#2f6ee9}.vsc-code-footer{display:flex;justify-content:flex-end}
.vsc-alert{height:100%;display:flex;flex-direction:column;justify-content:center;gap:24px}.vsc-alert>.vsc-row{padding-inline:20px}.vsc-alert strong{font-size:15px}.vsc-reminder{background:#fff;padding:20px;border-radius:16px;display:flex;flex-direction:column;align-items:stretch;gap:20px}.vsc-reminder>.vsc-status{align-self:flex-end}
.vsc-privacy{height:100%;display:grid;grid-template-columns:20% 48% 20%;justify-content:space-between;align-items:start;padding-top:33px;position:relative}.vsc-party{display:flex;align-items:center;flex-direction:column;gap:10px;z-index:1;color:#fff;padding-top:30px}.vsc-party>.vsc-icon{width:48px;height:48px;flex-basis:48px}.vsc-party small{color:#e0eaff}.vsc-proxy{z-index:1;background:#fff;border-radius:16px;display:flex;align-items:center;flex-direction:column;gap:12px;padding:20px 12px;text-align:center}.vsc-proxy>span:not(.vsc-icon){font-size:12px;color:#526b84}.vsc-proxy strong{font-size:20px;white-space:nowrap}.vsc-privacy-caption{position:absolute;bottom:2px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:12px}.vsc-privacy-caption .vsc-icon{width:22px;height:22px;flex-basis:22px;background:none;color:#c7e981}.vsc-privacy-caption svg{width:16px;height:16px}
.vsc-sip{height:100%;display:grid;grid-template-columns:24% 24% 26%;justify-content:space-between;align-items:center;position:relative}.vsc-pbx,.vsc-sip-core{display:flex;flex-direction:column;align-items:center;gap:14px;z-index:1;text-align:center}.vsc-pbx>.vsc-icon{width:54px;height:54px;flex-basis:54px}.vsc-sip-core{background:#dfeaff;padding:20px 8px;border-radius:16px;gap:12px}.vsc-sip-core .vsc-icon{background:transparent}.vsc-sip-core strong,.vsc-pbx strong{font-size:12px}.vsc-carriers{display:grid;gap:18px;z-index:1}.vsc-carriers>div{height:60px;background:#edf3ff;border-radius:12px;padding:12px;display:flex;align-items:center;gap:9px}.vsc-carriers .vsc-icon{background:#fff;width:28px;height:28px;flex-basis:28px}.vsc-carriers strong{font-size:11px;white-space:nowrap}
.vsc-sales{height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px}.vsc-sales-label{display:flex;justify-content:space-between;gap:10px;color:#526b84;font-size:11px;margin-bottom:4px}.vsc-sales-label strong{font-size:11px;color:#010c3d}.vsc-sales-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;padding:12px 16px;border-radius:12px}.vsc-sales-row>span:last-child{color:#61728b;font-size:11px}.vsc-sales-row.is-selected{background:#e8f2cf}.vsc-sales-row.is-selected>.vsc-icon{background:transparent;color:#365919}.vsc-sales-result{display:flex;align-items:center;justify-content:center;gap:10px;color:#365919;font-size:12px}.vsc-sales-result .vsc-icon{background:transparent;color:inherit}
@media(min-width:761px) and (max-width:1100px){.vsc-call{padding:14px}.vsc-call .vsc-row{gap:8px}.vsc-call .vsc-row strong{font-size:11px}.vsc-agent{padding:10px;gap:7px}.vsc-agent>span:last-child{font-size:9px}.vsc-agent .vsc-icon{width:24px;height:24px;flex-basis:24px}.vsc-agent svg{width:14px;height:14px}.vsc-proxy strong{font-size:16px}.vsc-carriers>div{padding:9px;gap:6px}.vsc-carriers strong{font-size:10px}.vsc-carriers .vsc-icon{width:22px;height:22px;flex-basis:22px}.vsc-carriers svg{width:14px;height:14px}}
@media(max-width:760px){.sms-page[data-product="voice-message"] .sms-scenario-visual{height:256px}.vsc-support{grid-template-columns:1fr;align-content:start;gap:16px}.vsc-call{padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.vsc-call-bottom{border:0;margin:0;padding:0;gap:8px}.vsc-call strong{font-size:12px}.vsc-agents{gap:10px}.vsc-agent{height:48px}.vsc-support-wire{display:none}.vsc-privacy{grid-template-columns:20% 52% 20%;padding-top:26px}.vsc-party{font-size:11px;padding-top:40px}.vsc-proxy{padding:16px 8px}.vsc-proxy strong{font-size:15px}.vsc-party>.vsc-icon{width:36px;height:36px;flex-basis:36px}.vsc-party small{font-size:9px}.vsc-privacy-caption{font-size:11px}.vsc-sip{grid-template-columns:22% 26% 29%}.vsc-carriers>div{padding:8px;gap:5px}.vsc-carriers .vsc-icon{width:22px;height:22px;flex-basis:22px}.vsc-carriers svg{width:14px;height:14px}.vsc-carriers strong{font-size:9px}.vsc-sip-core strong,.vsc-pbx strong{font-size:10px}.vsc-sip-core{padding:16px 6px}.vsc-pbx>.vsc-icon{width:40px;height:40px;flex-basis:40px}.vsc-sales-label{font-size:10px}.vsc-sales-label strong{font-size:10px}}

/* Voice scenario artwork: show the call, route, or outcome at a glance. */
.vsc-wave{display:block;width:100%;height:32px;color:#527cc5}
.vsc-call .vsc-wave{margin-top:10px}
.vsc-call-bottom{margin-top:5px;padding-top:9px}
.vsc-on-dark .vsc-wave{flex:1;min-width:24px;max-width:145px;margin-inline-start:auto;color:#c7e981}
.vsc-otp{justify-content:center;gap:14px}
.vsc-code{padding:16px;gap:10px}
.vsc-alert{gap:14px}
.vsc-alert>.vsc-row{padding-inline:0;gap:18px}
.vsc-clock{display:grid!important;place-items:center;width:78px;height:78px;flex:0 0 78px;border-radius:24px;background:#dce7fc;color:#264e9e}
.vsc-clock svg{width:54px;height:54px}
.vsc-alert>.vsc-row strong{font-size:clamp(16px,2vw,26px)}
.vsc-reminder{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px}
.vsc-reminder>.vsc-status{align-self:center;margin-inline-start:auto}
.vsc-proxy{background:#0b2358;color:#fff;padding-block:14px}
.vsc-proxy>span:not(.vsc-icon){color:#d6e4ff}
.vsc-lock-halo{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:1px solid #7999d7}
.vsc-lock-halo .vsc-icon{background:#c7e981;color:#153519}
.vsc-rack{display:grid;gap:4px;width:min(72px,100%)}
.vsc-rack i{height:6px;border-radius:3px;background:#aec7f4}
.vsc-rack i::before{content:"";display:block;width:4px;height:4px;margin:1px 5px;border-radius:50%;background:#48751e}
.vsc-sales-result{justify-content:start;padding:3px 10px;border-bottom:2px solid #99b6e7}
.vsc-sales-result .vsc-wave{width:32%;margin-inline-start:auto}
@media(max-width:760px){.vsc-call .vsc-wave{display:none}.vsc-call-bottom{margin-top:0;padding-top:0}}
@media(max-width:760px){
 .vsc-support{gap:10px}
 .vsc-call{flex-wrap:wrap;padding:10px}
 .vsc-agents{gap:6px}
 .vsc-agent{height:auto;min-height:40px;padding:5px 9px}
 .vsc-carriers>div{min-width:0}
 .vsc-carriers strong{white-space:normal;overflow-wrap:anywhere}
}

/* The scene is a snapshot of the call experience rather than a route diagram. */
.vsc-scene{min-height:100%;display:grid;align-content:center;gap:12px;position:relative}
.vsc-surface,.vsc-log{background:#fff;border-radius:18px;padding:clamp(12px,2vw,22px);box-shadow:0 12px 25px #0b23581c}
.vsc-desk .vsc-surface{background:#102857;color:#fff}
.vsc-desk .vsc-surface small{color:#c5d6fb}
.vsc-surface .vsc-status{margin-inline-start:auto}
.vsc-desk .vsc-wave{height:74px;color:#c7e981;margin-block:6px}
.vsc-scene-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vsc-rec::before,.vsc-carrier-strip i{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#c7e981;margin-inline-end:6px}
.vsc-verify .vsc-wave{height:44px;color:#c7e981}
.vsc-verify .vsc-digits b{height:62px}
.vsc-date{padding:14px 20px 24px;background:#dce7fc;border-radius:18px;width:85%}
.vsc-date>span{font-size:clamp(36px,5vw,64px);line-height:1;font-weight:650}
.vsc-notification{margin:-25px 0 0 8%;z-index:1}
.vsc-incoming{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;color:#fff}
.vsc-handset{display:grid;justify-items:center;gap:9px;background:#0c2253;border:2px solid #8ba9ed;border-radius:26px;padding:16px 6px;text-align:center}
.vsc-handset small,.vsc-mask-note small{color:#e0eaff}
.vsc-handset>strong{font-size:clamp(13px,2vw,23px)}
.vsc-call-buttons{display:flex;gap:8px}
.vsc-call-buttons .vsc-answer{background:#c7e981;color:#153519}
.vsc-call-buttons .vsc-decline{background:#334e86;color:#fff}
.vsc-switch{padding:20px;background:#112853;color:#fff;border-radius:16px;box-shadow:0 8px 0 #8da7d0}
.vsc-ports{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-top:18px}
.vsc-ports i{height:24px;background:#071731;border:1px solid #5a78ac;border-radius:3px}
.vsc-ports i:nth-child(-n+3){border-bottom:3px solid #c7e981}
.vsc-carrier-strip{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px}
.vsc-carrier-strip i{background:#48751e}
.vsc-log{gap:6px;min-height:0;align-content:center;margin-block:auto}
.vsc-log-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #dce7fc}
.vsc-log-footer{justify-self:end}
@media(max-width:420px){.vsc-notification .vsc-row,.vsc-desk .vsc-row{flex-wrap:wrap;gap:6px}.vsc-surface .vsc-status{margin-inline-start:0}.vsc-scene-foot{font-size:11px}}

/* Large objects anchor the illustrations to the outside card. */
.vsc-desk .vsc-surface,.vsc-log{background:none;box-shadow:none;border-radius:0;padding:0;color:var(--card-ink)}
.vsc-desk .vsc-surface small{color:var(--card-muted)}
.vsc-desk .vsc-wave{height:104px;color:#3266bb}
.vsc-rec::before{background:#48751e}
.vsc-calendar{align-content:center;gap:0}
.vsc-date{width:100%;background:#f9fbff;padding:22px 14px 13px;border-radius:14px;position:relative;border-top:12px solid #265dc5;box-shadow:0 9px 20px #16366116}
.vsc-date::before,.vsc-date::after{content:"";position:absolute;top:-19px;width:7px;height:20px;background:#142d62;border-radius:5px}
.vsc-date::before{left:20%}.vsc-date::after{right:20%}
.vsc-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.vsc-calendar-days b{padding:5px 0;font-size:clamp(10px,1.2vw,16px);font-weight:500}
.vsc-calendar-days .is-booked{border-radius:8px;background:#c7e981;color:#173614;font-weight:700}
.vsc-calendar-event{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #dce7fc}
.vsc-calendar-event strong{font-size:18px}
.vsc-notification{padding:0;margin:10px 0 0;background:none;box-shadow:none}
.vsc-incoming{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-content:start;align-items:center;overflow:hidden}
.vsc-handset{width:min(100%,218px);min-height:255px;justify-self:center;align-content:start;gap:8px;margin-top:4px;border:4px solid #a2baf0;border-bottom:0;border-radius:29px 29px 0 0;padding:9px 7px 24px;box-shadow:inset 0 0 0 2px #051334;background:#0a1d47}
.vsc-camera{width:37px;height:7px;background:#030e24;border-radius:9px;margin-bottom:14px}
.vsc-handset>.vsc-icon{width:44px;height:44px}
.vsc-call-buttons{margin-top:10px;gap:16px}
.vsc-switch{padding-block:24px}.vsc-ports i{height:32px}
@media(max-width:420px){.vsc-date{padding-inline:9px}.vsc-handset{min-height:275px}.vsc-incoming{gap:8px}}
.vsc-incoming{height:100%;grid-template-rows:minmax(0,1fr);align-items:start}.vsc-mask-note{align-self:center}
.vsc-external{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-content:center;align-items:center;gap:clamp(10px,2vw,24px)}
.vsc-external-phone{display:grid;place-items:center;aspect-ratio:1;max-width:190px;border:1px solid #dbe6fa;border-radius:50%;background:#f1f5ff;box-shadow:inset 0 0 0 14px #fff}
.vsc-external-phone .vsc-icon{width:64%;height:auto;aspect-ratio:1;background:#102857;color:#c7e981}
.vsc-external-phone svg{width:49%;height:49%}
.vsc-external-detail{display:grid;gap:8px}
.vsc-external-detail>strong{font-size:clamp(16px,2.5vw,34px);line-height:1.12}
.vsc-external-detail>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.vsc-deskphone{display:block;width:100%;height:auto;max-height:224px}
.vsc-external{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
/* A spoken code, presented as one piece of type rather than input fields. */
.vsc-verify{justify-items:center;gap:12px;text-align:center;isolation:isolate}
.vsc-verify::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 50% 51%,transparent 0 27px,#8da9ef23 28px 29px,transparent 30px 40px);mask-image:radial-gradient(ellipse,#000 8%,transparent 72%)}
.vsc-otp-broadcast{display:flex;align-items:center;gap:8px;color:#dce7ff;font-size:12px}
.vsc-otp-broadcast .vsc-icon{width:28px;height:28px;flex-basis:28px;background:#23396c;color:#c7e981}
.vsc-otp-broadcast svg{width:14px;height:14px}
.vsc-otp-code{font-size:clamp(42px,6vw,82px);font-weight:650;line-height:1;letter-spacing:.085em;text-indent:.085em;font-variant-numeric:tabular-nums;color:#fff}
.vsc-otp-result .vsc-status{background:#c7e981}

/* Crop the monitor at the stage edge; the screen itself carries the call UI. */
.vsc-external{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:start;justify-items:center;overflow:hidden}
.vsc-softphone{width:100%;min-height:calc(100% + 24px);margin-top:14px;min-width:0;background:#112853;color:#fff;border:8px solid #091831;border-radius:20px 20px 0 0;padding:12px clamp(12px,3vw,30px);box-shadow:0 0 0 1px #a5bbdf}
.vsc-softphone-bar{display:flex;gap:5px;padding-bottom:10px;border-bottom:1px solid #47618a}
.vsc-softphone-bar i{width:6px;height:6px;background:#8da5ca;border-radius:50%}
.vsc-softphone .vsc-external-detail{margin-top:12px;gap:7px}
.vsc-softphone .vsc-external-detail strong{font-size:clamp(17px,2.1vw,27px)}
.vsc-softphone .vsc-external-detail small{color:#c6d7f7}
.vsc-softphone-controls{display:flex;gap:8px;margin-top:12px}
.vsc-softphone-controls>span,.vsc-softphone-end .vsc-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#324d79;color:#fff}
.vsc-softphone-controls svg{width:16px;height:16px}
.vsc-softphone-end .vsc-icon{background:#94404d;transform:rotate(135deg)}
.vsc-otp-code{font-size:clamp(30px,3.1vw,46px);font-weight:580;letter-spacing:.13em;text-indent:.13em}
.vsc-softphone{background:#f8faff;color:#132952;padding:0;border-width:7px}
.vsc-softphone-bar{align-items:center;padding:9px 12px;background:#e6eefb;border-color:#d3e0f5}
.vsc-softphone-bar span{margin-inline:auto;color:#34547c;font-size:11px;font-weight:650}
.vsc-softphone-workspace{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr)}
.vsc-softphone-history{padding:10px 5px;background:#edf3fc;border-inline-end:1px solid #d3e0f5}
.vsc-softphone-history>strong{display:block;margin:0 5px 6px;font-size:11px}
.vsc-history-row{display:grid;gap:1px;padding:4px 5px;border-radius:5px;font-size:10px;overflow-wrap:anywhere}
.vsc-history-row small{font-size:9px}
.vsc-history-row.is-current{background:#def0bc;color:#243e16}
.vsc-softphone-main{min-width:0;padding:12px clamp(6px,2vw,22px)}
.vsc-softphone .vsc-external-detail{margin:0}
.vsc-softphone .vsc-external-detail small{color:#48658c}
.vsc-softphone .vsc-external-detail strong{font-size:clamp(14px,1.75vw,25px)}
.vsc-softphone-main .vsc-status{padding:4px 7px;white-space:normal}

/* Match the SMS artwork texture without putting decoration behind card copy. */
.vsc-art{isolation:isolate}
.vsc-art::before,.vsc-art::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.vsc-art::before{inset:4% 0;background:radial-gradient(#3562a655 1px,transparent 1.4px) 0 0/13px 13px;mask-image:radial-gradient(ellipse,#000 26%,transparent 79%)}
.vsc-art--voice-otp::before,.vsc-art--number-masking::before{background-image:radial-gradient(#b4ceff70 1px,transparent 1.4px)}
.vsc-art--critical-alerts::after{inset:13% 8% 15%;border:1px solid #779cda65;border-radius:20px;transform:rotate(-5deg)}
.vsc-art--number-masking::after{inset:13% 12% 18% 8%;border:1px solid #c1d6ff55;border-radius:50%;transform:rotate(-10deg)}
.vsc-art--sip-trunking::after{inset:2% 5% 30%;border-top:1px solid #779cda65;border-radius:50%}

/* Voice artwork uses the existing shared card rows and gutters. */
.vsc-support-workspace{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:clamp(7px,1.4vw,22px)}
.vsc-active-call,.vsc-support-aside>div{background:#fff;border-radius:14px;box-shadow:0 9px 20px #183c7420;overflow:hidden}
.vsc-active-call>.vsc-scene-foot{background:#edf3ff;padding:10px 12px}
.vsc-active-call>.vsc-row,.vsc-call-tags{padding:10px 12px;border-bottom:1px solid #edf2fa}
.vsc-initial{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:#d1e2fc;color:#244e98;font-weight:700}
.vsc-call-tags{display:flex;gap:5px;flex-wrap:wrap;font-size:10px}
.vsc-call-tags span{background:#e9f0ff;color:#24539b;border-radius:20px;padding:3px 6px}
.vsc-call-tags span+span{background:#fff0ee;color:#a12d28}
.vsc-call-bars{display:flex;align-items:center;justify-content:center;gap:3px;height:50px;padding:4px}
.vsc-call-bars i{width:3px;height:var(--bar);background:#4875be;border-radius:2px}
.vsc-call-bars i:nth-child(3n){opacity:.5}
.vsc-support-aside{display:grid;gap:14px}
.vsc-support-aside>div{padding:9px 10px;font-size:11px}
.vsc-support-aside>div:first-child>b{color:#945017}
.vsc-support-aside>div:first-child>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px;margin-top:4px}
.vsc-otp-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1vw,12px)}
.vsc-otp-digits b{display:grid;place-items:center;width:clamp(37px,4.3vw,56px);aspect-ratio:.85;border:1px solid #c7e981;border-radius:12px;background:#142d5f;color:#fff;font-size:clamp(23px,3vw,38px)}
.vsc-otp-broadcast{color:#c7e981}
.vsc-verify::before{mask-image:none;background:repeating-radial-gradient(circle at center,transparent 0 26px,#b2d27032 27px 28px,transparent 29px 34px);mask-image:radial-gradient(circle,#000 0 64%,transparent 77%)}
.vsc-calendar .vsc-date{border:1px solid #d0dff8;padding:10px 12px;border-radius:14px}
.vsc-calendar .vsc-date::before,.vsc-calendar .vsc-date::after{content:none}
.vsc-calendar-month{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.vsc-calendar-month span{background:#c7e981;border-radius:12px;padding:1px 9px}
.vsc-calendar-event strong{background:#081d43;color:#c7e981;border-radius:14px;padding:4px 8px;font-size:13px}
.vsc-calendar .vsc-notification{background:#fff;border:1px solid #d0dff8;border-radius:12px;padding:6px 8px}
.vsc-mask-note{display:grid;justify-items:center;gap:10px;text-align:center}
.vsc-mask-note>span,.vsc-mask-note>div{border-radius:16px;background:#f4f8ff;color:#16356c;padding:5px 10px}
.vsc-mask-note>div{background:#e8f2cf}
.vsc-mask-note>div small{color:#365919}
.vsc-call-buttons>div{display:grid;justify-items:center;gap:4px}
.vsc-call-buttons .vsc-decline{transform:rotate(135deg)}
.vsc-log{background:#fff;border-radius:15px;padding:12px;box-shadow:0 8px 20px #183c741a}
.vsc-softphone-main{text-align:center}
.vsc-softphone-main .vsc-external-detail>div,.vsc-softphone-controls{justify-content:center}
@media(max-width:480px){
 .vsc-active-call>.vsc-row,.vsc-call-tags,.vsc-active-call>.vsc-scene-foot{padding:6px}
 .vsc-active-call .vsc-row{gap:5px}
 .vsc-support-aside>div{padding:6px}
 .vsc-support-aside .vsc-icon{display:none}
}

/* Match the Voice reference without changing the shared card grid. */
[data-product="voice-message"] .sms-scenario{position:relative;--voice-art-inset:28px}
[data-product="voice-message"] .sms-scenario:has(.vsc-incoming,.vsc-external) .vsc-art{position:static}
[data-product="voice-message"] .sms-scenario :is(.vsc-incoming,.vsc-external){
 position:absolute;inset:auto var(--voice-art-inset) 0;
 height:calc(238px + var(--voice-art-inset));min-height:0
}
.vsc-incoming{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch}
.vsc-handset{margin-top:0;min-height:100%;border-width:1px;border-radius:34px 34px 0 0;box-shadow:0 0 22px #10285740;padding-top:14px}
.vsc-mask-note{gap:8px}
.vsc-mask-note>div::before,.vsc-mask-note>div::after{content:"↓";position:absolute;left:50%;translate:-50% 0;color:#c0d8ff}
.vsc-mask-note>div{position:relative;margin-block:9px}
.vsc-mask-note>div::before{bottom:100%}
.vsc-mask-note>div::after{top:100%}
.vsc-softphone{margin-top:0;min-height:100%;border-width:5px;border-radius:18px 18px 0 0;overflow:hidden;box-shadow:none}
.vsc-softphone-main{padding-top:clamp(14px,2vw,30px)}
.vsc-softphone-controls{border-top:1px solid #d3e0f5;padding-top:8px}
.vsc-art--sip-trunking::after,.vsc-art--number-masking::after{content:none}
.vsc-art--sip-trunking::before,.vsc-art--number-masking::before{inset:45% var(--voice-art-inset) 0}
.vsc-support-workspace{margin-inline:clamp(6px,1vw,16px)}
.vsc-log{margin-block:auto 6px}
@media(max-width:1100px){[data-product="voice-message"] .sms-scenario{--voice-art-inset:24px}}
@media(max-width:760px){
 [data-product="voice-message"] .sms-scenario :is(.vsc-incoming,.vsc-external){height:calc(256px + var(--voice-art-inset))}
}
.vsc-log{translate:0 14px}
@media (761px <= width <= 1100px){
 [data-product="voice-message"] .sms-scenario :is(.vsc-incoming,.vsc-external){height:calc(230px + var(--voice-art-inset))}
}

/* Original monitor artwork; live text sits over its left and right regions. */
.vsc-external .vsc-softphone{
 height:100%;width:100%;min-height:0;border:0;border-radius:0;
 background:url("../../assets/voice-contact-centre.svg?v=2") center / 100% 100% no-repeat;
}
.vsc-external .vsc-softphone-bar{height:16%;padding:0;background:none;border:0}
.vsc-external .vsc-softphone-workspace{grid-template-columns:35.5% minmax(0,1fr);height:84%;padding-inline:1%}
.vsc-external .vsc-softphone-history{background:none;border:0}
.vsc-external .vsc-softphone-main{padding-top:clamp(8px,2.5vw,32px)}
.vsc-external .vsc-external-detail{gap:5px}

.vsc-external .vsc-softphone{
 border-radius:0;
 overflow:hidden;
}
.vsc-incoming{
 grid-template-columns:minmax(0,218px) minmax(0,144px);
 justify-content:center;
 column-gap:clamp(12px,3vw,40px);
}
.vsc-mask-note>div{max-width:100%;overflow-wrap:anywhere}

/* Background washes from the Voice reference; no changes to card geometry. */
[data-product="voice-message"] .sms-scenario--sending{background:#dfe9ff}
[data-product="voice-message"] .sms-scenario--reports{background-image:linear-gradient(90deg,#0b1a4a,#0a2a6a 55%,#010c3d)}
[data-product="voice-message"] .sms-scenario--queue{
 background-color:#edf1f7;
 background-image:radial-gradient(ellipse 35% 36% at 69% 66%,#c6ea7d66,transparent);
}
[data-product="voice-message"].sms-page .sms-scenario:nth-child(6){
 background-color:#eaf1f6;
 background-image:radial-gradient(ellipse 37% 43% at 71% 75%,#5281c945,transparent);
}/* Each voice capability has one focused demonstration on a distinct white surface. */
.sms-page[data-product="voice-message"] .sms-values__demo-surface { background:#fff; padding:24px; border:1px solid #d9e2ed; }
.voice-mini { display:grid; align-content:center; gap:20px; min-height:184px; color:#15233b; }
.voice-mini__head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; color:#526178; font-size:12px; line-height:1.5; }
.voice-mini__head>span:first-child { color:#15233b; font-weight:600; }
.voice-mini__call { display:flex; align-items:center; gap:16px; padding:16px 0 0; }
.voice-mini__call>div { flex:1; min-width:0; }
.voice-mini__call strong,.voice-mini__call>div>span { display:block; font-size:15px; line-height:1.5; }
.voice-mini__call>div>span { margin-top:4px; color:#526178; font-size:13px; }
.voice-mini__phone { position:relative; display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; background:#e6f4ee; color:#25745b; }
.voice-mini__phone svg { width:22px; height:22px; }
.voice-mini__phone>i { position:absolute; inset:0; border:1px solid currentColor; border-radius:inherit; opacity:0; }
.voice-mini__wave { display:flex; align-items:center; justify-content:center; gap:4px; height:44px; color:#25745b; }
.voice-mini__wave i { width:3px; border-radius:2px; background:currentColor; transform-origin:center; }
.voice-mini__status { display:flex; align-items:center; justify-content:center; gap:8px; color:#25745b; font-size:12px; line-height:1.5; }
.voice-mini__status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.voice-mini__foot { margin:0; color:#526178; text-align:center; font-size:12px; line-height:1.6; }
.voice-mini__connection { display:flex; align-items:center; gap:12px; padding:20px 0; text-align:center; font-size:13px; line-height:1.5; }
.voice-mini__connection>span { flex:1; min-width:0; overflow-wrap:anywhere; }
.voice-mini__connection>strong { font-size:18px; font-weight:500; color:#3157a2; }
.voice-mini__wire { display:block; flex:0 0 32px; height:2px; background:#d5dfea; overflow:hidden; }
.voice-mini__wire b { display:block; width:10px; height:2px; background:#3157a2; }
.voice-mini--masking .voice-mini__connection>strong { color:#7655a0; }
.voice-mini--masking .voice-mini__wire b { background:#7655a0; }
.voice-mini__otp { display:grid; justify-items:center; gap:12px; }
.voice-mini__digits { display:flex; justify-content:center; gap:12px; }
.voice-mini__digits b { color:#172e51; font-size:36px; font-weight:500; line-height:1.3; font-variant-numeric:tabular-nums; }
.voice-mini__message { margin:0; padding:8px 0; color:#172e51; font-size:22px; line-height:1.5; letter-spacing:-.02em; }
.voice-mini__playback { display:flex; align-items:center; gap:16px; color:#526178; font-size:12px; }
.voice-mini__menu { display:grid; gap:16px; padding:4px 0; }
.voice-mini__menu>span { display:flex; align-items:center; gap:12px; font-size:15px; color:#526178; }
.voice-mini__menu i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.voice-mini__click { display:grid; justify-items:center; gap:28px; padding:12px 0; }
.voice-mini__dial { position:relative; display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 28px; border-radius:24px; background:#1c5bdd; color:#fff; font-size:15px; }
.voice-mini__dial i { position:absolute; inset:0; border-radius:inherit; border:1px solid #1c5bdd; opacity:0; }
.voice-mini__browser { border:1px solid #d9e2ed; border-radius:8px; overflow:hidden; }
.voice-mini__browser-bar { display:flex; align-items:center; gap:5px; padding:12px; border-bottom:1px solid #e7ecf2; color:#526178; font-size:12px; }
.voice-mini__browser-bar i { width:5px; height:5px; background:#b5c2d2; border-radius:50%; }
.voice-mini__browser-bar span { margin-left:8px; }
.voice-mini__browser-audio { display:grid; place-items:center; height:90px; }
.voice-mini__browser-audio .voice-mini__wave { gap:8px; color:#7655a0; }
@media(max-width:600px) {
 .sms-page[data-product="voice-message"] .sms-values__demo-surface { padding:20px; }
 .voice-mini__call { gap:12px; }
 .voice-mini__call .voice-mini__wave i:nth-child(n+8) { display:none; }
 .voice-mini__connection { gap:6px; }
 .voice-mini__wire { flex-basis:12px; }
 .voice-mini__connection>strong { font-size:15px; }
 .voice-mini__digits { gap:10px; }
 .voice-mini__digits b { font-size:30px; }
 .voice-mini__message { font-size:20px; }
}
/* Two-item layout preview: content sits directly on the page. */
.sms-page[data-product="voice-message"] .sms-values__item:is([data-capability="product-voice-api"],[data-capability="product-ivr"])[open] { background:transparent; }
.sms-page[data-product="voice-message"] .sms-values__item:is([data-capability="product-voice-api"],[data-capability="product-ivr"]) .sms-values__demo-surface { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.sms-page[data-product="voice-message"] .sms-values__item:is([data-capability="product-voice-api"],[data-capability="product-ivr"]) .voice-mini { min-height:184px; align-content:start; gap:24px; padding-block:4px 16px; }
.voice-mini--voice-api .voice-mini__call { padding-top:0; }
.voice-mini--voice-api .voice-mini__status { justify-content:flex-start; margin-left:56px; }
.voice-mini--ivr .voice-mini__menu { gap:20px; padding:0; }
@media(max-width:600px) {
 .voice-mini--voice-api .voice-mini__status { margin-left:52px; }
}
.voice-api-workspace .sms-api-workspace__content { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.voice-api-workspace .sms-api-response { justify-content:center; gap:12px; padding:28px 32px; }
.voice-api-workspace__heading { margin:0; color:#010c3d; font-size:22px; font-weight:600; line-height:1.4; }
.voice-api-workspace__points { display:grid; margin:0; padding:0; list-style:none; }
.voice-api-workspace__points li { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start; gap:14px; padding:18px 0; }
.voice-api-workspace__points li+li { border-top:1px solid #d0dce9; }
.voice-api-workspace__points h4 { margin:0 0 5px; color:#132342; font-size:16px; font-weight:600; line-height:24px; }
.voice-api-workspace__points p { margin:0; color:#526178; font-size:14px; line-height:22px; }
.voice-api-workspace .voice-code-string { color:#9cdbbf; }
.voice-api-workspace .voice-code-comment { color:#94a3b8; }
.voice-api-workspace .sms-api-editor__lines:focus-visible { outline:2px solid #7da7ff; outline-offset:-4px; }
@media(max-width:1100px) {
  .voice-api-workspace .sms-api-workspace__content { grid-template-columns:minmax(0,1fr); }
  .voice-api-workspace .sms-api-response { padding:28px; }
  .voice-api-workspace__points { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; }
  .voice-api-workspace__points li+li { border-top:0; }
  .voice-api-workspace__points li:nth-child(n+3) { border-top:1px solid #d0dce9; }
}
@media(max-width:620px) {
  .voice-api-workspace .sms-api-response { padding:24px 20px; gap:20px; }
  .voice-api-workspace__heading { font-size:20px; }
  .voice-api-workspace__points { grid-template-columns:minmax(0,1fr); gap:0; }
  .voice-api-workspace__points li+li { border-top:1px solid #d0dce9; }
  .voice-api-workspace .sms-api-workspace__toolbar { height:auto; min-height:64px; flex-wrap:wrap; gap:12px; padding:16px; }
}