/* Landing-page-only styles. Tokens and chrome come from base.css. */

.home-hero { max-width: 46rem; }
.home-hero h1 { margin-bottom: 1.1rem; }
.home-hero .lede + .lede { margin-top: -.6rem; }
.home-hero code {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: 5px; padding: .08em .34em; font-size: .86em;
}

main > section { margin-bottom: 3rem; }

/* ----------------------------------------------------------- course card */
.course-card {
  display: flex; align-items: flex-start; gap: 1.25rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
  color: var(--text); box-shadow: var(--shadow);
  transition: border-color .14s, transform .1s;
}
.course-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  text-decoration: none; transform: translateY(-2px);
}
.course-mark { flex: none; font-size: 2rem; line-height: 1; }
.course-body { flex: 1; min-width: 0; }
.course-title { display: block; font-size: 1.25rem; font-weight: 640; letter-spacing: -.02em; margin-bottom: .35rem; }
.course-blurb { display: block; color: var(--text-dim); font-size: .93rem; line-height: 1.6; max-width: 42rem; }
.course-blurb code {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: 5px; padding: .08em .32em; font-size: .86em; font-family: var(--mono);
}
.course-stats {
  display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .9rem;
  font-family: var(--mono); font-size: .78rem; color: var(--text-faint);
}
.course-stats strong { color: var(--accent); font-weight: 600; }
.course-go {
  flex: none; align-self: center; font-weight: 600; font-size: .9rem;
  color: var(--accent); white-space: nowrap;
}

/* ----------------------------------------------------------------- steps */
.steps {
  list-style: none; counter-reset: step; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; margin-bottom: .7rem;
  border-radius: 7px; background: var(--surface-hi); border: 1px solid var(--border);
  font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--accent);
}
.steps h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 620; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--text-dim); font-size: .9rem; line-height: 1.6; }

.prose { max-width: 46rem; color: var(--text-dim); }
.prose + .prose { margin-top: -.4rem; }

@media (max-width: 640px) {
  .course-card { flex-direction: column; gap: .9rem; }
  .course-go { align-self: flex-start; }
}