#how-it-works { scroll-margin-top: 85px; }
.journey { --journey-accent: #007f7a; }
.journey-layout { display: grid; gap: 1.5rem; align-items: center; }
.journey-visual { min-width: 0; overflow: hidden; padding: 1.15rem; background: #fff; border: 1px solid #cadfd5; border-radius: 24px; box-shadow: 0 12px 28px #132d350a; }
.journey-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.journey-counter { padding: .3rem .7rem; border-radius: 999px; background: #e0f0e8; color: #005e5a; font-size: .82rem; font-weight: 750; }
.journey-topnote { color: #50646a; font-size: .78rem; }
.journey-art { display: block; width: 100%; height: auto; margin: .3rem auto 0; }
.journey-scene[hidden], .journey-controls[hidden] { display: none; }
.journey-caption { min-height: 5.7rem; text-align: center; padding: 0 .3rem; }
.journey-caption h3 { margin: 0; font-size: 1.35rem; }
.journey-caption p { margin: .55rem auto 0; max-width: 34ch; color: #50646a; font-size: .95rem; }
.journey-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; }
.journey-controls button { min-height: 44px; padding: .55rem .85rem; color: #005e5a; background: #fff; border: 1px solid #a8c9bc; border-radius: 999px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.journey-controls [data-journey-play] { min-width: 85px; background: #007f7a; color: #fff; border-color: #007f7a; }
.journey-controls button:disabled { opacity: .45; cursor: default; }
.journey-controls button:focus-visible, .journey-step-button:focus-visible { outline: 3px solid #1762c4; outline-offset: 3px; }
.journey-steps { display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.journey-step-button { display: flex; align-items: flex-start; gap: .85rem; width: 100%; text-align: left; padding: 1rem; border: 2px solid transparent; border-radius: 16px; background: transparent; color: #132d35; font: inherit; cursor: pointer; }
.journey-step-button:hover { background: #ffffff8c; }
.journey-step-button[aria-current="step"] { background: #fff; border-color: #007f7a; box-shadow: 0 4px 12px #132d3508; }
.journey-step-number { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #d0e5db; color: #005e5a; font-weight: 800; line-height: 1; }
.journey-step-button[aria-current="step"] .journey-step-number { background: #007f7a; color: #fff; }
.journey-step-button strong { display: block; font-size: 1.02rem; line-height: 1.3; }
.journey-step-button > span > span { display: block; margin-top: .35rem; color: #50646a; font-size: .89rem; line-height: 1.5; }
.journey-boundary { margin: 1.5rem 0 0; max-width: 80ch; color: #50646a; font-size: .85rem; }
.journey-boundary a { color: #005e5a; }
.journey.is-enhanced .journey-scene:not([hidden]) .j-enter { animation: j-enter .8s ease-out both; }
.journey.is-enhanced .journey-scene:not([hidden]) .j-type { transform-box: fill-box; transform-origin: left top; animation: j-type .7s ease-in-out 4 both; }
.journey.is-enhanced .journey-scene:not([hidden]) .j-write,
.journey.is-enhanced .journey-scene:not([hidden]) .j-check { stroke-dasharray: 1; animation: j-draw 1s ease-out .4s both; }
.journey.is-enhanced .journey-scene:not([hidden]) .j-path { stroke-dasharray: 1; animation: j-draw 2.2s ease-in-out .4s both; }
.journey.is-enhanced .journey-scene:not([hidden]) .j-pop { transform-box: fill-box; transform-origin: center; animation: j-pop .7s ease-out .2s both; }
.journey.is-enhanced .journey-scene:not([hidden]) .j-delay { animation-delay: 1s; }
.journey.is-enhanced .journey-scene:not([hidden]) .j-late { animation-delay: 2s; }
.journey:not(.is-playing) .journey-art * { animation-play-state: paused !important; }
.journey.is-still .journey-art * { animation: none !important; }
@keyframes j-enter { from { transform: translateX(-25px); } to { transform: translateX(0); } }
@keyframes j-type { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes j-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes j-pop { from { transform: translateY(10px) scale(.85); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (min-width: 820px) { .journey-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; } .journey-visual { padding: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .journey .journey-art * { animation: none !important; } }