.hapo-traffic-user-audience,.hapo-traffic-user-combos{position:relative;isolation:isolate;overflow:hidden;background:#fff;color:#0b0b0d;font-family:Manrope,sans-serif}
.hapo-traffic-user-audience *,.hapo-traffic-user-combos *{box-sizing:border-box}
.hapo-traffic-user-audience--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-traffic-user-audience--container{width:100%}
.hapo-traffic-user-combos{left:50%;width:100vw;margin-left:-50vw}
.hapo-traffic-user-audience::before,.hapo-traffic-user-audience::after{position:absolute;z-index:0;display:block;background-repeat:no-repeat;background-size:contain;content:"";pointer-events:none}
.hapo-traffic-user-audience::before{top:-28px;right:-28px;width:357px;height:271px;background-image:url('../images/traffic-user-combos/decor-top-right-visible.svg')}
.hapo-traffic-user-audience::after{bottom:20px;left:20px;width:300px;height:258px;background-image:url('../images/traffic-user-combos/decor-bottom-left-visible.svg')}
.hapo-traffic-user-audience__inner,.hapo-traffic-user-combos__inner{position:relative;z-index:1;width:min(1440px,calc(100% - 48px));margin:auto}
.hapo-traffic-user-audience__inner{padding:116px 0 116px}
.hapo-traffic-user-audience .hapo-traffic-user-audience__title{margin:0;text-align:center;color:#09090b;font-size:42px;font-weight:800;line-height:1.3;letter-spacing:-.025em}
.hapo-traffic-user-audience__title em,.hapo-traffic-user-combos__title em{color:#07d483;font-style:normal}
.hapo-traffic-user-audience__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:54px}
.hapo-traffic-user-audience__card{overflow:hidden;border-radius:12px;background:#f7f7f7;text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.hapo-traffic-user-audience__photo{width:100%;aspect-ratio:460/277;background-image:url('../images/traffic-user-audience/reference.jpg');background-size:417.391% auto;background-repeat:no-repeat;background-position:16.438% 11.82%}
.hapo-traffic-user-audience__card--photo-2 .hapo-traffic-user-audience__photo{background-position:50% 11.82%}
.hapo-traffic-user-audience__card--photo-3 .hapo-traffic-user-audience__photo{background-position:83.562% 11.82%}
.hapo-traffic-user-audience__card--photo-4 .hapo-traffic-user-audience__photo{background-position:16.438% 33.62%}
.hapo-traffic-user-audience__card--photo-5 .hapo-traffic-user-audience__photo{background-position:50% 11.82%}
.hapo-traffic-user-audience__card--photo-6 .hapo-traffic-user-audience__photo{background-position:83.562% 33.62%}
.hapo-traffic-user-audience__photo img{display:block;width:100%;height:100%;object-fit:cover}
.hapo-traffic-user-audience__copy{min-height:128px;padding:16px 18px 20px}
.hapo-traffic-user-audience__copy h3,.hapo-traffic-user-audience__copy h4{margin:0;color:#111;font-size:18px;font-weight:800;line-height:1.35}
.hapo-traffic-user-audience__copy p{margin:8px 0 0;color:#777;font-size:16px;line-height:1.35}
.hapo-traffic-user-combos__inner{padding:18px 0 125px}
.hapo-traffic-user-combos__intro{max-width:1030px;margin:auto;text-align:center}
.hapo-traffic-user-combos .hapo-traffic-user-combos__title{position:relative;margin:0;color:#111;font-size:39px;font-weight:800;line-height:1.4;letter-spacing:-.025em}
.hapo-traffic-user-combos__quote{display:inline-block;width:42px;height:32px;margin:0 18px;vertical-align:middle;object-fit:contain}
.hapo-traffic-user-combos__intro>p{max-width:890px;margin:34px auto 0;color:#161616;font-size:16px;line-height:1.55}
.hapo-traffic-user-combos__grid{display:flex;flex-wrap:wrap;justify-content:center;column-gap:30px;row-gap:46px;margin-top:42px}
.hapo-traffic-user-combos__card{width:calc((100% - 60px)/3);min-width:0;text-align:center}
.hapo-traffic-user-combos__card:nth-child(-n+2){width:calc((100% - 60px)/3)}
.hapo-traffic-user-combos__card:nth-child(2){margin-right:calc((100% - 60px)/6)}
.hapo-traffic-user-combos__card:nth-child(1){margin-left:calc((100% - 60px)/6)}
.hapo-traffic-user-combos__badge{display:inline-block;padding:4px 12px;border-radius:5px;background:#e9fbf5;color:#07ce81;font-size:14px;font-weight:700;line-height:1.2}
.hapo-traffic-user-combos__venn{display:flex;justify-content:center;align-items:center;min-height:218px;margin:5px auto 0}
.hapo-traffic-user-combos__circle{display:flex;width:208px;height:208px;flex:none;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;font-size:18px;font-weight:800;transition:background-color .3s ease,box-shadow .3s ease,filter .3s ease}
.hapo-traffic-user-combos__circle--traffic{position:relative;z-index:2;margin-right:-43px;background:rgba(10,214,144,.08);color:#08d585}
.hapo-traffic-user-combos__circle--pair{background:rgba(29,142,238,.065);color:#034bb5}
.hapo-traffic-user-combos__circle--traffic{animation:hapo-combo-circle-breathe 5.6s ease-in-out infinite}
.hapo-traffic-user-combos__circle--pair{animation:hapo-combo-circle-breathe 5.6s ease-in-out -2.8s infinite}
.hapo-traffic-user-combos__card:nth-child(2n) .hapo-traffic-user-combos__circle{animation-delay:-1.4s}
.hapo-traffic-user-combos__card:nth-child(2n) .hapo-traffic-user-combos__circle--pair{animation-delay:-4.2s}
@media(hover:hover) and (pointer:fine){.hapo-traffic-user-combos__card:hover .hapo-traffic-user-combos__circle{animation-play-state:paused;filter:saturate(1.4)}.hapo-traffic-user-combos__card:hover .hapo-traffic-user-combos__circle--traffic{background:rgba(10,214,144,.13);box-shadow:0 12px 32px rgba(10,214,144,.1)}.hapo-traffic-user-combos__card:hover .hapo-traffic-user-combos__circle--pair{background:rgba(29,142,238,.11);box-shadow:0 12px 32px rgba(29,142,238,.1)}}
@keyframes hapo-combo-circle-breathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-5px,0) scale(1.025)}}
.hapo-traffic-user-combos__circle img{display:block;width:48px;height:48px;margin-bottom:12px;object-fit:contain}
.hapo-traffic-user-combos__card>p{max-width:400px;margin:14px auto 0;color:#151515;font-size:15px;font-weight:600;line-height:1.3}
@media(hover:hover) and (pointer:fine){.hapo-traffic-user-audience__card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(14,82,98,.1)}}
@media(max-width:1100px){.hapo-traffic-user-audience__grid{gap:22px}.hapo-traffic-user-audience__copy{min-height:145px}.hapo-traffic-user-combos__circle{width:160px;height:160px}.hapo-traffic-user-combos__venn{min-height:170px}.hapo-traffic-user-combos__circle--traffic{margin-right:-34px}}
@media(max-width:800px){.hapo-traffic-user-audience__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hapo-traffic-user-combos__card,.hapo-traffic-user-combos__card:nth-child(-n+2){width:calc((100% - 24px)/2)}.hapo-traffic-user-combos__card:nth-child(1),.hapo-traffic-user-combos__card:nth-child(2){margin:0}.hapo-traffic-user-combos__grid{column-gap:24px}.hapo-traffic-user-combos__title{font-size:32px!important}}
@media(max-width:600px){.hapo-traffic-user-audience__inner,.hapo-traffic-user-combos__inner{width:calc(100% - 36px)}.hapo-traffic-user-audience__inner{padding:68px 0 70px}.hapo-traffic-user-audience .hapo-traffic-user-audience__title{font-size:28px}.hapo-traffic-user-audience::before{right:-110px;top:-40px;transform:scale(.7)}.hapo-traffic-user-audience::after{left:12px;bottom:12px;width:140px;height:120px;transform:none}.hapo-traffic-user-audience__grid{grid-template-columns:1fr;gap:18px;margin-top:34px}.hapo-traffic-user-audience__copy{min-height:0;padding:15px 16px 22px}.hapo-traffic-user-audience__copy p{font-size:15px}.hapo-traffic-user-combos__inner{padding:34px 0 80px}.hapo-traffic-user-combos .hapo-traffic-user-combos__title{font-size:28px!important;line-height:1.35}.hapo-traffic-user-combos__quote{width:24px;height:19px;margin:0 5px}.hapo-traffic-user-combos__intro>p{margin-top:22px;font-size:15px}.hapo-traffic-user-combos__grid{gap:32px;margin-top:32px}.hapo-traffic-user-combos__card,.hapo-traffic-user-combos__card:nth-child(-n+2){width:100%}.hapo-traffic-user-combos__circle{width:150px;height:150px}.hapo-traffic-user-combos__venn{min-height:155px}.hapo-traffic-user-combos__card>p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hapo-traffic-user-audience__card{transition:none}.hapo-traffic-user-audience__card:hover{transform:none}.hapo-traffic-user-combos__circle{animation:none;transition: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){
/* UX: six audience photo cards become a swipe row with a peek instead of a ~2,000px stack. */
.hapo-traffic-user-audience__grid{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;gap:12px;margin-inline:-16px;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-audience__grid::-webkit-scrollbar{display:none}
.hapo-traffic-user-audience__card{scroll-snap-align:start}
}
@media(max-width:650px){.hapo-traffic-user-audience__inner,.hapo-traffic-user-combos__inner{width:calc(100% - 32px)}}