<div class="tw:bg-background tw:min-h-screen">
  <!-- Public variant: no Shell. A slim brand bar over one centred column. -->
  <header class="tw:bg-white tw:border-b tw:border-neutral-200">
    <div class="tw:max-w-md tw:mx-auto tw:px-4 tw:flex tw:items-center tw:gap-2.5 tw:h-14">
      <div class="tw-avatar tw-avatar-sm tw-avatar-primary" role="img" aria-label="St Mary's Catholic High School"><span>SM</span></div>
      <span class="tw:font-semibold tw:text-body-s tw:leading-body-s">St Mary's Catholic High School</span>
      <span class="tw:ml-auto tw:text-body-xs tw:leading-body-xs tw:text-muted">Sixth Form application</span>
    </div>
  </header>
  <!-- One column: header, steps and panel all share the same width so nothing floats -->
  <div class="tw:max-w-md tw:mx-auto tw:px-4 tw:py-10">
    <div class="tw:text-center tw:mb-8">
      <h1 class="tw-h2 tw:mb-1">Apply for September 2027</h1>
      <p class="tw:text-muted tw:mb-0">It takes about 10 minutes. You can save and come back.</p>
    </div>
    <div class="tw-steps tw-steps-sm" data-controller="steps"
         data-steps-complete-label-value="Submit application">
      <div class="tw-steps-header tw:mb-6">
        <div class="tw-step tw-completed" data-steps-target="step">
          <span class="tw-step-indicator"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
          <span class="tw-step-label">Your details</span>
        </div>
        <div class="tw-step tw-active" data-steps-target="step">
          <span class="tw-step-indicator">2</span>
          <span class="tw-step-label">Courses</span>
        </div>
        <div class="tw-step" data-steps-target="step">
          <span class="tw-step-indicator">3</span>
          <span class="tw-step-label">Review</span>
        </div>
      </div>
      <div class="tw-steps-content">
        <div class="tw-steps-panel" data-steps-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <h2 class="tw-h5 tw:mb-1">Your details</h2>
              <p class="tw:text-muted tw:text-sm tw:mb-4">We use these to contact you about your application.</p>
              <div class="tw-form-group">
                <label for="p-name" class="tw-form-label tw-form-label-required">Your full name</label>
                <input id="p-name" class="tw-form-control" type="text" value="Amelia Osei">
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="p-email" class="tw-form-label tw-form-label-required">Email address</label>
                <input id="p-email" class="tw-form-control" type="email" value="amelia.osei@example.com">
                <p class="tw-form-text">We'll send your offer here.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="tw-steps-panel tw-active" data-steps-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <h2 class="tw-h5 tw:mb-1">Choose your courses</h2>
              <p class="tw:text-muted tw:text-sm tw:mb-4">Pick up to four subjects. You can change these later.</p>
              <div class="tw-form-check">
                <input class="tw-form-check-input" type="checkbox" id="p-c1" checked>
                <label class="tw-form-check-label" for="p-c1">Mathematics</label>
              </div>
              <div class="tw-form-check">
                <input class="tw-form-check-input" type="checkbox" id="p-c2" checked>
                <label class="tw-form-check-label" for="p-c2">Physics</label>
              </div>
              <div class="tw-form-check">
                <input class="tw-form-check-input" type="checkbox" id="p-c3">
                <label class="tw-form-check-label" for="p-c3">Computer Science</label>
              </div>
              <div class="tw-form-check tw:mb-0">
                <input class="tw-form-check-input" type="checkbox" id="p-c4">
                <label class="tw-form-check-label" for="p-c4">Geography</label>
              </div>
            </div>
          </div>
        </div>
        <div class="tw-steps-panel" data-steps-target="panel">
          <div class="tw-card">
            <div class="tw-card-body">
              <h2 class="tw-h5 tw:mb-4">Check your application</h2>
              <dl class="tw-info-grid">
                <dt class="tw-info-grid-label">Name</dt>
                <dd class="tw-info-grid-value">Amelia Osei</dd>
                <dt class="tw-info-grid-label">Email</dt>
                <dd class="tw-info-grid-value">amelia.osei@example.com</dd>
                <dt class="tw-info-grid-label">Courses</dt>
                <dd class="tw-info-grid-value">Mathematics, Physics</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="tw-steps-footer">
        <button class="tw-btn tw-btn-secondary" type="button"
                data-steps-target="backBtn" data-action="click->steps#back">Back</button>
        <button class="tw-btn tw-btn-primary" type="button"
                data-steps-target="nextBtn" data-action="click->steps#next">Continue</button>
      </div>
    </div>
    <p class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-8 tw:mb-0">
      Need help? <button class="tw-btn tw-btn-link" type="button">Contact the admissions team</button>
    </p>
  </div>
</div>