/* Why Brandefense parity (design): "How we work" becomes a dark island with four step cards. Loaded only on /why-brandefense/. */
.page-why-brandefense .dcc-sec:has(.dcc-steps) > .dcc-wrap { max-width: min(1440px, calc(100% - 32px)); padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 64px); border-radius: clamp(14px, 3vw, 22px); color: #fff; background: radial-gradient(60% 50% at 20% 0%, rgb(255 82 70 / .2), rgb(3 9 37 / 0) 70%), radial-gradient(50% 50% at 90% 100%, rgb(60 80 200 / .22), rgb(3 9 37 / 0) 70%), #000313; }
.page-why-brandefense .dcc-split:has(.dcc-steps) { display: block; text-align: center; }
.page-why-brandefense .dcc-split:has(.dcc-steps) .dcc-side { position: static; margin-bottom: clamp(28px, 3.4vw, 48px); }
.page-why-brandefense .dcc-split:has(.dcc-steps) .dcc-h2 { color: #fff; }
.page-why-brandefense .dcc-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; text-align: left; }
.page-why-brandefense .dcc-step { grid-template-columns: 1fr; gap: 14px; padding: 22px; border-radius: 12px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); transition: background .3s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.page-why-brandefense .dcc-step:hover { background: rgb(255 255 255 / .08); transform: translateY(-3px); }
.page-why-brandefense .dcc-step::before { width: 36px; height: 36px; border-radius: 6px; background: #ff5247; }
.page-why-brandefense .dcc-step b { color: #fff; font-size: 17px; }
.page-why-brandefense .dcc-step p { color: rgb(255 255 255 / .62); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .page-why-brandefense .dcc-step { transition: none; } .page-why-brandefense .dcc-step:hover { transform: none; } }
.page-why-brandefense .dcc-step { align-content: start; }

/* owner sol S7c: steps panel content = header width */
.page-why-brandefense .dcc-sec:has(.dcc-steps) > .dcc-wrap { max-width: min(calc(1280px + 2 * clamp(20px, 4vw, 64px)), calc(100% - 32px)); }