/* Setup / onboarding marketing page — a few layout helpers on top of landing.css. */

.setup-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 820px) {
  .setup-steps { grid-template-columns: 1fr; }
}

/* Two-up: folder tree beside the plain-English "what each file is". */
.setup-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 860px) {
  .setup-two { grid-template-columns: 1fr; }
}

.file-note { padding: 20px; display: grid; gap: 18px; align-content: start; }
.file-note .fn { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
.file-note p { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.6; }

/* The big config sample reads better a touch narrower than full width. */
.config-card.wide pre { font-size: 13px; line-height: 1.85; }

/* In-prose links (the global reset makes <a> inherit colour) — make them visible. */
.step p a, .file-note p a, .lede a {
  color: var(--signal-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-bright);
  transition: color 0.2s;
}
.step p a:hover, .file-note p a:hover, .lede a:hover { color: var(--signal); text-decoration-color: var(--signal); }