diff --git a/Recommendation_Letter_Generator.html b/Recommendation_Letter_Generator.html
new file mode 100644
index 0000000..a8ddf4f
--- /dev/null
+++ b/Recommendation_Letter_Generator.html
@@ -0,0 +1,1197 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Recommendation Letter Generator — Genesee Learning Lab</title>
+  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+  <link rel="stylesheet" href="styles.css" />
+  <style>
+    :root {
+      --bg: #0b0c0f;
+      --card: #12141a;
+      --muted: #c4ccda;
+      --text: #e8ecf2;
+      --primary: #4f8cff;
+      --primary-weak: #2a5bd7;
+      --accent: #22b07d;
+      --danger: #ff6b6b;
+      --border: #1e2230;
+      --shadow: 0 6px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
+    }
+
+    [data-theme="light"] {
+      --bg: #f5f5f5;
+      --card: #ffffff;
+      --muted: #4a4a4a;
+      --text: #1a1a1a;
+      --primary: #0052cc;
+      --primary-weak: #003fa3;
+      --accent: #28a745;
+      --danger: #dc3545;
+      --border: #d0d0d0;
+      --shadow: 0 2px 8px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08);
+    }
+
+    [data-theme="high-contrast"] {
+      --bg: #000;
+      --card: #000;
+      --muted: #f2f2f2;
+      --text: #fff;
+      --primary: #0ff;
+      --primary-weak: #0cf;
+      --accent: #0c0;
+      --danger: #f00;
+      --border: #fff;
+      --shadow: 0 2px 4px rgba(255,255,255,.3);
+    }
+
+    html, body { height: 100%; }
+
+    body {
+      margin: 0;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+      background: radial-gradient(1200px 800px at 90% -10%, #1a2235 0%, var(--bg) 35%),
+                  radial-gradient(1000px 600px at -10% 110%, #16202e 0%, transparent 40%) var(--bg);
+      color: var(--text);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    [data-theme="light"] body { background: #f5f5f5; }
+    [data-theme="high-contrast"] body { background: #000; }
+
+    .wrap {
+      max-width: 860px;
+      margin: 32px auto;
+      padding: 0 16px 60px;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px; height: 1px;
+      padding: 0; margin: -1px;
+      overflow: hidden;
+      clip: rect(0,0,0,0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .title h1 { font-size: 22px; margin: 0; }
+    .title p  { margin: 0; font-size: 13px; color: var(--muted); }
+
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+
+    .card {
+      background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 22px 24px;
+      box-shadow: var(--shadow);
+      margin-bottom: 16px;
+    }
+
+    .card-title {
+      margin: 0 0 16px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--primary);
+      text-transform: uppercase;
+      letter-spacing: .05em;
+    }
+
+    label {
+      display: block;
+      font-size: 13px;
+      font-weight: 600;
+      margin-bottom: 5px;
+      color: var(--muted);
+    }
+
+    input[type="text"],
+    select,
+    textarea {
+      width: 100%;
+      background: var(--card);
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: inherit;
+      box-sizing: border-box;
+    }
+
+    textarea { resize: vertical; min-height: 90px; }
+
+    input[type="text"]:focus,
+    select:focus,
+    textarea:focus {
+      outline: 3px solid var(--primary);
+      outline-offset: 2px;
+    }
+
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 14px;
+      margin-bottom: 14px;
+    }
+
+    .form-group { margin-bottom: 14px; }
+
+    .trait-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 8px;
+    }
+
+    .trait-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 8px 10px;
+      cursor: pointer;
+      transition: border-color .15s, background .15s;
+    }
+
+    .trait-item:hover { border-color: var(--primary); }
+
+    .trait-item input[type="checkbox"] {
+      width: 16px; height: 16px;
+      accent-color: var(--primary);
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+
+    .trait-item.checked {
+      border-color: var(--primary);
+      background: rgba(79,140,255,.08);
+    }
+
+    .trait-label { font-size: 13px; cursor: pointer; }
+
+    button {
+      background: var(--card);
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 10px 18px;
+      font-size: 14px;
+      font-family: inherit;
+      cursor: pointer;
+      min-height: 44px;
+      transition: opacity .15s;
+    }
+
+    button:hover { opacity: .85; }
+
+    button:focus-visible {
+      outline: 3px solid var(--primary);
+      outline-offset: 2px;
+    }
+
+    button.primary {
+      background: linear-gradient(180deg, var(--primary) 0%, var(--primary-weak) 100%);
+      border: none;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    button:disabled { opacity: .45; cursor: not-allowed; }
+
+    .btn-row {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-top: 8px;
+    }
+
+    #letterOutput {
+      display: none;
+    }
+
+    .letter-box {
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 32px 36px;
+      font-size: 15px;
+      line-height: 1.75;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-family: Georgia, "Times New Roman", serif;
+      color: var(--text);
+    }
+
+    [data-theme="light"] .letter-box {
+      background: #fff;
+      color: #111;
+    }
+
+    .letter-box p { margin: 0 0 1.2em; }
+
+    .notice {
+      font-size: 12px;
+      color: var(--muted);
+      margin-top: 10px;
+      padding: 10px 14px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: rgba(255,255,255,.02);
+    }
+
+    .badge-row {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      margin-top: 6px;
+    }
+
+    .badge {
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: rgba(79,140,255,.12);
+      border: 1px solid rgba(79,140,255,.25);
+      color: var(--primary);
+      font-size: 11px;
+      font-weight: 600;
+    }
+
+    .divider {
+      border: none;
+      border-top: 1px solid var(--border);
+      margin: 20px 0;
+    }
+
+    @media print {
+      body { background: #fff !important; color: #000 !important; }
+      .no-print { display: none !important; }
+      .letter-box {
+        border: none !important;
+        padding: 0 !important;
+        background: #fff !important;
+        color: #000 !important;
+        font-size: 13pt;
+        line-height: 1.7;
+      }
+      .wrap { max-width: 100%; margin: 0; padding: 0; }
+    }
+
+    @media (max-width: 540px) {
+      .form-row { grid-template-columns: 1fr; }
+      .letter-box { padding: 20px 18px; }
+    }
+  </style>
+</head>
+
+<body>
+  <a class="skip-link" href="#main-content">Skip to main content</a>
+
+  <!-- NAVIGATION -->
+  <nav class="site-nav" aria-label="Main navigation">
+    <div class="nav-inner">
+      <a href="index.html" class="nav-brand" aria-label="Genesee Learning Lab — Home">
+        <span class="nav-brand-icon" aria-hidden="true">GL</span>
+        Genesee Learning Lab
+      </a>
+      <button class="nav-toggle" aria-expanded="false" aria-controls="primary-nav-list" aria-label="Open navigation menu">&#9776;</button>
+      <ul id="primary-nav-list" class="nav-links" role="list">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="projects.html" aria-current="page">Projects</a></li>
+        <li><a href="programs.html">Programs</a></li>
+        <li><a href="contact.html">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <main id="main-content" tabindex="-1">
+    <div class="wrap">
+      <header class="no-print">
+        <div class="title">
+          <h1>Recommendation Letter Generator</h1>
+          <p>Generate a personalized, unique letter based on student information.</p>
+        </div>
+        <div class="controls">
+          <button id="themeBtn" aria-label="Switch color theme">🎨 Theme</button>
+        </div>
+      </header>
+
+      <!-- FORM -->
+      <section class="card no-print" aria-labelledby="form-heading">
+        <h2 class="card-title" id="form-heading">Student Information</h2>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="firstName">First Name <span aria-hidden="true">*</span></label>
+            <input type="text" id="firstName" placeholder="e.g. Jordan" autocomplete="off" required />
+          </div>
+          <div class="form-group">
+            <label for="lastName">Last Name <span aria-hidden="true">*</span></label>
+            <input type="text" id="lastName" placeholder="e.g. Rivera" autocomplete="off" required />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="classSelect">Class <span aria-hidden="true">*</span></label>
+            <select id="classSelect">
+              <option value="">— Select a class —</option>
+              <option value="intro-cs">Intro to Computer Science</option>
+              <option value="intro-hw">Intro to Computer Hardware</option>
+              <option value="ap-csa">AP Computer Science A</option>
+              <option value="adv-hw">Advanced Computer Hardware</option>
+              <option value="intro-cyber">Intro to Cybersecurity</option>
+              <option value="ap-cyber">AP Cybersecurity</option>
+              <option value="ai-found">AI Foundations</option>
+              <option value="intro-sd">Intro to Software Development</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="purposeSelect">Purpose <span aria-hidden="true">*</span></label>
+            <select id="purposeSelect">
+              <option value="">— Select a purpose —</option>
+              <option value="scholarship">Scholarship Application</option>
+              <option value="college">College / University Admission</option>
+              <option value="employment">Employment or Internship</option>
+              <option value="honor-society">Honor Society</option>
+              <option value="program">Competitive Program Admission</option>
+              <option value="award">Award or Recognition Nomination</option>
+            </select>
+          </div>
+        </div>
+
+        <hr class="divider" />
+        <h2 class="card-title" id="traits-heading">Student Traits</h2>
+        <p style="font-size:13px;color:var(--muted);margin:0 0 12px;">Select two to five traits that best describe this student.</p>
+        <div class="trait-grid" id="traitGrid" role="group" aria-labelledby="traits-heading">
+          <!-- populated by JS -->
+        </div>
+
+        <hr class="divider" />
+        <h2 class="card-title">Optional: Custom Detail</h2>
+        <div class="form-group">
+          <label for="customParagraph">Additional context, story, or detail (optional)</label>
+          <textarea id="customParagraph" placeholder="e.g. Jordan led the class team project to rebuild a server from spare parts, and was the first student to complete the advanced troubleshooting challenge…"></textarea>
+        </div>
+
+        <div class="btn-row">
+          <button class="primary" id="generateBtn">✉️ Generate Letter</button>
+          <button id="clearBtn">Clear Form</button>
+        </div>
+
+        <p id="formError" role="alert" style="color:var(--danger);font-size:13px;margin-top:8px;display:none;"></p>
+      </section>
+
+      <!-- OUTPUT -->
+      <section id="letterOutput" aria-labelledby="output-heading">
+        <div class="card no-print" style="padding:16px 20px;">
+          <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
+            <div>
+              <h2 id="output-heading" style="margin:0 0 4px;font-size:17px;">Generated Letter</h2>
+              <div class="badge-row" id="outputBadges"></div>
+            </div>
+            <div class="btn-row" style="margin:0;">
+              <button id="regenerateBtn">🔄 Regenerate</button>
+              <button id="copyBtn">📋 Copy</button>
+              <button id="printBtn">🖨️ Print</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="letter-box" id="letterText" aria-live="polite"></div>
+
+        <p class="notice no-print">
+          ⚠️ Review this letter before use. Edit as needed to reflect the student's actual accomplishments and your authentic voice as their teacher.
+        </p>
+      </section>
+    </div>
+  </main>
+
+  <!-- FOOTER -->
+  <footer class="site-footer no-print" aria-labelledby="rec-footer-heading">
+    <div class="footer-inner">
+      <h2 id="rec-footer-heading" class="sr-only">Site Footer</h2>
+      <div class="footer-grid">
+        <div>
+          <p class="footer-brand">Genesee Learning Lab</p>
+          <p class="footer-tagline">Hands-on computer science and technology education for students, families, and communities across Genesee County.</p>
+        </div>
+        <nav aria-label="Footer navigation: Site">
+          <div class="footer-col">
+            <h4>Site</h4>
+            <ul role="list">
+              <li><a href="index.html">Home</a></li>
+              <li><a href="projects.html">Projects</a></li>
+              <li><a href="programs.html">Programs</a></li>
+              <li><a href="contact.html">Contact</a></li>
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="footer-bottom">
+        <span>&copy; 2026 Genesee Learning Lab. All rights reserved.</span>
+        <span>Built for students, families, and community.</span>
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    // ─── Theme toggle ───────────────────────────────────────────────────────────
+    const THEMES = ['', 'light', 'high-contrast'];
+    let themeIdx = 0;
+    document.getElementById('themeBtn').addEventListener('click', () => {
+      themeIdx = (themeIdx + 1) % THEMES.length;
+      const t = THEMES[themeIdx];
+      document.documentElement.setAttribute('data-theme', t);
+      document.getElementById('themeBtn').textContent = t === 'light' ? '🌙 Theme' : t === 'high-contrast' ? '🎨 Theme' : '☀️ Theme';
+    });
+
+    // ─── Nav toggle ──────────────────────────────────────────────────────────────
+    (function () {
+      const toggle = document.querySelector('.nav-toggle');
+      const navList = document.getElementById('primary-nav-list');
+      if (!toggle || !navList) return;
+      toggle.addEventListener('click', function () {
+        const isOpen = navList.classList.toggle('is-open');
+        toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        toggle.setAttribute('aria-label', isOpen ? 'Close navigation menu' : 'Open navigation menu');
+      });
+      navList.addEventListener('click', function (e) {
+        if (e.target.tagName === 'A') {
+          navList.classList.remove('is-open');
+          toggle.setAttribute('aria-expanded', 'false');
+          toggle.setAttribute('aria-label', 'Open navigation menu');
+        }
+      });
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && navList.classList.contains('is-open')) {
+          navList.classList.remove('is-open');
+          toggle.setAttribute('aria-expanded', 'false');
+          toggle.setAttribute('aria-label', 'Open navigation menu');
+          toggle.focus();
+        }
+      });
+    }());
+
+    // ─── Data ────────────────────────────────────────────────────────────────────
+
+    const CLASS_DATA = {
+      'intro-cs': {
+        name: 'Intro to Computer Science',
+        subject: 'computer science',
+        keywords: ['problem-solving', 'programming foundations', 'logical thinking', 'persistence'],
+        classDesc: [
+          'foundational programming and computational thinking',
+          'introductory computer science concepts and coding fundamentals',
+          'core principles of programming and algorithmic problem-solving',
+        ],
+        classAction: [
+          'building foundational programming skills and learning to think like a developer',
+          'tackling coding challenges with genuine curiosity and methodical thinking',
+          'developing the logical mindset that sits at the heart of computer science',
+          'navigating early programming concepts with persistence and attention to detail',
+        ],
+        strengthPhrase: [
+          'demonstrated a natural aptitude for logical thinking and problem decomposition',
+          'shown a consistent ability to break complex problems into manageable steps',
+          'approached every programming challenge with patience and a growth mindset',
+          'built a strong foundation in coding that will serve them well in any technical path',
+        ],
+      },
+
+      'intro-hw': {
+        name: 'Intro to Computer Hardware',
+        subject: 'computer hardware',
+        keywords: ['hardware fundamentals', 'troubleshooting', 'professionalism', 'hands-on technical work'],
+        classDesc: [
+          'computer hardware fundamentals and hands-on technical skills',
+          'hands-on hardware repair, maintenance, and troubleshooting',
+          'foundational IT support skills and hardware diagnostics',
+        ],
+        classAction: [
+          'disassembling, diagnosing, and rebuilding computer systems with care and precision',
+          'applying structured troubleshooting methods to real hardware problems',
+          'developing the kind of hands-on technical professionalism that employers look for',
+          'working confidently with physical components while maintaining a professional workspace',
+        ],
+        strengthPhrase: [
+          'demonstrated the technical patience and careful attention to detail that hardware work demands',
+          'shown an ability to stay organized and methodical under the pressure of live diagnostics',
+          'brought a professional attitude to every lab exercise, treating each component with respect',
+          'developed genuine troubleshooting instincts that go beyond simply following a checklist',
+        ],
+      },
+
+      'ap-csa': {
+        name: 'AP Computer Science A',
+        subject: 'AP-level computer science',
+        keywords: ['Java programming', 'abstraction', 'algorithms', 'debugging', 'academic rigor'],
+        classDesc: [
+          'rigorous AP Computer Science A curriculum, including Java programming, object-oriented design, and algorithmic thinking',
+          'college-level Java programming, data structures, and computational problem-solving',
+          'advanced programming concepts including abstraction, inheritance, and algorithm analysis',
+        ],
+        classAction: [
+          'writing well-structured Java programs and reasoning through complex algorithmic problems',
+          'applying object-oriented design principles to build clean, maintainable code',
+          'approaching challenging AP-level material with academic discipline and intellectual curiosity',
+          'debugging intricate programs and refining their solutions under college-course expectations',
+        ],
+        strengthPhrase: [
+          'consistently applied strong analytical reasoning to design and debug complex programs',
+          'demonstrated the kind of academic rigor and precision that AP Computer Science demands',
+          'shown an impressive capacity to hold multiple layers of abstraction in mind while solving problems',
+          'excelled at translating high-level problem statements into efficient, well-documented code',
+        ],
+      },
+
+      'adv-hw': {
+        name: 'Advanced Computer Hardware',
+        subject: 'advanced hardware and IT systems',
+        keywords: ['advanced troubleshooting', 'systems thinking', 'repair processes', 'technical independence'],
+        classDesc: [
+          'advanced hardware repair, systems analysis, and independent technical work',
+          'complex diagnostics, component-level repair, and professional IT practices',
+          'advanced troubleshooting workflows and systems thinking at a professional level',
+        ],
+        classAction: [
+          'diagnosing challenging hardware failures and executing multi-step repair processes independently',
+          'applying systems-level thinking to isolate root causes in complex technical environments',
+          'demonstrating the kind of technical independence that sets apart serious IT professionals',
+          'managing repair workflows from diagnosis through documentation with minimal supervision',
+        ],
+        strengthPhrase: [
+          'shown a level of technical independence that is rare among students at this stage',
+          'demonstrated the ability to think holistically about systems, not just individual components',
+          'approached advanced troubleshooting with the confidence and discipline of a working professional',
+          'built a repair process mindset that is methodical, thorough, and consistently reliable',
+        ],
+      },
+
+      'intro-cyber': {
+        name: 'Intro to Cybersecurity',
+        subject: 'cybersecurity',
+        keywords: ['security awareness', 'ethical decision-making', 'networks', 'digital responsibility'],
+        classDesc: [
+          'foundational cybersecurity concepts including network security, threat awareness, and digital ethics',
+          'core principles of cybersecurity, including how to identify threats and protect digital systems',
+          'introductory network security, ethical hacking concepts, and responsible digital practices',
+        ],
+        classAction: [
+          'developing security awareness and learning to think like both a defender and an attacker',
+          'exploring how networks operate and how vulnerabilities can be identified and mitigated',
+          'applying ethical frameworks to digital decision-making in real-world scenarios',
+          'building the foundational mindset for responsible cybersecurity practice',
+        ],
+        strengthPhrase: [
+          'demonstrated a strong ethical compass alongside genuine technical curiosity',
+          'shown an ability to balance security concepts with the human responsibility that comes with them',
+          'approached cybersecurity with the thoughtful, ethics-first mindset that the field demands',
+          'developed a security-aware perspective that goes well beyond surface-level awareness',
+        ],
+      },
+
+      'ap-cyber': {
+        name: 'AP Cybersecurity',
+        subject: 'AP-level cybersecurity',
+        keywords: ['advanced cybersecurity concepts', 'analysis', 'professionalism', 'risk management'],
+        classDesc: [
+          'advanced cybersecurity concepts including threat analysis, risk management, and incident response',
+          'college-level security frameworks, penetration concepts, and professional cybersecurity practice',
+          'rigorous AP Cybersecurity content covering analysis, policy, and real-world risk scenarios',
+        ],
+        classAction: [
+          'analyzing security threats, evaluating risk, and proposing mitigation strategies at a professional level',
+          'working through complex cybersecurity scenarios with the analytical depth the AP curriculum demands',
+          'approaching security problems with both technical skill and a structured, policy-aware mindset',
+          'developing the professional judgment that effective cybersecurity practitioners rely on daily',
+        ],
+        strengthPhrase: [
+          'consistently approached complex security challenges with analytical clarity and professional focus',
+          'demonstrated the ability to evaluate risk and communicate findings with precision',
+          'shown a level of cybersecurity maturity that goes well beyond what the course requires',
+          'brought both technical depth and sound professional judgment to every security analysis',
+        ],
+      },
+
+      'ai-found': {
+        name: 'AI Foundations',
+        subject: 'artificial intelligence',
+        keywords: ['responsible AI use', 'creativity', 'critical thinking', 'data and model awareness'],
+        classDesc: [
+          'foundational concepts in artificial intelligence, including responsible use, data literacy, and model awareness',
+          'how AI systems are built, trained, and applied, with a strong emphasis on ethics and critical thinking',
+          'AI literacy, creativity with AI tools, and the critical thinking skills needed to evaluate AI outputs responsibly',
+        ],
+        classAction: [
+          'exploring how AI systems work and thinking critically about how they should be used',
+          'applying creative thinking to AI-assisted projects while maintaining a responsibility-first perspective',
+          'developing the data and model awareness that distinguishes thoughtful AI users from passive ones',
+          'engaging with AI tools in ways that reflect genuine curiosity, creativity, and ethical consideration',
+        ],
+        strengthPhrase: [
+          'demonstrated a nuanced, critical perspective on AI technology that many adults have yet to develop',
+          'shown a unique combination of creativity and analytical rigor in applying AI tools responsibly',
+          'approached AI with the kind of thoughtful skepticism and intellectual honesty the field requires',
+          'brought genuine curiosity and a strong ethical framework to every AI-related discussion and project',
+        ],
+      },
+
+      'intro-sd': {
+        name: 'Intro to Software Development',
+        subject: 'software development',
+        keywords: ['software design', 'collaboration', 'testing', 'user-focused problem-solving'],
+        classDesc: [
+          'foundational software development skills including design, testing, and collaborative coding practices',
+          'the software development lifecycle, from user-centered design through testing and iteration',
+          'core software engineering concepts including version control, collaboration, and writing testable code',
+        ],
+        classAction: [
+          'designing and building software projects with real users in mind from the very first step',
+          'collaborating on codebases while maintaining quality through systematic testing and review',
+          'applying the software development lifecycle with discipline, creativity, and a team-first attitude',
+          'thinking about user needs and edge cases in a way that produces cleaner, more reliable software',
+        ],
+        strengthPhrase: [
+          'demonstrated a user-centered approach to software design that sets strong engineers apart',
+          'shown a collaborative spirit and a commitment to code quality that makes every team better',
+          'brought both creative vision and methodical discipline to every stage of the development process',
+          'developed a testing mindset early, understanding that great software is built — and verified — with care',
+        ],
+      },
+    };
+
+    const TRAITS_LIST = [
+      { id: 'hardworking',     label: 'Hardworking' },
+      { id: 'creative',        label: 'Creative' },
+      { id: 'dependable',      label: 'Dependable' },
+      { id: 'curious',         label: 'Intellectually Curious' },
+      { id: 'collaborative',   label: 'Collaborative' },
+      { id: 'leadership',      label: 'Natural Leader' },
+      { id: 'resilient',       label: 'Resilient' },
+      { id: 'detail-oriented', label: 'Detail-Oriented' },
+      { id: 'growth-mindset',  label: 'Growth Mindset' },
+      { id: 'communicator',    label: 'Strong Communicator' },
+      { id: 'self-starter',    label: 'Self-Starter' },
+      { id: 'empathetic',      label: 'Empathetic' },
+      { id: 'focused',         label: 'Focused Under Pressure' },
+      { id: 'organized',       label: 'Organized' },
+      { id: 'enthusiastic',    label: 'Enthusiastic' },
+    ];
+
+    const TRAIT_PHRASES = {
+      'hardworking':     [
+        'a willingness to put in the work that others often avoid',
+        'a work ethic that consistently sets the tone for the entire class',
+        'the kind of industriousness that turns difficult tasks into accomplished goals',
+        'an ability to stay committed long after the initial excitement fades',
+      ],
+      'creative':        [
+        'a creative sensibility that surfaces in every project they undertake',
+        'a knack for approaching problems from unexpected, often more effective angles',
+        'the imagination to see solutions that aren\'t obvious to everyone else',
+        'a creative instinct that makes their work distinctively their own',
+      ],
+      'dependable':      [
+        'a level of dependability that both peers and teachers can count on without question',
+        'consistent follow-through that makes them the kind of person you want on any team',
+        'reliability that is simply part of how they operate — not something they have to try at',
+        'a track record of doing what they say they will, without needing reminders',
+      ],
+      'curious':         [
+        'an intellectual curiosity that keeps them asking questions long after the lesson ends',
+        'a genuine hunger to understand the "why" behind every concept, not just the "what"',
+        'the kind of restless curiosity that turns course material into a personal investigation',
+        'an inquisitive mind that elevates classroom discussions for everyone around them',
+      ],
+      'collaborative':   [
+        'an instinct for bringing people together and making group work genuinely productive',
+        'the ability to listen, adapt, and contribute in ways that strengthen any team',
+        'a collaborative spirit that makes others more effective simply by being present',
+        'a consistent effort to lift teammates up rather than stand apart from them',
+      ],
+      'leadership':      [
+        'a quiet but unmistakable leadership presence that others naturally gravitate toward',
+        'the ability to guide a group without overshadowing the contributions of others',
+        'leadership qualities that show up in how they organize, encourage, and model behavior',
+        'the kind of leadership that earns respect through example rather than authority',
+      ],
+      'resilient':       [
+        'a resilience that allows them to treat setbacks as data rather than failures',
+        'the ability to reset after a difficult challenge and come back stronger each time',
+        'a composure under pressure that lets them stay productive when others disengage',
+        'the persistence to keep going even when the path forward is unclear',
+      ],
+      'detail-oriented': [
+        'a meticulous attention to detail that catches what others miss',
+        'the kind of precision that elevates the quality of everything they produce',
+        'a habit of reviewing and refining work that reflects genuine pride in the outcome',
+        'a careful, systematic approach that makes their completed work notably thorough',
+      ],
+      'growth-mindset':  [
+        'a growth mindset that treats every mistake as an opportunity to improve',
+        'the self-awareness to recognize where they can grow and the drive to act on it',
+        'an openness to feedback that makes them one of the most coachable students I\'ve taught',
+        'a belief in their own ability to improve that translates into real, visible progress',
+      ],
+      'communicator':    [
+        'a rare ability to explain technical ideas clearly to a wide range of audiences',
+        'strong communication skills that make complex topics accessible and engaging',
+        'the confidence to share ideas and ask questions in ways that move conversations forward',
+        'clarity in both written and verbal communication that most students are still working toward',
+      ],
+      'self-starter':    [
+        'a self-directed initiative that means they are often working before the instructions are finished',
+        'the ability to identify what needs to be done and begin without waiting to be told',
+        'an intrinsic motivation that sets them apart from peers who need frequent prompting',
+        'a proactive energy that consistently raises the bar for everyone working alongside them',
+      ],
+      'empathetic':      [
+        'a genuine empathy that shapes how they engage with teammates and solve human-centered problems',
+        'the social awareness to understand how their actions affect others, and to care about that',
+        'an ability to see problems through multiple perspectives, which consistently improves their solutions',
+        'a warmth and consideration for others that makes them a stabilizing presence in any group',
+      ],
+      'focused':         [
+        'an ability to maintain focus and output quality even when the environment around them is noisy or uncertain',
+        'the composure to prioritize effectively when multiple demands compete for attention',
+        'a mental discipline that lets them stay on task when others have long since drifted',
+        'the kind of sustained concentration that produces work of consistently high quality',
+      ],
+      'organized':       [
+        'an organizational discipline that keeps their work clean, accessible, and always on schedule',
+        'a systematic approach to managing materials and time that others in the class often look to as a model',
+        'the ability to impose structure on complex projects without losing sight of the bigger picture',
+        'a natural tendency to plan ahead that means they rarely find themselves scrambling at the last minute',
+      ],
+      'enthusiastic':    [
+        'an enthusiasm for the subject that is contagious and genuinely raises the energy of any room they\'re in',
+        'a visible excitement about learning that makes classroom discussions more dynamic and engaging',
+        'a passion for this field that comes through in everything from their questions to their project choices',
+        'the kind of authentic enthusiasm that signals a student who has found something they truly care about',
+      ],
+    };
+
+    const PURPOSE_DATA = {
+      'scholarship': {
+        label: 'Scholarship Application',
+        salutation: 'Dear Scholarship Selection Committee',
+        openingContext: [
+          'in support of {name}\'s application for this scholarship',
+          'to recommend {name} for this scholarship opportunity',
+          'on behalf of {name} as they apply for this scholarship',
+        ],
+        closingStatement: [
+          'I am confident that {name} will make excellent use of this opportunity and reflect the values this scholarship was created to honor.',
+          '{name} represents exactly the kind of student this scholarship was designed to support — one whose potential is matched only by their commitment to their own growth.',
+          'This scholarship would be in excellent hands with {name}, and I cannot recommend them highly enough for this recognition.',
+          'Investing in {name} through this scholarship is investing in someone who will return that investment many times over.',
+        ],
+      },
+      'college': {
+        label: 'College / University Admission',
+        salutation: 'Dear Admissions Committee',
+        openingContext: [
+          'in enthusiastic support of {name}\'s application for admission',
+          'to recommend {name} as a candidate for your institution',
+          'on behalf of {name} as they pursue admission to your program',
+        ],
+        closingStatement: [
+          '{name} will contribute meaningfully to your campus community, both inside the classroom and beyond it.',
+          'Your institution will be fortunate to have {name} — they bring exactly the kind of curiosity and drive that make campus communities stronger.',
+          'I have no reservations whatsoever in recommending {name} for admission, and I look forward to following their continued success.',
+          '{name} is the kind of student who will make the most of every opportunity your institution offers, and then some.',
+        ],
+      },
+      'employment': {
+        label: 'Employment or Internship',
+        salutation: 'Dear Hiring Team',
+        openingContext: [
+          'to recommend {name} for employment consideration',
+          'in support of {name}\'s application for this position',
+          'on behalf of {name} as they pursue this professional opportunity',
+        ],
+        closingStatement: [
+          '{name} is work-ready in the truest sense — technically capable, professionally grounded, and eager to contribute from day one.',
+          'Any organization that brings {name} on board will quickly discover what I already know: this is someone worth investing in.',
+          'I recommend {name} without reservation for this role and am confident they will meet and exceed your expectations.',
+          '{name} combines the technical skills and professional maturity to hit the ground running in almost any workplace setting.',
+        ],
+      },
+      'honor-society': {
+        label: 'Honor Society',
+        salutation: 'Dear Honors Selection Committee',
+        openingContext: [
+          'to support {name}\'s induction into your honor society',
+          'in nomination of {name} for honor society membership',
+          'on behalf of {name} for this distinguished recognition',
+        ],
+        closingStatement: [
+          '{name} embodies the academic excellence and personal character that honor society membership is meant to celebrate.',
+          'Few students I have taught are as deserving of this recognition as {name}, whose commitment to excellence has been consistent and genuine.',
+          'I nominate {name} with full confidence that they will uphold the values of your organization with distinction.',
+          '{name} sets the standard that others aspire to — which is precisely what honor society membership should represent.',
+        ],
+      },
+      'program': {
+        label: 'Competitive Program Admission',
+        salutation: 'Dear Program Selection Committee',
+        openingContext: [
+          'to support {name}\'s application to your program',
+          'in recommendation of {name} for selection into this program',
+          'on behalf of {name} as they apply to this competitive program',
+        ],
+        closingStatement: [
+          '{name} is prepared for the demands of this program in ways that go beyond academic readiness — they have the mindset and resilience to thrive in a competitive environment.',
+          'Your program would benefit greatly from what {name} brings, and {name} would benefit equally from the challenges your program offers.',
+          'I am confident that {name} will not only meet the bar this program sets — they will raise it.',
+          'Selecting {name} for this program is selecting someone who will make the program proud.',
+        ],
+      },
+      'award': {
+        label: 'Award or Recognition Nomination',
+        salutation: 'Dear Awards Committee',
+        openingContext: [
+          'to nominate {name} for this well-deserved recognition',
+          'in support of {name}\'s nomination for this award',
+          'on behalf of {name} as a nominee for this honor',
+        ],
+        closingStatement: [
+          'If this recognition is meant to honor outstanding students, then {name} is a clear and deserving choice.',
+          '{name} has earned this recognition through consistent action — not grand gestures, but the steady accumulation of excellent work and genuine character.',
+          'I can think of no student more deserving of this award, and I am proud to put their name forward.',
+          'This nomination reflects what I have witnessed firsthand: a student who leads by example and raises the standard for everyone around them.',
+        ],
+      },
+    };
+
+    const OPENINGS = [
+      (name, cls, purposeCtx) =>
+        `It is my genuine pleasure to write this letter ${purposeCtx}. As ${name}'s teacher in ${cls}, I have had the opportunity to watch them grow in ways that go well beyond the technical content of the course.`,
+      (name, cls, purposeCtx) =>
+        `I am writing ${purposeCtx}, and I do so with genuine enthusiasm. ${name} is one of those students who reminds you why teaching matters — someone whose growth in ${cls} has been both impressive and deeply satisfying to witness.`,
+      (name, cls, purposeCtx) =>
+        `Without hesitation, I am writing to offer my strongest recommendation ${purposeCtx}. Having worked closely with ${name} in ${cls}, I have developed a clear and confident picture of who they are as both a student and a person.`,
+      (name, cls, purposeCtx) =>
+        `I have had the privilege of teaching ${name} in ${cls}, and this letter ${purposeCtx} comes from a place of genuine admiration. ${name} consistently demonstrated qualities that set them apart — not just in my class, but as a person.`,
+      (name, cls, purposeCtx) =>
+        `Rarely do I encounter a student who leaves such a lasting impression in a single semester, but ${name} has done exactly that. I am writing ${purposeCtx} with full confidence that my recommendation reflects not just their performance in ${cls}, but their broader potential.`,
+    ];
+
+    const TRANSITIONS = [
+      'Beyond their technical abilities,',
+      'What sets {name} apart, however, is more than coursework performance.',
+      'Equally important to their technical growth has been their character.',
+      'The technical skills tell only part of the story.',
+      'Academic performance, of course, only begins to describe {name}.',
+      'What I find most compelling about {name}, though, is not captured in grades alone.',
+    ];
+
+    const CLOSINGS = [
+      (name) =>
+        `I hold ${name} in the highest regard and offer this recommendation wholeheartedly. Please feel free to contact me if you would like to discuss their qualifications in greater detail.`,
+      (name) =>
+        `It is rare to recommend a student with this level of certainty, and I do so for ${name} without reservation. I am happy to speak further should it be helpful.`,
+      (name) =>
+        `I recommend ${name} with confidence and pride. Should you have any questions or wish to speak with me directly, I welcome the conversation.`,
+      (name) =>
+        `My support for ${name} is unconditional. They have more than earned this opportunity, and I look forward to hearing of their continued success.`,
+      (name) =>
+        `Thank you for your consideration of ${name}. I am available to provide any additional context and would be glad to speak with you at your convenience.`,
+    ];
+
+    // ─── Utilities ──────────────────────────────────────────────────────────────
+
+    function pick(arr) {
+      return arr[Math.floor(Math.random() * arr.length)];
+    }
+
+    function pickN(arr, n) {
+      const shuffled = [...arr];
+      for (let i = shuffled.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+      }
+      return shuffled.slice(0, Math.min(n, shuffled.length));
+    }
+
+    function capitalize(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
+    // Build a paragraph that weaves selected traits together naturally
+    function buildTraitParagraph(firstName, selectedTraitIds) {
+      if (!selectedTraitIds.length) return '';
+
+      const transition = pick(TRANSITIONS).replace('{name}', firstName);
+
+      // Grab a phrase for each selected trait
+      const phrases = selectedTraitIds.map(id => pick(TRAIT_PHRASES[id] || ['a standout quality that defines who they are']));
+
+      let body = '';
+      if (phrases.length === 1) {
+        body = `${firstName} has ${phrases[0]}.`;
+      } else if (phrases.length === 2) {
+        body = `${firstName} brings ${phrases[0]}, and ${phrases[1]}.`;
+      } else {
+        const last = phrases.pop();
+        body = `${firstName} demonstrates ${phrases.join(', ')}, and — perhaps most notably — ${last}.`;
+      }
+
+      return `${transition} ${body}`;
+    }
+
+    // Rewrite custom paragraph content in a professional, letter-appropriate voice
+    function integrateCustomParagraph(firstName, customText, classKeywords) {
+      if (!customText.trim()) return '';
+      const clean = customText.trim().replace(/\s+/g, ' ');
+
+      const intros = [
+        `One moment in particular stands out as a clear illustration of ${firstName}'s abilities. ${clean}`,
+        `To offer a concrete example of what I mean: ${clean}`,
+        `Perhaps the clearest evidence of ${firstName}'s capabilities came when ${clean.charAt(0).toLowerCase() + clean.slice(1)}`,
+        `${firstName}'s work in this area extended beyond the typical classroom experience. ${clean}`,
+        `What I observed firsthand reinforces everything I have said here. ${clean}`,
+      ];
+
+      const outros = [
+        ` This experience reflects a ${pick(classKeywords)} mindset that cannot be taught — only developed through genuine engagement.`,
+        ` That kind of initiative reflects the very qualities that make ${firstName} an exceptional student.`,
+        ` Moments like this are the ones that remain with me as a teacher.`,
+        ` This is exactly the kind of effort and ingenuity that I believe will define ${firstName}'s future.`,
+      ];
+
+      return pick(intros) + pick(outros);
+    }
+
+    // ─── Letter generator ───────────────────────────────────────────────────────
+
+    function generateLetter() {
+      const firstName   = document.getElementById('firstName').value.trim();
+      const lastName    = document.getElementById('lastName').value.trim();
+      const classKey    = document.getElementById('classSelect').value;
+      const purposeKey  = document.getElementById('purposeSelect').value;
+      const customText  = document.getElementById('customParagraph').value.trim();
+      const checkedIds  = [...document.querySelectorAll('#traitGrid input:checked')].map(cb => cb.value);
+
+      // Validation
+      const errorEl = document.getElementById('formError');
+      if (!firstName || !lastName) {
+        errorEl.textContent = 'Please enter the student\'s first and last name.';
+        errorEl.style.display = 'block';
+        return null;
+      }
+      if (!classKey) {
+        errorEl.textContent = 'Please select a class.';
+        errorEl.style.display = 'block';
+        return null;
+      }
+      if (!purposeKey) {
+        errorEl.textContent = 'Please select a purpose.';
+        errorEl.style.display = 'block';
+        return null;
+      }
+      if (checkedIds.length < 2) {
+        errorEl.textContent = 'Please select at least two traits.';
+        errorEl.style.display = 'block';
+        return null;
+      }
+      if (checkedIds.length > 5) {
+        errorEl.textContent = 'Please select no more than five traits.';
+        errorEl.style.display = 'block';
+        return null;
+      }
+      errorEl.style.display = 'none';
+
+      const name       = `${firstName} ${lastName}`;
+      const cd         = CLASS_DATA[classKey];
+      const pd         = PURPOSE_DATA[purposeKey];
+      const today      = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+
+      const purposeCtx = pick(pd.openingContext).replace('{name}', name);
+
+      // Paragraph 1: Opening
+      const p1 = pick(OPENINGS)(name, cd.name, purposeCtx);
+
+      // Paragraph 2: Class-specific academic/technical body
+      const classDescPhrase  = pick(cd.classDesc);
+      const classActionPhrase = pick(cd.classAction);
+      const strengthPhrase    = pick(cd.strengthPhrase);
+
+      const p2Templates = [
+        `In my ${cd.name} course, students engage with ${classDescPhrase}. ${name} distinguished themselves through ${classActionPhrase}. They have ${strengthPhrase} — a quality that speaks to more than academic ability; it reflects who they are as a learner.`,
+        `My ${cd.name} course challenges students to engage seriously with ${classDescPhrase}. ${capitalize(classActionPhrase)} is exactly what ${name} did, consistently, throughout the semester. In doing so, they ${strengthPhrase}.`,
+        `${name} completed my ${cd.name} course — a class that asks students to grapple with ${classDescPhrase}. What I observed was a student committed to ${classActionPhrase}, which is why I can say with confidence that ${name} has ${strengthPhrase}.`,
+        `The work in ${cd.name} centers on ${classDescPhrase}, and not every student rises to meet that challenge with purpose. ${name} did. By ${classActionPhrase}, they have ${strengthPhrase} in a way that will serve them long after this course.`,
+      ];
+      const p2 = pick(p2Templates);
+
+      // Paragraph 3: Trait-based character paragraph
+      const p3 = buildTraitParagraph(firstName, checkedIds);
+
+      // Paragraph 4 (optional): Custom content integrated professionally
+      const p4 = customText ? integrateCustomParagraph(firstName, customText, cd.keywords) : '';
+
+      // Paragraph 5: Closing endorsement
+      const closingStatement = pick(pd.closingStatement).replace(/\{name\}/g, firstName);
+      const signoff          = pick(CLOSINGS)(firstName);
+
+      // Assemble letter
+      const parts = [
+        today,
+        '',
+        pd.salutation + ':',
+        '',
+        p1,
+        '',
+        p2,
+        '',
+        p3,
+        ...(p4 ? ['', p4] : []),
+        '',
+        closingStatement,
+        '',
+        signoff,
+        '',
+        'Sincerely,',
+        '',
+        '[Your Name]',
+        '[Your Title]',
+        '[School / Organization]',
+        '[Email Address]',
+        '[Phone Number]',
+      ];
+
+      return parts.join('\n');
+    }
+
+    // ─── Trait grid setup ───────────────────────────────────────────────────────
+
+    function buildTraitGrid() {
+      const grid = document.getElementById('traitGrid');
+      grid.innerHTML = '';
+      TRAITS_LIST.forEach(t => {
+        const item  = document.createElement('label');
+        item.className = 'trait-item';
+        item.htmlFor = `trait-${t.id}`;
+
+        const cb = document.createElement('input');
+        cb.type  = 'checkbox';
+        cb.id    = `trait-${t.id}`;
+        cb.value = t.id;
+        cb.addEventListener('change', () => {
+          item.classList.toggle('checked', cb.checked);
+        });
+
+        const lbl = document.createElement('span');
+        lbl.className = 'trait-label';
+        lbl.textContent = t.label;
+
+        item.appendChild(cb);
+        item.appendChild(lbl);
+        grid.appendChild(item);
+      });
+    }
+
+    // ─── Event wiring ────────────────────────────────────────────────────────────
+
+    document.getElementById('generateBtn').addEventListener('click', () => {
+      const letter = generateLetter();
+      if (!letter) return;
+
+      const output = document.getElementById('letterOutput');
+      const textEl = document.getElementById('letterText');
+      const badges = document.getElementById('outputBadges');
+
+      textEl.textContent = letter;
+      output.style.display = 'block';
+      output.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+      // Badges
+      const classKey   = document.getElementById('classSelect').value;
+      const purposeKey = document.getElementById('purposeSelect').value;
+      const firstName  = document.getElementById('firstName').value.trim();
+      const lastName   = document.getElementById('lastName').value.trim();
+      badges.innerHTML = '';
+      [
+        `${firstName} ${lastName}`,
+        CLASS_DATA[classKey]?.name,
+        PURPOSE_DATA[purposeKey]?.label,
+      ].filter(Boolean).forEach(text => {
+        const b = document.createElement('span');
+        b.className = 'badge';
+        b.textContent = text;
+        badges.appendChild(b);
+      });
+    });
+
+    document.getElementById('regenerateBtn').addEventListener('click', () => {
+      const letter = generateLetter();
+      if (!letter) return;
+      document.getElementById('letterText').textContent = letter;
+    });
+
+    document.getElementById('clearBtn').addEventListener('click', () => {
+      document.getElementById('firstName').value = '';
+      document.getElementById('lastName').value = '';
+      document.getElementById('classSelect').value = '';
+      document.getElementById('purposeSelect').value = '';
+      document.getElementById('customParagraph').value = '';
+      document.querySelectorAll('#traitGrid input').forEach(cb => {
+        cb.checked = false;
+        cb.closest('.trait-item').classList.remove('checked');
+      });
+      document.getElementById('letterOutput').style.display = 'none';
+      document.getElementById('formError').style.display = 'none';
+    });
+
+    document.getElementById('copyBtn').addEventListener('click', async () => {
+      const text = document.getElementById('letterText').textContent;
+      try {
+        await navigator.clipboard.writeText(text);
+        const btn = document.getElementById('copyBtn');
+        btn.textContent = '✅ Copied!';
+        setTimeout(() => { btn.textContent = '📋 Copy'; }, 2000);
+      } catch {
+        // fallback
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        const btn = document.getElementById('copyBtn');
+        btn.textContent = '✅ Copied!';
+        setTimeout(() => { btn.textContent = '📋 Copy'; }, 2000);
+      }
+    });
+
+    document.getElementById('printBtn').addEventListener('click', () => { window.print(); });
+
+    buildTraitGrid();
+  </script>
+</body>
+
+</html>
diff --git a/projects.html b/projects.html
index 5af0451..6e829a9 100644
--- a/projects.html
+++ b/projects.html
@@ -130,6 +130,10 @@ <h2 id="activities-title" style="margin:0 0 var(--space-4);font-size:var(--font-
                 <a href="Job_Application_Assignment.html">Job Application Builder</a>
                 <span class="item-desc">Launch the interactive, student-facing job application assignment with embedded videos, quiz checks, and progress tracking.<span class="status-pill status-prod">Active</span></span>
               </li>
+              <li>
+                <a href="Recommendation_Letter_Generator.html">Recommendation Letter Generator</a>
+                <span class="item-desc">Generate a personalized, unique recommendation letter based on student name, class, traits, and purpose.<span class="status-pill status-prod">Active</span></span>
+              </li>
             </ul>
 
             <div class="instructional-note" aria-label="Instructional use notice">
