/* Farm collaboration template, scoped to the added hospital slide. */
:where(#hospital-collaboration) .step { position: relative; padding: 26px 18px 0; border-top: 1px solid var(--ink); min-height: 200px }
:where(#hospital-collaboration) .step::before { content: ""; position: absolute; top: -5px; left: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink) }
:where(#hospital-collaboration) .step:last-child::before { background: var(--alert); border-color: var(--alert) }
:where(#hospital-collaboration) .step-no { font-size: 12px; letter-spacing: .16em; color: var(--ink); margin-bottom: 38px }
:where(#hospital-collaboration) .step h3 { font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 9px }
:where(#hospital-collaboration) .step p { font-size: var(--fz-body); line-height: 1.3; color: var(--ink) }
:where(#hospital-collaboration) .collab-timeline { position: relative; width: 100%; min-height: 310px; padding-top: 96px }
:where(#hospital-collaboration) .collab-track { position: absolute; z-index: 2; left: 2%; right: 2%; top: 62px; height: 18px; display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 3px solid var(--ink); background: #d7d7da; clip-path: polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 4px) calc(100% - 3px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 3px),0 calc(100% - 3px),0 3px,4px 3px) }
:where(#hospital-collaboration) .collab-track>span { position: relative; z-index: 3; border-right: 3px solid var(--ink) }
:where(#hospital-collaboration) .collab-track>span:last-of-type { border-right: 0 }
:where(#hospital-collaboration) .collab-fill { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(180deg,#57585f 0 4px,#44454b 4px 8px) }
:where(#hospital-collaboration).active-slide .collab-fill { animation: hospital-timeline-fill 8s steps(64,end) forwards }
:where(#hospital-collaboration) .pig-runner { position: absolute; z-index: 5; left: calc(2% - 18px); top: 58px; width: 36px; height: 26px }
:where(#hospital-collaboration) .pig-runner img { position: absolute; left: 50%; top: 50%; width: 340%; height: 340%; object-fit: fill; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(30,30,43,.13)); transform: translate(-50%,-50%) scaleX(1.06) }
:where(#hospital-collaboration).active-slide .pig-runner { animation: hospital-pig-run 8s steps(64,end) forwards }
:where(#hospital-collaboration).active-slide .pig-runner img { animation: hospital-pig-bob .48s steps(2,end) infinite }
:where(#hospital-collaboration) .collab-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px }
:where(#hospital-collaboration) .collab-steps .step { border-top: 0; padding: 24px 10px 0; min-height: 190px; opacity: 0; transform: translateY(10px); transition: none }
:where(#hospital-collaboration) .collab-steps .step::before { display: none }
:where(#hospital-collaboration).active-slide .collab-steps .step { animation: hospital-step-reveal .5s ease forwards }
:where(#hospital-collaboration).active-slide .collab-steps .step:nth-child(1) { animation-delay: .45s }
:where(#hospital-collaboration).active-slide .collab-steps .step:nth-child(2) { animation-delay: 2.35s }
:where(#hospital-collaboration).active-slide .collab-steps .step:nth-child(3) { animation-delay: 4.3s }
:where(#hospital-collaboration).active-slide .collab-steps .step:nth-child(4) { animation-delay: 6.25s }
:where(#hospital-collaboration) .collab-steps .step-no { margin-bottom: 22px }
:where(#hospital-collaboration) .collab-steps .step h3 { font-size: 20px }
:where(#hospital-collaboration) .collab-steps .step p { font-size: var(--fz-body) }
:where(#hospital-collaboration) .collab-steps .step:nth-child(4) h3 { font-size: 18px; line-height: 1.06 }
@keyframes hospital-timeline-fill {
  to { width: 100% }
}
@keyframes hospital-pig-run {
  to { left: calc(98% - 18px) }
}
@keyframes hospital-pig-bob {
  50% { transform: translate(-50%,calc(-50% - 1px)) scaleX(1.06) }
}
@keyframes hospital-step-reveal {
  to { opacity: 1; transform: none }
}

@media(max-width:900px) {
  :where(#hospital-collaboration) .collab-timeline { min-height: 250px }
  :where(#hospital-collaboration) .collab-steps .step { min-height: 150px }
}
@media(max-height:690px) {
  :where(#hospital-collaboration) .collab-timeline { min-height: 260px }
  :where(#hospital-collaboration) .collab-steps .step { min-height: 150px }
  :where(#hospital-collaboration) .collab-steps .step-no { margin-bottom: 20px }
}
@media(prefers-reduced-motion:reduce) {
  :where(#hospital-collaboration).active-slide .collab-fill,:where(#hospital-collaboration).active-slide .pig-runner,:where(#hospital-collaboration).active-slide .pig-runner img,:where(#hospital-collaboration).active-slide .collab-steps .step { animation: none!important }
  :where(#hospital-collaboration) .collab-steps .step { opacity: 1; transform: none }
  :where(#hospital-collaboration) .collab-fill { width: 100% }
  :where(#hospital-collaboration) .pig-runner { left: calc(98% - 18px) }
}
@media (max-width: 900px) {
  :where(#hospital-collaboration) .collab-timeline { min-height: 300px; }
}
@media (max-width: 640px) {
  :where(#hospital-collaboration) .collab-timeline { padding-top: 90px; }
  :where(#hospital-collaboration) .collab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  :where(#hospital-collaboration) .collab-steps .step { padding: 8px 0 0; min-height: 0; }
  :where(#hospital-collaboration) .collab-steps .step-no { margin-bottom: 10px; }
  :where(#hospital-collaboration) .collab-steps .step h3,:where(#hospital-collaboration) .collab-steps .step:nth-child(4) h3 { font-size: 19px; }
  :where(#hospital-collaboration) .collab-steps .step p { font-size: var(--fz-body); line-height: 1.3; }
}
:where(#hospital-collaboration) .collab-track,:where(#hospital-collaboration) .collab-steps { grid-template-columns: repeat(3,minmax(0,1fr)) }
:where(#hospital-collaboration).active-slide .collab-steps .step:nth-child(2) { animation-delay: 3s }
:where(#hospital-collaboration).active-slide .collab-steps .step:nth-child(3) { animation-delay: 5.65s }
@media(max-width:640px) {
  :where(#hospital-collaboration) .collab-steps { grid-template-columns: 1fr; gap: 24px }
  :where(#hospital-collaboration) .collab-steps .step { min-height: 0 }
  :where(#hospital-collaboration) .collab-timeline { padding-top: 90px }
}

:where(#hospital-collaboration) .collaboration-invitation { display: block; margin-top: 1em; font-weight: 400; }