/* Zoho One vs Salesforce (/compare/zoho-one-vs-salesforce/). Prefix .pvos- */
.pvos-hero, .pvos-short, .pvos-walk, .pvos-price, .pvos-pick, .pvos-lean, .pvos-move, .pvos-proof, .pvos-start { --pvos-z: #0A6FA8; --pvos-s: #032D60; --pvos-a: #FFB81C; }
.pvos-sub { margin: 14px 0 0; font: 600 clamp(18px, 1rem + .5vw, 22px)/1.45 var(--f-display); color: #0A3A63; }

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

/* ---------- hero: office floor plan ---------- */
.pvos-plan { position: relative; margin: 0; padding: 18px; border-radius: 26px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 70px -50px rgba(8,34,56,.55); }
.pvos-plan__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pvos-plan__count { display: flex; align-items: baseline; gap: 6px; margin: 0; font: 600 13px/1.3 var(--f-body); color: #64748B; }
.pvos-plan__count b { font: 800 28px/1.1 var(--f-display); color: #082238; letter-spacing: -.02em; transition: color 300ms; }
.pvos-plan[data-mode="zo"] .pvos-plan__count b { color: #0A6FA8; }
.pvos-plan__count b.is-bump { animation: pvos-bump 420ms; }
@keyframes pvos-bump { 40% { transform: scale(1.18); } }

.pvos-floor { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 10px; margin-top: 16px; padding: 14px 14px 70px; border-radius: 16px; border: 4px solid #082238;
  background: linear-gradient(0deg, transparent calc(50% - 15px), #F3F7F9 calc(50% - 15px) calc(50% + 15px), transparent calc(50% + 15px)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(8,34,56,.045) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(8,34,56,.045) 23px 24px), #FBFDFE; }
.pvos-room { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px; min-height: 132px; padding: 10px 10px 12px; border: 2px solid #94A3B8; border-radius: 6px; background: #fff; transition: background 500ms, border-color 500ms, box-shadow 500ms; transition-delay: calc(var(--i) * 90ms); }
/* door gap on the corridor side */
.pvos-room::after { content: ""; position: absolute; left: 18px; width: 30px; height: 4px; background: #FBFDFE; }
.pvos-room:nth-child(-n+3)::after { bottom: -3px; }
.pvos-room:nth-child(n+4)::after { top: -3px; }
.pvos-room__n { margin: 0; font: 700 14px/1.3 var(--f-display); color: #082238; }
.pvos-room__desk { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; }
.pvos-room__desk i { width: 22px; height: 12px; border-radius: 3px; background: #E2E8F0; box-shadow: inset 0 -3px 0 #CBD5E1; }
.pvos-room__apps { display: flex; gap: 6px; height: 32px; opacity: 0; transform: translateY(6px); transition: opacity 400ms, transform 400ms; transition-delay: calc(var(--i) * 90ms + 150ms); }
.pvos-room__apps img { width: 30px; height: 30px; object-fit: contain; padding: 2px; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(8,34,56,.15); }
.pvos-room__tag { display: inline-flex; align-items: center; gap: 5px; justify-self: start; max-width: 100%; padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--k) 12%, #fff); color: var(--k); border: 1px solid color-mix(in srgb, var(--k) 35%, #fff); font: 700 11.5px/1.25 var(--f-body); transform-origin: left center; transition: opacity 350ms, transform 350ms; transition-delay: calc(var(--i) * 110ms); }
.pvos-room__tag svg, .pvos-door__key svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pvos-room.is-gap { border-style: dashed; }
/* Salesforce mode: a key per room */
.pvos-plan[data-mode="sf"] .pvos-room__tag { opacity: 1; transform: none; }
.pvos-plan[data-mode="sf"] .pvos-room.is-gap { background: #F8FAFC; }
/* Zoho mode: one key lights every room */
.pvos-plan[data-mode="zo"] .pvos-room { border-color: #0A6FA8; background: linear-gradient(160deg, #EAF6FB, #fff 70%); box-shadow: 0 0 0 3px rgba(0,163,217,.12); border-style: solid; }
.pvos-plan[data-mode="zo"] .pvos-room__apps { opacity: 1; transform: none; }
.pvos-plan[data-mode="zo"] .pvos-room__tag { opacity: 0; transform: scale(.6); position: absolute; pointer-events: none; }
.pvos-plan[data-mode="sf"] .pvos-room__apps { position: absolute; }
.pvos-door { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; background: #FBFDFE; font: 700 10.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
.pvos-door::before { content: ""; width: 64px; height: 4px; border-radius: 2px; background: #FFB81C; }
.pvos-door__key { order: -1; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: #FFB81C; color: #082238; font: 800 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; box-shadow: 0 10px 20px -10px rgba(240,164,0,.9); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity 400ms, transform 400ms; }
.pvos-door__key img { width: 18px; height: 18px; }
.pvos-plan[data-mode="zo"] .pvos-door__key { opacity: 1; transform: none; animation: pvos-glow 2.4s 600ms ease-in-out infinite; }
@keyframes pvos-glow { 50% { box-shadow: 0 0 0 8px rgba(255,184,28,.18), 0 10px 20px -10px rgba(240,164,0,.9); } }
.pvos-plan__cap { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.55; color: #64748B; }

/* ---------- short answer ---------- */
.pvos-short__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.pvos-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pvos-facts li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: #F3F7F9; border-left: 4px solid #0A6FA8; }
.pvos-facts li:nth-child(2) { border-left-color: #032D60; }
.pvos-facts li:nth-child(3) { border-left-color: #FFB81C; }
.pvos-facts b { font: 800 20px/1.25 var(--f-display); color: #082238; letter-spacing: -.01em; }
.pvos-facts span { font-size: 15px; line-height: 1.5; color: #334155; }

/* ---------- department walk-through cards ---------- */
.pvos-walk { background: #F3F7F9; }
.pvos-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.pvos-card { position: relative; display: grid; grid-template-rows: auto 1fr 1fr auto; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; overflow: hidden; transition: transform 300ms, box-shadow 300ms; }
.pvos-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(8,34,56,.55); }
.pvos-card__plate { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 18px; background: #082238; color: #fff; font: 700 18px/1.3 var(--f-display); }
.pvos-card__plate span { font: 700 11px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #FFB81C; }
.pvos-card__side { padding: 14px 18px; }
.pvos-card__side.is-zo { background: linear-gradient(180deg, #F0F8FD, #fff); border-bottom: 1px dashed #D5E3EC; }
.pvos-card__side p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #334155; }
.pvos-card__side a { color: #0A6FA8; font-weight: 600; }
.pvos-card__side .pvos-card__who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 700 14px/1.3 var(--f-display); color: #082238; }
.pvos-card__who img { width: 20px; height: 20px; object-fit: contain; }
.pvos-card__lean { margin: 0; padding: 11px 18px; background: #EEF2F6; font: 700 13px/1.35 var(--f-body); color: #475569; }
.pvos-card__lean.is-zo { background: #E0F2FE; color: #075985; }
.pvos-card__lean.is-sf { background: #DCE6F5; color: #032D60; }
/* door opening reveal (only when JS is running) */
.pvos-doors.is-js .pvos-card::before { content: ""; position: absolute; inset: 49px 0 0; z-index: 2; background: repeating-linear-gradient(90deg, #E8EEF3 0 2px, #F4F7FA 2px 28px); border-left: 6px solid #CBD5E1; transform-origin: right center; transition: transform 700ms cubic-bezier(.6,.05,.3,1), opacity 700ms; transition-delay: calc(var(--i) * 110ms); pointer-events: none; }
.pvos-doors.is-js .pvos-card.is-open::before { transform: perspective(900px) rotateY(-88deg); opacity: 0; }
.pvos-walk__more { margin: 24px 0 0; font-size: 15.5px; color: #334155; }
.pvos-walk__more a { color: #0A6FA8; font-weight: 600; }

/* ---------- price table ---------- */
.pvos-zplans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.pvos-zplans li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid #E2E8F0; background: #fff; }
.pvos-zplans li.is-pick { border-color: #0A6FA8; box-shadow: inset 0 4px 0 #FFB81C; }
.pvos-zplans span { display: flex; align-items: center; gap: 8px; font: 700 14px/1.3 var(--f-display); color: #082238; }
.pvos-zplans span img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.pvos-zplans b { font: 800 30px/1.15 var(--f-display); letter-spacing: -.02em; color: #0A6FA8; }
.pvos-zplans small { font-size: 13px; line-height: 1.45; color: #64748B; }
.pvos-tbl { margin-top: 18px; overflow-x: auto; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; }
.pvos-tbl table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.pvos-tbl th, .pvos-tbl td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF2F6; line-height: 1.45; }
.pvos-tbl thead th { background: #082238; color: #CFE0EC; font: 700 12.5px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.pvos-tbl tbody th { width: 13%; font: 700 15px/1.3 var(--f-display); color: #082238; }
.pvos-tbl td:nth-child(2) { color: #0A3A63; font-weight: 600; }
.pvos-tbl td:nth-child(3) { color: #032D60; font-weight: 600; }
.pvos-tbl td small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: #64748B; }
.pvos-tbl td b { display: block; font: 800 19px/1.25 var(--f-display); color: #082238; }
.pvos-tbl tr.is-gap td:nth-child(3), .pvos-tbl tr.is-gap td:last-child b { color: #94A3B8; }
.pvos-tbl tbody tr:hover { background: #F8FBFD; }
.pvos-tbl tbody tr:last-child th, .pvos-tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- department picker (dark band) ---------- */
.pvos-pk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 26px; margin-top: 34px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pvos-pk__in { display: grid; gap: 20px; align-content: start; }
.pvos-pk__emp { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.pvos-pk__emp > span, .pvos-pk__tier > span { grid-column: 1 / -1; font: 600 14.5px/1.35 var(--f-body); color: #D6E4EF; }
.pvos-pk__emp input { width: 100%; min-height: 28px; accent-color: #FFB81C; }
.pvos-pk__emp output { min-width: 52px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.1); text-align: center; font: 800 16px/1.2 var(--f-display); color: #fff; }
.pvos-pk__depts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pvos-pk__depts li { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: background 250ms, border-color 250ms; }
.pvos-pk__depts li.is-on { background: rgba(255,184,28,.1); border-color: rgba(255,184,28,.55); }
.pvos-pk__depts [data-d-tog] { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; text-align: left; font: 700 14.5px/1.25 var(--f-body); color: #fff; cursor: pointer; }
.pvos-pk__depts [data-d-tog]::after { content: ""; margin-left: auto; width: 30px; height: 18px; flex: none; border-radius: 9px; background: rgba(255,255,255,.2) radial-gradient(circle at 9px 9px, #fff 6px, transparent 6.5px); transition: background 250ms; }
.pvos-pk__depts li.is-on [data-d-tog]::after { background: #FFB81C radial-gradient(circle at 21px 9px, #082238 6px, transparent 6.5px); }
.pvos-pk__depts [data-d-tog] img { width: 22px; height: 22px; padding: 2px; border-radius: 6px; background: #fff; }
.pvos-pk__depts button:focus-visible { outline: 2px solid #FFB81C; outline-offset: 2px; }
.pvos-step { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 4px; }
.pvos-step button { height: 32px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font: 700 17px/1 var(--f-body); cursor: pointer; }
.pvos-step button:hover { background: rgba(255,255,255,.16); }
.pvos-step output { text-align: center; font: 800 16px/1.2 var(--f-display); color: #fff; }
.pvos-step output::after { content: " users"; font: 500 12px var(--f-body); color: #9FC0D8; }
.pvos-pk__depts li:not(.is-on) .pvos-step { opacity: .35; pointer-events: none; }
.pvos-pk__tier { display: grid; gap: 10px; }
.pvos-pk__tier .pvos-seg { justify-self: start; }
.pvos-pk__out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.pvos-shape { display: grid; grid-template-rows: auto 1fr auto; padding: 16px; border-radius: 18px; background: rgba(4,18,33,.45); border-top: 4px solid #6CC6F2; }
.pvos-shape.is-zo { border-top-color: #FFB81C; }
.pvos-shape__h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 15px/1.3 var(--f-display); color: #fff; }
.pvos-shape__h img { width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: #fff; object-fit: contain; }
.pvos-shape__h b { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font: 800 13px/1.3 var(--f-body); white-space: nowrap; }
.pvos-shape.is-zo .pvos-shape__h b { background: #FFB81C; color: #082238; }
.pvos-shape__keys { display: grid; gap: 7px; align-content: start; margin: 0; padding: 0; list-style: none; }
.pvos-shape__keys li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.07); border-left: 3px solid var(--k, #6CC6F2); font: 600 13.5px/1.35 var(--f-body); color: #fff; animation: pvos-key 380ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.pvos-shape__keys li b { font: 800 13.5px/1.35 var(--f-display); color: #FFE29A; white-space: nowrap; }
.pvos-shape__keys li small { grid-column: 1 / -1; font: 500 12px/1.4 var(--f-body); color: #9FC0D8; }
.pvos-shape__keys li.is-none { border-left-style: dashed; color: #BFD3E2; }
.pvos-shape__keys li.is-none b { color: #9FC0D8; }
.pvos-shape.is-zo .pvos-shape__keys li { border-left-color: #FFB81C; }
@keyframes pvos-key { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.pvos-shape__sum { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.pvos-shape__sum span { display: block; font: 600 12.5px/1.35 var(--f-body); color: #BFD3E2; }
.pvos-shape__sum b { display: block; margin-top: 4px; font: 800 clamp(22px, 1rem + .9vw, 28px)/1.2 var(--f-display); letter-spacing: -.02em; color: #fff; }
.pvos-shape__sum b.is-bump { animation: pvos-bump 420ms; }
.pvos-shape__sum small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #9FC0D8; }
.pvos-pk__out .btn { grid-column: 1 / -1; justify-self: start; }
.pvos-pk__fine { margin: 18px 0 0; max-width: 860px; font-size: 13.5px; line-height: 1.6; color: #9FC0D8; }

/* ---------- when to choose: what matters to you (kit M) ---------- */
.pvos-weigh { margin-top: 32px; }
.pvos-weigh__note { margin: 16px 0 0; max-width: 760px; font-size: 14.5px; line-height: 1.6; color: #475569; }

/* ---------- switching routes: deck deal ---------- */
.pvos-deal { margin-top: 32px; }

/* ---------- proof ---------- */
.pvos-proof__box { display: grid; gap: 28px; padding-block: clamp(28px, 4vw, 44px); border-radius: 26px; background: linear-gradient(140deg, #F0F7FD, #EEF8F3); border: 1px solid #DCEBF3; }
.pvos-proof__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; }
.pvos-strip { min-width: 0; }
.pvos-strip .mk-strip__track > li { border-color: #DCEBF3; }
.pvos-strip .mk-strip__track > li:first-child { border-color: #0A6FA8; }
.pvos-strip h3 { display: flex; align-items: center; gap: 10px; }
.pvos-strip h3 img { flex: none; width: 28px; height: 28px; object-fit: contain; }

/* ---------- start steps ---------- */
.pvos-start { background: #F3F7F9; }
.pvos-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: pvos; }
.pvos-steps li { position: relative; padding: 20px 18px 18px; border-radius: 16px; background: #fff; border: 1px solid #E2E8F0; font-size: 15px; line-height: 1.5; color: #475569; counter-increment: pvos; }
.pvos-steps li::before { content: "Step " counter(pvos); display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #082238; color: #FFB81C; font: 800 12px/1.3 var(--f-display); }
.pvos-steps b { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pvos-steps__next { margin: 24px 0 0; font-size: 15.5px; color: #334155; }
.pvos-steps__next a { color: #0A6FA8; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .pvos-short__grid, .pvos-pk { grid-template-columns: 1fr; }
  .pvos-doors { grid-template-columns: 1fr 1fr; }
  .pvos-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pvos-plan { padding: 14px 12px; }
  .pvos-floor { grid-template-columns: 1fr 1fr; gap: 26px 8px; padding: 10px 10px 70px;
    background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(8,34,56,.045) 23px 24px), #FBFDFE; }
  .pvos-room { min-height: 118px; padding: 8px; }
  .pvos-room:nth-child(-n+3)::after, .pvos-room:nth-child(n+4)::after { top: auto; bottom: -3px; }
  .pvos-room__tag { font-size: 10.5px; padding: 4px 6px; }
  .pvos-facts li { grid-template-columns: 1fr; gap: 4px; }
  .pvos-doors, .pvos-zplans, .pvos-steps { grid-template-columns: 1fr; }
  .pvos-pk { padding: 16px; }
  .pvos-pk__out { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .pvos-pk__depts { grid-template-columns: 1fr; }
}