/* Zoho Expense page only. Every class is scoped .pxe-  (loaded via `extra: crm, p-expense`). */
:root { --pxe-red: #E42527; --pxe-teal: #2ED3C6; --pxe-navy: #082238; --pxe-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ================= HERO ================= */
.pxe-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.pxe-sub { max-width: 46ch; }
.pxe-top { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 700px; }
.pxe-top li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid #DCE7EF; font: 600 12.5px/1.2 var(--f-body); color: #082238; box-shadow: 0 10px 22px -18px rgba(8,34,56,.5); }
.pxe-top__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FDECEC; color: var(--pxe-red); flex: none; }
.pxe-top li:nth-child(2) .pxe-top__ic { background: #E3F1FB; color: #0A6FA8; }
.pxe-top li:nth-child(3) .pxe-top__ic { background: #DDF4EF; color: #0D9488; }
.pxe-top svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pxe-stage { position: relative; align-self: start; margin: 40px 0 0 auto; width: 100%; max-width: 580px; height: 640px; }
.pxe-layer { position: absolute; will-change: transform; }
.pxe-layer--feed { right: -12px; top: 0; width: 320px; z-index: 1; }
.pxe-layer--paper { left: -10px; top: 130px; width: 236px; z-index: 2; filter: drop-shadow(0 26px 30px rgba(8,34,56,.22)) drop-shadow(0 2px 2px rgba(8,34,56,.08)); }
.pxe-layer--phone { right: 56px; bottom: 0; width: 256px; z-index: 3; }
.pxe-stage__cap { position: absolute; left: 6px; bottom: 6px; z-index: 4; padding: 4px 10px; border-radius: 999px; background: rgba(8,34,56,.08); font: 600 11.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #64748B; }

/* card feed ticker */
.pxe-feed { border-radius: 20px; padding: 14px 14px 6px; background: linear-gradient(160deg, #0B2C4A, #082238); color: #fff; box-shadow: 0 30px 50px -30px rgba(8,34,56,.8); opacity: .94; }
.pxe-feed__h { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font: 700 13px/1 var(--f-display); }
.pxe-feed__h span { display: inline-flex; align-items: center; gap: 8px; }
.pxe-feed__h span i { width: 8px; height: 8px; border-radius: 50%; background: var(--pxe-teal); box-shadow: 0 0 0 4px rgba(46,211,198,.22); animation: pxePulse 1.6s ease-in-out infinite; }
.pxe-feed__h em { font: 600 10.5px/1 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #9FC0D8; }
.pxe-feed__win { height: 196px; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); mask: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); }
.pxe-feed__list { margin: 0; padding: 0; list-style: none; animation: pxeTicker 14s linear infinite; }
.pxe-feed__list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.08); font: 400 12px/1.3 var(--f-body); }
.pxe-feed__list b { font-weight: 600; color: #fff; }
.pxe-feed__list span { color: #9FC0D8; grid-column: 1; }
.pxe-feed__list em { font-style: normal; font-weight: 700; color: #fff; grid-row: 1; grid-column: 2; text-align: right; }
.pxe-feed__list i { grid-column: 2; font-style: normal; font-size: 11px; color: #FFD27A; text-align: right; }
.pxe-feed__list i.ok { color: #7FE3C4; }
.pxe-feed__list i.warn { color: #FF9C9C; }
@keyframes pxeTicker { to { transform: translateY(-50%); } }
@keyframes pxePulse { 50% { box-shadow: 0 0 0 7px rgba(46,211,198,0); } }

/* crumpled receipt */
.pxe-receipt { position: relative; transform: rotate(-7deg); padding: 22px 20px 30px; font: 500 12.5px/1.5 var(--pxe-mono); color: #2B3442; letter-spacing: .02em;
  background:
    linear-gradient(171deg, transparent 22%, rgba(8,34,56,.06) 23%, rgba(255,255,255,.7) 24.5%, transparent 27%),
    linear-gradient(6deg, transparent 52%, rgba(8,34,56,.07) 53%, rgba(255,255,255,.8) 54.5%, transparent 57%),
    linear-gradient(94deg, transparent 38%, rgba(8,34,56,.05) 39%, transparent 43%),
    linear-gradient(83deg, transparent 70%, rgba(255,255,255,.7) 71%, rgba(8,34,56,.05) 72%, transparent 75%),
    radial-gradient(120% 60% at 20% 10%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(90% 70% at 90% 90%, rgba(8,34,56,.06), transparent 70%),
    #FBF8F0;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.pxe-receipt p { margin: 0; }
.pxe-receipt__m { font-weight: 800; font-size: 15px; letter-spacing: .08em; text-align: center; }
.pxe-receipt__a, .pxe-receipt__d { text-align: center; color: #5B6575; }
.pxe-receipt__d { margin-bottom: 10px !important; }
.pxe-receipt__l { margin: 0; padding: 10px 0; list-style: none; border-top: 1px dashed #B9BFC9; border-bottom: 1px dashed #B9BFC9; }
.pxe-receipt__l li, .pxe-receipt__t { display: flex; justify-content: space-between; gap: 10px; }
.pxe-receipt__t { margin-top: 8px !important; font-weight: 800; font-size: 15px; }
.pxe-receipt__f { margin-top: 12px !important; text-align: center; font-size: 11px; color: #8A93A1; }
.pxe-receipt [data-f] { border-radius: 4px; transition: background .3s, box-shadow .3s; }
.pxe-receipt [data-f].is-hit { background: rgba(46,211,198,.22); box-shadow: 0 0 0 3px rgba(46,211,198,.22); }
.pxe-receipt__scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0; background: linear-gradient(90deg, transparent, var(--pxe-teal) 20%, #5FD3F3 80%, transparent); box-shadow: 0 0 14px 3px rgba(46,211,198,.65); pointer-events: none; }
.pxe-receipt__scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 70px; background: linear-gradient(0deg, rgba(46,211,198,.22), transparent); }
.pxe-stage.is-scan .pxe-receipt__scan { animation: pxeScan 1.7s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes pxeScan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* phone */
.pxe-phone { position: relative; height: 500px; padding: 10px; border-radius: 42px; background: linear-gradient(150deg, #1C2A3A, #0B1220); box-shadow: 0 0 0 2px #2A3B4F inset, 0 40px 70px -30px rgba(8,34,56,.7), 0 14px 26px -18px rgba(8,34,56,.6); }
.pxe-phone__notch { position: absolute; left: 50%; top: 18px; width: 82px; height: 22px; margin-left: -41px; border-radius: 12px; background: #0B1220; z-index: 2; }
.pxe-phone__scr { height: 100%; padding: 50px 14px 14px; border-radius: 33px; background: linear-gradient(180deg, #fff, #F3F7F9); overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.pxe-phone__top { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 14px/1 var(--f-display); color: #082238; }
.pxe-phone__top em { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: #FDECEC; color: var(--pxe-red); font: 700 10px/1 var(--f-body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.pxe-phone__shot { display: grid; gap: 5px; align-content: center; height: 62px; padding: 0 60px 0 12px; border-radius: 12px; background: repeating-linear-gradient(135deg, #EEF3F7 0 8px, #E7EEF4 8px 16px); border: 1px dashed #C9D6E2; }
.pxe-phone__shot i { height: 5px; border-radius: 3px; background: #C9D6E2; }
.pxe-phone__shot i:nth-child(2) { width: 70%; } .pxe-phone__shot i:nth-child(3) { width: 85%; } .pxe-phone__shot i:nth-child(4) { width: 50%; }
.pxe-phone__fields { margin: 0; display: grid; gap: 6px; }
.pxe-phone__fields > div { position: relative; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; transition: border-color .3s, box-shadow .3s; }
.pxe-phone__fields dt { font: 600 10.5px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #64748B; }
.pxe-phone__fields dd { margin: 2px 0 0; font: 700 14px/1.25 var(--f-display); color: #082238; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.pxe-phone__fields > div::after { content: ""; position: absolute; left: 10px; bottom: 9px; width: 55%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #EEF3F7, #E2E8F0, #EEF3F7); background-size: 200% 100%; animation: pxeShimmer 1.4s linear infinite; transition: opacity .2s; }
.pxe-phone__fields > div.is-on { border-color: #9DE5D9; box-shadow: 0 0 0 3px rgba(46,211,198,.14); }
.pxe-phone__fields > div.is-on dd { opacity: 1; transform: none; }
.pxe-phone__fields > div.is-on::after { opacity: 0; }
@keyframes pxeShimmer { to { background-position: -200% 0; } }
.pxe-phone__ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 11px; border-radius: 999px; background: #E3F6EC; color: #17703F; font: 700 12px/1.2 var(--f-body); opacity: 0; transform: scale(.85); transition: opacity .35s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.pxe-phone__ok i { width: 16px; height: 16px; flex: none; border-radius: 50%; background: #3FB97A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.pxe-phone__ok.is-on { opacity: 1; transform: none; }
.pxe-phone__btn { margin: auto 0 0; padding: 11px; border-radius: 12px; background: #FFB81C; color: #082238; text-align: center; font: 700 13px/1 var(--f-body); }
.pxe-fly { position: absolute; left: 0; top: 0; z-index: 5; padding: 6px 10px; border-radius: 999px; background: #082238; color: #fff; font: 700 12px/1 var(--f-body); white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(8,34,56,.8), 0 0 0 3px rgba(46,211,198,.35); pointer-events: none; }

/* ================= 01 EDGES (bento) ================= */
.pxe-edges { position: relative; background: linear-gradient(180deg, #fff, #F3F7F9); }
.pxe-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.pxe-edge { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 20px 40px -34px rgba(8,34,56,.5); transition: box-shadow .3s; }
.pxe-edge:hover { box-shadow: 0 26px 46px -30px rgba(8,34,56,.45); }
.pxe-edge h3 { margin: 16px 0 0; font: 700 19px/1.25 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxe-edge p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #334155; }
.pxe-edge--big { grid-column: span 2; background: linear-gradient(150deg, #061A2E, #0A3A63 60%, #07605E); border: 0; color: #fff; }
.pxe-edge--big h3 { color: #fff; font-size: clamp(22px, 1rem + .8vw, 28px); }
.pxe-edge--big p { color: #BFD3E2; font-size: 16px; }
.pxe-edge--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 22px; }
.pxe-edge--wide h3 { margin-top: 0; }
.pxe-edge--wide .pxe-viz-ach { flex: 0 1 auto; flex-direction: column; align-items: stretch; align-self: center; }
.pxe-edge--wide .pxe-viz-ach i { width: 2px; height: 10px; margin: 0 auto; }
.pxe-viz-ach { align-self: flex-start; }
.pxe-edge--price { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(220px, 1fr) auto; align-items: center; gap: 10px 22px; background: linear-gradient(140deg, #FFF7E3, #FFFDF6); border-color: #F7E1A6; }
.pxe-edge--price .pg-link { font-weight: 600; max-width: 22ch; }
.pxe-price__big { margin: 0 !important; display: flex; flex-direction: column; }
.pxe-price__big b { font: 800 44px/1 var(--f-display); letter-spacing: -.03em; color: #082238; }
.pxe-price__big span { margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: #64748B; max-width: 14ch; }
.pxe-edge--price ul { max-width: 340px; margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 1px dashed #E5C676; display: grid; gap: 6px; }
.pxe-edge--price li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: #64748B; }
.pxe-edge--price li b { color: #082238; }
.pxe-chip { align-self: flex-start; margin-top: auto !important; padding: 6px 11px; border-radius: 999px; background: #FDECEC; color: #B4161B !important; font: 600 12.5px/1.25 var(--f-body) !important; }
.pxe-edge p + .pxe-chip { margin-top: 14px !important; }
.pxe-chip--fact { background: rgba(46,211,198,.14); color: #7FE3C4 !important; }

.pxe-edge__viz { position: relative; height: 92px; border-radius: 14px; }
.pxe-viz-scan { height: auto; min-height: 190px; align-content: center; display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; padding: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.pxe-mini-r { position: relative; display: grid; gap: 3px; padding: 14px 12px 20px; transform: rotate(-4deg); background: #FBF8F0; color: #2B3442; font: 500 11px/1.35 var(--pxe-mono); overflow: hidden; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.pxe-mini-r b { font-weight: 800; }
.pxe-mini-r i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--pxe-teal); box-shadow: 0 0 10px 2px rgba(46,211,198,.7); animation: pxeScanLoop 2.8s ease-in-out infinite; }
@keyframes pxeScanLoop { 0%, 10% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 90%, 100% { top: 100%; opacity: 0; } }
.pxe-mini-f { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pxe-mini-f li { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font: 700 14px/1.2 var(--f-display); color: #fff; }
.pxe-mini-f small { display: block; font: 600 10.5px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #9FC0D8; }
.pxe-langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.pxe-langs span { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font: 600 12px/1.2 var(--f-body); color: #DCEAF4; }
.pxe-viz-cards { display: flex; align-items: center; padding-left: 8px; background: linear-gradient(135deg, #EEF5FA, #F7FAFC); }
.pxe-viz-cards span { display: grid; place-items: end start; width: 92px; height: 58px; padding: 8px 10px; margin-right: -30px; border-radius: 9px; color: #fff; font: 800 11px/1 var(--f-display); letter-spacing: .06em; box-shadow: 0 12px 20px -12px rgba(8,34,56,.7); transition: transform .4s cubic-bezier(.2,.7,.1,1); }
.pxe-viz-cards .c1 { background: linear-gradient(135deg, #1D3F8F, #00A3D9); transform: rotate(-8deg); }
.pxe-viz-cards .c2 { background: linear-gradient(135deg, #082238, #334155); transform: rotate(-1deg) translateY(4px); }
.pxe-viz-cards .c3 { background: linear-gradient(135deg, #00B2A9, #3FB97A); transform: rotate(7deg) translateY(2px); }
.pxe-edge:hover .pxe-viz-cards .c1 { transform: rotate(-12deg) translateX(-8px); }
.pxe-edge:hover .pxe-viz-cards .c3 { transform: rotate(11deg) translateX(10px); }
.pxe-viz-miles { background: linear-gradient(135deg, #EAF8F2, #F7FCFA); }
.pxe-viz-miles svg { position: absolute; inset: 10px 60px 10px 10px; width: calc(100% - 70px); height: calc(100% - 20px); }
.pxe-viz-miles path { fill: none; stroke: #0D9488; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .03 .025; }
.pxe-viz-miles circle { fill: #fff; stroke: #0D9488; stroke-width: 3; }
.pxe-viz-miles b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 800 22px/1 var(--f-display); color: #0D9488; }
.pxe-viz-flags { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; background: linear-gradient(135deg, #FFF3F3, #FFFAFA); }
.pxe-viz-flags span { align-self: flex-start; padding: 4px 10px 4px 22px; border-radius: 999px; font: 600 12px/1.2 var(--f-body); position: relative; }
.pxe-viz-flags span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; }
.pxe-viz-flags .ok { background: #E3F6EC; color: #17703F; }
.pxe-viz-flags .bad { background: #FDECEC; color: #B4161B; }
.pxe-viz-flags .bad:nth-child(3) { margin-left: 18px; }
.pxe-viz-appr { display: flex; align-items: center; justify-content: center; gap: 0; background: linear-gradient(135deg, #EEF0FD, #F8F9FF); }
.pxe-viz-appr i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 2px solid #C7CDF5; font: 800 14px/1 var(--f-display); font-style: normal; color: #1D3F8F; }
.pxe-viz-appr i.on { background: #3FB97A; border-color: #3FB97A; color: #fff; }
.pxe-viz-appr span { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, #8E99E8 0 5px, transparent 5px 9px); }
.pxe-viz-ach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; padding: 14px; background: #F3F7F9; }
.pxe-viz-ach span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; font: 700 12.5px/1 var(--f-body); color: #082238; }
.pxe-viz-ach span:nth-of-type(2) { background: #082238; color: #fff; border-color: #082238; }
.pxe-viz-ach i { width: 14px; height: 2px; background: #94A3B8; }

/* ================= 02 TRIP ROUTE ================= */
.pxe-trip { position: relative; padding-bottom: clamp(52px, 6vw, 84px); background: linear-gradient(180deg, #F3F7F9, #fff 40%); overflow-x: clip; }
.pxe-trip__scroller { position: relative; margin-top: 34px; }
.pxe-trip__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 16px 30px -26px rgba(8,34,56,.5); font: 700 14px/1.2 var(--f-display); color: #082238; }
.pxe-trip__head span { display: inline-flex; align-items: center; gap: 8px; }
.pxe-trip__head em { padding: 4px 9px; border-radius: 999px; background: #F3F7F9; font: 600 11px/1 var(--f-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.pxe-trip__head b { margin-left: auto; font: 800 22px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pxe-route { position: relative; }
.pxe-route__svg { display: none; }
.pxe-route__stops { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.pxe-stop { position: relative; padding-left: 58px; }
.pxe-route__stops::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); opacity: .5; }
.pxe-stop__dot { position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: #fff; border: 2px solid #CFE2EE; color: #0A6FA8; box-shadow: 0 10px 20px -14px rgba(8,34,56,.6); transition: background .35s, border-color .35s, color .35s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.pxe-stop__dot svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pxe-stop.is-on .pxe-stop__dot { background: #082238; border-color: #082238; color: #fff; }
.pxe-card { position: relative; padding: 14px 16px 12px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 18px 34px -28px rgba(8,34,56,.6); }
.pxe-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 7px; background: #fff; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.pxe-card__t { margin: 0; font: 600 11.5px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #64748B; }
.pxe-card h3 { margin: 4px 0 0; font: 700 16px/1.25 var(--f-display); color: #082238; }
.pxe-card p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #334155; }
.pxe-card__r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px !important; padding-top: 8px; border-top: 1px dashed #CBD5E1; font-family: var(--pxe-mono) !important; font-size: 12px !important; color: #64748B !important; }
.pxe-card__r b { font: 800 15px/1 var(--pxe-mono); color: #082238; white-space: nowrap; }
.pxe-card--snap { border-color: #F5C2C3; }
.pxe-card--snap .pxe-card__t { color: var(--pxe-red); }
.pxe-card--paid { background: linear-gradient(160deg, #F0FBF5, #fff); border-color: #BDE8CF; }
.pxe-card--paid .pxe-card__r b { color: #17703F; }

@media (min-width: 981px) {
  .pxe-trip.is-live .pxe-trip__scroller { height: 280vh; }
  .pxe-trip.is-live .pxe-trip__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; box-sizing: border-box; }
  .pxe-trip .pxe-trip__sticky > .wrap { width: 100%; }
  .pxe-route { height: 570px; }
  .pxe-route__svg { display: block; position: absolute; left: 0; right: 0; top: 220px; width: 100%; height: 120px; overflow: visible; }
  .pxe-route__svg path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .pxe-route__base { stroke: #CFE2EE; stroke-width: 3; stroke-dasharray: 2 8; }
  .pxe-route__line { stroke: #00A3D9; stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(0,163,217,.5)); }
  .pxe-route__stops { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; height: 100%; }
  .pxe-route__stops::before { display: none; }
  .pxe-stop { padding: 0; --y: 262px; }
  .pxe-stop:nth-child(even) { --y: 298px; }
  .pxe-stop__dot { left: 50%; top: var(--y); margin: -23px 0 0 -23px; }
  .pxe-card { position: absolute; left: 50%; width: 188px; margin-left: -94px; bottom: calc(100% - var(--y) + 34px); }
  .pxe-stop:nth-child(even) .pxe-card { bottom: auto; top: calc(var(--y) + 34px); }
  .pxe-card::before { content: ""; position: absolute; left: 50%; width: 2px; height: 12px; margin-left: -1px; top: 100%; margin-top: 6px; background: #CBD5E1; }
  .pxe-stop:nth-child(even) .pxe-card::before { top: auto; bottom: 100%; margin: 0 0 4px -1px; }
  .pxe-trip.is-live .pxe-card { opacity: 0; transform: translateY(18px) scale(.94); transition: opacity .45s, transform .55s cubic-bezier(.3,1.5,.5,1); }
  .pxe-trip.is-live .pxe-stop:nth-child(even) .pxe-card { transform: translateY(-18px) scale(.94); }
  .pxe-trip.is-live .pxe-stop.is-on .pxe-card { opacity: 1; transform: none; }
  .pxe-trip.is-live .pxe-stop__dot { transform: scale(.7); }
  .pxe-trip.is-live .pxe-stop.is-on .pxe-stop__dot { transform: scale(1); }
}

/* ================= 03 SCAN LAB (dark band) ================= */
.pxe-lab__box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "pick pick pick" "scan out report" "live live live"; gap: 18px; margin-top: 36px; }
.pxe-lab__pick { grid-area: pick; } .pxe-lab__scan { grid-area: scan; } .pxe-lab__out { grid-area: out; } .pxe-lab__report { grid-area: report; } .pxe-lab__live { grid-area: live; }
.pxe-lab__lbl { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 14px/1.2 var(--f-display); color: #fff; }
.pxe-lab__lbl em { padding: 3px 8px; border-radius: 999px; background: rgba(255,184,28,.16); color: #FFD27A; font: 700 10.5px/1 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.pxe-lab__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pxe-thumb { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .25s cubic-bezier(.2,.7,.1,1); }
.pxe-thumb:hover { transform: translateY(-2px); border-color: rgba(95,211,243,.5); }
.pxe-thumb:focus-visible { outline: 3px solid #FFB81C; outline-offset: 3px; }
.pxe-thumb[aria-pressed="true"] { border-color: var(--pxe-teal); background: rgba(46,211,198,.1); box-shadow: 0 0 0 4px rgba(46,211,198,.15); }
.pxe-thumb__paper { flex: none; display: grid; gap: 4px; width: 62px; padding: 8px 7px 12px; transform: rotate(-4deg); background: #FBF8F0; color: #2B3442; font: 800 6.5px/1.1 var(--pxe-mono); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 6px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 6px 100%; }
.pxe-thumb__paper i { height: 3px; border-radius: 2px; background: #C9CED6; }
.pxe-thumb__paper b:last-child { text-align: right; font-size: 8px; }
.pxe-thumb__t { font: 700 15px/1.25 var(--f-display); }
.pxe-thumb__t small { display: block; margin-top: 3px; font: 600 13px/1 var(--pxe-mono); color: #9FC0D8; }

.pxe-lab__bed { position: relative; display: grid; place-items: center; min-height: 330px; padding: 20px; border-radius: 20px; background: radial-gradient(80% 70% at 50% 40%, rgba(95,211,243,.12), transparent 70%), rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.pxe-lab__bed::before { content: ""; position: absolute; inset: 12px; border-radius: 14px; border: 1.5px dashed rgba(95,211,243,.25); pointer-events: none; }
.pxe-lab__empty { margin: 0; font: 600 14px/1.4 var(--f-body); color: #9FC0D8; text-align: center; }
.pxe-lab__r { position: relative; width: min(230px, 100%); padding: 18px 16px 26px; transform: rotate(-3deg); background: #FBF8F0; color: #2B3442; font: 500 12px/1.5 var(--pxe-mono); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; animation: pxeDrop .5s cubic-bezier(.3,1.4,.5,1); }
.pxe-lab__r p { margin: 0; }
.pxe-lab__r .m { font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-align: center; }
.pxe-lab__r .a { text-align: center; color: #5B6575; margin-bottom: 8px; }
.pxe-lab__r ul { margin: 0; padding: 8px 0; list-style: none; border-top: 1px dashed #B9BFC9; border-bottom: 1px dashed #B9BFC9; }
.pxe-lab__r li, .pxe-lab__r .t { display: flex; justify-content: space-between; gap: 8px; }
.pxe-lab__r .t { margin-top: 6px; font-weight: 800; font-size: 14px; }
@keyframes pxeDrop { from { transform: translateY(-30px) rotate(-8deg); opacity: 0; } }
.pxe-lab__beam { position: absolute; left: 8%; right: 8%; top: 0; height: 3px; opacity: 0; background: linear-gradient(90deg, transparent, var(--pxe-teal) 20%, #5FD3F3 80%, transparent); box-shadow: 0 0 18px 4px rgba(46,211,198,.6); pointer-events: none; }
.pxe-lab__beam::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 90px; background: linear-gradient(0deg, rgba(46,211,198,.2), transparent); }
.pxe-lab__bed.is-scanning .pxe-lab__beam { animation: pxeScan 1.4s cubic-bezier(.45,.05,.55,.95) forwards; }

.pxe-lab__fields { margin: 0; display: grid; gap: 8px; }
.pxe-lab__fields > div { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .3s, border-color .3s; }
.pxe-lab__fields dt { font: 600 11px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #9FC0D8; }
.pxe-lab__fields dd { margin: 3px 0 0; font: 700 16px/1.3 var(--f-display); color: #fff; }
.pxe-lab__fields > div.is-hit { background: rgba(46,211,198,.14); border-color: rgba(46,211,198,.5); }
.pxe-lab__policy { margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.18); font: 600 14px/1.45 var(--f-body); color: #BFD3E2; }
.pxe-lab__policy.is-ok { background: rgba(63,185,122,.16); border: 1px solid rgba(63,185,122,.5); color: #A9EBC6; }
.pxe-lab__policy.is-bad { background: rgba(228,37,39,.16); border: 1px solid rgba(255,120,120,.55); color: #FFC4C4; }
.pxe-lab__policy.is-dup { background: rgba(255,184,28,.14); border: 1px solid rgba(255,184,28,.5); color: #FFE0A0; }
.pxe-lab__policy b { color: #fff; }
.pxe-lab__add { margin-top: 12px; width: 100%; justify-content: center; }
.pxe-lab__add:disabled { opacity: .45; cursor: not-allowed; }

.pxe-lab__report { display: flex; flex-direction: column; padding: 18px; border-radius: 20px; background: #fff; color: #082238; box-shadow: 0 30px 50px -30px rgba(0,0,0,.6); }
.pxe-lab__report .pxe-lab__lbl { color: #082238; }
.pxe-lab__report .pxe-lab__lbl em { background: #FFF3D6; color: #8A5A00; }
.pxe-lab__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; min-height: 112px; align-content: start; }
.pxe-lab__lines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #F3F7F9; font: 600 13.5px/1.3 var(--f-body); animation: pxeIn .45s cubic-bezier(.3,1.4,.5,1); }
.pxe-lab__lines li b { font-family: var(--pxe-mono); }
.pxe-lab__lines li.is-flag { background: #FDECEC; color: #8F1216; }
.pxe-lab__lines li.is-flag span::after { content: " · needs approval"; font-weight: 500; font-size: 12px; }
.pxe-lab__lines li.is-empty { background: none; border: 1.5px dashed #CBD5E1; color: #64748B; justify-content: center; font-weight: 500; animation: none; }
@keyframes pxeIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.pxe-lab__tot { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; padding-top: 10px; border-top: 2px solid #082238; font: 700 14px/1 var(--f-display); }
.pxe-lab__tot b { font: 800 26px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pxe-lab__flags { margin: 6px 0 0; font-size: 13px; color: #64748B; }
.pxe-lab__flags.is-warn { color: #B4161B; font-weight: 600; }
.pxe-lab__reset { align-self: flex-start; margin-top: auto; padding: 8px 0 0; border: 0; background: none; font: 600 13.5px/1 var(--f-body); color: #0A6FA8; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pxe-lab__live { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(0,0,0,.18); font: 500 14.5px/1.5 var(--f-body); color: #DCEAF4; }

/* ================= pricing / calc / compare touches ================= */
.pxe-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; max-width: 520px; }
.pxe-plans li { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; }
.pxe-plans b { display: block; font: 700 15px/1.2 var(--f-display); color: #082238; }
.pxe-plans span { font-size: 13.5px; color: #64748B; }
.pxe-plans li.is-pick { border-color: #00A3D9; box-shadow: 0 0 0 3px rgba(0,163,217,.12); }
.pxe-adv .crm-adv__out { position: relative; }
.pxe-calc .crm-calc__box { position: relative; }
.pxe-calc .crm-calc__box::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .pxe-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxe-edge--price { grid-template-columns: auto auto 1fr; }
  .pxe-edge--price .pg-link { grid-column: 1 / -1; max-width: none; }
  .pxe-lab__box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pick pick" "scan out" "report report" "live live"; }
}
@media (max-width: 980px) {
  .pxe-hero__grid { grid-template-columns: 1fr; }
  .pxe-stage { margin: 10px auto 0; }
}
@media (max-width: 640px) {
  .pxe-stage { height: 480px; max-width: 380px; margin-top: 10px; }
  .pxe-layer--feed { width: 220px; top: 0; }
  .pxe-feed__win { height: 150px; }
  .pxe-feed__list li { font-size: 11px; }
  .pxe-layer--paper { left: 0; top: 96px; width: 168px; }
  .pxe-receipt { padding: 14px 12px 22px; font-size: 9.5px; }
  .pxe-receipt__m, .pxe-receipt__t { font-size: 11px; }
  .pxe-layer--phone { right: 0; width: 206px; }
  .pxe-layer--feed { right: -8px; }
  .pxe-phone { height: 400px; border-radius: 36px; }
  .pxe-phone__scr { padding: 44px 11px 11px; gap: 7px; border-radius: 28px; }
  .pxe-phone__shot { height: 42px; }
  .pxe-phone__fields > div { padding: 5px 9px; }
  .pxe-phone__fields dd { font-size: 12.5px; }
  .pxe-phone__ok { font-size: 10.5px; padding: 6px 9px; }
  .pxe-bento { grid-template-columns: 1fr; }
  .pxe-edge--big, .pxe-edge--wide, .pxe-edge--price { grid-column: auto; }
  .pxe-edge--wide { flex-direction: column; align-items: flex-start; }
  .pxe-edge--price { grid-template-columns: 1fr 1fr; }
  .pxe-edge--price .pg-link { grid-column: 1 / -1; max-width: none; }
  .pxe-edge--price ul { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed #E5C676; padding: 10px 0 0; }
  .pxe-viz-scan { grid-template-columns: 120px 1fr; padding: 14px; gap: 12px; }
  .pxe-lab__box { grid-template-columns: 1fr; grid-template-areas: "pick" "scan" "out" "report" "live"; }
  .pxe-lab__thumbs { grid-template-columns: 1fr; }
  .pxe-lab__bed { min-height: 230px; }
  .pxe-trip__head b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pxe-feed__list, .pxe-mini-r i, .pxe-feed__h span i, .pxe-phone__fields > div::after { animation: none !important; }
  .pxe-phone__fields > div::after { display: none; }
  .pxe-lab__r, .pxe-lab__lines li { animation: none; }
}