.device{width:238px;aspect-ratio:9/19.5;position:relative;z-index:2;filter:drop-shadow(10px 24px 20px #10332122);flex-shrink:0}
.device>.phone{width:100%;height:100%;padding:7px;display:flex;flex-direction:column;background:linear-gradient(115deg,#717c75 0%,#18221c 3%,#121a16 49%,#57675c 98%,#9caaa0 100%);border:1px solid #56685c;border-radius:38px;box-shadow:inset 0 0 0 2px #151c17,0 0 0 1px #15241c70;overflow:hidden}
.device .phone-top{border-radius:28px 28px 0 0;height:34px;min-height:34px;padding-inline:13px;font-size:9px;line-height:1;background:#f8faf9;color:#112018;overflow:hidden}
.device .phone-island{width:61px;height:17px;top:7px;background:#101511;box-shadow:inset 0 1px 1px #ffffff22}
.device .phone-island:after{content:'';position:absolute;width:5px;height:5px;right:7px;top:6px;border-radius:50%;background:#132734;box-shadow:0 0 1px #436475}
.device .phone-screen{flex:1;overflow:hidden;min-height:0;background:#f8faf9}
.device .phone-screen img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0;aspect-ratio:auto;display:block}
.device .phone-bottom{height:21px;min-height:21px;border-radius:0 0 28px 28px;display:grid;place-items:center;background:#f8faf9}
.device .phone-bottom span{width:34%;height:3px;border-radius:5px;background:#18251f;opacity:.8}
.device-buttons{position:absolute;width:3px;height:47px;right:-2px;top:24%;background:linear-gradient(90deg,#14231a,#88988b);border-radius:0 3px 3px 0}
.device-buttons:before,.device-buttons:after{content:'';position:absolute;width:3px;height:30px;left:calc(-238px + 2px);background:linear-gradient(90deg,#849789,#17261d);border-radius:3px 0 0 3px}
.device-buttons:before{top:-25px}.device-buttons:after{top:16px}
.device.hero-phone{width:254px;transform:rotate(5deg);border:0;border-radius:0}
.hero-phone .device-buttons:before,.hero-phone .device-buttons:after{left:calc(-254px + 2px)}
.journey-device{width:222px;margin-inline:auto;max-width:94%}
.journey-device .device-buttons:before,.journey-device .device-buttons:after{left:calc(-222px + 2px)}
.journey-device.planning-image{transform:rotate(-3deg)}.journey-device.stats-image{transform:rotate(3deg)}
@media(max-width:1100px){.journey-device{width:205px}.journey-device .device-buttons:before,.journey-device .device-buttons:after{left:calc(-205px + 2px)}}
@media(max-width:850px){.device.hero-phone{width:222px}.hero-phone .device-buttons:before,.hero-phone .device-buttons:after{left:calc(-222px + 2px)}.journey-device{width:190px}.journey-device .device-buttons:before,.journey-device .device-buttons:after{left:calc(-190px + 2px)}.device>.phone{border-radius:32px;padding:6px}.device .phone-top{border-radius:24px 24px 0 0;height:29px;min-height:29px;font-size:8px}.device .phone-island{width:53px;height:15px;top:6px}.device .phone-island:after{top:5px}.device .phone-bottom{border-radius:0 0 24px 24px}}
@media(max-width:640px){.device.hero-phone{width:206px}.hero-phone .device-buttons:before,.hero-phone .device-buttons:after{left:calc(-206px + 2px)}.journey-device{width:188px;max-width:88%;height:auto;aspect-ratio:9/19.5}.journey-device .device-buttons:before,.journey-device .device-buttons:after{left:calc(-188px + 2px)}.journey-device.planning-image,.journey-device.stats-image{transform:none}.device .phone-top{font-size:7px}.device .phone-bottom{height:17px;min-height:17px}.journey-track{padding-top:4px}.step-copy{margin-top:24px}}
@media(max-width:360px){.device.hero-phone{width:188px}.hero-phone .device-buttons:before,.hero-phone .device-buttons:after{left:calc(-188px + 2px)}}