/* Device is the visual anchor; two smaller cards cross its side edges. */
.voice-phone-scene {
  container-type: inline-size;
  --voice-art-scale: 1;
  display: block;
  width: min(100%, 640px);
  padding: 0;
  margin: 0 auto;
  isolation: isolate;
}
.voice-hero-stage { position: relative; width: 100%; height: calc(575px * var(--voice-art-scale)); overflow: visible; clip-path: inset(0 -32px); }
.voice-hero-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 640px;
  height: 575px;
  transform: translateX(-50%) scale(var(--voice-art-scale));
  transform-origin: top center;
}
.voice-hero-canvas::after { content: ''; position: absolute; left: 150px; right: 20px; bottom: 0; height: 70px; background: linear-gradient(#fcfbf700, #fcfbf7 85%); pointer-events: none; z-index: 4; }
.voice-phone-scene .voice-phone,
.voice-phone-scene[data-call-phase="connected"] .voice-phone {
  position: absolute;
  left: 235px;
  top: 66px;
  width: 286px;
  height: 580px;
  transform: scale(.96);
  transform-origin: top left;
  box-shadow: 8px 23px 30px #142d5722;
  mask-image: linear-gradient(to bottom, #000 0%, #000 77%, transparent 96%);
  z-index: 1;
}
.voice-hero-routing { position: absolute; left: 42px; top: 254px; width: 258px; padding: 19px 21px; background: #fff; transform: rotate(-5deg); border-radius: 13px; box-shadow: 0 16px 32px -17px #17385e55; z-index: 3; color: #18385f; }
.voice-hero-routing__label { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #526d90; }
.voice-hero-routing__label svg { width: 16px; height: 16px; color: #2f6ee9; }
.voice-hero-routing > strong { display: block; min-height: 44px; margin: 14px 0 12px; font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -.02em; }
.voice-hero-route { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; line-height: 1.5; padding-top: 13px; border-top: 1px solid #e8eef7; color: #526d90; }
.voice-hero-route > span, .voice-hero-route > b { max-width: 90px; }
.voice-hero-route svg { width: 16px; height: 16px; flex: none; color: #829bc1; }
.voice-hero-route b { font-size: 10px; font-weight: 500; color: #255abb; }
.voice-phone-scene .voice-call-toast { left: 458px; right: auto; top: 150px; width: 186px; min-height: 124px; padding: 17px 15px; gap: 11px; border-radius: 12px; box-shadow: 0 14px 29px -16px #17385e55; }
.voice-phone-scene .voice-hero-canvas .voice-call-toast { opacity: 1; visibility: visible; transform: none; transition: none; }
.voice-phone-scene .voice-call-toast { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: minmax(27px, auto) 30px minmax(15px, auto); align-content: center; row-gap: 4px; }
.voice-phone-scene .voice-call-toast > div { display: contents; }
.voice-phone-scene .voice-call-toast__icon { grid-column: 1; grid-row: 2; align-self: center; width: 30px; height: 30px; border-radius: 50%; background: #c7e981; color: #36531f; }
.voice-phone-scene .voice-call-toast [data-voice-toast-status] { grid-column: 2; grid-row: 1; }
.voice-phone-scene .voice-call-toast [data-voice-toast-city] { grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
.voice-phone-scene .voice-call-toast [data-voice-toast-detail] { grid-column: 2; grid-row: 3; margin: 0; }
.voice-phone-scene .voice-call-toast div > span { min-height: 27px; margin: 0; font-size: 10px; line-height: 13.5px; color: #526d90; }
.voice-phone-scene .voice-call-toast strong { font-size: 20px; line-height: 24px; font-weight: 500; margin-top: 4px; color: #18385f; letter-spacing: -.02em; }
.voice-phone-scene .voice-call-toast small { display: block; font-size: 10px; line-height: 15px; margin-top: 5px; color: #526d90; }
.voice-hero-tag { position: absolute; top: 103px; left: 73px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; background: #eef4ff; border-radius: 20px; font-size: 10px; line-height: 1.5; color: #315d9e; transform: rotate(-5deg); }
.voice-hero-tag i { display: block; width: 5px; height: 5px; background: #2f6ee9; border-radius: 50%; }
.voice-hero-routing, .voice-hero-tag { opacity: var(--call-content-opacity, 1); }
.voice-phone-scene figcaption { position: relative; inset: auto; justify-self: start; display: flex; align-items: center; justify-content: center; width: min(350px, calc(100% - 64px)); margin: 20px 0 0 calc(50% + 52px * var(--voice-art-scale)); transform: translateX(-50%); gap: 8px 16px; color: #63748d; font-size: 10px; line-height: 1.6; }
.voice-phone-scene figcaption button { min-height: 32px; padding: 6px; font-size: 10px; }
/* Match the device's visible centre, rather than its faded lower extent, to the copy. */
@media (min-width: 1121px) { .voice-phone-scene { translate: 0 -28px; } }
@container (max-width: 620px) { .voice-hero-stage, .voice-phone-scene figcaption { --voice-art-scale: .9; } }
@container (max-width: 550px) { .voice-hero-stage, .voice-phone-scene figcaption { --voice-art-scale: .82; } }
@container (max-width: 480px) { .voice-hero-stage, .voice-phone-scene figcaption { --voice-art-scale: .72; } }
@container (max-width: 410px) { .voice-hero-stage, .voice-phone-scene figcaption { --voice-art-scale: .62; } .voice-phone-scene .voice-call-toast { left: 430px; top: 130px; } }
@container (max-width: 360px) { .voice-hero-stage, .voice-phone-scene figcaption { --voice-art-scale: .54; } }
@container (max-width: 310px) { .voice-hero-stage, .voice-phone-scene figcaption { --voice-art-scale: .46; } }
@media (prefers-reduced-motion: reduce) { .voice-hero-routing, .voice-hero-tag { opacity: 1; } }