/* Blog: Is Zoho One worth it (.pbzw-) */
.pbzw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pbzw-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; font: 500 13.5px/1.4 var(--f-body); color: #475569; }
.pbzw-meta span { padding: 4px 10px; border-radius: 999px; background: #EEF3F7; }

/* hero verdict card */
.pbzw-verdict { justify-self: center; width: min(100%, 400px); padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 70px -46px rgba(8,34,56,.65); }
.pbzw-verdict__top { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.pbzw-verdict__top b { font: 800 18px/1.25 var(--f-display); color: #082238; }
.pbzw-verdict__row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 14px; margin-top: 8px; opacity: 0; transform: translateY(8px); animation: pbzwIn .5s cubic-bezier(.2,.8,.2,1) forwards; }
.pbzw-verdict__row:nth-of-type(1) { animation-delay: .3s } .pbzw-verdict__row:nth-of-type(2) { animation-delay: .55s } .pbzw-verdict__row:nth-of-type(3) { animation-delay: .8s }
@keyframes pbzwIn { to { opacity: 1; transform: none; } }
.pbzw-verdict__row span { display: inline-block; padding: 5px 8px; border-radius: 8px; font: 700 12.5px/1.2 var(--f-body); text-align: center; }
.pbzw-verdict__row p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #334155; }
.pbzw-verdict__row--yes { background: #EAF8F1; } .pbzw-verdict__row--yes span { background: #3FB97A; color: #062A19; }
.pbzw-verdict__row--mid { background: #FFF7E3; } .pbzw-verdict__row--mid span { background: #FFB81C; color: #082238; }
.pbzw-verdict__row--no { background: #FFF1EC; } .pbzw-verdict__row--no span { background: #E0623F; color: #fff; }

/* article */
.pbzw-art { padding-top: clamp(24px, 4vw, 48px); }
.pbzw-body { max-width: 760px; margin: 0 auto; font-size: 17.5px; line-height: 1.72; color: #334155; }
.pbzw-body > p { margin: 0 0 18px; }
.pbzw-body a { color: #0A6FA8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pbzw-h2 { margin: 58px 0 0; font: 700 clamp(25px, 1rem + 1.2vw, 33px)/1.25 var(--f-display); letter-spacing: -.02em; color: #082238; scroll-margin-top: 100px; text-wrap: balance; }
.pbzw-body > .pbzw-h2:first-child { margin-top: 0; }
.pbzw-answer { margin: 14px 0 22px; padding: 16px 20px; border-radius: 14px; background: #FFFBF0; border: 1px solid #F7E3AE; font-weight: 500; color: #082238; }
.pbzw-pc { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pbzw-pc li { position: relative; padding: 14px 16px 14px 50px; border-radius: 12px; background: #fff; border: 1px solid #E2E8F0; }
.pbzw-pc li::before { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; font: 800 17px/24px var(--f-display); text-align: center; }
.pbzw-pc--pro li::before { content: "+"; background: #EAF8F1; color: #0F7A55; }
.pbzw-pc--con li::before { content: "–"; background: #FFF1EC; color: #B4401F; }
.pbzw-pc b { color: #082238; }

/* fit checklist (inline visual) */
.pbzw-fit { max-width: 1100px; margin: 56px auto; padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: linear-gradient(135deg, #061A2E, #0A3A63 55%, #07605E); color: #D6E4EE; scroll-margin-top: 100px; }
.pbzw-fit__head { max-width: 720px; margin-bottom: 22px; }
.pbzw-fit__head .pbzw-h2 { margin: 0; color: #fff; }
.pbzw-fit__head p { margin: 8px 0 0; font-size: 16px; color: #BFD3E2; }
.pbzw-fit__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; }
.pbzw-fit__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pbzw-fit__list label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); cursor: pointer; font-size: 15.5px; line-height: 1.45; color: #fff; transition: background 200ms, border-color 200ms; }
.pbzw-fit__list label:hover { background: rgba(255,255,255,.1); }
.pbzw-fit__list input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #FFB81C; }
.pbzw-fit__list li.is-on label { background: rgba(255,184,28,.14); border-color: rgba(255,184,28,.55); }
.pbzw-fit__out { position: sticky; top: 100px; padding: 20px; border-radius: 18px; background: #fff; color: #334155; }
.pbzw-meter { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 34px; margin: 4px 0 30px; border-radius: 10px; background: linear-gradient(90deg, #FFE1D6, #FFF1C7 50%, #D8F3E4); }
.pbzw-meter span { align-self: end; transform: translateY(24px); font: 700 11.5px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: #64748B; text-align: center; }
.pbzw-meter i { position: absolute; top: -6px; bottom: -6px; left: 50%; width: 6px; margin-left: -3px; border-radius: 3px; background: #082238; box-shadow: 0 0 0 3px #fff; transition: left 500ms cubic-bezier(.2,.8,.2,1); }
.pbzw-fit__tally { margin: 0 0 8px; font-size: 14px; color: #64748B; }
.pbzw-fit__tally b { color: #082238; }
.pbzw-fit__out h3 { margin: 0 0 6px; font: 700 19px/1.3 var(--f-display); color: #082238; }
.pbzw-fit__out p:not(.pbzw-fit__tally) { margin: 0 0 14px; font-size: 15px; line-height: 1.55; }

/* kit wrapper */
.pbzw-kit { max-width: 1040px; margin: 0 auto 30px; scroll-margin-top: 100px; }
.pbzw-kit > .pbzw-h2, .pbzw-kit > .pbzw-answer { max-width: 760px; margin-left: auto; margin-right: auto; }
.pbzw-kit > .pbzw-h2 { margin-top: 0; }
.pbzw-kit > .pbzw-answer { margin-bottom: 26px; }

@media (max-width: 900px) {
  .pbzw-hero__grid, .pbzw-fit__grid { grid-template-columns: minmax(0, 1fr); }
  .pbzw-verdict { justify-self: stretch; width: auto; }
  .pbzw-fit__out { position: static; }
}
@media (max-width: 640px) {
  .pbzw-body { font-size: 16.5px; }
  .pbzw-verdict__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pbzw-verdict__row span { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .pbzw-verdict__row { animation: none; opacity: 1; transform: none; }
  .pbzw-meter i { transition: none; }
}