/* BRX Academy — tokens mirror brx-one/static/css/brx-design/tokens.css (light only). */
:root {
  --canvas: #EEF1F8; --paper: #FFFFFF; --paper-2: #F7F8FC;
  --ink-900: #0E1726; --ink-600: #4A5568; --ink-300: #C5CBD6; --ink-150: #E7EAF0;
  --brx-navy: #032133; --brx-navy-2: #0A2F44;
  --brx-green: #95D600; --brx-green-ink: #4F7400; --brx-green-soft: #EAF6C7;
  --sky: #2F6BC7; --sky-soft: #E3ECFA;
  --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(3,33,51,.06), 0 1px 3px rgba(3,33,51,.08);
  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --stage-rookie: var(--sky); --stage-rookie-soft: var(--sky-soft);
  --stage-intermediate: var(--brx-green); --stage-intermediate-ink: var(--brx-green-ink); --stage-intermediate-soft: var(--brx-green-soft);
  --stage-pro: var(--brx-navy); --stage-pro-soft: #E6EAF3;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--ink-900); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
a { color: var(--sky); }
.ac-header { display: flex; align-items: center; gap: 24px; height: 44px; padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--ink-150); }
.ac-brand { font-family: var(--font-head); font-weight: 600; color: var(--brx-navy); }
.ac-tabs { display: flex; gap: 4px; overflow-x: auto; }
.ac-tab { padding: 10px 12px; color: var(--ink-600); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ac-tab.is-active { color: var(--ink-900); border-bottom-color: var(--brx-green); }
.ac-main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 48px; }
.ac-footer { padding: 12px 16px; color: var(--ink-600); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ac-hero { padding: 8px 0 24px; }
.ac-eyebrow { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-600); }
.ac-title { margin: 4px 0 8px; font-family: var(--font-head); font-size: 28px; color: var(--brx-navy); }
.ac-lead { margin: 8px 0 0; max-width: 60ch; color: var(--ink-600); }
.ac-chip { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--stage-pro-soft); color: var(--brx-navy); }
.ac-chip--rookie { background: var(--stage-rookie-soft); color: var(--stage-rookie); }
.ac-chip--intermediate { background: var(--stage-intermediate-soft); color: var(--stage-intermediate-ink); }
.ac-card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 20px 24px; }
.ac-empty h2 { margin: 0 0 4px; font-family: var(--font-head); font-size: 18px; color: var(--brx-navy); }
.ac-empty p { margin: 0; color: var(--ink-600); }
@media (max-width: 720px) { .ac-title { font-size: 22px; } .ac-main { padding: 16px 16px 40px; } }

.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ac-card--muted h2 { margin: 0 0 4px; font-family: var(--font-head); font-size: 16px; color: var(--brx-navy); }
.ac-card--muted p { margin: 0 0 10px; color: var(--ink-600); font-size: 14px; }