/* ---------- CLASSES (upcoming confirmed) ---------- */
.classes { background: var(--surface-page); }

/* Section-head layout lives in base.css. Color + CTA rules below. */
.section-head-cta {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.2;
  font-weight: var(--font-bold);
  color: var(--blue-600);
  white-space: nowrap;
  text-decoration: none;
  margin-top: calc(var(--space-4) + var(--leading-xs));
  transition: color var(--duration-fast) var(--ease-out);
}
.section-head-cta .ms { font-size: 18px; transition: transform var(--duration-base) var(--ease-out); }
.section-head-cta:hover { color: var(--darkblue); }
.section-head-cta:hover .ms { transform: translateX(4px); }
.section-head h2,
.h-3xl {
  color: var(--gray-900);
}
.section-head h2 .serif-em,
.h-3xl .serif-em {
  color: var(--blue-600);
  font-weight: var(--font-bold);
  font-style: normal;
}
.hero h1 { color: var(--white); }
.aip .section-head h2,
.aip h2 { color: var(--white); }
.aip h2 .serif-em { color: var(--aqua-500); font-style: normal; font-weight: var(--font-bold); }

/* Tab-row dot indicator (used by the Find Courses tab strip) */
.tr-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.tr-dot:hover { background: var(--gray-300); }
.tr-dot.is-active { background: var(--blue-600); }

/* RESPONSIVE */
@media (max-width: 767px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}