/* Benefit cards: visual depth without moving the surrounding layout. */
.value-benefit-grid{perspective:1400px;isolation:isolate}
.value-benefit{position:relative;isolation:isolate;transform-origin:center;transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease;backface-visibility:hidden}
.value-benefit::after{content:"";position:absolute;inset:0;border:1px solid #ffffff2b;border-radius:inherit;pointer-events:none;z-index:1;background:linear-gradient(125deg,#ffffff12,transparent 48%);opacity:.4;transition:opacity .3s}
.value-benefit-toggle{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.value-benefit-toggle:focus{outline:none}
.value-benefit>span{transition:transform .3s ease,background .3s ease,box-shadow .3s ease}
.value-benefit.is-highlighted{transform:translateY(-9px) scale(1.018);box-shadow:0 24px 42px #00376930,0 0 0 3px #fff,0 0 0 5px #2563eb4d;z-index:2}
.value-benefit.is-highlighted::after{opacity:1}
.value-benefit.is-highlighted>span{transform:translateY(-3px) scale(1.08);background:#ffffff28;box-shadow:0 8px 18px #001b4520}
.value-benefit:has(.value-benefit-toggle:focus-visible){outline:3px solid #ffad65;outline-offset:6px;z-index:2}
@media(hover:hover) and (pointer:fine){
 .value-benefit:hover{transform:translateY(-10px) rotateX(2deg) scale(1.025);box-shadow:0 26px 42px #00376935;z-index:2}
 .value-benefit:hover::after{opacity:1}
 .value-benefit:hover>span{transform:translateY(-3px) scale(1.08);background:#ffffff28;box-shadow:0 8px 18px #001b4520}
 .value-benefit.is-highlighted:hover{box-shadow:0 26px 42px #00376935,0 0 0 3px #fff,0 0 0 5px #2563eb4d}
 .value-benefit:active{transform:translateY(-4px) scale(1.008);transition-duration:.12s}
}
@media(max-width:700px){.value-benefit.is-highlighted{transform:translateY(-5px);box-shadow:0 17px 28px #00376925,0 0 0 2px #fff,0 0 0 4px #2563eb4d}}
@media(prefers-reduced-motion:reduce){
 .value-benefit,.value-benefit>span,.value-benefit::after{transition:none!important}
 .value-benefit:hover,.value-benefit:active,.value-benefit.is-highlighted,.value-benefit.is-highlighted:hover,.value-benefit:hover>span,.value-benefit.is-highlighted>span{transform:none!important}
}
