.hapo-traffic-user-intro{position:relative;background:#fff;color:#101010;font-family:Manrope,sans-serif}
.hapo-traffic-user-intro *{box-sizing:border-box}
.hapo-traffic-user-intro--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-traffic-user-intro--container{width:100%}
.hapo-traffic-user-intro__inner{display:grid;grid-template-columns:minmax(0,704px) minmax(0,642px);align-items:center;gap:94px;width:min(1440px,calc(100% - 48px));min-height:722px;margin:auto;padding:100px 0}
.hapo-traffic-user-intro__copy{transform:translateY(-12px)}
.hapo-traffic-user-intro .hapo-traffic-user-intro__title{margin:0;color:#080808;font-size:44px;font-weight:800;line-height:1.2;letter-spacing:-.025em}
.hapo-traffic-user-intro__title::after{display:block;width:150px;height:4px;margin-top:25px;background:#07d27c;content:""}
.hapo-traffic-user-intro .hapo-traffic-user-intro__description{margin:26px 0 0;color:#111;font-size:20px;font-weight:500;line-height:1.51}
.hapo-traffic-user-intro__points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:38px;margin:38px 0 0!important;padding:0!important;list-style:none}
.hapo-traffic-user-intro__point{display:flex;align-items:center;gap:23px;min-width:0;margin:0!important;list-style:none;transition:transform .25s ease}
.hapo-traffic-user-intro__point:hover{transform:translateY(-4px)}
.hapo-traffic-user-intro__point img{display:block;width:54px;height:54px;flex:none;object-fit:contain}
.hapo-traffic-user-intro__point span{color:#111;font-size:18px;font-weight:700;line-height:1.42}
.hapo-traffic-user-intro__art{overflow:hidden;border-radius:16px;transition:transform .35s ease,box-shadow .35s ease}
.hapo-traffic-user-intro__art:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(19,80,66,.12)}
.hapo-traffic-user-intro__art img{display:block;width:100%;height:auto;aspect-ratio:642/482;object-fit:cover}
.hapo-traffic-user-intro__empty{grid-column:1/-1}
@media(max-width:1200px){.hapo-traffic-user-intro__inner{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:42px;min-height:0}.hapo-traffic-user-intro .hapo-traffic-user-intro__title{font-size:clamp(32px,3.3vw,44px)}.hapo-traffic-user-intro .hapo-traffic-user-intro__description{font-size:17px}.hapo-traffic-user-intro__point{gap:12px}.hapo-traffic-user-intro__point span{font-size:15px}}
@media(max-width:800px){.hapo-traffic-user-intro__inner{grid-template-columns:1fr;width:calc(100% - 36px);gap:40px;padding:68px 0}.hapo-traffic-user-intro__copy{transform:none}.hapo-traffic-user-intro__art{width:min(100%,642px);margin:auto}.hapo-traffic-user-intro__points{margin-top:32px!important}}
@media(max-width:500px){.hapo-traffic-user-intro .hapo-traffic-user-intro__title{font-size:30px}.hapo-traffic-user-intro__title::after{width:96px;height:3px;margin-top:16px}.hapo-traffic-user-intro .hapo-traffic-user-intro__description{margin-top:20px;font-size:15px}.hapo-traffic-user-intro__points{grid-template-columns:1fr;row-gap:18px}.hapo-traffic-user-intro__point img{width:46px;height:46px}.hapo-traffic-user-intro__point span{font-size:15px}}
@media(prefers-reduced-motion:reduce){.hapo-traffic-user-intro__point,.hapo-traffic-user-intro__art{transition:none}.hapo-traffic-user-intro__point:hover,.hapo-traffic-user-intro__art: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-intro .hapo-traffic-user-intro__points>li{margin-left:0}
@media(max-width:800px){
.hapo-traffic-user-intro__inner{width:calc(100% - 32px);gap:24px;padding:64px 0}
.hapo-traffic-user-intro__art{order:-1}
}
@media(max-width:500px){.hapo-traffic-user-intro .hapo-traffic-user-intro__title{font-size:26px}.hapo-traffic-user-intro__title::after{width:80px;height:4px}}