*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { min-height: 100vh; padding-bottom: 80px; }

.container { max-width: 880px; margin: 0 auto; padding: 32px 24px; }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }

.section { margin-bottom: 48px; }
.section-head { margin-bottom: 24px; }
.section-head h2 { font-size: 32px; line-height: 1.15; margin-top: 8px; }
.section-head p.lede { font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 12px; max-width: 60ch; }

.card {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--jade);
  background: var(--jade);
  color: var(--paper);
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--jade-deep); }
.btn-ghost { background: transparent; color: var(--jade); }
.btn-ghost:hover { background: var(--jade); color: var(--paper); }
.btn-jasper { background: var(--jasper); color: var(--ink); border-color: var(--jasper); }
.btn-jasper:hover { background: var(--jasper-dim); border-color: var(--jasper-dim); }

.divider { height: 1px; background: var(--line); margin: 32px 0; }

.mono { font-family: 'JetBrains Mono', monospace; }

@media (max-width: 640px) {
  .container { padding: 24px 16px; }
  .section-head h2 { font-size: 26px; }
}