.hapo-customer-choice{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;min-height:1000px;padding:112px 24px 118px;background:radial-gradient(ellipse at 50% 70%,#24332c 0%,#161b19 50%,#111513 100%);color:#fff;font-family:Manrope,Arial,sans-serif}
.hapo-customer-choice *{box-sizing:border-box}
.hapo-customer-choice--width-full{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.hapo-customer-choice--width-container{width:100%}
.hapo-customer-choice__background{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1)}
.hapo-customer-choice::before{position:absolute;z-index:-1;inset:0;content:"";background:linear-gradient(180deg,rgba(10,13,11,.83) 0%,rgba(10,13,11,.75) 34%,rgba(6,10,8,.78) 100%);pointer-events:none}
.hapo-customer-choice__inner{position:relative;max-width:1360px;margin:0 auto;text-align:center}
.hapo-customer-choice__header{margin:0 auto 62px;max-width:1050px}
.hapo-customer-choice .hapo-customer-choice__header h2,.hapo-customer-choice .hapo-customer-choice__header h3{margin:0;color:#fff;font-family:inherit;font-size:42px;font-weight:800;line-height:1.24;letter-spacing:-.025em;text-transform:uppercase}
.hapo-customer-choice__rule{display:block;width:150px;height:4px;margin:25px auto 24px;background:#08ce78}
.hapo-customer-choice .hapo-customer-choice__header p{margin:0;color:#f4f6f4;font-size:19px;font-weight:500;line-height:1.48}
.hapo-customer-choice__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.hapo-customer-choice__card{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:438px;overflow:hidden;padding:48px 38px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(0,155,73,.82);box-shadow:0 10px 24px rgba(0,0,0,.12);text-align:center;transition:transform .36s cubic-bezier(.16,1,.3,1),background-color .32s ease,box-shadow .36s cubic-bezier(.16,1,.3,1),border-color .32s ease}
.hapo-customer-choice__card::before{position:absolute;inset:0;z-index:-1;content:"";background:linear-gradient(145deg,rgba(255,255,255,.13),transparent 42%,rgba(0,53,30,.16));opacity:.65;transition:opacity .32s ease;pointer-events:none}
.hapo-customer-choice__icon{display:block;width:100px;height:100px;margin:0 auto 18px;object-fit:contain;transition:transform .36s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 4px 10px rgba(0,0,0,.08))}
.hapo-customer-choice__icon--partnership{width:125px}
.hapo-customer-choice .hapo-customer-choice__card h3{max-width:360px;margin:0 0 8px;color:#fff;font-family:inherit;font-size:23px;font-weight:700;line-height:1.28;letter-spacing:-.02em}
.hapo-customer-choice .hapo-customer-choice__card p{max-width:365px;margin:0;color:#d4ecdc;font-size:16px;font-weight:500;line-height:1.38}
.hapo-customer-choice__empty{margin:0 auto;color:#fff}
.hapo-customer-choice .hapo-customer-choice__cta{gap:12px;min-height:56px;margin:58px auto 0;padding:12px 25px;border-radius:999px;background:#ffdf00;color:#151515;font-size:16px;font-weight:700;line-height:1.2}
.hapo-customer-choice .hapo-customer-choice__cta:hover,.hapo-customer-choice .hapo-customer-choice__cta:focus-visible{color:#151515}
.hapo-customer-choice .hapo-customer-choice__cta:focus-visible{outline-color:#fff}
@media(hover:hover) and (pointer:fine){.hapo-customer-choice__card:hover{transform:translate3d(0,-8px,0);background-color:rgba(3,177,83,.91);border-color:rgba(255,255,255,.28);box-shadow:0 26px 48px rgba(0,0,0,.27),0 0 0 1px rgba(81,244,157,.2)}.hapo-customer-choice__card:hover::before{opacity:1}.hapo-customer-choice__card:hover .hapo-customer-choice__icon{transform:translate3d(0,-4px,0) scale(1.07)}}
@media(max-width:1000px){.hapo-customer-choice{padding:80px 24px}.hapo-customer-choice__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hapo-customer-choice__card{min-height:370px}.hapo-customer-choice .hapo-customer-choice__header h2,.hapo-customer-choice .hapo-customer-choice__header h3{font-size:36px}}
@media(max-width:640px){.hapo-customer-choice{min-height:0;padding:64px 16px 72px}.hapo-customer-choice__header{margin-bottom:38px}.hapo-customer-choice .hapo-customer-choice__header h2,.hapo-customer-choice .hapo-customer-choice__header h3{font-size:29px}.hapo-customer-choice__rule{width:100px;margin:20px auto}.hapo-customer-choice .hapo-customer-choice__header p{font-size:16px}.hapo-customer-choice__grid{grid-template-columns:1fr;gap:16px}.hapo-customer-choice__card{min-height:300px;padding:35px 26px}.hapo-customer-choice__icon{width:80px;height:80px;margin-bottom:15px}.hapo-customer-choice__icon--partnership{width:100px}.hapo-customer-choice .hapo-customer-choice__card h3{font-size:21px}.hapo-customer-choice .hapo-customer-choice__card p{font-size:15px}.hapo-customer-choice .hapo-customer-choice__cta{margin-top:42px}}
@media(prefers-reduced-motion:reduce){.hapo-customer-choice__card,.hapo-customer-choice__icon{transition:none!important;transform:none!important}}

/* Mobile, from the supplied 375px About-page design (2026-10-20): 25.5px heading, 299px-wide
   cards of fixed 293px height with top-aligned content, 32px apart; yellow CTA 40px below. */
@media(max-width:600px){
.hapo-customer-choice{padding:58px 16px}
.hapo-customer-choice__inner{padding:0}
.hapo-customer-choice__header{margin-bottom:45px}
.hapo-customer-choice .hapo-customer-choice__header h2,.hapo-customer-choice .hapo-customer-choice__header h3{font-size:25.5px;line-height:34px;letter-spacing:-.01em}
.hapo-customer-choice__rule{width:80px;height:3px;margin:13px auto 15px}
.hapo-customer-choice .hapo-customer-choice__header p{font-size:15px;line-height:20.5px}
.hapo-customer-choice__grid{gap:32px}
.hapo-customer-choice__card{width:299px;max-width:100%;min-height:293px;margin:0 auto;padding:44px 24px 20px;justify-content:flex-start}
.hapo-customer-choice__icon{width:74px;height:74px;margin-bottom:20px}
.hapo-customer-choice__icon--partnership{width:92px}
.hapo-customer-choice .hapo-customer-choice__card h3{margin:0 0 9px;font-size:17.5px;line-height:25px}
.hapo-customer-choice .hapo-customer-choice__card p{font-size:14px;line-height:18.5px}
.hapo-customer-choice .hapo-button{min-height:46px;margin-top:40px;padding:10px 24px}
}