:root {
  --font-heading: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); text-wrap: pretty; }
a { color: oklch(55% 0.18 250); text-decoration: none; }
a:hover { color: oklch(48% 0.18 250); }
input, textarea, select, button { font-family: var(--font-body); }
::placeholder { color: oklch(60% 0.02 250); }
img { max-width: 100%; }

.chip {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid oklch(88% 0.01 250);
  background: white;
  color: oklch(35% 0.02 250);
  font-family: var(--font-body);
}
.chip-active {
  border-color: oklch(55% 0.18 250);
  background: oklch(55% 0.18 250);
  color: white;
}

@media (max-width: 800px) {
  header { padding: 14px 20px !important; }
  section, main { padding-left: 20px !important; padding-right: 20px !important; }
  .course-detail-grid, .about-hero-grid, .contact-grid, .checkout-grid {
    grid-template-columns: 1fr !important;
  }
  .course-detail-grid aside { position: static !important; top: auto !important; }
}