/* Option two: Figma journey, 680 × 538 reference canvas. */
.story .planning-journey{margin:40px 0 24px;container-type:inline-size;padding:0;background:transparent}
.journey-canvas{position:relative;width:100%;aspect-ratio:680/538;background:#000;border-radius:12px;overflow:hidden}
.journey-launch{position:absolute;left:15.61%;top:6.3%;transform:translateX(-50%);width:max-content;display:flex;flex-direction:column;gap:20px}
.journey-phone{position:relative;width:100%;aspect-ratio:407/844;background:#fff;border-radius:11.7936% / 5.6872%;overflow:hidden}
.journey-route{position:absolute;left:31.84%;top:18.96%;width:50.44%;height:63.85%;opacity:.8}
.journey-route img{display:block}
.journey-route{transform-origin:top left}
.journey-stops{list-style:none;margin:0;padding:0}
.journey-stop{position:absolute;left:var(--x);top:var(--y);width:var(--w);min-height:3.53%;display:flex;align-items:center;justify-content:center;border-radius:6px;--rest-bg:#171717;background:var(--rest-bg);color:#fff;font-size:1.324cqw;line-height:1.2;font-weight:500;padding:.59% 0;box-sizing:border-box}
.journey-stop:last-child{--rest-bg:#2e2e2e;background:var(--rest-bg);font-size:1.47cqw}
.journey-outcomes{position:absolute;left:63.82%;top:89.4%;display:flex;gap:1.76cqw}
.journey-outcomes a{background:white;color:#000;border-radius:6px;padding:.59cqw 1.18cqw;font-size:1.47cqw;line-height:1.2;text-decoration:none;white-space:nowrap}
.journey-outcomes a:focus-visible{outline:2px solid #8bd4ef;outline-offset:4px}
.planning-journey figcaption{display:flex;justify-content:center;margin-top:12px}
.journey-drawing{position:absolute;inset:0;pointer-events:none}
.planning-journey.is-playing .journey-stops:before{animation-play-state:running}
@keyframes journey-line{0%{clip-path:inset(0 0 100% 0);opacity:1}65%,97%{clip-path:inset(0);opacity:1}100%{clip-path:inset(0);opacity:0}}
@media(max-width:600px){
 .journey-canvas{aspect-ratio:auto;padding:24px;box-sizing:border-box}
 .journey-launch{position:relative;left:auto;top:auto;transform:none;margin:0 0 24px}
 .journey-route{display:none}
 .journey-stops{position:relative;display:flex;flex-direction:column;gap:20px;border-left:1px dashed #666;padding:0 0 0 20px;margin-left:16px}
 .journey-stop{position:relative;left:auto;top:auto;width:fit-content;min-height:32px;padding:8px 14px;font-size:12px!important;white-space:nowrap}
 .journey-stops:before{content:'';position:absolute;left:-1px;top:0;bottom:0;border-left:1px dashed #eee;animation:journey-line 20s linear infinite;animation-play-state:paused}
 .journey-stop:before{content:'';position:absolute;left:-21px;top:50%;width:20px;border-top:1px dashed #666}
 .journey-outcomes{position:static;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0 37px}
 .journey-outcomes a{font-size:12px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){.journey-drawing,.journey-stops:before{animation:none;display:none}.journey-toggle{display:none}}

@media(prefers-reduced-motion:reduce){.journey-stop,.journey-outcomes{opacity:1!important}}

/* Match the demos: 407 × 844 white frame, 375 × 812 screen, 48/32 radii. */
.journey-phone .journey-phone-screen{position:absolute;left:3.9312%;top:1.8957%;width:92.1376%;height:96.2085%;max-width:none;object-fit:cover;border-radius:8.5333% / 3.9409%;display:block}

/* Option two headings use the full story width on larger screens. */
@media(min-width:1000px){
 .planning-page .story h2.planning-wide-title{max-width:none}
 .planning-wide-title br{display:none}
 .planning-wide-title .planning-title-space{display:inline}
 .planning-commerce{row-gap:24px}
 .planning-commerce-copy{display:contents}
 .planning-commerce-heading{grid-column:1/-1}
 .planning-commerce-description{grid-column:1;grid-row:2}
 .planning-commerce>.launch-demo{grid-column:2;grid-row:2}
}

.journey-case-link{text-align:center;text-decoration:none;box-sizing:border-box}
.journey-case-link:focus-visible{outline:2px solid #8bd4ef;outline-offset:4px}
@media(max-width:600px){.journey-case-link{min-height:44px}}

@media(min-width:601px){.journey-stop:first-child{left:max(var(--x),calc(15.61% + 90px))}}

/* Vector navigation avoids resampling the tiny labels in the screenshot. */
.journey-phone-navigation{position:absolute;left:3.9312%;bottom:1.8957%;width:92.1376%;height:9.5%;display:flex;align-items:flex-start;background:#fff;border-top:1px solid #eee;box-sizing:border-box;border-radius:0 0 8% 8%;overflow:hidden}
.journey-phone-navigation img{display:block;width:20%;height:82%;object-fit:contain;max-width:none}

/* Center the mobile journey while retaining its connecting timeline. */
@media(max-width:600px){
 .journey-launch{margin:0 auto 24px}
 .journey-stops{width:max-content;max-width:100%;margin:0 auto;padding-left:0;border-left:0;align-items:center}
 .journey-stops:before{left:-20px}
 .journey-stop{width:100%;text-align:center}
 .journey-stop:before{left:-20px}
 .journey-outcomes{justify-content:center;margin:24px 0 0;gap:10px}
}

/* Mobile switchbacks; the desktop layout keeps its existing coordinates. */
.journey-mobile-flow{display:contents}.journey-mobile-route{display:none}
@media(max-width:600px){
 .journey-mobile-flow{display:block;position:relative;width:100%;aspect-ratio:340/456}
 .journey-mobile-route{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
 .journey-mobile-draw{stroke-dasharray:1;stroke-dashoffset:1}
 .journey-stops{position:absolute;inset:0;display:block;width:100%;max-width:none;margin:0;padding:0;border:0}
 .journey-stops:before,.journey-stop:before{display:none}
 .journey-stop{position:absolute;transform:translate(-50%,-50%);width:max-content;min-height:32px;padding:8px 12px;left:29.4118%;top:6.1404%;font-size:12px!important}
 .journey-stop:nth-child(1){left:50%;top:6.1404%}
 .journey-stop:nth-child(2){left:70.5882%;top:23.6842%}
 .journey-stop:nth-child(3){left:29.4118%;top:41.2281%}
 .journey-stop:nth-child(4){left:70.5882%;top:58.7719%}
 .journey-stop:nth-child(5){left:29.4118%;top:76.3158%}
 .journey-stop:nth-child(6){left:50%;top:93.8596%}
}
@media(prefers-reduced-motion:reduce){.journey-mobile-draw{stroke-dashoffset:0!important}}