/* externalized from badge.html (CSP: no inline) */
.badge-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 64px; }
h1.badge-h1 { font-family: var(--serif); font-size: 38px; font-weight: 500; margin: 32px 0 6px; color: var(--ink); }
p.badge-lede { font-size: 17px; color: var(--ink-2); line-height: 1.65; margin: 0 0 8px; }
.badge-section { margin-top: 36px; }
.badge-section h2 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); margin: 0 0 4px; letter-spacing: 0.01em; }
.badge-section h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink); margin: 18px 0 6px; }
.badge-section .section-rule { border-top: 1px solid var(--ink); width: 32px; margin: 10px 0 18px; opacity: 0.6; }
.badge-section p { color: var(--ink-2); line-height: 1.7; font-size: 15px; }
.badge-section ul { color: var(--ink-2); line-height: 1.75; font-size: 15px; padding-left: 22px; }
pre.snippet { background: var(--paper-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; font: 13px/1.55 var(--mono); color: var(--ink-2); }
.demo-box { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--paper-soft); margin: 12px 0; }
code.inline { font: 12px/1.4 var(--mono); background: var(--paper-soft); border: 1px solid var(--line-soft); padding: 1px 6px; border-radius: 4px; color: var(--ink-2); }
.pre-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 48px 0 8px; }
.contact-note { color: var(--muted); font-size: 13px; margin-top: 48px; }
.link-confirm { color: var(--confirm); }
.footer-inner { text-align: center; color: var(--muted); font-size: 13px; padding: 32px 0; }
.mt-8 { margin-top: 8px; }
.link-muted { color: var(--muted); }