.hapo-traffic-user-packages{position:relative;isolation:isolate;overflow:hidden;background:#effaf6;color:#0b0b0d;font-family:Manrope,sans-serif}
.hapo-traffic-user-packages *{box-sizing:border-box}
.hapo-traffic-user-packages--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-traffic-user-packages--container{width:100%}
.hapo-traffic-user-packages__paths{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.hapo-traffic-user-packages__paths path{fill:none;stroke:#30cb91;stroke-width:2}
.hapo-traffic-user-packages__path-base{opacity:.12}
.hapo-traffic-user-packages__path-draw{stroke:#08c98a!important;stroke-width:2.5!important;stroke-dasharray:2500;stroke-dashoffset:2500;opacity:0;animation:hapo-traffic-packages-path 13s ease-in-out infinite}
.hapo-traffic-user-packages__path-draw:last-child{animation-delay:2.3s}
.hapo-traffic-user-packages__inner{position:relative;z-index:1;width:min(1760px,calc(100% - 80px));margin:auto;padding:80px 0 120px}
.hapo-traffic-user-packages .hapo-traffic-user-packages__title{margin:0;text-align:center;color:#09090b;font-size:44px;font-weight:800;line-height:1.25;letter-spacing:-.025em}
.hapo-traffic-user-packages__title em{color:#08cf80;font-style:normal}
.hapo-traffic-user-packages__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:60px}
.hapo-traffic-user-packages__card{display:flex;min-width:0;min-height:544px;flex-direction:column;align-items:stretch;padding:29px 23px 34px;border:1px solid #d0d8da;border-radius:12px;background:#fff;text-align:center;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.hapo-traffic-user-packages__card--featured{border-color:#0055ec;background:#f1f8ff}
.hapo-traffic-user-packages__badge{align-self:center;min-width:112px;min-height:33px;padding:6px 16px;border-radius:6px;background:#08cf80;color:#fff;font-size:16px;font-weight:600;line-height:21px;white-space:nowrap}
.hapo-traffic-user-packages__card--featured .hapo-traffic-user-packages__badge{background:#064ccd}
.hapo-traffic-user-packages__card h3,.hapo-traffic-user-packages__card h4{min-height:40px;margin:26px -14px 0;color:#0b0b0d;font-size:30px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.hapo-traffic-user-packages__description{min-height:44px;margin:22px 0 0;color:#777;font-size:16px;font-weight:500;line-height:1.3}
.hapo-traffic-user-packages .hapo-traffic-user-packages__button{display:inline-flex;min-height:47px;align-items:center;justify-content:center;width:100%;margin-top:22px;padding:10px 18px;border-radius:999px;background:#1cca67;color:#fff;font-size:16px;font-weight:600;line-height:1.25;text-transform:none}
.hapo-traffic-user-packages__card--featured .hapo-traffic-user-packages__button{background:#0b4bd2}
.hapo-traffic-user-packages .hapo-traffic-user-packages__button:hover,.hapo-traffic-user-packages .hapo-traffic-user-packages__button:focus-visible{color:#fff;background:#10b85a}
.hapo-traffic-user-packages__card--featured .hapo-traffic-user-packages__button:hover,.hapo-traffic-user-packages__card--featured .hapo-traffic-user-packages__button:focus-visible{background:#073dad}
.hapo-traffic-user-packages .hapo-traffic-user-packages__button:focus-visible{outline:3px solid #0b4bd2;outline-offset:4px}
.hapo-traffic-user-packages__items{display:grid;gap:12px;margin:29px 0 0;padding:0;list-style:none;text-align:left}
.hapo-traffic-user-packages__items li{display:flex;align-items:flex-start;gap:9px;margin:0!important;padding:0;color:#111;font-size:16px;font-weight:500;line-height:1.4;list-style:none}
.hapo-traffic-user-packages__items svg{display:block;flex:none;width:20px;height:20px;margin-top:1px}
.hapo-traffic-user-packages__items circle{fill:#08cf80}
.hapo-traffic-user-packages__items path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hapo-traffic-user-packages__empty{margin:40px 0;text-align:center}
@keyframes hapo-traffic-packages-path{0%,12%{stroke-dashoffset:2500;opacity:0}45%,79%{stroke-dashoffset:0;opacity:.23}100%{stroke-dashoffset:-2500;opacity:0}}
@media(hover:hover) and (pointer:fine){.hapo-traffic-user-packages__card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(12,95,100,.11)}.hapo-traffic-user-packages__card--featured:hover{box-shadow:0 18px 36px rgba(8,78,184,.14)}}
@media(max-width:1300px){.hapo-traffic-user-packages__inner{width:min(1100px,calc(100% - 48px));padding:80px 0 100px}.hapo-traffic-user-packages__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.hapo-traffic-user-packages__card{min-height:480px}}
@media(max-width:650px){.hapo-traffic-user-packages__inner{width:calc(100% - 36px);padding:64px 0 78px}.hapo-traffic-user-packages .hapo-traffic-user-packages__title{font-size:clamp(28px,7vw,34px)}.hapo-traffic-user-packages__grid{grid-template-columns:1fr;gap:18px;margin-top:38px}.hapo-traffic-user-packages__card{min-height:0;padding:26px 22px 28px}.hapo-traffic-user-packages__card h3,.hapo-traffic-user-packages__card h4{min-height:0;margin-top:22px;font-size:25px}.hapo-traffic-user-packages__description{min-height:0;margin-top:16px;font-size:15px}.hapo-traffic-user-packages .hapo-traffic-user-packages__button{margin-top:22px}.hapo-traffic-user-packages__items{gap:11px;margin-top:24px}.hapo-traffic-user-packages__items li{font-size:15px}}
@media(prefers-reduced-motion:reduce){.hapo-traffic-user-packages__path-draw{animation:none;stroke-dashoffset:0;opacity:.2}.hapo-traffic-user-packages__card{transition:none}.hapo-traffic-user-packages__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. */
@media(max-width:650px){
.hapo-traffic-user-packages__inner{width:calc(100% - 32px)}
.hapo-traffic-user-packages .hapo-traffic-user-packages__title{font-size:clamp(20px,6.4vw,26px);white-space:nowrap}
/* UX: four package cards become a swipe row with a peek (same pattern as GEO packages). */
.hapo-traffic-user-packages__grid{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;align-items:stretch;gap:12px;margin:32px -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-packages__grid::-webkit-scrollbar{display:none}
.hapo-traffic-user-packages__card{scroll-snap-align:start}
}