/* /lead only: small additions on top of site.css. Same tokens, no new fonts,
   no new colours. Everything else on the page reuses site.css classes. */
.hero-art svg { width: 100%; height: 100%; }
.lead-diagram .d-line { fill: none; stroke: var(--line); stroke-width: 1.5; }
.lead-diagram .d-flow { fill: none; stroke: var(--fg-2); stroke-width: 1.25; }
.lead-diagram .d-head { fill: var(--fg-2); }
.lead-diagram .d-lead { fill: #202326; stroke: var(--accent); stroke-width: 1.5; }
.lead-diagram .d-box { fill: var(--bg); stroke: var(--line); stroke-width: 1.25; }
.lead-diagram .d-you { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.lead-diagram .d-title { fill: var(--fg); font: 500 20px var(--font-display); letter-spacing: -.02em; }
.lead-diagram .d-name { fill: var(--fg); font: 500 15px var(--font-display); letter-spacing: -.01em; }
.lead-diagram .d-chip { fill: var(--accent); font: 400 11px var(--font-mono); letter-spacing: .04em; }
.lead-diagram .d-meta { fill: var(--fg-2); font: 400 10px var(--font-mono); }
.lead-diagram .d-note { fill: var(--fg-2); font: 400 11px var(--font-body); }
.lead-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
.lead-pair .card h3 { margin-bottom: 10px; }
.lead-pair .card p { font-size: .9rem; color: var(--fg-2); }
.lead-who { margin-top: 12px; }
.lead-who caption { text-align: left; padding-bottom: 10px; color: var(--fg); font: 500 1.05rem var(--font-display); letter-spacing: -.02em; }
.story-sec .go-steps { margin-top: 0; }
.lead-soon { display: inline-block; margin-left: 10px; padding: 2px 7px; border: 1px solid #5d673c; border-radius: 4px; color: var(--accent); font: 400 .68rem var(--font-body); vertical-align: middle; }
@media (max-width: 600px) {
  .lead-pair { grid-template-columns: 1fr; }
}
.lead-diagram-fig { max-width: 760px; margin: 40px auto 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #17191b; }
.lead-diagram-fig .lead-diagram { display: block; width: 100%; height: auto; }