Restructure course landing page into data-driven sections

Splits the single hardcoded-feeling course template into hero,
credibility, curriculum, and repeat-CTA sections, each rendering only
when its front matter fields are set. The enroll form (and its
EEC-trigger JS) moves into a reusable partial so it can appear more
than once on a page without id collisions.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

assets/css/main.css

@@ -233,3 +233,73 @@ input:focus, textarea:focus {
   height: 1px;
   overflow: hidden;
 }
+
+/* Course landing pages (layouts/courses/single.html) */
+.course-hero {
+  text-align: center;
+}
+.course-subhead {
+  font-style: italic;
+  color: var(--fg-muted);
+  margin-top: 0;
+}
+.course-value-prop {
+  font-size: 1.05rem;
+  margin: 1.5rem 0;
+}
+.course-social-proof {
+  font-style: italic;
+  font-size: 0.9rem;
+  color: var(--fg-muted);
+}
+.enroll-form {
+  max-width: 24rem;
+  margin: 1.5rem auto;
+  text-align: left;
+}
+.enroll-status {
+  text-align: center;
+}
+
+.course-credibility,
+.course-curriculum {
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  margin: 3rem 0;
+}
+.course-bullets {
+  list-style: none;
+  padding: 0;
+  margin: 1.5rem 0 0;
+}
+.course-bullets li {
+  position: relative;
+  padding-left: 1.75rem;
+  margin-bottom: 0.75rem;
+}
+.course-bullets li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: var(--cta);
+  font-weight: 700;
+}
+.course-curriculum-list {
+  list-style: none;
+  padding: 0;
+  margin: 1.5rem 0 0;
+}
+.course-curriculum-list li {
+  margin-bottom: 1rem;
+}
+.course-day-label {
+  font-family: var(--font-heading);
+  color: var(--cta);
+  font-weight: 700;
+}
+.course-repeat-cta {
+  text-align: center;
+  margin-top: 3rem;
+}