.hapo-traffic-user-applications{position:relative;isolation:isolate;background:#effbf6;color:#111;font-family:Manrope,sans-serif}
.hapo-traffic-user-applications *{box-sizing:border-box}
.hapo-traffic-user-applications--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-traffic-user-applications--container{width:100%}
.hapo-traffic-user-applications__inner{width:min(1440px,calc(100% - 48px));margin:auto;padding:119px 0 121px}
.hapo-traffic-user-applications__title{margin:0;color:#101010;text-align:center;font-size:40px;font-weight:800;line-height:1.3;letter-spacing:-.025em}
.hapo-traffic-user-applications__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:30px 0 0;padding:0;list-style:none}
.hapo-traffic-user-applications__card{min-width:0;overflow:hidden;border-radius:11px;background:#fff;transition:transform .3s ease,box-shadow .3s ease}
.hapo-traffic-user-applications__card article{height:100%}
.hapo-traffic-user-applications__media{height:211px;overflow:hidden}
.hapo-traffic-user-applications__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.hapo-traffic-user-applications__body{padding:24px 24px 22px}
.hapo-traffic-user-applications__body h3,.hapo-traffic-user-applications__body h4{margin:0 0 7px;color:#111;font-size:22px;font-weight:800;line-height:1.25}
.hapo-traffic-user-applications__body p{margin:0;color:#111;font-size:16px;line-height:1.28}
.hapo-traffic-user-applications__body .hapo-traffic-user-applications__situation{min-height:43px;color:#757575}
.hapo-traffic-user-applications__badge{display:inline-block;min-width:109px;margin:10px 0 9px;padding:4px 18px;border-radius:50px;color:#fff;font-size:16px;line-height:1.3;text-align:center}
.hapo-traffic-user-applications__badge--solution{background:#05cf7a}
.hapo-traffic-user-applications__badge--value{margin-top:15px;background:#0745d6}
@media(hover:hover) and (pointer:fine){.hapo-traffic-user-applications__card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(18,102,68,.12)}.hapo-traffic-user-applications__card:hover img{transform:scale(1.04)}}
@media(max-width:1100px){.hapo-traffic-user-applications__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.hapo-traffic-user-applications__media{height:230px}}
@media(max-width:650px){.hapo-traffic-user-applications__inner{width:calc(100% - 36px);padding:72px 0}.hapo-traffic-user-applications__title{font-size:29px}.hapo-traffic-user-applications__grid{grid-template-columns:1fr;gap:18px;margin-top:26px}.hapo-traffic-user-applications__media{height:auto;aspect-ratio:5/3}.hapo-traffic-user-applications__body{padding:20px}.hapo-traffic-user-applications__body h3,.hapo-traffic-user-applications__body h4{font-size:21px}.hapo-traffic-user-applications__body .hapo-traffic-user-applications__situation{min-height:0}}
@media(prefers-reduced-motion:reduce){.hapo-traffic-user-applications__card,.hapo-traffic-user-applications__media img{transition:none}.hapo-traffic-user-applications__card:hover,.hapo-traffic-user-applications__card:hover img{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-applications .hapo-traffic-user-applications__grid>li{margin-left:0}
@media(max-width:650px){
.hapo-traffic-user-applications__inner{width:calc(100% - 32px);padding:64px 0}
.hapo-traffic-user-applications__title{font-size:26px;text-transform:uppercase}
/* UX: five long application cards become a swipe row with a peek instead of a ~2,300px stack. */
.hapo-traffic-user-applications__grid{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;gap:12px;margin:26px -16px 0;padding:0 16px 12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-padding-inline:16px;scroll-snap-type:inline mandatory;scrollbar-width:none}
.hapo-traffic-user-applications__grid::-webkit-scrollbar{display:none}
.hapo-traffic-user-applications__card{scroll-snap-align:start}
}