/* Connect Live: one stage, one relationship. Scoped to this section. */
.connect-site .cx {
  --cx-ink: #eef4ff; --cx-muted: #a6b8cc; --cx-accent: #7adccd;
  --cx-surface: #101c2b; --cx-depth: #172637; --cx-edge: #34475b;
  background: #09121e; color: var(--cx-ink); padding-block: 80px 128px;
  scroll-margin-top: calc(var(--header, 76px) + 20px); position: relative;
}
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx [hidden] { display: none !important; }
.cx img { display: block; object-fit: contain; flex-shrink: 0; }
.cx button, .cx input, .cx select { font: inherit; }
.cx button, .cx a { -webkit-tap-highlight-color: transparent; }
.cx :is(button, a, input, select, summary) { scroll-margin-top: calc(var(--header, 76px) + 20px); scroll-margin-bottom: 24px; }
.cx button { cursor: pointer; }
.cx button:disabled { cursor: default; opacity: .46; }
.cx button:focus-visible, .cx a:focus-visible, .cx input:focus-visible, .cx select:focus-visible, .cx summary:focus-visible { outline: 2px solid #91eee0; outline-offset: 5px; }
.cx .lp-label { color: var(--cx-accent); letter-spacing: .2em; font-size: 11px; }
.connect-site .cx h2, .connect-site .cx h3, .connect-site .cx h4 { color: var(--cx-ink); }
.cx-head { text-align: center; margin: 0 auto 44px; }
.connect-site .cx h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.12; margin: 14px 0; letter-spacing: -.035em; }
.cx-hero-motto { color: var(--cx-muted); font-size: clamp(14px, 1.6vw, 18px); margin: 0; }
.cx-constellation { position: relative; width: min(640px, 100%); height: 430px; border: 0; padding: 0; margin: 0 auto 72px; min-inline-size: 0; }
.cx-channel-grid { position: absolute; inset: 0; }
.cx-channel { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; width: 124px; min-height: 106px; border-radius: 24px; z-index: 2; text-align: center; }
.cx-channel input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; cursor: pointer; margin: 0; }
.cx-channel:has(input:focus-visible) { outline: 2px solid #91eee0; outline-offset: 7px; }
.cx-channel img { transition: transform 350ms, opacity 350ms; opacity: .68; }
.cx-channel.is-active img { opacity: 1; transform: scale(1.08); }
.cx-channel.is-active::before { content: ''; position: absolute; width: 76px; height: 76px; top: -6px; border-radius: 24px; box-shadow: 0 0 0 1px #7adccd50, 0 0 30px #32baaa1c; }
.cx-channel strong { font-size: 12px; font-weight: 600; }
.cx-channel-state { color: var(--cx-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.cx-channel-state.is-live { color: #91e6bc; }
.cx-channel-state.is-warn, .cx-channel-state.is-off { color: #f6c786; }
.cx-node-whatsapp { top: 0; left: calc(50% - 62px); }
.cx-node-email { top: 187px; left: 12px; }
.cx-node-phone { top: 187px; right: 12px; }
.cx-node-whatsapp_call { bottom: 0; left: calc(50% - 62px); }
.cx-orb { position: absolute; top: 115px; left: calc(50% - 104px); width: 208px; height: 208px; display: grid; place-items: center; z-index: 1; }
.cx-orb img { position: absolute; width: 208px; height: 208px; transition: opacity 350ms ease, transform 350ms ease; }
.cx-orb [data-cx-orb-next] { opacity: 0; transform: scale(.98); }
.cx-orb.is-transitioning [data-cx-orb-next] { opacity: 1; transform: scale(1); }
.cx-orb.is-transitioning img:first-child { opacity: 0; transform: scale(.98); }
.cx-orb span { position: absolute; bottom: 6px; font-size: 10px; letter-spacing: .32em; color: var(--cx-muted); }
.cx-connectors { position: absolute; inset: 0; pointer-events: none; }
.cx-connectors i { position: absolute; background: #5b829a3b; }
.cx-connectors i:nth-child(1) { width: 1px; height: 34px; top: 107px; left: 50%; }
.cx-connectors i:nth-child(2) { height: 1px; width: calc(50% - 190px); top: 219px; left: 130px; }
.cx-connectors i:nth-child(3) { height: 1px; width: calc(50% - 190px); top: 219px; right: 130px; }
.cx-connectors i:nth-child(4) { width: 1px; height: 36px; bottom: 106px; left: 50%; }
.cx-data-light { display: none; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #b4fff3; box-shadow: 0 0 12px #7adccd; top: calc(var(--cx-origin-y, 219px) - 3px); left: calc(50% - 3px); }
.cx-constellation.is-handoff .cx-data-light { display: block; animation: cx-travel 1100ms ease-in-out both; }
.cx-constellation.is-handoff .cx-channel.is-source img { animation: cx-source 1100ms ease-out; }
@keyframes cx-travel { 0% { transform: translate(var(--cx-from-x, 0px), var(--cx-from-y, -125px)); opacity: 0; } 15% { opacity: 1; } 48% { transform: translate(0,0) scale(1.4); } 90% { opacity: 1; } 100% { transform: translate(var(--cx-to-x, 190px), var(--cx-to-y, 0px)); opacity: 0; } }
@keyframes cx-source { 35% { transform: scale(1.15); opacity: 1; } }
.cx-handoff-status { position: absolute; width: 100%; bottom: -48px; text-align: center; font-size: 12px; color: var(--cx-accent); margin: 0; }
.cx-stage { width: min(900px, 100%); margin: 0 auto; background: var(--cx-surface); border-radius: 32px; padding: 32px 48px 40px; box-shadow: 0 24px 80px #0003; min-height: 460px; transition: opacity 350ms, transform 350ms; scroll-margin-top: calc(var(--header, 76px) + 20px); }
.cx-stage.is-receding { transform: scale(.98); opacity: .45; }
.cx-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.cx-business-context { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-business-context strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.cx-business-context small { display: block; color: var(--cx-muted); font-size: 11px; margin-top: 3px; }
.cx-mode { border-radius: 30px; padding: 5px 12px; background: #ffc46713; color: #ffd395; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cx-mode.is-real { color: #91e6bc; background: #91e6bc15; }
.cx-device-shell { max-width: 380px; margin-inline: auto; background: #0a1420; border-radius: 26px; overflow: hidden; box-shadow: 0 18px 40px #0003; }
.cx-device-topbar { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: #1c3041; }
.cx-device-topbar strong { display: block; font-size: 13px; }
.cx-device-topbar small { display: block; color: var(--cx-muted); font-size: 10px; }
.cx-device-topbar button { margin-left: auto; background: transparent; border: 0; color: var(--cx-muted); font-size: 11px; min-height: 44px; }
.cx-chat-canvas { padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; max-height: 320px; overflow-y: auto; }
.cx-chat-msg { border-radius: 15px; max-width: 91%; padding: 12px 14px; background: #223144; align-self: flex-start; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.cx-chat-msg.is-out { background: #204e49; align-self: flex-end; }
.cx-chat-msg p { margin: 0; }
.cx-chat-time { display: block; text-align: right; margin-top: 6px; font-size: 9px; color: #bfd4d6; }
.cx-chat-compose { display: flex; gap: 6px; padding: 12px; }
.cx input:not([type='radio']):not([type='checkbox']), .cx select { min-width: 0; color: var(--cx-ink); background: var(--cx-depth); border: 1px solid var(--cx-edge); border-radius: 12px; padding: 12px 14px; min-height: 46px; max-width: 100%; }
.cx-chat-compose input { width: 100%; font-size: 12px; }
.cx input::placeholder { color: var(--cx-muted); }
.cx-chat-compose button { border: 0; background: transparent; color: var(--cx-accent); padding: 10px; min-height: 44px; }
.cx-typing-indicator { display: flex; gap: 5px; padding: 0 28px 14px; }
.cx-typing-indicator span { height: 4px; width: 4px; background: var(--cx-accent); border-radius: 50%; animation: cx-type 850ms ease-in-out infinite alternate; }
.cx-typing-indicator span:nth-child(2) { animation-delay: 120ms; }
.cx-typing-indicator span:nth-child(3) { animation-delay: 240ms; }
@keyframes cx-type { to { transform: translateY(-3px); opacity: .3; } }
.cx-stage-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.cx-stage-actions button, .cx-secondary button, .cx-biz-choices > button { border: 0; background: transparent; color: var(--cx-accent); font-size: 12px; padding: 10px 8px; min-height: 44px; }
.cx-action-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; color: var(--cx-accent); font-size: 11px; }
.cx-action-chips span { display: flex; align-items: center; gap: 5px; }
.cx-activity { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--cx-muted); font-size: 12px; margin: 24px auto 52px; }
.cx-journey { width: min(1000px, 100%); margin: 0 auto; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #345063 transparent; padding: 8px 0 18px; }
.cx-journey ol { display: flex; list-style: none; padding: 0; margin: 0; min-width: max-content; }
.cx-journey li { width: 108px; position: relative; text-align: center; scroll-snap-align: center; }
.cx-journey li:not(:last-child)::after { content: ''; position: absolute; height: 1px; width: 28px; right: -14px; top: 33px; background: #32475c; }
.cx-journey button { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--cx-muted); font-size: 10px; padding: 7px 6px; width: 100%; min-height: 90px; }
.cx-journey img { opacity: .27; }
.cx-journey .is-complete img, .cx-journey .is-current img { opacity: 1; }
.cx-journey .is-complete span::before { content: '✓ '; color: var(--cx-accent); }
.cx-journey .is-current button::before { content: ''; position: absolute; width: 62px; height: 62px; top: 4px; border: 1px solid var(--cx-accent); border-radius: 18px; animation: cx-ring 2s ease-in-out infinite; }
@keyframes cx-ring { 50% { opacity: .45; transform: scale(1.06); } }
.cx-journey-detail { max-width: 660px; margin: 12px auto 0; text-align: center; color: var(--cx-muted); font-size: 12px; }
.cx-real-cta { width: min(720px, 100%); margin: 72px auto 0; display: flex; align-items: center; justify-content: center; gap: 40px; }
.cx-real-cta p { font-size: 18px; margin: 0 0 4px; }
.cx-real-cta small { color: var(--cx-muted); font-size: 11px; }
.cx .cx-primary { border: 0; border-radius: 14px; background: #e9b86f; color: #17202c; font-weight: 650; min-height: 48px; padding: 14px 24px; font-size: 13px; }
.cx-evidence { max-width: 720px; margin: 24px auto 0; color: var(--cx-muted); font-size: 12px; }
.cx summary { cursor: pointer; padding: 12px 0; min-height: 44px; }
.cx-evidence ol { line-height: 1.8; max-height: 240px; overflow: auto; }
.cx-evidence time { margin-right: 10px; }
.cx-evidence dt { color: var(--cx-accent); }
.cx-evidence dd { margin: 4px 0 14px; }
.cx-call-body { text-align: center; max-width: 580px; margin: auto; }
.cx-call-body > img { margin: 0 auto 16px; }
.cx-call-body h3 { letter-spacing: .22em; font-size: 17px; margin: 0 0 12px; }
.cx-call-body > p { font-size: 12px; color: var(--cx-muted); }
.cx-wave { height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 24px 0; }
.cx-wave i { width: 4px; height: 8px; background: #69adca; border-radius: 4px; animation: cx-wave 1s ease-in-out infinite alternate; }
.cx-wave i:nth-child(3n) { height: 28px; animation-delay: -.6s; }
.cx-wave i:nth-child(3n + 1) { height: 17px; animation-delay: -.2s; }
@keyframes cx-wave { to { transform: scaleY(.3); } }
.cx-screen-phone.is-held .cx-wave i, .cx-screen-phone.is-ended .cx-wave i { animation: none; }
.cx-turn-text { max-width: 400px; margin: 16px auto 24px; line-height: 1.7; }
.cx-call-controls { display: flex; justify-content: center; gap: 16px; }
.cx-call-controls button { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 48px; background: transparent; border: 0; color: var(--cx-muted); padding: 5px; font-size: 10px; }
.cx-call-controls button[aria-pressed='true'] { color: var(--cx-accent); background: #7adccd14; border-radius: 12px; }
.cx-dial { margin: 28px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cx-dial a { color: var(--cx-accent); text-decoration: none; font-size: 12px; padding-block: 12px; }
.cx-dial button { border: 0; background: transparent; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.cx-keypad { display: grid; grid-template-columns: repeat(3, 48px); justify-content: center; gap: 8px; margin: 24px auto; }
.cx-keypad button { border: 0; border-radius: 10px; background: var(--cx-depth); color: var(--cx-ink); min-height: 48px; }
.cx-keypad output, .cx-keypad small { grid-column: 1 / -1; color: var(--cx-muted); font-size: 11px; }
.cx-email-thread { max-width: 540px; margin: 0 auto; border-radius: 24px; background: #0b1521; padding: 28px; }
.cx-email-head { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.cx-email-head strong, .cx-email-head small { display: block; }
.cx-email-head small, .cx-email-status { font-size: 11px; color: var(--cx-muted); }
.cx-email-thread h4 { font-size: 18px; margin: 0 0 24px; }
.cx-email-thread p { font-size: 13px; line-height: 1.7; }
.cx-email-thread a { color: var(--cx-accent); }
.cx-email-status { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 28px; }
.cx-unavailable { text-align: center; padding: 32px 0; }
.cx-unavailable > img { margin: 0 auto 18px; }
.cx-unavailable details { max-width: 480px; margin: auto; font-size: 12px; color: var(--cx-muted); }
.cx-unavailable li { margin-bottom: 10px; text-align: left; }
.cx-personalize { margin: 140px auto 0; text-align: center; max-width: 640px; }
.cx-personalize h3 { font-size: clamp(24px, 3vw, 36px); letter-spacing: -.02em; margin: 16px 0 32px; }
.cx-personalize > img { margin: 0 auto 36px; }
.cx-personalize form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 570px; margin: auto; }
.cx-url-field { display: flex; align-items: center; gap: 10px; background: var(--cx-depth); border-radius: 14px; padding: 0 14px; flex: 1; min-width: 240px; }
.cx .cx-url-field input { width: 100%; background: transparent; border: 0; padding-left: 0; }
.cx-personalize [data-cx-biz-error] { width: 100%; margin: 0; color: #ffb5b5; font-size: 12px; }
.cx-personalize > small { display: block; font-size: 11px; color: var(--cx-muted); line-height: 1.6; margin-top: 22px; }
.cx-biz-progress { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.cx-biz-progress span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; color: var(--cx-muted); }
.cx-biz-choices { margin-top: 36px; }
.cx-biz-choices > p { color: var(--cx-accent); font-size: 12px; }
.cx-biz-choices label { display: block; font-size: 12px; margin: 24px 0 8px; }
.cx-biz-choices h4 { font-size: 16px; margin: 32px 0 24px; }
.cx-role-tiles { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.cx-role-tiles button { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; border-radius: 16px; background: transparent; color: var(--cx-muted); padding: 12px; font-size: 11px; min-width: 88px; min-height: 88px; }
.cx-role-tiles button[aria-pressed='true'] { color: var(--cx-accent); background: #7adccd12; }
.cx-secondary { max-width: 640px; display: flex; justify-content: center; gap: 24px; margin: 64px auto 0; font-size: 12px; color: var(--cx-muted); }
.cx-ask { min-width: 180px; }
.cx-ask form { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.cx-ask form input { width: 100%; }
.cx-ask form button { border: 0; padding: 10px 20px; background: var(--cx-depth); color: var(--cx-accent); min-height: 44px; border-radius: 8px; }
.cx-ask p { max-width: 340px; line-height: 1.7; }
.cx-real-status { text-align: center; color: var(--cx-accent); font-size: 12px; margin: 20px 0 0; }
.cx-test-dialog { --cx-ink: #eef4ff; --cx-muted: #a6b8cc; --cx-depth: #172637; --cx-edge: #34475b; --cx-accent: #7adccd; background: #101c2b; color: var(--cx-ink); border: 1px solid #34475b; border-radius: 28px; padding: 40px; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.cx-test-dialog::backdrop { background: #020812b8; }
.cx-dialog-close { position: absolute; right: 14px; top: 12px; min-width: 44px; min-height: 44px; color: var(--cx-muted); background: transparent; border: 0; font-size: 26px; }
.cx-test-dialog h3 { font-size: 25px; margin: 12px 0 26px; }
.cx-test-channels { display: flex; justify-content: space-between; gap: 12px; }
.cx-test-channels button { background: transparent; border: 0; color: var(--cx-muted); padding: 12px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 12px; min-height: 88px; }
.cx-test-channels button[aria-pressed='true'] { background: #7adccd14; color: var(--cx-accent); }
.cx-test-dialog form { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; font-size: 13px; }
.cx-test-dialog form > p, .cx-test-dialog > p:not(.lp-label) { font-size: 12px; line-height: 1.6; color: var(--cx-muted); margin: 0; overflow-wrap: anywhere; }
.cx-test-dialog [data-cx-error] { color: #ffb5b5; }
.cx-test-dialog .cx-consent { display: flex; align-items: center; gap: 12px; line-height: 1.5; font-size: 12px; }
.cx-consent input { width: 20px; height: 20px; accent-color: #7adccd; flex: none; }
.cx-test-dialog > a { display: block; color: var(--cx-accent); font-size: 12px; padding: 14px 0; }
.cx-test-dialog [data-cx-test-result] { padding-top: 16px; }
body.is-experience-active #cira-launcher, body.is-experience-active #cira-teaser { visibility: hidden; pointer-events: none; }
.cx-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #203043; color: #eef4ff; padding: 14px 20px; border-radius: 14px; z-index: 2000; max-width: calc(100% - 32px); font-size: 12px; box-shadow: 0 8px 24px #0004; }
@media (max-width: 639px) {
  .connect-site .cx { padding-block: 64px 80px; }
  .cx-head { margin-bottom: 32px; }
  .cx-constellation { height: 380px; margin-bottom: 56px; }
  .cx-channel { width: 94px; }
  .cx-channel img { width: 52px; height: 52px; }
  .cx-node-whatsapp, .cx-node-whatsapp_call { left: calc(50% - 47px); }
  .cx-node-email { left: -4px; top: 164px; }
  .cx-node-phone { right: -4px; top: 164px; }
  .cx-orb { left: calc(50% - 80px); top: 110px; width: 160px; height: 160px; }
  .cx-orb img { width: 160px; height: 160px; }
  .cx-orb span { bottom: 0; }
  .cx-channel strong { font-size: 11px; }
  .cx-channel-state { font-size: 9px; }
  .cx-connectors i:nth-child(2) { top: 190px; left: 75px; width: calc(50% - 150px); }
  .cx-connectors i:nth-child(3) { top: 190px; right: 75px; width: calc(50% - 150px); }
  .cx-connectors i:nth-child(4) { height: 24px; }
  .cx-channel.is-active::before { width: 62px; height: 62px; }
  .cx-stage { padding: 22px 14px 28px; border-radius: 24px; min-height: 420px; }
  .cx-stage-top { margin-bottom: 22px; }
  .cx-device-topbar { padding: 12px; }
  .cx-business-context { gap: 8px; }
  .cx-business-context img { width: 40px; height: 36px; }
  .cx-business-context strong { font-size: 12px; }
  .cx-chat-canvas { padding: 18px 12px; }
  .cx-chat-msg { font-size: 12px; }
  .cx-stage-actions { gap: 6px; }
  .cx-stage-actions button { font-size: 11px; }
  .cx-call-controls { gap: 6px; }
  .cx-call-controls button { padding: 4px; min-width: 44px; }
  .cx-call-controls img { width: 36px; height: 36px; }
  .cx-email-thread { padding: 22px 18px; }
  .cx-activity { margin-bottom: 32px; }
  .cx-journey li { width: 88px; }
  .cx-journey li:not(:last-child)::after { width: 16px; right: -8px; }
  .cx-real-cta { margin-top: 48px; flex-direction: column; text-align: center; gap: 20px; }
  .cx-personalize { margin-top: 100px; }
  .cx-personalize form { flex-direction: column; }
  .cx-url-field { min-width: 0; min-height: 52px; }
  .cx-personalize .cx-primary { width: 100%; }
  .cx-role-tiles { gap: 8px; }
  .cx-role-tiles button { min-width: 84px; }
  .cx-secondary { flex-direction: column; align-items: center; gap: 12px; }
  .cx-ask { width: 100%; }
  .cx-test-dialog { padding: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx *, .cx *::before, .cx *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cx-constellation.is-handoff .cx-data-light { display: none; }
}