.hiw-hero { background: var(--color-bg); color: var(--color-text); padding: var(--space-10) 0 calc(var(--space-10) + var(--space-6)); }
.hiw-hero h1 { font-size: var(--font-size-display); color: var(--color-text); max-width: 20ch; }
.hiw-hero p.lede { margin-top: var(--space-4); font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 56ch; }
.hiw-hero__rail { display: flex; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; }
.hiw-hero__rail span { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.hiw-hero__rail strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }

.deepstep__lede { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-lg); max-width: 64ch; }

.weight-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.weight-legend__item { font-size: var(--font-size-sm); }
.weight-legend__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--space-2); }
.weight-legend__count { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }

.evidence-panel--bad pre .tok-danger { color: var(--color-danger); }
.evidence-panel--good pre .tok-success { color: var(--color-success); }

.fix-diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-6); align-items: stretch; margin-top: var(--space-8); }
.fix-diff__arrow { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--font-size-lg); }
.fix-diff__panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.fix-diff__panel p.tag { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--font-weight-semibold); }
.fix-diff__panel--fail p.tag { color: var(--color-danger); }
.fix-diff__panel--fix p.tag { color: var(--color-accent-text); }
.fix-diff__panel h3 { font-size: var(--font-size-base); margin-top: var(--space-2); }
.fix-diff__panel pre { margin-top: var(--space-4); background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface)); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--font-family-mono); font-size: var(--font-size-xs); border: 1px solid var(--color-border); }
.fix-diff__panel mark { background: color-mix(in srgb, var(--color-warning) 20%, transparent); color: var(--color-warning); padding: 0 2px; border-radius: 2px; }

@media (max-width: 860px) {
  .weight-legend { grid-template-columns: repeat(2, 1fr); }
  .fix-diff { grid-template-columns: 1fr; }
  .fix-diff__arrow { transform: rotate(90deg); }
}