.journey{--j-ink:#112c40;--j-muted:#536b7c;--j-accent:#006e68;margin:0;min-width:0;overflow:hidden;border:1px solid #cad9e2;border-radius:14px;background:#f9fcfd;color:var(--j-ink);box-shadow:0 22px 54px -30px #18374c55;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;isolation:isolate}.journey *{box-sizing:border-box}.journey button{font:inherit;cursor:pointer}.journey button:focus-visible{outline:3px solid #007e76;outline-offset:4px;position:relative;z-index:4}.journey [hidden]{display:none!important}.j-header{height:53px;display:flex;justify-content:space-between;align-items:center;padding:0 23px;background:#112c40;color:#e3f3fa;font-size:10px;font-weight:650;letter-spacing:1.5px;border-bottom:3px solid #4dd8b8}.j-header>span:first-child{display:flex;align-items:center;gap:9px}.j-header i{width:6px;height:6px;background:#83e5cb;border-radius:50%}.j-counter{font-size:11px;letter-spacing:1px;color:#bad0dd;font-variant-numeric:tabular-nums}.j-stage{height:386px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 63% 65%,#dfeef4 0,transparent 62%),#f4f8fb}.j-grid{position:absolute;inset:0;opacity:.38;background-image:linear-gradient(#d8e4ec 1px,transparent 1px),linear-gradient(90deg,#d8e4ec 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(transparent,#000 45%,transparent)}.j-scene-title{position:relative;z-index:2;padding:23px 23px 0;pointer-events:none}.j-scene-title>span{display:block;color:var(--j-accent);font-size:10px;font-weight:700;letter-spacing:1.1px;margin-bottom:7px}.journey .j-scene-title h2{font-family:inherit;font-size:23px;line-height:1.2;font-weight:700;letter-spacing:-.8px;margin:0}.journey .j-scene-title p{font-size:12px;line-height:1.6;color:var(--j-muted);margin:9px 0 0}.j-product{position:absolute;width:220px;height:271px;left:54%;top:91px;transform:translateX(-50%) rotate(-7deg);transform-origin:50% 70%;transition:transform .8s cubic-bezier(.2,.8,.25,1),opacity .55s;will-change:transform,opacity;z-index:1}.j-product svg{display:block;width:100%;height:100%;overflow:visible}.journey[data-step="0"] .j-product{animation:j-arrive .85s cubic-bezier(.2,.8,.25,1) both}.journey[data-step="1"] .j-product{transform:translateX(-50%) rotate(-1deg)}.journey[data-step="2"] .j-product{transform:translateX(calc(-50% + 105px)) translateY(-10px) rotate(17deg) scale(.9);opacity:.12}.j-shadow{position:absolute;left:31%;right:16%;bottom:29px;height:18px;border-radius:50%;background:#1a405226;filter:blur(12px);transition:opacity .6s,transform .8s}.journey[data-step="2"] .j-shadow{transform:translateX(60px);opacity:.15}.j-device-label{position:absolute;z-index:3;left:22px;bottom:22px;max-width:170px}.j-device-label span{display:block;color:#5d7586;font-size:9px;font-weight:700;letter-spacing:1.2px;margin-bottom:5px}.j-device-label strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.6px;line-height:1.2}.j-device-label small{display:block;font-size:10px;color:#5b7282;margin-top:6px}.j-event{position:absolute;z-index:4;right:18px;bottom:84px;width:174px;border:1px solid #d4e3e9;background:#fffffff5;border-radius:10px;padding:13px 13px 12px;box-shadow:0 12px 30px -17px #16384e55;transition:transform .6s,border-color .6s}.journey[data-step="1"] .j-event{transform:translateY(9px)}.journey[data-step="2"] .j-event{transform:translateY(15px);border-color:#9ed6c6}.j-event-top{display:flex;align-items:center;gap:8px}.j-event-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:#e3f4ed;color:#007365}.j-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.j-event-top>span:last-child{font-size:9px;font-weight:750;letter-spacing:.7px;color:#3d5d6c}.j-event>strong{display:block;margin-top:8px;font-size:22px;letter-spacing:-.6px;font-weight:700;line-height:1.2}.j-event>small{display:block;font-size:9px;color:#577181;letter-spacing:.2px;margin-top:5px}.j-success{position:absolute;z-index:2;left:50%;top:143px;width:190px;text-align:center;transform:translate(-50%,12px) scale(.94);opacity:0;transition:opacity .5s .1s,transform .65s .1s;pointer-events:none}.journey[data-step="2"] .j-success{opacity:1;transform:translate(-50%,0) scale(1)}.j-success-ring{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 12px;border-radius:50%;background:#deeee7;border:1px solid #93c9b7;box-shadow:0 0 0 9px #eaf6f080;color:#00715d}.j-success-ring .j-icon{width:33px;height:33px;stroke-width:1.7}.j-success strong{font-size:16px;font-weight:700;line-height:1.3;display:block}.j-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 23px;border-top:1px solid #d6e4eb;border-bottom:1px solid #d6e4eb;background:#fff}.j-summary>div{display:flex;flex-direction:column;gap:4px}.j-summary>div:last-child{text-align:right}.j-summary span{color:#577181;font-size:10px}.j-summary strong{font-weight:650;font-size:12px;line-height:1.3}.j-summary strong small{font-size:10px;font-weight:400}.j-summary [data-j-stock]{font-weight:750;color:#112c40;font-size:20px;margin-right:3px;font-variant-numeric:tabular-nums}.j-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-bottom:1px solid #d6e4eb}.j-steps li{min-width:0}.j-step{position:relative;overflow:hidden;width:100%;min-height:62px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 7px;border:0;border-right:1px solid #dce7ed;background:#f2f6f8;color:#5c7382;font-size:12px!important;font-weight:600!important}.j-steps li:last-child .j-step{border-right:0}.j-step>b{font-size:10px;font-weight:650;display:grid;place-items:center;width:23px;height:23px;border:1px solid #cbdce5;border-radius:50%;flex-shrink:0;font-variant-numeric:tabular-nums}.j-step[aria-current="step"]{color:#005e54;background:#eaf7f1}.j-step[aria-current="step"]>b{color:#fff;background:#006e60;border-color:#006e60}.j-step[aria-current="step"]:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#008774;transform:scaleX(0);transform-origin:left;animation:j-progress 4s linear both;animation-play-state:paused}.journey[data-playing="true"] .j-step[aria-current="step"]:after{animation-play-state:running}.j-step:hover:not(:disabled){background:#e0eee9}.j-step:disabled{cursor:default}.journey figcaption{margin:0;padding:16px 20px;display:flex;gap:14px;align-items:center;justify-content:space-between;font-size:10px;line-height:1.6;font-weight:600;background:#fbfdfe;color:#3c5769}.journey figcaption small{font-size:9px;font-weight:400;display:block;margin-top:3px;line-height:1.5;color:#637b8a}.j-play{display:flex;align-items:center;gap:6px;border:1px solid #cddce4;border-radius:6px;color:#214c5d;background:#fff;min-height:44px;padding:8px 10px;font-size:10px!important;font-weight:650;flex-shrink:0}.j-play:hover{background:#edf6f4}.j-play .j-icon{width:14px;height:14px}.j-play [data-play-icon]{display:none}.journey[data-paused="true"] .j-play [data-play-icon]{display:block}.journey[data-paused="true"] .j-play [data-pause-icon]{display:none}.j-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.journey[data-ready="true"][data-playing="false"] .j-product{animation-play-state:paused}
@keyframes j-arrive{from{opacity:0;transform:translateX(calc(-50% - 65px)) translateY(16px) rotate(-16deg)}to{opacity:1;transform:translateX(-50%) rotate(-7deg)}}@keyframes j-progress{to{transform:scaleX(1)}}
@media(min-width:621px) and (max-width:1000px){.hero:has(.journey){grid-template-columns:1fr;gap:36px}.hero:has(.journey) .hero-copy{max-width:650px}.journey{max-width:620px;width:100%}.j-stage{height:395px}.j-product{left:57%;width:235px;height:289px;top:85px}.j-event{right:28px;bottom:83px;width:190px}.j-device-label{left:28px;bottom:28px}.j-scene-title{padding:24px 28px 0}.j-summary{padding-inline:28px}}
@media(max-width:620px){.journey{width:100%;max-width:540px;border-radius:12px}.j-header{padding-inline:18px;font-size:9px;letter-spacing:1.1px;height:49px}.j-stage{height:371px}.j-scene-title{padding:19px 18px 0}.journey .j-scene-title h2{font-size:21px}.journey .j-scene-title p{font-size:11px;margin-top:7px}.j-product{width:205px;height:253px;left:52%;top:98px}.j-device-label{left:17px;bottom:19px;max-width:150px}.j-device-label strong{font-size:20px}.j-device-label small{font-size:9px}.j-event{right:13px;bottom:84px;width:150px;padding:11px}.j-event>strong{font-size:20px}.j-event>small{font-size:8px}.j-event-top>span:last-child{font-size:8px}.j-success{top:151px;width:170px;left:46%}.j-success-ring{width:59px;height:59px}.j-success strong{font-size:14px}.j-summary{padding:13px 17px;gap:8px}.j-summary strong{font-size:11px}.j-summary span{font-size:9px}.j-summary [data-j-stock]{font-size:19px}.j-step{font-size:11px!important;gap:6px;min-height:60px}.j-step>b{width:21px;height:21px;font-size:9px}.journey figcaption{padding:13px 14px;gap:10px;font-size:10px}.journey figcaption small{font-size:9px}.j-play{font-size:9px!important;padding-inline:8px;gap:5px}.j-play .j-icon{width:12px;height:12px}}
@media(max-width:360px){.j-device-label strong{font-size:18px}.j-stage{height:369px}.j-product{left:47%;width:195px;height:241px;top:106px}.j-event{width:140px;right:11px}.j-header{letter-spacing:.6px}.j-scene-title h2{font-size:20px!important}.j-summary{flex-wrap:wrap}.j-summary>div:nth-child(2){display:none}.journey figcaption{flex-wrap:wrap}.j-play{margin-left:auto}.j-step{gap:5px;font-size:10px!important}}
@media(prefers-reduced-motion:reduce){.journey *,.journey *:before,.journey *:after{animation:none!important;transition:none!important}.journey[data-step="0"] .j-product{opacity:1}.j-step[aria-current="step"]:after{transform:scaleX(1)}}
.j-event-top>span:last-child{font-size:10px}.j-event>small{font-size:10px}.j-device-label small{font-size:11px;color:#526b7b}.j-device-label span{color:#526b7b}.j-summary span{font-size:10px}.journey figcaption{font-size:11px}.journey figcaption small{font-size:10px;color:#526b7b}.j-play{font-size:11px!important}.journey .j-scene-title p{font-size:12px}

.j-success{left:44%}
@media(max-width:620px){.j-product{width:172px;height:213px;left:57%;top:110px}
.j-device-label{max-width:132px}
.j-event{bottom:22px}
.journey[data-step="1"] .j-event,.journey[data-step="2"] .j-event{transform:none}
.j-success{left:31%;width:150px;top:150px}
}
@media(max-width:360px){.j-product{width:160px;height:198px;left:58%;top:118px}
.j-device-label{max-width:120px}
.j-success{left:30%;width:140px}
}