/* Zoho MCP page only. Loaded via `extra: crm, p-mcp`. Every class is scoped with .pxz- */
:root { --pxz-blue: #226DB4; --pxz-red: #E42527; --pxz-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- hero: AI agent chat with tool calls ---------- */
.pxz-hero .pxz-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pxz-hero .pxz-h1 { max-width: 15ch; }
.pxz-hero .crm-sub { max-width: 38ch; }
.pxz-tops { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 580px; }
.pxz-tops li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #fff; border: 1px solid #DCE7EF; font: 600 13.5px/1.25 var(--f-body); color: #082238; box-shadow: 0 10px 20px -16px rgba(8,34,56,.5); }
.pxz-tops svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: #E6F0FA; fill: none; stroke: var(--pxz-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pxz-agent { position: relative; margin: 0; padding: 18px 8px 26px; }
.pxz-win { position: relative; border-radius: 18px; background: #fff; border: 1px solid #DCE7EF; box-shadow: 0 60px 100px -50px rgba(8,34,56,.55), 0 1px 0 #fff inset; overflow: hidden; will-change: transform; }
.pxz-win__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #F3F7F9; border-bottom: 1px solid #E2E8F0; font: 700 13px/1 var(--f-display); color: #082238; }
.pxz-win__dots { display: inline-flex; gap: 5px; }
.pxz-win__dots i { width: 9px; height: 9px; border-radius: 50%; background: #CBD5E1; }
.pxz-win__dots i:first-child { background: #F87171; } .pxz-win__dots i:nth-child(2) { background: #FBBF24; } .pxz-win__dots i:nth-child(3) { background: #34D399; }
.pxz-win__conn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 9px; border-radius: 999px; background: #E6F0FA; font: 600 11.5px/1 var(--f-body); color: #1D4F86; }
.pxz-win__conn i { width: 7px; height: 7px; border-radius: 50%; background: #3FB97A; box-shadow: 0 0 0 3px rgba(63,185,122,.25); }
.pxz-win__bar em { padding: 4px 8px; border-radius: 999px; background: #fff; border: 1px solid #E2E8F0; font: 600 10.5px/1 var(--f-body); font-style: normal; color: #64748B; }
.pxz-win__body { display: grid; gap: 12px; padding: 18px 18px 34px; min-height: 380px; align-content: start; }
.pxz-bub { margin: 0; max-width: 88%; padding: 12px 15px; border-radius: 16px; font: 500 14px/1.5 var(--f-body); }
.pxz-bub--you { justify-self: end; background: #082238; color: #fff; border-bottom-right-radius: 5px; }
.pxz-bub--ai { justify-self: start; background: #F3F7F9; color: #334155; border: 1px solid #E2E8F0; border-bottom-left-radius: 5px; }
.pxz-bub--ai b { color: #082238; }
.pxz-think { display: inline-flex; gap: 5px; margin: 0; padding: 10px 14px; border-radius: 14px; background: #F3F7F9; justify-self: start; }
.pxz-think span { width: 7px; height: 7px; border-radius: 50%; background: #94A3B8; animation: pxzDot 1s ease-in-out infinite; }
.pxz-think span:nth-child(2) { animation-delay: .15s; } .pxz-think span:nth-child(3) { animation-delay: .3s; }
.pxz-calls { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxz-call { position: relative; display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #DCE7EF; border-left: 3px solid var(--pxz-blue); font: 500 12.5px/1.3 var(--f-body); color: #64748B; box-shadow: 0 10px 22px -18px rgba(8,34,56,.5); }
.pxz-call code { font: 700 12.5px/1 var(--pxz-mono); color: #082238; }
.pxz-call span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxz-call--w { border-left-color: #FFB81C; }
.pxz-res { padding: 4px 8px; border-radius: 999px; background: #F3F7F9; font: 700 10.5px/1 var(--f-body); font-style: normal; color: #64748B; white-space: nowrap; transition: background .3s, color .3s; }
.pxz-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font: 600 12.5px/1.2 var(--f-body); box-shadow: 0 18px 30px -16px rgba(8,34,56,.7); will-change: transform; }
.pxz-badge--who { left: -16px; bottom: 2px; background: #082238; color: #BFD3E2; }
.pxz-badge--who b { color: #fff; }
.pxz-badge--who svg { width: 16px; height: 16px; fill: none; stroke: #FFB81C; stroke-width: 2; stroke-linecap: round; }
.pxz-badge--log { right: -10px; top: 0; background: #FFB81C; color: #082238; }
.pxz-badge--log i { width: 8px; height: 8px; border-radius: 50%; background: #15803D; box-shadow: 0 0 0 4px rgba(21,128,61,.2); }

/* hero animation states (set by p-mcp.js); default = finished state for no-JS / reduced motion */
.pxz-agent.is-anim .pxz-think, .pxz-agent.is-anim .pxz-call, .pxz-agent.is-anim .pxz-bub--ai, .pxz-agent.is-anim .pxz-bub--you, .pxz-agent.is-anim .pxz-badge--log { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); }
.pxz-agent:not(.is-anim) .pxz-think { display: none; }
.pxz-agent.is-anim .pxz-think { display: none; }
.pxz-agent.is-s1 .pxz-bub--you { opacity: 1; transform: none; }
.pxz-agent.is-s2:not(.is-s3) .pxz-think { display: inline-flex; opacity: 1; transform: none; }
.pxz-agent.is-s3 .pxz-call:nth-child(1), .pxz-agent.is-s4 .pxz-call:nth-child(2), .pxz-agent.is-s5 .pxz-call:nth-child(3) { opacity: 1; transform: none; }
.pxz-agent.is-s4 .pxz-call:nth-child(1) .pxz-res, .pxz-agent.is-s5 .pxz-call:nth-child(2) .pxz-res, .pxz-agent.is-s6 .pxz-call:nth-child(3) .pxz-res,
.pxz-agent:not(.is-anim) .pxz-res { background: #DDF4E6; color: #15803D; }
.pxz-agent.is-s6 .pxz-bub--ai, .pxz-agent.is-s6 .pxz-badge--log { opacity: 1; transform: none; }
.pxz-agent.is-fade .pxz-bub, .pxz-agent.is-fade .pxz-call, .pxz-agent.is-fade .pxz-badge--log { opacity: 0; transition-duration: .5s; }
@keyframes pxzDot { 50% { transform: translateY(-4px); background: var(--pxz-blue); } }

/* ---------- 01 Why Zoho MCP: split list + sticky server card ---------- */
.pxz-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 44px; }
.pxz-elist { margin: 0; padding: 0; list-style: none; border-top: 1px solid #E2E8F0; }
.pxz-e { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 24px 14px 24px 4px; border-bottom: 1px solid #E2E8F0; border-radius: 0; outline: none; transition: background .3s; position: relative; }
.pxz-e::before { content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--pxz-blue); transform: scaleY(0); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pxz-e.is-on::before, .pxz-e:focus-visible::before { transform: none; }
.pxz-e:focus-visible { box-shadow: 0 0 0 3px rgba(0,163,217,.35); border-radius: 10px; }
.pxz-e__n { font: 800 26px/1 var(--f-display); color: #CBD5E1; transition: color .3s; }
.pxz-e.is-on .pxz-e__n { color: var(--pxz-blue); }
.pxz-e h3 { margin: 2px 0 6px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.pxz-e p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; }
.pxz-e__chip { display: inline-block; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: #FFF4D6; font: 600 12px/1.2 var(--f-body); color: #7A4A00; }
.pxz-srv { position: sticky; top: 110px; }
.pxz-srv__card { padding: 20px 22px; border-radius: 20px; background: #082238; color: #BFD3E2; box-shadow: 0 50px 90px -50px rgba(8,34,56,.8); background-image: radial-gradient(120% 80% at 100% 0%, rgba(0,163,217,.22), transparent 60%); }
.pxz-srv__top { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(191,211,226,.15); }
.pxz-srv__top img { padding: 3px; border-radius: 8px; background: #fff; }
.pxz-srv__top b { font: 700 16px/1 var(--pxz-mono); color: #fff; }
.pxz-srv__top em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.1); font: 600 11px/1 var(--f-body); font-style: normal; color: #BFD3E2; }
.pxz-srv dl { display: grid; gap: 6px; margin: 0; }
.pxz-srv dl > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; transition: background .35s, border-color .35s, opacity .35s; }
.pxz-srv.has-on dl > div { opacity: .5; }
.pxz-srv dl > div.is-on { opacity: 1; background: rgba(95,211,243,.1); border-color: rgba(95,211,243,.35); }
.pxz-srv dt { font: 600 12px/1.3 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #7FA3BD; }
.pxz-srv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 600 13.5px/1.35 var(--f-body); color: #fff; }
.pxz-big { font: 800 28px/1 var(--f-display); color: #FFB81C; }
.pxz-srv dd small { font: 500 12px/1.3 var(--f-body); color: #9DBBD0; }
.pxz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #fff; font: 600 12px/1 var(--f-body); color: #082238; }
.pxz-tgl span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.06); font: 600 12px/1 var(--pxz-mono); color: #7FA3BD; text-decoration: line-through; }
.pxz-tgl span.on { color: #fff; text-decoration: none; }
.pxz-tgl i { position: relative; width: 22px; height: 12px; border-radius: 999px; background: #475569; }
.pxz-tgl i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: left .3s; }
.pxz-tgl .on i { background: #3FB97A; } .pxz-tgl .on i::after { left: 12px; }
.pxz-logline { display: flex; align-items: center; gap: 7px; width: 100%; font: 500 12px/1.3 var(--pxz-mono); color: #CFE0EC; }
.pxz-logline i { width: 7px; height: 7px; border-radius: 50%; background: #3FB97A; flex: none; }
.pxz-apps img { padding: 3px; border-radius: 7px; background: #fff; }
.pxz-edges__more { margin: 34px 0 0; max-width: 78ch; font-size: 16px; line-height: 1.65; color: #334155; }
.pxz-edges__more a, .pxz-mig a, .pxz-cost a { color: #0A6FA8; font-weight: 600; }

/* ---------- 02 one prompt: sequence diagram ---------- */
.pxz-seqsec { overflow-x: clip; }
.pxz-seq { --cols: 5; position: relative; margin-top: 40px; padding: 0 0 10px; border-radius: 24px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.pxz-seq__heads { position: sticky; top: 72px; z-index: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); margin: 0; padding: 16px 0 12px; list-style: none; border-radius: 24px 24px 0 0; background: rgba(243,247,249,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #E2E8F0; }
.pxz-seq__heads li { display: grid; justify-items: center; gap: 6px; font: 700 13.5px/1.2 var(--f-display); color: #082238; text-align: center; }
.pxz-seq__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid #DCE7EF; box-shadow: 0 10px 20px -16px rgba(8,34,56,.6); font: 800 12px/1 var(--f-body); color: #082238; }
.pxz-seq__ic--you { background: #082238; color: #fff; border-color: #082238; }
.pxz-seq__ic--log svg { width: 22px; height: 22px; fill: none; stroke: #15803D; stroke-width: 1.8; stroke-linecap: round; }
.pxz-seq__msgs { position: relative; margin: 0; padding: 8px 0 0; list-style: none; background-image: linear-gradient(90deg, transparent calc(10% - 1px), #CBD5E1 calc(10% - 1px), #CBD5E1 calc(10% + 1px), transparent calc(10% + 1px), transparent calc(30% - 1px), #CBD5E1 calc(30% - 1px), #CBD5E1 calc(30% + 1px), transparent calc(30% + 1px), transparent calc(50% - 1px), #CBD5E1 calc(50% - 1px), #CBD5E1 calc(50% + 1px), transparent calc(50% + 1px), transparent calc(70% - 1px), #CBD5E1 calc(70% - 1px), #CBD5E1 calc(70% + 1px), transparent calc(70% + 1px), transparent calc(90% - 1px), #CBD5E1 calc(90% - 1px), #CBD5E1 calc(90% + 1px), transparent calc(90% + 1px)); }
.pxz-m { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); padding: 14px 0; }
.pxz-m > * { grid-column: var(--a) / var(--e); grid-row: 1; }
.pxz-m__who { display: none; }
.pxz-m__arr { position: relative; align-self: end; height: 14px; margin: 0 calc(100% / var(--n) / 2); }
.pxz-m__arr::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--pxz-blue); transform-origin: left; transform: scaleX(var(--k, 1)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pxz-m__arr::after { content: ""; position: absolute; right: -1px; top: 1px; border: 6px solid transparent; border-left: 9px solid var(--pxz-blue); border-right: 0; opacity: var(--o, 1); transition: opacity .3s .45s; }
.pxz-m.is-back .pxz-m__arr::before { transform-origin: right; background: repeating-linear-gradient(90deg, #64748B 0 6px, transparent 6px 10px); }
.pxz-m.is-back .pxz-m__arr::after { right: auto; left: -1px; border-left: 0; border-right: 9px solid #64748B; }
.pxz-m.is-ask .pxz-m__arr::before { transform-origin: right; background: #E8A400; }
.pxz-m.is-ask .pxz-m__arr::after { right: auto; left: -1px; border-left: 0; border-right: 9px solid #E8A400; }
.pxz-m.is-self .pxz-m__arr { margin: 0 0 0 50%; width: 46%; height: 30px; }
.pxz-m.is-self .pxz-m__arr::before { top: 0; bottom: 0; height: auto; background: none; border: 2px solid #3FB97A; border-left: 0; border-radius: 0 12px 12px 0; }
.pxz-m.is-self .pxz-m__arr::after { right: auto; left: -2px; top: auto; bottom: -5px; border-left: 0; border-right: 9px solid #3FB97A; }
.pxz-m p { position: relative; z-index: 1; align-self: start; margin: 0 auto 6px; max-width: 34ch; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; font: 400 13.5px/1.45 var(--f-body); color: #475569; text-align: left; box-shadow: 0 12px 24px -20px rgba(8,34,56,.6); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.pxz-m.is-self p { margin-left: 4px; max-width: 30ch; }
.pxz-m p b { display: block; margin-bottom: 2px; font: 700 14px/1.3 var(--f-display); color: #082238; }
.pxz-m.is-now p { border-color: var(--pxz-blue); box-shadow: 0 0 0 3px rgba(34,109,180,.12), 0 18px 30px -22px rgba(8,34,56,.6); }
.pxz-m { grid-auto-rows: auto; }
.pxz-m > p { grid-row: 1; }
.pxz-m > .pxz-m__arr { grid-row: 2; }
.pxz-seq.is-js .pxz-m:not(.is-in) p { opacity: 0; transform: translateY(14px); }
.pxz-seq.is-js .pxz-m:not(.is-in) { --k: 0; --o: 0; }

/* ---------- 03 signature: prompt lab (dark band) ---------- */
.pxz-lab { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 22px; margin-top: 40px; }
.pxz-lab__side { display: grid; gap: 12px; align-content: start; }
.pxz-lab__h { margin: 6px 0 0; font: 700 13px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #7FD8EE; }
.pxz-lab__prompts { display: grid; gap: 8px; }
.pxz-prompt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(191,211,226,.2); background: rgba(255,255,255,.05); color: #CFE0EC; text-align: left; font: 500 14px/1.4 var(--f-body); cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.pxz-prompt img { width: 30px; height: 30px; padding: 4px; border-radius: 9px; background: #fff; }
.pxz-prompt b { display: block; font: 700 13px/1.2 var(--f-display); color: #fff; margin-bottom: 2px; }
.pxz-prompt:hover { background: rgba(255,255,255,.09); }
.pxz-prompt.is-on { border-color: #FFB81C; background: rgba(255,184,28,.1); box-shadow: 0 0 0 1px #FFB81C inset; }
.pxz-prompt:focus-visible, .pxz-mode:focus-visible, .pxz-lab__reset:focus-visible { outline: 3px solid #5FD3F3; outline-offset: 2px; }
.pxz-lab__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(0,0,0,.25); }
.pxz-mode { padding: 11px 10px; border: 0; border-radius: 10px; background: transparent; color: #BFD3E2; font: 600 13.5px/1.2 var(--f-body); cursor: pointer; transition: background .25s, color .25s; }
.pxz-mode.is-on { background: #fff; color: #082238; }
.pxz-lab__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.pxz-lab__reset { padding: 12px 16px; border: 1px solid rgba(191,211,226,.3); border-radius: 12px; background: none; color: #CFE0EC; font: 600 14px/1 var(--f-body); cursor: pointer; }
.pxz-lab__con { display: flex; flex-direction: column; min-height: 520px; border-radius: 20px; background: #04121F; border: 1px solid rgba(95,211,243,.2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); overflow: hidden; }
.pxz-con__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(191,211,226,.12); font: 700 13px/1 var(--f-display); color: #fff; }
.pxz-con__who { margin-left: auto; font: 500 12px/1 var(--f-body); color: #7FA3BD; }
.pxz-con__bar em { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.1); font: 600 10.5px/1 var(--f-body); font-style: normal; color: #BFD3E2; }
.pxz-con__q { align-self: flex-end; margin: 16px 16px 4px; max-width: 86%; padding: 11px 14px; border-radius: 14px 14px 4px 14px; background: #fff; color: #082238; font: 500 14px/1.45 var(--f-body); }
.pxz-con__q:empty { display: none; }
.pxz-con__calls { display: grid; gap: 8px; margin: 10px 16px 0; padding: 0; list-style: none; }
.pxz-cc { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(191,211,226,.14); border-left: 3px solid #5FD3F3; animation: pxzIn .45s cubic-bezier(.2,.8,.2,1) both; }
.pxz-cc img { width: 22px; height: 22px; padding: 2px; border-radius: 6px; background: #fff; }
.pxz-cc code { font: 700 13px/1.2 var(--pxz-mono); color: #fff; }
.pxz-cc code small { margin-left: 8px; font: 600 10.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #7FA3BD; }
.pxz-cc__args { grid-column: 2 / -1; font: 500 12px/1.4 var(--pxz-mono); color: #9DBBD0; overflow-wrap: anywhere; }
.pxz-cc__res { padding: 4px 9px; border-radius: 999px; background: rgba(63,185,122,.18); color: #7BE0A8; font: 700 11px/1 var(--f-body); white-space: nowrap; }
.pxz-cc.is-w { border-left-color: #FFB81C; }
.pxz-cc.is-off { border-left-color: #64748B; border-style: dashed; opacity: .75; }
.pxz-cc.is-off code { color: #94A3B8; text-decoration: line-through; }
.pxz-cc.is-off .pxz-cc__res { background: rgba(148,163,184,.18); color: #CBD5E1; }
.pxz-con__a { margin: 12px 16px 0; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: rgba(95,211,243,.1); border: 1px solid rgba(95,211,243,.25); color: #E2EEF6; font: 500 14px/1.5 var(--f-body); animation: pxzIn .45s cubic-bezier(.2,.8,.2,1) both; }
.pxz-con__a b { color: #fff; }
.pxz-con__log { margin: auto 16px 0; padding-top: 16px; }
.pxz-con__logh { margin: 0 0 6px; font: 700 11.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #7FA3BD; }
.pxz-con__log table { width: 100%; border-collapse: collapse; font: 500 12px/1.3 var(--pxz-mono); color: #CFE0EC; }
.pxz-con__log th { padding: 6px 8px; text-align: left; font: 600 11px/1 var(--f-body); color: #7FA3BD; border-bottom: 1px solid rgba(191,211,226,.15); }
.pxz-con__log td { padding: 7px 8px; border-bottom: 1px solid rgba(191,211,226,.08); }
.pxz-con__log tr.is-new td { animation: pxzFlash 1.2s ease 1; }
.pxz-con__log .ok { color: #7BE0A8; }
.pxz-empty td { color: #64748B; font-family: var(--f-body); }
.pxz-con__msg { margin: 12px 16px 16px; padding: 10px 12px; border-radius: 10px; background: rgba(255,184,28,.1); color: #FFE2A0; font: 500 13.5px/1.45 var(--f-body); }
.pxz-con__msg b { color: #fff; }
@keyframes pxzIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pxzFlash { 0% { background: rgba(255,184,28,.25); } 100% { background: transparent; } }

/* ---------- migration tweaks ---------- */
.pxz-mig .crm-mtabs { flex-wrap: wrap; }

/* ---------- pricing: the bill ---------- */
.pxz-cost__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.pxz-cost__tip { margin: 18px 0 0; padding: 14px 16px; max-width: 60ch; border-radius: 14px; background: #FFF8E6; border: 1px solid #F8E3A8; font: 500 15px/1.55 var(--f-body); color: #5B3B00; }
.pxz-bill { padding: 26px 26px 24px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 50px 90px -55px rgba(8,34,56,.6); }
.pxz-bill__h { margin: 0 0 8px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pxz-bill__lines { margin: 0 0 20px; padding: 0; list-style: none; }
.pxz-bill__lines li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px dashed #E2E8F0; }
.pxz-bill__lines b { display: block; font: 700 15.5px/1.3 var(--f-display); color: #082238; }
.pxz-bill__lines small { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--f-body); color: #64748B; }
.pxz-bill__lines strong { max-width: 160px; text-align: right; font: 700 14px/1.3 var(--f-body); color: #334155; }
.pxz-bill__lines li.is-zero strong { font: 800 30px/1 var(--f-display); color: #15803D; }
.pxz-bill__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #F3F7F9; }
.pxz-bill__ic--etg { background: #082238; color: #FFB81C; font: 800 11px/1 var(--f-display); letter-spacing: .04em; }
.pxz-bill__lines li:last-child { border-bottom: 0; }
.pxz-bill__lines li:last-child strong { color: #0A6FA8; }

/* ---------- compare ---------- */
.pxz-mono { display: inline-grid; width: 22px; height: 22px; margin-right: 10px; border-radius: 6px; font-size: 9px; vertical-align: middle; }
#compare .crm-vs__chart li { grid-template-columns: 128px 1fr auto; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pxz-srv dl > div { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .pxz-hero .pxz-hero__grid { grid-template-columns: 1fr; }
  .pxz-agent { max-width: 620px; }
  .pxz-split { grid-template-columns: 1fr; }
  .pxz-srv { position: relative; top: 0; order: -1; }
  .pxz-srv.has-on dl > div { opacity: 1; }
  .pxz-lab { grid-template-columns: 1fr; }
  .pxz-cost__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pxz-seq { padding: 8px 14px 14px; }
  .pxz-seq__heads { display: none; }
  .pxz-seq__msgs { background: none; padding: 0; border-left: 2px solid #CBD5E1; margin-left: 8px; }
  .pxz-m { display: block; padding: 10px 0 10px 18px; position: relative; }
  .pxz-m::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--pxz-blue); }
  .pxz-m.is-back::before { border-color: #64748B; } .pxz-m.is-ask::before { border-color: #E8A400; } .pxz-m.is-self::before { border-color: #3FB97A; }
  .pxz-m__arr { display: none; }
  .pxz-m__who { display: inline-block; margin-bottom: 6px; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid #DCE7EF; font: 700 11.5px/1 var(--f-body); color: #1D4F86; }
  .pxz-m p, .pxz-m.is-self p { max-width: none; margin: 0; }
}
@media (max-width: 640px) {
  .pxz-win__body { min-height: 0; padding: 14px; }
  .pxz-call { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .pxz-call span { display: none; }
  .pxz-badge--who { left: 0; top: auto; bottom: -6px; font-size: 11.5px; }
  .pxz-badge--log { display: none; }
  .pxz-win__conn { display: none; }
  .pxz-e { grid-template-columns: 38px minmax(0, 1fr); padding-right: 0; }
  .pxz-e__n { font-size: 20px; }
  .pxz-srv__card { padding: 16px; }
  .pxz-srv dl > div { grid-template-columns: 1fr; gap: 6px; }
  .pxz-lab__modes { grid-template-columns: 1fr; }
  .pxz-lab__con { min-height: 0; }
  .pxz-cc { grid-template-columns: 22px minmax(0, 1fr); }
  .pxz-cc__res { grid-column: 2; justify-self: start; }
  .pxz-con__log { overflow-x: auto; }
  .pxz-bill { padding: 20px 16px; }
  .pxz-bill__lines li { grid-template-columns: 36px minmax(0, 1fr); }
  .pxz-bill__lines strong { grid-column: 2; text-align: left; max-width: none; }
  #compare .crm-vs__chart li { grid-template-columns: 96px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pxz-think span, .pxz-cc, .pxz-con__a, .pxz-con__log tr.is-new td { animation: none !important; }
  .pxz-m p, .pxz-m__arr::before, .pxz-m__arr::after, .pxz-e::before, .pxz-srv dl > div { transition: none !important; }
}