/* ══════════════════════════════════════════════════════════ DevPath — index.css STRUCTURE: 1. Fonts & Tokens — design variables, used everywhere 2. Reset — box-sizing, scroll 3. Body — shared base for shell + study pages 4. NAV SHELL — .nav, .nav-tab, .frame-shell (index.html only) 5. STUDY PAGE BASE — hero, filter, plan-body, cards (study/*.html) 6. DRAWER — slide-in detail panel (study/*.html) 7. Responsive — breakpoints ADDING A NEW PLAN: - Create study/your-plan.html and link this file. - If the plan needs unique styles, add a scoped block at the very bottom of this file: - Never add inline