/* Zoho Catalyst page only (loaded via `extra: crm, p-catalyst`). Every class is scoped with .pxy- */
:root { --pxy-red: #E42527; --pxy-blue: #226DB4; --pxy-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* ======================= HERO: the developer's view (dark) ======================= */
.pxy-hero { background: linear-gradient(135deg, #061A2E 0%, #0A3A63 55%, #07605E 100%); color: #C9DCEA; margin-top: 14px; }
.pxy-hero .pg-hero__bg i:nth-child(1) { background: radial-gradient(closest-side, rgba(0,163,217,.35), transparent); }
.pxy-hero .pg-hero__bg i:nth-child(2) { background: radial-gradient(closest-side, rgba(63,185,122,.28), transparent); }
.pxy-hero .pg-hero__bg i:nth-child(3) { background: radial-gradient(closest-side, rgba(228,37,39,.16), transparent); }
.pxy-hero__grid-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.pxy-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pxy-hero .hp-kick .hp-kick__t { color: #7DD3F0; }
.pxy-hero .pg-h1 { color: #fff; }
.pxy-hero .hp-mark { color: #5FD3F3 !important; }
.pxy-hero .crm-sub { color: #E2F1FA; }
.pxy-hero .pg-lead { color: #C9DCEA; }
.pxy-hero .pg-trust { border-top-color: rgba(255,255,255,.16); }
.pxy-hero .pg-trust__badge { border-right-color: rgba(255,255,255,.16); }
.pxy-hero .pg-trust__badge img { box-sizing: content-box; padding: 6px 8px; border-radius: 10px; background: #fff; width: 62px; }
.pxy-hero .pg-trust__badge b { color: #fff; }
.pxy-hero .pg-trust__badge span, .pxy-hero .pg-trust__people > span:last-child { color: #C9DCEA; }
.pxy-hero .pg-trust__people em { color: #9FC0D8; }
.pxy-hero .pg-trust__faces img { border-color: #0A3A63; }
.pxy-hero .btn--red { color: #082238 !important; }
.pxy-ghost { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.32) !important; color: #fff !important; }
.pxy-ghost:hover { border-color: #5FD3F3 !important; }

.pxy-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; max-width: 600px; }
.pxy-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); font: 600 14px/1.2 var(--f-body); color: #fff; }
.pxy-chips svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #5FD3F3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the editor + terminal card */
.pxy-dev { position: relative; margin: 0; }
.pxy-ed { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; background: #0B1626; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.2); }
.pxy-ed__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #0F1D30; border-bottom: 1px solid rgba(255,255,255,.08); }
.pxy-ed__bar > span { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.pxy-ed__bar > span:nth-child(1) { background: #F2665E; } .pxy-ed__bar > span:nth-child(2) { background: #F5BE4F; } .pxy-ed__bar > span:nth-child(3) { background: #5BC665; }
.pxy-arch__bar em, .pxy-arch-mini__h em { background: #FFF1CC !important; color: #7A4F00 !important; }
.pxy-card--big .pxy-viz { margin-bottom: 18px; } .pxy-card--big h3 { margin-top: auto; }
.pxy-ed__bar b { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1 var(--pxy-mono); color: #BFD3E2; }
.pxy-ed__bar em, .pxy-arch__bar em, .pxy-arch-mini__h em { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 6px; background: rgba(255,184,28,.16); color: #FFD27A; font: 600 11px/1.2 var(--f-body); font-style: normal; }
.pxy-ed__code { margin: 0; padding: 14px 18px 12px; font: 500 13px/1.7 var(--pxy-mono); color: #D6E4F0; overflow: hidden; tab-size: 2; }
.pxy-ed__code i { font-style: normal; }
.pxy-ed__code .k { color: #C792EA; } .pxy-ed__code .f { color: #82AAFF; } .pxy-ed__code .s { color: #C3E88D; } .pxy-ed__code .n { color: #F78C6C; } .pxy-ed__code .c { color: #6F8AA3; }
.pxy-l { display: block; height: 1.7em; white-space: pre; overflow: hidden; }
.pxy-ed__code.is-typing .pxy-l { width: 0; }
.pxy-l.is-cur { overflow: visible; box-shadow: inset -2px 0 0 #5FD3F3; }
.pxy-ed__code.is-done .pxy-l.is-cur { animation: pxyCaret 1s steps(1) infinite; }
@keyframes pxyCaret { 50% { box-shadow: none; } }
.pxy-term { padding: 12px 18px 14px; background: #07111D; border-top: 1px solid rgba(255,255,255,.08); font: 500 12.5px/1.65 var(--pxy-mono); color: #9FC0D8; min-height: 150px; box-sizing: border-box; padding-bottom: 44px; }
.pxy-term__cmd { margin: 0 0 4px; color: #fff; } .pxy-term__cmd b { color: #3FB97A; margin-right: 6px; }
.pxy-term ul { margin: 0; padding: 0; list-style: none; }
.pxy-term li { position: relative; padding-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxy-term li::before { content: "›"; position: absolute; left: 2px; color: #7DD3F0; }
.pxy-term li.ok::before { content: "✓"; color: #3FB97A; }
.pxy-term li.done { color: #FFD27A; font-weight: 700; } .pxy-term li.done::before { content: "●"; color: #3FB97A; font-size: 10px; top: 1px; }
.pxy-term.is-anim .pxy-term__cmd, .pxy-term.is-anim li { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.pxy-term.is-anim .is-on { opacity: 1; transform: none; }

/* mini architecture strip under the editor */
.pxy-arch-mini { position: relative; z-index: 2; margin: -26px 34px 0 -34px; padding: 14px 16px 16px; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.pxy-arch-mini__h { display: flex; align-items: center; margin: 0 0 12px; font: 700 13px/1.2 var(--f-display); color: #082238; }
.pxy-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pxy-mini li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.pxy-mini li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: calc(50% + 24px); width: calc(100% - 48px); height: 2px; background: #E2E8F0; }
.pxy-mini li:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: 21px; left: calc(50% + 24px); width: calc(100% - 48px); height: 2px; background: linear-gradient(90deg, #00A3D9, #3FB97A); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.pxy-mini li.is-flow::before { transform: scaleX(1); }
.pxy-mini span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid #E2E8F0; background: #F3F7F9; color: #94A3B8; transition: border-color .3s, background .3s, color .3s, box-shadow .3s, transform .3s; }
.pxy-mini svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pxy-mini img { width: 22px; height: 22px; opacity: .45; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.pxy-mini b { font: 600 11.5px/1.25 var(--f-body); color: #64748B; }
.pxy-mini li.is-lit span { border-color: #00A3D9; background: #E3F6FD; color: #0A6FA8; box-shadow: 0 0 0 4px rgba(0,163,217,.12); transform: translateY(-2px); }
.pxy-mini li.is-lit img { opacity: 1; filter: none; }
.pxy-mini li.is-lit b { color: #082238; }
.pxy-toast { position: absolute; z-index: 3; top: -16px; right: -12px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 999px; background: #fff; color: #082238; font: 700 13px/1 var(--f-body); box-shadow: 0 18px 36px -16px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .4s, transform .4s cubic-bezier(.2,.7,.1,1); }
.pxy-toast i { width: 9px; height: 9px; border-radius: 50%; background: #3FB97A; box-shadow: 0 0 0 4px rgba(63,185,122,.2); }
.pxy-toast.is-on { opacity: 1; transform: none; }

/* ======================= 01. EDGES (bento) ======================= */
.pxy-edges { background: #fff; }
.pxy-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "big big data data" "big big sig web" "gate gate ai ai"; gap: 16px; margin-top: 36px; }
.pxy-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid #E2E8F0; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -44px rgba(8,34,56,.5); transition: border-color .25s, transform .3s cubic-bezier(.2,.7,.1,1), box-shadow .3s; }
.pxy-card:hover { border-color: #9DD3EC; transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(8,34,56,.55); }
.pxy-card h3 { margin: 16px 0 6px; font: 700 19px/1.28 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxy-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; }
.pxy-card--big { grid-area: big; background: linear-gradient(160deg, #082238, #0A3A63 70%, #0B4C66); border-color: transparent; padding: 28px; }
.pxy-card--big h3 { color: #fff; font-size: 24px; } .pxy-card--big p { color: #C9DCEA; font-size: 16px; }
.pxy-card--data { grid-area: data; } .pxy-card--sig { grid-area: sig; } .pxy-card--web { grid-area: web; } .pxy-card--gate { grid-area: gate; } .pxy-card--ai { grid-area: ai; }
.pxy-vs { align-self: flex-start; margin-top: 14px !important; padding: 5px 11px; border: 1px dashed #CBD5E1; border-radius: 999px; background: #F8FAFC; font: 600 12.5px/1.3 var(--f-body) !important; color: #64748B !important; }
.pxy-viz { position: relative; }
/* functions list */
.pxy-viz--fn ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxy-viz--fn li { display: grid; grid-template-columns: 10px auto 1fr; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.pxy-viz--fn li i { width: 9px; height: 9px; border-radius: 50%; background: #3FB97A; box-shadow: 0 0 0 0 rgba(63,185,122,.6); animation: pxyPing 2.4s infinite; }
.pxy-viz--fn li:nth-child(2) i { animation-delay: .4s; } .pxy-viz--fn li:nth-child(3) i { animation-delay: .8s; } .pxy-viz--fn li:nth-child(4) i { animation-delay: 1.2s; background: #FFB81C; } .pxy-viz--fn li:nth-child(5) i { animation-delay: 1.6s; background: #5FD3F3; }
@keyframes pxyPing { 0% { box-shadow: 0 0 0 0 rgba(63,185,122,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(63,185,122,0); } }
.pxy-viz--fn b { font: 700 15px/1.2 var(--f-display); color: #fff; }
.pxy-viz--fn em { justify-self: end; font: 500 13px/1.2 var(--f-body); font-style: normal; color: #9FC0D8; text-align: right; }
.pxy-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 !important; }
.pxy-langs span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; background: #fff; font: 600 12.5px/1 var(--pxy-mono); color: #082238; }
/* data tiles */
.pxy-viz--data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pxy-viz--data span { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; border-radius: 12px; background: #F3F7F9; border: 1px solid #E5EEF4; }
.pxy-viz--data svg { width: 22px; height: 22px; margin-bottom: 4px; fill: none; stroke: var(--pxy-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pxy-viz--data span:nth-child(3) svg { stroke: var(--pxy-red); }
.pxy-viz--data b { font: 700 14px/1.2 var(--f-display); color: #082238; }
.pxy-viz--data em { font: 500 12px/1.3 var(--f-body); font-style: normal; color: #64748B; }
/* signals */
.pxy-viz--sig { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: #F3F7F9; }
.pxy-viz--sig > span:not(.pxy-sig__line) { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: #fff; box-shadow: 0 6px 14px -8px rgba(8,34,56,.4); }
.pxy-sig__line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #9DD3EC 0 6px, transparent 6px 11px); }
.pxy-sig__line i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #FFB81C; box-shadow: 0 0 0 4px rgba(255,184,28,.2); animation: pxyRun 2.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes pxyRun { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
/* frameworks */
.pxy-viz--web { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-radius: 14px; background: #F3F7F9; }
.pxy-viz--web span { padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #E2E8F0; font: 600 12.5px/1 var(--pxy-mono); color: #082238; }
/* gateway */
.pxy-gate { position: relative; height: 46px; border-radius: 12px; background: #F3F7F9; overflow: hidden; }
.pxy-gate b { position: absolute; top: 6px; bottom: 6px; left: 62%; width: 4px; border-radius: 4px; background: #082238; box-shadow: 0 0 0 4px rgba(8,34,56,.08); }
.pxy-gate i { position: absolute; top: 17px; left: -30px; width: 26px; height: 12px; border-radius: 6px; background: #00A3D9; animation: pxyReq 2.4s linear infinite; animation-delay: var(--d); }
.pxy-gate i.x { background: var(--pxy-red); animation-name: pxyReqX; }
@keyframes pxyReq { 0% { left: -30px; } 100% { left: 100%; } }
@keyframes pxyReqX { 0% { left: -30px; opacity: 1; } 55% { left: calc(62% - 30px); opacity: 1; } 75%, 100% { left: calc(62% - 30px); opacity: 0; } }
.pxy-viz--gate p, .pxy-viz--ai p { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 !important; }
.pxy-viz--gate p span, .pxy-viz--ai p span { padding: 5px 10px; border-radius: 999px; background: #EEF5FA; font: 600 12.5px/1.2 var(--f-body); color: #0A6FA8; }
/* ai doc scan */
.pxy-viz--ai { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; }
.pxy-viz--ai p { margin: 0 !important; }
.pxy-doc { position: relative; display: grid; gap: 6px; height: 86px; box-sizing: border-box; padding: 12px 10px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 10px 20px -14px rgba(8,34,56,.5); overflow: hidden; }
.pxy-doc i { height: 5px; border-radius: 3px; background: #E2E8F0; }
.pxy-doc i:nth-child(2) { width: 70%; } .pxy-doc i.hl { background: #FFD27A; }
.pxy-doc b { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #00A3D9; box-shadow: 0 0 10px 2px rgba(0,163,217,.5); animation: pxyScan 2.6s ease-in-out infinite alternate; }
@keyframes pxyScan { to { top: calc(100% - 2px); } }
.pxy-fair { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: #FFF8E8; border: 1px solid #FBE3A6; }
.pxy-fair img { flex: none; width: 34px; height: 34px; }
.pxy-fair p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; }
.pxy-fair b { color: #082238; }

/* ======================= 02. ONE REQUEST (scroll-lit diagram) ======================= */
.pxy-req { position: relative; background: linear-gradient(180deg, #F3F7F9, #fff); }
.pxy-req__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); margin-top: 40px; }
.pxy-steps { margin: 0; padding: 0; list-style: none; }
.pxy-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; min-height: 40vh; opacity: .38; transition: opacity .4s; }
.pxy-step:last-child { min-height: 0; padding-bottom: 8vh; }
.pxy-step.is-on { opacity: 1; } .pxy-step.is-past { opacity: .62; }
.pxy-step__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; font: 800 15px/1 var(--f-display); color: #64748B; transition: background .3s, border-color .3s, color .3s; }
.pxy-step.is-on .pxy-step__n { background: #082238; border-color: #082238; color: #fff; box-shadow: 0 0 0 6px rgba(0,163,217,.15); }
.pxy-step.is-past .pxy-step__n { background: #3FB97A; border-color: #3FB97A; color: #fff; }
.pxy-step h3 { margin: 6px 0 6px; font: 700 20px/1.3 var(--f-display); color: #082238; }
.pxy-step p { margin: 0; font-size: 16px; line-height: 1.6; }
.pxy-step code { display: inline-block; max-width: 100%; margin-top: 12px; padding: 5px 10px; border-radius: 8px; background: #082238; color: #9FE3C4; font: 500 12.5px/1.4 var(--pxy-mono); overflow-wrap: anywhere; }
.pxy-req__sticky { position: sticky; top: 104px; align-self: start; }
.pxy-arch { margin: 0; padding-bottom: 14px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 80px -50px rgba(8,34,56,.55); overflow: hidden; }
.pxy-arch__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #EEF2F6; }
.pxy-arch__bar b { font: 700 14px/1.2 var(--f-display); color: #082238; }
.pxy-arch__svg { display: block; width: 100%; height: auto; padding: 12px 14px 4px; box-sizing: border-box; }
.pxy-node rect { fill: #F8FAFC; stroke: #E2E8F0; stroke-width: 1.5; transition: fill .35s, stroke .35s; }
.pxy-node text { font: 700 15px var(--f-display, Manrope, sans-serif); fill: #94A3B8; transition: fill .35s; }
.pxy-node text.sub { font: 500 12px var(--f-body, Inter, sans-serif); }
.pxy-node .pxy-ic { fill: none; stroke: #94A3B8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.pxy-node image { opacity: .35; filter: grayscale(1); transition: opacity .35s, filter .35s; }
.pxy-node.is-lit rect { fill: #fff; stroke: #00A3D9; }
.pxy-node.is-lit text { fill: #082238; } .pxy-node.is-lit text.sub { fill: #64748B; }
.pxy-node.is-lit .pxy-ic { stroke: #0A6FA8; }
.pxy-node.is-lit image { opacity: 1; filter: none; }
.pxy-node.is-now rect { stroke-width: 3; fill: #F0FAFE; }
.pxy-links path { fill: none; stroke: #CBD5E1; stroke-width: 2; stroke-dasharray: 4 6; transition: stroke .35s; }
.pxy-links path.is-lit { stroke: #00A3D9; stroke-dasharray: none; }
.pxy-links path.is-now { stroke-dasharray: 8 6; animation: pxyDash .8s linear infinite; }
@keyframes pxyDash { to { stroke-dashoffset: -14; } }
.pxy-ah { fill: #CBD5E1; } .pxy-ah--on { fill: #00A3D9; }
.pxy-arch__log { display: flex; align-items: center; gap: 10px; margin: 6px 16px 0; padding: 10px 14px; border-radius: 10px; background: #082238; font: 500 12.5px/1.4 var(--pxy-mono); color: #9FE3C4; overflow: hidden; }
.pxy-arch__log b { flex: none; font: 700 10.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #FFB81C; }
.pxy-arch__log span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ======================= 03. TRY A FUNCTION (dark) ======================= */
.pxy-light { color: #C9DCEA !important; }
.pxy-play .pg-note { color: #9FC0D8; }
.pxy-pg { position: relative; margin-top: 34px; border-radius: 22px; background: rgba(4,16,30,.6); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 90px -50px rgba(0,0,0,.8); overflow: hidden; }
.pxy-pg__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.pxy-pg__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pxy-pg__tabs button { padding: 10px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: transparent; font: 700 14.5px/1 var(--f-display); color: #C9DCEA; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pxy-pg__tabs button:hover { border-color: #5FD3F3; color: #fff; }
.pxy-pg__tabs button[aria-selected="true"] { background: #fff; border-color: #fff; color: #082238; }
.pxy-pg__tabs button:focus-visible, .pxy-pg__go:focus-visible, .pxy-pg__json:focus-visible { outline: 3px solid #5FD3F3; outline-offset: 2px; }
.pxy-pg__sim { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 13px/1.3 var(--f-body); color: #FFD27A; }
.pxy-pg__sim i { width: 8px; height: 8px; border-radius: 50%; background: #FFB81C; }
.pxy-pg__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pxy-pg__src { min-width: 0; border-right: 1px solid rgba(255,255,255,.1); background: #07111D; }
.pxy-pg__ep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); font: 500 13px/1.3 var(--pxy-mono); color: #fff; }
.pxy-pg__ep b { padding: 4px 8px; border-radius: 6px; background: #3FB97A; color: #062B1C; font: 800 11.5px/1 var(--f-body); letter-spacing: .04em; }
.pxy-pg__ep b.get { background: #5FD3F3; color: #062033; } .pxy-pg__ep b.evt { background: #FFB81C; color: #3A2600; }
.pxy-pg__ep em { margin-left: auto; font: 500 12.5px/1.3 var(--f-body); font-style: normal; color: #9FC0D8; }
.pxy-pg__code { margin: 0; padding: 16px 18px 20px; font: 500 13px/1.7 var(--pxy-mono); color: #D6E4F0; white-space: pre; overflow-x: auto; tab-size: 2; }
.pxy-pg__code i { font-style: normal; } .pxy-pg__code .k { color: #C792EA; } .pxy-pg__code .f { color: #82AAFF; } .pxy-pg__code .s { color: #C3E88D; } .pxy-pg__code .n { color: #F78C6C; } .pxy-pg__code .c { color: #6F8AA3; }
.pxy-pg__run { min-width: 0; padding: 18px 20px 20px; }
.pxy-pg__run fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pxy-pg__run legend { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0; font: 700 15px/1.2 var(--f-display); color: #fff; }
.pxy-pg__run legend span { padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.1); font: 600 11px/1.2 var(--pxy-mono); color: #9FC0D8; }
.pxy-pg__fields { display: grid; gap: 10px; }
.pxy-pg__f { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 10px; }
.pxy-pg__f label { font: 500 13px/1.3 var(--pxy-mono); color: #9FC0D8; }
.pxy-pg__f input, .pxy-pg__f select { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: #07111D; color: #fff; font: 500 14px/1.3 var(--pxy-mono); }
.pxy-pg__f select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FC0D8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; }
.pxy-pg__f input:focus, .pxy-pg__f select:focus { outline: 2px solid #5FD3F3; outline-offset: 1px; border-color: transparent; }
.pxy-pg__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; border: 0; cursor: pointer; color: #082238 !important; }
.pxy-pg__go svg { width: 15px; height: 15px; fill: currentColor; }
.pxy-pg__go[aria-busy="true"] { opacity: .75; cursor: progress; }
.pxy-pg__out { margin-top: 18px; }
.pxy-pg__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 28px; margin: 0; font: 500 13px/1.3 var(--pxy-mono); color: #C9DCEA; }
.pxy-pg__idle { color: #9FC0D8; font-family: var(--f-body); }
.pxy-pg__code-b { padding: 4px 9px; border-radius: 6px; font: 800 12px/1 var(--f-body); }
.pxy-pg__code-b.ok { background: #3FB97A; color: #062B1C; } .pxy-pg__code-b.warn { background: #FFB81C; color: #3A2600; } .pxy-pg__code-b.err { background: #F87171; color: #3B0A0A; }
.pxy-pg__ms { color: #fff; font-weight: 700; }
.pxy-pg__json { min-height: 150px; max-height: 280px; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: #07111D; border: 1px solid rgba(255,255,255,.1); font: 500 13px/1.6 var(--pxy-mono); color: #D6E4F0; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.pxy-pg__json .jk { color: #82AAFF; } .pxy-pg__json .js { color: #C3E88D; } .pxy-pg__json .jn { color: #F78C6C; } .pxy-pg__json .jb { color: #C792EA; }
.pxy-pg__json.is-wait { opacity: .5; }
.pxy-pg__logs { margin: 10px 0 0; padding: 0; list-style: none; font: 500 12.5px/1.6 var(--pxy-mono); color: #9FC0D8; }
.pxy-pg__logs li { display: flex; gap: 10px; animation: pxyIn .3s ease both; }
.pxy-pg__logs li small { flex: none; color: #64819C; font-size: 12px; }
.pxy-pg__logs li.w { color: #FFD27A; } .pxy-pg__logs li.e { color: #FCA5A5; }
@keyframes pxyIn { from { opacity: 0; transform: translateY(4px); } }

/* ======================= 05. PRICING restyle ======================= */
.pxy-bill { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.pxy-bill li { position: relative; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; }
.pxy-bill li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -12px; width: 10px; height: 10px; border-top: 2px solid #94A3B8; border-right: 2px solid #94A3B8; transform: translateY(-50%) rotate(45deg); }
.pxy-bill li:first-child { background: linear-gradient(140deg, #EEF8F3, #fff); border-color: #CDEBDD; }
.pxy-bill li:last-child { background: linear-gradient(160deg, #082238, #0A3A63); border-color: transparent; }
.pxy-bill__k { display: block; font: 700 12px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #0A6FA8; }
.pxy-bill b { display: block; margin-top: 8px; font: 800 28px/1 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pxy-bill b small { font: 600 13px/1 var(--f-body); letter-spacing: 0; color: #64748B; }
.pxy-bill p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: #64748B; }
.pxy-bill li:last-child .pxy-bill__k { color: #7DD3F0; } .pxy-bill li:last-child b { color: #fff; } .pxy-bill li:last-child b small, .pxy-bill li:last-child p { color: #C9DCEA; }
.pxy-cost .pz__plans button[aria-selected="true"] { background: var(--pxy-blue); }
.pxy-cost .pz__card--pop { background: linear-gradient(165deg, #fff 60%, #EEF6FD); box-shadow: 0 0 0 2px var(--pxy-blue), 0 34px 60px -36px rgba(34,109,180,.55); }

/* ======================= 06. COMPARE accent ======================= */
.pxy-vs-sec .crm-vs__table tr.is-zoho th:first-child { box-shadow: inset 4px 0 0 var(--pxy-red); }

/* ======================= responsive ======================= */
@media (max-width: 1100px) {
  .pxy-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "big big" "data data" "sig web" "gate gate" "ai ai"; }
}
@media (max-width: 980px) {
  .pxy-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .pxy-dev { max-width: 620px; margin-top: 8px; }
  .pxy-req__grid { grid-template-columns: minmax(0, 1fr); }
  .pxy-req__sticky { position: static; order: -1; }
  .pxy-step { min-height: 0; opacity: 1; padding-bottom: 26px; }
  .pxy-step:last-child { padding-bottom: 0; }
  .pxy-pg__body { grid-template-columns: minmax(0, 1fr); }
  .pxy-pg__src { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .pxy-pg__code { max-height: 230px; overflow-y: auto; }
  .pxy-bill { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxy-bill li:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
  .pxy-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "big" "data" "sig" "web" "gate" "ai"; }
  .pxy-card--big { padding: 22px; } .pxy-card--big h3 { font-size: 21px; }
  .pxy-viz--data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxy-viz--fn li { grid-template-columns: 10px minmax(0, 1fr); } .pxy-viz--fn em { grid-column: 2; justify-self: start; text-align: left; }
  .pxy-arch-mini { margin: -18px 10px 0 -6px; padding: 12px 10px 14px; }
  .pxy-mini span { width: 38px; height: 38px; } .pxy-mini li:not(:last-child)::after, .pxy-mini li:not(:last-child)::before { top: 18px; left: calc(50% + 21px); width: calc(100% - 42px); }
  .pxy-mini b { font-size: 10.5px; }
  .pxy-ed__code { font-size: 10.6px; padding: 12px 12px 10px; }
  .pxy-term { font-size: 11px; padding: 10px 12px 12px; min-height: 132px; }
  .pxy-toast { right: 6px; top: -14px; font-size: 12px; }
  .pxy-chips li { font-size: 13.5px; }
  .pxy-pg__f { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pxy-pg__ep em { margin-left: 0; width: 100%; }
  .pxy-pg__code { font-size: 12px; }
  .pxy-fair { flex-direction: column; gap: 10px; }
  .pxy-bill { grid-template-columns: minmax(0, 1fr); }
  .pxy-bill li::after { display: none; }
}

/* reduced motion: everything visible, nothing loops */
@media (prefers-reduced-motion: reduce) {
  .pxy-viz--fn li i, .pxy-sig__line i, .pxy-gate i, .pxy-doc b, .pxy-links path.is-now, .pxy-ed__code.is-done .pxy-l.is-cur { animation: none !important; }
  .pxy-sig__line i { left: calc(50% - 5px); }
  .pxy-gate i { left: 20%; } .pxy-gate i:nth-child(2) { left: 75%; } .pxy-gate i.x { left: calc(62% - 30px); } .pxy-gate i:nth-child(4) { display: none; }
  .pxy-step { opacity: 1; }
  .pxy-card, .pxy-toast, .pxy-mini span { transition: none; }
}