/* XYRA AI live demo with Ben — one page: join → joining → call → summary. */
:root {
    --ink: #1A1633;
    --muted: #5b6475;
    --faint: #8b93a5;
    --line: #e4e7ee;
    --page: #F7F6FC;
    --card: #ffffff;
    --blue: #7C5CFF;
    --blue-d: #5B3FE0;
    --blue-l: #F1EDFF;
    --cyan: #38bdf8;
    --green: #22c55e;
    --green-d: #16a34a;
    --red: #dc2626;
    --night: #0D021B;
    --night-2: #170A2E;
    --night-3: #23143F;
    --night-line: rgba(255, 255, 255, .09);
    --night-text: #e8e9f3;
    --night-muted: #9da1bd;
    --cap-scale: 1;
    --skeleton: #eef0f3;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink); background: var(--page); overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(124, 92, 255, .45); outline-offset: 2px; }

/* ---------------------------------------------------------------- shell + stages */
.xd-shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--page); }
.xd-shell[data-stage="joining"], .xd-shell[data-stage="call"] { background: var(--night); color: var(--night-text); }
[data-only] { display: none !important; }
.xd-shell[data-stage="join"] [data-only="join"],
.xd-shell[data-stage="joining"] [data-only="joining"],
.xd-shell[data-stage="call"] [data-only="call"],
.xd-shell[data-stage="summary"] [data-only="summary"] { display: flex !important; }

.xd-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.xd-brand-mark { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #14112b; }
.xd-brand-word { font-weight: 800; letter-spacing: .14em; font-size: 1.05rem; }
/* the XYRA logo: colour on the light pages, white lettering on the dark call screen */
.xd-brand-logo { display: block; height: 54px; width: auto; }
.xc-top .xd-brand-logo { height: 40px; }

/* ================================================================ JOIN */
.xj { flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.xj-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 48px; flex: none; }
.xj-head-right { display: flex; align-items: center; gap: 16px; }
.xj-back { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }
.xj-lang { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.xj-lang select { border: 0; background: transparent; font-weight: 600; color: var(--ink); cursor: pointer; outline: none; }

.xj-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding: 8px 72px 40px; max-width: 1500px; width: 100%; margin: 0 auto; }
.xj-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #dcfce7; color: #15803d; font-weight: 600; font-size: .92rem; }
.xj-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.xj-left h1 { margin: 20px 0 14px; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }
.xj-lead { margin: 0 0 26px; max-width: 620px; color: var(--muted); font-size: 1.12rem; line-height: 1.6; }

.xj-card { display: grid; gap: 18px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(15, 23, 42, .06); max-width: 680px; }
.xj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.xj-field { display: grid; gap: 8px; }
.xj-field > span { font-weight: 600; font-size: .95rem; }
.xj-field em { font-style: normal; font-weight: 400; color: var(--faint); }
.xj-req { color: var(--red); font-weight: 600; }
.xj-field input, .xj-field select {
    height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid #d5d9e3; background: #fff; font-size: 1rem; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Industry: the same box as the text fields, with its own arrow. */
.xj-field select { width: 100%; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 44px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.xj-field select:invalid { color: var(--faint); }
.xj-field select.bad { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.xj-field select:focus, .xj-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(124, 92, 255, .12); }
.xj-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.xj-seg button, .xj-chips button {
    height: 50px; border-radius: 12px; border: 1px solid #d5d9e3; background: #fff; font-weight: 500; color: var(--ink);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.xj-seg button:hover, .xj-chips button:hover { border-color: #aab4c8; }
.xj-seg button[aria-checked="true"] { border: 2px solid var(--blue); background: var(--blue-l); color: var(--blue-d); font-weight: 700; }
.xj-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.xj-chips button { height: 42px; padding: 0 16px; border-radius: 999px; }
.xj-chips button[aria-pressed="true"] { border: 2px solid var(--blue); background: var(--blue-l); color: var(--blue-d); font-weight: 600; }
.xj-chips button[aria-pressed="true"]::before { content: '✓ '; }
.xj-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
.xj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 22px; border-radius: 14px;
    font-weight: 700; font-size: 1.05rem; text-decoration: none; border: 1px solid transparent; transition: background .15s ease, transform .12s ease;
}
.xj-btn:hover { transform: translateY(-1px); }
.xj-btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.xj-btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 26px rgba(124, 92, 255, .28); }
.xj-btn-primary:hover { background: var(--blue-d); }
.xj-btn-ghost { background: #fff; color: var(--ink); border-color: #d5d9e3; }
.xj-foot { margin: 0; color: var(--faint); font-size: .9rem; }
.xj-foot a { color: var(--blue); }
.xd-error { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: .95rem; }
.xd-error[hidden] { display: none; }

.xj-right { display: grid; gap: 16px; }
.xj-ben {
    position: relative; aspect-ratio: 11 / 10; border-radius: 26px; overflow: hidden;
    background: radial-gradient(70% 60% at 50% 60%, #2a2550 0, #17142e 60%, #0f0c22 100%);
    box-shadow: 0 24px 60px rgba(12, 10, 29, .25);
}
.xj-bubble { position: absolute; left: 22px; top: 22px; max-width: 72%; padding: 16px 20px; border-radius: 18px 18px 18px 6px; background: #fff; font-weight: 600; font-size: 1.05rem; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.xj-ben-figure { position: absolute; inset: 0; display: grid; place-items: center; }
.xj-mic { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--night-2); color: var(--night-text); }
.xj-mic-label { font-weight: 600; }
.xj-mic-bars { display: inline-flex; gap: 4px; margin-left: auto; }
.xj-mic-bars i { width: 16px; height: 8px; border-radius: 3px; background: #3a3560; transition: background .1s ease; }
.xj-mic-bars i.on { background: var(--green); }
.xj-mic-btn { border: 1px solid var(--night-line); background: transparent; color: #fff; border-radius: 10px; padding: 6px 12px; font-weight: 600; font-size: .88rem; }
.xj-mic[data-state="testing"] .xj-mic-btn, .xj-mic[data-state="good"] .xj-mic-btn { display: none; }
.xj-mic-state { font-weight: 600; font-size: .9rem; min-width: 0; }
.xj-mic[data-state="good"] .xj-mic-state { color: #4ade80; }
.xj-mic[data-state="blocked"] .xj-mic-state { color: #fca5a5; }
.xj-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xj-facts div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.xj-facts b { font-size: .98rem; }
.xj-facts span { color: var(--muted); font-size: .9rem; }

/* ================================================================ JOINING */
.xd-joining { flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding-bottom: 8vh; }
.xd-shimmer {
    margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -.01em;
    background: linear-gradient(90deg, #9da1bd 0%, #9da1bd 35%, #fff 50%, #9da1bd 65%, #9da1bd 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: xd-shine 1.8s linear infinite;
}
@keyframes xd-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ================================================================ CALL */
.xc { flex: 1; min-height: 0; flex-direction: column; }
.xc-top { display: flex; align-items: center; gap: 18px; padding: 12px 22px; border-bottom: 1px solid var(--night-line); flex: none; }
.xc-top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xc-top .xd-brand-word { color: #fff; }
.xc-for { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--night-line); color: var(--night-muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.xc-tour { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: safe center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.xc-tour::-webkit-scrollbar { display: none; }
.xc-step {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; flex: none;
    border: 1px solid var(--night-line); background: transparent; color: var(--night-muted); font-weight: 600; font-size: .92rem; white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.xc-step:hover:not([disabled]) { border-color: rgba(255,255,255,.25); color: #fff; }
.xc-step[disabled] { cursor: default; }
.xc-step.done { color: #4ade80; border-color: rgba(74, 222, 128, .35); }
.xc-step.done::before { content: '✓'; }
.xc-step.now { color: #fff; border-color: var(--blue); background: rgba(124, 92, 255, .25); }
.xc-step.now::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(56, 189, 248, .25); }
.xc-join { width: 22px; height: 1px; background: var(--night-line); flex: none; }
.xc-mini { display: none; }
.xc-top-right { display: flex; align-items: center; gap: 8px; flex: none; }
.xc-timer { font-variant-numeric: tabular-nums; color: var(--night-muted); font-size: .92rem; margin-right: 4px; white-space: nowrap; }
.xc-timer #xd-timer { color: #fff; font-weight: 600; }
.xc-icon { min-width: 38px; height: 38px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--night-line); background: transparent; color: var(--night-text); font-weight: 700; font-size: .92rem; }
.xc-icon:hover { background: rgba(255,255,255,.06); }

.xc-main { position: relative; flex: 1; min-height: 0; display: flex; padding: 14px 22px 0; }

/* the shared screen: slides or the live app */
.xd-screen { position: relative; flex: 1; min-width: 0; min-height: 0; border-radius: 18px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.xd-screen > * { position: absolute; inset: 0; transition: opacity .5s ease; }
.xd-skeleton { padding: 36px; display: flex; flex-direction: column; gap: 22px; background: #fff; }
.xd-sk-dots { display: flex; gap: 12px; }
.xd-sk-dots i { width: 16px; height: 16px; border-radius: 50%; background: #e3e5ea; }
.xd-sk-line, .xd-sk-block { border-radius: 14px; background: linear-gradient(90deg, var(--skeleton) 0, #f8f9fb 40%, var(--skeleton) 80%); background-size: 200% 100%; animation: xd-sk 1.6s ease-in-out infinite; }
.xd-sk-line { height: 18px; }
.xd-sk-line.w60 { width: 55%; }
.xd-sk-line.w90 { width: 82%; margin-bottom: 8px; }
.xd-sk-block { height: 72px; flex: none; }
@keyframes xd-sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.xd-waiting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: radial-gradient(60% 60% at 50% 45%, #1f1b3d 0, var(--night-2) 70%); }
.xd-waiting p { margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--night-muted); }
.xd-screen iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.xd-screen[data-screen="skeleton"] > :not(.xd-skeleton),
.xd-screen[data-screen="waiting"] > :not(.xd-waiting),
.xd-screen[data-screen="live"] > :not(iframe):not(.xd-paused):not(.xd-shield):not(.xd-deck) { opacity: 0; pointer-events: none; }
.xd-screen > iframe { transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.xd-screen > .xd-deck { opacity: 0; pointer-events: none; transform: scale(1.06); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.xd-screen[data-screen="live"][data-view="slides"] > .xd-deck { opacity: 1; transform: none; }
.xd-screen[data-screen="live"][data-view="slides"] > iframe { opacity: 0; transform: scale(.92) rotateX(6deg); filter: blur(6px); }
.xd-screen > .xd-shield { z-index: 2; background: transparent; cursor: default; touch-action: none; }
.xd-screen:not([data-screen="live"]) > .xd-shield { pointer-events: none; }
.xd-paused { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ink); background: rgba(246, 247, 251, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.xd-paused[hidden] { display: none; }
.xd-paused p { margin: 0; font-size: 1.4rem; font-weight: 700; }
.xd-resume { height: 50px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font-size: 1.05rem; font-weight: 700; }

/* right column: your camera on top, Ben below (same width, Ben taller: his video is upright) */
.xc-side { flex: none; width: clamp(250px, 21vw, 340px); margin-left: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.xc-tile { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--night-line); transition: box-shadow .25s ease, border-color .25s ease; }
.xc-tile.talking { border-color: var(--green); box-shadow: 0 0 0 2px rgba(34, 197, 94, .55); }
.xc-label { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 4px 9px; border-radius: 8px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(12, 10, 29, .65); backdrop-filter: blur(4px); }
/* your camera */
.xd-tile-you { flex: none; aspect-ratio: 4 / 3; background: radial-gradient(80% 80% at 50% 40%, #221e42 0, var(--night-2) 75%); }
.xd-you-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
.xd-tile-you.cam-on .xd-you-video { display: block; }
.xd-you-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--night-muted); }
.xd-tile-you.cam-on .xd-you-off { display: none; }
.xd-you-face { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--night-3); color: var(--night-muted); }
.xd-cam-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--night-line); border-radius: 999px; padding: 6px 13px; font-size: .84rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.06); }
.xd-cam-btn:hover { background: rgba(255,255,255,.12); }
.xd-cam-note { font-size: .72rem; color: #6f7393; }
.xd-cam-off { position: absolute; right: 8px; top: 8px; z-index: 3; display: none; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(12, 10, 29, .6); }
.xd-tile-you.cam-on .xd-cam-off { display: grid; }
/* Ben */
.xd-agent { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.xd-tile-agent { flex: 1; min-height: 160px; background: radial-gradient(80% 70% at 50% 40%, #2c2756 0, #1b1838 70%); }
.xd-tile-agent .xd-orb { position: absolute; left: 50%; top: 50%; margin: -32px 0 0 -32px; z-index: 1; transition: opacity .3s ease; }
.xd-ben-video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; opacity: 0; transition: opacity .35s ease; }
.xd-ben-video.live { opacity: 1; }
.xd-tile-agent.has-video { background: radial-gradient(120% 90% at 50% 45%, #8fa4a9 0%, #6c838a 45%, #4b5d66 100%); }
.xd-tile-agent.has-video .xd-orb { opacity: 0; }
/* The Azure avatar (Celine): the whole person, on the same colour as the video's own background (AZURE_AVATAR_BACKGROUND). */
.xd-tile-agent.has-video.azure { background: #2c2756; }
.xd-azure-video { object-fit: contain; object-position: 50% 100%; }
.xd-agent-status { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 4px; color: var(--night-muted); font-size: .88rem; white-space: nowrap; overflow: hidden; }
#xd-status { overflow: hidden; text-overflow: ellipsis; }
.xd-dot { width: 8px; height: 8px; border-radius: 50%; background: #5d5a7c; flex: none; }
.xd-agent-status[data-state="listening"] .xd-dot, .xd-agent-status[data-state="thinking"] .xd-dot,
.xd-agent-status[data-state="speaking"] .xd-dot, .xd-agent-status[data-state="hearing"] .xd-dot { background: var(--green); }
.xd-agent-status[data-state="thinking"] .xd-dot { animation: xd-pulse 1s ease-in-out infinite; }
.xd-agent-status[data-state="paused"] .xd-dot { background: #f59e0b; }
.xd-agent-status[data-state="offline"] .xd-dot { background: var(--red); }
@keyframes xd-pulse { 50% { opacity: .3; } }
/* the controls are buttons, not text to select */
.xc-top, .xc-controls, .xc-side { user-select: none; -webkit-user-select: none; }

/* the orb (voice-only guide, and the join / joining pages) */
.xd-orb {
    width: 64px; height: 64px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 34% 28%, #7fd8ee 0, #2b9ec4 28%, #12608f 62%, #0b3557 100%);
    box-shadow: inset -8px -10px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(77, 210, 230, 0);
    transition: box-shadow .25s ease, transform .25s ease;
}
.xd-orb-big { width: 128px; height: 128px; box-shadow: inset -12px -16px 26px rgba(0,0,0,.3), 0 0 70px 26px rgba(56, 189, 248, .3); animation: xd-float 4s ease-in-out infinite; }
.xd-orb.speaking { box-shadow: inset -8px -10px 18px rgba(0,0,0,.28), 0 0 26px 12px rgba(77, 210, 230, .55); transform: scale(1.05); }
.xd-orb.listening { box-shadow: inset -8px -10px 18px rgba(0,0,0,.28), 0 0 0 5px rgba(124, 92, 255, .45); }
.xd-orb.idle-glow { box-shadow: inset -8px -10px 18px rgba(0,0,0,.28), 0 0 18px 6px rgba(77, 210, 230, .25); }
@keyframes xd-float { 50% { transform: translateY(-6px); } }

/* chat drawer */
.xc-chat {
    position: absolute; top: 14px; right: 22px; bottom: 0; z-index: 7; width: min(400px, calc(100% - 44px));
    display: flex; flex-direction: column; border-radius: 18px; background: #fff; color: var(--ink);
    box-shadow: 0 24px 60px rgba(0,0,0,.4); transform: translateX(calc(100% + 40px)); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.xc.chat-open .xc-chat { transform: none; }
.xc-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.xc-chat-head .xc-icon { border-color: var(--line); color: var(--ink); }
.xd-empty { margin: 18px 16px 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.xd-empty[hidden] { display: none; }
.xd-transcript { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; scroll-behavior: smooth; }
.xd-msg { font-size: .98rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; color: #1f2433; }
.xd-msg.agent { align-self: flex-start; max-width: 92%; }
.xd-msg.visitor { align-self: flex-end; max-width: 86%; background: var(--blue); color: #fff; border-radius: 16px 16px 4px 16px; padding: 9px 14px; }
.xd-msg.tool { align-self: flex-start; font-size: .82rem; color: var(--muted); border: 1px dashed #cfd3dc; border-radius: 999px; padding: 3px 12px; }
.xd-msg.agent.cut { opacity: .45; }
.xd-msg.note { font-size: .88rem; color: var(--muted); font-style: italic; }
.xd-msg.live::after { content: ''; display: inline-block; width: .45em; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; opacity: .35; animation: xd-blink 1s steps(2) infinite; }
@keyframes xd-blink { 50% { opacity: 0; } }
.xd-msg[dir="rtl"] { text-align: right; }
.xd-msg.visitor.listening { background: #dbe6ff; color: #4b5b80; font-style: italic; }
.xd-msg.visitor.listening::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: xd-dots 1.2s steps(4) infinite; }
@keyframes xd-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.xd-thinking { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
.xd-thinking::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: xd-pulse 1s ease-in-out infinite; }
/* the type box, always in the bottom bar next to the mic */
.xd-input { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 5px 0 4px; border-radius: 999px; border: 2px solid var(--night-line); background: var(--night-2); flex: 0 1 300px; min-width: 160px; }
.xd-input:focus-within { border-color: var(--blue); }
.xd-input input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; background: transparent; color: #fff; font-size: .98rem; outline: none; }
.xd-input input::placeholder { color: var(--night-muted); }
.xd-input input:disabled { cursor: default; }
.xc-send { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--blue); color: #fff; flex: none; }

/* ---------------------------------------------------------------- bottom bar: captions + controls */
.xc-bar { position: relative; display: flex; align-items: center; gap: 22px; padding: 12px 22px 14px; flex: none; min-height: 84px; }
.xc-cap { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.xc-controls .xd-input { order: 0; }
.xd-cap-you { font-size: calc(.92rem * var(--cap-scale)); color: var(--night-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s ease; }
.xd-cap-you.on { opacity: 1; }
.xd-cap-you b { color: #fff; }
.xd-caption {
    font-size: calc(1.12rem * var(--cap-scale)); line-height: 1.4; font-weight: 600; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity .2s ease;
}
.xd-caption.on { opacity: 1; }
.xd-caption.note { color: #fcd34d; }
.xc.cc-off .xd-caption, .xc.cc-off .xd-cap-you { visibility: hidden; }
.xd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.xd-chips[hidden] { display: none; }
.xd-chip {
    font-size: .9rem; color: #dbe5ff; background: rgba(124, 92, 255, .18); border: 1px solid rgba(96, 140, 255, .45); border-radius: 999px;
    padding: 6px 14px; line-height: 1.3; transition: background .15s, border-color .15s;
}
.xd-chip:hover, .xd-chip:focus-visible { background: rgba(124, 92, 255, .35); border-color: #7aa2ff; outline: none; }

.xc-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.xc-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--night-line); background: var(--night-2); color: var(--night-text); flex: none; }
.xc-btn:hover { background: var(--night-3); }
.xc-btn[disabled] { opacity: .45; cursor: default; }
.xc-text { width: auto; padding: 0 14px; font-weight: 700; font-size: .92rem; }
#xd-cc[aria-pressed="false"] { color: var(--night-muted); text-decoration: line-through; }
#xd-chat-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.xd-pause .xd-ico-play, .xd-pause[aria-pressed="true"] .xd-ico-pause { display: none; }
.xd-pause[aria-pressed="true"] .xd-ico-play { display: block; }
.xd-pause[aria-pressed="true"] { background: #fff; color: var(--night); }
.xc-end { height: 46px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; flex: none; box-shadow: 0 8px 20px rgba(220, 38, 38, .3); }
.xc-end:hover { background: #b91c1c; }

/* the mic button: "Click to talk" → "I'm listening" → "Hearing you" */
.xd-talk {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; min-width: 180px; padding: 0 20px;
    border-radius: 999px; border: 2px solid var(--night-line); background: var(--night-2); color: #fff; font-weight: 700; white-space: nowrap; flex: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.xd-talk:hover:not([disabled]) { border-color: rgba(255,255,255,.3); }
.xd-talk[disabled] { opacity: .5; cursor: default; }
.xd-talk .xd-mic-on, .xd-wave { display: none; }
.xd-talk[aria-pressed="true"] { border-color: var(--green); background: #0f2a1c; color: #86efac; }
.xd-talk[aria-pressed="true"] .xd-mic-off, .xd-talk[aria-pressed="true"] #xd-talk-label { display: none; }
.xd-talk[aria-pressed="true"] .xd-mic-on { display: block; }
.xd-talk[aria-pressed="true"]::after { content: "I'm listening"; }
.xd-talk.hearing { box-shadow: 0 0 0 5px rgba(34, 197, 94, .2); }
.xd-talk.hearing::after { content: 'Hearing you'; }
.xd-talk[aria-pressed="true"] .xd-wave { display: inline-flex; }
.xd-wave { align-items: center; gap: 3px; height: 24px; }
.xd-wave i { display: block; width: 3px; height: 4px; border-radius: 2px; background: #4ade80; transition: height .07s linear; }
.xd-mic-pick-wrap { position: relative; }
.xd-mic-pick { width: 30px; height: 46px; border-radius: 10px; border: 1px solid var(--night-line); background: var(--night-2); color: var(--night-muted); display: grid; place-items: center; }
.xd-mic-menu { position: absolute; bottom: calc(100% + 10px); right: 0; min-width: 260px; max-width: 340px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.3); padding: 6px; z-index: 30; }
.xd-mic-menu p { margin: 4px 10px 6px; font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.xd-mic-menu button { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; font-size: .92rem; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); }
.xd-mic-menu button:hover { background: var(--blue-l); }
.xd-mic-menu button[aria-checked="true"] { color: var(--blue-d); font-weight: 600; }
.xd-mic-menu button[aria-checked="true"]::before { content: '✓'; }
.xd-mic-hint { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); max-width: min(620px, 92vw); background: #fff; color: var(--ink); font-size: .94rem; line-height: 1.4; padding: 10px 16px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.35); display: flex; align-items: center; gap: 12px; z-index: 25; animation: xd-hint-in .25s ease; }
.xd-mic-hint[hidden] { display: none; }
.xd-mic-hint button { font-size: .85rem; color: #fff; background: var(--blue); border: 0; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
@keyframes xd-hint-in { from { opacity: 0; transform: translate(-50%, 6px); } }

/* end-call popup */
.xd-end-dialog { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 29, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: xd-fade .18s ease; }
.xd-end-dialog[hidden] { display: none; }
.xd-end-card { position: relative; width: min(560px, 100%); padding: 32px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .4); }
.xd-end-card h2 { margin: 0 44px 10px 0; font-size: 1.45rem; }
.xd-end-card p { margin: 0 0 24px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.xd-end-x { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.xd-end-x:hover { background: #f1f3f7; }
.xd-end-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.xd-end-btn { height: 52px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-size: 1.02rem; font-weight: 700; }
.xd-end-btn:hover { background: var(--blue-d); }
.xd-end-link { border: 0; background: none; color: var(--blue); font-size: .98rem; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
@keyframes xd-fade { from { opacity: 0; } }

/* ================================================================ SUMMARY */
.xsum { flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.xsum-time { color: var(--muted); font-size: .95rem; }
.xsum-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; padding: 8px 72px 48px; max-width: 1500px; width: 100%; margin: 0 auto; }
.xsum-left { display: grid; gap: 22px; }
.xsum-hello { display: flex; align-items: center; gap: 20px; }
.xsum-orb { width: 76px; height: 76px; }
.xsum-hello h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 2.8vw, 2.6rem); letter-spacing: -.02em; line-height: 1.12; }
.xsum-hello p { margin: 0; color: var(--muted); font-size: 1.08rem; }
.xsum-card { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.xsum-card h2 { margin: 0 0 16px; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.xsum-saw { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.xsum-saw article { padding: 18px; border-radius: 14px; border: 1px solid var(--line); }
.xsum-saw h3 { margin: 0 0 6px; font-size: 1.08rem; }
.xsum-saw p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.5; }
.xsum-empty { margin: 0; color: var(--muted); }
.xsum-qs { display: grid; }
.xsum-qs article { padding: 14px 0; border-top: 1px solid var(--line); }
.xsum-qs article:first-child { border-top: 0; padding-top: 0; }
.xsum-qs h3 { margin: 0 0 4px; font-size: 1.02rem; }
.xsum-qs p { margin: 0; color: var(--muted); line-height: 1.55; }
.xsum-ai { border-color: #c7d7fe; background: linear-gradient(180deg, #f5f8ff, #fff 60%); }
.xsum-ai-wait { display: none; align-items: center; gap: 10px; margin: 0; color: var(--muted); }
.xsum-ai[data-state="loading"] .xsum-ai-wait { display: flex; }
.xsum-ai[data-state="loading"] .xsum-ai-overview, .xsum-ai[data-state="loading"] .xsum-ai-grid { display: none; }
.xsum-ai-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--blue-l); border-top-color: var(--blue); animation: xsum-spin .8s linear infinite; }
@keyframes xsum-spin { to { transform: rotate(360deg); } }
.xsum-ai-overview { margin: 0 0 18px; font-size: 1.06rem; line-height: 1.65; color: var(--ink); }
.xsum-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.xsum-ai-grid > div { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.xsum-ai-grid h3 { margin: 0 0 8px; font-size: 1rem; }
.xsum-ai-grid ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.55; font-size: .95rem; }
.xsum-ai-grid li + li { margin-top: 4px; }
.xsum-right { display: grid; gap: 16px; position: sticky; top: 8px; }
.xsum-plan { display: grid; gap: 12px; padding: 24px; border-radius: 20px; background: #fff; border: 2px solid var(--blue); }
.xsum-badge { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--blue-l); color: var(--blue-d); font-weight: 700; font-size: .85rem; }
.xsum-plan h3 { margin: 0; font-size: 1.7rem; }
.xsum-plan > p { margin: 0; color: var(--muted); }
.xsum-plan ul { margin: 0 0 6px; padding-left: 20px; color: var(--ink); line-height: 1.7; }
.xsum-note { margin: 0; color: var(--faint); font-size: .86rem; text-align: center; }
/* 5-star feedback */
.xsum-fb { display: grid; gap: 12px; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.xsum-fb h3 { margin: 0; font-size: 1.08rem; }
.xsum-stars { display: flex; align-items: center; gap: 4px; }
.xsum-stars button { width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 2rem; line-height: 1; color: #d5d9e3; cursor: pointer; transition: transform .12s, color .12s; }
.xsum-stars button.lit { color: #f5b301; }
.xsum-stars button:hover { transform: scale(1.12); }
.xsum-stars button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.xsum-star-label { margin-left: 8px; color: var(--muted); font-weight: 600; }
.xsum-fb-more { display: grid; gap: 8px; }
.xsum-fb-more[hidden], .xsum-fb-thanks[hidden] { display: none; }
.xsum-fb-more label { font-weight: 600; }
.xsum-fb-more textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid #d5d9e3; font: inherit; resize: vertical; }
.xsum-fb-more textarea:focus { outline: 2px solid var(--blue); border-color: transparent; }
.xsum-fb-thanks { margin: 0; color: var(--green-d); font-weight: 600; }

/* ================================================================ smaller screens */
@media (max-width: 1440px) {
    .xd-talk { min-width: 0; }
    .xd-input { flex-basis: 220px; }
}
@media (max-width: 1280px) {
    .xc-for { display: none; }
    .xc-step { padding: 0 12px; }
    .xc-join { width: 12px; }
    #xd-txt-down, #xd-txt-up { display: none; }
}
@media (max-width: 1100px) {
    .xj-body { grid-template-columns: 1fr; padding: 8px 24px 32px; gap: 28px; }
    .xj-right { order: -1; grid-template-columns: 1fr; }
    .xj-ben { aspect-ratio: 16 / 7; }
    .xsum-body { grid-template-columns: 1fr; padding: 8px 24px 32px; }
    .xsum-right { position: static; }
}
@media (max-width: 900px) {
    .xj-head { padding: 14px 16px; }
    .xj-back { display: none; }
    .xj-body { padding: 4px 16px 24px; }
    .xj-grid, .xj-actions { grid-template-columns: 1fr; }
    .xj-card { padding: 18px; }
    .xj-facts { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .xj-facts div { padding: 10px; }
    .xj-facts span { font-size: .8rem; }
    .xj-ben { display: none; }

    /* the call on a phone: progress on top, the screen, Ben small, big mic button */
    .xc-top { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
    .xc-tour, .xc-timer, #xd-fullscreen { display: none; }
    .xc-mini { display: grid; gap: 6px; flex: 1 1 100%; order: 3; color: var(--night-muted); font-size: .85rem; }
    .xc-mini i { display: block; height: 4px; border-radius: 4px; background: var(--night-3); overflow: hidden; }
    .xc-mini b { display: block; height: 100%; width: 0; background: var(--blue); transition: width .4s ease; }
    .xc-top-right { margin-left: auto; }
    .xc-main { padding: 10px 12px 0; }
    .xc-side { position: absolute; right: 20px; bottom: 12px; z-index: 6; width: 112px; margin: 0; }
    .xd-tile-you, .xd-agent-status { display: none; }
    .xd-tile-agent { flex: none; min-height: 0; aspect-ratio: 3 / 4; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
    .xc-label { display: none; }
    .xc-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px 14px; }
    .xc-cap { padding: 10px 14px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); min-height: 64px; }
    .xc-controls { gap: 8px; }
    .xc-controls { flex-wrap: wrap; }
    .xc-controls .xd-input { flex: 1 1 100%; }
    .xd-talk { flex: 1; min-width: 0; }
    #xd-skip, #xd-cc, .xd-mic-pick-wrap, .xd-pause { display: none; }
    .xc-chat { top: 10px; right: 12px; width: calc(100% - 24px); }
}

/* ---- Book a call with our team ---- */
.xj-book { margin: 4px 0 0; color: var(--muted); font-size: .95rem; text-align: center; }
.xj-book-btn { border: 0; background: none; padding: 0; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.xd-book { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(8, 12, 30, .6); }
.xd-book[hidden] { display: none; }
.xd-book-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.xd-book-card.wide { width: min(1000px, 100%); }
.xd-book-form { display: grid; gap: 14px; }
.xd-book-form h2 { margin: 0; font-size: 1.5rem; }
.xd-book-form > p { margin: 0; color: var(--muted); }
.xd-book-who { padding: 10px 14px; border-radius: 12px; background: var(--blue-l); color: var(--blue-d); font-weight: 600; }
.xd-book-who:empty { display: none; }
.xd-book-form select { height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid #d5d9e3; font: inherit; background: #fff; }
.xd-book-cal[hidden], .xd-book-done[hidden] { display: none; }
.xd-book-cal iframe { display: block; width: 100%; height: min(700px, calc(100vh - 120px)); border: 0; border-radius: 14px; }
.xd-book-done { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #ecfdf3; color: var(--green-d); font-weight: 600; }

/* ---- phone + WhatsApp, Request Call ---- */
.xj-field > label:first-child { font-weight: 600; }
.xj-check { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--muted); cursor: pointer; }
.xj-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.xd-req { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.xd-req[hidden], .xd-req-done[hidden] { display: none; }
.xd-req textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid #d5d9e3; font: inherit; resize: vertical; }
.xd-req em { color: var(--faint); font-style: normal; font-weight: 400; }
.xd-req-done { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #ecfdf3; color: var(--green-d); font-weight: 600; }

/* ---- phone fields with country picker (intl-tel-input) ---- */
.iti, .iti--container {
    /* The CDN has the flag sprites as PNG only (and the library's own CSS loads after this file). */
    --iti-path-flags-1x: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.8.1/img/flags.png");
    --iti-path-flags-2x: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.8.1/img/flags@2x.png");
}
.iti { width: 100%; }
.iti input[type=tel] { width: 100%; }
.iti--container { z-index: 120; } /* above the dialogs */
.iti__dropdown-content { border-radius: 12px; overflow: hidden; color: var(--ink); }
.iti__search-input { padding: 8px 10px; }
.xj-field input.bad { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.xj-phone-hint { margin: 0; font-size: .85rem; color: #dc2626; }
.xj-phone-hint[hidden] { display: none; }

/* WhatsApp tick box beside the phone field (right column, level with the input). */
.xj-check-cell { align-self: end; min-height: 50px; }

/*
 * The join page fits the screen without scrolling on laptops and desktops: tighter spacing,
 * heading and fields when the window is not tall (a 1080p screen leaves ~880px for the page).
 */
@media (min-width: 1101px) and (max-height: 1000px) {
    .xj { overflow-y: auto; }
    .xj-head { padding: 12px 48px; }
    .xj-body { align-items: start; padding: 0 72px 12px; gap: 48px; }
    .xj-pill { padding: 5px 12px; font-size: .85rem; }
    .xj-left h1 { margin: 12px 0 8px; font-size: clamp(1.8rem, 2.5vw, 2.45rem); }
    .xj-lead { margin: 0 0 14px; font-size: 1rem; line-height: 1.5; }
    .xj-card { padding: 18px 22px; gap: 12px; }
    .xj-grid { gap: 10px 16px; }
    .xj-field { gap: 5px; }
    .xj-field > span, .xj-field > label:first-child { font-size: .9rem; }
    .xj-field input, .xj-field select, .xj-seg button { height: 44px; }
    .xj-check-cell { min-height: 44px; }
    .xj-chips { gap: 8px; }
    .xj-chips button { height: 38px; padding: 0 14px; }
    .xj-btn { height: 50px; }
    .xj-foot { font-size: .85rem; line-height: 1.5; }
    .xj-right { gap: 12px; padding-top: 8px; }
    .xj-ben { aspect-ratio: auto; height: min(52vh, 480px); }
    .xj-facts div { padding: 10px 14px; }
}
@media (min-width: 1101px) and (max-height: 820px) {
    .xj-lead { display: none; }
    .xj-ben { height: 44vh; }
}
@media (max-width: 900px) { .xj-check-cell { min-height: 0; } }

/* Industry and language lists: open below the field, scroll inside (see listBelow() in demo-call.js). */
.xj-dd { position: relative; }
.xj-dd-list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 6px 0 0; padding: 6px; list-style: none;
    overflow-y: auto; background: #fff; border: 1px solid #d5d9e3; border-radius: 12px; box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}
.xj-dd-list[hidden] { display: none; }
.xj-dd-list li { padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--ink); font-size: .95rem; }
.xj-dd-list li.on { background: var(--blue-l); color: var(--blue-d); }
.xj-dd-list li[aria-selected="true"] { font-weight: 700; }

/* After each part XYRA asks "Any questions?": the type box glows until they type or the demo moves on. */
@keyframes xd-ask-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(124, 92, 255, .45), 0 0 18px rgba(56, 189, 248, .35); } 50% { box-shadow: 0 0 0 6px rgba(124, 92, 255, .2), 0 0 28px rgba(56, 189, 248, .6); } }
.ask-glow { border-radius: 16px; animation: xd-ask-glow 1.4s ease-in-out infinite; }

/* ---- join page: the guide (idle loop → tap → greeting) ---- */
button.xj-ben { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; text-align: left; background: #6f8ea0; }
.xj-guide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.xj-guide-video[hidden] { display: none; }
.xj-ben .xj-bubble { z-index: 2; color: var(--ink); transition: opacity .25s ease; }
.xj-guide-tap { position: absolute; z-index: 2; left: 50%; bottom: 64px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    background: rgba(12, 10, 29, .78); color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: xj-tap 2s ease-in-out infinite; }
@keyframes xj-tap { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
.xj-guide-name { position: absolute; z-index: 2; left: 16px; bottom: 16px; padding: 5px 10px; border-radius: 8px; background: rgba(12, 10, 29, .7); color: #fff; font-weight: 700; font-size: .85rem; }
.xj-guide-waves { position: absolute; z-index: 2; right: 18px; bottom: 18px; display: none; align-items: center; gap: 3px; height: 22px; }
.xj-guide-waves i { width: 4px; height: 8px; border-radius: 2px; background: #4ade80; animation: xj-wave .9s ease-in-out infinite; }
.xj-guide-waves i:nth-child(2) { animation-delay: .15s; } .xj-guide-waves i:nth-child(3) { animation-delay: .3s; } .xj-guide-waves i:nth-child(4) { animation-delay: .45s; } .xj-guide-waves i:nth-child(5) { animation-delay: .6s; }
@keyframes xj-wave { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.xj-ben.talking .xj-guide-waves { display: inline-flex; }
.xj-ben.talking .xj-guide-tap, .xj-ben.greeted .xj-guide-tap { display: none; }
.xj-ben.talking { box-shadow: 0 0 0 3px #4ade80, 0 24px 60px rgba(12, 10, 29, .25); }
.xj-ben:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* After the greeting: the form glows once, the first empty field is focused. */
@keyframes xj-card-glow { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .55); } 100% { box-shadow: 0 0 0 18px rgba(124, 92, 255, 0); } }
.xj-card.nudge { animation: xj-card-glow 1.2s ease-out 2; }
@media (max-width: 900px) {
    .xj-ben { display: block !important; aspect-ratio: auto !important; height: 34vh !important; }
    .xj-guide-tap { bottom: 52px; }
}
/* The whole guide (head and shoulders) on his own backdrop colours; the bubble beside him. */
button.xj-ben { background: linear-gradient(180deg, #8aa7b6 0%, #5f8291 55%, #45666f 100%); }
.xj-guide-video { object-fit: contain; object-position: 72% 100%; }
.xj-ben .xj-bubble { left: 18px; top: 18px; max-width: 44%; font-size: .98rem; padding: 14px 16px; }
.xj-guide-tap { left: 24%; }
@media (max-width: 900px) {
    .xj-guide-video { object-position: 82% 100%; }
    .xj-ben .xj-bubble { max-width: 52%; font-size: .9rem; }
    .xj-guide-tap { left: 28%; bottom: 52px; }
}
/* The sides beside the portrait video: a blurred copy of his own backdrop, so there is no edge. */
button.xj-ben::before { content: ''; position: absolute; inset: -40px; background: var(--guide-bg) center 30% / cover no-repeat; filter: blur(38px) saturate(1.1); opacity: .95; }
/* (replaces the blur above) Only the left edge of his backdrop, stretched: the same colours top to bottom, no face. */
button.xj-ben::before { inset: 0; background: var(--guide-bg) 0 0 / 6000% 100% no-repeat; filter: blur(12px); transform: scale(1.1); opacity: 1; }

/* =====================================================================================
 * Join page (2026-10-19 design). Scoped to .jx so the call and summary keep their own look.
 * ===================================================================================== */
.jx {
    --jx-ink: #1A1633; --jx-ink-2: #4A5166; --jx-muted: #5B6275; --jx-ph: #8A90A2;
    --jx-bg: #F7F6FC; --jx-card: #FFFFFF; --jx-line: #E6E8EF; --jx-field: #D9DDE7; --jx-field-hover: #B9BFCE; --jx-chip: #F1F3F8;
    --jx-primary: #7C5CFF; --jx-primary-hover: #6D4AFF; --jx-primary-dark: #5B3FE0; --jx-primary-soft: #F1EDFF;
    --jx-success: #059669; --jx-success-ink: #047857; --jx-success-soft: #E6F6EF;
    --jx-danger: #C2331F; --jx-stage: #1A0F33; --jx-stage-2: #261848;
    --jx-display: 'Poppins', system-ui, sans-serif; --jx-body: 'Poppins', system-ui, sans-serif;
    flex-direction: column; overflow-y: auto; background: var(--jx-bg); color: var(--jx-ink); font-family: var(--jx-body); -webkit-font-smoothing: antialiased;
}
.jx a { color: var(--jx-primary); }
.jx a:hover { color: var(--jx-primary-dark); }
:where(.jx) button { font: inherit; cursor: pointer; } /* :where: no weight on top of each button's own font rules */
.jx svg { flex: 0 0 auto; }
.jx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.jx-top { flex: none; width: 100%; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--jx-line); background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); }
.jx-top-in { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jx-logo img { display: block; height: 40px; width: auto; }
.jx-back { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--jx-ink-2) !important; text-decoration: none; }
.jx-back:hover { background: var(--jx-chip); color: var(--jx-ink) !important; }

/* layout */
.jx-main { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1240px; margin: 0 auto; padding: 48px 32px 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.jx-left { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.jx-right { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.jx-intro { display: flex; flex-direction: column; gap: 16px; }
.jx-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--jx-success-soft); color: var(--jx-success-ink); font-size: 13px; font-weight: 700; }
.jx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jx-success); animation: jx-blink 1.6s ease-in-out infinite; }
.jx h1 { margin: 0; font-family: var(--jx-display); font-weight: 700; font-size: 36px; line-height: 1.15; letter-spacing: -.8px; color: var(--jx-ink); }
.jx h1 span { color: var(--jx-primary); }
.jx h2 { margin: 0; padding: 0 4px; font-family: var(--jx-display); font-weight: 600; font-size: 18px; letter-spacing: -.2px; }

/* form */
.jx-card { background: var(--jx-card); border: 1px solid var(--jx-line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px;
    box-shadow: 0 1px 2px rgba(11, 16, 32, .04), 0 12px 32px -12px rgba(11, 16, 32, .12); }
.jx-card-title { font-family: var(--jx-display); font-weight: 600; font-size: 18px; }
.jx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jx-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--jx-ink); }
.jx-lang-box { position: relative; }
.jx-req { color: var(--jx-danger); }
.jx-input { font: inherit; font-size: 15px; font-weight: 500; color: var(--jx-ink); background: var(--jx-card); border: 1px solid var(--jx-field); border-radius: 12px; height: 48px; padding: 0 14px; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s; }
.jx-input::placeholder { color: var(--jx-ph); }
.jx-input:hover { border-color: var(--jx-field-hover); }
.jx-input:focus { border-color: var(--jx-primary); box-shadow: 0 0 0 4px rgba(124, 92, 255, .14); }
.jx-input[aria-invalid="true"], .jx-input.bad { border-color: var(--jx-danger); box-shadow: 0 0 0 4px rgba(194, 51, 31, .12); }
.jx-select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer;
    background: var(--jx-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6275' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.jx-select:invalid { color: var(--jx-ph); }
.jx-lang-box svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--jx-ink-2); pointer-events: none; }
.jx-lang-box .jx-select { display: block; padding-inline-start: 40px; }
.jx .xj-dd-list { font-family: var(--jx-body); }

.jx-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 4px; background: var(--jx-chip); border-radius: 14px; }
.jx-seg button { height: 44px; border-radius: 10px; font-size: 15px; font-weight: 700; border: 1px solid transparent; background: transparent; color: var(--jx-ink-2); transition: all .15s; }
.jx-seg button:hover { color: var(--jx-ink); }
.jx-seg button[aria-checked="true"] { border-color: var(--jx-primary); background: var(--jx-card); color: var(--jx-primary); box-shadow: 0 2px 6px -2px rgba(124, 92, 255, .35); }
.jx-seg button:focus-visible, .jx-hear:focus-visible, .jx-cta:focus-visible, .jx-book:focus-visible, .jx-mic-btn:focus-visible { outline: 3px solid var(--jx-primary); outline-offset: 2px; }

.jx-phone-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.jx-phone { flex: 1 1 280px; min-width: 0; }
.jx-phone .iti { width: 100%; }
.jx-phone .iti input.jx-input { width: 100%; }
.jx .xj-phone-hint { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--jx-danger); }
.jx .xj-phone-hint[hidden] { display: none; }
.jx-wa { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--jx-field); background: var(--jx-card); font-size: 14px; font-weight: 600; color: var(--jx-ink); cursor: pointer; transition: all .15s; }
.jx-wa input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jx-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #C5CAD6; transition: background .15s; }
.jx-knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: inset-inline-start .15s; }
.jx-wa:has(input:checked) { background: var(--jx-success-soft); border-color: #9ADBB6; }
.jx-wa:has(input:checked) .jx-track { background: var(--jx-success); }
.jx-wa:has(input:checked) .jx-knob { inset-inline-start: 18px; }
.jx-wa:has(input:focus-visible) { outline: 3px solid var(--jx-primary); outline-offset: 2px; }

.jx-cta-wrap { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.jx-cta { height: 56px; border: 0; border-radius: 14px; background: var(--jx-primary); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px;
    box-shadow: 0 10px 24px -10px rgba(124, 92, 255, .7); transition: transform .12s, background .15s; }
.jx-cta:hover { transform: translateY(-1px); background: var(--jx-primary-hover); }
.jx-cta:active { transform: none; }
.jx-cta[disabled] { cursor: progress; opacity: .92; transform: none; }
.jx-pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.jx-spin { animation: jx-spin .8s linear infinite; }
.jx-cta-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 13px; color: var(--jx-muted); }
.jx-cta-meta > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.jx-book { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--jx-primary); text-decoration: underline; text-underline-offset: 3px; }
.jx-book:hover { color: var(--jx-primary-dark); }
.jx .xd-error { margin: 0; }
.jx-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; font-weight: 600; color: var(--jx-ink-2); }
.jx-trust span { display: flex; align-items: center; gap: 8px; }
.jx-card.nudge { animation: jx-card-glow 1.2s ease-out 2; }

/* the guide */
.jx-stage { position: relative; height: 460px; border-radius: 24px; overflow: hidden; background: var(--jx-stage); box-shadow: 0 24px 48px -24px rgba(11, 16, 32, .5); }
.jx-avatar { position: absolute; inset: 0 0 76px; display: grid; place-items: center; }
.jx-ring { position: absolute; width: 280px; height: 280px; border-radius: 50%; border: 2px solid rgba(124, 140, 255, .45); animation: jx-ring 2.4s ease-out infinite; }
.jx-ring.b { animation-delay: 1.2s; border-color: rgba(124, 140, 255, .35); }
.jx-face { position: relative; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; background: var(--jx-stage-2); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.jx-face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.18); transform-origin: 50% 20%; }
.jx-face video[hidden] { display: none; }
.jx-stage.talking .jx-ring { animation-duration: 1.2s; border-color: rgba(74, 222, 128, .55); }
.jx-stage.talking .jx-face { box-shadow: 0 0 0 3px #4ade80, 0 18px 40px rgba(0, 0, 0, .35); }
.jx-stage-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.jx-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 700; }
.jx-live .jx-dot { background: #3DDC84; }
.jx-waves { display: none; align-items: center; gap: 3px; height: 22px; }
.jx-waves i { width: 4px; height: 8px; border-radius: 2px; background: #4ade80; animation: jx-wave .9s ease-in-out infinite; }
.jx-waves i:nth-child(2) { animation-delay: .15s; } .jx-waves i:nth-child(3) { animation-delay: .3s; } .jx-waves i:nth-child(4) { animation-delay: .45s; } .jx-waves i:nth-child(5) { animation-delay: .6s; }
.jx-stage.talking .jx-waves { display: inline-flex; }
.jx-controls { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.jx-hear { flex: 1; height: 52px; border: 0; border-radius: 14px; background: #fff; color: var(--jx-ink); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s; }
.jx-hear:hover { transform: translateY(-1px); }
.jx-icon-btn { width: 52px; height: 52px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; }
.jx-icon-btn:hover { background: rgba(255, 255, 255, .16); }
.jx-icon-btn[aria-pressed="true"] { background: #fff; color: var(--jx-primary); border-color: #fff; }
.jx-icon-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* mic check */
.jx-mic { background: var(--jx-card); border: 1px solid var(--jx-line); border-radius: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 16px; }
.jx-mic-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--jx-chip); color: var(--jx-ink-2); display: grid; place-items: center; transition: all .2s; }
.jx-mic-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.jx-mic-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.jx-mic-head b { font-size: 15px; }
.jx-mic-status { font-size: 13px; font-weight: 600; color: var(--jx-muted); }
.jx-meter { display: flex; align-items: flex-end; gap: 4px; height: 20px; }
.jx-meter i { flex: 1; height: 4px; border-radius: 2px; background: #E1E4EC; transition: height .1s, background .2s; }
.jx-meter i.on { height: 14px; background: var(--jx-primary); }
.jx-mic[data-state="good"] .jx-meter i.on { background: var(--jx-success); }
.jx-mic-btn { flex: 0 0 auto; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--jx-field); background: var(--jx-card); font-size: 14px; font-weight: 700; color: var(--jx-ink); }
.jx-mic-btn:hover { border-color: var(--jx-field-hover); }
.jx-mic[data-state="testing"] .jx-mic-ico { background: var(--jx-primary-soft); color: var(--jx-primary); }
.jx-mic[data-state="testing"] .jx-mic-status { color: var(--jx-primary); }
.jx-mic[data-state="good"] .jx-mic-ico { background: var(--jx-success-soft); color: var(--jx-success-ink); }
.jx-mic[data-state="good"] .jx-mic-status { color: var(--jx-success-ink); }
.jx-mic[data-state="blocked"] .jx-mic-status, .jx-mic[data-state="silent"] .jx-mic-status { color: var(--jx-danger); }

/* tiles */
.jx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jx-tile { background: var(--jx-card); border: 1px solid var(--jx-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.jx-tile-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.jx-tile b { font-size: 15px; display: block; }
.jx-tile small { font-size: 13px; color: var(--jx-muted); display: block; margin-top: 2px; }

@keyframes jx-spin { to { transform: rotate(360deg); } }
@keyframes jx-ring { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes jx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes jx-wave { 0%, 100% { height: 6px; } 50% { height: 22px; } }
@keyframes jx-card-glow { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .5); } 100% { box-shadow: 0 0 0 18px rgba(124, 92, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .jx *, .jx *::before, .jx *::after { animation: none !important; transition: none !important; } }

@media (max-width: 640px) {
    .jx-top-in, .jx-main { padding-left: 16px; padding-right: 16px; }
    .jx-main { padding-top: 28px; gap: 32px; }
    .jx h1 { font-size: 28px; }
    .jx-card { padding: 20px; }
    .jx-grid2 { grid-template-columns: 1fr; }
    .jx-back { display: none; }
    .jx-stage { height: 380px; }
    .jx-face { width: 210px; height: 210px; }
    .jx-ring { width: 230px; height: 230px; }
    .jx-tiles { grid-template-columns: 1fr; }
    .jx-tile { flex-direction: row; align-items: center; }
    .jx-wa { flex: 1 1 100%; }
}
/* The 20-bar meter shares the old meter's class (the script finds it by it): undo the old 16 px bars. */
.jx .jx-meter { display: flex; margin: 0; min-width: 0; }
.jx .jx-meter i { width: auto; min-width: 0; }

/* ---- Join page, v2 (2026-10-19): the avatar fills the dark stage (no circle), and on a laptop /
 * desktop screen the whole page fits without scrolling: the stage takes whatever height is left. ---- */
.jx-ring { display: none; }
.jx-avatar { inset: 0; display: block; }
.jx-face { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; border: 0; box-shadow: none; background: #6f8ea0; }
.jx-face video { object-fit: cover; object-position: 50% 18%; transform: none; }
/* keep the controls readable over the video */
.jx-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to top, rgba(15, 20, 48, .75), rgba(15, 20, 48, 0)); pointer-events: none; }
.jx-controls, .jx-stage-top { z-index: 2; }
.jx-live { background: rgba(15, 20, 48, .6); backdrop-filter: blur(6px); }
.jx-stage.talking .jx-face { box-shadow: inset 0 0 0 4px #4ade80; }

@media (min-width: 1025px) {
    .jx { overflow: hidden; }
    .jx-top-in { height: 60px; }
    .jx-logo img { height: 34px; }
    .jx-main { height: calc(100vh - 61px); padding: 20px 32px 18px; gap: 40px; align-items: stretch; flex-wrap: nowrap; }
    .jx-left { gap: 16px; justify-content: center; }
    .jx-intro { gap: 10px; }
    .jx h1 { font-size: 32px; }
    .jx-card { padding: 20px 24px; gap: 14px; }
    .jx-card-title { font-size: 17px; }
    .jx-grid2 { gap: 12px 16px; }
    .jx-field { gap: 6px; }
    .jx-input { height: 44px; }
    .jx-seg button { height: 38px; }
    .jx-wa { height: 44px; }
    .jx-cta { height: 50px; }
    .jx-cta-wrap { gap: 10px; padding-top: 2px; }
    .jx-right { gap: 12px; min-height: 0; }
    .jx-stage { flex: 1 1 auto; height: auto; min-height: 280px; }
    .jx-mic { padding: 12px 16px; }
    .jx-tiles { gap: 10px; }
    .jx-tile { flex-direction: row; align-items: center; padding: 10px 12px; gap: 10px; }
    .jx-tile small { margin-top: 0; }
}
/* Too short a window to fit everything: let the page scroll instead of cutting it off. */
@media (min-width: 1025px) and (max-height: 699px) {
    .jx { overflow-y: auto; }
    .jx-main { height: auto; min-height: calc(100vh - 61px); }
    .jx-stage { flex: none; height: 420px; }
}
/* (v3) The whole portrait, head and shoulders, like the earlier design — not a close-up of the face.
 * The sides beside the portrait: the left edge of his own backdrop stretched, so there is no seam. */
.jx-face { background: #6f8ea0; }
.jx-face::before { content: ''; position: absolute; inset: 0; background: var(--guide-bg) 0 0 / 6000% 100% no-repeat; filter: blur(12px); transform: scale(1.1); }
.jx-face video { object-fit: contain; object-position: 50% 100%; }
/* (v4) Bigger logo, top left (links to thexyra.ai); the separate back link is gone. */
.jx-logo img { height: 46px; }
@media (min-width: 1025px) {
    .jx-top-in { height: 68px; }
    .jx-logo img { height: 44px; }
    .jx-main { height: calc(100vh - 69px); }
}
@media (max-width: 640px) { .jx-logo img { height: 38px; } }

/* ---- Brand colours (2026-10-19), as on thexyra.ai: violet #7C5CFF, ink #1A1633, Poppins, dark purple header ---- */
.jx { background: radial-gradient(650px 360px at 15% 25%, rgba(124, 92, 255, .14), transparent 60%), radial-gradient(520px 300px at 85% 80%, rgba(124, 92, 255, .10), transparent 55%), var(--jx-bg); }
.jx-main { position: relative; }
.jx-left, .jx-right { position: relative; z-index: 1; }
.jx-top { background: rgba(13, 2, 27, .92); border-bottom-color: rgba(255, 255, 255, .08); }
.jx a { color: var(--jx-primary-hover); }
.jx-book { color: var(--jx-primary-hover); }
.jx h1, .jx h2, .jx-card-title { letter-spacing: -.5px; }
.jx-badge { background: var(--jx-success-soft); }

/* ---- Summary page in the brand colours (2026-10-19): Poppins, dark purple header, violet accents ---- */
.xsum { font-family: 'Poppins', system-ui, sans-serif; color: #1A1633;
    background: radial-gradient(700px 380px at 12% 8%, rgba(124, 92, 255, .13), transparent 60%), radial-gradient(600px 340px at 92% 70%, rgba(124, 92, 255, .09), transparent 55%), #F7F6FC; }
.xsum .xj-head { background: rgba(13, 2, 27, .92); padding-top: 14px; padding-bottom: 14px; margin-bottom: 24px; position: sticky; top: 0; z-index: 5; }
.xsum .xd-brand-logo { height: 40px; }
.xsum .xsum-time { color: rgba(255, 255, 255, .78); }
.xsum button, .xsum textarea { font-family: inherit; }
.xsum-hello h1 { color: #1A1633; letter-spacing: -.5px; }
.xsum-face { width: 84px; height: 84px; flex: none; border-radius: 50%; background-color: #1A0F33; background-size: 100% auto; background-position: 50% 30%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(124, 92, 255, .55), 0 10px 26px rgba(124, 92, 255, .25); }
.xsum-card, .xsum-fb { border-color: #E7E3F5; }
.xsum-card h2 { color: #6D4AFF; }
.xsum-ai { border-color: rgba(124, 92, 255, .35); background: linear-gradient(180deg, #F1EDFF, #fff 60%); }
.xsum-ai-grid > div, .xsum-saw article { border-color: #E7E3F5; }
.xsum-ai-grid li::marker, .xsum-plan li::marker { color: #7C5CFF; }
.xsum-plan { border-color: #7C5CFF; box-shadow: 0 18px 40px rgba(124, 92, 255, .14); }
.xsum-badge { background: #F1EDFF; color: #5B3FE0; }
.xsum .xj-btn-primary { background: #7C5CFF; }
.xsum .xj-btn-primary:hover { background: #6D4AFF; }
.xsum .xj-btn-ghost { border-color: #E2DCF7; color: #1A1633; }
.xsum .xj-btn-ghost:hover { border-color: #7C5CFF; color: #5B3FE0; }
.xsum-fb-more textarea:focus { outline-color: #7C5CFF; }
@media (max-width: 900px) { .xsum .xj-head { padding-left: 16px; padding-right: 16px; } }

/* ---- Join page on laptop screens (2026-10-20): the page fits in one window at 100% browser zoom.
 * A laptop at 150% Windows scaling leaves ~1280 × 585 px for the page; the layout above needs ~700 px
 * of height, so short windows scrolled. Here the whole join page is drawn smaller (the approved look at
 * 80% browser zoom), keeping the fit-to-window layout. The height comes from the shell (flex), not vh,
 * so the zoom does not shrink it. Very short windows still scroll. ---- */
/* A 1080p screen at 100% leaves ~880 px: it fitted, but looked oversized. */
@media (min-width: 1025px) and (min-height: 760px) and (max-height: 960px) {
    .jx { zoom: .88; overflow-y: auto; }
    .jx-main { flex: 1 0 auto; height: auto; min-height: 0; }
}
/* The form's language row (2026-11-06) made the page taller: tighter spacing here keeps it in one window. */
@media (min-width: 1025px) and (max-height: 759px) {
    .jx { zoom: .8; overflow-y: auto; }
    .jx-top-in { height: 52px; }
    .jx-main { flex: 1 0 auto; height: auto; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
    .jx-left { gap: 8px; }
    .jx-right { gap: 10px; }
    .jx-stage { flex: 1 1 auto; height: auto; min-height: 260px; }
    .jx-intro { gap: 6px; }
    .jx h1 { font-size: 28px; }
    .jx-card { padding: 14px 24px; gap: 10px; }
    .jx-grid2 { gap: 8px 16px; }
    .jx-field { gap: 4px; }
    .jx-input { height: 40px; }
    .jx-wa { height: 40px; }
    .jx-seg { padding: 3px; }
    .jx-seg button { height: 34px; }
    .jx-cta { height: 44px; }
    .jx-cta-wrap { gap: 8px; }
}
@media (min-width: 1025px) and (max-height: 579px) {
    .jx { zoom: .7; }
}

/* ---- End dialog on laptop screens (2026-10-20): drawn at 75% (the approved look at 75% browser zoom),
 * so "Ask our team to contact me" with its form and Send button fits at 100% zoom. The dialog itself
 * scrolls if a window is still too short. ---- */
.xd-end-dialog { overflow-y: auto; place-items: safe center; }
@media (min-width: 1025px) and (max-height: 759px) {
    .xd-end-card { zoom: .75; }
}
/* (v5, 2026-10-21) Celine, the Azure avatar: transparent videos on the brand's violet, the whole
 * person (head to knees) standing at the bottom of the stage; her portrait on the summary page. */
.jx-celine .jx-face { background: radial-gradient(90% 75% at 50% 35%, #3b2a7a 0%, #261848 55%, #1A0F33 100%); }
.jx-celine .jx-face::before { display: none; }
.jx-celine .jx-face video { object-fit: contain; object-position: 50% 100%; }
.xsum-face.celine { background-size: 190% auto; background-position: 50% 4%; background-color: #261848; }
/* Celine waiting: a still, smiling frame that only breathes (the idle video moved her hands). */
.jx-celine #xd-guide-idle { transform-origin: 50% 100%; animation: jx-breathe 4.8s ease-in-out infinite; }
@keyframes jx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012) translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .jx-celine #xd-guide-idle { animation: none; } }
/* Paused: Celine's still, smiling frame in place of the live avatar (same crop, same place). */
.xd-azure-still { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.xd-tile-agent.held .xd-azure-still { opacity: 1; }
.xd-tile-agent.held .xd-azure-video { opacity: 0; }
/* Her video froze (no frame for 0.7 s): the same still frame covers it until frames come again. */
.xd-tile-agent.frozen .xd-azure-still { opacity: 1; transition-duration: .15s; }
.xd-tile-agent.frozen .xd-azure-video { opacity: 0; }
/* End dialog: "Talk to our team instead" is a clear second button, not a small link. */
.xd-end-link { text-decoration: none; padding: 12px 20px; border: 1.5px solid var(--blue); border-radius: 12px; font-weight: 600; transition: background .15s ease; }
.xd-end-link:hover { background: rgba(124, 92, 255, .08); }
/* Waiting line (Azure avatar busy): over the call, the call starts by itself on their turn. */
.xd-queue { position: absolute; inset: 0; z-index: 38; display: grid; place-items: safe center; padding: 16px; overflow-y: auto; background: rgba(12, 10, 29, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: xd-fade .2s ease; }
.xd-queue[hidden] { display: none; }
.xd-queue-card { width: min(440px, 100%); padding: 28px 28px 24px; border-radius: 22px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); }
.xd-queue-face { width: 112px; height: 112px; margin: 0 auto 14px; border-radius: 50%; background-color: #261848; background-size: 190% auto; background-position: 50% 4%; background-repeat: no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(124, 92, 255, .45); }
.xd-queue-card h2 { margin: 0 0 12px; font-size: 1.25rem; }
.xd-queue-pos { font-size: 1.05rem; color: var(--muted); }
.xd-queue-pos b { display: inline-block; margin: 0 4px; font-size: 2.2rem; line-height: 1; color: var(--blue); vertical-align: -6px; }
.xd-queue-ring { position: relative; width: 104px; height: 104px; margin: 14px auto 8px; }
.xd-queue-ring[hidden] { display: none; }
.xd-queue-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.xd-queue-yes { width: 100%; margin: 0 0 14px; }
.xd-queue-yes[hidden] { display: none; }
.xd-queue-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.xd-queue-ring circle { fill: none; stroke: #ece9fb; stroke-width: 3; }
.xd-queue-ring .xd-queue-arc { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset .3s linear; }
.xd-queue-wait { margin: 0 0 14px; font-weight: 600; }
.xd-queue-ready { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin: 0 0 16px; color: #059669; font-size: .92rem; text-align: left; }
.xd-queue-ready svg { flex: none; margin-top: 2px; }
.xd-queue-long { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }
.xd-queue-card.starting .xd-queue-pos, .xd-queue-card.starting .xd-queue-long { display: none; }
.xd-queue-alt { display: grid; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid #eee9fb; }
.xd-queue-alt > span { color: var(--muted); font-size: .92rem; }
.xd-queue-alt .xd-end-btn { width: 100%; }
.xd-queue-alt .xd-end-link { width: 100%; }
/* Join page: arrived from a booked slot's link. */
.jx-booked { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #F1EDFF; color: #5B3FE0; font-weight: 600; font-size: .95rem; }