#how-it-works{scroll-margin-top:24px}
.support-journey{margin:28px 0 36px;padding:28px;border:1px solid #dbe5de;border-radius:18px;background:#fff;color:#27493e}
.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.journey-heading p{margin:0;font-size:14px;color:#526b60}
.journey-toggle{min-height:44px;padding:10px 15px;background:#f0f6f2;color:#245c47;border:1px solid #c9dcd0;border-radius:8px;font:inherit;cursor:pointer;white-space:nowrap}
.journey-toggle[hidden]{display:none}
.journey-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;margin:0 0 26px}
.journey-steps li{position:relative;padding-top:2px}
.journey-number{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border:1px solid #c6d7cc;border-radius:50%;background:#f2f7f3;color:#456652;font-size:12px;font-weight:700;transition:background .35s,color .35s,box-shadow .35s}
.journey-steps li:not(:last-child)::after{content:"";position:absolute;left:50px;right:-16px;top:23px;height:2px;background:#dce7df}
.journey-steps li.is-complete::after{background:#39856b}
.journey-steps h3{font-size:15px;margin:17px 0 8px;line-height:1.4;color:#27493e}
.journey-steps p{font-size:13px;color:#5e7167;line-height:1.65;margin:0}
.journey-steps .is-active .journey-number{background:#176b57;color:#fff;border-color:#176b57;box-shadow:0 0 0 6px #e9f3ed}
.journey-steps .is-complete .journey-number{background:#dcefe3;color:#24583d}
.support-journey.is-playing .is-active:not(:last-child)::after{background:linear-gradient(90deg,#39856b 50%,#dce7df 50%);background-size:200% 100%;animation:journey-connector 4.5s linear both}
.journey-example{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#f5f9f6;border:1px solid #dce7df;border-radius:12px;padding:22px}
.journey-example-label{font-size:10px;font-weight:700;letter-spacing:1px;color:#526d5b}
.journey-example h3{font-size:17px;margin:7px 0;color:#27493e}
.journey-message{margin:0;font-size:13px;line-height:1.6;color:#526b60;min-height:42px;max-width:650px}
.journey-state{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.journey-status{padding:6px 12px;background:#dcefe3;color:#24583d;border-radius:20px;font-size:12px;font-weight:700}
.journey-counter{font-size:11px;color:#5e7167}
@keyframes journey-connector{from{background-position:100% 0}to{background-position:0 0}}
@media(max-width:700px){.support-journey{padding:20px}.journey-heading{align-items:flex-start;flex-direction:column;gap:12px}.journey-steps{grid-template-columns:1fr;gap:22px}.journey-steps li{padding-left:58px;min-height:90px}.journey-number{position:absolute;left:0;top:2px}.journey-steps h3{margin:0 0 7px}.journey-steps li:not(:last-child)::after{left:20px;top:50px;bottom:-14px;right:auto;width:2px;height:auto}.support-journey.is-playing .is-active:not(:last-child)::after{animation:none;background:#39856b}.journey-example{align-items:flex-start;flex-direction:column;gap:14px}.journey-state{align-items:center;flex-direction:row}.journey-message{min-height:0}}
@media(prefers-reduced-motion:reduce){.support-journey *{animation:none!important;transition:none!important}}