/* Lead Dev: content styles (uses tokens.css; page shell is in layout.css) */
h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; }
h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-xl); margin: var(--space-5) 0 var(--space-3); padding-top: var(--space-2); border-top: var(--stripe) solid var(--accent); }
h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.lead { font-size: var(--text-lg); max-width: 46rem; }
p, li { max-width: 46rem; }
a { color: var(--accent-dark); }
main img { display: block; margin: var(--space-4) 0; }

.cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.cards li { max-width: none; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-left: var(--stripe) solid var(--accent); border-radius: var(--radius); }
.cards p { margin: 0; }

.quiz { display: flex; flex-wrap: wrap; gap: var(--space-2); }
main button { min-height: 44px; padding: var(--space-2) var(--space-4); background: var(--asphalt); color: var(--on-dark); border: 2px solid var(--asphalt); border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; }
main button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
#quiz-result, #steps-answer { min-height: 1.6em; font-weight: 700; }
.steps li { margin-bottom: var(--space-1); }

@media (prefers-color-scheme: dark) {
  a { color: var(--accent); }
  main button { border-color: var(--on-dark); }
}