/* Levels Academy — Design System
   Global entry point. Consumers link THIS file.
   Keep this as a list of @import lines only. */

@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/base.css');

/* ---- Mobile / phone optimisations ---- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; }

@media (max-width: 760px) {
  /* Long contact links must wrap, not overflow */
  footer a[href^="mailto"],
  footer a[href^="tel"] { white-space: normal !important; overflow-wrap: anywhere; }
}

/* ---- Links ---- */
a { color: var(--evergreen-600); }
a:hover { color: var(--evergreen-700); }

/* ---- "Active tutor" live indicator (testimonials) ---- */
.la-pulse-dot {
  position: relative;
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: #46d39a;
  box-shadow: 0 0 0 1px color-mix(in oklab, #46d39a 60%, transparent);
}
.la-pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #46d39a;
  animation: la-pulse 1.9s cubic-bezier(.16,.84,.44,1) infinite;
}
@keyframes la-pulse {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .la-pulse-dot::after { animation: none; }
}

/* Brass variant, used in the enrolment announcement bar */
.la-pulse-dot--brass { background: var(--brass-400); box-shadow: 0 0 0 1px color-mix(in oklab, var(--brass-400) 60%, transparent); }
.la-pulse-dot--brass::after { background: var(--brass-400); }