:root {
  --app-max-width: 900px;
}

body > header.container,
body > main.container,
body > footer.container {
  max-width: var(--app-max-width);
}

.hero {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--pico-muted-border-color);
  margin-top: 2rem;
}

.result-box textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 14rem;
}

.inline-help {
  color: var(--pico-muted-color);
  font-size: 0.95rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.kpi {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
  font-size: 0.9rem;
}