.design-kicker { display:block; font:10px/1.7 var(--font-mono); letter-spacing:.08em; color:#54666c; margin-bottom:14px; }
.design-decision { padding:26px 28px; margin:30px 0; border-left:3px solid #0084a3; background:#edf4f5; border-radius:0 8px 8px 0; }
.design-decision h3 { font-size:18px; line-height:1.5; margin:0 0 12px; }
.design-decision p { font-size:14px; line-height:1.8; margin:0; max-width:72ch; color:#474e4d; }
.design-decision .design-tradeoff { margin-top:16px; padding-top:16px; border-top:1px solid #d3e0e2; }
.design-route { margin:32px 0; padding:26px; border:1px solid #d6e3e5; border-radius:10px; background:#fff; }
.design-route ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px; list-style:none; counter-reset:design-step; padding:0; margin:0; }
.design-route li { counter-increment:design-step; min-width:0; }
.design-route li::before { content:counter(design-step,decimal-leading-zero); display:block; font:11px/1.5 var(--font-mono); color:#0084a3; margin-bottom:8px; }
.design-route strong { display:block; font-size:15px; line-height:1.6; }
.design-route li span { display:block; font-size:12px; line-height:1.8; color:#646a66; margin-top:5px; }
.design-route-note { font-size:10px; line-height:1.8; color:#797b73; margin:24px 0 0; }
.page-vishwas .design-decision { border-color:#6654bd; background:#f0eef8; }
.page-vishwas .design-route { border-color:#dfdbea; }
.page-vishwas .design-route li::before { color:#6654bd; }
.page-vishwas .design-decision .design-tradeoff { border-color:#dcd5eb; }
@media(max-width:560px) { .design-decision,.design-route { padding:22px 18px; } .design-route ol { grid-template-columns:1fr; gap:20px; } .design-decision h3 { font-size:16px; } }