:root{--primary-color:#3B82F6}section.timeline{position:relative;max-width:600px;margin:2rem auto;padding:2rem 1rem 2rem 3rem;background:#fff;overflow:visible}.step{position:relative;padding-left:3rem;margin-bottom:6rem;transition:opacity .5s ease-in-out;opacity:.3}.step.active,.step.active .step-desc,.step.active .step-number,.step.active .step-title{opacity:1}.step-desc,.step-number,.step-title{opacity:.3;transition:opacity .8s ease-in-out}.features{list-style:disc;margin:.5rem 0 0 1.5rem;padding:0;max-height:none;opacity:1;overflow:visible;transition:none}.features li{margin-bottom:.25rem;color:#4b5563}.features li::marker{color:#dc2626;font-size:1em}.line-container{position:absolute;top:0;left:1.5rem;width:4px;height:100%}.black-line,.red-dot,.red-trail{position:absolute;left:50%;transform:translateX(-50%)}.black-line{top:0;width:4px;background:#6b7280;border-radius:2px;z-index:0;transition:background .3s}.red-trail{top:0;width:6px;background:rgba(220,38,38,.4);border-radius:3px;z-index:1;transition:height .5s ease-in-out}.red-dot{width:14px;height:14px;background:#dc2626;border-radius:50%;box-shadow:0 0 8px #dc2626;z-index:3;transition:top .5s ease-in-out}@media (max-width:768px){section.timeline{padding:1rem}.step{padding-left:2rem;margin-bottom:4rem}.line-container{left:1rem;width:2px}.black-line{width:2px}.red-trail{width:4px}.red-dot{width:10px;height:10px}.circle-marker{width:8px;height:8px;border-width:2px}}