/* course page */
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.meta-row span { font: 12px var(--mono); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--muted); }
.meta-row span b { color: var(--accent); font-weight: 500; }
.fit { display: grid; gap: 16px; }
@media (min-width: 720px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit > div { border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.fit .no { list-style: none; padding: 0; margin: 0; }
.fit .no li { padding: 6px 0 6px 26px; position: relative; font-size: 15px; color: var(--muted); }
.fit .no li::before { content: "×"; position: absolute; left: 0; color: var(--muted); font-family: var(--mono); }
.fit .no a { color: var(--accent); }
.stack { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stack { grid-template-columns: repeat(4, 1fr); } }
.stack div { border: 1px solid var(--line); border-radius: 10px; padding: 20px 16px; background: var(--bg-2); }
.stack .ico { display: block; margin-bottom: 12px; }
.stack b { display: block; font: 600 14px var(--mono); color: var(--fg); margin-bottom: 2px; }
.stack span { font-size: 14px; color: var(--muted); }
.how { display: grid; gap: 16px; }
@media (min-width: 900px) { .how { grid-template-columns: repeat(3, 1fr); } }
.how div { border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.how .ico { width: 36px; height: 36px; margin-bottom: 14px; }
.how a { color: var(--accent); }
.how p { margin: 0; color: var(--muted); font-size: 15px; }
.teacher { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .teacher { grid-template-columns: 280px 1fr; } }
.teacher .portrait { max-width: 280px; }
.teacher p { margin: 0 0 16px; }
.final { text-align: center; }
.final .price-card { max-width: 440px; margin: 0 auto; text-align: left; position: static; }
.excluded { margin-top: 16px; border: 1px dashed var(--line); border-radius: 12px; padding: 20px 24px; }
.excluded .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.excluded .tags span { font: 12px var(--mono); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--muted); }
.excluded p { margin: 0; font-size: 14px; color: var(--muted); }
.links a.nav-cta { color: var(--accent); }
.teacher .stats { margin-top: 24px; }
.final .sub { margin-left: auto; margin-right: auto; }
/* Roadmap left to right on wide screens: stations on a horizontal line. */
@media (min-width: 900px) {
  .road.across { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .road.across::before { left: 28px; right: 28px; top: 27px; bottom: auto; width: auto; height: 2px;
                         background: linear-gradient(to right, var(--line), var(--accent)); }
  .road.across li { flex-direction: column; align-items: flex-start; gap: 14px; }
}