.web-call-page{min-height:calc(100vh - var(--header-height));padding:44px max(24px,calc((100vw - 1240px)/2)) 80px;background:radial-gradient(circle at 78% 20%,rgb(255 100 20/.12),transparent 32%),var(--background)}
.web-call-back{display:inline-flex;margin-bottom:24px;color:var(--muted);font-weight:700;text-decoration:none}.web-call-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:clamp(30px,5vw,72px);border:1px solid var(--line);border-radius:32px;background:var(--surface);box-shadow:0 28px 70px rgb(16 24 40/.12)}
.web-call-eyebrow{color:#ff5a0a;font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.web-call-copy h1{max-width:680px;margin:14px 0 18px;font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-.045em}.web-call-copy>p:not(.web-call-eyebrow){max-width:620px;color:var(--muted);font-size:18px;line-height:1.65}.web-call-copy ul{display:grid;gap:12px;margin:28px 0 0;padding:0;list-style:none}.web-call-copy li{display:flex;gap:12px;align-items:center;font-weight:650}.web-call-copy li::before{content:'✓';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;background:#ff5a0a}
.web-call-console{position:relative;width:min(100%,410px);min-height:720px;margin-inline:auto;border:9px solid #0c1729;border-radius:46px;background:#fff;box-shadow:0 30px 75px rgb(15 23 42/.22);overflow:hidden}.web-call-device-top{position:absolute;top:0;left:50%;z-index:4;width:128px;height:27px;transform:translateX(-50%);border-radius:0 0 18px 18px;background:#0c1729}.web-call-device-top span{position:absolute;top:9px;left:50%;width:42px;height:5px;transform:translateX(-50%);border-radius:999px;background:#31415a}.web-call-stage{display:none;align-items:center;flex-direction:column;justify-content:center;min-height:702px;padding:50px 28px 30px;color:#12213a;text-align:center}.web-call-page[data-call-state=idle] [data-call-stage=idle],.web-call-page[data-call-state=connecting] [data-call-stage=connecting],.web-call-page[data-call-state=ringing] [data-call-stage=connecting],.web-call-page[data-call-state=connected] [data-call-stage=connected],.web-call-page[data-call-state=ended] [data-call-stage=ended]{display:flex}
.web-call-stage--idle{color:#fff;background:linear-gradient(145deg,#0b1729,#18345c)}.web-call-orbit{position:relative;display:grid;place-items:center;width:180px;height:180px;margin:8px 0 34px;border:1px solid rgb(255 255 255/.18);border-radius:50%}.web-call-orbit::before,.web-call-orbit::after{position:absolute;content:'';border:1px solid rgb(255 100 20/.42);border-radius:50%;inset:18px;animation:web-call-spin 7s linear infinite}.web-call-orbit::after{inset:-15px 35px;animation-direction:reverse}.web-call-orbit span{position:absolute;width:10px;height:10px;border-radius:50%;background:#ff6414;box-shadow:0 0 18px #ff6414;animation:web-call-dot 3.5s ease-in-out infinite}.web-call-orbit span:first-child{top:8px;left:82px}.web-call-orbit span:nth-child(2){right:5px;bottom:44px;animation-delay:-1.4s}.web-call-orbit svg{width:72px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.web-call-status{min-height:34px;margin:0 0 18px;color:#d8e2f0;font-weight:700}
.web-call-agent{position:relative;display:flex;align-items:flex-end;justify-content:center;width:280px;height:270px;margin-bottom:26px;border-radius:36% 36% 18% 18%;background:radial-gradient(circle at 50% 65%,#fff1e9,transparent 64%)}.web-call-agent img{position:relative;z-index:1;width:auto;max-width:100%;height:100%;object-fit:contain}.web-call-agent__pulse{position:absolute;width:150px;height:150px;top:45px;border:2px solid rgb(255 90 10/.45);border-radius:50%;animation:web-call-pulse 1.8s ease-out infinite}.web-call-stage h2{margin:0 0 10px;font-size:28px}.web-call-stage>p{max-width:430px;margin:0;color:#526078;font-size:16px;line-height:1.55}.web-call-stage--connecting::after{content:'';width:48px;height:5px;margin-top:26px;border-radius:999px;background:linear-gradient(90deg,#ff5a0a 0 33%,#ffd0b8 33% 66%,#ffe9de 66%);background-size:300% 100%;animation:web-call-loading 1.2s linear infinite}
.web-call-timer{margin:0 0 8px;font:800 30px/1 monospace}.web-call-agent--small{width:112px;height:118px;margin:12px 0 8px}.web-call-dial-display{min-height:27px;margin:2px 0 12px;color:#526078;font:700 16px/1.4 monospace;letter-spacing:.08em}.web-call-keypad{display:grid;grid-template-columns:repeat(3,64px);gap:10px 18px;margin-bottom:20px}.web-call-keypad button{display:flex;align-items:center;flex-direction:column;justify-content:center;width:64px;height:58px;border:1px solid #dbe2ec;border-radius:50%;color:#12213a;background:#f8fafc;box-shadow:0 5px 14px rgb(15 23 42/.07);cursor:pointer}.web-call-keypad button:active{transform:scale(.94);background:#e8edf4}.web-call-keypad b{font-size:21px;line-height:1}.web-call-keypad small{min-height:9px;margin-top:3px;color:#78859a;font-size:7px;font-weight:800;letter-spacing:.12em}.web-call-controls{display:flex;gap:12px;align-items:flex-start}.web-call-controls button{display:flex;align-items:center;flex-direction:column;gap:6px;min-width:70px;border:0;color:#15243c;background:transparent;cursor:pointer}.web-call-controls span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #d7deea;border-radius:50%;background:#fff;font-size:19px;box-shadow:0 8px 20px rgb(15 23 42/.07)}.web-call-controls b{font-size:11px}.web-call-controls button[aria-pressed=true] span{color:#fff;background:#172b4d}.web-call-controls .is-end span{color:#fff;border-color:#e53328;background:#e53328;transform:rotate(135deg)}.web-call-main,.web-call-cancel{display:flex;align-items:center;justify-content:center;gap:12px;min-width:230px;min-height:56px;border:0;border-radius:16px;color:#fff;background:#ff5a0a;box-shadow:0 14px 34px rgb(255 90 10/.26);font-size:15px;font-weight:800;cursor:pointer}.web-call-cancel{min-width:190px;min-height:48px;margin-top:26px;background:#e53328;box-shadow:none}.web-call-main:disabled{cursor:wait;opacity:.65}
html[data-theme=dark] .web-call-console{border-color:#050b14;background:#111d2f}html[data-theme=dark] .web-call-stage--connecting,html[data-theme=dark] .web-call-stage--connected,html[data-theme=dark] .web-call-stage--ended{color:#f8fafc}html[data-theme=dark] .web-call-stage>p,html[data-theme=dark] .web-call-dial-display{color:#b9c4d4}html[data-theme=dark] .web-call-keypad button{color:#f8fafc;border-color:#33445e;background:#17243a}
@keyframes web-call-spin{to{transform:rotate(360deg)}}@keyframes web-call-dot{50%{transform:scale(1.6);opacity:.5}}@keyframes web-call-pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.45);opacity:0}}@keyframes web-call-loading{to{background-position:-300% 0}}
@media(max-width:820px){.web-call-page{padding:28px 16px 60px}.web-call-shell{grid-template-columns:1fr;gap:34px;padding:28px 20px;border-radius:22px}.web-call-copy h1{font-size:40px}.web-call-console{min-height:690px}.web-call-stage{min-height:672px}.web-call-agent{width:230px;height:230px}.web-call-agent--small{width:108px;height:112px}.web-call-controls{gap:8px}.web-call-controls button{min-width:68px}}
.web-call-stage>p.web-call-queue-position{margin-top:16px;padding:10px 18px;border:1px solid #ffd4bd;border-radius:14px;background:#fff1e9;color:#a63600;font-size:20px;font-weight:800;line-height:1.35}.web-call-queue-position[hidden]{display:none}html[data-theme=dark] .web-call-stage>p.web-call-queue-position{background:#392719;border-color:#775037;color:#ffbb94}
@media(prefers-reduced-motion:reduce){.web-call-orbit::before,.web-call-orbit::after,.web-call-orbit span,.web-call-agent__pulse,.web-call-stage--connecting::after{animation:none}}

/* Floating island and JiTech light phone home screen. */
.web-call-device-top {
  top: 15px;
  width: 112px;
  height: 29px;
  border-radius: 999px;
  background: #080d18;
  box-shadow: 0 3px 8px rgb(8 13 24 / .16);
}
.web-call-device-top span {
  top: 12px;
  left: 45%;
  width: 38px;
  height: 5px;
  background: #1d2c43;
}
.web-call-device-top::after {
  content: '';
  position: absolute;
  top: 11px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #243f60;
}
.web-call-stage--idle {
  position: relative;
  justify-content: flex-start;
  padding-top: 80px;
  padding-bottom: 46px;
  color: #15243c;
  background: #fff;
  isolation: isolate;
}
.web-call-stage--idle::before {
  content: none;
}
.web-call-mark-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.web-call-mark-field img {
  position: absolute;
  display: block;
  height: auto;
  animation: web-call-mark-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
  will-change: transform;
}
.web-call-mark-field img:nth-child(1) { top: 142px; left: 29%; width: 160px; opacity: .36; --angle: -14deg; --angle-end: 4deg; --move-x: 17px; --move-y: -22px; --float-duration: 7.2s; --float-delay: -2.1s; }
.web-call-mark-field img:nth-child(2) { top: 90px; left: -22px; width: 108px; opacity: .18; --angle: 28deg; --angle-end: 43deg; --move-x: 13px; --move-y: 20px; --float-duration: 5.8s; --float-delay: -3.4s; }
.web-call-mark-field img:nth-child(3) { top: 111px; right: -28px; width: 84px; opacity: .24; --angle: -39deg; --angle-end: -24deg; --move-x: -15px; --move-y: 26px; --float-duration: 8.4s; --float-delay: -1.2s; }
.web-call-mark-field img:nth-child(4) { top: 340px; left: 30px; width: 66px; opacity: .22; --angle: 104deg; --angle-end: 89deg; --move-x: 20px; --move-y: -17px; --float-duration: 6.6s; --float-delay: -4.8s; }
.web-call-mark-field img:nth-child(5) { bottom: 153px; left: -23px; width: 105px; opacity: .16; --angle: 31deg; --angle-end: 11deg; --move-x: 15px; --move-y: -24px; --float-duration: 9s; --float-delay: -3s; }
.web-call-mark-field img:nth-child(6) { bottom: 186px; right: 11px; width: 96px; opacity: .2; --angle: 148deg; --angle-end: 164deg; --move-x: -16px; --move-y: 15px; --float-duration: 7.8s; --float-delay: -5.3s; }
@keyframes web-call-mark-float {
  from { transform: translate3d(0, 0, 0) rotate(var(--angle)); }
  to { transform: translate3d(var(--move-x), var(--move-y), 0) rotate(var(--angle-end)); }
}
.web-call-stage--idle .web-call-status {
  margin-top: auto;
  margin-bottom: 0;
  color: #526078;
}
.web-call-stage--idle .web-call-main {
  width: min(100%, 270px);
  margin-top: 18px;
  background: #16a34a;
  box-shadow: 0 14px 32px rgb(22 163 74 / .24);
  animation: web-call-cta-float 2.5s ease-in-out infinite;
}
.web-call-stage--idle .web-call-main:hover { background: #15803d; animation-play-state: paused; transform: translateY(-3px); }
.web-call-stage--idle .web-call-main:active { animation: none; transform: translateY(1px); }
.web-call-stage--idle .web-call-main:focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }
@keyframes web-call-cta-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 14px 32px rgb(22 163 74 / .24); }
  50% { transform: translateY(-5px); box-shadow: 0 19px 36px rgb(22 163 74 / .3); }
}
html[data-theme=dark] .web-call-stage--idle {
  color: #e6eef8;
  background: radial-gradient(circle at 58% 39%, #203a35 0, #132237 43%, #091421 100%);
}
html[data-theme=dark] .web-call-stage--idle .web-call-status { color: #d1dceb; }
html[data-theme=dark] .web-call-stage--idle .web-call-mark-field img { filter: saturate(.8) brightness(1.3); }
html[data-theme=dark] .web-call-device-top { box-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 3px 8px rgb(0 0 0 / .3); }
@media(max-width:820px) {
  .web-call-stage--idle { padding-top: 74px; padding-bottom: 38px; }
}
@media(prefers-reduced-motion:reduce) {
  .web-call-stage--idle .web-call-main { animation: none; }
  .web-call-mark-field img { animation: none; transform: rotate(var(--angle)); will-change: auto; }
}

/* Keep the phone proportional to a real mobile viewport, including the in-call keypad. */
@media (max-width: 600px) {
  .web-call-page { padding: 20px 12px 44px; }
  .web-call-back { margin-bottom: 16px; }
  .web-call-shell { gap: 24px; padding: 22px 14px; }
  .web-call-copy h1 { font-size: clamp(30px, 9vw, 38px); }
  .web-call-console { width: min(100%, 360px); height: clamp(540px, 72svh, 620px); min-height: 0; border-width: 7px; border-radius: 38px; }
  .web-call-stage { height: 100%; min-height: 0; padding: 55px 17px 20px; }
  .web-call-stage--idle { padding-top: 66px; padding-bottom: 28px; }
  .web-call-device-top { top: 10px; width: 102px; height: 25px; }
  .web-call-device-top span { top: 10px; }
  .web-call-device-top::after { top: 9px; }
  .web-call-agent { width: 176px; height: 170px; margin-bottom: 18px; }
  .web-call-stage h2 { font-size: 23px; }
  .web-call-stage > p { font-size: 14px; }
  .web-call-stage--connected { justify-content: flex-start; padding-top: 54px; }
  .web-call-timer { font-size: 24px; margin-bottom: 5px; }
  .web-call-agent--small { width: 72px; height: 76px; margin: 6px 0 3px; }
  .web-call-dial-display { min-height: 18px; margin: 0 0 5px; font-size: 13px; }
  .web-call-keypad { grid-template-columns: repeat(3, 56px); gap: 6px 14px; margin-bottom: 9px; }
  .web-call-keypad button { width: 56px; height: 44px; }
  .web-call-keypad b { font-size: 18px; }
  .web-call-controls { gap: 5px; }
  .web-call-controls button { min-width: 62px; gap: 3px; }
  .web-call-controls span { width: 43px; height: 43px; font-size: 16px; }
  .web-call-controls b { font-size: 10px; }
  .web-call-main { min-height: 50px; }
  .web-call-mark-field img:nth-child(1) { top: 105px; width: 130px; }
  .web-call-mark-field img:nth-child(4) { top: 260px; }
}