/* Product Design process: compact five-step timeline with a small illustration per step. */
#process .timeline__step{padding-top:30px;padding-bottom:30px}
#process .timeline__row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.45fr);gap:clamp(24px,3vw,56px);align-items:center}
#process .timeline__when{margin-bottom:6px;letter-spacing:1.6px;font-weight:600}
#process .timeline__title{margin-bottom:14px}
#process .timeline__body{margin:0;max-width:60ch}
#process .output-pill span{color:#b8860b;font-weight:600}
#process .timeline__art{justify-self:end;width:100%;max-width:220px;height:auto;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 72%,transparent 100%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#process .timeline__step:nth-child(even) .timeline__dot{box-shadow:0 0 0 7px rgb(245 200 66 / 28%)}
#process .timeline__step:nth-child(odd) .timeline__dot{box-shadow:0 0 0 7px rgb(57 120 230 / 22%)}
@media (max-width:1100px){#process .timeline__row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}#process .timeline__art{display:none}}
@media (max-width:720px){#process .timeline__row{grid-template-columns:1fr;gap:14px}#process .timeline__step{padding-top:24px;padding-bottom:24px}}
/* Continuous motion on the step illustrations: each floats, tilts and breathes on its own loop. */
#process .timeline__art{animation:psFloat 6s ease-in-out infinite;will-change:transform}
#process .timeline__step:nth-child(1) .timeline__art{animation-name:psSearch;animation-duration:5.5s}
#process .timeline__step:nth-child(2) .timeline__art{animation-name:psFlow;animation-duration:6.5s;animation-delay:-1.4s}
#process .timeline__step:nth-child(3) .timeline__art{animation-name:psTilt;animation-duration:7s;animation-delay:-2.6s}
#process .timeline__step:nth-child(4) .timeline__art{animation-name:psFloat;animation-duration:6s;animation-delay:-3.2s}
#process .timeline__step:nth-child(5) .timeline__art{animation-name:psTilt;animation-duration:7.5s;animation-delay:-4.4s}
#process .timeline__step:hover .timeline__art{animation-duration:3.5s}
@keyframes psFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}
@keyframes psSearch{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(3px,-7px) rotate(1.5deg)}65%{transform:translate(-3px,-3px) rotate(-1deg)}}
@keyframes psFlow{0%,100%{transform:translateX(0) translateY(0)}25%{transform:translateX(4px) translateY(-5px)}50%{transform:translateX(0) translateY(-8px)}75%{transform:translateX(-4px) translateY(-4px)}}
@keyframes psTilt{0%,100%{transform:perspective(600px) rotateY(-8deg) rotateX(3deg) translateY(0)}50%{transform:perspective(600px) rotateY(8deg) rotateX(-2deg) translateY(-7px)}}
@media (prefers-reduced-motion:reduce){#process .timeline__art{animation:none}}