section { margin-bottom: 48px; }
section h1 { font-size: 28px; margin-bottom: 8px; color: var(--text); }
section h2 {
  font-size: 20px; margin: 32px 0 12px; color: var(--text);
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
section h3 { font-size: 15px; margin: 20px 0 8px; color: var(--accent2); font-weight: 600; }
section p, section li { font-size: 14px; line-height: 1.7; color: var(--text2); }
section p { margin-bottom: 12px; }
section ul, section ol { padding-left: 20px; margin-bottom: 12px; }
section li { margin-bottom: 4px; }
section strong { color: var(--text); }
.lead { font-size: 16px; color: var(--text); line-height: 1.6; margin-bottom: 20px; }
.callout {
  background: var(--surface2); border-left: 3px solid var(--accent);
  padding: 14px 18px; border-radius: 0 6px 6px 0; margin: 16px 0; font-size: 13px;
}
.callout.warn { border-left-color: var(--orange); }
.callout.success { border-left-color: var(--green); }
pre {
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px; margin: 12px 0;
  overflow-x: auto; position: relative;
}
code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12.5px; color: var(--accent2); }
pre code { color: var(--text2); }
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); padding: 3px 8px; border-radius: 4px;
  font-size: 11px; cursor: pointer;
}
.copy-btn:hover { color: var(--text); }