/* Zoho CRM vs Pipedrive (/compare/zoho-crm-vs-pipedrive/). Prefix .pvpd- */
.pvpd-hero, .pvpd-short, .pvpd-jobs, .pvpd-price, .pvpd-stair, .pvpd-dials, .pvpd-move, .pvpd-proof, .pvpd-start { --pvpd-pd: #0E7A43; --pvpd-pdl: #E3F4EA; --pvpd-z: #0A6FA8; --pvpd-zl: #E3F1FB; }
.pvpd-boards *, .pvpd-tally *, .pvpd-split *, .pvpd-even *, .pvpd-steps *, .pvpd-step, .pvpd-dash *, .pvpd-flip *, .pvpd-four * { box-sizing: border-box; }
.pvpd-sub { margin: 14px 0 0; font: 600 clamp(18px, 1rem + .5vw, 22px)/1.45 var(--f-display); color: #0A3A63; }

/* ---------- hero: stacked boards ---------- */
.pvpd-boards { margin: 0; display: grid; gap: 14px; }
.pvpd-board { position: relative; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 34px 60px -46px rgba(8,34,56,.6); overflow: hidden; }
.pvpd-board.is-pd { margin-right: 26px; }
.pvpd-board.is-zoho { margin-left: 26px; border-color: #CFE3F1; box-shadow: 0 40px 70px -44px rgba(10,111,168,.55); }
.pvpd-board__bar { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-bottom: 1px solid #EEF2F6; font: 500 13px/1.3 var(--f-body); color: #64748B; }
.pvpd-board__bar img { width: 18px; height: 18px; object-fit: contain; }
.pvpd-board__bar img.pvpd-wm { width: auto; height: 21px; margin-right: 2px; }
.pvpd-board__bar b { font: 700 14px/1.3 var(--f-display); color: #082238; }
.pvpd-board__bar em { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: #F1F5F9; font: 700 10.5px/1.2 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.is-pd .pvpd-board__bar { background: linear-gradient(90deg, var(--pvpd-pdl), #fff 70%); }
.is-zoho .pvpd-board__bar { background: linear-gradient(90deg, var(--pvpd-zl), #fff 70%); }
.pvpd-board__body { position: relative; padding: 10px; }
.pvpd-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pvpd-cols li { display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 6px; border-radius: 12px; background: #F6F9FB; }
.pvpd-cols li > span { font: 700 11px/1.3 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvpd-ghost { display: block; height: 30px; border-radius: 8px; background: #fff; border: 1px solid #E7EDF2; }
.pvpd-ghost.is-s { height: 22px; }
.pvpd-ghost:first-of-type { margin-top: 92px; }
.pvpd-deal { --w: calc((100% - 20px - 24px) / 4); position: absolute; left: 10px; top: 32px; width: var(--w); min-height: 66px; padding: 7px 8px; border-radius: 10px; background: #fff; border: 1.5px solid var(--pvpd-pd); box-shadow: 0 14px 24px -14px rgba(8,34,56,.55); transform: translateX(calc(var(--col) * (100% + 8px))); transition: transform 760ms cubic-bezier(.3,.8,.2,1); z-index: 2; }
.is-zoho .pvpd-deal { border-color: var(--pvpd-z); }
.pvpd-deal b { display: block; font: 700 12px/1.25 var(--f-display); color: #082238; }
.pvpd-deal small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: #64748B; }
.pvpd-deal__row { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 800 12px/1.2 var(--f-display); color: #082238; }
.pvpd-av { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #082238; color: #fff; font: 700 9.5px/1 var(--f-body); font-style: normal; }
.pvpd-deal__tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.pvpd-deal__tags i { padding: 2px 5px; border-radius: 5px; background: var(--pvpd-zl); color: var(--pvpd-z); font: 800 9.5px/1.3 var(--f-body); font-style: normal; opacity: 0; transform: scale(.6); transition: opacity 300ms, transform 300ms cubic-bezier(.3,1.6,.5,1); }
.pvpd-deal__tags i.is-on { opacity: 1; transform: none; }
.pvpd-deal.is-hop { animation: pvpd-hop 760ms; }
@keyframes pvpd-hop { 40% { box-shadow: 0 24px 30px -16px rgba(8,34,56,.6); } }
.pvpd-adds { display: grid; gap: 6px; margin: 0; padding: 0 10px 12px; list-style: none; }
.pvpd-adds li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 8px 12px 8px 28px; border-radius: 10px; border: 1px dashed #CFE3F1; font-size: 12.5px; line-height: 1.45; color: #64748B; opacity: .45; transition: opacity 400ms, background 400ms, border-color 400ms; }
.pvpd-adds li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #CBD5E1; transition: background 400ms, box-shadow 400ms; }
.pvpd-adds li b { font: 700 12.5px/1.45 var(--f-display); color: #082238; white-space: nowrap; }
.pvpd-adds li.is-on { opacity: 1; background: #F3F9FD; border-style: solid; border-color: #BFDDF0; color: #334155; }
.pvpd-adds li.is-on::before { background: var(--pvpd-z); box-shadow: 0 0 0 4px rgba(10,111,168,.16); }
.pvpd-boards__cap { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: #64748B; }

/* ---------- short answer tally ---------- */
.pvpd-tally { display: flex; gap: 6px; margin-top: 30px; max-width: 900px; }
.pvpd-tally__seg { flex: var(--n) 1 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 18px 18px 16px; border-radius: 16px; color: #fff; transform-origin: left; }
.pvpd-tally.is-in .pvpd-tally__seg { animation: pvpd-grow 900ms cubic-bezier(.2,.8,.2,1) both; }
.pvpd-tally.is-in .pvpd-tally__seg:nth-child(2) { animation-delay: 120ms; }
.pvpd-tally.is-in .pvpd-tally__seg:nth-child(3) { animation-delay: 240ms; }
@keyframes pvpd-grow { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.pvpd-tally__seg b { font: 800 34px/1.1 var(--f-display); letter-spacing: -.03em; }
.pvpd-tally__seg span { font: 600 14px/1.35 var(--f-body); }
.pvpd-tally__seg.is-pd { background: var(--pvpd-pd); }
.pvpd-tally__seg.is-even { background: #E2E8F0; color: #334155; }
.pvpd-tally__seg.is-zoho { background: linear-gradient(120deg, #0A6FA8, #00A3D9); }
.pvpd-short__note { margin: 18px 0 0; max-width: 760px; font-size: 16px; line-height: 1.6; color: #334155; }

/* ---------- job split (mid kit C) + even row ---------- */
.pvpd-split { margin-top: 32px; }
.pvpd-split .mk-split__col h3 img.pvpd-wm { width: auto; height: 28px; }
.pvpd-split li b { display: block; margin-bottom: 4px; font: 700 16px/1.35 var(--f-display); color: #082238; }
.pvpd-split li small { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E2E8F0; font-size: 13.5px; line-height: 1.5; color: #64748B; }
.pvpd-split a { color: #0A6FA8; font-weight: 600; }
.pvpd-even { margin-top: 28px; }
.pvpd-even__t { margin: 0 0 12px; font: 700 17px/1.3 var(--f-display); color: #475569; text-align: center; }
.pvpd-even__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pvpd-even__list li { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; border-top: 4px solid #CBD5E1; font-size: 14px; line-height: 1.5; color: #334155; }
.pvpd-even__list b { font: 700 16px/1.35 var(--f-display); color: #082238; }
.pvpd-even__list em { display: block; font: 700 11px/1.3 var(--f-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }

/* ---------- price table ---------- */
.pvpd-price { background: #F3F7F9; }
.pvpd-bill { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; }
.pvpd-bill button { min-height: 38px; padding: 6px 16px; border: 0; border-radius: 10px; background: none; font: 600 14px/1.2 var(--f-body); color: #334155; cursor: pointer; }
.pvpd-bill button.is-on { background: #082238; color: #fff; }
.pvpd-bill button:focus-visible { outline: 2px solid #00A3D9; outline-offset: 2px; }
.pvpd-ptbl { margin-top: 16px; overflow-x: auto; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; }
.pvpd-ptbl table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.pvpd-ptbl th, .pvpd-ptbl td { padding: 15px 18px; text-align: left; vertical-align: top; line-height: 1.45; border-bottom: 1px solid #EEF2F6; }
.pvpd-ptbl thead th { font: 700 12.5px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #475569; border-bottom: 2px solid #E2E8F0; }
.pvpd-ptbl thead th:nth-child(2) { color: var(--pvpd-z); }
.pvpd-ptbl thead th:nth-child(3) { color: var(--pvpd-pd); }
.pvpd-ptbl tbody th { width: 12%; font: 700 15px/1.35 var(--f-display); color: #082238; }
.pvpd-ptbl td b { display: inline-block; font: 800 24px/1.15 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pvpd-ptbl td b.is-txt { font-size: 16px; letter-spacing: 0; }
.pvpd-ptbl td b.is-flip { animation: pvpd-flip 420ms; }
@keyframes pvpd-flip { 0% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pvpd-ptbl td:nth-child(2) b { color: var(--pvpd-z); }
.pvpd-ptbl td:nth-child(3) b { color: var(--pvpd-pd); }
.pvpd-ptbl td small { display: block; margin-top: 3px; font-size: 13px; color: #64748B; }
.pvpd-ptbl td:last-child { color: #475569; font-size: 14.5px; }
.pvpd-ptbl tr.is-mid { background: #FFFBEB; }
.pvpd-ptbl tbody tr:last-child th, .pvpd-ptbl tbody tr:last-child td { border-bottom: 0; }
.pvpd-math { margin: 18px 0 0; padding: 14px 18px; max-width: 820px; border-left: 4px solid #FFB81C; border-radius: 0 12px 12px 0; background: #fff; font-size: 15.5px; line-height: 1.55; color: #334155; }

/* ---------- growth staircase ---------- */
.pvpd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; margin: 38px 0 0; padding: 0; list-style: none; }
.pvpd-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 20px 20px 0 0; background: #fff; border: 1px solid #E2E8F0; border-bottom: 0; margin-bottom: calc(var(--s) * 70px); }
.pvpd-step::after { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: calc(var(--s) * 70px + 14px); border-radius: 0 0 14px 14px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 8px, transparent 8px 16px), linear-gradient(180deg, #0A3A63, #061A2E); }
.pvpd-steps { padding-bottom: 14px; }
.pvpd-step__top { display: flex; align-items: baseline; gap: 8px; }
.pvpd-step__n { font: 800 48px/1.1 var(--f-display); letter-spacing: -.04em; color: #082238; }
.pvpd-step__top span { font: 600 15px/1.3 var(--f-body); color: #64748B; }
.pvpd-seats { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.pvpd-seats i { width: 10px; height: 10px; border-radius: 50% 50% 3px 3px; background: #94A3B8; opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 300ms; transition-delay: calc(var(--k) * 25ms); }
.pvpd-steps.is-in .pvpd-seats i { opacity: 1; transform: none; }
.pvpd-step:nth-child(1) .pvpd-seats i { background: var(--pvpd-pd); }
.pvpd-step:nth-child(2) .pvpd-seats i { background: #64748B; }
.pvpd-step:nth-child(3) .pvpd-seats i { background: var(--pvpd-z); }
.pvpd-step p { margin: 0; font-size: 15px; line-height: 1.55; color: #334155; }
.pvpd-step a { color: #0A6FA8; font-weight: 600; }
.pvpd-step__who { font-weight: 600; color: #082238 !important; }
.pvpd-fit { align-self: flex-start; padding: 6px 11px; border-radius: 999px; font: 700 13px/1.3 var(--f-body) !important; }
.pvpd-fit.is-pd { background: var(--pvpd-pdl); color: var(--pvpd-pd) !important; }
.pvpd-fit.is-even { background: #EEF2F6; color: #475569 !important; }
.pvpd-fit.is-zoho { background: var(--pvpd-zl); color: var(--pvpd-z) !important; }
.pvpd-step__cost { display: grid; gap: 2px; margin-top: auto !important; padding-top: 12px; border-top: 1px dashed #E2E8F0; }
.pvpd-step__cost span { font-size: 13px; color: #64748B; }
.pvpd-step__cost b { font: 800 18px/1.3 var(--f-display); color: #082238; }
.pvpd-stair__fine { margin: 20px 0 0; font-size: 13.5px; line-height: 1.55; color: #64748B; }

/* ---------- complexity dials (dark band) ---------- */
.pvpd-dash { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 26px; margin-top: 34px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pvpd-knobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pvpd-knob { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 14px 14px; border-radius: 18px; background: rgba(4,18,33,.38); border: 1px solid rgba(255,255,255,.1); text-align: center; }
.pvpd-knob svg { width: 112px; height: 112px; }
.pvpd-knob__trk, .pvpd-knob__val { fill: none; stroke-width: 9; stroke-linecap: round; transform: rotate(135deg); transform-origin: 50% 50%; }
.pvpd-knob__trk { stroke: rgba(255,255,255,.14); stroke-dasharray: 188.5 251.3; }
.pvpd-knob__val { stroke: #FFB81C; stroke-dasharray: 0 251.3; transition: stroke-dasharray 400ms cubic-bezier(.2,.8,.2,1); }
.pvpd-knob__num { position: absolute; top: 16px; left: 50%; width: 112px; height: 112px; margin-left: -56px; display: grid; place-items: center; font: 800 30px/1.1 var(--f-display); color: #fff; pointer-events: none; }
.pvpd-knob label { display: grid; gap: 6px; width: 100%; }
.pvpd-knob label span { font: 700 15px/1.3 var(--f-display); color: #fff; }
.pvpd-knob input[type=range] { width: 100%; min-height: 28px; accent-color: #FFB81C; }
.pvpd-knob small { font-size: 12.5px; line-height: 1.4; color: #9FC0D8; }
.pvpd-meter { display: grid; gap: 14px; align-content: start; }
.pvpd-meter__bar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding-top: 26px; }
.pvpd-meter__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: 10px; background: linear-gradient(90deg, #13A35C, #4B6378 50%, #00A3D9); }
.pvpd-meter__bar span { font: 700 12.5px/1.3 var(--f-body); color: #D6E4EF; text-align: center; }
.pvpd-meter__bar span:first-child { text-align: left; }
.pvpd-meter__bar span:nth-child(3) { text-align: right; }
.pvpd-meter__pin { position: absolute; top: -7px; height: 30px; left: var(--x, 50%); width: 8px; margin-left: -4px; border-radius: 5px; background: #FFB81C; box-shadow: 0 0 0 3px rgba(255,184,28,.25), 0 8px 16px rgba(0,0,0,.4); transition: left 600ms cubic-bezier(.3,.8,.2,1); }
.pvpd-meter__v { margin: 6px 0 0; font: 800 clamp(22px, 1rem + .8vw, 28px)/1.25 var(--f-display); letter-spacing: -.02em; color: #fff; }
.pvpd-meter__v.is-swap { animation: pvpd-flip 380ms; }
.pvpd-meter__why { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pvpd-meter__why li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: #D6E4EF; }
.pvpd-meter__why li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--d, #94A3B8); }
.pvpd-meter__why li.is-pd { --d: #34D27F; }
.pvpd-meter__why li.is-zoho { --d: #38BDF8; }
.pvpd-meter__ed { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 14.5px; line-height: 1.5; color: #fff; }
.pvpd-meter .btn { justify-self: start; }
.pvpd-dials__fine { margin: 18px 0 0; max-width: 820px; font-size: 13.5px; line-height: 1.55; color: #9FC0D8; }

/* ---------- switching: flip cards (mid kit B) ---------- */
.pvpd-move__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pvpd-move__links { display: grid; gap: 10px; margin: 18px 0 0; }
.pvpd-flip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pvpd-flip .mk-flip__card { min-height: 150px; }

/* ---------- client proof ---------- */
.pvpd-proof { padding-top: 0; }
.pvpd-proof__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 26px 28px; border-radius: 22px; background: linear-gradient(140deg, #F0F7FD, #EEF8F3); border: 1px solid #DCEBF3; }
.pvpd-proof__box > div { flex: 1 1 360px; }
.pvpd-proof__box h2 { margin: 0 0 8px; }
.pvpd-proof__box p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; }
.pvpd-proof__logos { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pvpd-proof__logos li { display: grid; place-items: center; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; }
.pvpd-proof__logos img { height: 36px; width: auto; }

/* ---------- start steps ---------- */
.pvpd-start { background: #F3F7F9; }
.pvpd-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: pvpd4; }
.pvpd-four li { position: relative; padding: 20px 18px 18px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; font-size: 14.5px; line-height: 1.5; color: #475569; counter-increment: pvpd4; }
.pvpd-four li::before { content: "Step " counter(pvpd4); display: block; margin-bottom: 10px; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pvpd-z); }
.pvpd-four li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -11px; width: 8px; height: 8px; border-top: 2px solid #94A3B8; border-right: 2px solid #94A3B8; transform: translateY(-50%) rotate(45deg); }
.pvpd-four b { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pvpd-four__next { margin: 24px 0 0; font-size: 15.5px; color: #334155; }
.pvpd-four__next a { color: #0A6FA8; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .pvpd-dash, .pvpd-move__grid { grid-template-columns: 1fr; }
  .pvpd-even__list { grid-template-columns: 1fr; }
  .pvpd-four { grid-template-columns: 1fr 1fr; }
  .pvpd-four li:nth-child(2)::after { display: none; }
  .pvpd-steps { grid-template-columns: 1fr; align-items: stretch; gap: 14px; padding-bottom: 0; }
  .pvpd-step { margin-bottom: 0; margin-left: calc(var(--s) * 18px); border-radius: 18px; border-bottom: 1px solid #E2E8F0; border-left: 5px solid #0A3A63; }
  .pvpd-step::after { display: none; }
}
@media (max-width: 640px) {
  .pvpd-board.is-pd { margin-right: 10px; }
  .pvpd-board.is-zoho { margin-left: 10px; }
  .pvpd-board__body { padding: 8px; }
  .pvpd-cols { gap: 5px; }
  .pvpd-cols li { padding: 5px 4px; min-height: 118px; }
  .pvpd-cols li > span { font-size: 9.5px; letter-spacing: 0; }
  .pvpd-ghost:first-of-type { margin-top: 96px; }
  .pvpd-deal { --w: calc((100% - 16px - 15px) / 4); left: 8px; top: 28px; padding: 6px 5px; }
  .pvpd-deal { transform: translateX(calc(var(--col) * (100% + 5px))); }
  .pvpd-deal b { font-size: 10.5px; }
  .pvpd-deal small { font-size: 9.5px; }
  .pvpd-deal__row { font-size: 10.5px; }
  .pvpd-av { display: none; }
  .pvpd-adds li { grid-template-columns: 1fr; font-size: 12px; }
  .pvpd-board__bar span { display: none; }
  .pvpd-tally { flex-direction: column; }
  .pvpd-tally__seg { flex: none; padding: 14px 16px; }
  .pvpd-tally__seg b { font-size: 28px; }
  .pvpd-dash { padding: 16px; }
  .pvpd-knobs { gap: 10px; }
  .pvpd-knob { padding: 12px 10px; }
  .pvpd-knob svg, .pvpd-knob__num { width: 88px; height: 88px; }
  .pvpd-knob__num { top: 12px; margin-left: -44px; font-size: 24px; }
  .pvpd-knob label span { font-size: 14px; }
  .pvpd-proof__box { padding: 20px; }
  .pvpd-four { grid-template-columns: 1fr; }
  .pvpd-four li::after { display: none; }
}
.pvpd-swipe { margin-top: 32px; }