/* Zoho Campaigns vs Mailchimp (/compare/zoho-campaigns-vs-mailchimp/). Prefix .pvmc- */
.pvmc-hero, .pvmc-short, .pvmc-jobs, .pvmc-price, .pvmc-path, .pvmc-size, .pvmc-pick, .pvmc-move, .pvmc-proof, .pvmc-start { --pvmc-z: #0A6FA8; --pvmc-m: #241C15; --pvmc-my: #FFE01B; --pvmc-gap: #F0A400; }
.pvmc-sub { margin: 14px 0 0; font: 600 clamp(18px, 1rem + .5vw, 22px)/1.45 var(--f-display); color: #0A3A63; }

/* Mailchimp mark sits on a dark chip so the yellow logo stays readable */
.pvmc-mc { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--pvmc-m, #241C15); vertical-align: middle; }
.pvmc-mc img { width: 15px; height: 15px; object-fit: contain; }

/* segmented control */
.pvmc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid #E2E8F0; }
.pvmc-seg button { min-height: 34px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; font: 600 13.5px/1.2 var(--f-body); color: #334155; cursor: pointer; transition: background 200ms, color 200ms; }
.pvmc-seg button.is-on { background: #082238; color: #fff; }
.pvmc-seg button:focus-visible { outline: 2px solid #00A3D9; outline-offset: 2px; }
.pvmc-seg--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.pvmc-seg--dark button { color: #D6E4EF; }
.pvmc-seg--dark button.is-on { background: #FFB81C; color: #082238; }

/* ---------- hero: envelope that splits into segments ---------- */
.pvmc-env { position: relative; margin: 0; padding: 18px 18px 16px; border-radius: 26px; background: radial-gradient(120% 90% at 50% 100%, #E6F5FB 0%, #F7FBFD 55%, #fff 100%); border: 1px solid #E2E8F0; box-shadow: 0 40px 70px -50px rgba(8,34,56,.55); }
.pvmc-env__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pvmc-env__count { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pvmc-env__count span { font: 700 11.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pvmc-env__count b { font: 800 30px/1.15 var(--f-display); color: #082238; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.pvmc-env__count small { font: 600 13px/1.3 var(--f-body); color: #475569; }
.pvmc-env__stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 12px; margin-top: 16px; }
.pvmc-env__svg { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: min(250px, 70%); height: auto; overflow: visible; }
.pvmc-env__flap { transform-origin: 50% 62px; transform-box: view-box; transition: transform 380ms cubic-bezier(.5,0,.6,1); }
.pvmc-env__flap--open { transform: scaleY(0); transition-delay: 0ms; }
.pvmc-env.is-open .pvmc-env__flap--shut { transform: scaleY(0); }
.pvmc-env.is-open .pvmc-env__flap--open { transform: scaleY(1); transition-delay: 360ms; transition-timing-function: cubic-bezier(.2,.8,.3,1); }
.pvmc-env__letter { transform: translateY(42px); transition: transform 800ms 600ms cubic-bezier(.2,.8,.2,1); }
.pvmc-env.is-open .pvmc-env__letter { transform: translateY(0); }
.pvmc-env__segs { display: contents; list-style: none; margin: 0; padding: 0; }
.pvmc-env__segs li { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 16px 28px -24px rgba(8,34,56,.6);
  opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -1)) scale(.6); transition: opacity 400ms, transform 750ms cubic-bezier(.2,.9,.25,1.15); transition-delay: calc(var(--i, 0) * 110ms); }
.pvmc-env.is-split .pvmc-env__segs li { opacity: 1; transform: none; }
.pvmc-env__segs li:nth-child(1) { grid-column: 1; grid-row: 1; }
.pvmc-env__segs li:nth-child(2) { grid-column: 2; grid-row: 1; }
.pvmc-env__segs li:nth-child(3) { grid-column: 1; grid-row: 2; }
.pvmc-env__segs li:nth-child(4) { grid-column: 2; grid-row: 2; }
.pvmc-env__dot { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent); }
.pvmc-env__segs b { font: 800 20px/1.2 var(--f-display); color: #082238; font-variant-numeric: tabular-nums; }
.pvmc-env__segs span[data-seg-l] { grid-column: 2; font: 500 13px/1.35 var(--f-body); color: #475569; }
.pvmc-env__segs i { grid-column: 1 / -1; display: block; height: 5px; margin-top: 6px; border-radius: 4px; background: #EEF2F6; overflow: hidden; }
.pvmc-env__segs em { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform 900ms 300ms cubic-bezier(.2,.8,.2,1), width 600ms; }
.pvmc-env.is-split .pvmc-env__segs em { transform: scaleX(1); }
.pvmc-env__cap { margin: 10px 0 0; font: 500 13px/1.5 var(--f-body); color: #475569; }
.pvmc-env__cap b { color: #0A6FA8; }

/* ---------- short answer cards ---------- */
.pvmc-short .mk-wipe { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }

/* ---------- features: deck deal (mid kit D) ---------- */
.pvmc-jobs .mk-deal { margin-top: 30px; }
.pvmc-jobs .mk-deal > li p + p { margin-top: 8px; }
.pvmc-jobs .mk-deal > li p b { display: block; margin-bottom: 2px; font: 700 11px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.pvmc-jobs .mk-deal > li p.is-z b { color: var(--pvmc-z); }
.pvmc-jobs .mk-deal > li p a { color: #0A6FA8; font-weight: 600; }

/* ---------- price table ---------- */
.pvmc-price { background: #F3F7F9; }
.pvmc-ptbl { margin-top: 28px; overflow-x: auto; border-radius: 20px; border: 1px solid #E2E8F0; background: #fff; }
.pvmc-ptbl:focus-visible { outline: 2px solid #00A3D9; outline-offset: 2px; }
.pvmc-ptbl table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.pvmc-ptbl th, .pvmc-ptbl td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF2F6; line-height: 1.45; }
.pvmc-ptbl thead th { background: #082238; color: #fff; font: 700 13px/1.35 var(--f-body); }
.pvmc-ptbl tbody th { font: 700 15px/1.3 var(--f-display); color: #082238; }
.pvmc-ptbl td b { display: block; font: 800 20px/1.25 var(--f-display); color: #082238; }
.pvmc-ptbl td small { display: block; margin-top: 2px; font-size: 13px; color: #64748B; }
.pvmc-ptbl td:not(.is-m):not(:last-child) b { color: var(--pvmc-z); }
.pvmc-ptbl td:last-child { color: #334155; }
.pvmc-ptbl tr.is-mid { background: #F0F8FC; }
.pvmc-ptbl tbody tr:last-child th, .pvmc-ptbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- story: two-lane lead path ---------- */
.pvmc-path__key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; font: 600 13.5px/1.4 var(--f-body); color: #334155; }
.pvmc-path__key span { display: inline-flex; align-items: center; gap: 8px; }
.pvmc-path__key span::before { content: ""; width: 26px; height: 4px; border-radius: 3px; background: var(--pvmc-z); }
.pvmc-path__key .is-m::before { background: var(--pvmc-m); }
.pvmc-path__key .is-gap::before { height: 0; border-top: 3px dashed var(--pvmc-gap); background: none; }
.pvmc-path__board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; }
.pvmc-stop { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; padding: 0 8px; }
.pvmc-stop__n { margin: 0; font: 700 11.5px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.pvmc-stop h3 { margin: 4px 0 14px; font: 700 16px/1.3 var(--f-display); color: #082238; min-height: 2.6em; }
.pvmc-stop__z, .pvmc-stop__m { position: relative; margin: 0; padding: 26px 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: #334155; background: #fff; border: 1px solid #E2E8F0; opacity: .45; transform: translateY(8px); transition: opacity 500ms, transform 500ms, border-color 500ms, box-shadow 500ms; }
.pvmc-stop__z { margin-bottom: 12px; }
.pvmc-stop__z a { color: #0A6FA8; font-weight: 600; }
.pvmc-stop__z::before, .pvmc-stop__m::before { content: ""; position: absolute; top: 9px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--pvmc-z); }
.pvmc-stop__m::before { background: var(--pvmc-m); }
.pvmc-stop__z::after, .pvmc-stop__m::after { content: ""; position: absolute; top: 13px; left: 28px; right: -20px; height: 3px; border-radius: 3px; background: var(--pvmc-z); transform-origin: left; transform: scaleX(0); transition: transform 600ms 200ms; }
.pvmc-stop__m::after { background: var(--pvmc-m); }
.pvmc-stop__m.is-gap { background: #FFFAEE; border-style: dashed; border-color: #F5C76A; }
.pvmc-stop__m.is-gap::after { height: 0; border-top: 3px dashed var(--pvmc-gap); background: none; }
.pvmc-stop:last-child .pvmc-stop__z::after, .pvmc-stop:last-child .pvmc-stop__m::after { display: none; }
.pvmc-stop.is-lit .pvmc-stop__z, .pvmc-stop.is-lit .pvmc-stop__m { opacity: 1; transform: none; box-shadow: 0 18px 30px -26px rgba(8,34,56,.65); }
.pvmc-stop.is-lit .pvmc-stop__z { border-color: #9CCFE8; }
.pvmc-stop.is-lit .pvmc-stop__z::after, .pvmc-stop.is-lit .pvmc-stop__m::after { transform: scaleX(1); }
.pvmc-stop__m { transition-delay: 150ms; }
.pvmc-path__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.pvmc-path__foot .pg-trustnote { margin: 0; }

/* ---------- interactive: list sizer (dark band) ---------- */
.pvmc-size__box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; margin-top: 30px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.pvmc-size__in { display: grid; gap: 20px; align-content: start; }
.pvmc-size__f { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; color: #D6E4EF; }
.pvmc-size__f > span, .pvmc-size__f legend { padding: 0; font: 700 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #9FC0D8; }
.pvmc-size__f legend { margin-bottom: 10px; }
.pvmc-size__f input[type=range] { width: 100%; accent-color: #FFB81C; }
.pvmc-size__f output { font: 800 34px/1.15 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.pvmc-size__needs label { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); font: 500 15px/1.4 var(--f-body); color: #E6EEF5; cursor: pointer; transition: background 200ms, border-color 200ms; }
.pvmc-size__needs label:has(input:checked) { background: rgba(255,184,28,.12); border-color: rgba(255,184,28,.55); }
.pvmc-size__needs input { width: 18px; height: 18px; accent-color: #FFB81C; }
.pvmc-size__out { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.pvmc-tier { padding: 20px; border-radius: 20px; background: #fff; color: #334155; }
.pvmc-tier.is-z { border-top: 5px solid #00A3D9; }
.pvmc-tier.is-m { border-top: 5px solid var(--pvmc-my); }
.pvmc-tier__who { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 15px/1.3 var(--f-display); color: #082238; }
.pvmc-tier__who img { width: 20px; height: 20px; object-fit: contain; }
.pvmc-tier__who .pvmc-mc img { width: 15px; height: 15px; }
.pvmc-ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; }
.pvmc-ladder li { flex: 1 1 auto; min-width: 0; padding: 6px 5px; border-radius: 8px; background: #EEF2F6; font: 600 11.5px/1.3 var(--f-body); color: #64748B; text-align: center; transition: background 300ms, color 300ms, transform 300ms; }
.pvmc-ladder li.is-na { opacity: .4; text-decoration: line-through; }
.pvmc-ladder li.is-on { background: #082238; color: #fff; transform: translateY(-3px); }
.pvmc-tier.is-m .pvmc-ladder li.is-on { background: var(--pvmc-m); color: var(--pvmc-my); }
.pvmc-tier__plan { margin: 0; font: 800 22px/1.25 var(--f-display); color: #082238; }
.pvmc-tier__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 6px 0 10px; }
.pvmc-tier__price b { font: 800 30px/1.2 var(--f-display); color: #0A6FA8; font-variant-numeric: tabular-nums; }
.pvmc-tier.is-m .pvmc-tier__price b { font-size: 22px; color: #5B4A1E; }
.pvmc-tier__price span { font-size: 13.5px; color: #64748B; }
.pvmc-tier__why { margin: 0; font-size: 14px; line-height: 1.55; color: #334155; }
.pvmc-tier.is-swap { animation: pvmc-pop 450ms cubic-bezier(.2,.9,.3,1.2); }
@keyframes pvmc-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: none; } }
.pvmc-size__year { grid-column: 1 / -1; margin: 0; font: 600 15.5px/1.5 var(--f-body); color: #fff; }
.pvmc-size__out .btn { grid-column: 1 / -1; justify-self: start; }
.pvmc-size__fine { margin: 16px 0 0; max-width: 900px; font-size: 13.5px; line-height: 1.55; color: #9FC0D8; }

/* ---------- when to choose: split reveal (mid kit C) ---------- */
.pvmc-pick .mk-split { margin-top: 28px; }
.pvmc-pick .mk-split__col h3 .pvmc-mc { width: 28px; height: 28px; }
.pvmc-pick .mk-split__col h3 .pvmc-mc img { width: 17px; height: 17px; }
.pvmc-pick .mk-split__col a { color: #0A6FA8; font-weight: 600; }

/* ---------- switching ---------- */
.pvmc-move { background: #F3F7F9; }
.pvmc-move__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pvmc-move__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; }
.pvmc-move__swap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 22px; overflow: hidden; border: 1px solid #E2E8F0; background: #fff; }
.pvmc-move__col { padding: 18px 18px 8px; }
.pvmc-move__col.is-z { background: #F0F8FC; border-left: 1px solid #E2E8F0; }
.pvmc-move__h { min-height: 24px; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 13px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
.pvmc-move__h img { width: 16px; height: 16px; object-fit: contain; }
.pvmc-move__h .pvmc-mc { width: 22px; height: 22px; }
.pvmc-move__h .pvmc-mc img { width: 13px; height: 13px; }
.pvmc-move__col ul { margin: 0; padding: 0; list-style: none; }
.pvmc-move__col li { min-height: 46px; display: flex; align-items: center; padding: 6px 0; border-top: 1px solid #E2E8F0; font-size: 14.5px; line-height: 1.4; color: #334155; }
.pvmc-move__col.is-z li { font-weight: 600; color: #082238; }

/* ---------- client proof ---------- */
.pvmc-proof .wrap { padding-block: clamp(28px, 4vw, 44px); border-radius: 26px; background: linear-gradient(140deg, #F0F7FD, #EEF8F3); border: 1px solid #DCEBF3; }
.pvmc-proof__card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; align-items: center; }
.pvmc-proof__apps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pvmc-proof__apps li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; font: 700 15px/1.3 var(--f-display); color: #082238; }
.pvmc-proof__apps img { width: 28px; height: 28px; object-fit: contain; }

/* ---------- start steps ---------- */
.pvmc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: pvmcs; }
.pvmc-steps li { position: relative; padding: 20px 18px 20px 64px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; font-size: 14.5px; line-height: 1.5; color: #475569; counter-increment: pvmcs; }
.pvmc-steps li::before { content: counter(pvmcs); position: absolute; top: 18px; left: 18px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #1D3F8F, #00A3D9); color: #fff; display: grid; place-items: center; font: 800 14px/1 var(--f-display); }
.pvmc-steps b { display: block; margin-bottom: 4px; font: 700 16.5px/1.3 var(--f-display); color: #082238; }
.pvmc-steps__next { margin: 22px 0 0; font-size: 15.5px; color: #334155; }
.pvmc-steps__next a { color: #0A6FA8; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pvmc-path__board { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto auto auto auto; row-gap: 0; }
  .pvmc-stop:nth-child(n+4) { padding-top: 26px; }
  .pvmc-stop:nth-child(3) .pvmc-stop__z::after, .pvmc-stop:nth-child(3) .pvmc-stop__m::after { display: none; }
}
@media (max-width: 1000px) {
  .pvmc-size__box, .pvmc-move__grid, .pvmc-proof__card { grid-template-columns: 1fr; }
  .pvmc-short .mk-wipe { grid-template-columns: 1fr; }
  .pvmc-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pvmc-path__board { grid-template-columns: 1fr; row-gap: 0; padding-left: 4px; }
  .pvmc-path__board { grid-template-rows: none; }
  .pvmc-stop, .pvmc-stop:nth-child(n+4) { grid-row: auto; grid-template-rows: none; padding: 0 0 22px 22px; border-left: 3px solid #D9E7EF; }
  .pvmc-stop::before { content: ""; position: absolute; left: -9px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid #00A3D9; }
  .pvmc-stop h3 { min-height: 0; margin-bottom: 10px; }
  .pvmc-stop__z::after, .pvmc-stop__m::after { display: none; }
  .pvmc-stop__z { margin-bottom: 8px; }
  .pvmc-size__out { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pvmc-env { padding: 14px 12px; }
  .pvmc-env__stage { gap: 8px; }
  .pvmc-env__segs li { padding: 10px; gap: 2px 8px; }
  .pvmc-env__segs b { font-size: 17px; }
  .pvmc-env__segs span[data-seg-l] { font-size: 12px; }
  .pvmc-env__count b { font-size: 26px; }
  .pvmc-size__box { padding: 16px; }
  .pvmc-steps { grid-template-columns: 1fr; }
  .pvmc-move__swap { grid-template-columns: 1fr 1fr; }
  .pvmc-move__col { padding: 14px 12px 6px; }
  .pvmc-move__col li { min-height: 60px; font-size: 13.5px; }
  .pvmc-move__h { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pvmc-env__flap, .pvmc-env__letter, .pvmc-env__segs li, .pvmc-env__segs em, .pvmc-stop__z, .pvmc-stop__m { transition: none; }
}