/* Zoho Inventory page only. Loaded via `extra: crm, p-inventory`. Every class is scoped .pxi- */
:root { --pxi-red: #E42527; --pxi-amber: #F9B21D; --pxi-teal: #00B2A9; }

/* ---------- shared logo tiles ---------- */
.pxi-logo { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid #E2E8F0; font: 800 17px/1 var(--f-display); font-style: normal; color: #082238; }
.pxi-logo img { width: 18px; height: 18px; }
.pxi-logo--amz { background: #232F3E; border-color: #232F3E; color: #FF9900; }
.pxi-logo--ebay { color: #E53238; letter-spacing: -.04em; }
.pxi-logo--etsy { background: #F1641E; border-color: #F1641E; color: #fff; font-family: Georgia, serif; }
.pxi-logo--b2b { background: #082238; border-color: #082238; }
.pxi-logo--b2b svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }

/* ---------- hero ---------- */
.pxi-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.pxi-hero__copy { display: flex; flex-direction: column; align-items: center; max-width: 960px; margin: 0 auto; text-align: center; }
.pxi-hero .pg-h1 { max-width: 19ch; margin-inline: auto; }
.pxi-hero__sub { margin-inline: auto; max-width: 40ch; }
.pxi-hero .pg-lead { max-width: 66ch; margin-inline: auto; }
.pxi-hero .pg-ctas { justify-content: center; }
.pxi-hero .pg-trust { justify-content: center; margin-inline: auto; text-align: left; }
.pxi-edges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.pxi-edges li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 10px; border-radius: 999px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 10px 22px -18px rgba(8,34,56,.45); font: 600 14px/1.25 var(--f-body); color: #082238; text-align: left; }
.pxi-edges svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #FDECEC; fill: none; stroke: var(--pxi-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* channel map */
.pxi-map { position: relative; margin: clamp(28px, 3.5vw, 40px) auto 0; max-width: 1100px; padding: 16px clamp(14px, 2vw, 26px) 30px; border-radius: 26px; background: rgba(255,255,255,.92); border: 1px solid #E2E8F0; box-shadow: 0 40px 80px -48px rgba(8,34,56,.55), 0 2px 0 rgba(255,255,255,.8) inset; transform-style: preserve-3d; }
.pxi-map__top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #EDF2F6; font: 700 14px/1.2 var(--f-display); color: #082238; text-align: left; }
.pxi-map__top em, .pxi-sim__lbl em, .pxi-mock__h em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #FFF4D6; font: 600 11px/1 var(--f-body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #8A5A00; }
.pxi-map__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, .85fr); align-items: center; gap: clamp(48px, 8vw, 120px); padding: 22px 4px 8px; }
.pxi-map__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.pxi-map__wires path { fill: none; stroke: #CFE2EE; stroke-width: 2; stroke-dasharray: 5 6; }
.pxi-map__wires path.is-hot { stroke: #7CCBEA; }
.pxi-map__wires circle { fill: var(--pxi-red); filter: drop-shadow(0 0 6px rgba(228,37,39,.55)); }
.pxi-map__wires circle.out { fill: var(--pxi-teal); filter: drop-shadow(0 0 6px rgba(0,178,169,.6)); }
.pxi-map__ch, .pxi-map__wh { position: relative; z-index: 1; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pxi-map__ch li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; text-align: left; transition: border-color .3s, box-shadow .3s, transform .3s; }
.pxi-map__ch b { font: 700 14px/1.2 var(--f-display); color: #082238; }
.pxi-map__ch small, .pxi-map__wh small { margin-left: auto; font: 500 12.5px/1.2 var(--f-body); color: #64748B; white-space: nowrap; }
.pxi-map__ch small i, .pxi-map__wh small i { font-style: normal; font-weight: 700; color: #082238; font-variant-numeric: tabular-nums; }
.pxi-map__ch li.is-hit { border-color: #F7A8A9; box-shadow: 0 0 0 4px rgba(228,37,39,.1); transform: translateX(4px); }
.pxi-map__ch li.is-sync small i { color: #0A6FA8; }
.pxi-map__wh li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #F3F7F9; border: 1px solid #E2E8F0; border-left: 3px solid var(--pxi-teal); text-align: left; transition: box-shadow .3s, background .3s; }
.pxi-map__wh li small { margin-left: 0; }
.pxi-map__wh b { font: 700 14.5px/1.2 var(--f-display); color: #082238; }
.pxi-map__wh li.is-hit { background: #E6F7F5; box-shadow: 0 0 0 4px rgba(0,178,169,.12); }
.pxi-map__hub { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px 22px; border-radius: 24px; background: linear-gradient(135deg, #061A2E, #0A3A63 55%, #07605E); color: #BFD3E2; text-align: center; box-shadow: 0 30px 50px -28px rgba(6,26,46,.8); }
.pxi-map__hub small { font: 600 12px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; }
.pxi-map__hub > b { font: 800 clamp(48px, 5.4vw, 72px)/1 var(--f-display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.pxi-map__hub > b.is-tick span { display: inline-block; animation: pxiTick .45s cubic-bezier(.2,.7,.1,1); }
@keyframes pxiTick { 0% { transform: translateY(-10px); opacity: .3; color: #FFB81C; } 100% { transform: none; opacity: 1; } }
.pxi-map__meter { position: relative; width: 100%; max-width: 200px; height: 8px; margin-top: 4px; border-radius: 8px; background: rgba(255,255,255,.14); }
.pxi-map__meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 70%; border-radius: 8px; background: linear-gradient(90deg, #00A3D9, #3FB97A); transition: width .5s cubic-bezier(.2,.7,.1,1), background .3s; }
.pxi-map__meter i.is-low { background: linear-gradient(90deg, #FFB81C, #F97316); }
.pxi-map__meter em { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; background: #FFB81C; border-radius: 2px; }
.pxi-map__rop { color: #FFB81C; text-transform: none !important; letter-spacing: 0 !important; }
.pxi-map__pop { position: absolute; left: 50%; top: calc(100% + 12px); display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 999px; background: #FFB81C; color: #082238; font: 700 13px/1.2 var(--f-body); white-space: nowrap; box-shadow: 0 16px 30px -16px rgba(8,34,56,.6); opacity: 0; transform: translate(-50%, -8px) scale(.9); transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.2,1.3); pointer-events: none; }
.pxi-map__pop i { width: 8px; height: 8px; border-radius: 50%; background: #082238; box-shadow: 0 0 0 4px rgba(8,34,56,.15); }
.pxi-map__pop.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pxi-map__pop.is-in { background: #3FB97A; color: #fff; }
.pxi-map__pop.is-in i { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }

/* ---------- 01 bento ---------- */
.pxi-why { position: relative; isolation: isolate; overflow-x: clip; }
.pxi-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.pxi-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.1,1), box-shadow .35s; }
.pxi-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(8,34,56,.45); }
.pxi-card h3 { margin: 6px 0 0; font: 700 19px/1.25 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxi-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.pxi-chip { align-self: flex-start; margin-top: auto !important; padding: 6px 11px; border-radius: 999px; background: #FFF4D6; font: 600 12.5px/1.2 var(--f-body) !important; color: #8A5A00; }
.pxi-card--big { grid-column: span 2; grid-row: span 2; justify-content: space-between; padding: clamp(24px, 3vw, 36px); background: linear-gradient(135deg, #061A2E, #0A3A63 55%, #07605E); border: 0; color: #BFD3E2; }
.pxi-card--big h3 { font-size: clamp(24px, 1rem + 1vw, 32px); color: #fff; max-width: 18ch; }
.pxi-card--big p { font-size: 16.5px; max-width: 46ch; }
.pxi-card--big .pxi-chip { background: rgba(255,184,28,.16); color: #FFD27A; }
.pxi-card--wide { grid-column: span 4; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: center; gap: clamp(20px, 3vw, 44px); background: linear-gradient(180deg, #fff, #F7FAFC); }
.pxi-card--wide p { max-width: 74ch; }
.pxi-viz { position: relative; min-height: 92px; }
/* sync viz */
.pxi-viz--sync { display: flex; align-items: center; justify-content: center; gap: 30px; flex: 1; min-height: 200px; margin-bottom: 8px; }
.pxi-viz--sync ul { max-width: 260px !important; }
.pxi-viz__core { position: relative; display: grid; place-items: center; align-content: center; flex: none; width: 128px; height: 128px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 14px rgba(95,211,243,.06), 0 0 0 28px rgba(95,211,243,.04); }
.pxi-viz__core small { font: 600 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #9FC0D8; }
.pxi-viz__core b { font: 800 40px/1.1 var(--f-display); color: #fff; }
.pxi-viz--sync ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; flex: 1; max-width: 220px; }
.pxi-viz--sync li { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font: 700 15px/1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; animation: pxiPing 4s infinite; }
.pxi-viz--sync li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 1px; background: repeating-linear-gradient(90deg, rgba(95,211,243,.6) 0 4px, transparent 4px 7px); }
.pxi-viz--sync li:nth-child(2) { animation-delay: .15s; } .pxi-viz--sync li:nth-child(3) { animation-delay: .3s; } .pxi-viz--sync li:nth-child(4) { animation-delay: .45s; }
.pxi-viz--sync .pxi-logo { width: 26px; height: 26px; font-size: 15px; }
@keyframes pxiPing { 0%, 70%, 100% { border-color: rgba(255,255,255,.12); } 80% { border-color: #2ED3C6; box-shadow: 0 0 0 4px rgba(46,211,198,.18); } }
/* bins */
.pxi-viz--bins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pxi-viz--bins i { height: 40px; border-radius: 8px; background: #F3F7F9; border: 1px solid #E2E8F0; font: 700 11px/40px var(--f-body); font-style: normal; text-align: center; color: #fff; }
.pxi-viz--bins i.on { background: #082238; border-color: #082238; animation: pxiBin 2.8s infinite; }
@keyframes pxiBin { 50% { box-shadow: 0 0 0 5px rgba(228,37,39,.22); } }
/* lot */
.pxi-viz--lot { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-content: center; padding: 14px; border-radius: 14px; background: #F3F7F9; }
.pxi-bars { grid-row: span 2; width: 74px; height: 50px; background: repeating-linear-gradient(90deg, #082238 0 2px, transparent 2px 4px, #082238 4px 7px, transparent 7px 9px, #082238 9px 10px, transparent 10px 13px); }
.pxi-viz--lot b { align-self: end; font: 700 15px/1.2 var(--f-display); color: #082238; }
.pxi-viz--lot small { font-size: 13px; color: var(--pxi-red); font-weight: 600; }
/* kit */
.pxi-viz--kit { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px; }
.pxi-viz--kit i { padding: 8px 10px; border-radius: 10px; background: #F3F7F9; border: 1px dashed #B9CCDA; font: 600 12.5px/1 var(--f-body); font-style: normal; color: #334155; }
.pxi-viz--kit i + i::before { content: "+"; margin: 0 6px 0 -4px; color: #94A3B8; }
.pxi-viz--kit b { flex-basis: 100%; margin-top: 4px; padding: 9px 12px; border-radius: 10px; background: #082238; font: 700 13px/1 var(--f-display); color: #fff; }
/* rates */
.pxi-viz--rates { display: grid; gap: 5px; align-content: center; }
.pxi-viz--rates span { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 9px; background: #F3F7F9; font: 600 13px/1.2 var(--f-body); color: #334155; font-variant-numeric: tabular-nums; }
.pxi-viz--rates b { font-weight: 600; color: #082238; }
.pxi-viz--rates span.on { background: #FFF4D6; box-shadow: inset 0 0 0 1.5px #FFB81C; }
/* reorder chart */
.pxi-viz--rop { min-height: 120px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; }
.pxi-viz--rop svg { display: block; width: 100%; height: 100px; overflow: visible; }
.pxi-viz--rop .ln { fill: none; stroke: #0A6FA8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.pxi-viz--rop .rop { fill: none; stroke: #FFB81C; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.pxi-viz--rop .po { fill: none; stroke: #3FB97A; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.pxi-viz--rop circle { fill: var(--pxi-red); }
.pxi-viz--rop small { position: absolute; right: 16px; bottom: 8px; font: 600 11px/1 var(--f-body); color: #8A5A00; }

/* ---------- 02 follow one order ---------- */
.pxi-day { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #F3F7F9, #fff 70%); }
.pxi-day__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: end; }
.pxi-day__head .pg-answer { margin: 0; }
.pxi-day__vp { position: relative; margin-top: 36px; }
.pxi-day__prog { display: none; height: 3px; margin-bottom: 20px; border-radius: 3px; background: #E2E8F0; overflow: hidden; }
.pxi-day__prog span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); }
.pxi-day__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pxi-step { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; transition: border-color .4s, box-shadow .4s, opacity .4s; }
.pxi-step__n { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 600 13px/1 var(--f-body); color: #64748B; }
.pxi-step__n b { font: 800 34px/1 var(--f-display); letter-spacing: -.03em; background: linear-gradient(90deg, #1D3F8F, #00A3D9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pxi-step h3 { margin: 0; font: 700 21px/1.25 var(--f-display); color: #082238; }
.pxi-step > p:not(.pxi-step__n) { margin: 0; font-size: 15.5px; line-height: 1.6; }
.pxi-step a { color: #0A6FA8; font-weight: 600; }
.pxi-mock { margin-top: auto; padding: 14px; border-radius: 16px; background: #F3F7F9; border: 1px solid #E8EEF3; font-size: 13.5px; color: #334155; }
.pxi-mock__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 13.5px/1.2 var(--f-display); color: #082238; }
.pxi-mock dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.pxi-mock dt { color: #64748B; } .pxi-mock dd { margin: 0; font-weight: 600; color: #082238; text-align: right; }
.pxi-mock dd.ok { color: #1F8A5B; }
.pxi-mock table { width: 100%; border-collapse: collapse; }
.pxi-mock td { padding: 6px 0; border-top: 1px solid #E2E8F0; } .pxi-mock tr:first-child td { border-top: 0; }
.pxi-mock td:last-child { text-align: right; font-weight: 700; color: #1F8A5B; }
.pxi-mock__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pxi-mock__kpi span { padding: 8px; border-radius: 10px; background: #fff; text-align: center; }
.pxi-mock__kpi small { display: block; font-size: 11px; color: #64748B; }
.pxi-mock__kpi b { font: 800 20px/1.2 var(--f-display); color: #082238; } .pxi-mock__kpi b.am { color: #C27C00; }
.pxi-mock__ok { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #E6F7EE; font-weight: 600; color: #1F8A5B; }
.pxi-mock__rates { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pxi-mock__rates li { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 9px; background: #fff; }
.pxi-mock__rates li.on { background: #FFF4D6; box-shadow: inset 0 0 0 1.5px #FFB81C; font-weight: 600; }
.pxi-mock__trail { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pxi-mock__trail li { flex: 1; padding: 8px 6px; border-radius: 10px; background: #082238; color: #fff; font-weight: 600; font-size: 12.5px; text-align: center; }
/* pinned horizontal mode (desktop + motion, set by p-inventory.js) */
.pxi-day.is-h { min-height: 100vh; padding: 96px 0 40px; display: flex; flex-direction: column; justify-content: center; }
.pxi-day.is-h .pxi-day__prog { display: block; }
.pxi-day.is-h .pxi-day__track { display: flex; width: max-content; gap: 22px; will-change: transform; }
.pxi-day.is-h .pxi-step { width: clamp(340px, 31vw, 440px); flex: none; opacity: .55; }
.pxi-day.is-h .pxi-step.is-on { opacity: 1; border-color: #9DD3EC; box-shadow: 0 30px 50px -34px rgba(8,34,56,.55); }

/* ---------- 03 sell-it-once simulator ---------- */
.pxi-sim__stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 40px; padding: clamp(20px, 3vw, 36px); border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.pxi-sim__lbl { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #9FC0D8; }
.pxi-sim__lbl em { margin-left: 0; }
.pxi-sim__name { margin: 12px 0 0; font: 700 22px/1.25 var(--f-display); color: #fff; }
.pxi-sim__name small { display: block; margin-top: 4px; font: 500 14px/1.3 var(--f-body); color: #9FC0D8; }
.pxi-sim__oh { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 0; color: #BFD3E2; font-size: 15px; }
.pxi-sim__oh b { font: 800 clamp(64px, 7vw, 92px)/1 var(--f-display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.pxi-sim__oh b.is-tick { animation: pxiTick .45s cubic-bezier(.2,.7,.1,1); }
.pxi-sim__oh b.is-low { color: #FFB81C; }
.pxi-sim__meter { position: relative; height: 10px; margin: 18px 0 30px; border-radius: 10px; background: rgba(255,255,255,.14); }
.pxi-sim__meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 10px; background: linear-gradient(90deg, #00A3D9, #3FB97A); transition: width .5s cubic-bezier(.2,.7,.1,1); }
.pxi-sim__meter i.is-low { background: linear-gradient(90deg, #F97316, #FFB81C); }
.pxi-sim__meter em { position: absolute; left: var(--r, 41.6%); top: -6px; bottom: -6px; width: 2px; background: #FFB81C; font: 600 12px/1 var(--f-body); font-style: normal; color: #FFB81C; transition: left .5s; }
.pxi-sim__meter em span { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.pxi-sim__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pxi-sim__sell { padding: 13px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.04); font: 600 15px/1 var(--f-body); color: #fff; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.pxi-sim__sell:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-1px); }
.pxi-sim__sell:active:not(:disabled) { transform: scale(.97); }
.pxi-sim__sell:disabled { opacity: .35; cursor: not-allowed; }
.pxi-sim__sell:focus-visible, .pxi-sim__stage button:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pxi-sim__msg { min-height: 3.1em; margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: #E2EEF6; }
.pxi-sim__msg b { color: #FFB81C; }
.pxi-sim__right { display: flex; flex-direction: column; gap: 16px; }
.pxi-sim__chs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pxi-sim__chs li { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: border-color .3s, box-shadow .3s, background .3s; }
.pxi-sim__chs .pxi-logo { width: 34px; height: 34px; font-size: 19px; }
.pxi-sim__chs b { font: 700 16px/1.2 var(--f-display); color: #fff; }
.pxi-sim__q { margin-left: auto; font-size: 14px; color: #9FC0D8; }
.pxi-sim__q i { font: 800 22px/1 var(--f-display); font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.pxi-sim__chs li.is-src { border-color: #FFB81C; background: rgba(255,184,28,.1); }
.pxi-sim__chs li.is-sync { border-color: #2ED3C6; box-shadow: 0 0 0 4px rgba(46,211,198,.16); }
.pxi-sim__chs li.is-sync .pxi-sim__q i { animation: pxiTick .45s cubic-bezier(.2,.7,.1,1); }
.pxi-sim__po { padding: 18px; border-radius: 18px; background: #fff; color: #334155; box-shadow: 0 30px 50px -28px rgba(0,0,0,.7); animation: pxiPo .55s cubic-bezier(.2,.9,.2,1.2); }
.pxi-sim__po[hidden] { display: none; }
@keyframes pxiPo { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.pxi-sim__po-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--f-display); color: #082238; }
.pxi-sim__po-h em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #FFF4D6; font: 600 11px/1 var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .04em; color: #8A5A00; }
.pxi-sim__po dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; }
.pxi-sim__po dt { color: #64748B; } .pxi-sim__po dd { margin: 0; text-align: right; font-weight: 600; color: #082238; }
.pxi-sim__po .btn { width: 100%; justify-content: center; cursor: pointer; border: 0; }
.pxi-sim__note { margin: 18px 0 0; font-size: 14px; color: #9FC0D8; }

/* ---------- pricing + compare touches ---------- */
.pxi-cost { background: linear-gradient(180deg, #fff, #F3F7F9); }
.pxi-cost .pg-answer a, .pxi-vs .pg-answer a { color: #0A6FA8; font-weight: 600; }
.pxi-cost .crm-vs__table tr.is-zoho th small { color: var(--pxi-red); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pxi-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxi-card--big { grid-row: auto; }
  .pxi-card--wide { grid-column: span 2; }
}
@media (max-width: 980px) {
  .pxi-day__head, .pxi-sim__stage { grid-template-columns: 1fr; }
  .pxi-day__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pxi-map { padding: 12px 10px 24px; border-radius: 20px; }
  .pxi-map__grid { grid-template-columns: 1fr; gap: 58px; padding-top: 18px; }
  .pxi-map__ch { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .pxi-map__ch li { flex-direction: column; gap: 5px; padding: 8px 2px; text-align: center; }
  .pxi-map__ch li.is-hit { transform: translateY(3px); }
  .pxi-map__ch b { font-size: 10.5px; line-height: 1.15; }
  .pxi-map__ch small { margin: 0; font-size: 10.5px; }
  .pxi-map__ch small { font-size: 0; } .pxi-map__ch small i { font-size: 11.5px; }
  .pxi-map__hub { margin: 0 auto; width: min(100%, 280px); padding: 18px 16px; }
  .pxi-map__wh { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pxi-map__wh li { padding: 9px 8px; }
  .pxi-map__wh b { font-size: 12.5px; } .pxi-map__wh small { font-size: 11px; white-space: normal; }
  .pxi-map__pop { font-size: 12px; padding: 8px 12px; }
  .pxi-edges li { font-size: 13.5px; }
  .pxi-bento { grid-template-columns: 1fr; }
  .pxi-card--big, .pxi-card--wide { grid-column: auto; }
  .pxi-card--wide { grid-template-columns: 1fr; }
  .pxi-viz--sync { flex-direction: column; align-items: stretch; gap: 18px; }
  .pxi-viz__core { align-self: center; }
  .pxi-viz--sync ul { max-width: none; }
  .pxi-viz--sync li::before { display: none; }
  .pxi-day__track { grid-template-columns: 1fr; }
  .pxi-sim__oh { flex-wrap: wrap; gap: 4px 12px; }
  .pxi-sim__sell { flex: 1 1 calc(50% - 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .pxi-viz--sync li, .pxi-viz--bins i.on { animation: none; }
  .pxi-card, .pxi-map__ch li, .pxi-step { transition: none; }
  .pxi-map__pop { transition: none; }
}
.pxi-card--wide h3 { margin-bottom: 8px; }
@media (max-width: 760px) { .pxi-sim__sell { padding: 12px 10px; font-size: 14px; } }