/* Blog article 4: What to expect from a Zoho implementation (.pxb4-) */
.pxb4-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pxb4-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 18px 0 0; }
.pxb4-meta span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #E2E8F0; font: 500 13.5px/1.2 var(--f-body); color: #475569; }

/* notebook */
.pxb4-book { position: relative; margin: 0; justify-self: center; width: min(100%, 420px); aspect-ratio: 4 / 3.3; perspective: 1400px; }
.pxb4-book__spine { position: absolute; left: 0; top: 4%; bottom: 4%; width: 26px; border-radius: 12px 0 0 12px; background: linear-gradient(90deg, #061A2E, #0A3A63); box-shadow: 0 30px 60px -30px rgba(8,34,56,.7); }
.pxb4-book__spine::after { content: ""; position: absolute; inset: 8% 8px; background: repeating-linear-gradient(180deg, #FFB81C 0 6px, transparent 6px 26px); border-radius: 4px; opacity: .85; }
.pxb4-book__pages { position: absolute; left: 18px; right: 0; top: 0; bottom: 0; }
.pxb4-book__pg { position: absolute; inset: 0; padding: 30px 30px 26px 40px; border-radius: 4px 18px 18px 4px; background: #FFFDF8 repeating-linear-gradient(180deg, transparent 0 31px, #E7EEF4 31px 32px); border: 1px solid #E2E8F0; box-shadow: 0 24px 48px -32px rgba(8,34,56,.55); transform-origin: left center; backface-visibility: hidden; animation: pxb4Turn 12s calc(var(--i) * 3s) infinite; opacity: 0; }
.pxb4-book__pg::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: rgba(255,120,120,.45); }
.pxb4-book__tag { margin: 0; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #00A3D9; }
.pxb4-book__pg h3 { margin: 14px 0 6px; font: 700 clamp(24px, 1rem + 1.4vw, 32px)/1.1 var(--f-display); color: #082238; letter-spacing: -.02em; }
.pxb4-book__pg p:not(.pxb4-book__tag) { margin: 0; font: 400 16px/2 var(--f-body); color: #334155; }
.pxb4-book__sig { position: absolute; right: 26px; bottom: 24px; padding: 6px 12px; border: 2.5px solid #3FB97A; border-radius: 8px; font: 800 12.5px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #2F9E64; transform: rotate(-8deg); }
@keyframes pxb4Turn {
  0% { opacity: 0; transform: rotateY(0) translateX(14px); }
  4%, 22% { opacity: 1; transform: rotateY(0) translateX(0); }
  30% { opacity: 0; transform: rotateY(-100deg); }
  100% { opacity: 0; transform: rotateY(-100deg); }
}
.pxb4-book__cap { position: absolute; right: 8px; bottom: -30px; font: 600 12px/1.2 var(--f-body); color: #64748B; letter-spacing: .06em; text-transform: uppercase; }

/* article */
.pxb4-art { padding-top: clamp(20px, 3vw, 40px); }
.pxb4-art__wrap { max-width: 860px; }
.pxb4-jump { position: sticky; top: 84px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin: 0 0 40px; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid #E2E8F0; box-shadow: 0 14px 30px -24px rgba(8,34,56,.5); backdrop-filter: blur(8px); scrollbar-width: none; }
.pxb4-jump::-webkit-scrollbar { display: none; }
.pxb4-jump a { flex: none; padding: 8px 14px; border-radius: 999px; font: 600 14px/1.2 var(--f-body); color: #334155; text-decoration: none; transition: background 200ms, color 200ms; }
.pxb4-jump a:hover, .pxb4-jump a.is-on { background: #082238; color: #fff; }
.pxb4-body { font-size: 17.5px; line-height: 1.72; color: #334155; }
.pxb4-body > p { margin: 0 0 18px; }
.pxb4-body a { color: #0A6FA8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pxb4-h2 { margin: 60px 0 0; font: 700 clamp(25px, 1rem + 1.2vw, 33px)/1.2 var(--f-display); letter-spacing: -.02em; color: #082238; scroll-margin-top: 160px; text-wrap: balance; }
.pxb4-h2:first-child { margin-top: 0; }
.pxb4-answer { position: relative; margin: 16px 0 24px; padding: 18px 22px 18px 58px; border-radius: 18px; background: #082238; font-size: 17.5px; line-height: 1.6; font-weight: 500; color: #E6EEF4; }
.pxb4-answer::before { content: ""; position: absolute; left: 20px; top: 22px; width: 22px; height: 22px; border-radius: 50%; background: #FFB81C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082238' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pxb4-entry { position: relative; margin: 0 0 24px; padding: 22px 24px 18px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 24px 50px -40px rgba(8,34,56,.6); }
.pxb4-entry::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #1D3F8F, #00A3D9, #00B2A9, #3FB97A); }
.pxb4-entry__n { margin: 0 0 12px; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pxb4-entry dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; margin: 0; }
.pxb4-entry dt, .pxb4-entry dd { margin: 0; padding: 12px 0; border-top: 1px solid #F1F5F9; font-size: 16px; line-height: 1.55; }
.pxb4-entry dt { font: 700 14.5px/1.4 var(--f-display); color: #082238; padding-right: 14px; }
.pxb4-entry dl > :nth-child(-n+2) { border-top: 0; }

/* readiness */
.pxb4-ready { background: linear-gradient(180deg, #F3F7F9, #fff); }
.pxb4-ready__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.pxb4-ready__card { padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 80px -60px rgba(8,34,56,.7); }
.pxb4-ready__card fieldset { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pxb4-q { position: relative; display: block; cursor: pointer; }
.pxb4-q input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pxb4-q span { display: block; height: 100%; padding: 14px 14px 14px 46px; border-radius: 14px; border: 1.5px solid #E2E8F0; font-size: 14.5px; line-height: 1.45; color: #64748B; transition: border-color 200ms, background 200ms; position: relative; }
.pxb4-q span::before { content: ""; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CBD5E1; transition: all 200ms; }
.pxb4-q b { display: block; margin-bottom: 2px; font: 700 15.5px/1.3 var(--f-display); color: #082238; }
.pxb4-q input:checked + span { border-color: #00B2A9; background: rgba(0,178,169,.06); }
.pxb4-q input:checked + span::before { border-color: #00B2A9; background: #00B2A9; box-shadow: inset 0 0 0 4px #fff; }
.pxb4-q input:focus-visible + span { outline: 3px solid #00A3D9; outline-offset: 2px; }
.pxb4-gauge { position: relative; height: 12px; margin: 22px 0 0; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.pxb4-gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFB81C, #00B2A9 60%, #3FB97A); transition: width 450ms cubic-bezier(.2,.8,.2,1); }
.pxb4-gauge span { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; }
.pxb4-ready__out { margin: 14px 0 18px; min-height: 3.2em; font-size: 16px; line-height: 1.55; color: #334155; }
.pxb4-ready__out b { color: #082238; }

@media (max-width: 1000px) {
  .pxb4-hero__grid, .pxb4-ready__grid { grid-template-columns: minmax(0, 1fr); }
  .pxb4-book { margin-bottom: 30px; }
}
@media (max-width: 640px) {
  .pxb4-ready__card fieldset { grid-template-columns: minmax(0, 1fr); }
  .pxb4-entry dl { grid-template-columns: minmax(0, 1fr); }
  .pxb4-entry dt { padding-bottom: 0; }
  .pxb4-entry dd { border-top: 0; padding-top: 4px; }
  .pxb4-entry dl > :nth-child(-n+2) { border-top: 0; }
  .pxb4-entry dt:not(:first-child) { border-top: 1px solid #F1F5F9; }
  .pxb4-body { font-size: 16.5px; }
  .pxb4-book { aspect-ratio: 4 / 3.8; }
  .pxb4-book__pg { padding: 22px 20px 20px 36px; }
  .pxb4-jump { top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .pxb4-book__pg { animation: none; opacity: 0; }
  .pxb4-book__pg:last-child { opacity: 1; }
}