/* An open three-part journey, scoped to the Clario24+ explanation. */
#system.journey-section{background:#f5f8fd;padding-block:56px 48px;overflow:clip}
#system .scope-heading{max-width:900px;margin-bottom:38px}
#system .scope-heading h2{font-size:clamp(30px,3.2vw,44px);line-height:1.14}
#system .journey-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
#system .journey-step{min-width:0;--journey-start:0s}
#system .journey-step:nth-child(2){--journey-start:.14s}
#system .journey-step:nth-child(3){--journey-start:.28s}
#system .journey-way{position:relative;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:#164bd8;padding-bottom:22px;margin-bottom:12px}
#system .journey-way::before,#system .journey-way::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(100% + 36px);background:#d6e1f5;transform-origin:left}
#system .journey-way::after{background:#164bd8;transform:scaleX(1)}
#system .journey-step:last-child .journey-way::before,#system .journey-step:last-child .journey-way::after{width:100%}
#system .journey-number{display:grid;place-items:center;width:34px;height:34px;border:1px solid #164bd8;border-radius:50%;font-size:14px;background:#164bd8;color:white;flex-shrink:0}
#system .journey-visual{position:relative;height:372px;margin:0 0 22px;isolation:isolate}
#system .journey-visual figcaption{position:absolute;bottom:0;left:0;right:0;font-size:12px;line-height:1.5;color:#526580;text-align:center}
#system .journey-visual figcaption a{color:#164bd8;text-underline-offset:3px}
#system .journey-social{position:absolute;top:18px;left:4%;width:88%;max-width:320px;background:white;border:1px solid #d8e2f1;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px #10264c0d;transform:rotate(-3deg)}
#system .journey-social-head{display:flex;align-items:center;gap:9px;padding:11px 12px}
#system .journey-social-head img{border-radius:50%;object-fit:cover;background:#05080b}
#system .journey-social-head div{min-width:0;display:grid;gap:3px}
#system .journey-social-head strong{font-size:14px;font-weight:700;color:#10264c}
#system .journey-social-head span{font-size:12px;color:#526580}
#system .journey-worksite{display:block;width:100%;height:156px;object-fit:cover;object-position:50% 62%}
#system .journey-social-copy{padding:12px;display:grid;gap:5px}
#system .journey-social-copy strong{font-size:14px;line-height:1.35;color:#10264c}
#system .journey-social-copy>span{font-size:12px;line-height:1.4;color:#526580}
#system .journey-local{position:absolute;bottom:32px;right:0;max-width:96%;padding:12px 15px;display:flex;align-items:center;gap:10px;background:white;border:1px solid #d8e2f1;border-radius:12px;box-shadow:0 8px 24px #10264c12}
#system .journey-local-mark{color:#bb4200;font-size:24px;line-height:1}
#system .journey-local div{display:grid;gap:4px}
#system .journey-local strong{font-size:15px;color:#10264c}
#system .journey-local div>span{font-size:12px;color:#526580}
#system .journey-phone{display:block;position:absolute;top:8px;left:calc(50% - 104px);width:168px;border:5px solid #10264c;border-radius:23px;background:#10264c;overflow:hidden;box-shadow:0 16px 30px #10264c1a;transform:rotate(3deg);line-height:0}
#system .journey-phone img{display:block;width:100%;height:auto;aspect-ratio:1/2;object-fit:cover}
#system .journey-contact-detail{position:absolute;right:0;bottom:44px;background:#fff;border-left:3px solid #ff6000;padding:13px 15px;border-radius:4px 12px 12px 4px;box-shadow:0 10px 25px #10264c14;transform:rotate(-3deg);max-width:85%}
#system .journey-contact-detail>span{display:block;font-size:12px;color:#526580;margin-bottom:5px}
#system .journey-contact-detail strong{font-size:16px;line-height:1.4;color:#10264c}
#system .journey-contact-detail strong span{color:#164bd8}
#system .journey-record{position:absolute;top:20px;left:0;right:0;padding:22px 20px;background:#10264c;color:#fff;border-radius:16px;box-shadow:0 12px 30px #10264c12;transform:rotate(1deg)}
#system .journey-record-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:18px;border-bottom:1px solid #ffffff25}
#system .journey-record-head>div{display:grid;gap:8px}
#system .journey-record-head span{font-size:12px;letter-spacing:.05em;color:#b7ceff}
#system .journey-record-head strong{font-size:21px;line-height:1.3}
#system .journey-record-head img{flex-shrink:0}
#system .journey-statuses{list-style:none;padding:18px 0 0;margin:0}
#system .journey-statuses li{position:relative;display:flex;align-items:flex-start;gap:11px;margin:0;padding-bottom:17px}
#system .journey-statuses li:not(:last-child)::after{content:"";position:absolute;left:12px;top:25px;width:1px;height:calc(100% - 25px);background:#789ef0}
#system .journey-check{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#2451af;color:white;flex-shrink:0;font-size:14px}
#system .journey-statuses li>div{display:grid;gap:5px}
#system .journey-statuses strong{font-size:15px;line-height:1.3;color:#fff}
#system .journey-statuses li>div>span{font-size:12px;line-height:1.4;color:#c1cfe5}
#system .journey-statuses .journey-next{padding-bottom:0}
#system .journey-next .journey-check{background:#ff6000;color:#10264c}
#system .journey-next strong{color:#ffb082}
#system .journey-copy h3{font-size:clamp(24px,2.2vw,29px);line-height:1.2;letter-spacing:-.025em;margin:0 0 13px;color:#10264c;max-width:340px}
#system .journey-copy>p{font-size:16px;line-height:1.6;color:#526580;margin:0 0 16px}
#system .journey-copy .journey-commitment{display:grid;gap:3px;border-left:3px solid #ff6000;padding:2px 0 2px 12px;font-size:14px;line-height:1.45;margin-top:19px}
#system .journey-commitment strong{color:#164bd8}
#system .journey-copy .journey-detail{font-size:14px;line-height:1.55;border-top:1px solid #d8e2f1;padding-top:15px;margin-top:19px}
#system .scope-footnote{border-top:1px solid #d8e2f1;padding-top:20px;margin-top:25px;max-width:none;font-size:14px}

/* Content stays visible without JS. Motion plays only once per step. */
@media(prefers-reduced-motion:no-preference){
 #system .journey-step.motion-ready .journey-way::after{transform:scaleX(0)}
 #system .journey-step.motion-ready.is-visible .journey-way::after{animation:journey-line .75s ease-out var(--journey-start) both}
 #system .journey-step.motion-ready.is-visible .journey-number{animation:journey-dot .6s ease-out var(--journey-start) both}
 #system .journey-step.motion-ready.is-visible .journey-visual>.journey-piece{animation:journey-arrive .7s cubic-bezier(.2,.7,.3,1) var(--journey-start) both}
 #system .journey-step.motion-ready.is-visible .journey-local,#system .journey-step.motion-ready.is-visible .journey-contact-detail{animation-delay:calc(var(--journey-start) + .2s)}
 #system .journey-step.motion-ready.is-visible .journey-statuses .journey-piece{animation:journey-arrive .5s ease-out both}
 #system .journey-statuses .journey-piece:nth-child(1){animation-delay:calc(var(--journey-start) + .15s)!important}
 #system .journey-statuses .journey-piece:nth-child(2){animation-delay:calc(var(--journey-start) + .35s)!important}
 #system .journey-statuses .journey-piece:nth-child(3){animation-delay:calc(var(--journey-start) + .55s)!important}
 #system .journey-phone{transition:transform .2s ease}
 #system .journey-phone:hover{transform:rotate(0)}
 #system .journey-step:focus-within .journey-piece{animation:none!important}
}
@keyframes journey-arrive{from{opacity:.25;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes journey-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes journey-dot{from{box-shadow:0 0 0 0 #164bd82b}to{box-shadow:0 0 0 7px #164bd800}}
@media(max-width:1050px){
 #system .journey-steps{gap:24px}
 #system .journey-way::before,#system .journey-way::after{width:calc(100% + 24px)}
 #system .journey-record{padding:20px 14px}
 #system .journey-record-head strong{font-size:19px}
 #system .journey-record-head img{width:38px;height:38px}
}
@media(min-width:701px) and (max-width:950px){
 #system .journey-steps{grid-template-columns:1fr;gap:28px}
 #system .journey-step{display:grid;grid-template-columns:minmax(270px,.9fr) 1fr;column-gap:30px;align-items:center}
 #system .journey-way{grid-column:1/-1}
 #system .journey-way::before,#system .journey-way::after{width:100%}
 #system .journey-visual{margin:0}
 #system .journey-copy h3{max-width:none}
}
@media(max-width:950px){#system .journey-step:nth-child(n){--journey-start:0s}}
@media(max-width:700px){
 #system.journey-section{padding:36px 20px}
 #system .scope-heading{margin-bottom:26px}
 #system .scope-heading h2{font-size:29px}
 #system .journey-steps{grid-template-columns:1fr;gap:28px}
 #system .journey-way{padding-bottom:15px;margin-bottom:10px}
 #system .journey-way::before,#system .journey-way::after{width:100%}
 #system .journey-visual{max-width:370px;width:100%;height:326px;margin:0 auto 18px}
 #system .journey-social{top:12px;left:3%;width:89%}
 #system .journey-worksite{height:130px}
 #system .journey-social-copy{padding:10px 12px}
 #system .journey-local{padding:10px 13px;bottom:27px}
 #system .journey-phone{top:2px;width:144px;left:calc(50% - 88px);border-radius:20px}
 #system .journey-contact-detail{bottom:35px;padding:10px 13px}
 #system .journey-record{top:10px;left:2%;right:2%;padding:18px}
 #system .journey-record-head{padding-bottom:14px}
 #system .journey-record-head strong{font-size:21px}
 #system .journey-statuses{padding-top:16px}
 #system .journey-statuses li{padding-bottom:14px}
 #system .journey-copy h3{font-size:24px;max-width:none;margin-bottom:10px}
 #system .journey-copy>p{margin-bottom:12px}
 #system .journey-copy .journey-detail,#system .journey-copy .journey-commitment{margin-top:14px}
 #system .scope-footnote{margin-top:24px;padding-top:16px}
}
@media(max-width:360px){
 #system .journey-social{width:94%;left:1%}
 #system .journey-social-head{padding:9px}
 #system .journey-record{left:0;right:0;padding:16px 13px}
 #system .journey-local{padding:10px;max-width:100%}
 #system .journey-contact-detail{right:0;font-size:14px}
}