/* Illustrated, progressive enhancement: content remains visible without JS. */
body.page-id-48 .pd-page .role-overview-row .role-handoff {
  justify-content: center;
  background: radial-gradient(ellipse at 80% 0, #eaf8f0 0, transparent 55%), #fbfdfb;
}
body.page-id-48 .pd-page .role-overview-row .role-handoff-flow {
  flex: none;
  gap: 14px;
  margin-top: 26px;
}
body.page-id-48 .pd-page .role-overview-row .handoff-node {
  min-height: 245px;
  padding: 16px 12px 14px;
  border-color: #d8e8df;
  background: linear-gradient(160deg, #fff, #f7fcf9);
  box-shadow: 0 8px 22px rgba(16, 76, 54, .055);
  transition: box-shadow .2s, border-color .2s;
}
body.page-id-48 .pd-page .role-overview-row .handoff-node:hover {
  border-color: #50b894;
  box-shadow: 0 12px 28px rgba(16, 76, 54, .12);
}
body.page-id-48 .pd-page .role-overview-row .handoff-art {
  width: 64px; height: 64px; margin: 0 0 8px;
  filter: drop-shadow(0 5px 5px rgba(16, 76, 54, .08));
}
.handoff-art svg { display: block; width: 100%; height: 100%; }
body.page-id-48 .pd-page .role-overview-row .handoff-index {
  position: absolute; top: 12px; right: 10px; padding: 0;
  background: none; border: none; width: auto; height: auto;
  color: #539780; font-size: .62rem;
}
body.page-id-48 .pd-page .role-overview-row .handoff-node strong { margin-top: 6px; font-size: .79rem; line-height: 1.4; }
body.page-id-48 .pd-page .role-overview-row .handoff-node small { font-size: .69rem; line-height: 1.6; margin-bottom: 16px; }
body.page-id-48 .pd-page .role-overview-row .handoff-node em { margin-top: auto; }
body.page-id-48 .pd-page .role-overview-row .handoff-node:not(:last-child)::after {
  content: ''; display: block; position: absolute;
  top: 47px; right: -16px; left: auto; bottom: auto;
  width: 16px; height: 2px; border: 0; border-radius: 0;
  background: #4daf8b; transform: none; transform-origin: left;
  box-shadow: none;
}
body.page-id-48 .pd-page .role-overview-row .role-detail { position: relative; overflow: hidden; }
body.page-id-48 .pd-page .role-overview-row .role-detail::before {
  content: ''; position: absolute; pointer-events: none; width: 250px; height: 250px;
  top: -160px; right: -85px; border: 34px solid rgba(104, 222, 173, .08); border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .pd-page .flow-playing .handoff-node { animation: pd-step-in .48s both; animation-delay: calc(var(--step) * .26s); }
  .pd-page .flow-playing .handoff-art { animation: pd-art-in .65s both; animation-delay: calc(var(--step) * .26s + .08s); }
  body.page-id-48 .pd-page .flow-playing .handoff-node:not(:last-child)::after { animation: pd-line-in .28s both; animation-delay: calc(var(--step) * .26s + .3s); }
}
@keyframes pd-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-art-in { from { opacity: 0; transform: translateY(6px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes pd-line-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (max-width: 700px) {
  body.page-id-48 .pd-page .role-overview-row .role-handoff-flow { grid-template-columns: 1fr; gap: 16px; }
  body.page-id-48 .pd-page .role-overview-row .handoff-node { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 4px 14px; min-height: 0; padding: 16px; }
  body.page-id-48 .pd-page .role-overview-row .handoff-art { width: 56px; height: 56px; grid-row: 1 / 4; margin: 8px 0 0; }
  body.page-id-48 .pd-page .role-overview-row .handoff-index { top: 4px; left: 19px; right: auto; font-size: .52rem; }
  body.page-id-48 .pd-page .role-overview-row .handoff-node strong { margin: 0; }
  body.page-id-48 .pd-page .role-overview-row .handoff-node small { margin: 0 0 6px; }
  body.page-id-48 .pd-page .role-overview-row .handoff-node em { grid-column: 2; margin: 0; justify-self: start; }
  body.page-id-48 .pd-page .role-overview-row .handoff-node:not(:last-child)::after { top: 100%; left: 43px; right: auto; width: 2px; height: 18px; }
  @keyframes pd-line-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
}