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

/* ================= hero ================= */
.pxn-hero .pxn-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; }
.pxn-hero .pg-h1 { max-width: 19ch; font-size: clamp(36px, 1.1rem + 2.5vw, 52px); }
.pxn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.pxn-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; }
.pxn-chips .pxn-ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #E7F6EE; color: #089949; box-sizing: border-box; }

.pxn-hf { position: relative; margin: 0; padding: 18px 0; perspective: 1400px; }
.pxn-hf__card { position: relative; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 60px 100px -50px rgba(8,34,56,.5); transform-style: preserve-3d; will-change: transform; }
.pxn-hf__top { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid #EDF2F6; }
.pxn-hf__top b { font: 700 15px/1.2 var(--f-display); color: #082238; }
.pxn-hf__top em, .pxn-lab__fh em, .pxn-trip__card em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #F3F7F9; font: 600 11px/1 var(--f-body); font-style: normal; color: #64748B; }
.pxn-hf__body { display: grid; gap: 0; padding-top: 6px; }
.pxn-f { display: grid; gap: 5px; padding: 8px 0; }
.pxn-f__l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 12px/1.2 var(--f-body); color: #475569; }
.pxn-f__in { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #DCE7EF; background: #FBFDFE; font: 500 13.5px/1.2 var(--f-body); color: #082238; }
.pxn-f__in--sm { max-width: 200px; }
.pxn-f__in .pxn-ic { width: 16px; height: 16px; color: #089949; }
.pxn-f__dd { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid #94A3B8; border-bottom: 2px solid #94A3B8; transform: rotate(45deg) translate(-2px,-2px); }
.pxn-seg { display: inline-flex; width: max-content; padding: 3px; border-radius: 10px; background: #F1F5F9; }
.pxn-seg i { padding: 7px 14px; border-radius: 8px; font: 600 12.5px/1 var(--f-body); font-style: normal; color: #64748B; transition: background .3s, color .3s, box-shadow .3s; }
.pxn-seg i.is-on { background: #fff; color: #082238; box-shadow: 0 2px 8px -3px rgba(8,34,56,.35); }
.pxn-rule { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: #E7F6EE; color: #087A3B; font: 600 10.5px/1.3 var(--f-body); }
.pxn-rule .pxn-ic { width: 12px; height: 12px; }
.pxn-f--rule { max-height: 0; padding: 0; opacity: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.2,.7,.1,1), opacity .4s, padding .55s; }
.pxn-f--rule.is-show { max-height: 90px; padding: 8px 0; opacity: 1; }
.pxn-f--rule.is-show .pxn-f__in { animation: pxnGlow 1.4s ease; }
@keyframes pxnGlow { 0% { border-color: #3FB97A; box-shadow: 0 0 0 4px rgba(63,185,122,.2); } 100% { border-color: #DCE7EF; box-shadow: none; } }
.pxn-hf__go { margin-top: 10px; padding: 11px 16px; border: 0; border-radius: 12px; background: #FFB81C; color: #082238; font: 700 14px/1 var(--f-display); cursor: default; transition: transform .2s; }
.pxn-hf__go.is-press { transform: scale(.96); }
.pxn-hf__lead { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 11px 12px; border-radius: 14px; background: linear-gradient(135deg, #EAF6FC, #EDF8F2); border: 1px solid #CDE8F3; }
.pxn-hf__lead p { margin: 0; font: 500 12.5px/1.4 var(--f-body); color: #334155; }
.pxn-hf__lead b { display: block; font: 700 12.5px/1.3 var(--f-display); color: #082238; }
.pxn-hf__lead.is-pop { animation: pxnPop .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes pxnPop { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.pxn-hf__float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: #082238; color: #fff; font: 600 12px/1 var(--f-body); box-shadow: 0 14px 30px -14px rgba(8,34,56,.7); white-space: nowrap; }
.pxn-hf__float .pxn-ic { width: 15px; height: 15px; color: #7FE0B0; }
.pxn-hf__float--a { top: 0; right: -14px; }
.pxn-hf__float--b { bottom: 4px; left: 28px; background: #fff; color: #082238; border: 1px solid #E2E8F0; }
.pxn-hf__float--b .pxn-ic { color: #089949; }

/* ================= edges: split list + sticky visual ================= */
.pxn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); margin-top: 36px; align-items: start; }
.pxn-edge-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pxn-edge { position: relative; padding: 24px 0 24px 64px; border-top: 1px solid #E2E8F0; cursor: default; transition: opacity .3s; }
.pxn-edge:last-child { border-bottom: 1px solid #E2E8F0; }
.pxn-edge__n { position: absolute; left: 0; top: 24px; margin: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #F3F7F9; font: 700 14px/1 var(--f-display); color: #64748B; transition: background .3s, color .3s; }
.pxn-edge h3 { margin: 0 0 6px; font: 700 clamp(18px, 1rem + .5vw, 22px)/1.25 var(--f-display); color: #082238; }
.pxn-edge p { margin: 0; font: 400 15.5px/1.6 var(--f-body); color: #334155; }
.pxn-edge.is-on .pxn-edge__n { background: #089949; color: #fff; }
.pxn-edge::before { content: ""; position: absolute; left: 21px; top: 76px; bottom: 10px; width: 2px; background: linear-gradient(#3FB97A, transparent); opacity: 0; transition: opacity .3s; }
.pxn-edge.is-on::before { opacity: 1; }
.pxn-vs { display: inline-block; margin-top: 10px !important; padding: 5px 10px; border-radius: 8px; background: #E7F6EE; font: 600 12.5px/1.3 var(--f-body) !important; color: #087A3B !important; }
.pxn-stage { position: sticky; top: 110px; }
.pxn-stage__in { position: relative; min-height: 420px; padding: 28px; border-radius: 28px; background: linear-gradient(150deg, #F3F7F9, #EAF6EF); border: 1px solid #E2E8F0; overflow: hidden; }
.pxn-stage__tag { position: absolute; top: 16px; right: 16px; margin: 0; padding: 4px 9px; border-radius: 999px; background: #fff; font: 600 11px/1 var(--f-body); color: #64748B; }
.pxn-sv { position: absolute; inset: 52px 28px 28px; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.1,1); pointer-events: none; }
.pxn-sv.is-on { opacity: 1; transform: none; }
.pxn-sv__cap { margin: 0; text-align: center; font: 600 13px/1.4 var(--f-body); color: #087A3B; }
.pxn-sv__form, .pxn-sv__phone, .pxn-sv__ai { display: grid; gap: 9px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 50px -36px rgba(8,34,56,.6); }
.pxn-sv__q { font: 700 13px/1.2 var(--f-display); color: #082238; }
.pxn-sv__opts { display: flex; gap: 6px; }
.pxn-sv__opts b { padding: 7px 12px; border-radius: 9px; border: 1.5px solid #DCE7EF; font: 600 12.5px/1 var(--f-body); color: #475569; }
.pxn-sv__opts b.is-on { border-color: #089949; background: #E7F6EE; color: #087A3B; }
.pxn-sv__f { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid #DCE7EF; font: 500 13px/1.2 var(--f-body); color: #334155; }
.pxn-sv__f .pxn-ic { width: 15px; height: 15px; color: #089949; }
.pxn-sv__f.is-hide { border-style: dashed; color: #94A3B8; text-decoration: line-through; opacity: .55; }
.pxn-sv__phone { max-width: 260px; margin: 0 auto; width: 100%; border-radius: 26px; border: 6px solid #082238; }
.pxn-sv__bar { display: flex; align-items: center; justify-content: space-between; font: 600 11px/1 var(--f-body); color: #B45309; }
.pxn-sv__bar i { width: 18px; height: 10px; border-radius: 2px; border: 1.5px solid #94A3B8; position: relative; }
.pxn-sv__bar i::after { content: ""; position: absolute; left: -4px; right: -4px; top: 3px; height: 1.5px; background: #B45309; transform: rotate(-30deg); }
.pxn-sv__q2 { padding: 8px 10px; border-radius: 10px; background: #FFF6E0; font: 600 12px/1.2 var(--f-body); color: #92400E; text-align: center; }
.pxn-sv__pay { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #DCE7EF; font: 600 14px/1 var(--f-body); color: #082238; }
.pxn-sv__pay em { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: #E7F6EE; color: #087A3B; font: 600 11.5px/1.2 var(--f-body); font-style: normal; }
.pxn-sv__sig { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed #9DD3EC; background: #F4FAFD; }
.pxn-sv__sig svg { width: 100%; max-width: 200px; height: 44px; }
.pxn-sv__sig path { fill: none; stroke: #082238; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.pxn-sv.is-on .pxn-sv__sig path { animation: pxnDraw 1.8s .3s ease forwards; }
@keyframes pxnDraw { to { stroke-dashoffset: 0; } }
.pxn-sv__sig em { font: 600 11.5px/1.2 var(--f-body); font-style: normal; color: #0A6FA8; }
.pxn-sv__appr { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxn-sv__appr li { position: relative; display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; padding: 11px 14px 11px 40px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; font: 500 13px/1.3 var(--f-body); color: #64748B; }
.pxn-sv__appr li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid #CBD5E1; box-sizing: border-box; }
.pxn-sv__appr li.is-ok::before { background: #3FB97A; border-color: #3FB97A; }
.pxn-sv__appr li.is-wait::before { border-color: #F59E0B; animation: pxnPulse 1.4s ease-in-out infinite; }
@keyframes pxnPulse { 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.2); } }
.pxn-sv__appr b { font: 700 13px/1.2 var(--f-display); color: #082238; }
.pxn-sv__hand { display: grid; gap: 14px; justify-items: center; }
.pxn-sv__mini { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 20px 40px -30px rgba(8,34,56,.6); font: 600 13px/1.2 var(--f-body); color: #082238; }
.pxn-sv__mini--crm { border-color: #BFE7CF; }
.pxn-sv__plane { width: 30px; height: 30px; color: #00A3D9; }
.pxn-sv.is-on .pxn-sv__plane { animation: pxnFly 1.6s ease-in-out infinite; }
@keyframes pxnFly { 0% { transform: translate(-30px, -10px) rotate(30deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(30px, 10px) rotate(60deg); opacity: 0; } }
.pxn-sv__prompt { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #EAF6FC, #EDF8F2); font: 600 13px/1.4 var(--f-body); color: #082238; }
.pxn-sv__prompt .pxn-ic { color: #00A3D9; }
.pxn-sv.is-on .pxn-sv__ai .pxn-sv__f { animation: pxnPop .5s both; }
.pxn-sv.is-on .pxn-sv__ai .pxn-sv__f:nth-child(3) { animation-delay: .25s; }
.pxn-sv.is-on .pxn-sv__ai .pxn-sv__f:nth-child(4) { animation-delay: .5s; }

/* ================= day: paper-plane hand-off ================= */
.pxn-trip__stage { margin-top: 36px; }
.pxn-trip__ends { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; align-items: center; min-height: 260px; }
.pxn-trip__card { position: relative; z-index: 2; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -40px rgba(8,34,56,.6); }
.pxn-trip__card p { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.pxn-trip__card p b { font: 700 14px/1.2 var(--f-display); color: #082238; }
.pxn-trip__card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font: 500 13px/1.3 var(--f-body); }
.pxn-trip__card dt { color: #64748B; }
.pxn-trip__card dd { margin: 0; color: #082238; font-weight: 600; }
.pxn-trip__card--crm { grid-column: 3; transition: border-color .4s, box-shadow .4s; }
.pxn-trip__card--crm.is-hit { border-color: #3FB97A; box-shadow: 0 0 0 4px rgba(63,185,122,.15), 0 30px 60px -40px rgba(8,34,56,.6); }
.pxn-trip__path { position: absolute; left: 230px; right: 230px; top: 20px; height: 220px; width: calc(100% - 460px); overflow: visible; }
.pxn-trip__track { fill: none; stroke: #BFD7E6; stroke-width: 2; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }
.pxn-trip__done { fill: none; stroke: #00A3D9; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pxn-trip__plane { position: absolute; z-index: 3; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #082238; color: #fff; box-shadow: 0 14px 28px -12px rgba(8,34,56,.7); }
.pxn-trip__plane .pxn-ic { width: 22px; height: 22px; }
.pxn-trip__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.pxn-trip__steps li { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; transition: border-color .35s, background .35s, transform .35s; }
.pxn-trip__steps li.is-on { border-color: #9DD3EC; background: #F4FAFD; transform: translateY(-4px); }
.pxn-trip__n { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: #F3F7F9; font: 700 13px/1 var(--f-display); color: #64748B; transition: background .35s, color .35s; }
.pxn-trip__steps li.is-on .pxn-trip__n { background: #00A3D9; color: #fff; }
.pxn-trip__steps h3 { margin: 0 0 6px; font: 700 16px/1.3 var(--f-display); color: #082238; }
.pxn-trip__steps p { margin: 0; font: 400 14px/1.55 var(--f-body); color: #334155; }

/* ================= signature: form rules lab (dark band) ================= */
.pxn-lab__box { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 40px); margin-top: 32px; align-items: start; }
.pxn-lab__rules { padding: 22px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pxn-lab__tag { display: inline-block; margin: 0 0 14px; padding: 5px 10px; border-radius: 999px; background: rgba(255,184,28,.16); font: 600 12px/1 var(--f-body); color: #FFD27A; }
.pxn-lab__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxn-sw { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); cursor: pointer; transition: background .2s; }
.pxn-sw:hover { background: rgba(255,255,255,.09); }
.pxn-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pxn-sw__t { position: relative; width: 46px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.2); transition: background .25s; }
.pxn-sw__t::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.pxn-sw input:checked + .pxn-sw__t { background: #3FB97A; }
.pxn-sw input:checked + .pxn-sw__t::after { transform: translateX(20px); }
.pxn-sw input:focus-visible + .pxn-sw__t { box-shadow: 0 0 0 3px rgba(0,163,217,.6); }
.pxn-sw__l { font: 400 13.5px/1.45 var(--f-body); color: #BFD3E2; }
.pxn-sw__l b { display: block; font: 700 14.5px/1.3 var(--f-display); color: #fff; }
.pxn-lab__meter { display: grid; gap: 8px; margin: 18px 0 0; font: 600 13px/1 var(--f-body); color: #BFD3E2; }
.pxn-lab__meter b { color: #fff; font-size: 18px; }
.pxn-lab__meter i { display: block; height: 8px; border-radius: 8px; background: rgba(255,255,255,.14); overflow: hidden; }
.pxn-lab__meter em { display: block; height: 100%; width: 55%; border-radius: inherit; background: linear-gradient(90deg, #00B2A9, #3FB97A); transition: width .5s cubic-bezier(.2,.7,.1,1); }
.pxn-lab__out { margin: 12px 0 0; font: 500 14px/1.5 var(--f-body); color: #E2EEF6; }
.pxn-lab__ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pxn-lab__btn { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: 600 13.5px/1 var(--f-body); cursor: pointer; transition: background .2s; }
.pxn-lab__btn:hover { background: rgba(255,255,255,.1); }
.pxn-lab__btn:focus-visible { outline: 3px solid rgba(0,163,217,.6); outline-offset: 2px; }
.pxn-lab__form { padding: 20px; border-radius: 24px; background: #fff; box-shadow: 0 50px 90px -40px rgba(0,0,0,.6); }
.pxn-lab__fh { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid #EDF2F6; }
.pxn-lab__fh b { font: 700 15px/1.2 var(--f-display); color: #082238; }
.pxn-q { display: grid; grid-template-rows: auto auto; gap: 6px; margin: 0; padding: 9px 0 0; border: 0; min-width: 0; transition: opacity .35s, padding .45s; }
.pxn-q > * { min-width: 0; }
.pxn-q label, .pxn-q legend, .pxn-q__l { padding: 0; font: 600 12.5px/1.2 var(--f-body); color: #475569; }
.pxn-q input[type=text], .pxn-q input[type=number], .pxn-q select { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #DCE7EF; background: #FBFDFE; font: 500 14px/1.2 var(--f-body); color: #082238; }
.pxn-q input:focus-visible, .pxn-q select:focus-visible { outline: none; border-color: #00A3D9; box-shadow: 0 0 0 3px rgba(0,163,217,.2); }
fieldset.pxn-q { margin-top: 10px; }
.pxn-q.is-hidden { display: none; }
.pxn-q.is-new { animation: pxnIn .5s cubic-bezier(.2,.7,.1,1); }
.pxn-q.is-new input, .pxn-q.is-new .pxn-q__pay, .pxn-q.is-new .pxn-q__sig, .pxn-q.is-new .pxn-seg2 span { animation: pxnGlow 1.4s ease; }
@keyframes pxnIn { from { opacity: 0; transform: translateY(-8px); } }
.pxn-seg2 { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pxn-seg2 label { position: relative; cursor: pointer; }
.pxn-seg2 input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pxn-seg2 span { display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1.5px solid #DCE7EF; font: 600 13.5px/1 var(--f-body); color: #475569; transition: background .2s, border-color .2s, color .2s; }
.pxn-seg2 input:checked + span { border-color: #089949; background: #E7F6EE; color: #087A3B; }
.pxn-seg2 input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,163,217,.35); }
.pxn-q__pay, .pxn-q__sig { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #DCE7EF; font: 600 14px/1.2 var(--f-body); color: #082238; }
.pxn-q__pay .pxn-ic { color: #089949; }
.pxn-q__sig { border-style: dashed; border-color: #9DD3EC; background: #F4FAFD; color: #0A6FA8; }
.pxn-lab__note { margin: 18px 0 0; max-width: 760px; font: 400 14px/1.6 var(--f-body); color: #9FC0D8; }

/* ================= pricing: plan picker ================= */
.pxn-pick { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 20px; margin-top: 32px; align-items: stretch; }
.pxn-pick__q { display: grid; gap: 18px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -48px rgba(8,34,56,.5); }
.pxn-pick__q fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pxn-pick__q legend { width: 100%; margin-bottom: 10px; padding: 0; font: 700 15px/1.3 var(--f-display); color: #082238; }
.pxn-pick__q label { position: relative; cursor: pointer; }
.pxn-pick__q input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pxn-pick__q label span { display: inline-block; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #DCE7EF; font: 500 14px/1.3 var(--f-body); color: #334155; transition: border-color .2s, background .2s, color .2s; }
.pxn-pick__q input:checked + span { border-color: #089949; background: #089949; color: #fff; }
.pxn-pick__q input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,163,217,.35); }
.pxn-pick__q label:hover span { border-color: #9DD3EC; }
.pxn-pick__out { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 24px; background: linear-gradient(150deg, #082238, #0A3A63 60%, #07605E); color: #fff; }
.pxn-pick__lbl { margin: 0; font: 600 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #9FC0D8; }
.pxn-pick__plan { margin: 0; font: 700 24px/1.2 var(--f-display); }
.pxn-pick__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.pxn-pick__price b { font: 800 44px/1 var(--f-display); letter-spacing: -.02em; }
.pxn-pick__price span { font: 500 14px/1.4 var(--f-body); color: #BFD3E2; }
.pxn-pick__why { margin: 0 0 8px; font: 400 14.5px/1.55 var(--f-body); color: #E2EEF6; }
.pxn-pick__out .btn { margin-top: auto; align-self: flex-start; }
.pxn-pick__out.is-swap .pxn-pick__plan, .pxn-pick__out.is-swap .pxn-pick__price { animation: pxnPop .45s cubic-bezier(.3,1.5,.5,1); }
.pxn-plans { margin-top: 20px; }
.pxn-plans tr { transition: background .3s; }
.pxn-plans tr.is-pick th, .pxn-plans tr.is-pick td { background: #EEF9F2; }
.pxn-plans tr.is-pick th { box-shadow: inset 4px 0 0 #089949; }

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

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .pxn-trip__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pxn-hero .pxn-hero__grid { grid-template-columns: 1fr; }
  .pxn-hf { max-width: 560px; }
  .pxn-split { grid-template-columns: 1fr; }
  .pxn-stage { display: none; }
  .pxn-edge::before { display: none; }
  .pxn-edge .pxn-edge__n { background: #089949; color: #fff; }
  .pxn-lab__box, .pxn-pick { grid-template-columns: 1fr; }
  .pxn-trip__ends { grid-template-columns: 1fr; gap: 14px; min-height: 0; }
  .pxn-trip__card--crm { grid-column: auto; }
  .pxn-trip__path, .pxn-trip__plane { display: none; }
}
@media (max-width: 640px) {
  .pxn-hf__float--a { right: 4px; }
  .pxn-hf__float--b { display: none; }
  .pxn-hf__card { padding: 14px; }
  .pxn-trip__steps { grid-template-columns: 1fr; }
  .pxn-edge { padding-left: 56px; }
  .pxn-pick__q, .pxn-pick__out, .pxn-lab__rules, .pxn-lab__form { padding: 16px; }
  .pxn-pick__price b { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .pxn-f--rule, .pxn-sv, .pxn-lab__meter em, .pxn-trip__steps li { transition: none !important; }
  .pxn-f--rule.is-show .pxn-f__in, .pxn-sv__sig path, .pxn-sv__plane, .pxn-sv__appr li.is-wait::before, .pxn-sv__ai .pxn-sv__f, .pxn-q.is-new, .pxn-q.is-new *, .pxn-hf__lead.is-pop { animation: none !important; }
  .pxn-sv__sig path { stroke-dashoffset: 0; }
}