.storefront .order-journey {
    margin-top: 16px;
    margin-bottom: 44px;
    padding: 56px 0 42px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #142e3a;
    overflow: visible;
}

.journey-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: 35px; }
.journey-heading .eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 15px; color: #b9005e; font-size: 10px; font-weight: 750; letter-spacing: 1.8px; }
.storefront .journey-heading h2 { margin: 0; color: #142e3a; font-size: clamp(32px, 3.3vw, 44px); line-height: 1.16; letter-spacing: -1.35px; font-weight: 750; }
.journey-heading h2 span { color: #e60074; }
.journey-heading p:not(.eyebrow) { max-width: 580px; margin: 15px 0 0; color: #667c88; font-size: 14px; line-height: 1.8; }
.journey-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-width: 113px; min-height: 44px; margin-top: 4px; padding: 9px 13px; border: 1px solid #e1e9ed; border-radius: 99px; background: #fff; color: #516b78; font-size: 11px; font-weight: 600; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; }
.journey-toggle:hover { border-color: #b8ccd5; background: #f7fafb; color: #142e3a; }
.journey-toggle svg { width: 15px; height: 15px; }
.journey-toggle[hidden], .journey-toggle svg[hidden] { display: none !important; }
.journey-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; gap: 42px; }
.journey-step { position: relative; min-width: 0; --journey-color: #00aeef; --journey-label: #00799e; --journey-delay: 0s; }
.journey-step-print { --journey-color: #e60074; --journey-label: #b8005d; --journey-delay: 4s; }
.journey-step-ship { --journey-color: #ffdc00; --journey-label: #8a6b00; --journey-delay: 8s; }
.journey-art { position: relative; display: grid; place-items: center; height: 258px; padding: 0 0 21px; border: 0; border-radius: 0; background: transparent; }
.journey-step-print .journey-art, .journey-step-ship .journey-art { background: transparent; }
.journey-illustration { display: block; width: min(100%, 340px); height: auto; max-height: 237px; fill: none; stroke: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.journey-art-caption { position: absolute; right: 0; bottom: 4px; left: 0; color: #8a9ba4; font-size: 10px; font-weight: 600; letter-spacing: .9px; line-height: 1.4; text-align: center; }
.journey-step:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 123px; right: -57px; width: 71px; height: 3px; background: radial-gradient(circle, #b8cbd3 1.3px, transparent 1.6px) 0 50% / 8px 3px repeat-x; }
.journey-step:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: 120px; right: -57px; width: 7px; height: 7px; border-top: 1.5px solid #9eb8c4; border-right: 1.5px solid #9eb8c4; transform: rotate(45deg); }
.journey-step-copy { padding: 24px 17px 0; }
.journey-step-label { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--journey-label); font-size: 10px; font-weight: 750; letter-spacing: 1.7px; line-height: 1.5; text-transform: uppercase; }
.journey-step-label > span { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--journey-color); color: #142e3a; font-size: 10px; font-weight: 750; letter-spacing: 0; }
.journey-step-print .journey-step-label > span { color: #fff; }
.storefront .journey-step-copy h3 { margin: 0; color: #142e3a; font-size: 23px; font-weight: 750; letter-spacing: -.65px; line-height: 1.28; }
.journey-step-copy p { max-width: 345px; margin: 11px 0 0; color: #667c88; font-size: 13px; line-height: 1.85; }
.journey-route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; height: 2px; margin: 37px 17px 0; }
.journey-route i { position: relative; display: block; height: 2px; overflow: hidden; border-radius: 2px; background: #e9eff2; }
.journey-route i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #00aeef; transform-origin: left; animation: journey-progress-order 12s linear infinite; }
.journey-route i:nth-of-type(2)::after { background: #e60074; animation-name: journey-progress-print; }
.journey-route i:nth-of-type(3)::after { background: #ffdc00; animation-name: journey-progress-ship; }
.journey-route-dot { position: absolute; z-index: 1; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #00aeef; box-shadow: 0 0 0 3px #fff; animation: journey-travel 12s linear infinite; }

.journey-order-design { transform-box: fill-box; transform-origin: center; animation: journey-design 12s ease-in-out infinite; }
.journey-order-cursor { animation: journey-cursor 12s ease-in-out infinite; }
.journey-order-click { transform-box: fill-box; transform-origin: center; fill: none; stroke: #00aeef; stroke-width: 2; opacity: 0; animation: journey-click 12s ease-out infinite; }
.journey-order-check { transform-box: fill-box; transform-origin: center; animation: journey-confirm 12s ease-out infinite; }
.journey-check-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; animation: journey-check-draw 12s ease-out infinite; }
.journey-print-feed { animation: journey-feed 12s ease-in-out infinite; }
.journey-print-head { animation: journey-head 12s ease-in-out infinite; }
.journey-print-sheet { animation: journey-sheet 12s ease-in-out infinite; }
.journey-status-light { transform-box: fill-box; transform-origin: center; animation: journey-status 12s ease-in-out infinite; }
.journey-truck { animation: journey-drive 12s linear infinite; }
.journey-wheel { transform-box: fill-box; transform-origin: center; animation: journey-wheel-turn 12s linear infinite; }
.journey-road { animation: journey-road 12s linear infinite; }
.journey-speed { animation: journey-speed 12s ease-in-out infinite; }
.journey-spark { transform-box: fill-box; transform-origin: center; opacity: .5; animation: journey-sparkle 12s ease-in-out infinite; animation-delay: var(--journey-delay); }
.order-journey *, .order-journey *::before, .order-journey *::after { animation-play-state: paused; }
.order-journey.is-animating *, .order-journey.is-animating *::before, .order-journey.is-animating *::after { animation-play-state: running; }

@keyframes journey-design {
    0%, 2%, 100% { opacity: .45; transform: translateY(3px); }
    8%, 94% { opacity: 1; transform: translateY(0); }
}

@keyframes journey-cursor {
    0%, 100% { opacity: .4; transform: translate(19px, 26px); }
    7%, 10% { opacity: 1; transform: translate(7px, 15px); }
    11.5% { opacity: 1; transform: translate(7px, 17px); }
    13%, 20% { opacity: 1; transform: translate(7px, 15px); }
    27%, 94% { opacity: .35; transform: translate(19px, 26px); }
}

@keyframes journey-click {
    0%, 10%, 18%, 100% { opacity: 0; transform: scale(.5); }
    11% { opacity: .65; transform: scale(.55); }
    16% { opacity: 0; transform: scale(1.65); }
}

@keyframes journey-confirm {
    0%, 12%, 100% { opacity: 0; transform: scale(.82); }
    15% { opacity: 1; transform: scale(1.04); }
    19%, 94% { opacity: 1; transform: scale(1); }
    98% { opacity: 0; transform: scale(1); }
}

@keyframes journey-check-draw {
    0%, 15%, 100% { stroke-dashoffset: 1; }
    20%, 98% { stroke-dashoffset: 0; }
}

@keyframes journey-feed {
    0%, 33%, 100% { transform: translateY(-5px); }
    43% { transform: translateY(-2px); }
    51% { transform: translateY(1px); }
    59% { transform: translateY(5px); }
    66%, 94% { transform: translateY(8px); }
}

@keyframes journey-head {
    0%, 33%, 66%, 100% { transform: translateX(0); }
    39%, 51%, 63% { transform: translateX(102px); }
    45%, 57% { transform: translateX(0); }
}

@keyframes journey-sheet {
    0%, 33%, 100% { transform: translateY(-3px); }
    42% { transform: translateY(0); }
    50% { transform: translateY(3px); }
    58% { transform: translateY(6px); }
    66%, 94% { transform: translateY(9px); }
}

@keyframes journey-status {
    0%, 33%, 66%, 100% { opacity: .55; transform: scale(.85); }
    37%, 47%, 57% { opacity: 1; transform: scale(1.12); }
    42%, 52%, 62% { opacity: .6; transform: scale(.9); }
}

@keyframes journey-drive {
    0%, 66%, 100% { opacity: 1; transform: translateX(0); }
    76% { opacity: 1; transform: translateX(4px); }
    86% { opacity: 1; transform: translateX(10px); }
    94% { opacity: 1; transform: translateX(16px); }
    97% { opacity: 0; transform: translateX(22px); }
    98% { opacity: 0; transform: translateX(-6px); }
}

@keyframes journey-wheel-turn {
    0%, 66% { transform: rotate(0); }
    94% { transform: rotate(660deg); }
    97%, 100% { transform: rotate(720deg); }
}

@keyframes journey-road {
    0%, 66%, 100% { opacity: .5; transform: translateX(0); }
    72%, 83%, 94% { opacity: .85; transform: translateX(-8px); }
    76%, 88%, 97% { opacity: 0; transform: translateX(-17px); }
    77%, 89%, 98% { opacity: 0; transform: translateX(0); }
}

@keyframes journey-speed {
    0%, 66%, 98%, 100% { opacity: .2; transform: translateX(0); }
    72%, 83%, 93% { opacity: .85; transform: translateX(-4px); }
    77%, 88% { opacity: .4; transform: translateX(-8px); }
}

@keyframes journey-sparkle {
    0%, 2%, 30%, 100% { opacity: .35; transform: scale(.85); }
    11% { opacity: 1; transform: scale(1.1); }
    22% { opacity: .65; transform: scale(1); }
}

@keyframes journey-progress-order {
    0%, 2%, 100% { transform: scaleX(0); }
    31%, 94% { transform: scaleX(1); }
    98% { transform: scaleX(1); opacity: 0; }
    0%, 94%, 100% { opacity: 1; }
}

@keyframes journey-progress-print {
    0%, 35%, 100% { transform: scaleX(0); }
    64%, 94% { transform: scaleX(1); }
    98% { transform: scaleX(1); opacity: 0; }
    0%, 94%, 100% { opacity: 1; }
}

@keyframes journey-progress-ship {
    0%, 68%, 100% { transform: scaleX(0); }
    94% { transform: scaleX(1); }
    98% { transform: scaleX(1); opacity: 0; }
    0%, 94%, 100% { opacity: 1; }
}

@keyframes journey-travel {
    0%, 2% { left: 0; background: #00aeef; opacity: 0; }
    5% { opacity: 1; }
    33% { left: 33%; background: #e60074; }
    66% { left: 66%; background: #dcb900; }
    94% { left: calc(100% - 6px); background: #dcb900; opacity: 1; }
    98%, 100% { left: calc(100% - 6px); background: #dcb900; opacity: 0; }
}

@media (max-width: 1040px) {
    .storefront .order-journey { padding-top: 46px; padding-bottom: 35px; }
    .journey-heading { margin-bottom: 28px; }
    .journey-steps { gap: 27px; }
    .journey-art { height: 224px; }
    .journey-illustration { width: min(100%, 310px); max-height: 204px; }
    .journey-step:not(:last-child)::after { top: 106px; right: -41px; width: 55px; }
    .journey-step:not(:last-child)::before { top: 103px; right: -41px; }
    .journey-step-copy { padding: 22px 7px 0; }
    .storefront .journey-step-copy h3 { font-size: 21px; }
    .journey-step-copy p { font-size: 12px; }
    .journey-route { gap: 27px; margin-inline: 7px; }
}

@media (max-width: 760px) {
    .storefront .order-journey { margin-top: 0; margin-bottom: 30px; padding: 35px 0 28px; }
    .journey-heading { flex-wrap: wrap; gap: 18px; margin-bottom: 26px; }
    .storefront .journey-heading h2 { max-width: 540px; font-size: 34px; letter-spacing: -1px; }
    .journey-heading p:not(.eyebrow) { font-size: 13px; }
    .journey-toggle { min-width: 105px; margin: 0; font-size: 11px; }
    .journey-steps { grid-template-columns: minmax(0, 1fr); gap: 31px; }
    .journey-step { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: 29px; }
    .journey-step:not(:last-child)::before, .journey-step:not(:last-child)::after { content: none; }
    .journey-art { height: 222px; padding: 0 0 20px; }
    .journey-illustration { width: min(100%, 310px); max-height: 210px; }
    .journey-art-caption { bottom: 5px; font-size: 9px; }
    .journey-step-copy { padding: 0; }
    .journey-step-label { margin-bottom: 12px; font-size: 10px; letter-spacing: 1.5px; }
    .storefront .journey-step-copy h3 { font-size: 22px; }
    .journey-step-copy p { font-size: 12px; line-height: 1.8; }
    .journey-route { gap: 16px; margin: 31px 0 0; }
}

@media (max-width: 560px) {
    .storefront .order-journey { margin-bottom: 22px; padding-top: 30px; }
    .journey-heading { gap: 16px; margin-bottom: 27px; }
    .journey-heading .eyebrow { margin-bottom: 12px; font-size: 9px; letter-spacing: 1.4px; }
    .storefront .journey-heading h2 { font-size: 32px; line-height: 1.18; }
    .journey-heading p:not(.eyebrow) { margin-top: 12px; font-size: 13px; }
    .journey-steps { gap: 38px; }
    .journey-step { display: flex; flex-direction: column; gap: 12px; }
    .journey-art { width: 100%; height: 218px; padding: 0 0 21px; }
    .journey-illustration { width: min(100%, 290px); max-height: 197px; }
    .journey-art-caption { bottom: 1px; font-size: 9px; }
    .journey-step-copy { width: 100%; max-width: 360px; padding: 4px 8px 0; text-align: center; }
    .journey-step-label { justify-content: center; gap: 9px; margin-bottom: 11px; }
    .journey-step-label > span { width: 25px; height: 25px; flex-basis: 25px; }
    .storefront .journey-step-copy h3 { font-size: 23px; letter-spacing: -.65px; }
    .journey-step-copy p { max-width: 330px; margin: 9px auto 0; font-size: 13px; line-height: 1.8; }
    .journey-route { margin-top: 36px; }
}

@media (max-width: 360px) {
    .storefront .journey-heading h2 { font-size: 29px; }
    .journey-art { height: 205px; }
    .journey-illustration { width: min(100%, 270px); max-height: 184px; }
    .journey-step-copy { padding-inline: 2px; }
    .storefront .journey-step-copy h3 { font-size: 21px; }
    .journey-step-copy p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .order-journey *, .order-journey *::before, .order-journey *::after { animation: none !important; transition: none !important; }
    .journey-order-click, .journey-route-dot { display: none; }
    .journey-check-stroke { stroke-dashoffset: 0; }
    .journey-route i::after { transform: scaleX(1); }
}