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

/* ================= hero: split editor ================= */
.pxm-hero .pxm-hero__grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); align-items: center; }
.pxm-hero .pg-h1 { max-width: 15.5em; font-size: clamp(36px, 1.2rem + 2.6vw, 54px); }
.pxm-hero .pxm-hero__grid > .pg-hero__copy { min-width: 0; }
.pxm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.pxm-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #fff; border: 1px solid #F3D3D3; box-shadow: 0 8px 18px -14px rgba(8,34,56,.5); font: 600 13.5px/1.25 var(--f-body); color: #082238; }
.pxm-chips .pxm-ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #FDECEC; color: #D21F22; box-sizing: border-box; }

.pxm-studio { position: relative; margin: 0; perspective: 1400px; }
.pxm-studio__win { position: relative; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 60px 100px -50px rgba(8,34,56,.55); overflow: hidden; will-change: transform; }
.pxm-studio__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #EDF2F6; background: #F8FAFC; }
.pxm-studio__bar b { font: 700 14px/1.2 var(--f-display); color: #082238; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxm-studio__bar em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid #E2E8F0; font: 600 11px/1 var(--f-body); font-style: normal; color: #64748B; }
.pxm-dots { display: inline-flex; gap: 5px; }
.pxm-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E2E8F0; }
.pxm-dots i:first-child { background: #F87171; } .pxm-dots i:nth-child(2) { background: #FBBF24; } .pxm-dots i:nth-child(3) { background: #34D399; }
.pxm-studio__split { display: grid; grid-template-columns: 92px minmax(0, 1fr); min-height: 0; }
.pxm-pal { display: grid; align-content: start; gap: 8px; margin: 0; padding: 14px 10px; list-style: none; background: #F8FAFC; border-right: 1px solid #EDF2F6; }
.pxm-pal li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; color: #0A6FA8; transition: transform .35s cubic-bezier(.2,.7,.1,1), background .35s, color .35s, border-color .35s; }
.pxm-pal li span { font: 600 10.5px/1 var(--f-body); color: #64748B; }
.pxm-pal li.is-drag { transform: translateX(10px) scale(1.06); background: #FDECEC; border-color: #F5B4B5; color: #D21F22; box-shadow: 0 12px 20px -12px rgba(210,31,34,.6); }
.pxm-mail { padding: 14px 16px 16px; min-width: 0; }
.pxm-mail__meta { display: grid; gap: 4px; padding: 0 0 10px; border-bottom: 1px dashed #E2E8F0; }
.pxm-mail__meta p { display: flex; gap: 10px; margin: 0; font: 500 12px/1.4 var(--f-body); color: #334155; min-width: 0; }
.pxm-mail__meta span { flex: none; width: 52px; color: #94A3B8; }
.pxm-mail__meta b { font-weight: 600; color: #082238; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxm-mail__subj { display: inline-flex; align-items: center; }
.pxm-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; background: #D21F22; animation: pxmBlink 1s steps(2) infinite; }
@keyframes pxmBlink { 50% { opacity: 0; } }
.pxm-mail__body { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 14px; background: #F3F7F9; }
.pxm-blk { border-radius: 10px; background: #fff; outline: 1.5px dashed transparent; outline-offset: 2px; transition: outline-color .3s; }
.pxm-blk.is-hot { outline-color: #F28B8C; }
.pxm-blk.is-off { opacity: 0; transform: translateY(-10px); }
.pxm-blk { transition: opacity .3s, transform .3s, outline-color .3s; }
.pxm-blk.is-drop { animation: pxmDrop .6s cubic-bezier(.2,.9,.2,1.2) both; }
@keyframes pxmDrop { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
.pxm-blk--head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; }
.pxm-blk--head b { font: 800 13px/1 var(--f-display); letter-spacing: .08em; color: #082238; }
.pxm-blk--head small { font: 500 10.5px/1 var(--f-body); color: #64748B; }
.pxm-blk--img { position: relative; height: 92px; overflow: hidden; background: linear-gradient(180deg, #FFD7A8, #FF9F6B 70%, #F26B4F); }
.pxm-blk--img b { position: absolute; left: 12px; bottom: 10px; font: 800 16px/1.1 var(--f-display); color: #fff; text-shadow: 0 2px 8px rgba(120,30,10,.4); }
.pxm-sun { position: absolute; right: 22px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: #FFF4C9; box-shadow: 0 0 0 8px rgba(255,244,201,.35); }
.pxm-hill { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 70px; border-radius: 50% 50% 0 0; background: #B9542F; opacity: .55; }
.pxm-blk--text { display: grid; gap: 6px; padding: 10px 12px; }
.pxm-blk--text i { display: block; height: 7px; border-radius: 4px; background: #E2E8F0; }
.pxm-blk--text i:nth-child(2) { width: 88%; } .pxm-blk--text i:nth-child(3) { width: 62%; }
.pxm-blk--btn { display: grid; place-items: center; padding: 8px; background: transparent; }
.pxm-blk--btn span { padding: 8px 16px; border-radius: 999px; background: #D21F22; font: 700 12px/1 var(--f-body); color: #fff; }
.pxm-blk--social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 8px; background: transparent; }
.pxm-blk--social i { width: 14px; height: 14px; border-radius: 50%; background: #CBD5E1; }
.pxm-blk--social small { flex-basis: 100%; text-align: center; font: 500 9.5px/1.2 var(--f-body); color: #94A3B8; }
.pxm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid #EDF2F6; }
.pxm-stats li { display: grid; gap: 3px; padding: 11px 14px; border-left: 1px solid #EDF2F6; }
.pxm-stats li:first-child { border-left: 0; }
.pxm-stats small { font: 600 10.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #94A3B8; }
.pxm-stats b { font: 800 17px/1.1 var(--f-display); color: #082238; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pxm-stats li:last-child b { color: #0D8A6A; }
.pxm-float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #082238; color: #fff; font: 600 12.5px/1 var(--f-body); box-shadow: 0 16px 30px -14px rgba(8,34,56,.7); white-space: nowrap; }
.pxm-float img { background: #fff; border-radius: 50%; padding: 2px; }
.pxm-float--a { top: -18px; right: 22px; }
.pxm-float--b { bottom: 78px; left: -26px; background: #fff; color: #082238; border: 1px solid #E2E8F0; }
.pxm-float--b .pxm-ic { color: #D21F22; }

/* ================= 01. edges: list + sticky visual ================= */
.pxm-edges__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); margin-top: 44px; align-items: start; }
.pxm-edges__vis { position: sticky; top: 110px; min-height: 320px; padding: 28px; border-radius: 26px; background: linear-gradient(150deg, #0A2A47, #0B4A73 60%, #0A6A66); box-shadow: 0 40px 80px -40px rgba(8,34,56,.6); color: #fff; overflow: hidden; }
.pxm-edges__vis::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(228,37,39,.45), transparent 70%); pointer-events: none; }
.pxm-ev { position: absolute; inset: 28px; display: grid; align-content: center; gap: 16px; opacity: 0; transform: translateY(16px); transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.1,1); }
.pxm-ev.is-on { opacity: 1; transform: none; }
.pxm-ev__t { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 22px/1.2 var(--f-display); letter-spacing: -.02em; }
.pxm-ev__t img { background: #fff; border-radius: 50%; padding: 2px; }
.pxm-ev__s { margin: 0; font-size: 14px; color: #A9C7DC; }
.pxm-meter { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; align-items: center; gap: 12px; font: 600 13px/1 var(--f-body); color: #CFE2EE; }
.pxm-meter i { position: relative; height: 12px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; }
.pxm-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #00A3D9, #3FB97A); }
.pxm-meter--inf i::after { background: repeating-linear-gradient(90deg, #FFB81C 0 14px, #F59E0B 14px 28px); animation: pxmSlide 1.2s linear infinite; background-size: 200% 100%; }
@keyframes pxmSlide { to { background-position: -28px 0; } }
.pxm-meter b { color: #fff; text-align: right; }
.pxm-ring { position: relative; display: grid; place-items: center; align-content: center; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#3FB97A calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.pxm-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #0B3F63; }
.pxm-ring b, .pxm-ring span { position: relative; }
.pxm-ring b { font: 800 30px/1 var(--f-display); }
.pxm-ring span { font-size: 13px; color: #A9C7DC; }
.pxm-split { display: flex; gap: 6px; }
.pxm-split span { flex: 0 0 calc(var(--w) - 4px); padding: 22px 8px; border-radius: 12px; background: rgba(255,255,255,.12); text-align: center; font: 700 13px/1.1 var(--f-body); }
.pxm-split span:first-child { background: rgba(0,163,217,.35); } .pxm-split span:nth-child(2) { background: rgba(228,37,39,.4); }
.pxm-split .is-rest { background: rgba(63,185,122,.35); }
.pxm-sync { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.pxm-sync img { width: 56px; height: 56px; padding: 9px; border-radius: 16px; background: #fff; box-sizing: border-box; }
.pxm-sync span { display: grid; gap: 10px; }
.pxm-sync i { font: 600 12.5px/1.3 var(--f-body); font-style: normal; text-align: center; padding: 8px 6px; border-radius: 10px; background: rgba(255,255,255,.1); }
.pxm-mini { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxm-mini li { position: relative; justify-self: start; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.12); font: 600 13.5px/1 var(--f-body); }
.pxm-mini li:nth-child(2) { margin-left: 24px; } .pxm-mini li:nth-child(3) { margin-left: 48px; } .pxm-mini li:nth-child(4) { margin-left: 72px; }
.pxm-mini .is-q { background: #FFB81C; color: #082238; }
.pxm-zl { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxm-zl li { padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font: 600 14px/1.35 var(--f-body); }
.pxm-zl li:first-child { background: #fff; color: #082238; }

.pxm-edges__list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: pxme; }
.pxm-edge { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 26px 0; border-top: 1px solid #E2E8F0; transition: opacity .35s; }
.pxm-edge:last-child { border-bottom: 1px solid #E2E8F0; }
.pxm-edge__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #F3F7F9; color: #64748B; transition: background .35s, color .35s, transform .35s; }
.pxm-edge__ic .pxm-ic { width: 22px; height: 22px; }
.pxm-edge.is-on .pxm-edge__ic { background: #D21F22; color: #fff; transform: rotate(-6deg); }
.pxm-edge h3 { margin: 4px 0 8px; font: 700 19px/1.3 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pxm-edge p { margin: 0; color: #334155; }
.pxm-edge a { color: #0A6FA8; font-weight: 600; }
.pxm-vs { display: inline-block; margin-top: 10px !important; padding: 5px 11px; border-radius: 8px; background: #FFF6E0; font: 600 13px/1.3 var(--f-body); color: #7A5200 !important; }

/* ================= 02. drip journey ================= */
.pxm-flow { position: relative; margin-top: 44px; padding: clamp(20px, 3vw, 36px); border-radius: 28px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.pxm-flow__tag { position: absolute; top: 18px; right: 18px; margin: 0; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #E2E8F0; font: 600 11.5px/1 var(--f-body); color: #64748B; }
.pxm-flow ol { margin: 0; padding: 0; list-style: none; }
.pxm-flow__trunk { display: grid; justify-items: center; gap: 26px; }
.pxm-node { position: relative; width: min(100%, 360px); padding: 14px 16px; border-radius: 16px; background: #fff; border: 1.5px solid #E2E8F0; box-shadow: 0 16px 30px -26px rgba(8,34,56,.5); opacity: .45; transform: scale(.97); transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.1,1), border-color .5s, box-shadow .5s; }
.pxm-node.is-lit { opacity: 1; transform: none; border-color: #9CD3E8; box-shadow: 0 20px 36px -24px rgba(10,111,168,.55); }
.pxm-node__k { display: block; margin-bottom: 4px; font: 700 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: #64748B; }
.pxm-node b { display: flex; align-items: center; gap: 8px; font: 700 15.5px/1.3 var(--f-display); color: #082238; }
.pxm-node b .pxm-ic { color: #0A6FA8; }
.pxm-node p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #475569; }
.pxm-flow__trunk .pxm-node:not(:last-child)::after, .pxm-flow__br .pxm-node:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 26px; background: repeating-linear-gradient(180deg, #9CB3C6 0 4px, transparent 4px 8px); }
.pxm-flow__br .pxm-node:not(:last-child)::after { height: 18px; }
.pxm-node.is-lit:not(:last-child)::after { background: #0A6FA8; }
.pxm-node--trig { border-color: #F5B4B5; }
.pxm-node--trig.is-lit { border-color: #E42527; box-shadow: 0 20px 36px -24px rgba(228,37,39,.55); }
.pxm-node--wait { width: auto; padding: 9px 16px; border-radius: 999px; }
.pxm-node--q { width: auto; padding: 12px 20px; background: #FFF6E0; border-color: #F7D58A; }
.pxm-node--q.is-lit { border-color: #F0A400; box-shadow: 0 20px 36px -24px rgba(240,164,0,.6); }
.pxm-node--end { background: #F8FAFC; border-style: dashed; }
.pxm-node--crm { border-color: #A7E3C7; }
.pxm-node--crm.is-lit { border-color: #3FB97A; background: #F0FBF5; box-shadow: 0 20px 36px -24px rgba(63,185,122,.6); }
.pxm-flow__branches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; padding-top: 26px; }
.pxm-flow__branches::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 26px; border: 2px dashed #9CB3C6; border-bottom: 0; border-radius: 16px 16px 0 0; }
.pxm-flow__br { display: grid; justify-items: center; align-content: start; gap: 18px; }
.pxm-flow__lbl { padding: 5px 14px; border-radius: 999px; font: 800 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.pxm-flow__br--no .pxm-flow__lbl { background: #FDE8E8; color: #B91C1C; }
.pxm-flow__br--yes .pxm-flow__lbl { background: #DDF4EF; color: #0D7A5F; }
.pxm-flow__note { margin: 26px 0 0; text-align: center; font-size: 14px; color: #64748B; }

/* ================= 03. A/B picker (dark band) ================= */
.pxm-ab__box { margin-top: 40px; padding: clamp(18px, 3vw, 30px); border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.pxm-ab__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.pxm-ab__top p { margin: 0; font: 600 14px/1.2 var(--f-body); color: #BFD3E2; }
.pxm-ab__top b { color: #fff; }
.pxm-ab__tag { padding: 5px 10px; border-radius: 999px; background: #FFB81C; color: #082238 !important; font-size: 12px !important; }
.pxm-ab__score { margin-left: auto !important; }
.pxm-ab__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 36px); margin-top: 22px; }
.pxm-ab__camp { margin: 0 0 14px; font: 700 17px/1.3 var(--f-display); color: #fff; }
.pxm-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.pxm-seg legend { width: 100%; margin-bottom: 8px; padding: 0; font: 600 12.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: #9FC0D8; }
.pxm-seg label { position: relative; cursor: pointer; }
.pxm-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pxm-seg span { display: inline-block; padding: 9px 15px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.2); font: 600 14px/1 var(--f-body); color: #DCE9F3; transition: background .2s, border-color .2s, color .2s; }
.pxm-seg input:checked + span { background: #fff; border-color: #fff; color: #082238; }
.pxm-seg input:focus-visible + span { outline: 2px solid #5FD3F3; outline-offset: 2px; }
.pxm-ab__plan { margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.18); font-size: 14.5px; line-height: 1.5; color: #CFE2EE; }
.pxm-ab__pick { display: grid; gap: 12px; align-content: start; }
.pxm-ver { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "l s n" "l bar bar"; align-items: center; gap: 8px 14px; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; text-align: left; cursor: pointer; font: inherit; transition: border-color .25s, background .25s, transform .25s; }
.pxm-ver:hover:not(:disabled) { border-color: #5FD3F3; transform: translateY(-2px); }
.pxm-ver:focus-visible { outline: 2px solid #5FD3F3; outline-offset: 3px; }
.pxm-ver:disabled { cursor: default; }
.pxm-ver__l { grid-area: l; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.14); font: 800 18px/1 var(--f-display); }
.pxm-ver__s { grid-area: s; font: 700 16.5px/1.35 var(--f-display); }
.pxm-ver__n { grid-area: n; font: 800 18px/1 var(--f-display); font-variant-numeric: tabular-nums; color: #fff; }
.pxm-ver__bar { grid-area: bar; height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.pxm-ver__bar i { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: #9FC0D8; transition: width 1s cubic-bezier(.2,.7,.1,1); }
.pxm-ver.is-guess { border-color: #FFB81C; }
.pxm-ver.is-win { border-color: #3FB97A; background: rgba(63,185,122,.16); }
.pxm-ver.is-win .pxm-ver__l { background: #3FB97A; }
.pxm-ver.is-win .pxm-ver__bar i { background: #3FB97A; }
.pxm-ab__msg { margin: 20px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.2); font-size: 15.5px; line-height: 1.55; color: #E6F0F7; min-height: 3.2em; }
.pxm-ab__msg b { color: #fff; }
.pxm-ab__ctl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.pxm-ab__ctl .btn:disabled { opacity: .45; cursor: default; }
.pxm-ab__reset { padding: 12px 18px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: transparent; font: 600 14.5px/1 var(--f-body); color: #fff; cursor: pointer; }
.pxm-ab__reset:hover { border-color: #fff; }
.pxm-ab__note { max-width: 72ch; margin: 22px 0 0; font-size: 14.5px; line-height: 1.55; color: #9FC0D8; }

/* ================= 04. pricing picker ================= */
.pxm-pick { margin-top: 40px; padding: clamp(18px, 3vw, 30px); border-radius: 26px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 70px -50px rgba(8,34,56,.5); }
.pxm-pick__in { display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: 18px 36px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid #EDF2F6; }
.pxm-pick__f { display: grid; gap: 10px; }
.pxm-pick__f > span { font: 600 13px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #64748B; }
label.pxm-pick__f { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
label.pxm-pick__f > span { grid-column: 1 / -1; }
.pxm-pick__f output { min-width: 96px; font: 800 26px/1 var(--f-display); color: #082238; text-align: right; font-variant-numeric: tabular-nums; }
.pxm-pick input[type=range] { width: 100%; accent-color: #D21F22; height: 28px; }
.pxm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.pxm-plan { padding: 20px; border-radius: 18px; border: 1.5px solid #E2E8F0; background: #F8FAFC; transition: border-color .3s, background .3s, transform .3s; }
.pxm-plan.is-pick { border-color: #D21F22; background: #fff; box-shadow: 0 24px 40px -30px rgba(210,31,34,.6); }
.pxm-plan.is-na { opacity: .6; }
.pxm-plan__n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 700 17px/1.2 var(--f-display); color: #082238; }
.pxm-plan__n em { padding: 3px 8px; border-radius: 999px; background: #FDECEC; font: 600 11px/1.2 var(--f-body); font-style: normal; color: #B91C1C; }
.pxm-plan__p { display: grid; gap: 4px; margin: 12px 0 14px; }
.pxm-plan__p b { font: 800 34px/1 var(--f-display); letter-spacing: -.02em; color: #082238; font-variant-numeric: tabular-nums; }
.pxm-plan.is-na .pxm-plan__p b { font-size: 20px; color: #64748B; }
.pxm-plan__p span { font-size: 13.5px; color: #64748B; }
.pxm-plan.is-swap .pxm-plan__p b { animation: pxmPop .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes pxmPop { from { opacity: .3; transform: translateY(6px); } }
.pxm-plan ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pxm-plan li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: #334155; }
.pxm-plan li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border-left: 2px solid #3FB97A; border-bottom: 2px solid #3FB97A; transform: rotate(-45deg); }
.pxm-pick__year { margin: 18px 0 0; font: 600 15px/1.5 var(--f-body); color: #082238; }
.pxm-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.pxm-extras p { margin: 0; padding: 16px 18px; border-radius: 16px; background: #F3F7F9; font-size: 14.5px; line-height: 1.55; color: #334155; }
.pxm-extras b { color: #082238; }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .pxm-float--a { right: 4px; } .pxm-float--b { left: 4px; }
}
@media (max-width: 980px) {
  .pxm-hero .pxm-hero__grid { grid-template-columns: 1fr; }
  .pxm-studio { max-width: 620px; }
  .pxm-edges__grid { grid-template-columns: 1fr; }
  .pxm-edges__vis { display: none; }
  .pxm-edge { opacity: 1; }
  .pxm-ab__grid { grid-template-columns: 1fr; }
  .pxm-plans, .pxm-extras { grid-template-columns: 1fr; }
  .pxm-pick__in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pxm-studio__split { grid-template-columns: 64px minmax(0, 1fr); }
  .pxm-pal { padding: 10px 6px; gap: 6px; }
  .pxm-pal li { padding: 7px 2px; }
  .pxm-pal li span { font-size: 9.5px; }
  .pxm-mail { padding: 10px; }
  .pxm-mail__meta span { width: 44px; }
  .pxm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxm-stats li:nth-child(3) { border-left: 0; }
  .pxm-stats li:nth-child(n+3) { border-top: 1px solid #EDF2F6; }
  .pxm-float { font-size: 11.5px; padding: 7px 11px; }
  .pxm-float--a { top: auto; bottom: -16px; right: 8px; }
  .pxm-float--b { display: none; }
  .pxm-edge { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .pxm-edge__ic { width: 40px; height: 40px; border-radius: 12px; }
  .pxm-flow__branches { grid-template-columns: 1fr; gap: 30px; }
  .pxm-flow__branches::before { left: 50%; right: auto; width: 2px; border: 0; border-radius: 0; background: repeating-linear-gradient(180deg, #9CB3C6 0 4px, transparent 4px 8px); }
  .pxm-flow__tag { position: static; display: inline-block; margin-bottom: 16px; }
  .pxm-ver { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 14px; gap: 8px 10px; }
  .pxm-ver__l { width: 34px; height: 34px; font-size: 16px; }
  .pxm-ver__s { font-size: 15px; }
  .pxm-ab__score { margin-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pxm-caret, .pxm-meter--inf i::after { animation: none; }
  .pxm-node { opacity: 1; transform: none; transition: none; }
  .pxm-ev, .pxm-edge, .pxm-edge__ic, .pxm-pal li, .pxm-ver__bar i, .pxm-plan { transition: none; }
  .pxm-blk.is-drop, .pxm-plan.is-swap .pxm-plan__p b { animation: none; }
}