
.journey{--surface:radial-gradient(ellipse 130% 100% at 25% -22%,#dce4eb44,transparent 70%),linear-gradient(125deg,#4b555d,#343e46 60%,#252e35);color:#edf1f3}.journey ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.journey li{position:relative;min-width:0}.journey h3{font-size:18px;line-height:1.3;font-weight:400;letter-spacing:-.03em;margin:14px 0 10px;color:#edf1f3}.journey p{font-size:13px;line-height:1.6;margin:0;color:#dce5ea;max-width:285px}.step-number{color:#a8cfd4;font-size:10px;letter-spacing:.08em}.journey-1 ol{gap:42px}.journey-1 li{padding:24px 26px;background:var(--surface);border:1px solid #b2c0c444;border-radius:6px}.journey-1 li:not(:last-child)::after{content:"→";position:absolute;right:-33px;top:50%;transform:translateY(-50%);font:24px Arial;color:#667d89}
.journey-2{background:var(--surface);border-radius:6px;padding:20px 0}.journey-2 li{padding:7px 35px 10px}.journey-2 li:not(:last-child)::after{content:"";position:absolute;top:14%;right:-2px;width:22px;height:72%;border-right:1px solid #a8bdc45c;border-top:1px solid #a8bdc45c;transform:skewX(15deg)}.journey-2 h3{font-size:19px;margin-top:10px}
.journey-3{background:var(--surface);border-radius:6px;padding:28px}.journey-3 ol{gap:32px}.journey-3 li{border-top:2px solid #84b8bf77;padding-top:15px}.journey-3 .step-number{font-size:20px;letter-spacing:-.03em;color:#a8cfd4}.journey-3 h3{margin-top:18px}
.journey-4{background:var(--surface);border-radius:6px;padding:28px}.journey-4 li{text-align:center;padding:0 22px}.step-circle{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border:1px solid #92c0c8;border-radius:50%;margin:0 auto 20px;background:#46545e;color:#c1e0e4;font-size:12px}.journey-4 li:not(:last-child)::before{content:"";position:absolute;left:calc(50% + 23px);right:calc(-50% + 23px);top:23px;height:1px;background:#9ab1bb66}.journey-4 li:not(:last-child)::after{content:"›";position:absolute;right:-4px;top:12px;color:#aac4cc;font:20px Arial}.journey-4 h3{margin:0 0 10px}.journey-4 p{margin:auto}
@media(max-width:750px){.journey ol{grid-template-columns:1fr}.journey h3{font-size:17px}.journey-1 ol{gap:32px}.journey-1 li{padding:22px}.journey-1 li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-28px;transform:rotate(90deg);font-size:22px}.journey-2{padding:0 22px}.journey-2 li{padding:22px 0}.journey-2 li:not(:last-child)::after{top:auto;bottom:-2px;left:8%;right:auto;width:84%;height:12px;border-top:0;border-bottom:1px solid #a8bdc45c;border-right:1px solid #a8bdc45c;transform:skewY(3deg)}.journey-3{padding:22px}.journey-3 ol{gap:24px}.journey-4{padding:25px 22px}.journey-4 ol{gap:32px}.journey-4 li{display:grid;grid-template-columns:46px 1fr;gap:18px;text-align:left;padding:0}.journey-4 .step-circle{margin:0}.journey-4 li:not(:last-child)::before{top:46px;left:23px;right:auto;width:1px;height:calc(100% - 14px)}.journey-4 li:not(:last-child)::after{display:none}.journey-4 p{margin:0}}
/* Small chevrons read clearly as forward steps without competing with the copy. */
@media(min-width:751px){.journey-2 li:not(:last-child)::after{top:50%;right:-5px;width:10px;height:10px;transform:translateY(-50%) rotate(45deg)}}
@media(max-width:750px){.journey-2 li:not(:last-child)::after{top:auto;bottom:-5px;left:calc(50% - 5px);width:10px;height:10px;transform:rotate(45deg)}}
