/* Blog: Salesforce to Zoho CRM planning guide (.pbsf-) */
.pbsf-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pbsf-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 18px 0 0; font: 500 14px/1.4 var(--f-body); color: #64748B; }

/* hero pre-flight list */
.pbsf-pre { justify-self: center; width: min(100%, 390px); padding: 22px; border-radius: 22px; background: linear-gradient(160deg, #061A2E, #0A3A63 60%, #07605E); color: #D6E4EE; box-shadow: 0 40px 70px -40px rgba(8,34,56,.75); }
.pbsf-pre__top { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.pbsf-pre__top img { height: 26px; width: auto; }
.pbsf-pre__top span { color: #FFB81C; font-weight: 700; }
.pbsf-pre__top b { margin-left: auto; font: 700 13px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #FFB81C; text-align: right; }
.pbsf-pre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pbsf-pre li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 4px; font: 500 15px/1.4 var(--f-body); color: #fff; }
.pbsf-pre li i { flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid rgba(255,255,255,.4); }
.pbsf-pre li i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #3FB97A; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transform-origin: center; animation: pbsfTick .35s cubic-bezier(.2,.9,.3,1.4) forwards; }
.pbsf-pre li:nth-child(1) i::after { animation-delay: .5s } .pbsf-pre li:nth-child(2) i::after { animation-delay: .8s } .pbsf-pre li:nth-child(3) i::after { animation-delay: 1.1s }
.pbsf-pre li:nth-child(4) i::after { animation-delay: 1.4s } .pbsf-pre li:nth-child(5) i::after { animation-delay: 1.7s }
@keyframes pbsfTick { to { transform: rotate(45deg) scale(1); } }
.pbsf-pre__foot { margin: 12px 0 0; font-size: 13.5px; color: #9FB8CB; }

/* article */
.pbsf-art { padding-top: clamp(24px, 4vw, 48px); }
.pbsf-body { max-width: 760px; margin: 0 auto; font-size: 17.5px; line-height: 1.72; color: #334155; }
.pbsf-body > p { margin: 0 0 18px; }
.pbsf-body a { color: #0A6FA8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pbsf-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; }
.pbsf-body > .pbsf-h2:first-child { margin-top: 0; }
.pbsf-answer { margin: 14px 0 22px; padding: 16px 20px 16px 52px; border-radius: 14px; background: #EEF5FB; font-weight: 500; color: #082238; position: relative; }
.pbsf-answer::before { content: "A"; position: absolute; left: 16px; top: 16px; width: 24px; height: 24px; border-radius: 50%; background: #0A3A63; color: #FFB81C; font: 800 13px/24px var(--f-display); text-align: center; }

/* timeline (inline visual) */
.pbsf-tl { position: relative; max-width: 1140px; margin: 50px auto; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 60px -50px rgba(8,34,56,.7); scroll-margin-top: 100px; }
.pbsf-tl__cap { max-width: 760px; margin: 0 0 26px; }
.pbsf-tl__cap b { display: block; font: 700 clamp(22px, 1rem + .8vw, 28px)/1.25 var(--f-display); color: #082238; letter-spacing: -.02em; }
.pbsf-tl__cap span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: #475569; }
.pbsf-tl__rail { position: absolute; left: clamp(22px, 3vw, 34px); right: clamp(22px, 3vw, 34px); height: 4px; margin-top: 12px; border-radius: 2px; background: #E2E8F0; }
.pbsf-tl__rail i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.3,.7,.2,1); }
.pbsf-tl.is-in .pbsf-tl__rail i { transform: none; }
.pbsf-tl__phases { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 34px 0 0; list-style: none; }
.pbsf-ph { position: relative; padding: 16px 14px 18px; border-radius: 16px; background: #F7FAFC; border: 1px solid #E2E8F0; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; transition-delay: calc(.25s + var(--k) * .22s); }
.pbsf-tl.is-in .pbsf-ph { opacity: 1; transform: none; }
.pbsf-ph::before { content: ""; position: absolute; left: 16px; top: -30px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #00A3D9; }
.pbsf-ph__n { margin: 0; font: 700 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #00A3D9; }
.pbsf-ph h3 { margin: 6px 0 10px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pbsf-ph ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pbsf-ph li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: #334155; }
.pbsf-ph li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #0A84C1; }
.pbsf-ph li.is-mig::before { background: #E0623F; }
.pbsf-flag { display: inline-block; margin-top: 14px; padding: 6px 10px; border-radius: 8px; font: 700 12px/1.2 var(--f-body); letter-spacing: .02em; }
.pbsf-flag--stop { background: #FFF1EC; color: #B4401F; border: 1px dashed #E0623F; }
.pbsf-flag--ro { background: #082238; color: #FFB81C; }
.pbsf-tl__key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; font-size: 13.5px; color: #64748B; }
.pbsf-tl__key span { display: inline-flex; align-items: center; gap: 8px; }
.pbsf-tl__key i { width: 10px; height: 10px; border-radius: 50%; background: #0A84C1; }
.pbsf-tl__key i.is-mig { background: #E0623F; }

/* three columns */
.pbsf-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.pbsf-three > div { padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; }
.pbsf-three > div:nth-child(1) { border-top: 4px solid #3FB97A; } .pbsf-three > div:nth-child(2) { border-top: 4px solid #00A3D9; } .pbsf-three > div:nth-child(3) { border-top: 4px solid #94A3B8; }
.pbsf-three h3 { margin: 0 0 6px; font: 700 16.5px/1.3 var(--f-display); color: #082238; }
.pbsf-three p { margin: 0; font-size: 15px; line-height: 1.55; }

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

/* table + list */
.pbsf-tw { margin: 0 0 20px; overflow-x: auto; border-radius: 16px; border: 1px solid #E2E8F0; }
.pbsf-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.pbsf-table th, .pbsf-table td { padding: 11px 16px; text-align: left; border-bottom: 1px solid #F1F5F9; }
.pbsf-table thead th { background: #082238; color: #fff; font: 600 13px/1.3 var(--f-body); white-space: nowrap; }
.pbsf-table tbody th { font-weight: 700; color: #082238; }
.pbsf-table td:nth-child(2) { font-weight: 700; color: #082238; }
.pbsf-list { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: sf; display: grid; gap: 10px; }
.pbsf-list li { counter-increment: sf; position: relative; padding: 14px 16px 14px 54px; border-radius: 12px; background: #F3F7F9; }
.pbsf-list li::before { content: counter(sf); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 8px; background: #FFF1EC; color: #B4401F; font: 800 14px/26px var(--f-display); text-align: center; }
.pbsf-list b { color: #082238; }

@media (max-width: 1000px) {
  .pbsf-tl__phases { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 0 0 30px; }
  .pbsf-tl__rail { display: none; }
  .pbsf-tl__phases::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); }
  .pbsf-ph::before { left: -32px; top: 18px; }
}
@media (max-width: 900px) { .pbsf-hero__grid { grid-template-columns: minmax(0, 1fr); } .pbsf-pre { justify-self: stretch; width: auto; } }
@media (max-width: 700px) { .pbsf-three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pbsf-body { font-size: 16.5px; } .pbsf-answer { padding-left: 46px; } .pbsf-answer::before { left: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .pbsf-pre li i::after { animation: none; transform: rotate(45deg); }
  .pbsf-tl__rail i { transition: none; transform: none; }
  .pbsf-ph { opacity: 1; transform: none; transition: none; }
}