/* Zoho Workplace vs Google Workspace (/compare/zoho-workplace-vs-google-workspace/). Prefix .pvgw- */
.pvgw-hero, .pvgw-short, .pvgw-pairs, .pvgw-price, .pvgw-calc, .pvgw-pick, .pvgw-move, .pvgw-proof, .pvgw-start { --pvgw-z: #E42527; --pvgw-zb: #0A6FA8; --pvgw-g: #1A73E8; --pvgw-e: #64748B; }
.pvgw-sub { margin: 14px 0 0; font: 600 clamp(18px, 1rem + .5vw, 22px)/1.45 var(--f-display); color: #0A3A63; }

/* ---------- hero: two app docks ---------- */
.pvgw-docks { position: relative; margin: 0; padding: 18px 18px 16px; border-radius: 28px; border: 1px solid #DCE7EF;
  background: radial-gradient(120% 90% at 0% 0%, #E5F4FB 0%, rgba(229,244,251,0) 55%), radial-gradient(110% 90% at 100% 100%, #E9F1FE 0%, rgba(233,241,254,0) 60%), #F7FAFC;
  box-shadow: 0 40px 70px -50px rgba(8,34,56,.55); }
.pvgw-docks__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pvgw-docks__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(54px, 7vw, 110px) minmax(0, 1fr); align-items: start; }
.pvgw-dock { position: relative; z-index: 1; padding: 12px 10px; border-radius: 22px; background: rgba(255,255,255,.82); border: 1px solid #E2E8F0; box-shadow: 0 18px 34px -26px rgba(8,34,56,.5); backdrop-filter: blur(8px); }
.pvgw-dock.is-zoho { grid-column: 1; }
.pvgw-dock.is-g { grid-column: 3; }
.pvgw-dock__h { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; padding-bottom: 10px; border-bottom: 1px dashed #DCE3EA; font: 700 13px/1.3 var(--f-body); letter-spacing: .02em; color: #082238; }
.pvgw-dock__h img { height: 18px; width: auto; }
.pvgw-dock.is-zoho .pvgw-dock__h img { height: 16px; }
.pvgw-dock__h.is-gw { justify-content: flex-end; min-height: 18px; }
.pvgw-dock__h.is-gw img { height: 15px; max-width: 100%; }
.pvgw-dock__apps { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pvgw-dock__apps li { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 8px; border-radius: 12px; outline: none; cursor: default;
  transition: background 220ms, box-shadow 220ms, opacity 300ms; opacity: 0; transform: translateY(8px) scale(.94); }
.pvgw-docks.is-in .pvgw-dock__apps li { opacity: 1; transform: none; transition: background 220ms, box-shadow 220ms, opacity 420ms calc(var(--i, 0) * 60ms), transform 520ms cubic-bezier(.3,1.5,.5,1) calc(var(--i, 0) * 60ms); }
.pvgw-dock.is-g .pvgw-dock__apps li { flex-direction: row-reverse; text-align: right; }
.pvgw-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--c, #64748B); box-shadow: 0 6px 12px -8px rgba(8,34,56,.6); }
.pvgw-ic svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pvgw-ic.is-logo { background: #fff; border: 1px solid #E2E8F0; }
.pvgw-ic.is-logo img { width: 20px; height: 20px; object-fit: contain; }
.pvgw-n { min-width: 0; font: 600 14px/1.25 var(--f-body); color: #1E293B; padding-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvgw-dock__apps li.is-hot { background: #FFF6DD; box-shadow: inset 0 0 0 1.5px #FFB81C; }
.pvgw-docks.is-focus .pvgw-dock__apps li:not(.is-hot) { opacity: .45; }
.pvgw-dock__apps li:focus-visible { box-shadow: inset 0 0 0 2px #00A3D9; }
.pvgw-docks__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.pvgw-docks__wires path { fill: none; stroke: #9EC3DA; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke 250ms, stroke-width 250ms, opacity 250ms; }
.pvgw-docks__wires path.is-drawn { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms cubic-bezier(.4,.1,.2,1), stroke 250ms, stroke-width 250ms, opacity 250ms; }
.pvgw-docks__wires path.is-hot { stroke: #F0A400; stroke-width: 3; }
.pvgw-docks.is-focus .pvgw-docks__wires path:not(.is-hot) { opacity: .25; }
.pvgw-docks__wires circle { fill: #fff; stroke: #0A6FA8; stroke-width: 1.6; opacity: 0; transition: opacity 300ms; }
.pvgw-docks__wires circle.is-on { opacity: 1; }
.pvgw-docks__wires circle.is-hot { stroke: #F0A400; fill: #FFB81C; }
.pvgw-docks__cap { min-height: 3em; margin: 14px 4px 0; font-size: 13.5px; line-height: 1.5; color: #475569; }
.pvgw-docks__cap b { color: #082238; }

/* ---------- short answer ---------- */
.pvgw-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.pvgw-glance li { display: grid; gap: 8px; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; }
.pvgw-glance span { font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.pvgw-glance b { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-left: 12px; border-left: 3px solid var(--pvgw-zb); font: 800 24px/1.2 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pvgw-glance b.is-g { border-left-color: var(--pvgw-g); }
.pvgw-glance small { font: 500 13px/1.35 var(--f-body); letter-spacing: 0; color: #64748B; }
.pvgw-glance__note { margin: 14px 0 0; font-size: 13.5px; color: #64748B; }

/* ---------- app-by-app heatmap (kit J) ---------- */
.pvgw-pairs { background: #F3F7F9; }
.pvgw-pairs .mk-heat { margin-top: 30px; }
.pvgw-pairs .mk-heat__cell a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- price table ---------- */
.pvgw-prices { margin-top: 34px; overflow-x: auto; border-radius: 20px; border: 1px solid #E2E8F0; background: #fff; }
.pvgw-prices table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 15px; }
.pvgw-prices th, .pvgw-prices td { padding: 16px 18px; text-align: left; vertical-align: top; line-height: 1.45; border-bottom: 1px solid #EEF2F6; }
.pvgw-prices thead th { font: 700 12.5px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #475569; background: #F3F7F9; border-bottom: 2px solid #082238; }
.pvgw-prices tbody th { width: 14%; font: 700 15px/1.3 var(--f-display); color: #082238; }
.pvgw-prices td b { display: block; font: 800 24px/1.15 var(--f-display); letter-spacing: -.02em; color: #082238; }
.pvgw-prices td:nth-child(2) b { color: var(--pvgw-zb); }
.pvgw-prices td:nth-child(3) b { color: var(--pvgw-g); }
.pvgw-prices td small { display: block; margin-top: 4px; font-size: 13px; color: #64748B; }
.pvgw-prices td:last-child { font-size: 14.5px; color: #475569; }
.pvgw-prices tr.is-pick { background: linear-gradient(90deg, #FFF8E1, #fff 70%); }
.pvgw-prices tr.is-pick th::after { content: "Most teams"; display: block; width: max-content; margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: #FFB81C; font: 700 11px/1 var(--f-body); color: #082238; }
.pvgw-prices tbody tr:last-child th, .pvgw-prices tbody tr:last-child td { border-bottom: 0; }

/* ---------- calculator (dark band) ---------- */
.pvgw-calc__box { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px; margin-top: 34px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.pvgw-calc__in { display: grid; gap: 20px; align-content: start; }
.pvgw-f { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.pvgw-f > span { grid-column: 1 / -1; font: 600 14.5px/1.35 var(--f-body); color: #D6E4EF; }
.pvgw-f input[type=range] { width: 100%; min-height: 28px; accent-color: #FFB81C; }
.pvgw-f output { min-width: 52px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.1); text-align: center; font: 800 16px/1.1 var(--f-display); color: #fff; }
.pvgw-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pvgw-chips button { min-height: 38px; padding: 7px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); font: 600 14px/1.15 var(--f-body); color: #D6E4EF; cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; }
.pvgw-chips button:hover { border-color: rgba(255,255,255,.5); }
.pvgw-chips button.is-on { background: #FFB81C; border-color: #FFB81C; color: #082238; }
.pvgw-chips button:focus-visible { outline: 2px solid #5FD3F3; outline-offset: 2px; }
.pvgw-calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.pvgw-res { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: rgba(4,18,33,.42); border-top: 3px solid #5FB4E6; }
.pvgw-res.is-g { border-top-color: #8AB4F8; }
.pvgw-res__k { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 12.5px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #9FC0D8; }
.pvgw-res__plan { margin: 4px 0 0; font: 700 18px/1.3 var(--f-display); color: #fff; }
.pvgw-res__cost { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; }
.pvgw-res__cost b { font: 800 clamp(26px, 1.2rem + 1vw, 34px)/1.1 var(--f-display); letter-spacing: -.02em; color: #fff; }
.pvgw-res__cost b.is-bump { animation: pvgw-bump 380ms; }
@keyframes pvgw-bump { 45% { transform: scale(1.3); } }
.pvgw-res__cost span { font-size: 13px; color: #9FC0D8; }
.pvgw-res__math { margin: 0; font-size: 12.5px; color: #8FB0C7; }
.pvgw-meter { height: 8px; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.pvgw-meter i { display: block; height: 100%; width: calc(min(var(--f, 0), 1) * 100%); min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #3FB97A, #FFB81C); transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.pvgw-meter i.is-over { background: #F87171; }
.pvgw-res__fit { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: #BFD3E2; }
.pvgw-res__gap { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(63,185,122,.14); border: 1px solid rgba(63,185,122,.35); font: 600 15.5px/1.45 var(--f-body); color: #E6F6EE; }
.pvgw-calc__out .btn { grid-column: 1 / -1; justify-self: start; }
.pvgw-calc__fine { margin: 18px 0 0; max-width: 860px; font-size: 13.5px; line-height: 1.55; color: #9FC0D8; }

/* ---------- when to choose ---------- */
.pvgw-pick .mk-split { margin-top: 32px; }
.pvgw-pick__mid { margin: 20px 0 0; padding: 16px 20px; border-radius: 16px; border: 1.5px dashed #9CCDE8; background: #F7FBFD; font-size: 15.5px; line-height: 1.55; color: #334155; }
.pvgw-pick__mid b { color: #082238; }

/* ---------- switching deck ---------- */
.pvgw-move .mk-deal { margin: 32px 0 22px; }

/* ---------- proof ---------- */
.pvgw-proof { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.pvgw-proof__box { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(24px, 3vw, 36px); border-radius: 24px; background: linear-gradient(140deg, #F0F7FD, #EEF8F3); border: 1px solid #DCEBF3; }
.pvgw-proof__box h2 { margin: 0 0 8px; }
.pvgw-proof__box > div > p:not(.pg-trustnote) { margin: 0; max-width: 68ch; font-size: 16px; line-height: 1.6; color: #334155; }
.pvgw-proof__box .pg-btn-ghost { flex: none; }

/* ---------- start steps ---------- */
.pvgw-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: pvgws; }
.pvgw-steps li { position: relative; padding: 20px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; font-size: 15px; line-height: 1.5; color: #475569; counter-increment: pvgws; }
.pvgw-steps li::before { content: "Step " counter(pvgws); display: block; margin-bottom: 10px; font: 700 12px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #0A6FA8; }
.pvgw-steps li::after { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #00A3D9, #3FB97A); }
.pvgw-steps b { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pvgw-steps__next { margin: 22px 0 0; font-size: 15.5px; color: #334155; }
.pvgw-steps__next a { color: #0A6FA8; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pvgw-glance { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .pvgw-calc__box { grid-template-columns: 1fr; }
  .pvgw-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pvgw-proof__box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .pvgw-docks { padding: 12px 10px 12px; border-radius: 22px; }
  .pvgw-docks__stage { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); }
  .pvgw-dock { padding: 8px 6px; border-radius: 16px; }
  .pvgw-dock__h { margin: 0 2px 8px; padding-bottom: 8px; font-size: 11.5px; }
  .pvgw-dock__apps li { gap: 7px; min-height: 36px; padding: 3px 4px; }
  .pvgw-ic { width: 27px; height: 27px; border-radius: 8px; }
  .pvgw-ic svg { width: 16px; height: 16px; }
  .pvgw-ic.is-logo img { width: 17px; height: 17px; }
  .pvgw-n { font-size: 12.5px; }
  .pvgw-glance { grid-template-columns: 1fr; }
  .pvgw-calc__box { padding: 18px; }
  .pvgw-calc__out { grid-template-columns: 1fr; }
  .pvgw-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pvgw-dock__apps li { opacity: 1 !important; transform: none !important; }
}