/* Approved homepage capability section. Styles, SVG IDs and motion names are scoped. */ #ai-voice-agents.home-voice-capabilities { font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-synthesis: none; letter-spacing: 0px; background: rgb(243, 248, 252); --ink: #183347; --muted: #526778; --line: #d4e2ec; --blue: #1763ac; color: rgb(24, 51, 71) !important; } #ai-voice-agents.home-voice-capabilities * { box-sizing: border-box; } #ai-voice-agents.home-voice-capabilities { margin: 0px; min-width: 280px; } #ai-voice-agents.home-voice-capabilities h2, #ai-voice-agents.home-voice-capabilities h3, #ai-voice-agents.home-voice-capabilities p, #ai-voice-agents.home-voice-capabilities figure { margin: 0px; } #ai-voice-agents.home-voice-capabilities h2, #ai-voice-agents.home-voice-capabilities h3 { text-wrap: balance; } #ai-voice-agents.home-voice-capabilities a { color: inherit !important; } #ai-voice-agents.home-voice-capabilities a:focus-visible { outline: rgb(18, 95, 168) solid 3px; outline-offset: 5px; } #ai-voice-agents.home-voice-capabilities svg { display: block; } #ai-voice-agents.home-voice-capabilities svg text { font-family: inherit; letter-spacing: 0px; } #ai-voice-agents.home-voice-capabilities ul { padding: 0px; margin: 0px; list-style: none; } #ai-voice-agents.home-voice-capabilities .vc-symbols { position: absolute; width: 0px; height: 0px; overflow: hidden; } #ai-voice-agents.home-voice-capabilities .vc-icon { width: 21px; height: 21px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } /* The content wrapper uses the homepage's shared .container sizing and gutters. */ #ai-voice-agents.home-voice-capabilities { padding: 30px 0px 36px; } #ai-voice-agents.home-voice-capabilities .vc-eyebrow { font-size: 11px !important; line-height: 1.5 !important; font-weight: 750; text-transform: uppercase; margin-bottom: 10px; color: rgb(23, 99, 172) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap-grid { display: grid; grid-template-columns: minmax(0px, 1fr); grid-auto-rows: 1fr; gap: 18px; } #ai-voice-agents.home-voice-capabilities .vc-cap { --accent: #1663a5; --tint: #eaf4fd; --pale: #c9e5fa; display: flex; flex-direction: column; min-width: 0px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: rgba(21, 59, 88, 0.02) 0px 3px 10px; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(2) { --accent: #167963; --tint: #edf8f1; --pale: #c3e8d1; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) { --accent: #81dfdc; --tint: #173c49; --pale: #337281; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(4) { --accent: #9c6519; --tint: #fcf5e9; --pale: #f0d6a6; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(5) { --accent: #ad4964; --tint: #fdf0f3; --pale: #efc5d1; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(6) { --accent: #4a64af; --tint: #f0f3fc; --pale: #d1daf5; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(7) { --accent: #21699c; --tint: #edf7fa; --pale: #c7e4ee; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(8) { --accent: #16786d; --tint: #edf8f6; --pale: #bfe6db; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(9) { --accent: #536aa2; --tint: #f2f5fc; --pale: #d6e0f4; } #ai-voice-agents.home-voice-capabilities .vc-cap[data-story="10"] { --accent: #167963; --tint: #edf8f1; --pale: #c3e8d1; } #ai-voice-agents.home-voice-capabilities .vc-cap[data-story="11"] { --accent: #a36518; --tint: #fcf5e9; --pale: #f0d6a6; } #ai-voice-agents.home-voice-capabilities .vc-cap[data-story="12"] { --accent: #ad4964; --tint: #fdf0f3; --pale: #efc5d1; } #ai-voice-agents.home-voice-capabilities .vc-minute-hand { transform-origin: 76px 95px; animation: bsb-vc-callback-clock 16s linear infinite; } #ai-voice-agents.home-voice-capabilities .vc-hour-hand { transform-origin: 76px 95px; animation: bsb-vc-callback-clock 192s linear infinite; } @keyframes bsb-vc-callback-clock { to { transform: rotate(360deg); } } #ai-voice-agents.home-voice-capabilities .vc-illustration { height: 232px; position: relative; flex: 0 0 auto; background: var(--tint); border-bottom: 1px solid var(--line); padding: 15px 3px 0px; overflow: hidden; } #ai-voice-agents.home-voice-capabilities .vc-illustration > svg { width: 100%; height: 100%; max-width: 390px; margin: auto; overflow: visible; } #ai-voice-agents.home-voice-capabilities .vc-example { position: absolute; right: 13px; top: 10px; font-size: 9px !important; line-height: 1.4 !important; font-weight: 600; color: rgb(82, 103, 120) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) .vc-example { color: rgb(193, 218, 227) !important; } #ai-voice-agents.home-voice-capabilities .vc-art { fill: none; stroke-linecap: round; stroke-linejoin: round; } #ai-voice-agents.home-voice-capabilities .vc-art text { fill: rgb(24, 51, 71); stroke: none; font-size: 12px !important; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-label { font-size: 10px !important; fill: rgb(86, 110, 123); } #ai-voice-agents.home-voice-capabilities .vc-art .vc-small { font-size: 11px !important; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-medium { font-size: 14px !important; font-weight: 650; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-large { font-size: 18px !important; font-weight: 700; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-white-text { fill: rgb(255, 255, 255); } #ai-voice-agents.home-voice-capabilities .vc-art .vc-accent-text { fill: var(--accent); } #ai-voice-agents.home-voice-capabilities .vc-art .vc-paper { fill: rgb(255, 255, 255); stroke: var(--pale); stroke-width: 1.2; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-soft { fill: var(--pale); } #ai-voice-agents.home-voice-capabilities .vc-art .vc-accent { fill: var(--accent); } #ai-voice-agents.home-voice-capabilities .vc-art .vc-outline { stroke: var(--accent); stroke-width: 1.6; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-route { stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 4, 6; animation: 2.6s linear 0s infinite normal none running bsb-vc-route; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-rule { stroke: var(--pale); stroke-width: 1; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-use-icon { fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--accent) !important; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-white-icon { color: rgb(255, 255, 255) !important; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-ink-icon { color: rgb(24, 51, 71) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 20px 19px 21px; flex: 1 1 0%; display: flex; flex-direction: column; } #ai-voice-agents.home-voice-capabilities .vc-category { display: flex; align-items: center; gap: 8px; font-size: 10px !important; line-height: 1.5 !important; font-weight: 750; text-transform: uppercase; margin-bottom: 9px; color: var(--accent) !important; } #ai-voice-agents.home-voice-capabilities .vc-category .vc-icon { width: 15px; height: 15px; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) .vc-category { color: rgb(23, 109, 120) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap h3 { font-size: 22px !important; line-height: 1.25 !important; font-weight: 750; } #ai-voice-agents.home-voice-capabilities .vc-description { font-size: 14px !important; line-height: 1.65 !important; margin-top: 12px; margin-bottom: 18px; color: var(--muted) !important; } #ai-voice-agents.home-voice-capabilities .vc-details { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid rgb(229, 237, 242); margin-top: auto; } #ai-voice-agents.home-voice-capabilities .vc-details li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px !important; line-height: 1.55 !important; color: rgb(58, 82, 99) !important; } #ai-voice-agents.home-voice-capabilities .vc-details .vc-icon { width: 15px; height: 15px; margin-top: 2px; color: var(--accent) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) .vc-details .vc-icon { color: rgb(23, 109, 120) !important; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation { margin-top: 30px; padding-top: 28px; border-top: 1px solid rgb(196, 217, 232); display: grid; gap: 20px; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation h3 { font-size: 25px !important; line-height: 1.25 !important; font-weight: 750; max-width: 580px; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation p { font-size: 14px !important; line-height: 1.7 !important; max-width: 650px; margin-top: 11px; color: var(--muted) !important; } #ai-voice-agents.home-voice-capabilities .vc-demo-action { align-self: center; } #ai-voice-agents.home-voice-capabilities .vc-demo-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 16px; background: linear-gradient(105deg, rgb(121, 205, 233), rgb(119, 167, 245)); border: 1px solid rgb(113, 182, 223); border-radius: 7px; text-decoration: none; font-size: 15px !important; line-height: 1.35 !important; font-weight: 750; color: rgb(12, 41, 64) !important; } #ai-voice-agents.home-voice-capabilities .vc-demo-button .vc-robot { width: 29px; height: 29px; animation: 4.8s ease-in-out 0s infinite normal none running bsb-vc-robot; } #ai-voice-agents.home-voice-capabilities .vc-demo-button .vc-arrow { width: 19px; height: 19px; margin-left: auto; } #ai-voice-agents.home-voice-capabilities .vc-demo-button span { max-width: 225px; } #ai-voice-agents.home-voice-capabilities .vc-demo-action .vc-demo-note { font-size: 11px !important; text-align: center; margin: 9px 0px 0px; color: rgb(82, 103, 120) !important; } #ai-voice-agents.home-voice-capabilities .vc-ring { animation: 4.8s ease-in-out 0s infinite normal none running bsb-vc-ring; transform-box: fill-box; transform-origin: center center; } #ai-voice-agents.home-voice-capabilities .vc-wave rect { animation: 1.1s ease-in-out 0s infinite alternate none running bsb-vc-wave; transform-box: fill-box; transform-origin: center center; } #ai-voice-agents.home-voice-capabilities .vc-wave rect:nth-child(2n) { animation-delay: -0.4s; } #ai-voice-agents.home-voice-capabilities .vc-wave rect:nth-child(3n) { animation-delay: -0.7s; } #ai-voice-agents.home-voice-capabilities .vc-wave rect:nth-child(4n) { animation-delay: -0.2s; } #ai-voice-agents.home-voice-capabilities .vc-packet { animation: 3.8s ease-in-out 0s infinite normal none running bsb-vc-packet; } #ai-voice-agents.home-voice-capabilities .vc-scan { animation: 5s ease-in-out 0s infinite normal none running bsb-vc-scan; } #ai-voice-agents.home-voice-capabilities .vc-clock-hand { animation: 18s linear 0s infinite normal none running bsb-vc-clock; transform-box: fill-box; transform-origin: 0px 100%; } #ai-voice-agents.home-voice-capabilities .vc-glow { animation: 4.2s ease-in-out 0s infinite normal none running bsb-vc-glow; } #ai-voice-agents.home-voice-capabilities .vc-orbit { animation: 10s linear 0s infinite normal none running bsb-vc-meridian; transform-box: fill-box; transform-origin: center center; } #ai-voice-agents.home-voice-capabilities .vc-orbit.vc-second { animation-delay: -5s; } #ai-voice-agents.home-voice-capabilities .vc-greeting { animation: 6s ease-in-out 0s infinite normal none running bsb-vc-greeting; } #ai-voice-agents.home-voice-capabilities .vc-greeting.vc-second { animation-delay: -2s; } #ai-voice-agents.home-voice-capabilities .vc-greeting.vc-third { animation-delay: -4s; } #ai-voice-agents.home-voice-capabilities .vc-letter { animation: 6s ease-in-out 0s infinite normal none running bsb-vc-letter; } #ai-voice-agents.home-voice-capabilities .vc-setting { animation: 6s ease-in-out 0s infinite normal none running bsb-vc-setting; transform-box: fill-box; transform-origin: center center; } #ai-voice-agents.home-voice-capabilities .vc-activity-line { animation: 5s ease-in-out 0s infinite normal none running bsb-vc-activity; transform-box: fill-box; transform-origin: left center; } #ai-voice-agents.home-voice-capabilities .vc-activity-line.vc-second { animation-delay: -1.6s; } #ai-voice-agents.home-voice-capabilities .vc-activity-line.vc-third { animation-delay: -3.2s; } @keyframes bsb-vc-route { 100% { stroke-dashoffset: -40; } } @keyframes bsb-vc-ring { 0%, 38%, 100% { transform: rotate(0deg); } 8%, 22% { transform: rotate(-8deg); } 15%, 29% { transform: rotate(8deg); } } @keyframes bsb-vc-wave { 0% { transform: scaleY(0.45); } 100% { transform: scaleY(1); } } @keyframes bsb-vc-packet { 0% { transform: translateX(0px); opacity: 0.15; } 20%, 70% { opacity: 1; } 100% { transform: translateX(37px); opacity: 0.15; } } @keyframes bsb-vc-scan { 0%, 100% { transform: translateY(0px); opacity: 0.4; } 50% { transform: translateY(64px); opacity: 0.85; } } @keyframes bsb-vc-clock { 100% { transform: rotate(360deg); } } @keyframes bsb-vc-glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes bsb-vc-meridian { 0%, 100% { transform: scaleX(0.12); } 50% { transform: scaleX(1); } } @keyframes bsb-vc-greeting { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes bsb-vc-letter { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } @keyframes bsb-vc-setting { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @keyframes bsb-vc-activity { 0%, 100% { transform: scaleX(0.8); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } } @keyframes bsb-vc-robot { 0%, 42%, 100% { transform: translateY(0px) rotate(0deg); } 14% { transform: translateY(-3px) rotate(-6deg); } 28% { transform: translateY(0px) rotate(4deg); } } @media (hover: hover) { #ai-voice-agents.home-voice-capabilities .vc-demo-button:hover { filter: brightness(1.04); box-shadow: rgba(22, 84, 146, 0.125) 0px 4px 16px; } } @media (min-width: 400px) { #ai-voice-agents.home-voice-capabilities .vc-illustration { height: 244px; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 22px; } #ai-voice-agents.home-voice-capabilities .vc-demo-button { font-size: 16px !important; } } @media (min-width: 700px) { #ai-voice-agents.home-voice-capabilities { padding: 40px 0px; } #ai-voice-agents.home-voice-capabilities .vc-cap-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 21px 20px; } #ai-voice-agents.home-voice-capabilities .vc-cap h3 { font-size: 22px !important; min-height: 55px; } #ai-voice-agents.home-voice-capabilities .vc-illustration { height: 230px; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation { margin-top: 34px; padding-top: 30px; } #ai-voice-agents.home-voice-capabilities .vc-demo-button { max-width: 370px; } #ai-voice-agents.home-voice-capabilities .vc-demo-action { justify-self: start; } #ai-voice-agents.home-voice-capabilities .vc-demo-note { max-width: 370px; } } @media (min-width: 1100px) { #ai-voice-agents.home-voice-capabilities .vc-cap-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 23px 22px; } #ai-voice-agents.home-voice-capabilities .vc-illustration { height: 236px; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation { grid-template-columns: minmax(0px, 1fr) 370px; gap: 50px; align-items: center; } #ai-voice-agents.home-voice-capabilities .vc-demo-action { justify-self: stretch; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation h3 { font-size: 28px !important; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation p { font-size: 15px !important; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation .vc-demo-note { font-size: 11px !important; } #ai-voice-agents.home-voice-capabilities .vc-eyebrow { font-size: 12px !important; } } @media (prefers-reduced-motion: reduce) { #ai-voice-agents.home-voice-capabilities *, #ai-voice-agents.home-voice-capabilities ::before, #ai-voice-agents.home-voice-capabilities ::after { animation-name: none; animation-duration: auto !important; animation-timing-function: ease !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important; animation-timeline: auto !important; animation-range: normal !important; transition: none !important; scroll-behavior: auto !important; } } @media print { #ai-voice-agents.home-voice-capabilities .vc-cap { break-inside: avoid; } #ai-voice-agents.home-voice-capabilities * { animation-name: none; animation-duration: auto !important; animation-timing-function: ease !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important; animation-timeline: auto !important; animation-range: normal !important; } #ai-voice-agents.home-voice-capabilities .vc-cap-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation { break-inside: avoid; } } #ai-voice-agents.home-voice-capabilities .vc-scenario { padding: 12px 0px 12px 11px; border-left: 2px solid var(--pale); margin: 0px 0px 18px; } #ai-voice-agents.home-voice-capabilities .vc-scenario-label { font-size: 10px !important; line-height: 1.5 !important; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; color: rgb(82, 103, 120) !important; } #ai-voice-agents.home-voice-capabilities .vc-scenario blockquote { font-size: 13px !important; line-height: 1.6 !important; margin: 0px; text-wrap: pretty; color: rgb(24, 51, 71) !important; } #ai-voice-agents.home-voice-capabilities .vc-description { margin-bottom: 16px; } #ai-voice-agents.home-voice-capabilities .vc-cap-grid .vc-details { margin-top: auto; } @media (min-width: 1100px) { #ai-voice-agents.home-voice-capabilities .vc-scenario blockquote { font-size: 13px !important; } } #ai-voice-agents.home-voice-capabilities { padding-top: 30px; background: rgb(243, 248, 252); } #ai-voice-agents.home-voice-capabilities .vc-cap { box-shadow: rgba(33, 77, 104, 0.035) 0px 6px 20px; position: relative; } #ai-voice-agents.home-voice-capabilities .vc-illustration { height: auto; padding: 0px; isolation: isolate; overflow: hidden; } #ai-voice-agents.home-voice-capabilities .vc-example { top: 10px; right: 12px; z-index: 2; font-size: 10px !important; line-height: 1.4 !important; } #ai-voice-agents.home-voice-capabilities .vc-scene-viewport { position: relative; width: 100%; min-width: 0px; aspect-ratio: 360 / 236; min-height: 205px; contain: layout paint; } #ai-voice-agents.home-voice-capabilities .vc-scene-viewport > .vc-art { position: absolute; inset: 14px 7px 4px; width: calc(100% - 14px); height: calc(100% - 18px); max-width: none; margin: 0px; overflow: visible; } #ai-voice-agents.home-voice-capabilities .vc-scene-world { animation: 14s ease-in-out 0s infinite normal none running bsb-vc-scene-breathe; transform-origin: 180px 108px; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-paper { fill: var(--material,#fff); } #ai-voice-agents.home-voice-capabilities .vc-art .vc-light-edge { stroke: rgb(255, 255, 255); stroke-width: 1.1; opacity: 0.7; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-scene-detail { stroke: var(--accent); stroke-width: 1.4; fill: none; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-scene-signal { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 9, 80; stroke-linecap: round; animation: 5.5s linear 0s infinite normal none running bsb-vc-signal-flow; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-check-stroke { stroke-dasharray: 24; animation: 7s ease-in-out 0s infinite normal none running bsb-vc-check-arrival; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-wave rect { animation-duration: 0.8s; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-letter { animation: 8s ease-in-out 0s infinite normal none running bsb-vc-letter-lift; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-greeting { animation-duration: 5s; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-scan { animation-duration: 5.5s; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-orbit { animation-duration: 8s; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-route { stroke-width: 2; animation-duration: 2.3s; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-signal-ring { transform-box: fill-box; transform-origin: center center; animation: 5s ease-out 0s infinite normal none running bsb-vc-signal-ring; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-signal-ring.vc-second { animation-delay: -2.5s; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-call-signal { animation: 6s ease-in-out 0s infinite normal none running bsb-vc-call-signal; transform-box: fill-box; transform-origin: center center; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-window-light { animation: 9s ease-in-out 0s infinite normal none running bsb-vc-window-light; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-page-corner { animation: 8s ease-in-out 0s infinite normal none running bsb-vc-page-corner; transform-origin: 186px 174px; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-request-line { stroke-dasharray: 110; animation: 7s ease-in-out 0s infinite normal none running bsb-vc-request-line; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-voice-trace { stroke-dasharray: 90, 420; animation: 7s linear 0s infinite normal none running bsb-vc-voice-trace; } #ai-voice-agents.home-voice-capabilities .vc-art .vc-review-signal { animation: 6s ease-in-out 0s infinite normal none running bsb-vc-review-signal; transform-box: fill-box; transform-origin: center center; } #ai-voice-agents.home-voice-capabilities .vc-scene-story { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); align-items: start; gap: 0px; min-height: 84px; padding: 11px 5px 10px; background: rgba(255, 255, 255, 0.61); border-top: 1px solid rgba(255, 255, 255, 0.7); } #ai-voice-agents.home-voice-capabilities .vc-scene-track { position: absolute; left: 0px; top: 9px; width: 100%; height: 34px; z-index: 0; overflow: visible; pointer-events: none; } #ai-voice-agents.home-voice-capabilities .vc-scene-track .vc-rail { stroke: var(--pale); stroke-width: 1.5; fill: none; } #ai-voice-agents.home-voice-capabilities .vc-scene-track .vc-runner { fill: var(--accent); animation: 8s linear 0s infinite normal none running bsb-vc-journey-runner; } #ai-voice-agents.home-voice-capabilities .vc-scene-step { position: relative; z-index: 1; min-width: 0px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding-inline: 3px; } #ai-voice-agents.home-voice-capabilities .vc-scene-node { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--pale); border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(22, 61, 80, 0.03) 0px 2px 4px; animation: 8s ease-in-out 0s infinite normal none running bsb-vc-node-focus; color: var(--accent) !important; } #ai-voice-agents.home-voice-capabilities .vc-scene-node .vc-icon { width: 16px; height: 16px; } #ai-voice-agents.home-voice-capabilities .vc-scene-step:nth-of-type(2) .vc-scene-node { animation-delay: -5.33s; } #ai-voice-agents.home-voice-capabilities .vc-scene-step:nth-of-type(3) .vc-scene-node { animation-delay: -2.66s; } #ai-voice-agents.home-voice-capabilities .vc-scene-label { font-size: 10px !important; line-height: 1.4 !important; font-weight: 650; max-width: 110px; color: rgb(66, 95, 113) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) .vc-scene-story { background: rgb(20, 53, 64); border-color: rgb(72, 116, 130); } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) .vc-scene-node { background: rgb(34, 82, 94); border-color: rgb(66, 125, 139); color: rgb(157, 229, 228) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) .vc-scene-label { color: rgb(220, 240, 242) !important; } #ai-voice-agents.home-voice-capabilities .vc-cap:nth-child(3) .vc-scene-track .vc-rail { stroke: rgb(61, 120, 132); } #ai-voice-agents.home-voice-capabilities .vc-scene-story { height: 100px; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 22px 20px; } #ai-voice-agents.home-voice-capabilities .vc-description { font-size: 14px !important; line-height: 1.7 !important; } #ai-voice-agents.home-voice-capabilities .vc-scenario { padding-top: 10px; padding-bottom: 10px; margin-bottom: 18px; } #ai-voice-agents.home-voice-capabilities .vc-scenario blockquote { font-size: 13px !important; line-height: 1.65 !important; } #ai-voice-agents.home-voice-capabilities .vc-details li { line-height: 1.6 !important; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation { position: relative; padding-top: 30px; } #ai-voice-agents.home-voice-capabilities .vc-demo-button { position: relative; overflow: hidden; min-height: 68px; box-shadow: rgba(40, 116, 173, 0.08) 0px 5px 15px; } #ai-voice-agents.home-voice-capabilities .vc-demo-button .vc-robot { animation: 4.8s ease-in-out 0s infinite normal none running bsb-vc-robot; } #ai-voice-agents.home-voice-capabilities .vc-demo-button::before { content: ""; position: absolute; inset: 0px; transform: translateX(-130%); background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.133) 48%, transparent 70%); animation: 9s ease-in-out 0s infinite normal none running bsb-vc-button-light; pointer-events: none; } @keyframes bsb-vc-scene-breathe { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-2px); } } @keyframes bsb-vc-signal-flow { 100% { stroke-dashoffset: -178; } } @keyframes bsb-vc-check-arrival { 0%, 12%, 100% { stroke-dashoffset: 0; opacity: 0.6; } 38% { stroke-dashoffset: 24; opacity: 0.3; } 62%, 86% { stroke-dashoffset: 0; opacity: 1; } } @keyframes bsb-vc-letter-lift { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-11px); } } @keyframes bsb-vc-signal-ring { 0% { transform: scale(0.87); opacity: 0.2; } 40% { opacity: 0.7; } 100% { transform: scale(1.17); opacity: 0.05; } } @keyframes bsb-vc-call-signal { 0%, 100% { opacity: 0.4; } 42% { opacity: 1; } } @keyframes bsb-vc-window-light { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.55; } } @keyframes bsb-vc-page-corner { 0%, 100% { transform: translate(0px, 0px); } 50% { transform: translate(-2px, -3px); } } @keyframes bsb-vc-request-line { 0%, 100% { stroke-dashoffset: 0; opacity: 0.45; } 50% { stroke-dashoffset: 70; opacity: 1; } } @keyframes bsb-vc-voice-trace { 100% { stroke-dashoffset: -510; } } @keyframes bsb-vc-review-signal { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.12); opacity: 1; } } @keyframes bsb-vc-journey-runner { 0% { transform: translateX(0px); opacity: 0; } 8%, 90% { opacity: 1; } 100% { transform: translateX(190px); opacity: 0; } } @keyframes bsb-vc-node-focus { 0%, 100% { box-shadow: transparent 0px 0px 0px 0px; } 16%, 29% { box-shadow: 0 0 0 3px var(--pale); } 44%, 85% { box-shadow: transparent 0px 0px 0px 0px; } } @keyframes bsb-vc-button-light { 0%, 60% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } } @media (min-width: 400px) { #ai-voice-agents.home-voice-capabilities .vc-scene-label { font-size: 11px !important; } #ai-voice-agents.home-voice-capabilities .vc-scene-story { min-height: 88px; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 24px; } } @media (min-width: 700px) { #ai-voice-agents.home-voice-capabilities .vc-scene-viewport { min-height: 205px; } #ai-voice-agents.home-voice-capabilities .vc-scene-label { font-size: 10px !important; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 22px 20px; } #ai-voice-agents.home-voice-capabilities .vc-scene-story { min-height: 86px; } } @media (min-width: 1100px) { #ai-voice-agents.home-voice-capabilities .vc-cap-grid { gap: 22px; } #ai-voice-agents.home-voice-capabilities .vc-description { font-size: 14px !important; } #ai-voice-agents.home-voice-capabilities .vc-scene-label { font-size: 11px !important; } #ai-voice-agents.home-voice-capabilities .vc-scenario blockquote { font-size: 13px !important; } #ai-voice-agents.home-voice-capabilities .vc-scene-story { min-height: 87px; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 24px 22px; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation { grid-template-columns: minmax(0px, 1fr) 370px; } } @media (min-width: 1600px) { #ai-voice-agents.home-voice-capabilities .vc-cap-grid { gap: 28px; } #ai-voice-agents.home-voice-capabilities .vc-cap h3 { font-size: 25px !important; line-height: 1.25 !important; min-height: 63px; } #ai-voice-agents.home-voice-capabilities .vc-description { font-size: 15px !important; line-height: 1.75 !important; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 27px; } #ai-voice-agents.home-voice-capabilities .vc-scenario blockquote { font-size: 14px !important; } #ai-voice-agents.home-voice-capabilities .vc-scenario-label, #ai-voice-agents.home-voice-capabilities .vc-category { font-size: 11px !important; } #ai-voice-agents.home-voice-capabilities .vc-details li { font-size: 13px !important; } #ai-voice-agents.home-voice-capabilities .vc-scene-label { font-size: 12px !important; max-width: 150px; } #ai-voice-agents.home-voice-capabilities .vc-scene-story { min-height: 88px; } #ai-voice-agents.home-voice-capabilities .vc-scene-node { width: 33px; height: 33px; } #ai-voice-agents.home-voice-capabilities .vc-scene-node .vc-icon { width: 18px; height: 18px; } #ai-voice-agents.home-voice-capabilities .vc-scene-track { top: 11px; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation p { font-size: 16px !important; max-width: 820px; } } @media (min-width: 2200px) { #ai-voice-agents.home-voice-capabilities .vc-cap-grid { gap: 30px; } #ai-voice-agents.home-voice-capabilities .vc-cap h3 { font-size: 27px !important; min-height: 69px; } #ai-voice-agents.home-voice-capabilities .vc-description { font-size: 16px !important; } #ai-voice-agents.home-voice-capabilities .vc-scenario blockquote { font-size: 15px !important; } #ai-voice-agents.home-voice-capabilities .vc-details li { font-size: 14px !important; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 30px; } #ai-voice-agents.home-voice-capabilities .vc-scene-label { font-size: 13px !important; max-width: 175px; } #ai-voice-agents.home-voice-capabilities .vc-scene-story { min-height: 96px; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation { grid-template-columns: minmax(0px, 1fr) 410px; } #ai-voice-agents.home-voice-capabilities .vc-demo-button { max-width: none; } } @media (min-width: 3000px) { #ai-voice-agents.home-voice-capabilities .vc-cap-grid { gap: 34px; } #ai-voice-agents.home-voice-capabilities .vc-cap-copy { padding: 34px; } #ai-voice-agents.home-voice-capabilities .vc-description { max-width: 70ch; } #ai-voice-agents.home-voice-capabilities .vc-scenario blockquote { max-width: 70ch; } #ai-voice-agents.home-voice-capabilities .vc-scene-viewport { aspect-ratio: 360 / 210; } #ai-voice-agents.home-voice-capabilities .vc-demo-invitation h3 { font-size: 32px !important; } } @media (prefers-reduced-motion: reduce) { #ai-voice-agents.home-voice-capabilities *, #ai-voice-agents.home-voice-capabilities ::before, #ai-voice-agents.home-voice-capabilities ::after { animation-name: none; animation-duration: auto !important; animation-timing-function: ease !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-direction: normal !important; animation-fill-mode: none !important; animation-play-state: running !important; animation-timeline: auto !important; animation-range: normal !important; transition: none !important; } #ai-voice-agents.home-voice-capabilities .vc-scene-track .vc-runner { display: none; } } #ai-voice-agents.home-voice-capabilities { position: relative; isolation: isolate; scroll-margin-top: 6rem; background: rgb(243, 248, 252) !important; } #ai-voice-agents.home-voice-capabilities :is(h2, h3, p, li, small) { text-shadow: none !important; } #ai-voice-agents.home-voice-capabilities { line-height: normal; } #ai-voice-agents.home-voice-capabilities header { padding: 0; } #ai-voice-agents.home-voice-capabilities :is(h2, h3) { color: #183347 !important; } #ai-voice-agents.home-voice-capabilities li { margin: 0; } #ai-voice-agents.home-voice-capabilities :is(p, li) { text-wrap: wrap; } /* The opening and conversation share the same container as the existing scenarios. */ #ai-voice-agents.home-voice-capabilities .vc-opening { display: grid; gap: 28px; align-items: center; } #ai-voice-agents.home-voice-capabilities .vc-opening > * { min-width: 0; } #ai-voice-agents.home-voice-capabilities .vc-lead h2 { font-size: 32px !important; line-height: 1.2 !important; font-weight: 750; max-width: 650px; text-wrap: pretty; } #ai-voice-agents.home-voice-capabilities .vc-lead h2 em { color: #1763ac; font-style: normal; } #ai-voice-agents.home-voice-capabilities .vc-lead .vc-lead-intro { font-size: 19px !important; line-height: 1.45 !important; font-weight: 650; margin-top: 18px; color: #183347 !important; } #ai-voice-agents.home-voice-capabilities .vc-lead .vc-lead-copy { font-size: 15px !important; line-height: 1.75 !important; color: #526778 !important; margin-top: 14px; max-width: 62ch; } #ai-voice-agents.home-voice-capabilities .vc-opening-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 24px; } #ai-voice-agents.home-voice-capabilities .vc-opening-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 18px; background: #1763ac; color: #fff !important; border: 1px solid #1763ac; border-radius: 6px; font-size: 14px !important; font-weight: 700; line-height: 1.5 !important; text-decoration: none; width: 100%; } #ai-voice-agents.home-voice-capabilities .vc-opening-button span { min-width: 0; } #ai-voice-agents.home-voice-capabilities .vc-opening-button .vc-icon { width: 20px; height: 20px; } #ai-voice-agents.home-voice-capabilities .vc-story-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px !important; font-weight: 650; line-height: 1.5 !important; text-decoration: underline; text-underline-offset: 4px; color: #1763ac !important; } #ai-voice-agents.home-voice-capabilities .vc-story-link .vc-icon { width: 17px; height: 17px; } #ai-voice-agents.home-voice-capabilities .vc-lead .vc-opening-note { font-size: 12px !important; line-height: 1.7 !important; color: #526778 !important; max-width: 55ch; margin-top: 12px; } #ai-voice-agents.home-voice-capabilities .vc-flow { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 132px auto auto; column-gap: 12px; min-width: 0; width: 100%; max-width: 660px; margin-inline: auto; } #ai-voice-agents.home-voice-capabilities .vc-flow-lines { position: absolute; inset: 0 0 36px; width: 100%; height: calc(100% - 36px); pointer-events: none; } #ai-voice-agents.home-voice-capabilities .vc-flow-rail { stroke: #c1dceb; stroke-width: 1.4; fill: none; } #ai-voice-agents.home-voice-capabilities .vc-flow-signal { stroke: #27a7cd; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-dasharray: 16 120; animation: bsb-vc-flow-current 6s linear infinite; } #ai-voice-agents.home-voice-capabilities .vc-flow-node { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 12px; min-width: 0; border: 1px solid #cddfea; border-radius: 8px; background: #fff; } #ai-voice-agents.home-voice-capabilities .vc-flow-node:nth-of-type(1) { grid-area: 1 / 1; } #ai-voice-agents.home-voice-capabilities .vc-flow-node:nth-of-type(2) { grid-area: 1 / 2; } #ai-voice-agents.home-voice-capabilities .vc-flow-node:nth-of-type(4) { grid-area: 3 / 1; } #ai-voice-agents.home-voice-capabilities .vc-flow-node:nth-of-type(5) { grid-area: 3 / 2; } #ai-voice-agents.home-voice-capabilities .vc-flow-icon { display: grid; place-items: center; width: 34px; height: 34px; background: #eaf4fd; color: #1763ac; border-radius: 50%; margin-bottom: 10px; } #ai-voice-agents.home-voice-capabilities .vc-flow-node:nth-of-type(2) .vc-flow-icon { color: #17695d; background: #e9f5ef; } #ai-voice-agents.home-voice-capabilities .vc-flow-node:nth-of-type(4) .vc-flow-icon { color: #8a4c5b; background: #fbf0f3; } #ai-voice-agents.home-voice-capabilities .vc-flow-node strong { font-size: 13px; line-height: 1.5; font-weight: 750; } #ai-voice-agents.home-voice-capabilities .vc-flow-node p { font-size: 12px !important; line-height: 1.65 !important; margin-top: 5px; color: #526778 !important; } #ai-voice-agents.home-voice-capabilities .vc-flow-core { z-index: 1; grid-area: 2 / 1 / 3 / -1; place-self: center; width: 116px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-radius: 50%; background: #183347; color: #fff; border: 5px solid #e1eff8; box-shadow: 0 0 0 1px #b5d8ea; } #ai-voice-agents.home-voice-capabilities .vc-flow-core > .vc-icon { width: 30px; height: 30px; stroke: #85d9ec; animation: bsb-vc-agent-nod 4.8s ease-in-out infinite; } #ai-voice-agents.home-voice-capabilities .vc-flow-core > span:last-child { font-size: 10px; font-weight: 650; line-height: 1.5; } #ai-voice-agents.home-voice-capabilities .vc-voice-wave { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 24px; flex-shrink: 0; } #ai-voice-agents.home-voice-capabilities .vc-voice-wave i { display: block; width: 3px; height: 7px; border-radius: 2px; background: #85d9ec; animation: bsb-vc-voice-height 1.6s ease-in-out infinite; } #ai-voice-agents.home-voice-capabilities .vc-voice-wave i:nth-child(2n) { animation-delay: -.4s; } #ai-voice-agents.home-voice-capabilities .vc-voice-wave i:nth-child(3n) { animation-delay: -.9s; } #ai-voice-agents.home-voice-capabilities .vc-voice-wave i:nth-child(4n) { animation-delay: -1.2s; } #ai-voice-agents.home-voice-capabilities .vc-flow figcaption { grid-area: 4 / 1 / 5 / -1; text-align: center; padding-top: 18px; font-size: 12px; line-height: 1.5; color: #526778; } #ai-voice-agents.home-voice-capabilities .vc-benefits { display: grid; gap: 22px; padding: 24px 0; margin: 28px 0; border-block: 1px solid #d4e2ec; } #ai-voice-agents.home-voice-capabilities .vc-benefits li { display: flex; align-items: flex-start; gap: 13px; min-width: 0; } #ai-voice-agents.home-voice-capabilities .vc-benefits li > .vc-icon { margin-top: 2px; color: #1763ac; } #ai-voice-agents.home-voice-capabilities .vc-benefits h3 { font-size: 15px !important; line-height: 1.5 !important; font-weight: 700; } #ai-voice-agents.home-voice-capabilities .vc-benefits p { font-size: 13px !important; line-height: 1.7 !important; color: #526778 !important; margin-top: 5px; } #ai-voice-agents.home-voice-capabilities .vc-conversation { background: #183347; padding: 24px 18px; color: #e5eef6; scroll-margin-top: 7rem; } #ai-voice-agents.home-voice-capabilities .vc-conversation .vc-eyebrow { color: #85d9ec !important; } #ai-voice-agents.home-voice-capabilities .vc-conversation h3 { font-size: 24px !important; line-height: 1.3 !important; color: #fff !important; font-weight: 700; } #ai-voice-agents.home-voice-capabilities .vc-conversation-heading > p:last-child { font-size: 14px !important; line-height: 1.75 !important; color: #ccdce9 !important; margin-top: 12px; max-width: 65ch; } #ai-voice-agents.home-voice-capabilities .vc-conversation-body { display: grid; gap: 30px; margin-top: 24px; } #ai-voice-agents.home-voice-capabilities .vc-dialogue { display: grid; gap: 19px; list-style: none; padding: 0; margin: 0; min-width: 0; } #ai-voice-agents.home-voice-capabilities .vc-dialogue li { border-left: 2px solid #506e83; padding-left: 14px; } #ai-voice-agents.home-voice-capabilities .vc-dialogue .vc-agent-message { border-color: #85d9ec; } #ai-voice-agents.home-voice-capabilities .vc-speaker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; line-height: 1.5; font-weight: 700; color: #adc4d5; margin-bottom: 5px; } #ai-voice-agents.home-voice-capabilities .vc-agent-message .vc-speaker { color: #85d9ec; } #ai-voice-agents.home-voice-capabilities .vc-speaker > .vc-icon { width: 16px; height: 16px; } #ai-voice-agents.home-voice-capabilities .vc-speaker .vc-voice-wave { height: 18px; gap: 2px; } #ai-voice-agents.home-voice-capabilities .vc-dialogue p { font-size: 14px !important; line-height: 1.75 !important; color: #f4f8ff !important; } #ai-voice-agents.home-voice-capabilities .vc-handover { border-top: 1px solid #466477; padding-top: 24px; min-width: 0; } #ai-voice-agents.home-voice-capabilities .vc-handover-icon { display: grid; place-items: center; color: #85d9ec; width: 36px; height: 36px; margin-bottom: 12px; } #ai-voice-agents.home-voice-capabilities .vc-handover-icon .vc-icon { width: 28px; height: 28px; animation: bsb-vc-agent-nod 6s ease-in-out infinite; } #ai-voice-agents.home-voice-capabilities .vc-handover h3 { font-size: 20px !important; } #ai-voice-agents.home-voice-capabilities .vc-handover dl { margin: 18px 0 0; } #ai-voice-agents.home-voice-capabilities .vc-handover dl > div { display: grid; gap: 5px; padding: 12px 0; border-bottom: 1px solid #365569; } #ai-voice-agents.home-voice-capabilities .vc-handover dt { font-size: 11px; line-height: 1.5; font-weight: 700; color: #85d9ec; } #ai-voice-agents.home-voice-capabilities .vc-handover dd { font-size: 13px; line-height: 1.75; color: #e5eef6; margin: 0; } #ai-voice-agents.home-voice-capabilities .vc-handover .vc-handover-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; color: #bcd1df !important; font-size: 11px !important; line-height: 1.7 !important; } #ai-voice-agents.home-voice-capabilities .vc-handover-note .vc-icon { width: 16px; height: 16px; margin-top: 1px; color: #85d9ec; } #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading { display: grid; gap: 12px; margin: 32px 0 24px; } #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading .vc-eyebrow { margin: 0; } #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading h3 { font-size: 26px !important; line-height: 1.3 !important; font-weight: 750; } #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading > p:last-child { font-size: 14px !important; line-height: 1.75 !important; color: #526778 !important; max-width: 75ch; } @keyframes bsb-vc-flow-current { to { stroke-dashoffset: -272; } } @keyframes bsb-vc-agent-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes bsb-vc-voice-height { 0%, 100% { height: 6px; } 50% { height: 17px; } } @media (hover: hover) and (pointer: fine) { #ai-voice-agents.home-voice-capabilities .vc-opening-button:hover { background: #124d88; border-color: #124d88; } #ai-voice-agents.home-voice-capabilities .vc-story-link:hover { color: #124d88 !important; } } @media (min-width: 520px) { #ai-voice-agents.home-voice-capabilities .vc-opening-button { width: auto; } #ai-voice-agents.home-voice-capabilities .vc-flow-node { padding: 18px; } #ai-voice-agents.home-voice-capabilities .vc-flow-node strong { font-size: 15px; } #ai-voice-agents.home-voice-capabilities .vc-flow-node p { font-size: 13px !important; } #ai-voice-agents.home-voice-capabilities .vc-conversation { padding: 30px; } } @media (min-width: 700px) { #ai-voice-agents.home-voice-capabilities .vc-lead h2 { font-size: 38px !important; } #ai-voice-agents.home-voice-capabilities .vc-opening-actions { flex-direction: row; flex-wrap: wrap; gap: 12px 22px; align-items: center; } #ai-voice-agents.home-voice-capabilities .vc-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 28px 0; } #ai-voice-agents.home-voice-capabilities .vc-benefits li { flex-direction: column; gap: 10px; } #ai-voice-agents.home-voice-capabilities .vc-conversation-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; } #ai-voice-agents.home-voice-capabilities .vc-handover { border-top: 0; border-left: 1px solid #466477; padding: 0 0 0 28px; } } @media (min-width: 1100px) { #ai-voice-agents.home-voice-capabilities { padding-block: 42px; } #ai-voice-agents.home-voice-capabilities .vc-opening { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; } #ai-voice-agents.home-voice-capabilities .vc-lead h2 { font-size: 42px !important; } #ai-voice-agents.home-voice-capabilities .vc-lead .vc-lead-copy { font-size: 16px !important; } #ai-voice-agents.home-voice-capabilities .vc-benefits { margin: 34px 0; gap: 32px; } #ai-voice-agents.home-voice-capabilities .vc-benefits li { flex-direction: row; gap: 14px; } #ai-voice-agents.home-voice-capabilities .vc-conversation { padding: 36px; } #ai-voice-agents.home-voice-capabilities .vc-conversation-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 40px; align-items: end; } #ai-voice-agents.home-voice-capabilities .vc-conversation-heading .vc-eyebrow { grid-column: 1 / -1; } #ai-voice-agents.home-voice-capabilities .vc-conversation-heading h3 { font-size: 28px !important; } #ai-voice-agents.home-voice-capabilities .vc-conversation-heading > p:last-child { margin: 0; } #ai-voice-agents.home-voice-capabilities .vc-conversation-body { gap: 40px; margin-top: 28px; } #ai-voice-agents.home-voice-capabilities .vc-handover { padding-left: 40px; } #ai-voice-agents.home-voice-capabilities .vc-handover dl > div { grid-template-columns: 86px minmax(0, 1fr); gap: 12px; } #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px 48px; align-items: end; margin-top: 40px; } #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading .vc-eyebrow { grid-column: 1 / -1; } #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading h3 { font-size: 30px !important; } } @media (min-width: 2200px) { #ai-voice-agents.home-voice-capabilities .vc-opening { gap: 70px; } #ai-voice-agents.home-voice-capabilities .vc-lead h2 { font-size: 44px !important; } #ai-voice-agents.home-voice-capabilities .vc-lead .vc-lead-copy { font-size: 17px !important; } #ai-voice-agents.home-voice-capabilities .vc-flow { column-gap: 20px; grid-template-rows: auto 152px auto auto; } #ai-voice-agents.home-voice-capabilities .vc-flow-node { padding: 24px; } #ai-voice-agents.home-voice-capabilities .vc-flow-node strong { font-size: 16px; } #ai-voice-agents.home-voice-capabilities .vc-flow-node p { font-size: 14px !important; } #ai-voice-agents.home-voice-capabilities .vc-conversation { padding: 40px; } #ai-voice-agents.home-voice-capabilities .vc-dialogue p { font-size: 16px !important; } #ai-voice-agents.home-voice-capabilities .vc-handover dd { font-size: 15px; } #ai-voice-agents.home-voice-capabilities .vc-benefits p, #ai-voice-agents.home-voice-capabilities .vc-scenarios-heading > p:last-child { font-size: 15px !important; } } @media (prefers-reduced-motion: reduce) { #ai-voice-agents.home-voice-capabilities :is(.vc-flow-signal, .vc-flow-core > .vc-icon, .vc-voice-wave i, .vc-handover-icon .vc-icon) { animation: none !important; } #ai-voice-agents.home-voice-capabilities .vc-voice-wave i:nth-child(2n) { height: 13px; } } @media print { #ai-voice-agents.home-voice-capabilities :is(.vc-flow-signal, .vc-flow-core > .vc-icon, .vc-voice-wave i, .vc-handover-icon .vc-icon) { animation: none !important; } } /* Conversation examples stay bright, readable and connected to the brand's demo actions. */ #ai-voice-agents.home-voice-capabilities :is(.vc-opening-button, .vc-demo-button) { position: relative; isolation: isolate; overflow: hidden; background: var(--bsb-demo-action-background, linear-gradient(110deg, #6196ff, #6dcde5)); color: var(--bsb-demo-action-ink, #071b2e) !important; border-color: #96ccff; } #ai-voice-agents.home-voice-capabilities .vc-opening-button > * { position: relative; z-index: 1; } #ai-voice-agents.home-voice-capabilities .vc-opening-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff30 50%, transparent 70%); transform: translateX(-130%); animation: bsb-vc-button-light 9s ease-in-out infinite; pointer-events: none; } #ai-voice-agents.home-voice-capabilities .vc-opening-robot { animation: bsb-vc-robot 4.8s ease-in-out infinite; transform-origin: center; } #ai-voice-agents.home-voice-capabilities .vc-opening-arrow { animation: bsb-vc-action-direction 4.8s ease-in-out infinite; } #ai-voice-agents.home-voice-capabilities .vc-conversation { background: #fff; border-block: 1px solid #cddfea; color: #183347; } #ai-voice-agents.home-voice-capabilities .vc-conversation .vc-eyebrow { color: #1763ac !important; } #ai-voice-agents.home-voice-capabilities .vc-conversation h3 { color: #183347 !important; } #ai-voice-agents.home-voice-capabilities .vc-conversation-heading > p:last-child { color: #526778 !important; } #ai-voice-agents.home-voice-capabilities .vc-dialogue { padding: 20px 16px; background: #eef7fe; border-radius: 6px; } #ai-voice-agents.home-voice-capabilities .vc-dialogue li { border-color: #b5cadc; } #ai-voice-agents.home-voice-capabilities .vc-dialogue .vc-agent-message { border-color: #25a2c1; } #ai-voice-agents.home-voice-capabilities .vc-speaker { color: #526778; } #ai-voice-agents.home-voice-capabilities .vc-agent-message .vc-speaker { color: #1763ac; } #ai-voice-agents.home-voice-capabilities .vc-speaker .vc-voice-wave i { background: #1763ac; } #ai-voice-agents.home-voice-capabilities .vc-dialogue p { color: #183347 !important; } #ai-voice-agents.home-voice-capabilities .vc-handover { border-color: #cddfea; } #ai-voice-agents.home-voice-capabilities .vc-handover-icon { color: #1683a1; } #ai-voice-agents.home-voice-capabilities .vc-handover dl > div { border-color: #d9e7ef; } #ai-voice-agents.home-voice-capabilities .vc-handover dt { color: #1763ac; } #ai-voice-agents.home-voice-capabilities .vc-handover dd { color: #183347; } #ai-voice-agents.home-voice-capabilities .vc-handover .vc-handover-note { color: #526778 !important; } #ai-voice-agents.home-voice-capabilities .vc-handover-note .vc-icon { color: #1683a1; } #ai-voice-agents.home-voice-capabilities .vc-outcomes { display: grid; gap: 24px; padding-top: 26px; margin-top: 28px; border-top: 1px solid #d4e2ec; } #ai-voice-agents.home-voice-capabilities .vc-outcome { min-width: 0; } #ai-voice-agents.home-voice-capabilities .vc-outcome-visual { background: #eef7fe; aspect-ratio: 300 / 112; overflow: hidden; margin-bottom: 16px; } #ai-voice-agents.home-voice-capabilities .vc-outcome-visual svg { width: 100%; height: 100%; } #ai-voice-agents.home-voice-capabilities .vc-outcome h3 { font-size: 18px !important; line-height: 1.4 !important; font-weight: 700; } #ai-voice-agents.home-voice-capabilities .vc-outcome p { margin-top: 9px; font-size: 13px !important; line-height: 1.75 !important; color: #526778 !important; } #ai-voice-agents.home-voice-capabilities .vc-outcome-rail { stroke: #b5d8ea; stroke-width: 2; fill: none; } #ai-voice-agents.home-voice-capabilities .vc-outcome-current { stroke: #25a2c1; stroke-width: 3; fill: none; stroke-dasharray: 12 70; animation: bsb-vc-flow-current 6s linear infinite; } #ai-voice-agents.home-voice-capabilities .vc-outcome-sheet { fill: #fff; stroke: #c1dceb; stroke-width: 1.5; } #ai-voice-agents.home-voice-capabilities .vc-outcome-agent { fill: #d6ebff; stroke: #9bcaf1; } #ai-voice-agents.home-voice-capabilities .vc-outcome-result { fill: #e2f5ed; stroke: #b2dbce; } #ai-voice-agents.home-voice-capabilities .vc-outcome-icon { fill: none; stroke: #1763ac; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #ai-voice-agents.home-voice-capabilities .vc-outcome-bot { transform-box: fill-box; transform-origin: center; animation: bsb-vc-agent-nod 4.8s ease-in-out infinite; } #ai-voice-agents.home-voice-capabilities .vc-outcome-check { stroke: #197360; } #ai-voice-agents.home-voice-capabilities .vc-outcome-writing { stroke: #78adce; stroke-width: 2; stroke-linecap: round; fill: none; } @keyframes bsb-vc-action-direction { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } @media (min-width: 700px) { #ai-voice-agents.home-voice-capabilities .vc-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } #ai-voice-agents.home-voice-capabilities .vc-outcome h3 { min-height: 52px; } } @media (min-width: 2200px) { #ai-voice-agents.home-voice-capabilities .vc-outcomes { gap: 32px; } #ai-voice-agents.home-voice-capabilities .vc-outcome p { font-size: 15px !important; } } @media (hover: hover) and (pointer: fine) { #ai-voice-agents.home-voice-capabilities .vc-opening-button:hover { background: var(--bsb-demo-action-background); border-color: #1763ac; } }