/* Zoho Desk page only. Loaded via `extra: crm, p-desk`. Every class is scoped .pxk- */
.pxk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pxk-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================= hero ================= */
.pxk-hero .pxk-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.pxk-hero .pg-h1 { max-width: 17ch; }
.pxk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 600px; }
.pxk-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #fff; border: 1px solid #D5E6DD; box-shadow: 0 8px 18px -14px rgba(8,34,56,.5); font: 600 13.5px/1.25 var(--f-body); color: #082238; }
.pxk-chips .pxk-ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #E7F6EE; color: #089949; box-sizing: border-box; }

.pxk-hub { position: relative; margin: 0; padding: 0; perspective: 1400px; }
.pxk-hub__body { position: relative; display: grid; grid-template-columns: 74px minmax(36px, 70px) minmax(0, 1fr); align-items: stretch; padding: 18px; border-radius: 26px; background: rgba(255,255,255,.72); border: 1px solid #E2E8F0; box-shadow: 0 60px 100px -50px rgba(8,34,56,.5); backdrop-filter: blur(10px); transform-style: preserve-3d; will-change: transform; }
.pxk-hub__ch { position: relative; z-index: 2; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pxk-hub__ch li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.pxk-hub__ch span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #fff; color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 10px 18px -12px var(--c); transition: transform .3s cubic-bezier(.2,.7,.1,1), background .3s, color .3s; }
.pxk-hub__ch span .pxk-ic { width: 20px; height: 20px; }
.pxk-hub__ch b { font: 600 10.5px/1.1 var(--f-body); color: #64748B; white-space: nowrap; }
.pxk-hub__ch li.is-ping span { transform: scale(1.14); background: var(--c); color: #fff; }
.pxk-hub__wires { width: 100%; height: 100%; overflow: visible; }
.pxk-hub__wires path { fill: none; stroke: #BFD7E6; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; animation: pxkWire 1.6s linear infinite; }
@keyframes pxkWire { to { stroke-dashoffset: -18; } }

.pxk-q { position: relative; z-index: 1; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 50px -36px rgba(8,34,56,.6); min-width: 0; }
.pxk-q__top { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid #EDF2F6; }
.pxk-q__top b { font: 700 14px/1.2 var(--f-display); color: #082238; }
.pxk-q__top em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #F3F7F9; font: 600 11px/1 var(--f-body); font-style: normal; color: #5B6B7F; }
.pxk-q__cols { display: flex; justify-content: space-between; margin: 10px 4px 4px; font: 600 10.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #5B6B7F; }
.pxk-q__cols span:last-child { width: 74px; }
.pxk-q__list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pxk-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 74px; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #F7FAFC; border: 1px solid transparent; transition: background .4s, border-color .4s; }
.pxk-row.is-new { animation: pxkRowIn .7s cubic-bezier(.2,.7,.1,1) both; background: #F0FAF4; border-color: #BFE7CF; }
.pxk-row.is-out { animation: pxkRowOut .45s ease both; }
@keyframes pxkRowIn { from { opacity: 0; transform: translateX(-26px) scale(.96); } }
@keyframes pxkRowOut { to { opacity: 0; transform: translateY(14px); } }
.pxk-row__ch { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.pxk-row__ch .pxk-ic { width: 16px; height: 16px; }
.pxk-row__s { min-width: 0; }
.pxk-row__s b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 var(--f-body); color: #082238; }
.pxk-row__s small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 500 11.5px/1.3 var(--f-body); color: #64748B; }
.pxk-row__tag { padding: 2px 7px; border-radius: 6px; background: #E7F6EE; color: #087A3B; font-style: normal; font-weight: 600; white-space: nowrap; }
.pxk-row__tag--zia { background: #E6F4FB; color: #0A6FA8; }
.pxk-row__tag.is-pop { animation: pxkPop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pxkPop { from { opacity: 0; transform: scale(.6); } }
.pxk-row__sla { display: grid; gap: 4px; justify-items: end; }
.pxk-row__sla i { position: relative; display: block; width: 100%; height: 6px; border-radius: 6px; background: #E2E8F0; overflow: hidden; }
.pxk-row__sla i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--t, 1) * 100%); border-radius: inherit; background: #3FB97A; }
.pxk-row[style*="--t:.4"] .pxk-row__sla i::after, .pxk-row[style*="--t:.22"] .pxk-row__sla i::after { background: #F59E0B; }
.pxk-row.is-live .pxk-row__sla i::after { width: 100%; animation: pxkSla var(--dur, 22s) linear forwards; animation-delay: var(--dl, 0s); }
@keyframes pxkSla { 0% { width: 100%; background: #3FB97A; } 55% { background: #3FB97A; } 72% { background: #F5B21C; } 100% { width: 8%; background: #F59E0B; } }
.pxk-row__sla small { font: 600 11px/1 var(--f-body); color: #64748B; font-variant-numeric: tabular-nums; }

.pxk-zia { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 11px 12px; border-radius: 14px; background: linear-gradient(135deg, #EAF6FC, #EDF8F2); border: 1px solid #CDE8F3; }
.pxk-zia img { flex: none; margin-top: 1px; }
.pxk-zia p { margin: 0; font: 500 12.5px/1.4 var(--f-body); color: #334155; }
.pxk-zia b { display: block; font: 700 12.5px/1.3 var(--f-display); color: #082238; }
.pxk-zia.is-pop { animation: pxkPop .55s cubic-bezier(.3,1.5,.5,1) both; }

.pxk-bub { position: absolute; z-index: 3; left: 0; top: 0; width: 26px; height: 20px; margin: -10px 0 0 -13px; border-radius: 10px 10px 10px 3px; background: var(--c); box-shadow: 0 8px 16px -6px var(--c); pointer-events: none; }
.pxk-bub::before, .pxk-bub::after { content: ""; position: absolute; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.pxk-bub::before { left: 7px; } .pxk-bub::after { left: 15px; }

.pxk-hub__float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 12px; background: #082238; color: #fff; font: 600 12.5px/1 var(--f-body); box-shadow: 0 18px 30px -16px rgba(8,34,56,.7); white-space: nowrap; }
.pxk-hub__float .pxk-ic { width: 15px; height: 15px; color: #FFB81C; }
.pxk-hub__float i { width: 8px; height: 8px; border-radius: 50%; background: #3FB97A; box-shadow: 0 0 0 4px rgba(63,185,122,.25); }
.pxk-hub__float--a { right: -14px; top: -16px; }
.pxk-hub__float--b { left: 28px; bottom: -18px; background: #fff; color: #082238; border: 1px solid #E2E8F0; }

/* ================= 01. edges (bento) ================= */
.pxk-edges { position: relative; isolation: isolate; background: linear-gradient(180deg, #fff, #F3F7F9); overflow-x: clip; }
.pxk-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.pxk-edge { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 24px 40px -34px rgba(8,34,56,.45); transition: transform .3s cubic-bezier(.2,.7,.1,1), box-shadow .3s, border-color .3s; }
.pxk-edge:hover { transform: translateY(-3px); border-color: #BFE7CF; box-shadow: 0 30px 50px -30px rgba(8,34,56,.45); }
.pxk-edge--big { grid-column: 1 / span 2; grid-row: span 2; padding: 30px; background: radial-gradient(120% 90% at 100% 0%, #E7F6EE 0%, #fff 55%); }
.pxk-edge__n { margin: 18px 0 6px; font: 700 12px/1 var(--f-display); letter-spacing: .1em; color: #089949; }
.pxk-edge h3 { margin: 0; font: 700 clamp(19px, 1rem + .4vw, 22px)/1.25 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxk-edge--big h3 { font-size: clamp(24px, 1rem + 1.1vw, 32px); max-width: 18ch; }
.pxk-edge > p:not(.pxk-edge__n):not(.pxk-vs) { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: #334155; }
.pxk-edge--big > p:not(.pxk-edge__n):not(.pxk-vs) { font-size: 17px; max-width: 56ch; }
.pxk-vs { align-self: flex-start; margin: auto 0 0; padding-top: 16px; font: 500 12.5px/1.35 var(--f-body); color: #64748B; }
.pxk-vs b { color: #087A3B; font-weight: 700; }
.pxk-vs::before { content: ""; display: block; width: 100%; height: 0; }
.pxk-edge .pxk-vs { padding: 7px 11px; margin-top: auto; border-radius: 10px; background: #F3F7F9; border: 1px dashed #D3DEE6; }
.pxk-edge > .pxk-vs { margin-top: 18px; }

/* micro visuals */
.pxk-mv { position: relative; min-height: 84px; border-radius: 16px; background: #F3F7F9; padding: 14px; overflow: hidden; }
.pxk-mv--omni { display: grid; grid-template-columns: repeat(6, auto) 1fr; align-items: center; gap: 10px; min-height: 180px; padding: 26px; background: #fff; border: 1px solid #E2E8F0; }
.pxk-mv--omni > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); animation: pxkHop 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
.pxk-mv--omni > span .pxk-ic { width: 22px; height: 22px; }
@keyframes pxkHop { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px); } }
.pxk-mv__q { position: relative; display: flex; align-items: center; gap: 8px; justify-self: end; flex-wrap: wrap; width: min(220px, 100%); padding: 14px; border-radius: 14px; background: #082238; color: #fff; font: 700 14px/1.2 var(--f-display); }
.pxk-mv__q i { display: block; width: 100%; height: 7px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; position: relative; }
.pxk-mv__q i::after { content: ""; position: absolute; inset: 0 30% 0 0; border-radius: inherit; background: #3FB97A; animation: pxkFillQ 4.8s ease-in-out infinite; }
.pxk-mv__q i:nth-of-type(2)::after { right: 52%; animation-delay: .4s; } .pxk-mv__q i:nth-of-type(3)::after { right: 70%; background: #FFB81C; animation-delay: .8s; }
@keyframes pxkFillQ { 0% { transform: scaleX(.2); transform-origin: left; } 60%, 100% { transform: scaleX(1); transform-origin: left; } }
.pxk-mv--omni::before { content: ""; position: absolute; left: 26px; right: 250px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #BFE7CF 0 6px, transparent 6px 11px); z-index: 0; }
.pxk-mv--omni > * { position: relative; z-index: 1; }

.pxk-mv--sla { display: grid; gap: 10px; align-content: center; }
.pxk-mv__bar { position: relative; height: 12px; border-radius: 8px; background: #E2E8F0; overflow: hidden; }
.pxk-mv__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #3FB97A 0 55%, #F5B21C 75%, #EF4444); transform-origin: left; animation: pxkSlaMini 5s linear infinite; }
@keyframes pxkSlaMini { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.pxk-mv__lv { display: flex; gap: 6px; flex-wrap: wrap; }
.pxk-mv__lv em { padding: 4px 8px; border-radius: 7px; background: #fff; border: 1px solid #E2E8F0; font: 600 11px/1.2 var(--f-body); font-style: normal; color: #64748B; }
.pxk-mv__lv em:first-child { animation: pxkLv 5s steps(1) infinite; }
.pxk-mv__lv em:last-child { animation: pxkLv2 5s steps(1) infinite; }
@keyframes pxkLv { 0%, 64% { background: #fff; color: #64748B; } 65%, 100% { background: #FFF4D6; color: #8A5A00; border-color: #F5D58A; } }
@keyframes pxkLv2 { 0%, 89% { background: #fff; color: #64748B; } 90%, 100% { background: #FDE2E2; color: #B42318; border-color: #F5B5B5; } }

.pxk-mv--bp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pxk-mv--bp span { padding: 6px 9px; border-radius: 8px; background: #fff; border: 1.5px solid #BFE7CF; font: 600 11.5px/1 var(--f-body); color: #087A3B; }
.pxk-mv--bp span.is-lock { border-color: #F5D58A; color: #8A5A00; background: #FFF9EA; }
.pxk-mv--bp i { width: 12px; height: 2px; background: #94A3B8; }

.pxk-mv--zia { display: grid; gap: 8px; }
.pxk-mv__msg { justify-self: end; padding: 7px 11px; border-radius: 12px 12px 3px 12px; background: #082238; color: #fff; font: 500 12px/1.3 var(--f-body); }
.pxk-mv__ans { display: flex; gap: 7px; align-items: flex-start; padding: 8px 11px; border-radius: 12px 12px 12px 3px; background: #fff; border: 1px solid #CDE8F3; font: 500 12px/1.4 var(--f-body); color: #334155; animation: pxkType 5s ease-in-out infinite; }
@keyframes pxkType { 0%, 18% { opacity: 0; transform: translateY(6px); } 28%, 100% { opacity: 1; transform: none; } }

.pxk-mv--brands { display: grid; gap: 0; padding: 16px 20px; }
.pxk-mv--brands span { padding: 8px 12px; border-radius: 10px; background: #fff; border-left: 4px solid var(--c); box-shadow: 0 8px 16px -12px rgba(8,34,56,.5); font: 600 12px/1 var(--f-body); color: #082238; }
.pxk-mv--brands span:nth-child(2) { margin: -2px 0 0 18px; } .pxk-mv--brands span:nth-child(3) { margin: -2px 0 0 36px; }

.pxk-mv--ctx { display: grid; gap: 7px; align-content: center; }
.pxk-mv--ctx span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; background: #fff; border: 1px solid #E2E8F0; font: 600 12px/1.2 var(--f-body); color: #082238; }

/* ================= 02. one ticket's life ================= */
.pxk-life { position: relative; isolation: isolate; background: #fff; overflow-x: clip; }
.pxk-life__stage { margin-top: 40px; }
.pxk-life__track { display: none; }
/* static / mobile: vertical timeline */
.pxk-life__stops { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 26px; list-style: none; max-width: 760px; }
.pxk-life__stops::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#3FB97A, #3FB97A 70%, #F5B21C); border-radius: 2px; }
.pxk-life__stops li { position: relative; padding: 16px 18px; border-radius: 16px; background: #F7FAFC; border: 1px solid #E2E8F0; }
.pxk-life__stops li::before { content: ""; position: absolute; left: -25px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #3FB97A; }
.pxk-life__stops li[data-state="paused"]::before { border-color: #94A3B8; }
.pxk-life__stops li[data-state="esc"]::before { border-color: #F5B21C; }
.pxk-life__stops li::after { content: ""; display: block; height: 5px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, #3FB97A, #3FB97A var(--x), #E2E8F0 var(--x)); }
.pxk-life__stops li[data-state="esc"]::after { background: linear-gradient(90deg, #3FB97A 60%, #F5B21C var(--x), #E2E8F0 var(--x)); }
.pxk-life__t { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #082238; color: #fff; font: 700 11.5px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.pxk-life__stops h3 { margin: 8px 0 4px; font: 700 18px/1.3 var(--f-display); color: #082238; }
.pxk-life__stops p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* pinned desktop mode */
.pxk-life.is-pin { padding-top: clamp(84px, 9vh, 110px); padding-bottom: 40px; }
.pxk-life.is-pin .pg-answer { margin-bottom: 0; }
.pxk-life.is-pin .pxk-life__stage { margin-top: 28px; }
.pxk-life.is-pin .pxk-life__track { display: block; position: relative; padding: 186px 130px 0; }
.pxk-life__ruler { position: relative; }
.pxk-life__bar { position: relative; height: 14px; border-radius: 10px; background: #EDF2F6; overflow: hidden; }
.pxk-life__risk { position: absolute; left: 75%; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #FFF4D6 0 6px, #FDEBC0 6px 12px); }
.pxk-life__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #3FB97A, #3FB97A 70%, #F5B21C); background-size: 1100px 100%; }
.pxk-life__ticks { display: flex; justify-content: space-between; margin: 10px -12px 0; padding: 0; list-style: none; }
.pxk-life__ticks li { width: 24px; text-align: center; font: 600 12px/1.2 var(--f-body); color: #64748B; font-variant-numeric: tabular-nums; }
.pxk-life__ticks em { display: block; font-style: normal; color: #B45309; }
.pxk-life__mks { position: absolute; left: 0; right: 0; top: 7px; height: 0; }
.pxk-mk { position: absolute; top: 0; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 2px solid #CBD5E1; font: 700 11px/1 var(--f-display); color: #64748B; transition: background .3s, border-color .3s, color .3s, transform .3s; }
.pxk-mk.is-up { top: -22px; } .pxk-mk.is-down { top: 22px; }
.pxk-mk::after { content: ""; position: absolute; left: 50%; width: 2px; height: 10px; background: #CBD5E1; }
.pxk-mk.is-up::after { top: 100%; } .pxk-mk.is-down::after { bottom: 100%; }
.pxk-mk.is-past { border-color: #3FB97A; color: #087A3B; }
.pxk-mk.is-on { background: #082238; border-color: #082238; color: #fff; transform: scale(1.15); }

.pxk-life__card { position: absolute; left: 130px; top: 0; width: 250px; margin-left: -125px; padding: 13px 15px; border-radius: 16px; background: #fff; border: 1.5px solid #BFE7CF; box-shadow: 0 30px 50px -28px rgba(8,34,56,.55); transition: border-color .3s; will-change: transform; }
.pxk-life__card::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px; background: #fff; border-right: 1.5px solid #BFE7CF; border-bottom: 1.5px solid #BFE7CF; transform: rotate(45deg); transition: border-color .3s; }
.pxk-life__ct { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 11.5px/1 var(--f-body); color: #15803D; }
.pxk-life__ct .pxk-ic { width: 15px; height: 15px; }
.pxk-life__ct em { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: #F3F7F9; color: #5B6B7F; font-style: normal; font-size: 10.5px; }
.pxk-life__card > b { display: block; margin: 7px 0 8px; font: 700 15px/1.25 var(--f-display); color: #082238; }
.pxk-life__card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font: 500 12px/1.3 var(--f-body); }
.pxk-life__card dt { color: #5B6B7F; } .pxk-life__card dd { margin: 0; color: #082238; font-weight: 600; }
.pxk-life__thumb, .pxk-life__paused { position: absolute; right: 12px; bottom: 12px; display: none; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font: 700 11.5px/1 var(--f-body); }
.pxk-life__thumb { background: #E7F6EE; color: #087A3B; }
.pxk-life__thumb .pxk-ic { width: 18px; height: 18px; stroke-dasharray: 80; stroke-dashoffset: 80; }
.pxk-life__paused { background: #EEF2F6; color: #475569; }
.pxk-life__card.is-paused { border-color: #CBD5E1; } .pxk-life__card.is-paused::after { border-color: #CBD5E1; }
.pxk-life__card.is-paused .pxk-life__paused { display: inline-flex; animation: pxkBlink 1.2s ease-in-out infinite; }
@keyframes pxkBlink { 50% { opacity: .45; } }
.pxk-life__card.is-esc { border-color: #F5B21C; } .pxk-life__card.is-esc::after { border-color: #F5B21C; }
.pxk-life__card.is-csat .pxk-life__thumb { display: inline-flex; }
.pxk-life__card.is-csat .pxk-life__thumb .pxk-ic { animation: pxkDraw .9s ease forwards; }
@keyframes pxkDraw { to { stroke-dashoffset: 0; } }

.pxk-life.is-pin .pxk-life__stops { display: block; max-width: none; margin: 40px auto 0; padding: 0; min-height: 150px; }
.pxk-life.is-pin .pxk-life__stops::before { display: none; }
.pxk-life.is-pin .pxk-life__stops li { position: absolute; left: 0; right: 0; max-width: 720px; margin: 0 auto; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.1,1); pointer-events: none; }
.pxk-life.is-pin .pxk-life__stops li::before, .pxk-life.is-pin .pxk-life__stops li::after { display: none; }
.pxk-life.is-pin .pxk-life__stops li.is-on { opacity: 1; transform: none; }
.pxk-life.is-pin .pxk-life__t { grid-row: span 2; margin-top: 3px; }
.pxk-life.is-pin .pxk-life__stops h3 { margin: 0 0 4px; }
.pxk-life.is-pin .pxk-life__stops { position: relative; }

/* ================= 03. Beat the SLA (dark band) ================= */
.pxk-game__box { position: relative; margin-top: 36px; padding: clamp(16px, 2.4vw, 26px); border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 80px -50px rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.pxk-game__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.pxk-game__bar p { margin: 0; }
.pxk-game__tag { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font: 700 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #BFD3E2; }
.pxk-game__clock { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--f-body); color: #BFD3E2; }
.pxk-game__clock .pxk-ic { color: #FFB81C; }
.pxk-game__clock b, .pxk-game__score b { font: 700 18px/1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.pxk-game__score { font: 500 14px/1 var(--f-body); color: #BFD3E2; }
.pxk-game__ctl { display: flex; gap: 10px; margin-left: auto; }
.pxk-game__ctl .btn[disabled] { opacity: .5; cursor: default; }
.pxk-game__reset { padding: 12px 18px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.3); background: transparent; font: 600 14.5px/1 var(--f-body); color: #fff; cursor: pointer; }
.pxk-game__reset:hover { border-color: #5FD3F3; }
.pxk-game__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.pxk-tk { position: relative; display: flex; flex-direction: column; padding: 16px; border-radius: 18px; background: #fff; color: #334155; border: 2px solid transparent; transition: border-color .3s, transform .3s, box-shadow .3s; }
.pxk-tk__h { display: flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--f-body); color: #64748B; }
.pxk-tk__h i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.pxk-tk__h .pxk-ic { width: 16px; height: 16px; }
.pxk-tk__h em { margin-left: auto; padding: 3px 7px; border-radius: 6px; background: #F3F7F9; font-style: normal; font-weight: 700; color: #475569; }
.pxk-tk__h em.is-urgent { background: #FDE2E2; color: #B42318; }
.pxk-tk__s { margin: 12px 0 4px; font: 700 15.5px/1.3 var(--f-display); color: #082238; min-height: 2.6em; }
.pxk-tk__lim { margin: 0; font: 500 12.5px/1.35 var(--f-body); color: #64748B; }
.pxk-tk__bar { position: relative; height: 9px; margin: 12px 0 8px; border-radius: 6px; background: #E2E8F0; overflow: hidden; }
.pxk-tk__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--left, 1) * 100%); border-radius: inherit; background: #3FB97A; }
.pxk-tk.is-warn .pxk-tk__bar i { background: #F5B21C; }
.pxk-tk.is-crit .pxk-tk__bar i { background: #EF4444; }
.pxk-tk__st { margin: 0; min-height: 2.7em; font: 600 13px/1.35 var(--f-body); color: #082238; }
.pxk-tk__st.is-work::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #00A3D9; animation: pxkBlink 1s ease-in-out infinite; vertical-align: 1px; }
.pxk-tk__rule { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: #FFF4D6; border: 1px solid #F5D58A; font: 500 12px/1.4 var(--f-body); color: #6B4500; }
.pxk-tk__rule b { color: #6B4500; }
.pxk-tk__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.pxk-tk__btns button { padding: 10px 4px; border-radius: 10px; border: 1.5px solid #CFE2EE; background: #fff; font: 700 12.5px/1 var(--f-body); color: #082238; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.pxk-tk__btns button:hover:not([disabled]) { border-color: #00A3D9; background: #EEF8FD; }
.pxk-tk__btns button:focus-visible, .pxk-game__reset:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pxk-tk__btns button[disabled] { opacity: .38; cursor: default; }
.pxk-tk__btns button.is-next { background: #082238; border-color: #082238; color: #fff; }
.pxk-tk.is-done { border-color: #3FB97A; }
.pxk-tk.is-done .pxk-tk__st { color: #087A3B; }
.pxk-tk.is-breach { border-color: #EF4444; }
.pxk-tk.is-breach .pxk-tk__st { color: #B42318; }
.pxk-tk.is-shake { animation: pxkShake .4s ease; }
@keyframes pxkShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pxk-game__log { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.22); font: 500 15px/1.5 var(--f-body); color: #E2EEF6; }
.pxk-game__log b { color: #fff; }
.pxk-game__log.is-end { background: rgba(63,185,122,.18); border: 1px solid rgba(63,185,122,.45); }
.pxk-game__note { margin: 16px 0 0; max-width: 72ch; font-size: 14.5px; line-height: 1.6; color: #9FC0D8; }

/* ================= restyles for shared sections ================= */
.pxk-vs-sec .crm-vs__table tr.is-zoho th, .pxk-vs-sec .crm-vs__table tr.is-zoho td { background: #EEF9F2; }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .pxk-game__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pxk-hero .pxk-hero__grid { grid-template-columns: 1fr; }
  .pxk-hub { max-width: 620px; }
  .pxk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxk-edge--big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .pxk-hub__body { grid-template-columns: 1fr; padding: 12px; }
  .pxk-hub__ch { grid-template-rows: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
  .pxk-hub__ch span { width: 38px; height: 38px; border-radius: 12px; }
  .pxk-hub__ch b { font-size: 9.5px; }
  .pxk-hub__wires { display: none; }
  .pxk-q { padding: 11px; }
  .pxk-row { grid-template-columns: 28px minmax(0, 1fr) 58px; gap: 8px; padding: 8px; }
  .pxk-q__cols span:last-child { width: 58px; }
  .pxk-hub__float--a { right: 6px; top: -18px; }
  .pxk-hub__float--b { left: 12px; bottom: -18px; }
  .pxk-bento { grid-template-columns: 1fr; }
  .pxk-edge--big { padding: 22px; }
  .pxk-mv--omni { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 16px; gap: 6px; }
  .pxk-mv--omni > span { width: 100%; height: auto; aspect-ratio: 1; }
  .pxk-mv__q { grid-column: 1 / -1; justify-self: stretch; width: auto; }
  .pxk-mv--omni::before { display: none; }
  .pxk-game__list { grid-template-columns: 1fr; }
  .pxk-game__ctl { margin-left: 0; width: 100%; }
  .pxk-game__ctl .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pxk-hub__wires path, .pxk-mv--omni > span, .pxk-mv__q i::after, .pxk-mv__bar i, .pxk-mv__lv em, .pxk-mv__ans, .pxk-life__card.is-paused .pxk-life__paused, .pxk-tk__st.is-work::before { animation: none !important; }
  .pxk-mv__bar i { transform: scaleX(.7); }
  .pxk-life__thumb .pxk-ic { stroke-dashoffset: 0; }
}

/* edges: big card fill + tight blueprint chips */
.pxk-tiers { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; max-width: 560px; }
.pxk-tiers li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; font: 500 14px/1.4 var(--f-body); color: #334155; }
.pxk-tiers b { font: 700 13px/1.2 var(--f-display); color: #087A3B; }
.pxk-mv--bp { flex-wrap: nowrap; gap: 4px; }
.pxk-mv--bp span { padding: 6px 7px; font-size: 11px; white-space: nowrap; }
.pxk-mv--bp i { width: 8px; flex: none; }
@media (max-width: 640px) { .pxk-tiers li { grid-template-columns: 1fr; gap: 2px; } }
.pxk-life__ticks { margin-top: 36px; }
.pxk-life__thumb, .pxk-life__paused { top: -13px; bottom: auto; right: 14px; box-shadow: 0 6px 14px -8px rgba(8,34,56,.5); }
.pxk-life__paused { background: #475569; color: #fff; }
.pxk-life__thumb { background: #3FB97A; color: #082238; }
.pxk-life.is-pin .pxk-life__track { padding-top: 196px; }
.pxk-hero .pxk-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.pxk-hero .pg-h1 { max-width: 20ch; font-size: clamp(36px, 1.1rem + 2.5vw, 52px); }
@media (max-width: 980px) { .pxk-hero .pxk-hero__grid { grid-template-columns: 1fr; } }
.pxk-edge { transition: box-shadow .3s, border-color .3s; }
.pxk-edge:hover { transform: none; }
.pxk-tk { transition: border-color .3s, box-shadow .3s; }
@media (max-width: 640px) { .pxk-hub { margin-top: 18px; } .pxk-hub__float--a { top: -14px; } }

/* Contrast + 24px link targets (RTL-zoho-desk-9) */
.pxk-vs-sec .crm-vs__table td small { color: #5B6B7F; }
.pg-faq__links .pg-link, .crm-proof .pg-link, .crm-audit__next a { min-height: 24px; line-height: 24px; }