.shipping-demo{display:grid;grid-template-columns:.8fr 1.5fr;gap:30px;align-items:center;margin:50px 0 65px;padding:38px;border:1px solid #404335;border-radius:24px;background:radial-gradient(ellipse at 75% 40%,#243128 0%,#101813 55%,#111610 100%);overflow:hidden}.shipping-copy h2{font-size:clamp(30px,3.1vw,48px);line-height:1.08;letter-spacing:-.04em;margin:18px 0}.shipping-copy h2 em{color:#d0b573;font-style:normal}.shipping-copy>p:not(.eyebrow){font-size:17px;line-height:1.65;color:#b7beb3;max-width:290px}.shipping-copy>a{display:inline-block;margin-top:18px;color:#ddc68e;font-weight:600}.shipping-stage{min-width:0}.shipping-stage svg{width:100%;display:block;overflow:hidden;font-family:Arial,sans-serif}.ship-small{fill:#9aaa98;font-size:10px;letter-spacing:1px}.ship-order{fill:#e0e6d7;font-size:18px;letter-spacing:1px}.ship-station-labels{fill:#b2bda7;font-size:12px;letter-spacing:1.1px}.shipping-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #394435;padding-top:16px;color:#c8b880;font-size:10px;letter-spacing:1px}.shipping-controls small{display:block;color:#8b9888;letter-spacing:0;font-size:11px;margin-top:5px}.shipping-controls>div{display:flex;gap:8px}.shipping-controls button{border:1px solid #5b654f;background:#1d271d;border-radius:30px;padding:9px 13px;color:#e5e8d9;font:inherit;letter-spacing:0;cursor:pointer;min-height:40px}.shipping-controls button:hover{background:#38432c}.shipping-controls button:focus-visible{outline:2px solid #e8d28f;outline-offset:3px}.ship-carton{animation:ship-move 9s infinite}.ship-label{animation:ship-print 9s infinite}.ship-applied{animation:ship-apply 9s infinite}.ship-confirm{animation:ship-check 9s infinite}.ship-progress{stroke-dasharray:205;animation:ship-progress 9s infinite}.shipping-demo.is-paused *{animation-play-state:paused!important}@keyframes ship-move{0%{transform:translateX(-320px);opacity:0}8%{opacity:1}26%,68%{transform:translateX(0);opacity:1}88%{transform:translateX(320px);opacity:1}96%,100%{transform:translateX(350px);opacity:0}}@keyframes ship-print{0%,31%{transform:translateY(-95px)}52%,65%{transform:translateY(25px);opacity:1}68%,100%{transform:translateY(25px);opacity:0}}@keyframes ship-apply{0%,65%{opacity:0}69%,100%{opacity:1}}@keyframes ship-check{0%,74%{opacity:0}81%,95%{opacity:1}100%{opacity:0}}@keyframes ship-progress{0%,10%{stroke-dashoffset:205}28%{stroke-dashoffset:140}62%{stroke-dashoffset:65}85%,100%{stroke-dashoffset:0}}
.shipping-demo.is-still *{animation:none!important}.shipping-demo.is-still .ship-label{transform:translateY(25px)}.shipping-demo.is-still .ship-applied,.shipping-demo.is-still .ship-confirm{opacity:1}.shipping-demo.is-still .ship-progress{stroke-dashoffset:0}@media(max-width:800px){.shipping-demo{grid-template-columns:1fr;padding:24px 16px;gap:14px;margin-top:30px}.shipping-copy{padding:0 8px}.shipping-copy h2{font-size:36px}.shipping-copy>p:not(.eyebrow){max-width:none}.shipping-stage{margin:0 -8px}.shipping-controls{margin:0 8px}.ship-station-labels{font-size:15px;letter-spacing:0}}@media(prefers-reduced-motion:reduce){.shipping-demo *{animation:none!important}.ship-label{transform:translateY(25px)}.ship-applied,.ship-confirm{opacity:1}}
/* Begin with a recognizable packing scene, including when browser rendering is throttled. */
.ship-carton,.ship-label,.ship-applied,.ship-confirm,.ship-progress{animation-delay:var(--ship-start,-3.5s)}