<style>
  /* ─── STUDENT PORTAL SHELL ─── */
  .sp-root {
    position: fixed; inset: 0; display: flex; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px; color: #1f2937; background: #f0f2f5;
    -webkit-font-smoothing: antialiased;
  }
  /* Sidebar */
  .sp-sidebar {
    width: 80px; min-width: 80px; height: 100%;
    background: #fff; display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; position: relative; z-index: 10;
    border-right: 1px solid #e8eaf0;
    box-shadow: 2px 0 8px 0 rgba(37,58,106,0.08);
  }
  .sp-sidebar-logo {
    width: 100%; padding: 16px 0 8px;
    display: flex; align-items: center; justify-content: center;
  }
  .sp-sidebar-nav { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .sp-sidebar-item {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    cursor: pointer; padding: 14px 8px 10px; width: 100%;
    transition: background-color 100ms;
  }
  .sp-sidebar-item:hover { background: #f5f6fa; }
  .sp-sidebar-item .sp-icon { width: 26px; height: 26px; fill: none; stroke: #5c6b9a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .sp-sidebar-label { font-size: 9.5px; font-weight: 500; color: #5c6b9a; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; }
  .sp-sidebar-bottom { margin-top: auto; padding-bottom: 20px; width: 100%; display: flex; flex-direction: column; align-items: center; }
  /* Main wrapper */
  .sp-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
  /* Topbar */
  .sp-topbar {
    height: 60px; min-height: 60px; background: #f0f2f5;
    border-bottom: 1px solid #e2e4ea;
    display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0;
  }
  .sp-school-name { font-size: 13px; font-weight: 600; color: #374151; }
  .sp-topbar-right { display: flex; align-items: center; gap: 10px; }
  .sp-topbar-btn {
    width: 38px; height: 38px; border: none; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.1); position: relative; transition: background-color 100ms;
  }
  .sp-topbar-btn:hover { background: #f9fafb; }
  .sp-topbar-btn svg { width: 18px; height: 18px; stroke: #4b5563; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sp-notif-badge {
    position: absolute; top: -2px; right: -3px; background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 700; border-radius: 20px; padding: 1px 4px;
    min-width: 15px; text-align: center; line-height: 14px;
  }
  .sp-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: #c7d2e0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #d1d5db;
  }
  .sp-avatar svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  /* Content area */
  .sp-content-area { flex: 1; overflow-y: auto; padding: 16px; background: #f0f2f5; }
  .sp-content-card {
    background: #fff; border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05); overflow: hidden;
  }
  /* Step nav (tab-badge style matching brainstorm) */
  .sp-step-nav {
    background: #f3f4f6;
    display: flex; align-items: stretch; overflow-x: auto;
    position: sticky; top: 0; z-index: 5;
  }
  .sp-step-nav::-webkit-scrollbar { height: 0; }
  .sp-step-tab {
    flex: 1; min-width: 90px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 6px 10px; gap: 4px; cursor: pointer;
    background: #f3f4f6;
    border-top: 3px solid transparent; transition: background-color 100ms;
  }
  .sp-step-tab.sp-active {
    background: #fff;
    border-top-color: #2563eb;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
  }
  .sp-step-tab:hover:not(.sp-active) { background: #eaecef; }
  .sp-step-badge {
    display: inline-flex; align-items: center; gap: 3px;
    border-radius: 4px; padding: 2px 7px;
    font-size: 11px; font-weight: 500; line-height: 1.5;
    background: #e5e7eb; border: 1px solid #d1d5db; color: #6b7280;
    white-space: nowrap;
  }
  .sp-badge-excl { color: #ef4444; }
  .sp-step-badge.sp-active-badge { background: #7c3aed; color: #fff; border-color: #7c3aed; }
  .sp-active-badge .sp-badge-excl { color: #fca5a5; }
  .sp-step-name { font-size: 12px; font-weight: 600; color: #6b7280; text-align: center; line-height: 1.3; }
  .sp-step-tab.sp-active .sp-step-name { color: #1f2937; font-weight: 700; }
  /* Content inner */
  .sp-content-inner { padding: 20px 24px 36px; }
  /* Bottom bar */
  .sp-bottom-bar {
    height: 58px; background: #fff; border-top: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; flex-shrink: 0;
  }
  .sp-bottom-left { display: flex; align-items: center; gap: 8px; }
  /* Intro text */
  .sp-please-read { font-size: 13px; font-weight: 700; font-style: italic; color: #1d4ed8; margin-bottom: 2px; }
  .sp-intro-note { font-size: 13px; font-style: italic; color: #374151; margin-bottom: 6px; line-height: 1.6; }
  .sp-instruction-text { font-size: 13px; font-style: italic; color: #1d4ed8; margin-bottom: 14px; line-height: 1.6; }
  .sp-notif-wrap { position: relative; }
  .sp-intro-list { list-style: disc; padding-left: 20px; margin-bottom: 14px; font-size: 13px; color: #374151; font-style: italic; line-height: 1.8; }
  .sp-route-text { font-size: 13px; color: #374151; margin-bottom: 8px; line-height: 1.6; }
  .sp-route-list { list-style: disc; padding-left: 20px; margin-bottom: 20px; font-size: 13px; color: #374151; line-height: 1.8; }
  .sp-route-list li strong { font-weight: 700; }
  .sp-section-heading { font-size: 15px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
  /* Pathway cards */
  .sp-pathway-cards { display: flex; flex-direction: column; gap: 12px; }
  .sp-pathway-card {
    border-radius: 8px; padding: 16px 20px;
    display: flex; align-items: flex-start; gap: 14px;
    cursor: pointer; background: #fff; position: relative;
    box-shadow: 0 0 0 1px rgba(37,58,106,0.12), 0 2px 6px rgba(37,58,106,0.08);
    transition: box-shadow 150ms cubic-bezier(0.2,0,0,1), background-color 150ms;
    user-select: none;
  }
  .sp-pathway-card:hover:not(.sp-disabled) {
    box-shadow: 0 0 0 1px rgba(37,58,106,0.2), 0 4px 10px rgba(37,58,106,0.14);
  }
  .sp-pathway-card:has(input[type="radio"]:checked) {
    box-shadow: 0 0 0 2px #3478f7, 0 2px 6px rgba(37,58,106,0.08);
    background: #f5f8ff;
  }
  .sp-pathway-card.sp-disabled {
    cursor: default; background: #f9fafb;
    box-shadow: 0 0 0 1px rgba(37,58,106,0.08);
  }
  /* Card hitbox (transparent overlay making whole card clickable) */
  .sp-card-hitbox { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  /* Card radio */
  .sp-radio-wrap { flex-shrink: 0; padding-top: 2px; }
  .sp-radio-wrap input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: #3478f7; cursor: pointer; }
  .sp-radio-wrap input[type="radio"]:disabled { opacity: 0.4; cursor: default; }
  /* Card content */
  .sp-pathway-info { flex: 1; min-width: 0; }
  .sp-pathway-name { font-size: 14px; font-weight: 600; color: #262b36; margin-bottom: 10px; }
  .sp-disabled .sp-pathway-name { color: #a0abc0; }
  .sp-chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .sp-disabled .sp-chip-row { opacity: 0.5; }
  /* Button above hitbox */
  .sp-view-btn { position: relative; z-index: 1; }
  .sp-sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
  .sp-sort-icon { font-size: 10px; color: #9ca3af; margin-left: 4px; }
  .sp-popup-footer-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .sp-popup-count { font-size: 12px; color: #6b7280; }
  /* Course title hyperlink — DS blue-500, underline on hover, external-link icon */
  .sp-course-link {
    color: rgb(52, 120, 247);
    text-decoration: none;
    transition: color 150ms, text-decoration 150ms;
  }
  .sp-course-link:hover {
    color: rgb(29, 78, 216);
    text-decoration: underline;
  }
  .sp-course-link:focus-visible {
    outline: none;
    border-radius: 2px;
    box-shadow: 0 0 0 3px rgba(52, 120, 247, 0.25);
  }
  .sp-course-link-icon {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.7;
    vertical-align: middle;
  }
  .sp-name-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .sp-name-badge-row .sp-pathway-name { margin-bottom: 0; }
  .sp-ineligible-reason {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
    line-height: 1.5;
    text-wrap: pretty;
  }
</style>
<div class="sp-root">
  <!-- ─── SIDEBAR ─── -->
  <aside class="sp-sidebar">
    <div class="sp-sidebar-logo">
      <svg width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M44.6266 45.3333L33.9066 18.6533H29.7866L19.0266 45.3333H22.8266L25.1866 39.3733H38.4666L40.8266 45.3333H44.6266ZM37.5066 36.4533H26.1866L31.8266 22.0533L37.5066 36.4533Z" fill="#263C91"/>
        <path d="M46.6667 18.6663V13.333H44.0001V18.6663H38.6667V21.333H44.0001V26.6663H46.6667V21.333H52.0001V18.6663H46.6667Z" fill="#EC634B"/>
      </svg>
    </div>
    <nav class="sp-sidebar-nav">
      <div class="sp-sidebar-item" title="Home">
        <svg class="sp-icon" viewBox="0 0 24 24"><path d="M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V10.5z"/><polyline points="9 21 9 13 15 13 15 21"/></svg>
        <span class="sp-sidebar-label">Home</span>
      </div>
      <div class="sp-sidebar-item" title="Messages">
        <svg class="sp-icon" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="8" y1="9" x2="16" y2="9"/><line x1="8" y1="13" x2="14" y2="13"/></svg>
        <span class="sp-sidebar-label">Messages</span>
      </div>
      <div class="sp-sidebar-item" title="Documents">
        <svg class="sp-icon" viewBox="0 0 24 24">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
        </svg>
        <span class="sp-sidebar-label">Documents</span>
      </div>
      <div class="sp-sidebar-item" title="Calendar">
        <svg class="sp-icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        <span class="sp-sidebar-label">Calendar</span>
      </div>
    </nav>
    <div class="sp-sidebar-bottom">
      <div class="sp-sidebar-item" title="Back to Admin">
        <svg class="sp-icon" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        <span class="sp-sidebar-label">Back to<br>
          Admin</span>
      </div>
    </div>
  </aside>
  <!-- ─── MAIN ─── -->
  <div class="sp-main">
    <!-- Topbar -->
    <header class="sp-topbar">
      <span class="sp-school-name">Hillside Academy Sixth Form</span>
      <div class="sp-topbar-right">
        <div class="sp-notif-wrap">
          <button class="sp-topbar-btn" aria-label="Notifications">
            <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          </button>
          <span class="sp-notif-badge">3</span>
        </div>
        <div class="sp-avatar" aria-label="User menu">
          <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
      </div>
    </header>
    <!-- Content area -->
    <div class="sp-content-area">
      <div class="sp-content-card">
        <!-- Step nav -->
        <div class="sp-step-nav" role="tablist">
          <div class="sp-step-tab" role="tab" aria-selected="false">
            <span class="sp-step-badge"><span class="sp-badge-excl">!</span> Step 1</span>
            <span class="sp-step-name">Student Basic Details</span>
          </div>
          <div class="sp-step-tab" role="tab" aria-selected="false">
            <span class="sp-step-badge"><span class="sp-badge-excl">!</span> Step 2</span>
            <span class="sp-step-name">Parent/Carer Details</span>
          </div>
          <div class="sp-step-tab" role="tab" aria-selected="false">
            <span class="sp-step-badge"><span class="sp-badge-excl">!</span> Step 3</span>
            <span class="sp-step-name">Support Information</span>
          </div>
          <div class="sp-step-tab" role="tab" aria-selected="false">
            <span class="sp-step-badge"><span class="sp-badge-excl">!</span> Step 4</span>
            <span class="sp-step-name">Education</span>
          </div>
          <div class="sp-step-tab sp-active" role="tab" aria-selected="true">
            <span class="sp-step-badge sp-active-badge"><span class="sp-badge-excl">!</span> Step 5</span>
            <span class="sp-step-name">Pathway</span>
          </div>
          <div class="sp-step-tab" role="tab" aria-selected="false">
            <span class="sp-step-badge"><span class="sp-badge-excl">!</span> Step 6</span>
            <span class="sp-step-name">Courses</span>
          </div>
        </div>
        <!-- Content inner -->
        <div class="sp-content-inner">
          <!-- Intro text -->
          <p class="sp-please-read">PLEASE READ:</p>
          <p class="sp-intro-note">Please note that at the application stage,</p>
          <ul class="sp-intro-list">
            <li>you need a minimum of 5 GCSE qualifications at grade 5 or above to apply for the A Level Route.</li>
            <li>you need a minimum of 5 GCSE qualifications at grade 4 or above to apply for the Applied (BTEC) Route.</li>
            <li>the Blended Route allows you to combine A Level and BTEC subjects based on your predicted grades.</li>
            <li>some subjects have specific entry requirements which will be checked at enrolment.</li>
          </ul>
          <p class="sp-instruction-text">Select the pathway that best matches your predicted grades by clicking on the box below, then click on Save & Next to proceed to the Courses step where you will select your subjects. Once you have selected your subjects, click Submit to complete your application.</p>
          <p class="sp-route-text">Once you receive your results in the summer, you will need to meet the entry requirements for your chosen pathway and subjects:</p>
          <ul class="sp-route-list">
            <li><strong>A Level Route:</strong> Students choose three or four A Level subjects. Requires 5 GCSEs at grade 5+.</li>
            <li><strong>Applied (BTEC) Route:</strong> Students choose BTEC qualifications. Requires 5 GCSEs at grade 4+.</li>
            <li><strong>Blended Route:</strong> Students can combine A Level and BTEC subjects to create a mixed programme of study.</li>
          </ul>
          <h3 class="sp-section-heading">Please select a pathway</h3>
          <!-- Pathway cards -->
          <div class="sp-pathway-cards">
            <!-- A Level Route — disabled/ineligible -->
            <div data-controller="popup">
              <div class="sp-pathway-card sp-disabled" id="card-alevel">
                <div class="sp-radio-wrap">
                  <input type="radio" name="pathway" value="alevel" id="r-alevel" disabled aria-describedby="notif-alevel">
                </div>
                <div class="sp-pathway-info">
                  <div class="sp-name-badge-row">
                    <div class="sp-pathway-name">A Level Route</div>
                    <span class="tw-badge tw-badge-danger-subtle">
                      <i class="fa-regular fa-xmark" aria-hidden="true"></i> Not eligible
                    </span>
                  </div>
                  <p class="sp-ineligible-reason" id="notif-alevel">
                    Requires 5 GCSE qualifications at minimum grade 5.0
                  </p>
                  <button class="tw-btn tw-btn-secondary tw-btn-sm sp-view-btn" type="button"
                          aria-haspopup="dialog" data-action="click->popup#show">
                    <i class="fa-regular fa-eye"></i> View all courses
                    <span class="tw-badge tw-badge-circle tw-badge-info tw:ml-1">21</span>
                  </button>
                </div>
              </div>
              <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
              <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel"
                   role="dialog" aria-modal="true" aria-labelledby="modal-alevel-title">
                <div class="tw-popup-header">
                  <div class="tw:flex tw:items-center tw:gap-3">
                    <h2 class="tw-popup-header-title tw:mb-0" id="modal-alevel-title">A Level Route</h2>
                    <span class="tw-badge tw-badge-info-subtle"><strong>21</strong> courses</span>
                  </div>
                  <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="tw-popup-body">
                  <div class="tw:mb-3">
                    <input type="search" class="tw-form-control" placeholder="Search courses by name, type, or requirements...">
                  </div>
                  <div class="tw-table-responsive">
                    <table class="tw-table tw-table-hover">
                      <thead>
                        <tr>
                          <th class="sp-sortable-th">Course Title <span class="sp-sort-icon">↕</span></th>
                          <th class="sp-sortable-th">Qualification Type <span class="sp-sort-icon">↕</span></th>
                          <th class="sp-sortable-th">Entry Requirement <span class="sp-sort-icon">↕</span></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><a href="https://example.com/courses/mathematics" target="_blank" rel="noopener" class="sp-course-link">Mathematics<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 7 in GCSE Mathematics</td>
                        </tr>
                        <tr>
                          <td>Further Mathematics</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 8 in GCSE Mathematics</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/physics" target="_blank" rel="noopener" class="sp-course-link">Physics<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Physics or Combined Science</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/chemistry" target="_blank" rel="noopener" class="sp-course-link">Chemistry<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Chemistry or Combined Science</td>
                        </tr>
                        <tr>
                          <td>Biology</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Biology or Combined Science</td>
                        </tr>
                        <tr>
                          <td>English Literature</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE English Literature</td>
                        </tr>
                        <tr>
                          <td>English Language</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE English Language</td>
                        </tr>
                        <tr>
                          <td>History</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE History</td>
                        </tr>
                        <tr>
                          <td>Geography</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Geography</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/economics" target="_blank" rel="noopener" class="sp-course-link">Economics<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Mathematics and English</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/psychology" target="_blank" rel="noopener" class="sp-course-link">Psychology<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Science and English</td>
                        </tr>
                        <tr>
                          <td>Art & Design</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Art or Portfolio review</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/computer-science" target="_blank" rel="noopener" class="sp-course-link">Computer Science<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Computer Science or Mathematics</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/french" target="_blank" rel="noopener" class="sp-course-link">French<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE French</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/spanish" target="_blank" rel="noopener" class="sp-course-link">Spanish<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Spanish</td>
                        </tr>
                        <tr>
                          <td>Sociology</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE English</td>
                        </tr>
                        <tr>
                          <td>Philosophy & Ethics</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE English</td>
                        </tr>
                        <tr>
                          <td>Music</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Music or Grade 5 theory</td>
                        </tr>
                        <tr>
                          <td>Drama & Theatre Studies</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Drama</td>
                        </tr>
                        <tr>
                          <td>Physical Education</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE PE or equivalent</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/business-studies" target="_blank" rel="noopener" class="sp-course-link">Business Studies<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE English or Mathematics</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="tw-popup-footer">
                  <div class="sp-popup-footer-row">
                    <span class="sp-popup-count">Showing 21 of 21 courses</span>
                    <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Close</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Applied (BTEC) Route -->
            <div data-controller="popup">
              <div class="sp-pathway-card" id="card-btec">
                <label class="sp-card-hitbox" for="r-btec" aria-label="Select Applied (BTEC) Route"></label>
                <div class="sp-radio-wrap">
                  <input type="radio" name="pathway" value="btec" id="r-btec">
                </div>
                <div class="sp-pathway-info">
                  <div class="sp-pathway-name">Applied (BTEC) Route</div>
                  <div class="sp-chip-row">
                    <button class="tw-btn tw-btn-secondary tw-btn-sm sp-view-btn" type="button"
                            aria-haspopup="dialog" data-action="click->popup#show">
                      <i class="fa-regular fa-eye"></i> View courses
                      <span class="tw-badge tw-badge-circle tw-badge-info tw:ml-1">6</span>
                    </button>
                  </div>
                </div>
              </div>
              <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
              <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel"
                   role="dialog" aria-modal="true" aria-labelledby="modal-btec-title">
                <div class="tw-popup-header">
                  <div class="tw:flex tw:items-center tw:gap-3">
                    <h2 class="tw-popup-header-title tw:mb-0" id="modal-btec-title">Applied (BTEC) Route</h2>
                    <span class="tw-badge tw-badge-info-subtle"><strong>6</strong> courses</span>
                  </div>
                  <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="tw-popup-body">
                  <div class="tw:mb-3">
                    <input type="search" class="tw-form-control" placeholder="Search courses by name, type, or requirements...">
                  </div>
                  <div class="tw-table-responsive">
                    <table class="tw-table tw-table-hover">
                      <thead>
                        <tr>
                          <th class="sp-sortable-th">Course Title <span class="sp-sort-icon">↕</span></th>
                          <th class="sp-sortable-th">Qualification Type <span class="sp-sort-icon">↕</span></th>
                          <th class="sp-sortable-th">Entry Requirement <span class="sp-sort-icon">↕</span></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><a href="https://example.com/courses/business-studies" target="_blank" rel="noopener" class="sp-course-link">Business Studies<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in English or Maths</td>
                        </tr>
                        <tr>
                          <td>Health & Social Care</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in English</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/information-technology" target="_blank" rel="noopener" class="sp-course-link">Information Technology<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in Maths</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/sport-exercise-science" target="_blank" rel="noopener" class="sp-course-link">Sport & Exercise Science<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in Science</td>
                        </tr>
                        <tr>
                          <td>Creative Media Production</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>No specific requirement</td>
                        </tr>
                        <tr>
                          <td>Travel & Tourism</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in English</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="tw-popup-footer">
                  <div class="sp-popup-footer-row">
                    <span class="sp-popup-count">Showing 6 of 6 courses</span>
                    <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Close</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Blended Route — pre-selected -->
            <div data-controller="popup">
              <div class="sp-pathway-card" id="card-blended">
                <label class="sp-card-hitbox" for="r-blended" aria-label="Select Blended Route"></label>
                <div class="sp-radio-wrap">
                  <input type="radio" name="pathway" value="blended" id="r-blended" checked>
                </div>
                <div class="sp-pathway-info">
                  <div class="sp-pathway-name">Blended (A Level and BTEC) Route</div>
                  <div class="sp-chip-row">
                    <button class="tw-btn tw-btn-secondary tw-btn-sm sp-view-btn" type="button"
                            aria-haspopup="dialog" data-action="click->popup#show">
                      <i class="fa-regular fa-eye"></i> View courses
                      <span class="tw-badge tw-badge-circle tw-badge-info tw:ml-1">27</span>
                    </button>
                  </div>
                </div>
              </div>
              <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
              <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel"
                   role="dialog" aria-modal="true" aria-labelledby="modal-blended-title">
                <div class="tw-popup-header">
                  <div class="tw:flex tw:items-center tw:gap-3">
                    <h2 class="tw-popup-header-title tw:mb-0" id="modal-blended-title">Blended (A Level and BTEC) Route</h2>
                    <span class="tw-badge tw-badge-info-subtle"><strong>27</strong> courses</span>
                  </div>
                  <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close">
                    <i class="fa-solid fa-xmark"></i>
                  </button>
                </div>
                <div class="tw-popup-body">
                  <div class="tw:mb-3">
                    <input type="search" class="tw-form-control" placeholder="Search courses by name, type, or requirements...">
                  </div>
                  <div class="tw-table-responsive">
                    <table class="tw-table tw-table-hover">
                      <thead>
                        <tr>
                          <th class="sp-sortable-th">Course Title <span class="sp-sort-icon">↕</span></th>
                          <th class="sp-sortable-th">Qualification Type <span class="sp-sort-icon">↕</span></th>
                          <th class="sp-sortable-th">Entry Requirement <span class="sp-sort-icon">↕</span></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><a href="https://example.com/courses/mathematics" target="_blank" rel="noopener" class="sp-course-link">Mathematics<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 7 in GCSE Mathematics</td>
                        </tr>
                        <tr>
                          <td>Further Mathematics</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 8 in GCSE Mathematics</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/physics" target="_blank" rel="noopener" class="sp-course-link">Physics<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Physics or Combined Science</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/chemistry" target="_blank" rel="noopener" class="sp-course-link">Chemistry<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Chemistry or Combined Science</td>
                        </tr>
                        <tr>
                          <td>Biology</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Biology or Combined Science</td>
                        </tr>
                        <tr>
                          <td>English Literature</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE English Literature</td>
                        </tr>
                        <tr>
                          <td>History</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE History</td>
                        </tr>
                        <tr>
                          <td>Geography</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Geography</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/economics" target="_blank" rel="noopener" class="sp-course-link">Economics<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Mathematics and English</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/psychology" target="_blank" rel="noopener" class="sp-course-link">Psychology<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Science and English</td>
                        </tr>
                        <tr>
                          <td>Art & Design</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Art or Portfolio review</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/computer-science" target="_blank" rel="noopener" class="sp-course-link">Computer Science<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Computer Science or Mathematics</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/french" target="_blank" rel="noopener" class="sp-course-link">French<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE French</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/spanish" target="_blank" rel="noopener" class="sp-course-link">Spanish<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 6 in GCSE Spanish</td>
                        </tr>
                        <tr>
                          <td>Sociology</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE English</td>
                        </tr>
                        <tr>
                          <td>Philosophy & Ethics</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE English</td>
                        </tr>
                        <tr>
                          <td>Music</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Music or Grade 5 theory</td>
                        </tr>
                        <tr>
                          <td>Drama & Theatre Studies</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE Drama</td>
                        </tr>
                        <tr>
                          <td>Physical Education</td>
                          <td><span class="tw-badge tw-badge-primary-subtle">A Level</span></td>
                          <td>Grade 5 in GCSE PE or equivalent</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/business-studies" target="_blank" rel="noopener" class="sp-course-link">Business Studies<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in English or Maths</td>
                        </tr>
                        <tr>
                          <td>Health & Social Care</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in English</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/information-technology" target="_blank" rel="noopener" class="sp-course-link">Information Technology<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in Maths</td>
                        </tr>
                        <tr>
                          <td>Sport & Exercise Science</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in Science</td>
                        </tr>
                        <tr>
                          <td>Creative Media Production</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>No specific requirement</td>
                        </tr>
                        <tr>
                          <td>Travel & Tourism</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in English</td>
                        </tr>
                        <tr>
                          <td><a href="https://example.com/courses/engineering" target="_blank" rel="noopener" class="sp-course-link">Engineering<i class="fa-regular fa-arrow-up-right-from-square sp-course-link-icon" aria-hidden="true"></i></a></td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 5 in GCSE Mathematics and Science</td>
                        </tr>
                        <tr>
                          <td>Construction</td>
                          <td><span class="tw-badge tw-badge-info-subtle">BTEC Level 3</span></td>
                          <td>Grade 4 in GCSE Mathematics</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="tw-popup-footer">
                  <div class="sp-popup-footer-row">
                    <span class="sp-popup-count">Showing 27 of 27 courses</span>
                    <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /sp-pathway-cards -->
        </div>
        <!-- /sp-content-inner -->
      </div>
      <!-- /sp-content-card -->
    </div>
    <!-- /sp-content-area -->
    <!-- Bottom bar -->
    <div class="sp-bottom-bar">
      <div class="sp-bottom-left">
        <button class="tw-btn tw-btn-secondary" type="button">Save Progress and Close</button>
        <button class="tw-btn tw-btn-tertiary" type="button">Previous</button>
      </div>
      <button class="tw-btn tw-btn-primary" type="button">Save & Next</button>
    </div>
  </div>
  <!-- /sp-main -->
</div>
<!-- /sp-root -->