/* Voizual homepage; scoped so shared agent links and admin previews stay intact. */
/* One container for every band of the site's pages (header, hero, sections, footer, the directory and profiles):
   content in a centred 1240px column, and below that the same gutter everywhere. Used as padding-inline on
   full-width bands, so its percentages resolve against the page width. */
:root { --vz-max: 1240px; --vz-gutter: 5%; --vz-inline: max(var(--vz-gutter), calc((100% - var(--vz-max)) / 2)); }
@media (max-width: 600px) { :root { --vz-gutter: 20px; } }
body.voizual-home { background: #0b1019; color: #f6f7ff; font-family: 'IBM Plex Sans', sans-serif; --blue: #655bff; --gold: #665cff; --gold-dark: #5145e6; }
body.voizual-home.in-call { overflow: auto; }
.voizual-home a { text-decoration: none; }
.voizual-home button:focus-visible, .voizual-home a:focus-visible { outline: 3px solid #a7a2ff; outline-offset: 5px; }
.vz-scene { min-height: max(820px, 90dvh); background: linear-gradient(90deg, rgba(5,10,17,.72), rgba(5,10,17,.27) 65%, rgba(5,10,17,.12)), url('/static/brand/voizual-office.webp') center bottom / cover; }
/* layers: page 0, header (and its menu) 40, a call, the text chat and the post-call cards 50+, the rating 55,
   the cookie banner 60, the language list 70 */
.vz-header { position: relative; z-index: 40; height: 108px; padding: 0 var(--vz-inline); display: flex; align-items: center; justify-content: space-between; gap: 25px; }
/* .vz-logo comes from brand.css, shared with the admin sidebar. */
.vz-header nav { display: flex; align-items: center; gap: 34px; }
.vz-header nav a { color: #e6e8f2; font-size: 15px; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.vz-header nav a:hover { color: #fff; border-bottom-color: #a7a2ff; }
.vz-account { display: flex; gap: 22px; align-items: center; }
.vz-account a { color: #e6e8f2; font-size: 15px; }
.vz-account a:hover { color: #fff; }
.vz-account a.vz-cta { color: #fff; padding: 13px 22px; border-radius: 12px; background: var(--vz-brand); box-shadow: var(--vz-brand-lift); font-weight: 600; transition: filter .15s, transform .15s; }
.vz-account a.vz-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vz-hero { padding: 55px var(--vz-inline) 130px; }
.vz-copy { max-width: min(840px, calc(100vw - 475px)); }
/* one eyebrow style across the site: small caps in the brand's light violet (brand violet on light surfaces) */
.vz-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #b1adff; margin: 0 0 18px; }
.vz-copy h1 { font-size: clamp(42px,4.4vw,72px); letter-spacing: -2.8px; line-height: 1.06; font-weight: 600; }
.vz-copy h1 em { font-style: normal; background: linear-gradient(100deg,#92b7ff,#b8a0ff 55%,#83a8ff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.vz-description { font-size: clamp(17px,1.43vw,22px); line-height: 1.5; color: #d3d7e3; max-width: 605px; margin: 27px 0; }
.vz-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.vz-primary, .vz-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 60px; border-radius: 999px; padding: 0 28px; font: inherit; font-size: 17px; font-weight: 600; color: #fff; border: 1px solid #66708470; background: #151a2360; cursor: pointer; transition: filter .15s, background .15s, border-color .15s; }
.vz-primary { background: linear-gradient(115deg,#6979ff,#5545ff); border-color: transparent; box-shadow: 0 5px 25px #5f58ff40; }
.vz-primary:hover { filter: brightness(1.13); }
.vz-secondary:hover { background: #ffffff15; border-color: #a7a2ff88; }
.vz-actions > * > span[aria-hidden="true"] { font-size: 23px; line-height: 1; }
.vz-assurance { font-size: 13px; color: #b3b9cb; margin: 16px 0 0; }
.vz-primary { font-weight: 600; }
.vz-secondary { background: #0b101960; backdrop-filter: blur(6px); }
.vz-secondary .vz-mic { margin-right: -4px; }
/* starter questions: each one opens the text chat with that question, no microphone involved */
.vz-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; max-width: 640px; }
.vz-starters-label { width: 100%; font-size: 12px; letter-spacing: .4px; color: #a8afc1; }
.vz-starter { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; border: 1px solid #ffffff2a; background: #0f1520a8; color: #eef0f8; font: inherit; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.vz-starter span { color: #a7a2ff; font-size: 18px; line-height: 1; }
.vz-starter:hover { background: #1a2131d9; border-color: #a7a2ff66; transform: translateY(-1px); }
.voizual-home #screen-start { position: fixed; z-index: 10; inset: auto 3% 30px auto; width: 320px; height: 470px; min-height: 0; padding: 0; border-radius: 34px; background: #131720; border: 1px solid #d5d7ffab; box-shadow: 0 0 0 1px #ffffff15, 0 15px 40px #0008, 0 8px 25px #797aff55; transition: width .35s, height .35s; }
.voizual-home #screen-start .start-brand, .voizual-home #screen-start .lede { display: none; }
.voizual-home #screen-start .start-body { max-width: none; width: 100%; gap: 0; margin: 0; justify-content: flex-end; padding: 24px; border-radius: inherit; overflow: hidden; position: relative; isolation: isolate; }
.voizual-home #screen-start .start-body::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,#090e17ee 76%); z-index: -1; pointer-events: none; }
.voizual-home #screen-start .portrait-wrap { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #192030; z-index: -2; }
.vz-portrait-button { width: 100%; height: 100%; padding: 0; border: 0; background: none; position: relative; }
.voizual-home #startPortrait { object-position: center 20%; animation: vz-breathe 8s ease-in-out infinite alternate; }
.voizual-home #startName { color: white; font-size: 22px; text-align: left; width: 100%; margin-bottom: 5px; }
.vz-ready { display: flex; gap: 9px; align-items: center; font-size: 14px; margin: 0 0 13px; width: 100%; }
.vz-ready span { width: 11px; height: 11px; background: #22e985; border-radius: 50%; box-shadow: 0 0 14px #22e98577; }
.voizual-home #startCall { width: 100%; justify-content: center; font-size: 18px; padding: 15px 10px; background: linear-gradient(120deg,#637eff,#5541ff); box-shadow: 0 4px 25px #6456ff55; font-weight: 400; margin: 0; }
.voizual-home #startNote { display: block; color: #dddfea; margin-top: 8px; font-size: 12px; }
.voizual-home #startError { background: #301726; color: #ffd4d9; padding: 9px; margin-top: 8px; }
.vz-type { background: none; border: 0; color: #c9cce0; padding: 9px 10px 0; font-size: 12px; text-decoration: underline; text-decoration-color: #c9cce066; text-underline-offset: 3px; cursor: pointer; transition: color .18s, text-decoration-color .18s, text-underline-offset .18s, text-shadow .18s; }
.vz-type:hover, .vz-type:focus-visible { color: #fff; text-decoration-color: #a7a2ff; text-underline-offset: 5px; text-shadow: 0 0 12px #8d86ffaa; }
.vz-dismiss { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; background: #111722aa; color: #fff; border: 1px solid #ffffff20; border-radius: 50%; backdrop-filter: blur(8px); }
.vz-bubble { pointer-events: none; position: absolute; right: -8px; top: -110px; width: 208px; background: #f4f4ff; color: #151b2a; border-radius: 26px; padding: 19px 21px; box-shadow: 0 5px 35px #999bff22; font-size: 14px; line-height: 1.4; }
.vz-bubble::after { content: ''; position: absolute; bottom: -15px; right: 42px; border: 10px solid transparent; border-top-color: #f4f4ff; border-left-color: #f4f4ff; }
.vz-bubble strong { display: block; font-weight: 400; margin-bottom: 4px; }
.voizual-home #screen-start.minimized { width: 220px; height: 80px; border-radius: 24px; }
.voizual-home #screen-start.minimized .vz-bubble, .voizual-home #screen-start.minimized .portrait-wrap, .voizual-home #screen-start.minimized #startName, .voizual-home #screen-start.minimized .vz-ready, .voizual-home #screen-start.minimized .vz-type, .voizual-home #screen-start.minimized #startNote { display: none; }
.voizual-home #screen-start.minimized .start-body { padding: 16px 35px 16px 10px; }
.voizual-home #screen-start.minimized #startCall { font-size: 14px; }
/* scrolls away with the header instead of floating over the page; the header's menu opens above it */
.voizual-home .lang-picker { position: absolute; top: 115px; right: var(--vz-inline); background: #171d2cbf; border-color: #ffffff25; color: #dfe3ff; }
.voizual-home #screen-call { position: fixed; z-index: 50; right: 3%; bottom: 25px; width: 390px; height: min(730px,calc(100dvh - 135px)); min-height: 0; background: #0d1420f5; border: 1px solid #b3b9e0; border-radius: 22px; box-shadow: 0 0 0 3px #ffffff08,0 20px 70px #0009,0 0 25px #8a9bff30; overflow: hidden; animation: vz-expand .42s cubic-bezier(.2,.8,.2,1); transform-origin: bottom right; }
.vz-call-chrome { height: 53px; flex: 0 0 53px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #ffffff15; }
.vz-call-chrome .vz-logo { --logo-h: 22px; }
/* the company's logo (or name) at the top of the call window and the chat, and "Powered by Voizual" beside it */
.vz-chrome-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vz-chrome-brand .vz-logo img { max-width: 140px; object-fit: contain; }
/* a company's logo is usually made for a white page: it sits on a light tile, as on the company's own page */
.vz-chrome-brand .vz-logo img.vz-company-logo { box-sizing: content-box; padding: 5px 9px; border-radius: 8px; background: #fff; }
.vz-chrome-brand .vz-logo img.vz-company-logo.bare { padding: 5px 0; background: none; }   /* reads on the dark as it is */
.vz-brand-name { font-size: 15px; font-weight: 600; color: #f2f4fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-powered { font-size: 11px; color: #a0a8be; white-space: nowrap; }
.vz-powered a { color: #dfe3ff; font-weight: 600; text-decoration: underline; text-decoration-color: #dfe3ff55; text-underline-offset: 2px; }
.vz-powered a:hover { color: #fff; text-decoration-color: #a7a2ff; }
.vz-call-tools { display: flex; gap: 6px; }
.vz-call-chrome button { background: #ffffff0f; color: #dfe3f1; border: 1px solid #ffffff14; border-radius: 50%; width: 36px; height: 36px; }
body.voizual-home #screen-call .call-layout { display: block; padding: 0; width: 100%; height: auto; flex: 1; min-height: 0; }
body.voizual-home #screen-call .stage { width: 100%; height: 100%; max-height: none; border-radius: 0; --stage-radius: 0px; box-shadow: none; }
.voizual-home .stage-top { text-align: left; padding: 14px 20px 40px; }
.voizual-home .stage-name { font-size: 19px; }
.voizual-home .stage-status { font-size: 12px; }
.voizual-home .stage.idle .controls, .voizual-home .stage.idle .stage-top { opacity: 1; }
.voizual-home .controls { gap: 18px; padding: 18px 12px; }
/* One size for every control, End included, each in an equal-width column so icons and labels line up
   whatever the label's length. */
.voizual-home .controls { align-items: flex-start; justify-content: center; }
.voizual-home .ctl { flex: 0 0 56px; width: 56px; gap: 6px; }
.voizual-home .ctl .ico, .voizual-home .ctl.end .ico { width: 50px; height: 50px; }
.voizual-home .ctl .ico::after { width: 22px; height: 22px; }
.voizual-home .ctl-label { font-size: 10px; line-height: 1.2; white-space: nowrap; text-align: center; }
@media (max-width: 850px) {
  .voizual-home .ctl { flex-basis: 50px; width: 50px; }
  .voizual-home .ctl .ico, .voizual-home .ctl.end .ico { width: 44px; height: 44px; }
  .voizual-home .ctl .ico::after { width: 20px; height: 20px; }
}
/* The Chat control is a .ctl like the others (public.css); only its icon is its own. */
.ico-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H9.5L4.6 21.6A1 1 0 0 1 3 20.8V7a4 4 0 0 1 3-4z'/%3E%3C/svg%3E"); }
/* Every control answers the pointer the same way; hanging up glows red. */
.voizual-home .ctl .ico { transition: background .18s, transform .18s, box-shadow .18s; }
.voizual-home .ctl:hover .ico { background: rgba(255,255,255,.36); transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 18px #0006; }
.voizual-home .ctl[aria-pressed="true"]:not(.end):hover .ico, .voizual-home #langBtn[aria-expanded="true"]:hover .ico { background: #fff; }
.voizual-home .ctl.end:hover .ico { background: #ff5a5a; box-shadow: 0 0 0 4px #ef444433, 0 6px 24px #ef444499; }
.voizual-home .ctl:active .ico { transform: scale(.94); box-shadow: none; }
.vz-connecting { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 50% 26%,#232544 0,#101722 57%); display: flex; align-items: center; flex-direction: column; padding: 65px 28px 100px; text-align: center; }
.stage.live .vz-connecting { opacity: 0; pointer-events: none; }
.vz-orbit { width: 158px; height: 158px; border: 3px solid #7876ff; border-radius: 50%; padding: 4px; box-shadow: 0 0 30px #514eff66; position: relative; margin-bottom: 36px; }
.vz-orbit::before,.vz-orbit::after { content: ''; position: absolute; inset: -17px; border: 1px solid #6863ff44; border-radius: 50%; animation: vz-ring 2.5s ease-out infinite; }
.vz-orbit::after { inset: -33px; animation-delay: .7s; }
.vz-orbit img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.vz-connecting h2 { font-size: 21px; letter-spacing: -.5px; }
.vz-connecting p { color: #b5c1dc; font-size: 13px; }
.vz-connect-note { margin-top: auto; }
.voizual-home .stage:not(.live) .stage-top { visibility: hidden; }
.voizual-home .stage:not(.live) .controls { z-index: 3; background: none; }
.voizual-home .stage:not(.live) .controls > :not(.end) { visibility: hidden; }
.voizual-home .captions { bottom: 100px; }
.voizual-home .card-screen:not([hidden]) { position: fixed; inset: 0; z-index: 52; min-height: 0; overflow: auto; color: #182236; background: #050b17ac; backdrop-filter: blur(12px); }
.voizual-home .card-screen .start-brand { display: none; }
.voizual-home .card-screen .card { margin: auto; }
.voizual-home .btn.primary { color: #fff; box-shadow: 0 8px 20px #6357ff30; }
@keyframes vz-breathe { to { transform: scale(1.025); } }
@keyframes vz-ring { 0% { transform: scale(.92); opacity: .8; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes vz-expand { from { transform: translateY(15px) scale(.82); opacity: .2; } }
@media (min-width: 1500px) { .voizual-home #screen-start { width: 350px; height: 510px; } .vz-hero { padding-top: 65px; } }
@media (max-width: 1150px) { .vz-header nav { gap: 18px; } .vz-header nav a { font-size: 13px; } .vz-header { gap: 15px; } .vz-account a { padding: 12px 16px; font-size: 14px; } .vz-copy { max-width: calc(100vw - 420px); } .vz-copy h1 { font-size: 45px; } .vz-actions { gap: 10px; } .vz-primary,.vz-secondary { font-size: 15px; min-height: 54px; padding: 0 22px; } .vz-account { gap: 14px; } .vz-account a.vz-cta { padding: 11px 16px; font-size: 14px; } }
@media (max-width: 850px) { .vz-header nav { display: none; } .vz-hero { padding-top: 28px; padding-bottom: 55px; } .vz-copy { max-width: none; } .vz-copy h1 { font-size: clamp(38px,7.5vw,62px); letter-spacing: -1.8px; } .vz-description { max-width: 570px; } .vz-scene { min-height: 760px; padding-bottom: 410px; } .voizual-home #screen-start { position: absolute; top: 650px; bottom: auto; right: 5%; width: 285px; height: 380px; } .vz-bubble { right: 305px; top: 65px; width: 200px; } .vz-bubble::after { right: -15px; top: 30px; bottom: auto; transform: rotate(-90deg); } .voizual-home .lang-picker { top: 110px; } .voizual-home #screen-call { right: 16px; bottom: 16px; height: min(730px,calc(100dvh - 32px)); } }
@media (max-width: 540px) { .vz-header { height: 86px; } .vz-logo { --logo-h: 32px; } .vz-account a:first-child { display: none; } .vz-account a.vz-cta { padding: 10px 15px; font-size: 12px; } .vz-hero { padding: 55px var(--vz-inline) 40px; } .vz-eyebrow { font-size: 11px; } .vz-description { font-size: 16px; } .vz-actions { align-items: stretch; } .vz-actions > .vz-primary, .vz-actions > .vz-secondary { flex: 1 1 100%; } .vz-primary,.vz-secondary { min-height: 54px; padding: 0 18px; font-size: 15px; gap: 10px; } .vz-assurance { font-size: 12px; text-align: center; } .vz-scene { padding-bottom: 440px; } .voizual-home #screen-start { top: 720px; width: calc(100% - 44px); max-width: 340px; height: 385px; right: 22px; } .vz-bubble { top: -70px; right: 0; width: 235px; padding: 13px 17px; font-size: 12px; } .vz-bubble::after { top: auto; bottom: -15px; right: 30px; transform: none; } .voizual-home #screen-call { width: calc(100% - 20px); right: 10px; bottom: 10px; height: calc(100dvh - 20px); } .vz-connecting { padding-top: 50px; } .vz-starters { margin-top: 24px; } .vz-starter { font-size: 12px; padding: 9px 13px; } }
@media (max-height: 730px) and (min-width: 851px) { .voizual-home #screen-start { height: 390px; width: 280px; bottom: 18px; } .voizual-home #screen-call { height: calc(100dvh - 32px); bottom: 16px; } .vz-connecting { padding-top: 35px; } .vz-orbit { width: 125px; height: 125px; margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .voizual-home *, .voizual-home *::before, .voizual-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.vz-mic { width: 20px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.voizual-home #startCall { font-size: 16px; white-space: nowrap; }
@media (max-width: 850px) {
  .vz-scene { padding-bottom: 1px; }
  .voizual-home #screen-start { position: relative; inset: auto; margin: 40px 5% 45px auto; }
}
@media (max-width: 540px) {
  .voizual-home #screen-start { margin: 55px 22px 40px auto; }
}


.voizual-home .stage:not(.live) .controls > :not(.end) { display: none; }
.vz-call-chrome { background: #121925; }
.voizual-home #screen-call .stage { background: #000; }
.voizual-home #screen-call .stage::before { display: none; }
/* the video fades in once it has been measured and placed, so nothing jumps into position */
.voizual-home #screen-call .stage video { opacity: 0; transition: opacity .45s ease; }
.voizual-home #screen-call .stage.live video { opacity: 1; }
.voizual-home .vz-connecting { transition: opacity .4s ease, visibility .4s; }
.voizual-home .stage.live .vz-connecting { visibility: hidden; }

/* Compact invitation and call frames; the travelling edge light is .vz-edge-glow from brand.css,
   added by home.js so named-agent pages keep their plain frames. */
.voizual-home #screen-start,
.voizual-home #screen-call {
  overflow: visible;
  transition: width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
  box-shadow: 0 18px 55px #0008, 0 0 18px #7778ff40, 0 8px 32px #587aff30;
}
.voizual-home #screen-start {
  width: 240px;
  height: 340px;
  border-radius: 28px;
}
.voizual-home #screen-start .start-body { padding: 18px; transition: padding .55s ease; }
.voizual-home #startName { font-size: 18px; }
.voizual-home #startCall { font-size: 14px; padding: 12px 8px; gap: 7px; white-space: normal; }
.voizual-home .vz-ready { font-size: 12px; margin-bottom: 10px; }
.voizual-home .vz-bubble {
  top: auto;
  bottom: calc(100% + 22px);
  right: 0;
  width: 250px;
  padding: 16px 18px;
  border-radius: 24px;
  font-size: 13px;
  z-index: 9;
}
.voizual-home .vz-bubble::after { top: auto; bottom: -15px; right: 32px; transform: none; }
/* One line at a time: the bubble drops away before the next sentence floats up in its place. */
.vz-bubble { transform-origin: 85% 100%; }
.vz-bubble.leaving { animation: vz-bubble-out .2s ease-in forwards; }
.vz-bubble.arriving { animation: vz-bubble-in .45s cubic-bezier(.22,1.2,.4,1) backwards; }
@keyframes vz-bubble-out { to { opacity: 0; transform: translateY(6px) scale(.94); } }
@keyframes vz-bubble-in { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .vz-bubble.leaving, .vz-bubble.arriving { animation: none; } }
.voizual-home .vz-dismiss {
  opacity: 0;
  pointer-events: none;
  transform: scale(.85);
  transition: opacity .2s ease, transform .25s ease;
}
.voizual-home #screen-start:focus-within .vz-dismiss {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.voizual-home #screen-call { width: 390px; height: min(650px, calc(100dvh - 190px)); }
.voizual-home #screen-call .vz-call-chrome { border-radius: 22px 22px 0 0; }
.voizual-home #screen-call .call-layout { overflow: hidden; border-radius: 0 0 22px 22px; }
.voizual-home .vz-connecting { padding: 30px 22px 95px; justify-content: center; }
/* the face is what the visitor is waiting for: large, as large as the window's height allows */
.voizual-home .vz-orbit { width: min(230px, 60%, 36dvh); height: auto; aspect-ratio: 1; margin-bottom: 40px; flex-shrink: 0; }
.voizual-home .vz-connecting h2 { font-size: 18px; }
/* connection progress: pending (empty ring), under way (spinning arc), done (filled tick) */
.voizual-home .vz-steps { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.voizual-home .vz-steps li { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: #7f8aa6; transition: color .3s ease; }
.voizual-home .vz-steps li::before {
  content: ''; flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid #4c5673; display: grid; place-items: center; font-size: 11px; line-height: 1; color: #fff;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.voizual-home .vz-steps li.active { color: #e6e9f5; }
.voizual-home .vz-steps li.active::before { border-color: #7876ff33; border-top-color: #8d86ff; animation: vz-step-spin .8s linear infinite; }
.voizual-home .vz-steps li.done { color: #c6ccdf; }
.voizual-home .vz-steps li.done::before { content: '✓'; background: #6370ff; border-color: #6370ff; box-shadow: 0 0 10px #6370ff88; animation: vz-step-pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes vz-step-spin { to { transform: rotate(360deg); } }
@keyframes vz-step-pop { from { transform: scale(.4); } }
@media (max-height: 600px) { .voizual-home .vz-steps { display: none; } }

/* ---- a call that was never answered: grey photo, hung-up badge, the failed step crossed out ---- */
.voizual-home .vz-orbit img { transition: filter .6s ease; }
.voizual-home .vz-call-failed .vz-orbit { border-color: #4a5063; box-shadow: none; }
.voizual-home .vz-call-failed .vz-orbit::before, .voizual-home .vz-call-failed .vz-orbit::after { animation: none; opacity: .35; border-color: #ffffff1c; transform: none; }
.voizual-home .vz-call-failed .vz-orbit img { filter: grayscale(1) brightness(.62) contrast(1.05); }
.vz-fail-badge {
  position: absolute; right: 2%; bottom: 2%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #ef4444; color: #fff;
  box-shadow: 0 0 0 4px #101722, 0 8px 24px #ef444466;
  opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.vz-fail-badge svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voizual-home .vz-call-failed .vz-fail-badge { opacity: 1; transform: none; transition-delay: .15s; }
.voizual-home .vz-call-failed .vz-connecting h2 { color: #fff; }
.voizual-home .vz-steps li.failed { color: #ffb3b3; }
.voizual-home .vz-steps li.failed::before { content: '✕'; background: #ef4444; border-color: #ef4444; animation: vz-step-pop .35s cubic-bezier(.34,1.56,.64,1); }
.voizual-home .vz-call-failed .controls { display: none; }
.vz-fail-actions { display: none; gap: 10px; margin-top: 20px; }
.voizual-home .vz-call-failed .vz-fail-actions { display: flex; }
.vz-fail-actions button, .vz-fail-actions a { border-radius: 22px; padding: 11px 22px; font: inherit; font-size: 14px; cursor: pointer; transition: filter .15s, background .15s, transform .15s, box-shadow .2s; }
.vz-fail-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.vz-fail-actions [hidden] { display: none; }
.vz-fail-actions button:active { transform: scale(.95); }
.vz-retry { border: 0; color: #fff; background: linear-gradient(120deg, #6979ff, #5545ff); box-shadow: 0 6px 20px #5f58ff55; }
.vz-retry:hover { filter: brightness(1.12); box-shadow: 0 0 22px #6f66ffaa; }
.vz-fail-close { border: 1px solid #ffffff26; color: #dfe3f1; background: #ffffff0d; }
.vz-fail-close:hover { background: #ffffff1f; color: #fff; }
@media (prefers-reduced-motion: reduce) { .vz-fail-badge { transition: none; } }
.voizual-home .vz-connect-note { display: none; }
.voizual-home .controls { gap: 10px; }
@media (max-width: 850px) { .voizual-home .controls { gap: 4px; padding-inline: 8px; } }
@media (hover: hover) and (pointer: fine) {
  .voizual-home #screen-start:hover .vz-dismiss { opacity: 1; pointer-events: auto; transform: scale(1); }
}
@media (min-width: 851px) and (hover: hover) and (pointer: fine) {
  .voizual-home #screen-start:not(.minimized):hover,
  .voizual-home #screen-start:not(.minimized):has(:focus-visible) {
    width: 320px;
    height: min(450px, calc(100dvh - 200px));
    box-shadow: 0 24px 70px #0009, 0 0 28px #7778ff66, 0 12px 45px #587aff50;
  }
  .voizual-home #screen-start:not(.minimized):hover .start-body { padding: 24px; }
}
@media (max-width: 850px) {
  .voizual-home #screen-start { width: min(240px, calc(100% - 44px)); height: 340px; margin: 120px 22px 40px auto; }
  .voizual-home #screen-call { width: min(300px, calc(100% - 32px)); height: min(500px, calc(100dvh - 180px)); right: 16px; bottom: 16px; }
  .voizual-home .vz-bubble { font-size: 12px; padding: 14px 16px; }
}
@media (max-height: 600px) {
  .voizual-home #screen-call .vz-bubble { display: none; }
  .voizual-home #screen-call { height: calc(100dvh - 32px); }
  .voizual-home .vz-orbit { width: min(150px, 50%, 32dvh); margin-bottom: 28px; }
  .voizual-home .vz-connecting { padding-top: 22px; }
}

/* Online presence sits over the portrait; the closed invitation becomes a launcher. */
.voizual-home #startName { display: none; }
.voizual-home #screen-start .vz-ready {
  position: absolute;
  top: 18px;
  left: 18px;
  width: auto;
  margin: 0;
  gap: 10px;
  align-items: center;
  color: white;
  text-align: left;
  text-shadow: 0 1px 8px #000c;
  pointer-events: none;
}
/* Online: a lit green core with a soft rim, breathing, and a ring that pulses out of it. */
.voizual-home .vz-ready .vz-online-dot {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #b6ffdf, #24e892 45%, #08b46b);
  box-shadow: 0 0 0 2.5px #0a1120a6, 0 0 14px #24e89299, inset 0 0 3px #d9fff0cc;
  flex: 0 0 auto;
  animation: vz-online-breathe 2.6s ease-in-out infinite;
}
.voizual-home .vz-ready .vz-online-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid #3dffa8;
  animation: vz-online-ping 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes vz-online-breathe { 50% { transform: scale(1.12); } }
@keyframes vz-online-ping { 0% { opacity: .85; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(2.5); } }
@media (prefers-reduced-motion: reduce) {
  .voizual-home .vz-ready .vz-online-dot, .voizual-home .vz-ready .vz-online-dot::after { animation: none; }
  .voizual-home .vz-ready .vz-online-dot::after { opacity: 0; }
}
.voizual-home .vz-ready strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.voizual-home .vz-ready small { display: block; font-size: 11px; line-height: 1.5; color: #f0f2fa; }
.voizual-home #screen-start .portrait-wrap::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 95px;
  background: linear-gradient(#080f2470, transparent);
  pointer-events: none;
}
.voizual-home .vz-launcher { display: none; }
.voizual-home #screen-start.minimized {
  position: fixed;
  inset: auto max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) auto;
  width: 68px;
  height: 68px;
  min-height: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid #bbbaff88;
  background: linear-gradient(140deg, #6684ff, #5c49f4 75%);
}
.voizual-home #screen-start.minimized .start-body,
.voizual-home #screen-start.minimized .vz-dismiss,
.voizual-home #screen-start.minimized .vz-bubble { display: none; }
.voizual-home #screen-start.minimized .vz-launcher {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  padding: 17px;
  color: white;
  background: transparent;
  transition: filter .2s ease;
}
.voizual-home .vz-launcher:hover { filter: brightness(1.18); }
.voizual-home .vz-launcher svg { width: 33px; height: 33px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voizual-home .vz-launcher circle { fill: currentColor; stroke: none; }
.voizual-home .vz-ai-badge {
  position: absolute;
  z-index: 9;
  right: -5px;
  top: -7px;
  padding: 1px 8px;
  border: 2px solid #f1efff;
  border-radius: 999px;
  background: #b8b0ff;
  color: #25215f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .5px;
}

/* ---- About page: an in-place view inside .vz-scene, so the floating avatar stays put ---- */
.voizual-home.vz-about-open .vz-hero,
.voizual-home.vz-about-open .vz-page > :not(.vz-footer) { display: none; }
/* without the hero the scene has no reason to fill the viewport; let the About text set its height */
/* the About text sits outside .vz-scene, so the page's own top carries the glow the directory has behind its header */
.voizual-home.vz-about-open .vz-scene { min-height: 0; padding-bottom: 0; background: none; }
body.voizual-home.vz-about-open { background: radial-gradient(900px 420px at 50% -80px, #2b2570 0, rgba(43, 37, 112, 0) 70%) no-repeat, #0b1019; }
.vz-about { padding: 40px var(--vz-inline) 120px; }
/* the text stays clear of the invitation floating at the right edge */
.vz-about > * { max-width: min(1080px, calc(100vw - 460px)); }
.vz-about .vz-eyebrow { margin-bottom: 16px; color: #b1adff; }
.vz-about .vz-about-lede { margin-top: 22px; }
.vz-about h1 { font-size: clamp(36px, 4vw, 60px); letter-spacing: -2.2px; line-height: 1.07; font-weight: 600; margin: 0; }
.vz-about-lede { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.55; color: #d3d7e3; max-width: 62ch; margin: 24px 0 0; }
.vz-about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px 48px; margin: 46px 0 40px; }
.vz-about-grid > section { border-top: 1px solid #333747; padding-top: 22px; }
.vz-about h2 { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 12px; color: #f2f4fb; }
.vz-about-grid > section > h2 ~ h2 { margin-top: 28px; }
.vz-about p { color: #aeb4c5; line-height: 1.55; margin: 0; max-width: 54ch; }
.vz-about ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 14px; }
.vz-about li { color: #aeb4c5; line-height: 1.55; max-width: 54ch; }
.vz-about li::marker { color: #a4a0ff; }
.vz-about li strong { color: #eceef7; font-weight: 600; }
.vz-about .vz-actions { margin-top: 8px; }
.voizual-home.vz-about-open .vz-footer nav a[data-page="about"] { color: #b1adff; }
@media (max-width: 1150px) { .vz-about > * { max-width: calc(100vw - 400px); } }
@media (max-width: 850px) {
  .vz-about { padding: 64px var(--vz-inline) 60px; }
  .vz-about > * { max-width: none; }   /* clear of the language button under the header */
  .vz-about-grid { grid-template-columns: 1fr; gap: 24px; margin: 32px 0; }
}
@media (max-width: 540px) { .vz-about h1 { font-size: clamp(30px, 8vw, 44px); letter-spacing: -1.4px; } }

/* ---- typed conversation ("Type instead"): its own panel, no call behind it ---- */
.vz-chat-panel {
  position: fixed; z-index: 50; right: 3%; bottom: 25px; display: flex; flex-direction: column;
  width: 396px; height: min(680px, calc(100dvh - 120px)); overflow: hidden;
  background: #0d1420f2; backdrop-filter: blur(18px);
  border: 1px solid #b3b9e055; border-radius: 26px;
  box-shadow: 0 0 0 3px #ffffff08, 0 24px 70px #000a, 0 0 28px #8a9bff33;
  color: #eef0f8; font-size: 15px;
  animation: vz-expand .4s cubic-bezier(.2,.8,.2,1);
  transition: width .4s cubic-bezier(.22,1,.36,1), height .4s cubic-bezier(.22,1,.36,1);
}
/* On a phone or small tablet the chat is the whole screen. */
@media (max-width: 850px) {
  .vz-chat-panel { inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; background: #0d1420;
    padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  body.voizual-home.vz-chat-open { overflow: hidden; }
}
.voizual-home.vz-chat-open .vz-launcher { display: none; }

.vz-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 14px 20px; }
.vz-chat-head .vz-logo { --logo-h: 24px; }
.vz-chat-tools { display: flex; gap: 4px; }
.vz-chat-tools button, .vz-chat-panel .vz-chat-tools button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: #ffffff0d; color: #cdd3e6; cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.vz-chat-tools button:hover { background: #ffffff1f; color: #fff; }
.vz-chat-tools button:active { transform: scale(.92); }
.vz-chat-tools [data-chat="close"]:hover { background: #ff4d6d; color: #fff; }
.vz-chat-tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.vz-chat-who { display: flex; align-items: center; gap: 12px; padding: 4px 20px 16px; border-bottom: 1px solid #ffffff10; }
.vz-chat-face { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; box-shadow: 0 0 0 2px #7d78ff88; }
.vz-chat-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.vz-chat-name strong { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.vz-chat-state { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #aab2c9; }
.vz-chat-state i { width: 8px; height: 8px; border-radius: 50%; background: #22e985; box-shadow: 0 0 10px #22e98599; }
.vz-chat-switch {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 15px;
  border: 1px solid #ffffff1f; border-radius: 14px; background: #1b2231; color: #eceffa;
  font: inherit; font-size: 13.5px; cursor: pointer; transition: background .15s, border-color .15s;
}
.vz-chat-switch:hover { background: #26304a; border-color: #ffffff33; }
.vz-chat-switch svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.vz-chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 14px 20px 8px; mask-image: linear-gradient(180deg, transparent, #000 18px); scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.vz-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 100%; animation: vz-msg-in .28s ease-out; }
.vz-msg.you { flex-direction: row-reverse; }
.vz-msg-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.vz-msg-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: calc(100% - 46px); }
.vz-msg-text { padding: 13px 16px; border-radius: 18px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.vz-msg.them .vz-msg-text { background: #1d2534; border-bottom-left-radius: 6px; color: #e7eaf5; }
.vz-msg.you .vz-msg-text { background: linear-gradient(120deg, #5e6bff, #4b3fe6); border-bottom-right-radius: 6px; color: #fff; }
.vz-msg time { font-size: 11.5px; color: #8b94ad; padding: 0 4px; }
.vz-msg.you time { align-self: flex-end; color: #8f8fc4; }
.vz-dots { display: flex; gap: 5px; align-items: center; padding: 16px; }
.vz-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8b94ad; animation: vz-dot 1.2s infinite; }
.vz-dots i:nth-child(2) { animation-delay: .18s; }
.vz-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes vz-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes vz-msg-in { from { opacity: 0; transform: translateY(8px); } }

.vz-chat-compose { display: flex; gap: 10px; align-items: center; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #ffffff12; }
.vz-chat-compose input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: 24px; border: 1px solid #ffffff14; background: #161d2b; color: #fff; font: inherit; }
.vz-chat-compose input::placeholder { color: #7d869d; }
.vz-chat-compose input:focus { outline: none; border-color: #6d67ff; box-shadow: 0 0 0 3px #655bff33; }
.vz-chat-compose button { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: linear-gradient(120deg, #6979ff, #5545ff); color: #fff; cursor: pointer; box-shadow: 0 6px 20px #5f58ff55; transition: filter .15s, transform .15s; }
.vz-chat-compose button:hover { filter: brightness(1.12); }
.vz-chat-compose button:active { transform: scale(.93); }
.vz-chat-compose button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 540px) {
  .vz-chat-who { padding-bottom: 12px; }
  .vz-chat-switch span { display: none; }
  .vz-chat-switch { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vz-chat-panel, .vz-msg { animation: none; } .vz-dots i { animation: none; } }

/* ---- title-bar buttons: drawn icons that answer to the pointer ---- */
.vz-dismiss, .vz-call-chrome button { display: grid; place-items: center; padding: 0; cursor: pointer; }
.vz-dismiss svg, .vz-call-chrome button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.voizual-home .vz-dismiss, .vz-call-chrome button {
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease, opacity .2s ease;
}
/* close: simply turns red, no motion */
.voizual-home .vz-x, .vz-x svg { transition: none; }
.vz-x:hover, .vz-x:focus-visible { background: #ff4d6d; color: #fff; border-color: transparent; }
.vz-x:active { transform: none; }
/* full screen: brightens and the arrows push outwards */
.vz-max-btn:hover, .vz-max-btn:focus-visible { background: #ffffff26; color: #fff; border-color: #ffffff33; box-shadow: 0 0 14px #8d86ff66; }
.vz-max-btn:hover svg, .vz-max-btn:focus-visible svg { transform: scale(1.18); }
.vz-dismiss:active, .vz-call-chrome button:active { transform: scale(.88); }
.vz-dismiss:focus-visible, .vz-call-chrome button:focus-visible { outline: 3px solid #a7a2ff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vz-dismiss svg, .vz-call-chrome button svg { transition: none; } .vz-max-btn:hover svg { transform: none; } }

/* ---- full-screen call: fills the browser window ---- */
.voizual-home #screen-call { transition: width .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1), right .45s cubic-bezier(.22,1,.36,1), bottom .45s cubic-bezier(.22,1,.36,1), border-radius .45s ease; }
.voizual-home #screen-call.vz-max { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border-color: transparent; }
.voizual-home #screen-call.vz-max .vz-call-chrome,
.voizual-home #screen-call.vz-max .call-layout { border-radius: 0; }
.voizual-home #screen-call.vz-max .vz-bubble { display: none; }
body.voizual-home.vz-call-max { overflow: hidden; }
/* Full screen shows the call the way the admin's test call does: black all round and, on a desktop, the
   avatar in the same centred portrait phone frame (public.css), keeping its aspect instead of stretching
   across the screen. On a phone the video itself fills the screen edge to edge. */
.voizual-home #screen-call.vz-max { background: #000; box-shadow: none; }
.voizual-home #screen-call.vz-max::before { display: none; }          /* the travelling edge light */
.voizual-home #screen-call.vz-max .vz-call-chrome { background: #000; border-bottom-color: transparent; }
@media (min-width: 851px) {
  body.voizual-home #screen-call.vz-max .call-layout { display: grid; place-items: center; padding: 8px 16px 24px; background: #000; }
  body.voizual-home #screen-call.vz-max .stage {
    width: min(430px, 100%); height: min(900px, 100%);
    border-radius: 36px; --stage-radius: 36px;
    box-shadow: 0 0 0 10px #16181d, 0 30px 80px #000;
  }
  .voizual-home #screen-call.vz-max .stage-top { text-align: center; padding-top: 1.1rem; }
  .voizual-home #screen-call.vz-max .controls { padding-bottom: 1.1rem; }
}

/* ---- the call button catches the light every few seconds ---- */
.voizual-home #startCall { position: relative; overflow: hidden; isolation: isolate; }
.voizual-home #startCall > * { position: relative; z-index: 2; }
.voizual-home #startCall::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, #ffffff5c 45%, #ffffff85 50%, #ffffff5c 55%, transparent);
  transform: skewX(-18deg); animation: vz-glimmer 4.5s ease-in-out infinite;
}
.voizual-home #startCall:hover::after { animation-duration: 1.6s; }
/* ...and glows under the pointer */
.voizual-home #startCall { transition: box-shadow .3s ease, transform .2s ease, filter .2s ease; }
.voizual-home #startCall:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 0 3px #8d86ff40, 0 0 26px #6f66ffcc, 0 8px 40px #6456ff99; animation: vz-call-glow 1.8s ease-in-out infinite alternate; }
@keyframes vz-call-glow { to { box-shadow: 0 0 0 5px #8d86ff30, 0 0 40px #8a82ffe6, 0 10px 50px #6456ffb3; } }
@media (prefers-reduced-motion: reduce) { .voizual-home #startCall:hover { animation: none; } }
@keyframes vz-glimmer { 0%, 55% { left: -60%; } 100% { left: 125%; } }
@media (prefers-reduced-motion: reduce) { .voizual-home #startCall::after { animation: none; opacity: 0; } }


/* =====================================================================================================
   Below the hero: the light reading surfaces and the ink bands of the v2 homepage. Desktop first.
   ===================================================================================================== */
.vz-page { --ink: #0b1019; --ink-2: #3a4050; --ink-muted: #5f667a; --paper: #f7f8fc; --paper-2: #ffffff; --rule: #e1e4ee; }
.vz-light { background: var(--paper); color: var(--ink); padding: 92px var(--vz-inline) 96px; }
.vz-light + .vz-light { border-top: 1px solid var(--rule); }
.vz-light h2 { font-size: clamp(30px, 3vw, 44px); font-weight: 600; letter-spacing: -1.4px; line-height: 1.12; margin: 0; text-align: center; }
.vz-light h3 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; margin: 0; }
.vz-light p { color: var(--ink-2); line-height: 1.55; }
.vz-light .vz-eyebrow { color: var(--vz-brand); }
.vz-light a:focus-visible, .vz-light button:focus-visible { outline-color: var(--vz-brand); }

/* ---- Use cases: For Work / For You ---- */
.vz-tabs { display: flex; justify-content: center; margin: 30px auto 0; padding: 4px; width: max-content; border-radius: 999px; background: #e9ebf3; }
.vz-tabs [role="tab"] { border: 0; border-radius: 999px; padding: 10px 26px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-muted); background: none; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.vz-tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #0b101914; }
.vz-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1240px; margin: 56px auto 0; }
.vz-cases article { padding: 0 40px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; align-items: flex-start; }
.vz-cases article:first-child { border-left: 0; padding-left: 0; }
.vz-cases article:last-child { padding-right: 0; }
.vz-case-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--vz-brand-soft); color: var(--vz-brand); margin-bottom: 26px; }
.vz-case-ico svg, .vz-mini-list i svg, .vz-mini-select i svg, .vz-reach-ico svg, .vz-pricing-points i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vz-cases p { margin: 12px 0 18px; max-width: 34ch; }
.vz-cases a { margin-top: auto; color: var(--vz-brand); font-size: 15px; font-weight: 600; }
.vz-cases a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- The directory on the homepage: its largest categories, each a link to its hub page ---- */
.vz-explore { background: var(--paper-2); text-align: center; }
.vz-explore .vz-eyebrow { margin-bottom: 14px; }
.vz-explore-sub { max-width: 620px; margin: 18px auto 0; }
.vz-explore-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--vz-max); margin: 44px auto 0; padding: 0; text-align: left; }
.vz-explore-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.vz-explore-list a:hover { border-color: var(--vz-brand); box-shadow: 0 10px 30px #0b10190f; transform: translateY(-2px); }
.vz-explore-list strong { font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.vz-explore-list span { color: var(--vz-brand); font-size: 14px; font-weight: 600; }
.vz-explore-all { margin: 34px 0 0; }
.vz-explore-all a { color: var(--vz-brand); font-size: 16px; font-weight: 600; }
.vz-explore-all a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 850px) { .vz-explore-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .vz-explore-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vz-explore-list a { transition: none; } .vz-explore-list a:hover { transform: none; } }

/* ---- Three steps, each with a product concept in miniature ---- */
.vz-how { background: var(--paper-2); }
.vz-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0; max-width: 1240px; margin: 56px auto 0; }
.vz-how-step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 0 32px; border-left: 1px solid var(--rule); }
.vz-how-step:first-child { border-left: 0; padding-left: 0; }
.vz-how-step:last-child { padding-right: 0; }
.vz-how-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
.vz-how-num { font-size: 28px; font-weight: 400; letter-spacing: -1px; color: var(--vz-brand); line-height: 1.1; flex: none; }
.vz-how-head p { margin: 8px 0 0; font-size: 15px; max-width: 36ch; }
.vz-mini { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); padding: 14px 16px 16px; box-shadow: 0 8px 24px #0b10190a; }
.vz-mini-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.vz-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vz-mini-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); }
.vz-mini-list i, .vz-mini-select i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--vz-brand-soft); color: var(--vz-brand); flex: none; }
.vz-mini-list i svg, .vz-mini-select i svg { width: 17px; height: 17px; }
.vz-mini-list strong { display: block; font-size: 14px; font-weight: 600; }
.vz-mini-list small, .vz-mini-field > span { display: block; font-size: 12px; color: var(--ink-muted); }
.vz-mini-field { margin-top: 12px; }
.vz-mini-field > span { font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.vz-mini-field > span em { font-style: normal; font-weight: 400; color: var(--ink-muted); }
.vz-mini-select, .vz-mini-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); font-size: 14px; }
.vz-mini-select b { margin-left: auto; font-weight: 400; color: var(--ink-muted); }
.vz-mini-faces { display: flex; gap: 10px; }
.vz-face { width: 52px; height: 52px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--rule); }
img.vz-face { object-fit: cover; object-position: center 20%; background: #e9ebf3; }
.vz-face.on { border-color: var(--vz-brand); box-shadow: 0 0 0 3px var(--vz-brand-soft); }
.vz-face.add { display: grid; place-items: center; background: #fff; color: var(--ink-muted); font-size: 22px; }
.vz-mini-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--vz-mono); font-size: 12.5px; color: var(--ink-2); }
.vz-mini-row b { font-weight: 600; font-size: 13px; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--rule); color: var(--ink); background: var(--paper); }
.vz-mini-row.muted { opacity: .65; }

/* ---- Ink band: three ways to reach people ---- */
.vz-reach { background: #0b1019; color: #f6f7ff; padding: 84px var(--vz-inline) 88px; }
.vz-reach h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 600; letter-spacing: -1.2px; text-align: center; margin: 0; }
.vz-reach-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1240px; margin: 52px auto 0; }
.vz-reach-grid article { display: flex; gap: 20px; align-items: flex-start; padding: 0 36px; border-left: 1px solid #ffffff1c; }
.vz-reach-grid article:first-child { border-left: 0; padding-left: 0; }
.vz-reach-grid article:last-child { padding-right: 0; }
.vz-reach-ico { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #ffffff2a; background: #ffffff0a; color: #c9c6ff; }
.vz-reach h3 { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 8px; }
.vz-reach p { color: #b7bccd; margin: 0; line-height: 1.5; font-size: 15px; max-width: 36ch; }
.vz-pill { font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; border: 1px solid #ffffff2a; color: #c9cce0; background: #ffffff0f; }
.vz-pill.live { color: #b8ffd9; border-color: #22e98555; background: #22e98514; }

/* ---- Pricing preview: the model, not the numbers ---- */
.vz-pricing { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; max-width: 1240px; margin: 0 auto; }
.vz-light.vz-pricing { padding-inline: var(--vz-inline); max-width: none; }
.vz-pricing > * { max-width: 1240px; }
.vz-pricing-copy h2 { text-align: left; margin: 14px 0 20px; }
.vz-pricing-copy .vz-eyebrow { margin: 0; font-size: 12px; }
.vz-pricing-copy p { margin: 0 0 14px; max-width: 52ch; font-size: 17px; }
.vz-pricing-copy .vz-fine { font-size: 13px; color: var(--ink-muted); padding: 10px 14px; border-left: 3px solid var(--vz-brand); background: #fff; border-radius: 0 10px 10px 0; display: inline-block; }
.vz-pricing-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; align-self: center; }
.vz-pricing-points li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); }
.vz-pricing-points i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--vz-brand-soft); color: var(--vz-brand); }
.vz-pricing-points i svg { width: 16px; height: 16px; stroke-width: 2.2; }
.vz-pricing-points strong { display: block; font-size: 16px; margin-bottom: 4px; }
.vz-pricing-points span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ---- FAQ ---- */
.vz-faq-list { max-width: 820px; margin: 44px auto 0; border-top: 1px solid var(--rule); }
.vz-faq-list details { border-bottom: 1px solid var(--rule); }
.vz-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.vz-faq-list summary::-webkit-details-marker { display: none; }
.vz-faq-list summary::after { content: '+'; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); color: var(--vz-brand); font-weight: 400; font-size: 20px; transition: transform .2s; }
.vz-faq-list details[open] summary::after { content: '–'; }
.vz-faq-list summary:hover { color: var(--vz-brand); }
.vz-faq-list p { margin: 0 0 22px; padding: 0 4px; max-width: 70ch; font-size: 15.5px; }

/* ---- Closing call and footer ---- */
.vz-final { background: #0b1019; color: #f6f7ff; padding: 96px var(--vz-inline) 80px; text-align: center; border-top: 1px solid #ffffff12; }
.vz-final .vz-eyebrow { margin-bottom: 18px; }
.vz-final h2 { font-size: clamp(32px, 3.4vw, 50px); font-weight: 600; letter-spacing: -1.6px; margin: 0 0 32px; }
.vz-final .vz-actions { justify-content: center; }
.vz-footer { background: #070b12; color: #a8afc1; padding: 44px var(--vz-inline) 40px; display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center; border-top: 1px solid #ffffff10; }
.vz-footer-brand { display: flex; align-items: center; gap: 22px; }
.vz-footer .vz-logo { --logo-h: 30px; }
.vz-footer-brand p { margin: 0; font-size: 14px; }
.vz-footer nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.vz-footer nav a { color: #c9cce0; font-size: 14px; }
.vz-footer nav a:hover { color: #fff; }
/* "Cookie settings" (web/consent.js reveals it when analytics is on): a button that looks like the links beside it */
.vz-footer nav .vz-cookie-link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: #c9cce0; cursor: pointer; }
.vz-footer nav .vz-cookie-link:hover { color: #fff; }
.vz-cookie-link[hidden] { display: none; }
.vz-footer small { grid-column: 1 / -1; font-size: 12px; color: #6c7793; }

@media (max-width: 1150px) {
  .vz-cases article, .vz-how-step, .vz-reach-grid article { padding-inline: 22px; }
  .vz-pricing { gap: 36px; }
}
@media (max-width: 850px) {
  .vz-light { padding: 64px var(--vz-inline) 68px; }
  .vz-cases, .vz-how-grid, .vz-reach-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .vz-how-step { display: flex; flex-direction: column; grid-row: auto; }
  .vz-cases article, .vz-how-step, .vz-reach-grid article { border-left: 0; padding-inline: 0; }
  .vz-cases article + article, .vz-how-step + .vz-how-step, .vz-reach-grid article + article { border-top: 1px solid var(--rule); padding-top: 34px; }
  .vz-reach-grid article + article { border-top-color: #ffffff1c; }
  .vz-pricing { grid-template-columns: 1fr; }
  .vz-footer { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .vz-light h2, .vz-reach h2 { letter-spacing: -.8px; }
  .vz-cases article, .vz-how-step { align-items: stretch; }
  .vz-how-head { flex-direction: column; gap: 8px; }
  .vz-footer-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- the header's menu on tablets and phones (web/site-nav.js) ---- */
.vz-menu-btn, .vz-nav-signin { display: none; }
@media (max-width: 850px) {
  .vz-account > a:not(.vz-cta) { display: none; }
  .vz-menu-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff26; border-radius: 12px;
    background: #0b1019a6; backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background .15s, border-color .15s; }
  .vz-menu-btn:hover { background: #ffffff1a; border-color: #ffffff40; }
  .vz-menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .vz-menu-btn .vz-i-close, .vz-header.vz-nav-open .vz-menu-btn .vz-i-open { display: none; }
  .vz-header.vz-nav-open .vz-menu-btn .vz-i-close { display: inline; }
  .vz-header nav { position: absolute; top: calc(100% - 10px); left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    border: 1px solid #ffffff1c; border-radius: 18px; background: #111725f7; backdrop-filter: blur(16px); box-shadow: 0 24px 60px #000a; }
  .vz-header.vz-nav-open nav { display: flex; animation: vz-menu-in .18s ease-out; }
  .vz-header.vz-nav-open nav a, .vz-header.vz-nav-open nav a[aria-current="page"] { padding: 13px 14px; border: 0; border-radius: 11px; font-size: 16px; color: #eef0f8; }
  .vz-header.vz-nav-open nav a:hover, .vz-header.vz-nav-open nav a[aria-current="page"] { background: #ffffff10; color: #fff; }
  .vz-header.vz-nav-open .vz-nav-signin { display: block; margin-top: 4px; border-top: 1px solid #ffffff14; border-radius: 0 0 11px 11px; }
}
@keyframes vz-menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 540px) {
  .vz-header { gap: 12px; }
  .vz-header .vz-logo { --logo-h: 28px; }
  .vz-account { gap: 8px; }
  .vz-account a.vz-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .vz-header.vz-nav-open nav { animation: none; } }

/* ---- the conversation language in the header (web/public.js opens the list): a flag with a down arrow. On a phone
   the header has no room for it, so it is the last row of the header's menu instead. ---- */
.vz-lang-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 44px; padding: 0 4px;
  border: 0; border-radius: 10px; background: none; color: #e6e8f2; font: inherit; cursor: pointer; transition: color .15s; }
/* no box: the flag and the arrow alone, lifted off the photo and the dark bands by a soft shadow */
.vz-lang-btn > * { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45)); transition: transform .15s; }
.vz-lang-btn .vz-lang-flag { font-size: 22px; }
.vz-lang-btn:hover, .vz-lang-btn[aria-expanded="true"] { color: #fff; }
.vz-lang-btn:hover .vz-lang-flag { transform: translateY(-1px); }
.vz-lang-btn:hover .vz-lang-caret, .vz-lang-btn[aria-expanded="true"] .vz-lang-caret { opacity: 1; }
.vz-lang-btn[aria-expanded="true"] .vz-lang-caret { transform: rotate(180deg); }
.vz-lang-btn:focus-visible, .vz-nav-lang:focus-visible { outline: 3px solid #a7a2ff; outline-offset: 3px; }
.vz-lang-btn[hidden], .vz-nav-lang { display: none; }
.vz-lang-flag { display: inline-flex; align-items: center; font-family: var(--vz-flags); font-size: 20px; line-height: 1; }
.vz-lang-flag img { display: block; width: 24px; height: auto; border-radius: 2px; }
.vz-lang-flag.flag-code { font-family: inherit; font-size: 10px; font-weight: 700; padding: 2px 4px; border-radius: 4px; background: #33405c; }
.vz-lang-caret { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
@media (max-width: 540px) {
  .vz-account .vz-lang-btn { display: none; }
  .vz-header.vz-nav-open .vz-nav-lang:not([hidden]) { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 13px 14px;
    border: 0; border-top: 1px solid #ffffff14; border-radius: 0 0 11px 11px; background: none; color: #eef0f8; font: inherit; font-size: 16px;
    text-align: start; cursor: pointer; }
  .vz-header.vz-nav-open .vz-nav-lang:hover { background: #ffffff10; }
  .vz-nav-lang .vz-lang-flag { margin-inline-start: auto; }
  .vz-header.vz-nav-open .vz-nav-signin { border-radius: 11px; }
}

/* ---- "How was your conversation?" 1-5 stars (web/home.js askForRating), bottom centre, clear of the widget ---- */
.vz-rate { position: fixed; z-index: 55; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 32px));
  padding: 18px 20px 16px; box-sizing: border-box; border-radius: 20px; text-align: center;
  background: rgba(19, 26, 41, .97); border: 1px solid var(--vz-line); color: var(--vz-text); backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); font-family: var(--vz-font);
  opacity: 0; transform: translate(-50%, 14px); transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.vz-rate.in { opacity: 1; transform: translate(-50%, 0); }
.vz-rate-q { margin: 0 28px 12px; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.vz-rate-stars { display: flex; justify-content: center; gap: 6px; }
.vz-rate-stars button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 12px;
  background: none; color: #4c5673; cursor: pointer; transition: color .12s, transform .12s, background .12s; }
.vz-rate-stars button:hover { background: var(--vz-hover); }
.vz-rate-stars button:active { transform: scale(.9); }
.vz-rate-stars button.on { color: #ffc84a; }
.vz-rate-stars svg { width: 32px; height: 32px; fill: currentColor; }
.vz-rate-stars button:focus-visible, .vz-rate-x:focus-visible { outline: 3px solid #a7a2ff; outline-offset: 2px; }
.vz-rate-thanks { margin: 10px 0 0; font-size: 14px; color: #b8ffd9; }
.vz-rate-thanks[hidden] { display: none; }
.vz-rate-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--vz-muted); cursor: pointer; }
.vz-rate-x:hover { background: var(--vz-hover); color: var(--vz-text); }
.vz-rate-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .vz-rate { transition: none; } }

/* Any other page of the site (the directory, sign-up and sign-in, 404: body.vz-site) has the Voizual agent in the
   corner. Opened on a phone, its invitation floats there too instead of taking a place in the page. */
@media (max-width: 850px) {
  body.vz-site #screen-start:not(.minimized) { position: fixed; inset: auto 16px max(16px, env(safe-area-inset-bottom)) auto; margin: 0; z-index: 45; }
}

/* ---- the agent builder's Preview (web/app.js): the widget alone in a small frame, drawn as on a desktop page
   whatever the frame's width, over the builder's own panel ---- */
html:has(body.vz-widget-preview), body.voizual-home.vz-widget-preview { background: transparent; }
body.vz-widget-preview { min-height: 0; overflow: hidden; }
/* at its hovered size, the way a visitor sees it when they reach for it (the desktop :hover rule above) */
body.vz-widget-preview #screen-start:not(.minimized) { position: fixed; inset: auto 12px 12px auto; width: 320px; height: 450px; margin: 0;
  box-shadow: 0 24px 70px #0009, 0 0 28px #7778ff66, 0 12px 45px #587aff50; }
body.vz-widget-preview #screen-start:not(.minimized) .start-body { padding: 24px; }
body.vz-widget-preview #screen-start.minimized { inset: auto 12px 12px auto; }
body.vz-widget-preview .vz-bubble { width: 250px; padding: 16px 18px; font-size: 13px; }

/* ---- the widget on a customer's own website (web/embed.js, avatar_app/share.py): this page fills a transparent
   frame laid over their page, and the frame takes clicks only where the widget is (home.js reports that area).
   It starts open or as the AI button and sits in either corner, as the account chose in Share → Website. ---- */
html:has(body.vz-embed), body.voizual-home.vz-embed, body.voizual-home.vz-embed.in-call { background: transparent !important; }
body.voizual-home.vz-embed, body.voizual-home.vz-embed.in-call { min-height: 0; overflow: hidden; }
body.vz-embed.vz-left #screen-start:not(.minimized) { inset: auto auto 30px 3%; }
body.vz-embed.vz-left #screen-start.minimized { inset: auto auto max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
body.vz-embed.vz-left #screen-call:not(.vz-max), body.vz-embed.vz-left .vz-chat-panel { right: auto; left: 3%; transform-origin: bottom left; }
body.vz-embed.vz-left .vz-bubble { right: auto; left: 0; transform-origin: 15% 100%; }
body.vz-embed.vz-left .vz-bubble::after { right: auto; left: 32px; border-left-color: transparent; border-right-color: #f4f4ff; }
@media (max-width: 850px) {
  body.vz-embed.vz-left #screen-start:not(.minimized) { inset: auto auto max(16px, env(safe-area-inset-bottom)) 16px; }
  body.vz-embed.vz-left #screen-call:not(.vz-max) { left: 16px; }
  body.vz-embed.vz-left .vz-chat-panel { left: 0; }
}
@media (max-width: 540px) { body.vz-embed.vz-left #screen-call:not(.vz-max) { left: 10px; } }
/* shadows that fit in the area the frame takes clicks in (home.js, PAD): larger ones would be cut off in a hard line */
body.vz-embed #screen-start, body.vz-embed #screen-start:not(.minimized):hover, body.vz-embed #screen-start:not(.minimized):has(:focus-visible),
body.vz-embed #screen-call, body.vz-embed .vz-chat-panel { box-shadow: 0 8px 22px #0006, 0 0 12px #7778ff44 !important; }
body.vz-embed .vz-bubble { box-shadow: 0 4px 16px #999bff33; }
/* a frame can't blur the site behind it, so the chat panel is solid there */
body.vz-embed .vz-chat-panel { background: #0d1420; }