/* ============================================================
   AccelaStudy AI ACES — page-specific component layer.
   Loaded AFTER the shared /css/style.css (via Custom.ExtraStylesheets in
   site.yml) so ACES adds its own components without shadowing the shared
   design tokens, dark-mode contrast fixes, or focus/skip-link rules that
   live in websites/accelastudy.ai/_shared/source/assets/css/style.css.
   Do NOT redefine :root / .dark custom properties here — that is exactly
   the drift the shared overlay exists to prevent (see the 2026-07-31
   enterprise.accelastudy.ai fix, and site.yml's SharedContent comment).
   ============================================================ */

/* ---------- ACES tier badges (Trainee .. Ace) ---------- */
.tier-trainee       { background: hsla(215 16% 60% / 0.15); color: hsl(215 16% 40%); }
.dark .tier-trainee  { color: hsl(215 16% 72%); }
.tier-apprentice    { background: hsla(263 70% 58% / 0.15); color: hsl(263 60% 42%); }
.dark .tier-apprentice { color: hsl(263 80% 78%); }
.tier-practitioner  { background: hsla(217 91% 60% / 0.15); color: hsl(217 80% 42%); }
.dark .tier-practitioner { color: hsl(217 91% 75%); }
.tier-specialist    { background: hsla(189 94% 43% / 0.15); color: hsl(189 90% 28%); }
.dark .tier-specialist { color: hsl(189 94% 70%); }
.tier-expert        { background: hsla(142 71% 45% / 0.15); color: hsl(142 71% 27%); }
.dark .tier-expert   { color: hsl(142 71% 65%); }
.tier-sr-expert     { background: hsla(38 96% 40% / 0.15); color: hsl(38 96% 30%); }
.dark .tier-sr-expert { color: hsl(45 96% 68%); }
.tier-principal     { background: hsla(25 95% 53% / 0.15); color: hsl(25 90% 34%); }
.dark .tier-principal { color: hsl(25 95% 68%); }
.tier-distinguished { background: hsla(0 84% 60% / 0.15); color: hsl(0 74% 40%); }
.dark .tier-distinguished { color: hsl(0 84% 75%); }
.tier-ace {
  background: linear-gradient(135deg, hsla(39 100% 40% / 0.22), hsla(0 74% 45% / 0.22));
  color: hsl(var(--accent));
}
.dark .tier-ace { color: hsl(207 55% 78%); }

/* ---------- Pricing "not included" row (Free / Professional tier tables) ---------- */
.pricing-unavailable {
  text-decoration: line-through;
  color: hsl(var(--muted-foreground));
}
.pricing-unavailable::before {
  content: '\2717 ';
}