.solution-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-block: 16px; border-bottom: 1px solid var(--ui-border); }
.solution-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 16px; color: var(--ui-muted); border-radius: var(--ui-radius); text-decoration: none; }
.solution-nav a[aria-current], .solution-nav a:hover { background: var(--ui-selected); color: var(--eco-accent); }
.solution-nav svg { width: 20px; height: 20px; flex-shrink: 0; }
.solution-comparison, .solution-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.solution-comparison h2 { margin-top: 16px; }
.solution-comparison ul { padding-left: 24px; margin-bottom: 0; color: var(--ui-muted); line-height: 1.7; }
.solution-comparison li + li { margin-top: 16px; }
.solution-flow, .solution-rollout { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.solution-flow li { border-top: 2px solid var(--eco-accent); padding-top: 24px; }
.solution-flow h3 { margin-block: 16px 8px; }
.solution-rollout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.solution-rollout p { margin-top: 16px; }
.solution-related { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.solutions-page [id] { scroll-margin-top: 96px; }
@media (max-width: 1000px) { .solution-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .solution-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution-nav a { font-size: 14px; padding: 8px; text-align: center; }
    .solution-comparison, .solution-roles, .solution-flow, .solution-rollout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}