/* Brand kit v4.1, dark (sec-root) palette. System fallbacks only: no third-party font requests. */
:root {
  --matcha: #000000; --matcha-light: #0E0C0C; --matcha-deep: #1B1918; --ash: #E8E4D4; --sand: #141211;
  --hunter: #6B8B5E; --signal: #7FCC6F; --rust: #B85450;
  --font-display: 'Libre Baskerville', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--matcha); color: var(--ash); font-family: var(--font-body); line-height: 1.6; }
.wrap { max-width: 880px; margin: 0 auto; padding: 72px 24px 96px; }
.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hunter); margin: 0 0 16px; }
.eyebrow a { color: inherit; text-decoration: none; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5vw, 48px); line-height: 1.15; margin: 0 0 20px; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 56px 0 16px; }
h3 { margin: 0 0 8px; font-size: 17px; }
.lead { font-size: 19px; max-width: 680px; color: var(--ash); opacity: 0.9; }
.muted { opacity: 0.7; font-size: 15px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { background: var(--matcha-light); border: 1px solid var(--matcha-deep); border-radius: 12px; padding: 22px; }
.card p { margin: 0 0 16px; font-size: 15px; }
.button { display: inline-block; background: var(--signal); color: var(--matcha); border: 0; border-radius: 8px; padding: 11px 18px;
  font: 600 15px var(--font-body); text-decoration: none; cursor: pointer; }
.button.secondary { background: var(--matcha-deep); color: var(--ash); }
.button:disabled { opacity: 0.5; cursor: progress; }
.link { color: var(--signal); text-decoration: none; font-size: 15px; }
code, textarea { font-family: var(--font-mono); font-size: 13px; }
code { word-break: break-all; }
.contracts { border-collapse: collapse; width: 100%; margin: 8px 0 16px; }
.contracts td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--matcha-deep); vertical-align: top; font-size: 15px; }
.row { display: flex; gap: 8px; }
input, textarea { flex: 1; width: 100%; background: var(--sand); color: var(--ash); border: 1px solid var(--matcha-deep); border-radius: 8px; padding: 10px 12px; }
label { display: block; margin-top: 12px; font-size: 14px; }
details summary { cursor: pointer; margin: 8px 0; }