@font-face{font-family:Geist;src:url('assets/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:light;--paper:#f5f2e9;--ink:#20231f;--muted:#6d756d;--line:#deded5;--coral:#f04f3c;--sage:#688971;--skeleton:#e0e3da}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--paper);color:var(--ink);font-family:Geist,Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,p,ol{margin:0}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #a33124;outline-offset:5px}button[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.journey{max-width:1536px;margin:auto;padding:32px 28px 24px 6px}.journey-grid{display:grid;grid-template-columns:32% 68%;align-items:center}.journey-copy{position:relative;z-index:2;padding:20px 15px 45px 0}.journey-copy h1{font-size:clamp(42px,4.5vw,68px);line-height:1.065;letter-spacing:-.055em;font-weight:650}.journey-copy h1 span{color:var(--coral)}.journey-intro{font-size:clamp(17px,1.5vw,22px);line-height:1.5;letter-spacing:-.025em;color:var(--muted);max-width:26ch;margin-top:28px}
.journey-map{position:relative;min-width:0}.map-surface{position:relative;width:100%;aspect-ratio:1000/900;isolation:isolate}.route-drawing{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.customer-route{filter:url(#hand-drawn);stroke:var(--coral);stroke-width:2.6}.route-echo{filter:url(#hand-drawn);stroke:var(--coral);stroke-width:1;opacity:.24}.entry-route{stroke:#b8c1b6;stroke-width:2;stroke-dasharray:3 5}.route-arrows{filter:url(#hand-drawn);stroke:var(--coral);stroke-width:2.2}
.icon{display:inline-block;flex:none;width:23px;height:23px;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat}.icon-users{--icon:url('../redesign/icons/users.svg')}.icon-settings{--icon:url('../redesign/icons/settings.svg')}.icon-flag{--icon:url('../redesign/icons/flag.svg')}.icon-tour{--icon:url('../redesign/icons/tour.svg')}.icon-message{--icon:url('../redesign/icons/mail.svg')}.icon-announcement{--icon:url('../redesign/icons/changelog.svg')}.icon-check{--icon:url('../redesign/icons/check.svg')}.icon-arrow{--icon:url('../redesign/icons/arrow.svg')}
.station{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-29px);padding:0;border:0;background:transparent;white-space:nowrap;text-align:center;cursor:default}.station-symbol{display:grid;place-items:center;width:58px;height:58px;border:1px solid #f5b6a3;border-radius:50%;background:#fbe7dc;color:var(--coral);box-shadow:0 0 0 7px var(--paper);transition:background .25s,box-shadow .25s,color .25s,transform .25s}.station-symbol .icon{width:27px;height:27px}.station strong{font-size:clamp(13px,1.25vw,18px);line-height:1.35;letter-spacing:-.025em;font-weight:600;margin-top:11px;background:var(--paper);padding-inline:3px}.station>span:last-child{font-size:clamp(11px,1.05vw,15px);line-height:1.4;color:var(--muted);margin-top:4px;background:var(--paper);padding-inline:3px}.station.is-active .station-symbol{background:var(--coral);color:#fff;transform:scale(1.06);border-color:var(--coral);box-shadow:0 0 0 7px var(--paper),0 0 0 8px #f04f3c40}.station-welcome{left:25%;top:27.222%}.station-setup{left:77%;top:27.222%}.station-value{left:95%;top:56.666%}.station-discover{left:53.5%;top:87.222%}.station-feedback{left:11.5%;top:67.777%}
.station-value strong,.station-value>span:last-child{position:absolute;right:74px;margin:0}.station-value strong{top:8px}.station-value>span:last-child{top:34px}.station-feedback strong,.station-feedback>span:last-child{position:absolute;left:74px;margin:0}.station-feedback strong{top:8px}.station-feedback>span:last-child{top:34px}
.portrait{display:block;flex:none;border-radius:50%;background-image:url('assets/customer-portraits.webp');background-repeat:no-repeat;background-size:200% 200%;border:3px solid #fffaf3;box-shadow:0 2px 6px #20231f15}.portrait-a{background-position:0 0}.portrait-b{background-position:100% 0}.portrait-c{background-position:0 100%}.portrait-d{background-position:100% 100%}.arrival-visitors{position:absolute;left:-1%;top:19.8%;display:flex;gap:6px;align-items:center;transform:rotate(13deg);z-index:2}.arrival-visitors .portrait{width:34px;height:34px;transform:rotate(-13deg)}.arrival-visitors .portrait:nth-child(2){margin-top:13px}.arrival-visitors .portrait:nth-child(3){margin-top:20px}.traveler{position:absolute;left:0;top:0;width:37px;height:37px;z-index:4;will-change:transform;box-shadow:0 0 0 4px var(--paper),0 0 0 5px #f8cbbb,0 3px 8px #20231f10}.traveler:nth-child(1){transform:translate(51vw,18vw)}.traveler:nth-child(2){transform:translate(55vw,36vw)}.traveler:nth-child(3){transform:translate(22vw,44vw)}
.example{position:absolute;display:block;text-align:left;background:#fffefa;border:1px solid #deded6;border-radius:10px;box-shadow:0 8px 23px -15px #42372538;padding:20px;z-index:5;transition:border-color .25s,box-shadow .25s,transform .25s}.example.is-active{border-color:#e9a78f;box-shadow:0 5px 25px -12px #b1523d40;transform:translateY(-3px)}.skeleton-content{display:flex;flex-direction:column;gap:11px;width:100%;min-width:0}.skeleton{display:block;width:var(--line,100%);max-width:100%;height:7px;border-radius:5px;background:var(--skeleton);flex:none}.skeleton-heading{height:11px;background:#bdc6b9;margin-bottom:8px}.skeleton-cta{display:flex;align-items:center;justify-content:center;position:relative;background:var(--coral);height:33px;margin-top:5px;border-radius:5px}.skeleton-cta>span{width:35%;height:5px;border-radius:3px;background:#ffffffb3}.skeleton-cta .icon{position:absolute;right:12px;width:14px;height:14px;color:#ffdfd4}.skeleton-task{display:flex;align-items:center;gap:10px;min-height:20px}.skeleton-task .icon{color:var(--sage);width:18px;height:18px}.skeleton-task>.skeleton{flex-shrink:1}.skeleton-task-next{background:#faeee5;padding:7px 6px;margin:0 -6px -4px;border-radius:4px}.skeleton-task-next>.icon{color:#b3b7a8;margin-left:auto;width:13px}.task-empty{border:1.5px solid #c4c7bc;border-radius:50%;width:16px;height:16px;flex:none}.example-welcome{left:4%;top:3%;width:31%}.example-checklist{right:0;top:3%;width:29%}.example-welcome:after,.example-checklist:after{content:"";position:absolute;top:100%;height:40px;width:1px;background:#b7b9ad;transform-origin:top;transform:rotate(-25deg);left:60%;pointer-events:none}.example-checklist:after{left:27%;transform:rotate(25deg);height:29px}.example-update{left:66%;top:87%;width:34%;display:flex;gap:13px;padding:19px 17px}.update-symbol{display:grid;place-items:center;background:#fff0e8;color:var(--coral);width:35px;height:35px;border-radius:50%;flex:none}.update-symbol .icon{width:20px;height:20px}.skeleton-link{background:#efb5a3;height:5px;margin-top:4px}.example-survey{left:0;top:86.5%;width:28%;padding:19px}.skeleton-answers{display:flex;gap:7px;margin-top:4px}.skeleton-answers>span{height:27px;flex:1;border-radius:5px;background:#e7ede0}.skeleton-answers>span:last-child{background:#f6e6dc}
.workspace-example{position:absolute;left:28%;top:44%;width:49%;border:1px solid #dedfd5;border-radius:10px;background:#fffefa;box-shadow:0 9px 30px -20px #4237253d;z-index:1}.workspace-top{height:36px;display:flex;align-items:center;gap:18px;padding:0 13px;border-bottom:1px solid #eeeee6}.workspace-top>.skeleton{height:5px;background:#dde1d6}.workspace-top .portrait{width:20px;height:20px;margin-left:auto;border-width:1px}.workspace-body{display:grid;grid-template-columns:18% 1fr;min-height:204px}.workspace-sidebar{display:flex;flex-direction:column;gap:16px;padding:22px 10px;background:#f9f9f2;border-right:1px solid #eeeee6;border-radius:0 0 0 10px}.workspace-sidebar span{height:5px;width:85%;background:#dedfd6;border-radius:3px}.workspace-sidebar .sidebar-selected{height:19px;width:100%;background:#f7e4d8;position:relative}.sidebar-selected:before{content:"";position:absolute;left:0;top:3px;width:3px;height:13px;background:var(--coral);border-radius:3px}.workspace-project{padding:24px 18px}.workspace-project>.skeleton-heading{margin-bottom:20px}.project-heading{display:flex;align-items:center;gap:9px;padding-bottom:15px;border-bottom:1px solid #eeeee6}.project-symbol{width:26px;height:26px;background:#fff0e4;border-radius:5px;display:grid;place-items:center;color:var(--coral);flex:none}.project-symbol .icon{width:17px;height:17px}.team-portraits{display:flex;margin-left:auto}.team-portraits .portrait{width:24px;height:24px;border-width:2px;margin-left:-7px}.project-tasks{padding-top:13px;display:grid;gap:11px}.project-tasks .skeleton-task{gap:10px;min-height:18px}.project-tasks .skeleton{height:6px}.project-tasks .icon{width:15px;height:15px}.context-tip{position:absolute;top:0;right:-4%;transform:translateY(-50%);width:43%;min-width:120px;display:flex;flex-direction:column;gap:8px;background:var(--coral);border:2px solid #fffefa;border-radius:8px;padding:15px 17px;box-shadow:0 4px 13px #f04f3c22;transition:opacity .2s}.context-tip .skeleton{height:5px;background:#ffffffb0}.context-tip:after{content:"";position:absolute;left:50%;top:100%;border:7px solid transparent;border-top-color:var(--coral)}.journey[data-stage="0"] .context-tip,.journey[data-stage="1"] .context-tip{opacity:0}.journey[data-stage="0"] .project-tasks,.journey[data-stage="0"] .team-portraits{opacity:.3}.journey[data-stage="1"] .project-tasks>.skeleton-task:last-child>.icon{opacity:.2}
.stage-detail{display:none}
@media(max-width:1150px) and (min-width:721px){.journey-grid{grid-template-columns:30% 70%}.journey-copy h1{font-size:clamp(34px,4.3vw,49px)}.journey-intro{font-size:17px;margin-top:23px}.example{padding:16px}.station-symbol{width:48px;height:48px}.station{transform:translate(-50%,-24px)}.station-symbol .icon{width:23px;height:23px}.station strong{font-size:13px;margin-top:8px}.station>span:last-child{font-size:11px}.station-value strong,.station-feedback strong{top:4px;margin:0}.station-value>span:last-child,.station-feedback>span:last-child{top:27px;margin:0}.station-value strong,.station-value>span:last-child{right:59px}.station-feedback strong,.station-feedback>span:last-child{left:59px}.workspace-body{min-height:176px}.workspace-project{padding:20px 13px}.workspace-sidebar{padding:17px 7px}.project-tasks{gap:8px}.team-portraits .portrait{width:20px;height:20px}.context-tip{min-width:102px;padding:12px}}
@media(min-width:721px) and (max-width:1050px){.journey-grid{grid-template-columns:1fr}.journey-copy{display:block;padding:0 0 34px}.journey-copy h1{font-size:48px;max-width:14ch}.journey-copy .desktop-break{display:none}.journey-intro{font-size:18px;margin-top:20px}.map-surface{max-width:900px;margin-inline:auto}}
@media(max-width:720px){.journey{padding:18px 8px 20px}.journey-grid{grid-template-columns:1fr}.journey-copy{padding:0}.journey-copy h1{font-size:clamp(37px,7.7vw,52px);line-height:1.06;max-width:15ch}.desktop-break{display:none}.journey-intro{font-size:17px;max-width:30ch;margin-top:18px}.journey-map{margin-inline:8px}.map-surface{margin-top:29px;aspect-ratio:1000/900}.example{display:none}.arrival-visitors{left:0;top:16%}.arrival-visitors .portrait{width:24px;height:24px;border-width:2px}.traveler{width:27px;height:27px;border-width:2px}.station{transform:translate(-50%,-19px)}.station-symbol{width:38px;height:38px;box-shadow:0 0 0 5px var(--paper)}.station-symbol .icon{width:19px;height:19px}.station.is-active .station-symbol{box-shadow:0 0 0 5px var(--paper),0 0 0 6px #f04f3c45}.station strong{font-size:11px;margin-top:7px;max-width:80px;white-space:normal;line-height:1.25}.station>span:last-child,.station-value strong,.station-feedback strong{display:none}.workspace-example{left:26%;top:45%;width:49%;border-radius:7px}.workspace-top{height:24px;padding:0 8px;gap:8px}.workspace-top>.skeleton:first-child{max-width:34px}.workspace-top>.skeleton:nth-child(2){max-width:18px}.workspace-top .portrait{width:16px;height:16px}.workspace-body{grid-template-columns:14% 1fr;min-height:114px}.workspace-sidebar{padding:14px 4px;gap:11px}.workspace-sidebar span{height:3px}.workspace-sidebar .sidebar-selected{height:12px}.sidebar-selected:before{height:7px;top:2px;width:2px}.workspace-project{padding:14px 10px}.workspace-project>.skeleton-heading{height:6px;margin-bottom:13px}.project-heading{padding-bottom:9px;gap:5px}.project-heading>.skeleton{height:4px;max-width:27px}.project-symbol{width:18px;height:18px}.project-symbol .icon{width:12px;height:12px}.team-portraits .portrait{width:16px;height:16px;border-width:1px;margin-left:-6px}.project-tasks{padding-top:10px;gap:8px}.project-tasks .icon{width:11px;height:11px}.project-tasks .skeleton-task{gap:5px;min-height:11px}.project-tasks .skeleton{height:4px}.context-tip{width:55%;min-width:83px;gap:5px;padding:10px;right:-5%}.context-tip .skeleton{height:3px}.context-tip:after{border-width:5px}.stage-detail{display:block;text-align:center;color:var(--muted);font-size:13px;margin-top:16px;min-height:20px}.route-arrows{stroke-width:3}.customer-route{stroke-width:3}.route-echo{stroke-width:1.3}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}.traveler{will-change:auto}}

@media(max-width:720px){.workspace-example{top:42%}.workspace-body{min-height:88px}.workspace-project{padding:12px 9px}.workspace-project>.skeleton-heading{margin-bottom:10px}.project-heading{padding-bottom:8px}.project-heading>.skeleton{max-width:20px}.project-tasks{padding-top:8px;gap:6px}.project-tasks .skeleton-task{min-height:9px}.project-tasks .skeleton-task:last-child{display:none}}

.station.is-active strong{color:#b5402d}.workspace-example.is-active{border-color:#e9a78f;box-shadow:0 5px 25px -12px #b1523d40}.example.is-active .skeleton-heading{background:#e8aa94}
