/* dd/benefit-grid – v3: navy sekcia, veľké percentá a porovnávací stĺpec (plný = ručná realizácia 100 %, žltý = zostáva s nami) */
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);list-style:none;margin:0;padding:0}
.ben>div,.ben>li{border-top:1px solid #ffffff2e;padding-top:24px;display:flex;flex-direction:column}
.ben b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-1px}
.ben b em{font-style:normal;color:var(--yellow)}
.ben p{margin:var(--space-3) 0 0;font-size:15px;line-height:22px;color:var(--on-navy-muted);flex:1}
.ben .bar{position:relative;display:block;height:10px;margin-top:var(--space-5);background:repeating-linear-gradient(90deg,#ffffff26 0 6px,transparent 6px 9px);border-radius:1px}
.ben .bar>span{position:absolute;left:0;top:0;bottom:0;background:var(--yellow);border-radius:1px;transform-origin:0 50%}
.ben .leg{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-2);font-family:var(--font-mono);font-size:11px;line-height:14px;letter-spacing:.3px;text-transform:uppercase;color:var(--on-navy-muted)}
.ben .leg>span:first-child{color:var(--yellow)}
html.dd-js .dd-pre .ben .bar>span{transform:scaleX(0)}
html.dd-js .dd-pre.dd-in .ben .bar>span{transform:none;transition:transform 1.1s var(--ease-io) calc(var(--i,0) * 120ms + 350ms)}
@media (max-width:1023px){.ben{grid-template-columns:repeat(2,1fr);row-gap:var(--space-7)}}
@media (max-width:479px){.ben{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-4);row-gap:var(--space-6)}.ben>div,.ben>li{padding-top:var(--space-4)}.ben b{font-size:38px}.ben p{font-size:14px;line-height:20px}.ben .bar{margin-top:var(--space-4)}.ben .leg{font-size:10px;letter-spacing:0}}
/* UX audit F17: čitateľná legenda */
.ben .leg{font-size:12px;letter-spacing:.3px}