main { max-width: 720px; margin: 0 auto; padding: 24px var(--inset) 80px; color: #D6D6D3; line-height: 1.65; }
h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; margin-bottom: 10px; }
h2 { font-size: 20px; font-weight: 700; color: #FFFFFF; margin: 40px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 15px; font-weight: 700; color: #FFFFFF; margin: 22px 0 6px; }
p, li { margin-bottom: 12px; font-size: 15px; }
ul { padding-left: 22px; }
.meta { color: var(--muted); font-size: 14px; margin-bottom: 32px; }
.lead { color: #FFFFFF; font-size: 17px; line-height: 1.6; margin-bottom: 28px; }
.callout { background: rgba(75, 156, 120, 0.12); border-left: 3px solid var(--primary);
  padding: 16px 18px; border-radius: 8px; margin: 24px 0; }
.callout p:last-child { margin-bottom: 0; }
main a { color: var(--info); text-decoration: none; }
main a:hover { text-decoration: underline; }

@media (max-width: 1193px) {
  main { padding: 8px var(--inset) 40px; }
  h1 { font-size: 32px; }
}