.hapo-traffic-user-process,.hapo-traffic-user-principles{position:relative;isolation:isolate;font-family:Manrope,sans-serif;color:#fff}
.hapo-traffic-user-process *,.hapo-traffic-user-principles *{box-sizing:border-box}
.hapo-traffic-user-process--full,.hapo-traffic-user-principles--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-traffic-user-process--container,.hapo-traffic-user-principles--container{width:100%}
.hapo-traffic-user-process{background:#0645d2}
.hapo-traffic-user-principles{background:#0dd886}
.hapo-traffic-user-process__inner,.hapo-traffic-user-principles__inner{width:min(1440px,calc(100% - 48px));margin:auto}
.hapo-traffic-user-process__inner{padding:114px 0 118px}
.hapo-traffic-user-process__title,.hapo-traffic-user-principles__title{margin:0;color:#fff;text-align:center;font-size:42px;font-weight:800;line-height:1.25;letter-spacing:-.025em}
.hapo-traffic-user-process__intro{max-width:1300px;margin:16px auto 0;color:#fff;text-align:center;font-size:20px;font-weight:400;line-height:1.45}
.hapo-traffic-user-process__steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;position:relative;margin:31px 0 0;padding:0;list-style:none}
.hapo-traffic-user-process__steps::before{position:absolute;top:43px;left:calc(100% / 12);right:calc(100% / 12);height:1px;background:#10e39a;content:""}
.hapo-traffic-user-process__step{position:relative;min-width:0;text-align:center}
.hapo-traffic-user-process__icon-ring{display:grid;width:88px;height:88px;place-items:center;margin:0 auto 6px;border:2px solid #0ee28f;border-radius:50%;background:#0645d2;transition:background-color .25s ease,box-shadow .25s ease,transform .25s ease}
.hapo-traffic-user-process__icon{display:block;width:52px;height:52px;overflow:visible}
.hapo-traffic-user-process__icon path{transform-origin:center;transition:transform .3s ease,opacity .3s ease}
.hapo-traffic-user-process__step h3,.hapo-traffic-user-process__step h4{min-height:48px;margin:0;color:#fff;font-size:20px;font-weight:700;line-height:1.2}
.hapo-traffic-user-process__step p{max-width:225px;margin:1px auto 0;color:#fff;font-size:14px;font-weight:400;line-height:1.43}
.hapo-traffic-user-principles__inner{padding:121px 0 120px}
.hapo-traffic-user-principles__title::after{display:block;width:150px;height:4px;margin:25px auto 0;background:#fff;content:""}
.hapo-traffic-user-principles__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0 0;padding:0;list-style:none}
.hapo-traffic-user-principles__card{display:flex;min-height:130px;gap:16px;padding:24px;border-radius:12px;background:#fff;color:#111;transition:box-shadow .25s ease,transform .25s ease}
.hapo-traffic-user-principles__star{flex:none;color:#0450bb;font-size:30px;line-height:1}
.hapo-traffic-user-principles__card h3,.hapo-traffic-user-principles__card h4{margin:0 0 6px;color:#0450bb;font-size:20px;font-weight:800;line-height:1.3}
.hapo-traffic-user-principles__card p{margin:0;color:#111;font-size:16px;line-height:1.45}
@media(hover:hover) and (pointer:fine){.hapo-traffic-user-process__step:hover .hapo-traffic-user-process__icon-ring{transform:translateY(-5px);background:#0850e5;box-shadow:0 12px 28px rgba(0,22,90,.24)}.hapo-traffic-user-process__step:hover .hapo-traffic-user-process__icon path{transform:translateY(-3px)}.hapo-traffic-user-principles__card:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,103,65,.16)}}
@media(max-width:1100px){.hapo-traffic-user-process__steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:42px}.hapo-traffic-user-process__steps::before{display:none}.hapo-traffic-user-principles__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.hapo-traffic-user-process__inner,.hapo-traffic-user-principles__inner{width:calc(100% - 36px)}.hapo-traffic-user-process__inner,.hapo-traffic-user-principles__inner{padding:72px 0}.hapo-traffic-user-process__title,.hapo-traffic-user-principles__title{font-size:30px}.hapo-traffic-user-process__intro{font-size:16px}.hapo-traffic-user-process__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px;margin-top:32px}.hapo-traffic-user-process__icon-ring{width:76px;height:76px}.hapo-traffic-user-process__icon{width:45px;height:45px}.hapo-traffic-user-process__step h3,.hapo-traffic-user-process__step h4{min-height:0;font-size:17px}.hapo-traffic-user-process__step p{margin-top:7px;font-size:13px}.hapo-traffic-user-principles__grid{grid-template-columns:1fr;gap:16px;margin-top:26px}.hapo-traffic-user-principles__card{min-height:0;padding:20px}.hapo-traffic-user-principles__card h3,.hapo-traffic-user-principles__card h4{font-size:18px}.hapo-traffic-user-principles__card p{font-size:15px}}
@media(max-width:380px){.hapo-traffic-user-process__steps{grid-template-columns:1fr}.hapo-traffic-user-process__step p{max-width:270px}}
@media(prefers-reduced-motion:reduce){.hapo-traffic-user-process__icon-ring,.hapo-traffic-user-process__icon path,.hapo-traffic-user-principles__card{transition:none}.hapo-traffic-user-process__step:hover .hapo-traffic-user-process__icon-ring,.hapo-traffic-user-process__step:hover .hapo-traffic-user-process__icon path,.hapo-traffic-user-principles__card:hover{transform:none}}

/* Mobile reference correction — 2026-10-20 (Traffic user.jpg, 391×25415, 375px content). Measured from the supplied mobile frame; local values, not shared tokens. */
.hapo-traffic-user-process .hapo-traffic-user-process__steps>li,.hapo-traffic-user-principles .hapo-traffic-user-principles__grid>li{margin-left:0}
@media(max-width:700px){
.hapo-traffic-user-process__inner,.hapo-traffic-user-principles__inner{width:calc(100% - 32px);padding:64px 0}
.hapo-traffic-user-process__title,.hapo-traffic-user-principles__title{font-size:26px;line-height:1.3}
.hapo-traffic-user-process__steps{grid-template-columns:1fr;gap:24px}
.hapo-traffic-user-process__step::before{position:absolute;top:36px;left:0;width:100%;height:1px;background:rgba(255,255,255,.28);content:""}
.hapo-traffic-user-process__icon-ring{position:relative;width:72px;height:72px;box-shadow:0 0 0 12px #0645d2}
.hapo-traffic-user-process .hapo-traffic-user-process__step h3{font-size:18px}
.hapo-traffic-user-principles__title::after{width:80px}
.hapo-traffic-user-principles__grid{gap:16px}
}