<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2">Generic Card</h1>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <!-- Header / Introduction -->
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>CARD SYSTEM:</strong> Production card component with elevation hierarchy<br>
      <strong>FEATURES:</strong> 3 Elevation Levels | Semantic Variants | Interactive States | Selection Patterns | Media Support
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Cards are flexible containers for grouping related content. The production system emphasizes <strong>elevation hierarchy</strong> (shadow depth) over colored backgrounds. Use elevation to express content priority, semantic colors for feedback, and interactive states for user engagement.
    </p>
  </div>
  <!-- Section 1: Elevation Levels -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">1. Elevation Hierarchy</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>3-Tier System:</strong> Cards use shadow depth to express visual hierarchy. Base cards for inline content, elevated for featured content, prominent for primary actions.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-6">
      <!-- Level 0: Flat -->
      <div class="card card-flat">
        <div class="card-body">
          <h3 class="card-title">Level 0: Flat</h3>
          <p class="tw:mb-0">Flat card with no shadow.</p>
        </div>
      </div>
      <!-- Level 1: Base -->
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Level 1: Base</h3>
          <p class="tw:mb-0">Default card with subtle shadow. Use for inline content, standard layouts, and default containers.</p>
        </div>
      </div>
      <!-- Level 2: Elevated -->
      <div class="card card-elevated">
        <div class="card-body">
          <h3 class="card-title">Level 2: Elevated</h3>
          <p class="tw:mb-0">Medium shadow for featured content. Use to highlight important sections or secondary emphasis.</p>
        </div>
      </div>
      <!-- Level 3: Prominent -->
      <div class="card card-prominent">
        <div class="card-body">
          <h3 class="card-title">Level 3: Prominent</h3>
          <p class="tw:mb-0">Strong shadow for primary actions. Use for wizard cards, critical decisions, and high-priority content.</p>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card">...</div></code><br>
      <code><div class="card card-elevated">...</div></code><br>
      <code><div class="card card-prominent">...</div></code>
    </div>
  </div>
  <!-- Section 2: High-Priority Accent -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">2. High-Priority Accent</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Left Accent Border:</strong> 3px primary-colored accent for urgent or high-priority content. Combines with any elevation level.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-6">
      <!-- Flat + Accent -->
      <div class="card card-flat card-high-priority">
        <div class="card-body">
          <h3 class="card-title">Flat + Accent</h3>
          <p class="tw:mb-0">No shadow with priority accent. Subtle emphasis for important items in dense layouts.</p>
        </div>
      </div>
      <!-- Base + Accent -->
      <div class="card card-high-priority">
        <div class="card-body">
          <h3 class="card-title">Base + Accent</h3>
          <p class="tw:mb-0">Standard elevation with priority accent for important notices.</p>
        </div>
      </div>
      <!-- Elevated + Accent -->
      <div class="card card-elevated card-high-priority">
        <div class="card-body">
          <h3 class="card-title">Elevated + Accent</h3>
          <p class="tw:mb-0">Featured content with priority indicator. Common for actionable items.</p>
        </div>
      </div>
      <!-- Prominent + Accent -->
      <div class="card card-prominent card-high-priority">
        <div class="card-body">
          <h3 class="card-title">Prominent + Accent</h3>
          <p class="tw:mb-0">Maximum emphasis for critical decisions requiring immediate attention.</p>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card card-flat card-high-priority">...</div></code><br>
      <code><div class="card card-high-priority">...</div></code><br>
      <code><div class="card card-elevated card-high-priority">...</div></code>
    </div>
  </div>
  <!-- Section 2b: Pinned Accent -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">2b. Pinned Accent</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Left Accent Gradient:</strong> 3px gradient accent (blue → primary) marking a pinned or special card in a list. Use to differentiate one card from the rest of a grid (e.g. a built-in form pinned at the top). Mutually exclusive with <code>.card-high-priority</code> — both occupy the same <code>::before</code> accent slot.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-3 tw:gap-6">
      <!-- Flat + Pinned -->
      <div class="card card-flat card-pinned">
        <div class="card-body">
          <h3 class="card-title">Flat + Pinned</h3>
          <p class="tw:mb-0">No shadow with pinned accent. Use in dense grids where the pinned card sits alongside flat campaign cards.</p>
        </div>
      </div>
      <!-- Base + Pinned -->
      <div class="card card-pinned">
        <div class="card-body">
          <h3 class="card-title">Base + Pinned</h3>
          <p class="tw:mb-0">Standard elevation with the pinned indicator. Matches the chrome of surrounding base cards while signalling specialness.</p>
        </div>
      </div>
      <!-- Elevated + Pinned -->
      <div class="card card-elevated card-pinned">
        <div class="card-body">
          <h3 class="card-title">Elevated + Pinned</h3>
          <p class="tw:mb-0">Featured pinned content. Less commonly used since the pin already differentiates the card.</p>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card card-flat card-pinned">...</div></code><br>
      <code><div class="card card-pinned">...</div></code><br>
      <code><div class="card card-elevated card-pinned">...</div></code>
    </div>
  </div>
  <!-- Section 3: Semantic Variants -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">3. Semantic Background Variants</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Feedback Colors:</strong> Subtle tinted backgrounds for semantic meaning. Positive (success), Negative (error), Caution (warning), Highlight (info). Combine with any elevation level. Box-shadow borders automatically match the semantic color.
      </p>
    </div>
    <!-- Flat Semantic (No Shadow) -->
    <h3 class="h5 tw:mb-3 tw:mt-4">With Flat (No Shadow)</h3>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-6 tw:mb-6">
      <div class="card card-positive card-flat">
        <div class="card-body">
          <h3 class="card-title">Positive Flat</h3>
          <p class="tw:mb-0">Success feedback with no shadow. Use in dense layouts or nested cards where elevation would be excessive.</p>
        </div>
      </div>
      <div class="card card-negative card-flat">
        <div class="card-body">
          <h3 class="card-title">Negative Flat</h3>
          <p class="tw:mb-0">Error feedback with no shadow. Subtle error indication for inline validation or list items.</p>
        </div>
      </div>
      <div class="card card-caution card-flat">
        <div class="card-body">
          <h3 class="card-title">Caution Flat</h3>
          <p class="tw:mb-0">Warning feedback with no shadow. Low-emphasis warnings that don't require strong visual separation.</p>
        </div>
      </div>
      <div class="card card-highlight card-flat">
        <div class="card-body">
          <h3 class="card-title">Highlight Flat</h3>
          <p class="tw:mb-0">Informational highlight with no shadow. Use for selected items or featured content in dense layouts.</p>
        </div>
      </div>
    </div>
    <!-- Base Elevation Semantic -->
    <h3 class="h5 tw:mb-3 tw:mt-4">With Base Elevation</h3>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-6 tw:mb-6">
      <div class="card card-positive">
        <div class="card-body">
          <h3 class="card-title">Positive Feedback</h3>
          <p class="tw:mb-0">Success messages, confirmations, completed tasks. Green tint with matching border.</p>
        </div>
      </div>
      <div class="card card-negative">
        <div class="card-body">
          <h3 class="card-title">Negative Feedback</h3>
          <p class="tw:mb-0">Error messages, destructive warnings, failed validations. Red tint with matching border.</p>
        </div>
      </div>
      <div class="card card-caution">
        <div class="card-body">
          <h3 class="card-title">Caution Feedback</h3>
          <p class="tw:mb-0">Warnings, pending states, attention required. Orange tint with matching border.</p>
        </div>
      </div>
      <div class="card card-highlight">
        <div class="card-body">
          <h3 class="card-title">Highlight Feedback</h3>
          <p class="tw:mb-0">Informational highlights, selected items, featured content. Blue tint with matching border.</p>
        </div>
      </div>
    </div>
    <!-- Elevated Semantic -->
    <h3 class="h5 tw:mb-3 tw:mt-6">With Elevated Shadow</h3>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-6 tw:mb-6">
      <div class="card card-positive card-elevated">
        <div class="card-body">
          <h3 class="card-title">Positive + Elevated</h3>
          <p class="tw:mb-0">Featured success content with medium shadow depth.</p>
        </div>
      </div>
      <div class="card card-negative card-elevated">
        <div class="card-body">
          <h3 class="card-title">Negative + Elevated</h3>
          <p class="tw:mb-0">Featured error content with medium shadow depth.</p>
        </div>
      </div>
      <div class="card card-caution card-elevated">
        <div class="card-body">
          <h3 class="card-title">Caution + Elevated</h3>
          <p class="tw:mb-0">Featured warning content with medium shadow depth.</p>
        </div>
      </div>
      <div class="card card-highlight card-elevated">
        <div class="card-body">
          <h3 class="card-title">Highlight + Elevated</h3>
          <p class="tw:mb-0">Featured informational content with medium shadow depth.</p>
        </div>
      </div>
    </div>
    <!-- Prominent Semantic -->
    <h3 class="h5 tw:mb-3 tw:mt-6">With Prominent Shadow</h3>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-6">
      <div class="card card-positive card-prominent">
        <div class="card-body">
          <h3 class="card-title">Positive + Prominent</h3>
          <p class="tw:mb-0">High-priority success message with strong shadow.</p>
        </div>
      </div>
      <div class="card card-negative card-prominent">
        <div class="card-body">
          <h3 class="card-title">Negative + Prominent</h3>
          <p class="tw:mb-0">Critical error requiring immediate attention.</p>
        </div>
      </div>
      <div class="card card-caution card-prominent">
        <div class="card-body">
          <h3 class="card-title">Caution + Prominent</h3>
          <p class="tw:mb-0">High-priority warning with strong emphasis.</p>
        </div>
      </div>
      <div class="card card-highlight card-prominent">
        <div class="card-body">
          <h3 class="card-title">Highlight + Prominent</h3>
          <p class="tw:mb-0">High-priority informational highlight with strong emphasis.</p>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card card-positive card-flat">...</div></code><br>
      <code><div class="card card-positive">...</div></code><br>
      <code><div class="card card-negative card-elevated">...</div></code><br>
      <code><div class="card card-caution card-prominent">...</div></code><br>
      <code><div class="card card-highlight">...</div></code>
    </div>
  </div>
  <!-- Section 4: Card Structure -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">4. Card Structure & Sections</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Flexible Sections:</strong> Cards can contain header, body, and footer sections. Use header for titles/actions, body for main content, footer for metadata.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-3 tw:gap-6">
      <!-- Body Only -->
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Body Only</h3>
          <p class="tw:mb-0">Simplest card structure. Just content, no header or footer. Use for standalone content blocks.</p>
        </div>
      </div>
      <!-- Header + Body -->
      <div class="card">
        <div class="card-header">Card Header</div>
        <div class="card-body">
          <h3 class="card-title">Header + Body</h3>
          <p class="tw:mb-0">Header provides context or section label. Body contains the main content.</p>
        </div>
      </div>
      <!-- Header + Body + Footer -->
      <div class="card">
        <div class="card-header">Card Header</div>
        <div class="card-body">
          <h3 class="card-title">Full Structure</h3>
          <p class="tw:mb-0">Complete card with all sections. Footer shows metadata or secondary actions.</p>
        </div>
        <div class="card-footer">
          Last updated 2 hours ago
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card"></code><br>
      <code>  <div class="card-header">...</div></code><br>
      <code>  <div class="card-body">...</div></code><br>
      <code>  <div class="card-footer">...</div></code><br>
      <code></div></code>
    </div>
  </div>
  <!-- Section 5: Typography Variants -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">5. Typography Variants</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Title Sizes:</strong> Three title size variants using heading tokens. Small (h4), Default (h3), Large (h2). Choose based on card prominence and hierarchy.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-3 tw:gap-6">
      <!-- Small Title -->
      <div class="card">
        <div class="card-body">
          <h3 class="card-title-sm">Small Title (H4)</h3>
          <p class="card-subtitle">Optional subtitle text</p>
          <p class="tw:mb-0">Uses h4 typography tokens. Best for compact cards or secondary information.</p>
        </div>
      </div>
      <!-- Default Title -->
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Default Title (H3)</h3>
          <p class="card-subtitle">Optional subtitle text</p>
          <p class="tw:mb-0">Uses h3 typography tokens. Standard title size for most card use cases.</p>
        </div>
      </div>
      <!-- Large Title -->
      <div class="card">
        <div class="card-body">
          <h2 class="card-title-lg">Large Title (H2)</h2>
          <p class="card-subtitle">Optional subtitle text</p>
          <p class="tw:mb-0">Uses h2 typography tokens. Best for hero cards, wizards, or prominent actions.</p>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><h3 class="card-title-sm">Small Title</h3></code><br>
      <code><h3 class="card-title">Default Title</h3></code><br>
      <code><h2 class="card-title-lg">Large Title</h2></code><br>
      <code><p class="card-subtitle">Subtitle</p></code>
    </div>
  </div>
  <!-- Section 6: Size Variant -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">6. Size Variant</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Compact Padding:</strong> Use <code>.card-sm</code> for tighter spacing. Reduces padding in all sections while maintaining proportions.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6">
      <!-- Default Size -->
      <div class="card">
        <div class="card-header">Default Size Card</div>
        <div class="card-body">
          <h3 class="card-title">Standard Padding</h3>
          <p class="tw:mb-0">Header/footer: px-4 py-3. Body: p-4. Default comfortable spacing for most use cases.</p>
        </div>
        <div class="card-footer">
          Footer text
        </div>
      </div>
      <!-- Small Size -->
      <div class="card card-sm">
        <div class="card-header">Small Size Card</div>
        <div class="card-body">
          <h3 class="card-title">Compact Padding</h3>
          <p class="tw:mb-0">Header/footer: px-3 py-2.5. Body: p-3. Tighter spacing for dense layouts or sidebar cards.</p>
        </div>
        <div class="card-footer">
          Footer text
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card card-sm">...</div></code>
    </div>
  </div>
  <!-- Section 7: Interactive Cards -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">7. Interactive Cards (Clickable)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Hover & Focus States:</strong> Add <code>.card-interactive</code> for clickable cards. Base cards elevate on hover, elevated/prominent cards increase shadow strength. Focus ring uses neutral color (not primary).
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-4 tw:gap-6">
      <!-- Interactive Flat -->
      <div class="card card-flat card-interactive" tabindex="0">
        <div class="card-body">
          <h3 class="card-title">Interactive Flat</h3>
          <p class="tw:mb-0">Hover to add subtle shadow. Click or tab to focus. Flat cards elevate to base level on hover.</p>
        </div>
      </div>
      <!-- Interactive Base -->
      <div class="card card-interactive" tabindex="0">
        <div class="card-body">
          <h3 class="card-title">Interactive Base</h3>
          <p class="tw:mb-0">Hover to elevate. Click or tab to focus. Base cards lift to elevated shadow level on hover.</p>
        </div>
      </div>
      <!-- Interactive Elevated -->
      <div class="card card-elevated card-interactive" tabindex="0">
        <div class="card-body">
          <h3 class="card-title">Interactive Elevated</h3>
          <p class="tw:mb-0">Already elevated. Hover increases shadow strength (opacity). Focus adds neutral ring.</p>
        </div>
      </div>
      <!-- Interactive Prominent -->
      <div class="card card-prominent card-interactive" tabindex="0">
        <div class="card-body">
          <h3 class="card-title">Interactive Prominent</h3>
          <p class="tw:mb-0">Highest elevation. Hover strengthens shadow. Use for primary action cards in wizards.</p>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card card-flat card-interactive" tabindex="0">...</div></code><br>
      <code><div class="card card-interactive" tabindex="0">...</div></code><br>
      <small class="text-muted">Add tabindex="0" to make cards keyboard-accessible</small>
    </div>
  </div>
  <!-- Section 8: Selectable Cards -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">8. Selectable Cards (Checkbox & Radio)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Selection Patterns:</strong> Cards with integrated checkboxes or radio buttons. Control positioned top-left when no header, or prepended to header content. Selection is indicated by control state only (no background change).
      </p>
    </div>
    <!-- Checkbox Selection -->
    <h3 class="h5 tw:mb-3 tw:mt-4">Checkbox Selection</h3>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6 tw:mb-6">
      <!-- No Header -->
      <div class="card card-selectable-checkbox">
        <input type="checkbox" id="check1">
        <div class="card-body">
          <h3 class="card-title">Option 1</h3>
          <p class="tw:mb-0">Checkbox floats in top-left corner when no header is present. Click anywhere to select.</p>
        </div>
      </div>
      <!-- With Header -->
      <div class="card card-selectable-checkbox">
        <div class="card-header">
          <input type="checkbox" id="check2">
          <span>Featured Option</span>
        </div>
        <div class="card-body">
          <p class="tw:mb-0">Checkbox prepends to header content using flexbox. Label and control aligned horizontally.</p>
        </div>
      </div>
    </div>
    <!-- Radio Selection -->
    <h3 class="h5 tw:mb-3 tw:mt-6">Radio Selection</h3>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6 tw:mb-6">
      <!-- No Header -->
      <div class="card card-selectable-radio">
        <input type="radio" name="radioGroup" id="radio1">
        <div class="card-body">
          <h3 class="card-title">Choice A</h3>
          <p class="tw:mb-0">Radio button floats in top-left corner. Use for mutually exclusive options.</p>
        </div>
      </div>
      <!-- With Header -->
      <div class="card card-selectable-radio">
        <div class="card-header">
          <input type="radio" name="radioGroup" id="radio2">
          <span>Choice B</span>
        </div>
        <div class="card-body">
          <p class="tw:mb-0">Radio button prepended to header. Common pattern for plan selection or configuration choices.</p>
        </div>
      </div>
    </div>
    <!-- Selection Hitbox -->
    <h3 class="h5 tw:mb-3 tw:mt-6">Selection Hitbox</h3>
    <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6 tw:mb-6">
      <!-- No Header -->
      <div class="card card-selectable-checkbox">
        <input type="checkbox" id="fullcheck1">
        <label for="fullcheck1" class="card-selectable-hitbox"></label>
        <div class="card-body">
          <h3 class="card-title">Bigger Hitbox</h3>
          <p class="tw:mb-0">Checkbox floats in top-left corner when no header is present. Click anywhere to select.</p>
        </div>
      </div>
      <!-- With Header -->
      <div class="card card-selectable-checkbox">
        <div class="card-header">
          <input type="checkbox" id="fullcheck2">
          <label for="fullcheck2" class="card-selectable-hitbox-full"></label>
          <span>Full Card Hitbox</span>
        </div>
        <div class="card-body">
          <p class="tw:mb-0">Checkbox prepends to header content using flexbox. Label and control aligned horizontally.</p>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card card-selectable-checkbox"></code><br>
      <code>  <input type="checkbox" id="..."></code><br>
      <code>  <label for="..." class="card-selectable-hitbox-full"></label></code><br>
      <code>  <div class="card-body">...</div></code><br>
      <code></div></code>
    </div>
  </div>
  <!-- Section 9: Image Cards -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">9. Image Cards (Cover Photos)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Media Component:</strong> Full-width cover images using <code>.card-cover</code>. Natural image dimensions (no enforced aspect ratio). Border-radius automatically inherited based on position (first child, last child, or only child).
      </p>
    </div>
    <div class="tw:flex tw:flex-col tw:md:flex-row tw:items-start tw:gap-6">
      <!-- Image Top -->
      <div class="card">
        <img src="https://images.unsplash.com/photo-1754573061125-b43b1637b541?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fE1lbGJvdXJuZSUyMENhbXB1c3xlbnwwfHwwfHx8MA%3D%3D" alt="Location photo" class="card-cover">
        <div class="card-body">
          <h3 class="card-title">Melbourne Campus</h3>
          <p class="tw:mb-3">Beautiful waterfront location with modern facilities and easy transport access.</p>
          <button class="btn btn-primary btn-sm" type="button">View Details</button>
        </div>
      </div>
      <!-- Image Bottom -->
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Sydney Campus</h3>
          <p class="tw:mb-3">Historic building in the heart of the city. Close to parks, libraries, and cultural venues.</p>
          <button class="btn btn-primary btn-sm" type="button">View Details</button>
        </div>
        <img src="https://images.unsplash.com/photo-1728206348193-9b5ae74a7d32?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8U3lkbmV5JTIwQ2FtcHVzfGVufDB8fDB8fHww" alt="Location photo" class="card-cover">
      </div>
      <!-- Image Only -->
      <div class="card">
        <img src="https://plus.unsplash.com/premium_photo-1718674393856-760140722005?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTF8fGFkbWlzc2lvbnxlbnwwfHwwfHx8MA%3D%3D" alt="Full card photo" class="card-cover">
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><img src="..." class="card-cover" alt="..."></code><br>
      <small class="text-muted">Border-radius inheritance: first-child (top), last-child (bottom), only-child (all corners)</small>
    </div>
  </div>
  <!-- Section 10: Table Card -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">10. Table Card (Tight Body)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Flush Content:</strong> Use <code>.card-body.tight</code> for zero-padding body. Perfect for tables or lists that extend to card edges. Automatically adds minimal top/bottom padding when header/footer are absent.
      </p>
    </div>
    <div class="card" class="tw:max-w-[600px]">
      <div class="card-header">
        <div class="tw:flex tw:items-center tw:justify-between">
          <span>Recent Applications</span>
          <button class="btn btn-sm btn-outline-primary" type="button">Export</button>
        </div>
      </div>
      <div class="card-body tight">
        <table class="tw:w-full">
          <thead class="tw:bg-neutral-100">
            <tr>
              <th class="tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-semibold">Name</th>
              <th class="tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-semibold">Status</th>
              <th class="tw:px-4 tw:py-2 tw:text-left tw:text-sm tw:font-semibold">Date</th>
            </tr>
          </thead>
          <tbody>
            <tr class="tw:border-t tw:border-neutral-200">
              <td class="tw:px-4 tw:py-3 tw:text-sm">Sarah Johnson</td>
              <td class="tw:px-4 tw:py-3 tw:text-sm">Submitted</td>
              <td class="tw:px-4 tw:py-3 tw:text-sm">2026-01-15</td>
            </tr>
            <tr class="tw:border-t tw:border-neutral-200">
              <td class="tw:px-4 tw:py-3 tw:text-sm">Michael Chen</td>
              <td class="tw:px-4 tw:py-3 tw:text-sm">Under Review</td>
              <td class="tw:px-4 tw:py-3 tw:text-sm">2026-01-14</td>
            </tr>
            <tr class="tw:border-t tw:border-neutral-200">
              <td class="tw:px-4 tw:py-3 tw:text-sm">Emma Wilson</td>
              <td class="tw:px-4 tw:py-3 tw:text-sm">Approved</td>
              <td class="tw:px-4 tw:py-3 tw:text-sm">2026-01-13</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card-body tight"></code><br>
      <code>  <table>...</table></code><br>
      <code></div></code>
    </div>
  </div>
  <!-- Section 11: Production Example (Wizard Card) -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">11. Production Example: Wizard Card</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Real-World Pattern:</strong> Combines prominent elevation, high-priority accent, and large title. Common for multi-step processes, important decisions, or primary action cards.
      </p>
    </div>
    <div class="card card-prominent card-high-priority" class="tw:max-w-[600px]">
      <div class="card-body">
        <h2 class="card-title-lg">Start Your Application</h2>
        <p class="tw:mb-4">Complete your enrollment in three simple steps. We'll guide you through each stage of the process.</p>
        <div class="tw:space-y-2 tw:mb-4">
          <div class="tw:flex tw:items-center tw:gap-2">
            <i class="fa-solid fa-circle-check tw:w-5 tw:h-5 tw:text-green-500"></i>
            <span class="tw:text-sm">Personal information</span>
          </div>
          <div class="tw:flex tw:items-center tw:gap-2">
            <i class="fa-solid fa-circle-check tw:w-5 tw:h-5 tw:text-green-500"></i>
            <span class="tw:text-sm">Academic history</span>
          </div>
          <div class="tw:flex tw:items-center tw:gap-2">
            <div class="tw:w-5 tw:h-5 tw:rounded-full tw:border-2 tw:border-neutral-300"></div>
            <span class="tw:text-sm text-muted">Supporting documents</span>
          </div>
        </div>
        <div class="tw:flex tw:gap-3">
          <button class="btn btn-primary" type="button">Continue Application</button>
          <button class="btn btn-outline-secondary" type="button">Save for Later</button>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-neutral-600">
      <code><div class="card card-prominent card-high-priority"></code><br>
      <code>  <div class="card-body"></code><br>
      <code>    <h2 class="card-title-lg">...</h2></code><br>
      <code>    ...content...</code><br>
      <code>  </div></code><br>
      <code></div></code>
    </div>
  </div>
  <!-- Quick Reference Footer -->
  <div class="tw:border-t tw:pt-6 tw:mt-8">
    <div class="callout">
      <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p>
      <p class="tw:mb-0 tw:text-xs tw:text-neutral-600 tw:font-mono">
        <strong>Base & Elevation:</strong> .card-flat | .card | .card-elevated | .card-prominent | .card-high-priority<br>
        <strong>Sections:</strong> .card-header | .card-body | .card-body.tight | .card-footer<br>
        <strong>Size:</strong> .card-sm<br>
        <strong>Semantic:</strong> .card-positive | .card-negative | .card-caution<br>
        <strong>Typography:</strong> .card-title-sm | .card-title | .card-title-lg | .card-subtitle<br>
        <strong>Interactive:</strong> .card-interactive | .card-selectable-checkbox | .card-selectable-radio<br>
        <strong>Media:</strong> .card-cover
      </p>
    </div>
  </div>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2 tw:border-t tw:pt-8">School Card</h1>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> School Card (consumer-only)<br>
      <strong>COMPOSES:</strong> internal metrics grid (.school-card-metric*) + badge course chips + verified check + ApplicaaOne wordmark + optional school-photo
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Provider listing card. Identity (initials + name + wordmark + address) sits beside a divided 3-up metrics grid (Rating / Recommended / Status), above a "Top Available Courses" chip row. Omit <code>.school-photo</code> for initials-only contexts; add <code>.school-card-header-stack</code> in tight columns where the metrics should wrap.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Default — results list card (910px)</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Photo thumbnail + initials chip, name with verified check, ApplicaaOne wordmark, divided 3-up metrics (Rating / Recommended / Status), and a "Top Available Courses" chip row.</p>
    <div class="tw:max-w-[910px]">
      <article class="school-card">
        <div class="school-photo tw:w-[116px] tw:h-[116px] tw:shrink-0 tw:self-start"><img src="/mock/schools/school-thumbnail.jpg" alt="" loading="lazy"></div>
        <div class="school-card-body">
          <div class="school-card-header">
            <div class="school-card-identity">
              <span class="school-card-initials" aria-hidden="true">HR</span>
              <div class="school-card-heading">
                <h3 class="school-card-name">
                  <span>Hills Road Sixth Form College
                    <i class="fa-solid fa-circle-check school-card-verified" aria-label="Verified" title="Verified on ApplicaaOne"></i>
                  </span>
                </h3>
                <span class="school-card-wordmark"><svg width="351" height="64" viewBox="0 0 351 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ApplicaaOne">
                    <path d="M120.314 1.58716L115.301 49.289H122.522L127.44 2.49103C127.491 2.00789 127.112 1.58716 126.627 1.58716H120.314Z" fill="url(#paint0_linear_75_4)"/>
                    <path d="M132.438 3.14298C131.456 3.99062 130.904 5.03901 130.77 6.28816C130.647 7.49269 130.982 8.54109 131.78 9.43334C132.627 10.281 133.653 10.7048 134.858 10.7048C136.152 10.7048 137.267 10.281 138.204 9.43334C139.191 8.54109 139.743 7.53731 139.871 6.28816C139.999 5.03901 139.665 3.99062 138.862 3.14298C138.103 2.29534 137.077 1.87153 135.783 1.87153C134.579 1.87153 133.464 2.29534 132.438 3.14298Z" fill="url(#paint1_linear_75_4)"/>
                    <path d="M136.665 18.5287H130.486L127.251 49.289H134.339L137.479 19.4326C137.529 18.9495 137.15 18.5287 136.665 18.5287Z" fill="url(#paint2_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M200.064 18.5232H193.952L193.359 24.1665C192.506 22.327 191.323 20.8687 189.809 19.7946C188.025 18.5008 185.889 17.854 183.257 17.854C180.625 17.854 178.082 18.5008 175.628 19.7946C173.219 21.0382 171.2 22.8673 169.566 25.2764C167.938 27.6408 166.945 30.5127 166.588 33.9033C166.237 37.2492 166.622 40.1212 167.754 42.5302C168.886 44.9337 170.52 46.7851 172.656 48.0789C174.842 49.328 177.295 49.9526 179.883 49.9526C182.47 49.9526 184.79 49.3057 186.842 48.012C188.583 46.9428 190.073 45.4855 191.311 43.6435L190.718 49.2834H197.739L200.878 19.4271C200.929 18.9439 200.55 18.5232 200.064 18.5232ZM174.791 39.1843C174.1 37.7177 173.86 35.9555 174.078 33.9033C174.29 31.8567 174.897 30.0945 175.901 28.6223C176.905 27.1501 178.137 26.0348 179.598 25.2764C181.104 24.518 182.682 24.1387 184.333 24.1387C185.716 24.1387 187.032 24.518 188.292 25.2764C189.597 26.0348 190.595 27.1501 191.287 28.6223C192.029 30.0443 192.291 31.8121 192.068 33.9033C191.845 35.9945 191.214 37.779 190.166 39.2512C189.173 40.6788 187.941 41.7718 186.48 42.5302C185.063 43.2886 183.664 43.6678 182.281 43.6678C180.63 43.6678 179.136 43.2886 177.786 42.5302C176.481 41.7718 175.483 40.6565 174.791 39.1843Z" fill="url(#paint3_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M234.762 18.5232H228.65L228.056 24.1665C227.204 22.327 226.02 20.8687 224.506 19.7946C222.722 18.5008 220.586 17.854 217.954 17.854C215.322 17.854 212.779 18.5008 210.325 19.7946C207.922 21.0382 205.897 22.8673 204.264 25.2764C202.635 27.6408 201.643 30.5127 201.286 33.9033C200.934 37.2492 201.325 40.1212 202.451 42.5302C203.583 44.9337 205.217 46.7851 207.353 48.0789C209.539 49.328 211.993 49.9526 214.58 49.9526C217.168 49.9526 219.488 49.3057 221.54 48.012C223.28 46.9428 224.771 45.4855 226.008 43.6435L225.415 49.2834H232.436L235.576 19.4271C235.626 18.9439 235.248 18.5232 234.762 18.5232ZM209.489 39.1843C208.797 37.7177 208.557 35.9555 208.775 33.9033C208.987 31.8567 209.595 30.0945 210.598 28.6223C211.602 27.1501 212.835 26.0348 214.296 25.2764C215.801 24.518 217.38 24.1387 219.03 24.1387C220.413 24.1387 221.729 24.518 222.99 25.2764C224.294 26.0348 225.293 27.1501 225.984 28.6223C226.726 30.0443 226.988 31.8121 226.765 33.9033C226.542 35.9945 225.912 37.779 224.863 39.2512C223.871 40.6788 222.638 41.7718 221.177 42.5302C219.761 43.2886 218.361 43.6678 216.978 43.6678C215.327 43.6678 213.833 43.2886 212.483 42.5302C211.178 41.7718 210.18 40.6565 209.489 39.1843Z" fill="url(#paint4_linear_75_4)"/>
                    <path d="M146.033 33.9089C145.827 35.8718 146.072 37.5894 146.764 39.056C147.461 40.4836 148.476 41.6213 149.814 42.4689C151.197 43.3165 152.781 43.7404 154.56 43.7404C156.032 43.7404 157.46 43.5173 158.843 43.0712C160.226 42.625 161.475 42.0005 162.584 41.1974C163.694 40.3944 164.547 39.5022 165.138 38.5207L164.302 46.4784C163.12 47.5491 161.581 48.3968 159.69 49.0214C157.8 49.6459 155.759 49.9582 153.573 49.9582C150.405 49.9582 147.623 49.289 145.225 47.9507C142.871 46.5677 141.087 44.6716 139.871 42.2681C138.7 39.8145 138.282 37.0318 138.611 33.9089C138.94 30.786 139.949 27.9587 141.628 25.5496C143.351 23.1406 145.531 21.2724 148.169 19.934C150.857 18.5511 153.779 17.8596 156.947 17.8596C159.133 17.8596 161.107 18.1718 162.869 18.7964C164.338 19.3172 165.528 19.9931 166.44 20.8242C166.781 21.1358 166.923 21.6017 166.875 22.0616L166.114 29.2971C165.73 28.271 165.044 27.3787 164.057 26.6203C163.114 25.8173 161.999 25.1927 160.711 24.7466C159.423 24.3005 158.062 24.0774 156.634 24.0774C154.85 24.0774 153.177 24.5012 151.621 25.3489C150.104 26.1965 148.844 27.3564 147.846 28.8286C146.842 30.3009 146.245 31.9961 146.039 33.9089H146.033Z" fill="url(#paint5_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M78.7911 63.9999H86.0797L88.1587 44.2161C88.9541 45.8277 90.0203 47.1384 91.3551 48.1458C93.1842 49.4396 95.3702 50.0864 98.0414 50.0864C100.713 50.0864 103.255 49.4619 105.659 48.2127C108.068 46.9245 110.092 45.0731 111.726 42.664C113.366 40.2104 114.364 37.2938 114.721 33.9033C115.078 30.4681 114.693 27.5516 113.567 25.1425C112.44 22.739 110.801 20.9099 108.659 19.6607C106.518 18.367 104.07 17.7201 101.438 17.7201C98.8054 17.7201 96.4409 18.3893 94.3386 19.7277C92.7955 20.7004 91.4574 21.9853 90.3266 23.5871L90.7638 19.427C90.8146 18.9439 90.4357 18.5231 89.9499 18.5231H83.5702L78.7911 63.9999ZM106.512 28.6892C107.209 30.1112 107.449 31.8511 107.232 33.9033C107.02 35.9499 106.412 37.7121 105.408 39.1843C104.415 40.6119 103.161 41.7049 101.655 42.4633C100.194 43.1771 98.6213 43.534 96.9261 43.534C95.5487 43.534 94.2214 43.1771 92.9611 42.4633C91.7008 41.7049 90.7026 40.6119 89.961 39.1843C89.2639 37.7622 89.0297 35.9945 89.2472 33.9033C89.4646 31.8121 90.0725 30.0499 91.0707 28.6223C92.1135 27.1947 93.3404 26.124 94.7512 25.4102C96.1677 24.6518 97.5674 24.2726 98.9504 24.2726C100.646 24.2726 102.14 24.6518 103.445 25.4102C104.8 26.124 105.821 27.217 106.512 28.6892Z" fill="url(#paint6_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M51.3824 63.9999H44.0938L45.6398 49.289H36.8499L32.7439 37.2492H15.4922L8.8946 49.289H0L24.8744 5.49073H29.309C29.7699 5.49073 30.1811 5.78036 30.3364 6.21435L45.6635 49.0628L48.8729 18.5231H55.2526C55.7384 18.5231 56.1173 18.9439 56.0665 19.427L55.6293 23.5871C56.7601 21.9853 58.0982 20.7004 59.6412 19.7277C61.7436 18.3893 64.1081 17.7201 66.7402 17.7201C69.3723 17.7201 71.8204 18.367 73.9618 19.6607C76.1032 20.9099 77.7427 22.739 78.8692 25.1425C79.9957 27.5516 80.3804 30.4681 80.0235 33.9033C79.6666 37.2938 78.6684 40.2104 77.0289 42.664C75.395 45.0731 73.3707 46.9245 70.9617 48.2127C68.5582 49.4619 66.0152 50.0864 63.3441 50.0864C60.6729 50.0864 58.4869 49.4396 56.6578 48.1458C55.3191 47.1387 54.2552 45.8284 53.4613 44.2174L51.3824 63.9999ZM72.5342 33.9033C72.7517 31.8511 72.5119 30.1112 71.8149 28.6892C71.1234 27.217 70.1029 26.124 68.7478 25.4102C67.4428 24.6518 65.9483 24.2726 64.2531 24.2726C62.8701 24.2726 61.4704 24.6518 60.0539 25.4102C58.643 26.124 57.4162 27.1947 56.3734 28.6223C55.3752 30.0499 54.7673 31.8121 54.5499 33.9033C54.3324 35.9945 54.5666 37.7622 55.2636 39.1843C56.0053 40.6119 57.0035 41.7049 58.2638 42.4633C59.5241 43.1771 60.8514 43.534 62.2288 43.534C63.924 43.534 65.4966 43.1771 66.9577 42.4633C68.4634 41.7049 69.7181 40.6119 70.7107 39.1843C71.7145 37.7121 72.3223 35.9499 72.5342 33.9033ZM26.3994 15.7182L31.1747 30.5629H18.4857L26.3994 15.7182Z" fill="url(#paint7_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M333.212 49.9583C330.089 49.9583 327.396 49.2892 325.132 47.9508C322.912 46.6124 321.278 44.7387 320.241 42.3352C319.198 39.9261 318.852 37.1211 319.187 33.909C319.522 30.6969 320.475 27.825 322.02 25.4159C323.609 23.0069 325.678 21.161 328.221 19.8673C330.769 18.5289 333.669 17.8597 336.926 17.8597C340.183 17.8597 342.882 18.4843 345.023 19.7334C347.164 20.9826 348.715 22.7894 349.668 25.1483C350.672 27.4681 351.001 30.2731 350.655 33.5744C350.616 33.9313 350.555 34.3105 350.471 34.712C350.413 35.2385 349.96 35.582 349.43 35.582H326.392C326.385 36.9934 326.557 38.2413 326.91 39.3294C327.418 40.8463 328.277 42.0062 329.487 42.8092C330.742 43.6122 332.303 44.0137 334.177 44.0137C336.05 44.0137 337.896 43.6122 339.452 42.8092C341.008 42.0062 342.363 40.7793 343.517 39.1287L349.468 41.6716C347.572 44.4376 345.28 46.5065 342.592 47.8894C339.904 49.2724 336.781 49.9639 333.212 49.9639V49.9583ZM328.165 28.0313C327.743 28.8065 327.392 29.6748 327.111 30.6356H343.111C343.157 29.3206 342.954 28.1615 342.503 27.1614C342.006 25.9569 341.214 25.02 340.121 24.3508C339.078 23.6816 337.796 23.347 336.279 23.347C334.45 23.347 332.849 23.7485 331.472 24.5516C330.095 25.3546 328.991 26.5145 328.165 28.0313Z" fill="url(#paint8_linear_75_4)"/>
                    <path d="M309.049 25.4159C309.863 26.5703 310.153 28.2879 309.913 30.5631L309.919 30.5687L307.95 49.2947H315.373L317.425 29.7656C317.815 26.0628 317.202 23.1686 315.596 21.0718C313.99 18.9304 311.452 17.8597 307.973 17.8597C305.831 17.8597 303.935 18.3058 302.279 19.1981C300.673 20.0903 299.279 21.451 298.108 23.2801L298.509 19.4379C298.56 18.9549 298.181 18.5345 297.696 18.5345H291.382L288.148 49.2947H295.37L297.338 30.5687C297.483 29.1857 297.901 27.9811 298.587 26.9551C299.279 25.8844 300.165 25.0813 301.247 24.546C302.335 23.966 303.545 23.676 304.883 23.676C306.846 23.676 308.235 24.256 309.049 25.4159Z" fill="url(#paint9_linear_75_4)"/>
                    <g clip-path="url(#clip0_75_4)">
                      <path d="M273.662 8.38179C271.106 4.32342 267.837 1.72827 264.983 0.0938721C277.957 1.17611 288.155 12.0426 288.16 25.3C288.16 29.524 287.117 33.4995 285.289 37.0002C282.451 39.1261 277.648 41.7985 271.216 42.0304C269.574 42.0886 268.013 41.9829 266.552 41.7633C272.006 40.1805 276.622 35.6286 278.282 29.4329C279.476 24.9779 278.921 20.4948 277.053 16.8038C276.501 14.1816 275.473 11.2587 273.662 8.38179Z" fill="url(#paint10_linear_75_4)"/>
                      <path d="M247.41 21.2231C244.996 30.351 249.914 39.5823 258.417 41.8607C261.164 42.5969 263.95 42.5173 266.546 41.765C268.006 41.9836 269.564 42.0885 271.205 42.0304C277.637 41.7985 282.44 39.126 285.278 37.0002C281.055 45.0783 272.602 50.5999 262.852 50.5999C255.84 50.5999 249.496 47.7453 244.914 43.1347C243.821 40.0647 242.286 33.6873 244.859 26.4319C245.55 24.4805 246.435 22.746 247.41 21.2231Z" fill="url(#paint11_linear_75_4)"/>
                      <path d="M247.407 21.2365C246.436 22.7559 245.554 24.4857 244.864 26.4319C242.292 33.6873 243.826 40.0647 244.92 43.1347C240.37 38.5629 237.56 32.2572 237.56 25.3C237.56 11.3248 248.884 0 262.857 0C263.575 0 264.282 0.0331296 264.983 0.0938672C267.837 1.72826 271.106 4.32341 273.668 8.37627C275.485 11.2623 276.514 14.1961 277.064 16.8254C275.098 12.9274 271.67 9.90966 267.291 8.7362C258.771 6.45285 249.877 12.017 247.426 21.1641C247.419 21.1883 247.413 21.2124 247.407 21.2365Z" fill="url(#paint12_linear_75_4)"/>
                    </g>
                    <defs>
                      <linearGradient id="paint0_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint1_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint2_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint3_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint4_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint5_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint6_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint7_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint8_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint9_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint10_linear_75_4" x1="267.605" y1="9.59102" x2="275.767" y2="41.6049" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint11_linear_75_4" x1="274.28" y1="35.2719" x2="243.363" y2="32.7877" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint12_linear_75_4" x1="251.092" y1="32.7872" x2="271.799" y2="6.00954" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <clipPath id="clip0_75_4">
                        <rect width="50.6" height="50.6" fill="white" transform="translate(237.56)"/>
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <p class="school-card-meta">Hills Road, Cambridge CB2 8PE</p>
              </div>
            </div>
            <div class="school-card-metrics">
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">4.8</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Rating</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-thumbs-up tw:text-green-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">94%</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Recommended</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-calendar-check tw:text-link" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Accepting Now</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800 tw:font-normal">Until Aug 23rd, 2025</span>
              </span>
            </div>
          </div>
          <div class="school-card-courses">
            <p class="school-card-courses-label">Top Available Courses</p>
            <div class="school-card-courses-list">
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Further Maths A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Physics A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Economics A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Computer Science A-Level</span>
              <span class="school-card-courses-more">+18 more</span>
            </div>
          </div>
        </div>
        <div class="school-card-actions">
          <button type="button" class="school-card-bookmark" aria-label="Save Hills Road Sixth Form College">
            <i class="fa-light fa-bookmark" aria-hidden="true"></i>
          </button>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Without photo — initials only</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Omit <code>.school-photo</code> when no cover image is available (e.g. the map results column). The initials chip carries the identity; an optional status badge can ride alongside the wordmark.</p>
    <div class="tw:max-w-[910px]">
      <article class="school-card">
        <div class="school-card-body">
          <div class="school-card-header">
            <div class="school-card-identity">
              <span class="school-card-initials" aria-hidden="true">BC</span>
              <div class="school-card-heading">
                <h3 class="school-card-name">
                  <span>Birchfield College
                    <i class="fa-solid fa-circle-check school-card-verified" aria-label="Verified" title="Verified on ApplicaaOne"></i>
                  </span>
                </h3>
                <span class="tw:inline-flex tw:items-center tw:gap-2 tw:flex-wrap">
                  <span class="badge badge-rounded badge-magenta-soft badge-xs tw:uppercase">Online Provider</span>
                  <span class="tw:inline-flex tw:h-3 tw:[&_svg]:h-full tw:[&_svg]:w-auto"><svg width="351" height="64" viewBox="0 0 351 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ApplicaaOne">
                      <path d="M120.314 1.58716L115.301 49.289H122.522L127.44 2.49103C127.491 2.00789 127.112 1.58716 126.627 1.58716H120.314Z" fill="url(#paint0_linear_75_4)"/>
                      <path d="M132.438 3.14298C131.456 3.99062 130.904 5.03901 130.77 6.28816C130.647 7.49269 130.982 8.54109 131.78 9.43334C132.627 10.281 133.653 10.7048 134.858 10.7048C136.152 10.7048 137.267 10.281 138.204 9.43334C139.191 8.54109 139.743 7.53731 139.871 6.28816C139.999 5.03901 139.665 3.99062 138.862 3.14298C138.103 2.29534 137.077 1.87153 135.783 1.87153C134.579 1.87153 133.464 2.29534 132.438 3.14298Z" fill="url(#paint1_linear_75_4)"/>
                      <path d="M136.665 18.5287H130.486L127.251 49.289H134.339L137.479 19.4326C137.529 18.9495 137.15 18.5287 136.665 18.5287Z" fill="url(#paint2_linear_75_4)"/>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M200.064 18.5232H193.952L193.359 24.1665C192.506 22.327 191.323 20.8687 189.809 19.7946C188.025 18.5008 185.889 17.854 183.257 17.854C180.625 17.854 178.082 18.5008 175.628 19.7946C173.219 21.0382 171.2 22.8673 169.566 25.2764C167.938 27.6408 166.945 30.5127 166.588 33.9033C166.237 37.2492 166.622 40.1212 167.754 42.5302C168.886 44.9337 170.52 46.7851 172.656 48.0789C174.842 49.328 177.295 49.9526 179.883 49.9526C182.47 49.9526 184.79 49.3057 186.842 48.012C188.583 46.9428 190.073 45.4855 191.311 43.6435L190.718 49.2834H197.739L200.878 19.4271C200.929 18.9439 200.55 18.5232 200.064 18.5232ZM174.791 39.1843C174.1 37.7177 173.86 35.9555 174.078 33.9033C174.29 31.8567 174.897 30.0945 175.901 28.6223C176.905 27.1501 178.137 26.0348 179.598 25.2764C181.104 24.518 182.682 24.1387 184.333 24.1387C185.716 24.1387 187.032 24.518 188.292 25.2764C189.597 26.0348 190.595 27.1501 191.287 28.6223C192.029 30.0443 192.291 31.8121 192.068 33.9033C191.845 35.9945 191.214 37.779 190.166 39.2512C189.173 40.6788 187.941 41.7718 186.48 42.5302C185.063 43.2886 183.664 43.6678 182.281 43.6678C180.63 43.6678 179.136 43.2886 177.786 42.5302C176.481 41.7718 175.483 40.6565 174.791 39.1843Z" fill="url(#paint3_linear_75_4)"/>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M234.762 18.5232H228.65L228.056 24.1665C227.204 22.327 226.02 20.8687 224.506 19.7946C222.722 18.5008 220.586 17.854 217.954 17.854C215.322 17.854 212.779 18.5008 210.325 19.7946C207.922 21.0382 205.897 22.8673 204.264 25.2764C202.635 27.6408 201.643 30.5127 201.286 33.9033C200.934 37.2492 201.325 40.1212 202.451 42.5302C203.583 44.9337 205.217 46.7851 207.353 48.0789C209.539 49.328 211.993 49.9526 214.58 49.9526C217.168 49.9526 219.488 49.3057 221.54 48.012C223.28 46.9428 224.771 45.4855 226.008 43.6435L225.415 49.2834H232.436L235.576 19.4271C235.626 18.9439 235.248 18.5232 234.762 18.5232ZM209.489 39.1843C208.797 37.7177 208.557 35.9555 208.775 33.9033C208.987 31.8567 209.595 30.0945 210.598 28.6223C211.602 27.1501 212.835 26.0348 214.296 25.2764C215.801 24.518 217.38 24.1387 219.03 24.1387C220.413 24.1387 221.729 24.518 222.99 25.2764C224.294 26.0348 225.293 27.1501 225.984 28.6223C226.726 30.0443 226.988 31.8121 226.765 33.9033C226.542 35.9945 225.912 37.779 224.863 39.2512C223.871 40.6788 222.638 41.7718 221.177 42.5302C219.761 43.2886 218.361 43.6678 216.978 43.6678C215.327 43.6678 213.833 43.2886 212.483 42.5302C211.178 41.7718 210.18 40.6565 209.489 39.1843Z" fill="url(#paint4_linear_75_4)"/>
                      <path d="M146.033 33.9089C145.827 35.8718 146.072 37.5894 146.764 39.056C147.461 40.4836 148.476 41.6213 149.814 42.4689C151.197 43.3165 152.781 43.7404 154.56 43.7404C156.032 43.7404 157.46 43.5173 158.843 43.0712C160.226 42.625 161.475 42.0005 162.584 41.1974C163.694 40.3944 164.547 39.5022 165.138 38.5207L164.302 46.4784C163.12 47.5491 161.581 48.3968 159.69 49.0214C157.8 49.6459 155.759 49.9582 153.573 49.9582C150.405 49.9582 147.623 49.289 145.225 47.9507C142.871 46.5677 141.087 44.6716 139.871 42.2681C138.7 39.8145 138.282 37.0318 138.611 33.9089C138.94 30.786 139.949 27.9587 141.628 25.5496C143.351 23.1406 145.531 21.2724 148.169 19.934C150.857 18.5511 153.779 17.8596 156.947 17.8596C159.133 17.8596 161.107 18.1718 162.869 18.7964C164.338 19.3172 165.528 19.9931 166.44 20.8242C166.781 21.1358 166.923 21.6017 166.875 22.0616L166.114 29.2971C165.73 28.271 165.044 27.3787 164.057 26.6203C163.114 25.8173 161.999 25.1927 160.711 24.7466C159.423 24.3005 158.062 24.0774 156.634 24.0774C154.85 24.0774 153.177 24.5012 151.621 25.3489C150.104 26.1965 148.844 27.3564 147.846 28.8286C146.842 30.3009 146.245 31.9961 146.039 33.9089H146.033Z" fill="url(#paint5_linear_75_4)"/>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M78.7911 63.9999H86.0797L88.1587 44.2161C88.9541 45.8277 90.0203 47.1384 91.3551 48.1458C93.1842 49.4396 95.3702 50.0864 98.0414 50.0864C100.713 50.0864 103.255 49.4619 105.659 48.2127C108.068 46.9245 110.092 45.0731 111.726 42.664C113.366 40.2104 114.364 37.2938 114.721 33.9033C115.078 30.4681 114.693 27.5516 113.567 25.1425C112.44 22.739 110.801 20.9099 108.659 19.6607C106.518 18.367 104.07 17.7201 101.438 17.7201C98.8054 17.7201 96.4409 18.3893 94.3386 19.7277C92.7955 20.7004 91.4574 21.9853 90.3266 23.5871L90.7638 19.427C90.8146 18.9439 90.4357 18.5231 89.9499 18.5231H83.5702L78.7911 63.9999ZM106.512 28.6892C107.209 30.1112 107.449 31.8511 107.232 33.9033C107.02 35.9499 106.412 37.7121 105.408 39.1843C104.415 40.6119 103.161 41.7049 101.655 42.4633C100.194 43.1771 98.6213 43.534 96.9261 43.534C95.5487 43.534 94.2214 43.1771 92.9611 42.4633C91.7008 41.7049 90.7026 40.6119 89.961 39.1843C89.2639 37.7622 89.0297 35.9945 89.2472 33.9033C89.4646 31.8121 90.0725 30.0499 91.0707 28.6223C92.1135 27.1947 93.3404 26.124 94.7512 25.4102C96.1677 24.6518 97.5674 24.2726 98.9504 24.2726C100.646 24.2726 102.14 24.6518 103.445 25.4102C104.8 26.124 105.821 27.217 106.512 28.6892Z" fill="url(#paint6_linear_75_4)"/>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M51.3824 63.9999H44.0938L45.6398 49.289H36.8499L32.7439 37.2492H15.4922L8.8946 49.289H0L24.8744 5.49073H29.309C29.7699 5.49073 30.1811 5.78036 30.3364 6.21435L45.6635 49.0628L48.8729 18.5231H55.2526C55.7384 18.5231 56.1173 18.9439 56.0665 19.427L55.6293 23.5871C56.7601 21.9853 58.0982 20.7004 59.6412 19.7277C61.7436 18.3893 64.1081 17.7201 66.7402 17.7201C69.3723 17.7201 71.8204 18.367 73.9618 19.6607C76.1032 20.9099 77.7427 22.739 78.8692 25.1425C79.9957 27.5516 80.3804 30.4681 80.0235 33.9033C79.6666 37.2938 78.6684 40.2104 77.0289 42.664C75.395 45.0731 73.3707 46.9245 70.9617 48.2127C68.5582 49.4619 66.0152 50.0864 63.3441 50.0864C60.6729 50.0864 58.4869 49.4396 56.6578 48.1458C55.3191 47.1387 54.2552 45.8284 53.4613 44.2174L51.3824 63.9999ZM72.5342 33.9033C72.7517 31.8511 72.5119 30.1112 71.8149 28.6892C71.1234 27.217 70.1029 26.124 68.7478 25.4102C67.4428 24.6518 65.9483 24.2726 64.2531 24.2726C62.8701 24.2726 61.4704 24.6518 60.0539 25.4102C58.643 26.124 57.4162 27.1947 56.3734 28.6223C55.3752 30.0499 54.7673 31.8121 54.5499 33.9033C54.3324 35.9945 54.5666 37.7622 55.2636 39.1843C56.0053 40.6119 57.0035 41.7049 58.2638 42.4633C59.5241 43.1771 60.8514 43.534 62.2288 43.534C63.924 43.534 65.4966 43.1771 66.9577 42.4633C68.4634 41.7049 69.7181 40.6119 70.7107 39.1843C71.7145 37.7121 72.3223 35.9499 72.5342 33.9033ZM26.3994 15.7182L31.1747 30.5629H18.4857L26.3994 15.7182Z" fill="url(#paint7_linear_75_4)"/>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M333.212 49.9583C330.089 49.9583 327.396 49.2892 325.132 47.9508C322.912 46.6124 321.278 44.7387 320.241 42.3352C319.198 39.9261 318.852 37.1211 319.187 33.909C319.522 30.6969 320.475 27.825 322.02 25.4159C323.609 23.0069 325.678 21.161 328.221 19.8673C330.769 18.5289 333.669 17.8597 336.926 17.8597C340.183 17.8597 342.882 18.4843 345.023 19.7334C347.164 20.9826 348.715 22.7894 349.668 25.1483C350.672 27.4681 351.001 30.2731 350.655 33.5744C350.616 33.9313 350.555 34.3105 350.471 34.712C350.413 35.2385 349.96 35.582 349.43 35.582H326.392C326.385 36.9934 326.557 38.2413 326.91 39.3294C327.418 40.8463 328.277 42.0062 329.487 42.8092C330.742 43.6122 332.303 44.0137 334.177 44.0137C336.05 44.0137 337.896 43.6122 339.452 42.8092C341.008 42.0062 342.363 40.7793 343.517 39.1287L349.468 41.6716C347.572 44.4376 345.28 46.5065 342.592 47.8894C339.904 49.2724 336.781 49.9639 333.212 49.9639V49.9583ZM328.165 28.0313C327.743 28.8065 327.392 29.6748 327.111 30.6356H343.111C343.157 29.3206 342.954 28.1615 342.503 27.1614C342.006 25.9569 341.214 25.02 340.121 24.3508C339.078 23.6816 337.796 23.347 336.279 23.347C334.45 23.347 332.849 23.7485 331.472 24.5516C330.095 25.3546 328.991 26.5145 328.165 28.0313Z" fill="url(#paint8_linear_75_4)"/>
                      <path d="M309.049 25.4159C309.863 26.5703 310.153 28.2879 309.913 30.5631L309.919 30.5687L307.95 49.2947H315.373L317.425 29.7656C317.815 26.0628 317.202 23.1686 315.596 21.0718C313.99 18.9304 311.452 17.8597 307.973 17.8597C305.831 17.8597 303.935 18.3058 302.279 19.1981C300.673 20.0903 299.279 21.451 298.108 23.2801L298.509 19.4379C298.56 18.9549 298.181 18.5345 297.696 18.5345H291.382L288.148 49.2947H295.37L297.338 30.5687C297.483 29.1857 297.901 27.9811 298.587 26.9551C299.279 25.8844 300.165 25.0813 301.247 24.546C302.335 23.966 303.545 23.676 304.883 23.676C306.846 23.676 308.235 24.256 309.049 25.4159Z" fill="url(#paint9_linear_75_4)"/>
                      <g clip-path="url(#clip0_75_4)">
                        <path d="M273.662 8.38179C271.106 4.32342 267.837 1.72827 264.983 0.0938721C277.957 1.17611 288.155 12.0426 288.16 25.3C288.16 29.524 287.117 33.4995 285.289 37.0002C282.451 39.1261 277.648 41.7985 271.216 42.0304C269.574 42.0886 268.013 41.9829 266.552 41.7633C272.006 40.1805 276.622 35.6286 278.282 29.4329C279.476 24.9779 278.921 20.4948 277.053 16.8038C276.501 14.1816 275.473 11.2587 273.662 8.38179Z" fill="url(#paint10_linear_75_4)"/>
                        <path d="M247.41 21.2231C244.996 30.351 249.914 39.5823 258.417 41.8607C261.164 42.5969 263.95 42.5173 266.546 41.765C268.006 41.9836 269.564 42.0885 271.205 42.0304C277.637 41.7985 282.44 39.126 285.278 37.0002C281.055 45.0783 272.602 50.5999 262.852 50.5999C255.84 50.5999 249.496 47.7453 244.914 43.1347C243.821 40.0647 242.286 33.6873 244.859 26.4319C245.55 24.4805 246.435 22.746 247.41 21.2231Z" fill="url(#paint11_linear_75_4)"/>
                        <path d="M247.407 21.2365C246.436 22.7559 245.554 24.4857 244.864 26.4319C242.292 33.6873 243.826 40.0647 244.92 43.1347C240.37 38.5629 237.56 32.2572 237.56 25.3C237.56 11.3248 248.884 0 262.857 0C263.575 0 264.282 0.0331296 264.983 0.0938672C267.837 1.72826 271.106 4.32341 273.668 8.37627C275.485 11.2623 276.514 14.1961 277.064 16.8254C275.098 12.9274 271.67 9.90966 267.291 8.7362C258.771 6.45285 249.877 12.017 247.426 21.1641C247.419 21.1883 247.413 21.2124 247.407 21.2365Z" fill="url(#paint12_linear_75_4)"/>
                      </g>
                      <defs>
                        <linearGradient id="paint0_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint1_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint2_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint3_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint4_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint5_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint6_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint7_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint8_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint9_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#1D379E"/>
                          <stop offset="1" stop-color="#35A7E7"/>
                        </linearGradient>
                        <linearGradient id="paint10_linear_75_4" x1="267.605" y1="9.59102" x2="275.767" y2="41.6049" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#41B7E2"/>
                          <stop offset="0.3" stop-color="#35A7E7"/>
                          <stop offset="0.94" stop-color="#2664BB"/>
                          <stop offset="1" stop-color="#2664BB"/>
                        </linearGradient>
                        <linearGradient id="paint11_linear_75_4" x1="274.28" y1="35.2719" x2="243.363" y2="32.7877" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#41B7E2"/>
                          <stop offset="0.3" stop-color="#35A7E7"/>
                          <stop offset="0.94" stop-color="#2664BB"/>
                          <stop offset="1" stop-color="#2664BB"/>
                        </linearGradient>
                        <linearGradient id="paint12_linear_75_4" x1="251.092" y1="32.7872" x2="271.799" y2="6.00954" gradientUnits="userSpaceOnUse">
                          <stop stop-color="#41B7E2"/>
                          <stop offset="0.3" stop-color="#35A7E7"/>
                          <stop offset="0.94" stop-color="#2664BB"/>
                          <stop offset="1" stop-color="#2664BB"/>
                        </linearGradient>
                        <clipPath id="clip0_75_4">
                          <rect width="50.6" height="50.6" fill="white" transform="translate(237.56)"/>
                        </clipPath>
                      </defs>
                    </svg>
                  </span>
                </span>
                <p class="school-card-meta">Online · enrolling UK-wide</p>
              </div>
            </div>
            <div class="school-card-metrics">
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">4.5</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Rating</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-thumbs-up tw:text-green-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">89%</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Recommended</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-calendar-clock tw:text-magenta-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Accepting Soon</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800 tw:font-normal">From Aug 23rd, 2025</span>
              </span>
            </div>
          </div>
          <div class="school-card-courses">
            <p class="school-card-courses-label">Top Available Courses</p>
            <div class="school-card-courses-list">
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Accounting A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Business A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Law A-Level</span>
              <span class="school-card-courses-more">+23 more</span>
            </div>
          </div>
        </div>
        <div class="school-card-actions">
          <button type="button" class="school-card-bookmark" aria-label="Save Birchfield College">
            <i class="fa-light fa-bookmark" aria-hidden="true"></i>
          </button>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Narrow column — wrap variant</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Add <code>.school-card-header-stack</code> in tight columns (e.g. map + filter-rail + results): the metrics wrap below the identity and the row top-aligns.</p>
    <div class="tw:max-w-[560px]">
      <article class="school-card">
        <div class="school-card-body">
          <div class="school-card-header school-card-header-stack">
            <div class="school-card-identity">
              <span class="school-card-initials" aria-hidden="true">CG</span>
              <div class="school-card-heading">
                <h3 class="school-card-name">
                  <span>Cedar Grove Secondary School
                    <i class="fa-solid fa-circle-check school-card-verified" aria-label="Verified" title="Verified on ApplicaaOne"></i>
                  </span>
                </h3>
                <span class="school-card-wordmark"><svg width="351" height="64" viewBox="0 0 351 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ApplicaaOne">
                    <path d="M120.314 1.58716L115.301 49.289H122.522L127.44 2.49103C127.491 2.00789 127.112 1.58716 126.627 1.58716H120.314Z" fill="url(#paint0_linear_75_4)"/>
                    <path d="M132.438 3.14298C131.456 3.99062 130.904 5.03901 130.77 6.28816C130.647 7.49269 130.982 8.54109 131.78 9.43334C132.627 10.281 133.653 10.7048 134.858 10.7048C136.152 10.7048 137.267 10.281 138.204 9.43334C139.191 8.54109 139.743 7.53731 139.871 6.28816C139.999 5.03901 139.665 3.99062 138.862 3.14298C138.103 2.29534 137.077 1.87153 135.783 1.87153C134.579 1.87153 133.464 2.29534 132.438 3.14298Z" fill="url(#paint1_linear_75_4)"/>
                    <path d="M136.665 18.5287H130.486L127.251 49.289H134.339L137.479 19.4326C137.529 18.9495 137.15 18.5287 136.665 18.5287Z" fill="url(#paint2_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M200.064 18.5232H193.952L193.359 24.1665C192.506 22.327 191.323 20.8687 189.809 19.7946C188.025 18.5008 185.889 17.854 183.257 17.854C180.625 17.854 178.082 18.5008 175.628 19.7946C173.219 21.0382 171.2 22.8673 169.566 25.2764C167.938 27.6408 166.945 30.5127 166.588 33.9033C166.237 37.2492 166.622 40.1212 167.754 42.5302C168.886 44.9337 170.52 46.7851 172.656 48.0789C174.842 49.328 177.295 49.9526 179.883 49.9526C182.47 49.9526 184.79 49.3057 186.842 48.012C188.583 46.9428 190.073 45.4855 191.311 43.6435L190.718 49.2834H197.739L200.878 19.4271C200.929 18.9439 200.55 18.5232 200.064 18.5232ZM174.791 39.1843C174.1 37.7177 173.86 35.9555 174.078 33.9033C174.29 31.8567 174.897 30.0945 175.901 28.6223C176.905 27.1501 178.137 26.0348 179.598 25.2764C181.104 24.518 182.682 24.1387 184.333 24.1387C185.716 24.1387 187.032 24.518 188.292 25.2764C189.597 26.0348 190.595 27.1501 191.287 28.6223C192.029 30.0443 192.291 31.8121 192.068 33.9033C191.845 35.9945 191.214 37.779 190.166 39.2512C189.173 40.6788 187.941 41.7718 186.48 42.5302C185.063 43.2886 183.664 43.6678 182.281 43.6678C180.63 43.6678 179.136 43.2886 177.786 42.5302C176.481 41.7718 175.483 40.6565 174.791 39.1843Z" fill="url(#paint3_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M234.762 18.5232H228.65L228.056 24.1665C227.204 22.327 226.02 20.8687 224.506 19.7946C222.722 18.5008 220.586 17.854 217.954 17.854C215.322 17.854 212.779 18.5008 210.325 19.7946C207.922 21.0382 205.897 22.8673 204.264 25.2764C202.635 27.6408 201.643 30.5127 201.286 33.9033C200.934 37.2492 201.325 40.1212 202.451 42.5302C203.583 44.9337 205.217 46.7851 207.353 48.0789C209.539 49.328 211.993 49.9526 214.58 49.9526C217.168 49.9526 219.488 49.3057 221.54 48.012C223.28 46.9428 224.771 45.4855 226.008 43.6435L225.415 49.2834H232.436L235.576 19.4271C235.626 18.9439 235.248 18.5232 234.762 18.5232ZM209.489 39.1843C208.797 37.7177 208.557 35.9555 208.775 33.9033C208.987 31.8567 209.595 30.0945 210.598 28.6223C211.602 27.1501 212.835 26.0348 214.296 25.2764C215.801 24.518 217.38 24.1387 219.03 24.1387C220.413 24.1387 221.729 24.518 222.99 25.2764C224.294 26.0348 225.293 27.1501 225.984 28.6223C226.726 30.0443 226.988 31.8121 226.765 33.9033C226.542 35.9945 225.912 37.779 224.863 39.2512C223.871 40.6788 222.638 41.7718 221.177 42.5302C219.761 43.2886 218.361 43.6678 216.978 43.6678C215.327 43.6678 213.833 43.2886 212.483 42.5302C211.178 41.7718 210.18 40.6565 209.489 39.1843Z" fill="url(#paint4_linear_75_4)"/>
                    <path d="M146.033 33.9089C145.827 35.8718 146.072 37.5894 146.764 39.056C147.461 40.4836 148.476 41.6213 149.814 42.4689C151.197 43.3165 152.781 43.7404 154.56 43.7404C156.032 43.7404 157.46 43.5173 158.843 43.0712C160.226 42.625 161.475 42.0005 162.584 41.1974C163.694 40.3944 164.547 39.5022 165.138 38.5207L164.302 46.4784C163.12 47.5491 161.581 48.3968 159.69 49.0214C157.8 49.6459 155.759 49.9582 153.573 49.9582C150.405 49.9582 147.623 49.289 145.225 47.9507C142.871 46.5677 141.087 44.6716 139.871 42.2681C138.7 39.8145 138.282 37.0318 138.611 33.9089C138.94 30.786 139.949 27.9587 141.628 25.5496C143.351 23.1406 145.531 21.2724 148.169 19.934C150.857 18.5511 153.779 17.8596 156.947 17.8596C159.133 17.8596 161.107 18.1718 162.869 18.7964C164.338 19.3172 165.528 19.9931 166.44 20.8242C166.781 21.1358 166.923 21.6017 166.875 22.0616L166.114 29.2971C165.73 28.271 165.044 27.3787 164.057 26.6203C163.114 25.8173 161.999 25.1927 160.711 24.7466C159.423 24.3005 158.062 24.0774 156.634 24.0774C154.85 24.0774 153.177 24.5012 151.621 25.3489C150.104 26.1965 148.844 27.3564 147.846 28.8286C146.842 30.3009 146.245 31.9961 146.039 33.9089H146.033Z" fill="url(#paint5_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M78.7911 63.9999H86.0797L88.1587 44.2161C88.9541 45.8277 90.0203 47.1384 91.3551 48.1458C93.1842 49.4396 95.3702 50.0864 98.0414 50.0864C100.713 50.0864 103.255 49.4619 105.659 48.2127C108.068 46.9245 110.092 45.0731 111.726 42.664C113.366 40.2104 114.364 37.2938 114.721 33.9033C115.078 30.4681 114.693 27.5516 113.567 25.1425C112.44 22.739 110.801 20.9099 108.659 19.6607C106.518 18.367 104.07 17.7201 101.438 17.7201C98.8054 17.7201 96.4409 18.3893 94.3386 19.7277C92.7955 20.7004 91.4574 21.9853 90.3266 23.5871L90.7638 19.427C90.8146 18.9439 90.4357 18.5231 89.9499 18.5231H83.5702L78.7911 63.9999ZM106.512 28.6892C107.209 30.1112 107.449 31.8511 107.232 33.9033C107.02 35.9499 106.412 37.7121 105.408 39.1843C104.415 40.6119 103.161 41.7049 101.655 42.4633C100.194 43.1771 98.6213 43.534 96.9261 43.534C95.5487 43.534 94.2214 43.1771 92.9611 42.4633C91.7008 41.7049 90.7026 40.6119 89.961 39.1843C89.2639 37.7622 89.0297 35.9945 89.2472 33.9033C89.4646 31.8121 90.0725 30.0499 91.0707 28.6223C92.1135 27.1947 93.3404 26.124 94.7512 25.4102C96.1677 24.6518 97.5674 24.2726 98.9504 24.2726C100.646 24.2726 102.14 24.6518 103.445 25.4102C104.8 26.124 105.821 27.217 106.512 28.6892Z" fill="url(#paint6_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M51.3824 63.9999H44.0938L45.6398 49.289H36.8499L32.7439 37.2492H15.4922L8.8946 49.289H0L24.8744 5.49073H29.309C29.7699 5.49073 30.1811 5.78036 30.3364 6.21435L45.6635 49.0628L48.8729 18.5231H55.2526C55.7384 18.5231 56.1173 18.9439 56.0665 19.427L55.6293 23.5871C56.7601 21.9853 58.0982 20.7004 59.6412 19.7277C61.7436 18.3893 64.1081 17.7201 66.7402 17.7201C69.3723 17.7201 71.8204 18.367 73.9618 19.6607C76.1032 20.9099 77.7427 22.739 78.8692 25.1425C79.9957 27.5516 80.3804 30.4681 80.0235 33.9033C79.6666 37.2938 78.6684 40.2104 77.0289 42.664C75.395 45.0731 73.3707 46.9245 70.9617 48.2127C68.5582 49.4619 66.0152 50.0864 63.3441 50.0864C60.6729 50.0864 58.4869 49.4396 56.6578 48.1458C55.3191 47.1387 54.2552 45.8284 53.4613 44.2174L51.3824 63.9999ZM72.5342 33.9033C72.7517 31.8511 72.5119 30.1112 71.8149 28.6892C71.1234 27.217 70.1029 26.124 68.7478 25.4102C67.4428 24.6518 65.9483 24.2726 64.2531 24.2726C62.8701 24.2726 61.4704 24.6518 60.0539 25.4102C58.643 26.124 57.4162 27.1947 56.3734 28.6223C55.3752 30.0499 54.7673 31.8121 54.5499 33.9033C54.3324 35.9945 54.5666 37.7622 55.2636 39.1843C56.0053 40.6119 57.0035 41.7049 58.2638 42.4633C59.5241 43.1771 60.8514 43.534 62.2288 43.534C63.924 43.534 65.4966 43.1771 66.9577 42.4633C68.4634 41.7049 69.7181 40.6119 70.7107 39.1843C71.7145 37.7121 72.3223 35.9499 72.5342 33.9033ZM26.3994 15.7182L31.1747 30.5629H18.4857L26.3994 15.7182Z" fill="url(#paint7_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M333.212 49.9583C330.089 49.9583 327.396 49.2892 325.132 47.9508C322.912 46.6124 321.278 44.7387 320.241 42.3352C319.198 39.9261 318.852 37.1211 319.187 33.909C319.522 30.6969 320.475 27.825 322.02 25.4159C323.609 23.0069 325.678 21.161 328.221 19.8673C330.769 18.5289 333.669 17.8597 336.926 17.8597C340.183 17.8597 342.882 18.4843 345.023 19.7334C347.164 20.9826 348.715 22.7894 349.668 25.1483C350.672 27.4681 351.001 30.2731 350.655 33.5744C350.616 33.9313 350.555 34.3105 350.471 34.712C350.413 35.2385 349.96 35.582 349.43 35.582H326.392C326.385 36.9934 326.557 38.2413 326.91 39.3294C327.418 40.8463 328.277 42.0062 329.487 42.8092C330.742 43.6122 332.303 44.0137 334.177 44.0137C336.05 44.0137 337.896 43.6122 339.452 42.8092C341.008 42.0062 342.363 40.7793 343.517 39.1287L349.468 41.6716C347.572 44.4376 345.28 46.5065 342.592 47.8894C339.904 49.2724 336.781 49.9639 333.212 49.9639V49.9583ZM328.165 28.0313C327.743 28.8065 327.392 29.6748 327.111 30.6356H343.111C343.157 29.3206 342.954 28.1615 342.503 27.1614C342.006 25.9569 341.214 25.02 340.121 24.3508C339.078 23.6816 337.796 23.347 336.279 23.347C334.45 23.347 332.849 23.7485 331.472 24.5516C330.095 25.3546 328.991 26.5145 328.165 28.0313Z" fill="url(#paint8_linear_75_4)"/>
                    <path d="M309.049 25.4159C309.863 26.5703 310.153 28.2879 309.913 30.5631L309.919 30.5687L307.95 49.2947H315.373L317.425 29.7656C317.815 26.0628 317.202 23.1686 315.596 21.0718C313.99 18.9304 311.452 17.8597 307.973 17.8597C305.831 17.8597 303.935 18.3058 302.279 19.1981C300.673 20.0903 299.279 21.451 298.108 23.2801L298.509 19.4379C298.56 18.9549 298.181 18.5345 297.696 18.5345H291.382L288.148 49.2947H295.37L297.338 30.5687C297.483 29.1857 297.901 27.9811 298.587 26.9551C299.279 25.8844 300.165 25.0813 301.247 24.546C302.335 23.966 303.545 23.676 304.883 23.676C306.846 23.676 308.235 24.256 309.049 25.4159Z" fill="url(#paint9_linear_75_4)"/>
                    <g clip-path="url(#clip0_75_4)">
                      <path d="M273.662 8.38179C271.106 4.32342 267.837 1.72827 264.983 0.0938721C277.957 1.17611 288.155 12.0426 288.16 25.3C288.16 29.524 287.117 33.4995 285.289 37.0002C282.451 39.1261 277.648 41.7985 271.216 42.0304C269.574 42.0886 268.013 41.9829 266.552 41.7633C272.006 40.1805 276.622 35.6286 278.282 29.4329C279.476 24.9779 278.921 20.4948 277.053 16.8038C276.501 14.1816 275.473 11.2587 273.662 8.38179Z" fill="url(#paint10_linear_75_4)"/>
                      <path d="M247.41 21.2231C244.996 30.351 249.914 39.5823 258.417 41.8607C261.164 42.5969 263.95 42.5173 266.546 41.765C268.006 41.9836 269.564 42.0885 271.205 42.0304C277.637 41.7985 282.44 39.126 285.278 37.0002C281.055 45.0783 272.602 50.5999 262.852 50.5999C255.84 50.5999 249.496 47.7453 244.914 43.1347C243.821 40.0647 242.286 33.6873 244.859 26.4319C245.55 24.4805 246.435 22.746 247.41 21.2231Z" fill="url(#paint11_linear_75_4)"/>
                      <path d="M247.407 21.2365C246.436 22.7559 245.554 24.4857 244.864 26.4319C242.292 33.6873 243.826 40.0647 244.92 43.1347C240.37 38.5629 237.56 32.2572 237.56 25.3C237.56 11.3248 248.884 0 262.857 0C263.575 0 264.282 0.0331296 264.983 0.0938672C267.837 1.72826 271.106 4.32341 273.668 8.37627C275.485 11.2623 276.514 14.1961 277.064 16.8254C275.098 12.9274 271.67 9.90966 267.291 8.7362C258.771 6.45285 249.877 12.017 247.426 21.1641C247.419 21.1883 247.413 21.2124 247.407 21.2365Z" fill="url(#paint12_linear_75_4)"/>
                    </g>
                    <defs>
                      <linearGradient id="paint0_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint1_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint2_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint3_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint4_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint5_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint6_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint7_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint8_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint9_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint10_linear_75_4" x1="267.605" y1="9.59102" x2="275.767" y2="41.6049" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint11_linear_75_4" x1="274.28" y1="35.2719" x2="243.363" y2="32.7877" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint12_linear_75_4" x1="251.092" y1="32.7872" x2="271.799" y2="6.00954" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <clipPath id="clip0_75_4">
                        <rect width="50.6" height="50.6" fill="white" transform="translate(237.56)"/>
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <p class="school-card-meta">Lady Margaret Rd, Southall UB1 2GU</p>
              </div>
            </div>
            <div class="school-card-metrics">
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">4.2</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Rating</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-thumbs-up tw:text-green-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">86%</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Recommended</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-calendar-xmark tw:text-state-danger-ink" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Applications Closed</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800 tw:font-normal">(Ended Aug 23rd)</span>
              </span>
            </div>
          </div>
          <div class="school-card-courses">
            <p class="school-card-courses-label">Top Available Courses</p>
            <div class="school-card-courses-list">
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Biology A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Chemistry A-Level</span>
              <span class="school-card-courses-more">+12 more</span>
            </div>
          </div>
        </div>
        <div class="school-card-actions">
          <button type="button" class="school-card-bookmark" aria-label="Save Cedar Grove Secondary School">
            <i class="fa-light fa-bookmark" aria-hidden="true"></i>
          </button>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Results list — cards stacked</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">The most common use: multiple cards listed under the results toolbar, separated by a 12px gap.</p>
    <div class="tw:flex tw:flex-col tw:gap-3 tw:max-w-[910px]">
      <article class="school-card">
        <div class="school-photo tw:w-[116px] tw:h-[116px] tw:shrink-0 tw:self-start"><img src="/mock/schools/school-thumbnail.jpg" alt="" loading="lazy"></div>
        <div class="school-card-body">
          <div class="school-card-header">
            <div class="school-card-identity">
              <span class="school-card-initials" aria-hidden="true">GHS</span>
              <div class="school-card-heading">
                <h3 class="school-card-name">
                  <span>Greenford High School
                    <i class="fa-solid fa-circle-check school-card-verified" aria-label="Verified" title="Verified on ApplicaaOne"></i>
                  </span>
                </h3>
                <span class="school-card-wordmark"><svg width="351" height="64" viewBox="0 0 351 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ApplicaaOne">
                    <path d="M120.314 1.58716L115.301 49.289H122.522L127.44 2.49103C127.491 2.00789 127.112 1.58716 126.627 1.58716H120.314Z" fill="url(#paint0_linear_75_4)"/>
                    <path d="M132.438 3.14298C131.456 3.99062 130.904 5.03901 130.77 6.28816C130.647 7.49269 130.982 8.54109 131.78 9.43334C132.627 10.281 133.653 10.7048 134.858 10.7048C136.152 10.7048 137.267 10.281 138.204 9.43334C139.191 8.54109 139.743 7.53731 139.871 6.28816C139.999 5.03901 139.665 3.99062 138.862 3.14298C138.103 2.29534 137.077 1.87153 135.783 1.87153C134.579 1.87153 133.464 2.29534 132.438 3.14298Z" fill="url(#paint1_linear_75_4)"/>
                    <path d="M136.665 18.5287H130.486L127.251 49.289H134.339L137.479 19.4326C137.529 18.9495 137.15 18.5287 136.665 18.5287Z" fill="url(#paint2_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M200.064 18.5232H193.952L193.359 24.1665C192.506 22.327 191.323 20.8687 189.809 19.7946C188.025 18.5008 185.889 17.854 183.257 17.854C180.625 17.854 178.082 18.5008 175.628 19.7946C173.219 21.0382 171.2 22.8673 169.566 25.2764C167.938 27.6408 166.945 30.5127 166.588 33.9033C166.237 37.2492 166.622 40.1212 167.754 42.5302C168.886 44.9337 170.52 46.7851 172.656 48.0789C174.842 49.328 177.295 49.9526 179.883 49.9526C182.47 49.9526 184.79 49.3057 186.842 48.012C188.583 46.9428 190.073 45.4855 191.311 43.6435L190.718 49.2834H197.739L200.878 19.4271C200.929 18.9439 200.55 18.5232 200.064 18.5232ZM174.791 39.1843C174.1 37.7177 173.86 35.9555 174.078 33.9033C174.29 31.8567 174.897 30.0945 175.901 28.6223C176.905 27.1501 178.137 26.0348 179.598 25.2764C181.104 24.518 182.682 24.1387 184.333 24.1387C185.716 24.1387 187.032 24.518 188.292 25.2764C189.597 26.0348 190.595 27.1501 191.287 28.6223C192.029 30.0443 192.291 31.8121 192.068 33.9033C191.845 35.9945 191.214 37.779 190.166 39.2512C189.173 40.6788 187.941 41.7718 186.48 42.5302C185.063 43.2886 183.664 43.6678 182.281 43.6678C180.63 43.6678 179.136 43.2886 177.786 42.5302C176.481 41.7718 175.483 40.6565 174.791 39.1843Z" fill="url(#paint3_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M234.762 18.5232H228.65L228.056 24.1665C227.204 22.327 226.02 20.8687 224.506 19.7946C222.722 18.5008 220.586 17.854 217.954 17.854C215.322 17.854 212.779 18.5008 210.325 19.7946C207.922 21.0382 205.897 22.8673 204.264 25.2764C202.635 27.6408 201.643 30.5127 201.286 33.9033C200.934 37.2492 201.325 40.1212 202.451 42.5302C203.583 44.9337 205.217 46.7851 207.353 48.0789C209.539 49.328 211.993 49.9526 214.58 49.9526C217.168 49.9526 219.488 49.3057 221.54 48.012C223.28 46.9428 224.771 45.4855 226.008 43.6435L225.415 49.2834H232.436L235.576 19.4271C235.626 18.9439 235.248 18.5232 234.762 18.5232ZM209.489 39.1843C208.797 37.7177 208.557 35.9555 208.775 33.9033C208.987 31.8567 209.595 30.0945 210.598 28.6223C211.602 27.1501 212.835 26.0348 214.296 25.2764C215.801 24.518 217.38 24.1387 219.03 24.1387C220.413 24.1387 221.729 24.518 222.99 25.2764C224.294 26.0348 225.293 27.1501 225.984 28.6223C226.726 30.0443 226.988 31.8121 226.765 33.9033C226.542 35.9945 225.912 37.779 224.863 39.2512C223.871 40.6788 222.638 41.7718 221.177 42.5302C219.761 43.2886 218.361 43.6678 216.978 43.6678C215.327 43.6678 213.833 43.2886 212.483 42.5302C211.178 41.7718 210.18 40.6565 209.489 39.1843Z" fill="url(#paint4_linear_75_4)"/>
                    <path d="M146.033 33.9089C145.827 35.8718 146.072 37.5894 146.764 39.056C147.461 40.4836 148.476 41.6213 149.814 42.4689C151.197 43.3165 152.781 43.7404 154.56 43.7404C156.032 43.7404 157.46 43.5173 158.843 43.0712C160.226 42.625 161.475 42.0005 162.584 41.1974C163.694 40.3944 164.547 39.5022 165.138 38.5207L164.302 46.4784C163.12 47.5491 161.581 48.3968 159.69 49.0214C157.8 49.6459 155.759 49.9582 153.573 49.9582C150.405 49.9582 147.623 49.289 145.225 47.9507C142.871 46.5677 141.087 44.6716 139.871 42.2681C138.7 39.8145 138.282 37.0318 138.611 33.9089C138.94 30.786 139.949 27.9587 141.628 25.5496C143.351 23.1406 145.531 21.2724 148.169 19.934C150.857 18.5511 153.779 17.8596 156.947 17.8596C159.133 17.8596 161.107 18.1718 162.869 18.7964C164.338 19.3172 165.528 19.9931 166.44 20.8242C166.781 21.1358 166.923 21.6017 166.875 22.0616L166.114 29.2971C165.73 28.271 165.044 27.3787 164.057 26.6203C163.114 25.8173 161.999 25.1927 160.711 24.7466C159.423 24.3005 158.062 24.0774 156.634 24.0774C154.85 24.0774 153.177 24.5012 151.621 25.3489C150.104 26.1965 148.844 27.3564 147.846 28.8286C146.842 30.3009 146.245 31.9961 146.039 33.9089H146.033Z" fill="url(#paint5_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M78.7911 63.9999H86.0797L88.1587 44.2161C88.9541 45.8277 90.0203 47.1384 91.3551 48.1458C93.1842 49.4396 95.3702 50.0864 98.0414 50.0864C100.713 50.0864 103.255 49.4619 105.659 48.2127C108.068 46.9245 110.092 45.0731 111.726 42.664C113.366 40.2104 114.364 37.2938 114.721 33.9033C115.078 30.4681 114.693 27.5516 113.567 25.1425C112.44 22.739 110.801 20.9099 108.659 19.6607C106.518 18.367 104.07 17.7201 101.438 17.7201C98.8054 17.7201 96.4409 18.3893 94.3386 19.7277C92.7955 20.7004 91.4574 21.9853 90.3266 23.5871L90.7638 19.427C90.8146 18.9439 90.4357 18.5231 89.9499 18.5231H83.5702L78.7911 63.9999ZM106.512 28.6892C107.209 30.1112 107.449 31.8511 107.232 33.9033C107.02 35.9499 106.412 37.7121 105.408 39.1843C104.415 40.6119 103.161 41.7049 101.655 42.4633C100.194 43.1771 98.6213 43.534 96.9261 43.534C95.5487 43.534 94.2214 43.1771 92.9611 42.4633C91.7008 41.7049 90.7026 40.6119 89.961 39.1843C89.2639 37.7622 89.0297 35.9945 89.2472 33.9033C89.4646 31.8121 90.0725 30.0499 91.0707 28.6223C92.1135 27.1947 93.3404 26.124 94.7512 25.4102C96.1677 24.6518 97.5674 24.2726 98.9504 24.2726C100.646 24.2726 102.14 24.6518 103.445 25.4102C104.8 26.124 105.821 27.217 106.512 28.6892Z" fill="url(#paint6_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M51.3824 63.9999H44.0938L45.6398 49.289H36.8499L32.7439 37.2492H15.4922L8.8946 49.289H0L24.8744 5.49073H29.309C29.7699 5.49073 30.1811 5.78036 30.3364 6.21435L45.6635 49.0628L48.8729 18.5231H55.2526C55.7384 18.5231 56.1173 18.9439 56.0665 19.427L55.6293 23.5871C56.7601 21.9853 58.0982 20.7004 59.6412 19.7277C61.7436 18.3893 64.1081 17.7201 66.7402 17.7201C69.3723 17.7201 71.8204 18.367 73.9618 19.6607C76.1032 20.9099 77.7427 22.739 78.8692 25.1425C79.9957 27.5516 80.3804 30.4681 80.0235 33.9033C79.6666 37.2938 78.6684 40.2104 77.0289 42.664C75.395 45.0731 73.3707 46.9245 70.9617 48.2127C68.5582 49.4619 66.0152 50.0864 63.3441 50.0864C60.6729 50.0864 58.4869 49.4396 56.6578 48.1458C55.3191 47.1387 54.2552 45.8284 53.4613 44.2174L51.3824 63.9999ZM72.5342 33.9033C72.7517 31.8511 72.5119 30.1112 71.8149 28.6892C71.1234 27.217 70.1029 26.124 68.7478 25.4102C67.4428 24.6518 65.9483 24.2726 64.2531 24.2726C62.8701 24.2726 61.4704 24.6518 60.0539 25.4102C58.643 26.124 57.4162 27.1947 56.3734 28.6223C55.3752 30.0499 54.7673 31.8121 54.5499 33.9033C54.3324 35.9945 54.5666 37.7622 55.2636 39.1843C56.0053 40.6119 57.0035 41.7049 58.2638 42.4633C59.5241 43.1771 60.8514 43.534 62.2288 43.534C63.924 43.534 65.4966 43.1771 66.9577 42.4633C68.4634 41.7049 69.7181 40.6119 70.7107 39.1843C71.7145 37.7121 72.3223 35.9499 72.5342 33.9033ZM26.3994 15.7182L31.1747 30.5629H18.4857L26.3994 15.7182Z" fill="url(#paint7_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M333.212 49.9583C330.089 49.9583 327.396 49.2892 325.132 47.9508C322.912 46.6124 321.278 44.7387 320.241 42.3352C319.198 39.9261 318.852 37.1211 319.187 33.909C319.522 30.6969 320.475 27.825 322.02 25.4159C323.609 23.0069 325.678 21.161 328.221 19.8673C330.769 18.5289 333.669 17.8597 336.926 17.8597C340.183 17.8597 342.882 18.4843 345.023 19.7334C347.164 20.9826 348.715 22.7894 349.668 25.1483C350.672 27.4681 351.001 30.2731 350.655 33.5744C350.616 33.9313 350.555 34.3105 350.471 34.712C350.413 35.2385 349.96 35.582 349.43 35.582H326.392C326.385 36.9934 326.557 38.2413 326.91 39.3294C327.418 40.8463 328.277 42.0062 329.487 42.8092C330.742 43.6122 332.303 44.0137 334.177 44.0137C336.05 44.0137 337.896 43.6122 339.452 42.8092C341.008 42.0062 342.363 40.7793 343.517 39.1287L349.468 41.6716C347.572 44.4376 345.28 46.5065 342.592 47.8894C339.904 49.2724 336.781 49.9639 333.212 49.9639V49.9583ZM328.165 28.0313C327.743 28.8065 327.392 29.6748 327.111 30.6356H343.111C343.157 29.3206 342.954 28.1615 342.503 27.1614C342.006 25.9569 341.214 25.02 340.121 24.3508C339.078 23.6816 337.796 23.347 336.279 23.347C334.45 23.347 332.849 23.7485 331.472 24.5516C330.095 25.3546 328.991 26.5145 328.165 28.0313Z" fill="url(#paint8_linear_75_4)"/>
                    <path d="M309.049 25.4159C309.863 26.5703 310.153 28.2879 309.913 30.5631L309.919 30.5687L307.95 49.2947H315.373L317.425 29.7656C317.815 26.0628 317.202 23.1686 315.596 21.0718C313.99 18.9304 311.452 17.8597 307.973 17.8597C305.831 17.8597 303.935 18.3058 302.279 19.1981C300.673 20.0903 299.279 21.451 298.108 23.2801L298.509 19.4379C298.56 18.9549 298.181 18.5345 297.696 18.5345H291.382L288.148 49.2947H295.37L297.338 30.5687C297.483 29.1857 297.901 27.9811 298.587 26.9551C299.279 25.8844 300.165 25.0813 301.247 24.546C302.335 23.966 303.545 23.676 304.883 23.676C306.846 23.676 308.235 24.256 309.049 25.4159Z" fill="url(#paint9_linear_75_4)"/>
                    <g clip-path="url(#clip0_75_4)">
                      <path d="M273.662 8.38179C271.106 4.32342 267.837 1.72827 264.983 0.0938721C277.957 1.17611 288.155 12.0426 288.16 25.3C288.16 29.524 287.117 33.4995 285.289 37.0002C282.451 39.1261 277.648 41.7985 271.216 42.0304C269.574 42.0886 268.013 41.9829 266.552 41.7633C272.006 40.1805 276.622 35.6286 278.282 29.4329C279.476 24.9779 278.921 20.4948 277.053 16.8038C276.501 14.1816 275.473 11.2587 273.662 8.38179Z" fill="url(#paint10_linear_75_4)"/>
                      <path d="M247.41 21.2231C244.996 30.351 249.914 39.5823 258.417 41.8607C261.164 42.5969 263.95 42.5173 266.546 41.765C268.006 41.9836 269.564 42.0885 271.205 42.0304C277.637 41.7985 282.44 39.126 285.278 37.0002C281.055 45.0783 272.602 50.5999 262.852 50.5999C255.84 50.5999 249.496 47.7453 244.914 43.1347C243.821 40.0647 242.286 33.6873 244.859 26.4319C245.55 24.4805 246.435 22.746 247.41 21.2231Z" fill="url(#paint11_linear_75_4)"/>
                      <path d="M247.407 21.2365C246.436 22.7559 245.554 24.4857 244.864 26.4319C242.292 33.6873 243.826 40.0647 244.92 43.1347C240.37 38.5629 237.56 32.2572 237.56 25.3C237.56 11.3248 248.884 0 262.857 0C263.575 0 264.282 0.0331296 264.983 0.0938672C267.837 1.72826 271.106 4.32341 273.668 8.37627C275.485 11.2623 276.514 14.1961 277.064 16.8254C275.098 12.9274 271.67 9.90966 267.291 8.7362C258.771 6.45285 249.877 12.017 247.426 21.1641C247.419 21.1883 247.413 21.2124 247.407 21.2365Z" fill="url(#paint12_linear_75_4)"/>
                    </g>
                    <defs>
                      <linearGradient id="paint0_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint1_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint2_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint3_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint4_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint5_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint6_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint7_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint8_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint9_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint10_linear_75_4" x1="267.605" y1="9.59102" x2="275.767" y2="41.6049" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint11_linear_75_4" x1="274.28" y1="35.2719" x2="243.363" y2="32.7877" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint12_linear_75_4" x1="251.092" y1="32.7872" x2="271.799" y2="6.00954" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <clipPath id="clip0_75_4">
                        <rect width="50.6" height="50.6" fill="white" transform="translate(237.56)"/>
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <p class="school-card-meta">Lady Margaret Rd, Southall UB1 2GU</p>
              </div>
            </div>
            <div class="school-card-metrics">
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">4.5</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Rating</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-thumbs-up tw:text-green-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">89%</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Recommended</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-calendar-check tw:text-link" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Accepting Now</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800 tw:font-normal">Until Aug 23rd, 2025</span>
              </span>
            </div>
          </div>
          <div class="school-card-courses">
            <p class="school-card-courses-label">Top Available Courses</p>
            <div class="school-card-courses-list">
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Accounting A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Mathematics A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">Chemistry A-Level</span>
              <span class="school-card-courses-more">+23 more</span>
            </div>
          </div>
        </div>
        <div class="school-card-actions">
          <button type="button" class="school-card-bookmark" aria-label="Save Greenford High School">
            <i class="fa-light fa-bookmark" aria-hidden="true"></i>
          </button>
        </div>
      </article>
      <article class="school-card">
        <div class="school-photo tw:w-[116px] tw:h-[116px] tw:shrink-0 tw:self-start"><img src="/mock/schools/school-thumbnail.jpg" alt="" loading="lazy"></div>
        <div class="school-card-body">
          <div class="school-card-header">
            <div class="school-card-identity">
              <span class="school-card-initials" aria-hidden="true">MA</span>
              <div class="school-card-heading">
                <h3 class="school-card-name">
                  <span>Maplewood Academy
                    <i class="fa-solid fa-circle-check school-card-verified" aria-label="Verified" title="Verified on ApplicaaOne"></i>
                  </span>
                </h3>
                <span class="school-card-wordmark"><svg width="351" height="64" viewBox="0 0 351 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ApplicaaOne">
                    <path d="M120.314 1.58716L115.301 49.289H122.522L127.44 2.49103C127.491 2.00789 127.112 1.58716 126.627 1.58716H120.314Z" fill="url(#paint0_linear_75_4)"/>
                    <path d="M132.438 3.14298C131.456 3.99062 130.904 5.03901 130.77 6.28816C130.647 7.49269 130.982 8.54109 131.78 9.43334C132.627 10.281 133.653 10.7048 134.858 10.7048C136.152 10.7048 137.267 10.281 138.204 9.43334C139.191 8.54109 139.743 7.53731 139.871 6.28816C139.999 5.03901 139.665 3.99062 138.862 3.14298C138.103 2.29534 137.077 1.87153 135.783 1.87153C134.579 1.87153 133.464 2.29534 132.438 3.14298Z" fill="url(#paint1_linear_75_4)"/>
                    <path d="M136.665 18.5287H130.486L127.251 49.289H134.339L137.479 19.4326C137.529 18.9495 137.15 18.5287 136.665 18.5287Z" fill="url(#paint2_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M200.064 18.5232H193.952L193.359 24.1665C192.506 22.327 191.323 20.8687 189.809 19.7946C188.025 18.5008 185.889 17.854 183.257 17.854C180.625 17.854 178.082 18.5008 175.628 19.7946C173.219 21.0382 171.2 22.8673 169.566 25.2764C167.938 27.6408 166.945 30.5127 166.588 33.9033C166.237 37.2492 166.622 40.1212 167.754 42.5302C168.886 44.9337 170.52 46.7851 172.656 48.0789C174.842 49.328 177.295 49.9526 179.883 49.9526C182.47 49.9526 184.79 49.3057 186.842 48.012C188.583 46.9428 190.073 45.4855 191.311 43.6435L190.718 49.2834H197.739L200.878 19.4271C200.929 18.9439 200.55 18.5232 200.064 18.5232ZM174.791 39.1843C174.1 37.7177 173.86 35.9555 174.078 33.9033C174.29 31.8567 174.897 30.0945 175.901 28.6223C176.905 27.1501 178.137 26.0348 179.598 25.2764C181.104 24.518 182.682 24.1387 184.333 24.1387C185.716 24.1387 187.032 24.518 188.292 25.2764C189.597 26.0348 190.595 27.1501 191.287 28.6223C192.029 30.0443 192.291 31.8121 192.068 33.9033C191.845 35.9945 191.214 37.779 190.166 39.2512C189.173 40.6788 187.941 41.7718 186.48 42.5302C185.063 43.2886 183.664 43.6678 182.281 43.6678C180.63 43.6678 179.136 43.2886 177.786 42.5302C176.481 41.7718 175.483 40.6565 174.791 39.1843Z" fill="url(#paint3_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M234.762 18.5232H228.65L228.056 24.1665C227.204 22.327 226.02 20.8687 224.506 19.7946C222.722 18.5008 220.586 17.854 217.954 17.854C215.322 17.854 212.779 18.5008 210.325 19.7946C207.922 21.0382 205.897 22.8673 204.264 25.2764C202.635 27.6408 201.643 30.5127 201.286 33.9033C200.934 37.2492 201.325 40.1212 202.451 42.5302C203.583 44.9337 205.217 46.7851 207.353 48.0789C209.539 49.328 211.993 49.9526 214.58 49.9526C217.168 49.9526 219.488 49.3057 221.54 48.012C223.28 46.9428 224.771 45.4855 226.008 43.6435L225.415 49.2834H232.436L235.576 19.4271C235.626 18.9439 235.248 18.5232 234.762 18.5232ZM209.489 39.1843C208.797 37.7177 208.557 35.9555 208.775 33.9033C208.987 31.8567 209.595 30.0945 210.598 28.6223C211.602 27.1501 212.835 26.0348 214.296 25.2764C215.801 24.518 217.38 24.1387 219.03 24.1387C220.413 24.1387 221.729 24.518 222.99 25.2764C224.294 26.0348 225.293 27.1501 225.984 28.6223C226.726 30.0443 226.988 31.8121 226.765 33.9033C226.542 35.9945 225.912 37.779 224.863 39.2512C223.871 40.6788 222.638 41.7718 221.177 42.5302C219.761 43.2886 218.361 43.6678 216.978 43.6678C215.327 43.6678 213.833 43.2886 212.483 42.5302C211.178 41.7718 210.18 40.6565 209.489 39.1843Z" fill="url(#paint4_linear_75_4)"/>
                    <path d="M146.033 33.9089C145.827 35.8718 146.072 37.5894 146.764 39.056C147.461 40.4836 148.476 41.6213 149.814 42.4689C151.197 43.3165 152.781 43.7404 154.56 43.7404C156.032 43.7404 157.46 43.5173 158.843 43.0712C160.226 42.625 161.475 42.0005 162.584 41.1974C163.694 40.3944 164.547 39.5022 165.138 38.5207L164.302 46.4784C163.12 47.5491 161.581 48.3968 159.69 49.0214C157.8 49.6459 155.759 49.9582 153.573 49.9582C150.405 49.9582 147.623 49.289 145.225 47.9507C142.871 46.5677 141.087 44.6716 139.871 42.2681C138.7 39.8145 138.282 37.0318 138.611 33.9089C138.94 30.786 139.949 27.9587 141.628 25.5496C143.351 23.1406 145.531 21.2724 148.169 19.934C150.857 18.5511 153.779 17.8596 156.947 17.8596C159.133 17.8596 161.107 18.1718 162.869 18.7964C164.338 19.3172 165.528 19.9931 166.44 20.8242C166.781 21.1358 166.923 21.6017 166.875 22.0616L166.114 29.2971C165.73 28.271 165.044 27.3787 164.057 26.6203C163.114 25.8173 161.999 25.1927 160.711 24.7466C159.423 24.3005 158.062 24.0774 156.634 24.0774C154.85 24.0774 153.177 24.5012 151.621 25.3489C150.104 26.1965 148.844 27.3564 147.846 28.8286C146.842 30.3009 146.245 31.9961 146.039 33.9089H146.033Z" fill="url(#paint5_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M78.7911 63.9999H86.0797L88.1587 44.2161C88.9541 45.8277 90.0203 47.1384 91.3551 48.1458C93.1842 49.4396 95.3702 50.0864 98.0414 50.0864C100.713 50.0864 103.255 49.4619 105.659 48.2127C108.068 46.9245 110.092 45.0731 111.726 42.664C113.366 40.2104 114.364 37.2938 114.721 33.9033C115.078 30.4681 114.693 27.5516 113.567 25.1425C112.44 22.739 110.801 20.9099 108.659 19.6607C106.518 18.367 104.07 17.7201 101.438 17.7201C98.8054 17.7201 96.4409 18.3893 94.3386 19.7277C92.7955 20.7004 91.4574 21.9853 90.3266 23.5871L90.7638 19.427C90.8146 18.9439 90.4357 18.5231 89.9499 18.5231H83.5702L78.7911 63.9999ZM106.512 28.6892C107.209 30.1112 107.449 31.8511 107.232 33.9033C107.02 35.9499 106.412 37.7121 105.408 39.1843C104.415 40.6119 103.161 41.7049 101.655 42.4633C100.194 43.1771 98.6213 43.534 96.9261 43.534C95.5487 43.534 94.2214 43.1771 92.9611 42.4633C91.7008 41.7049 90.7026 40.6119 89.961 39.1843C89.2639 37.7622 89.0297 35.9945 89.2472 33.9033C89.4646 31.8121 90.0725 30.0499 91.0707 28.6223C92.1135 27.1947 93.3404 26.124 94.7512 25.4102C96.1677 24.6518 97.5674 24.2726 98.9504 24.2726C100.646 24.2726 102.14 24.6518 103.445 25.4102C104.8 26.124 105.821 27.217 106.512 28.6892Z" fill="url(#paint6_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M51.3824 63.9999H44.0938L45.6398 49.289H36.8499L32.7439 37.2492H15.4922L8.8946 49.289H0L24.8744 5.49073H29.309C29.7699 5.49073 30.1811 5.78036 30.3364 6.21435L45.6635 49.0628L48.8729 18.5231H55.2526C55.7384 18.5231 56.1173 18.9439 56.0665 19.427L55.6293 23.5871C56.7601 21.9853 58.0982 20.7004 59.6412 19.7277C61.7436 18.3893 64.1081 17.7201 66.7402 17.7201C69.3723 17.7201 71.8204 18.367 73.9618 19.6607C76.1032 20.9099 77.7427 22.739 78.8692 25.1425C79.9957 27.5516 80.3804 30.4681 80.0235 33.9033C79.6666 37.2938 78.6684 40.2104 77.0289 42.664C75.395 45.0731 73.3707 46.9245 70.9617 48.2127C68.5582 49.4619 66.0152 50.0864 63.3441 50.0864C60.6729 50.0864 58.4869 49.4396 56.6578 48.1458C55.3191 47.1387 54.2552 45.8284 53.4613 44.2174L51.3824 63.9999ZM72.5342 33.9033C72.7517 31.8511 72.5119 30.1112 71.8149 28.6892C71.1234 27.217 70.1029 26.124 68.7478 25.4102C67.4428 24.6518 65.9483 24.2726 64.2531 24.2726C62.8701 24.2726 61.4704 24.6518 60.0539 25.4102C58.643 26.124 57.4162 27.1947 56.3734 28.6223C55.3752 30.0499 54.7673 31.8121 54.5499 33.9033C54.3324 35.9945 54.5666 37.7622 55.2636 39.1843C56.0053 40.6119 57.0035 41.7049 58.2638 42.4633C59.5241 43.1771 60.8514 43.534 62.2288 43.534C63.924 43.534 65.4966 43.1771 66.9577 42.4633C68.4634 41.7049 69.7181 40.6119 70.7107 39.1843C71.7145 37.7121 72.3223 35.9499 72.5342 33.9033ZM26.3994 15.7182L31.1747 30.5629H18.4857L26.3994 15.7182Z" fill="url(#paint7_linear_75_4)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M333.212 49.9583C330.089 49.9583 327.396 49.2892 325.132 47.9508C322.912 46.6124 321.278 44.7387 320.241 42.3352C319.198 39.9261 318.852 37.1211 319.187 33.909C319.522 30.6969 320.475 27.825 322.02 25.4159C323.609 23.0069 325.678 21.161 328.221 19.8673C330.769 18.5289 333.669 17.8597 336.926 17.8597C340.183 17.8597 342.882 18.4843 345.023 19.7334C347.164 20.9826 348.715 22.7894 349.668 25.1483C350.672 27.4681 351.001 30.2731 350.655 33.5744C350.616 33.9313 350.555 34.3105 350.471 34.712C350.413 35.2385 349.96 35.582 349.43 35.582H326.392C326.385 36.9934 326.557 38.2413 326.91 39.3294C327.418 40.8463 328.277 42.0062 329.487 42.8092C330.742 43.6122 332.303 44.0137 334.177 44.0137C336.05 44.0137 337.896 43.6122 339.452 42.8092C341.008 42.0062 342.363 40.7793 343.517 39.1287L349.468 41.6716C347.572 44.4376 345.28 46.5065 342.592 47.8894C339.904 49.2724 336.781 49.9639 333.212 49.9639V49.9583ZM328.165 28.0313C327.743 28.8065 327.392 29.6748 327.111 30.6356H343.111C343.157 29.3206 342.954 28.1615 342.503 27.1614C342.006 25.9569 341.214 25.02 340.121 24.3508C339.078 23.6816 337.796 23.347 336.279 23.347C334.45 23.347 332.849 23.7485 331.472 24.5516C330.095 25.3546 328.991 26.5145 328.165 28.0313Z" fill="url(#paint8_linear_75_4)"/>
                    <path d="M309.049 25.4159C309.863 26.5703 310.153 28.2879 309.913 30.5631L309.919 30.5687L307.95 49.2947H315.373L317.425 29.7656C317.815 26.0628 317.202 23.1686 315.596 21.0718C313.99 18.9304 311.452 17.8597 307.973 17.8597C305.831 17.8597 303.935 18.3058 302.279 19.1981C300.673 20.0903 299.279 21.451 298.108 23.2801L298.509 19.4379C298.56 18.9549 298.181 18.5345 297.696 18.5345H291.382L288.148 49.2947H295.37L297.338 30.5687C297.483 29.1857 297.901 27.9811 298.587 26.9551C299.279 25.8844 300.165 25.0813 301.247 24.546C302.335 23.966 303.545 23.676 304.883 23.676C306.846 23.676 308.235 24.256 309.049 25.4159Z" fill="url(#paint9_linear_75_4)"/>
                    <g clip-path="url(#clip0_75_4)">
                      <path d="M273.662 8.38179C271.106 4.32342 267.837 1.72827 264.983 0.0938721C277.957 1.17611 288.155 12.0426 288.16 25.3C288.16 29.524 287.117 33.4995 285.289 37.0002C282.451 39.1261 277.648 41.7985 271.216 42.0304C269.574 42.0886 268.013 41.9829 266.552 41.7633C272.006 40.1805 276.622 35.6286 278.282 29.4329C279.476 24.9779 278.921 20.4948 277.053 16.8038C276.501 14.1816 275.473 11.2587 273.662 8.38179Z" fill="url(#paint10_linear_75_4)"/>
                      <path d="M247.41 21.2231C244.996 30.351 249.914 39.5823 258.417 41.8607C261.164 42.5969 263.95 42.5173 266.546 41.765C268.006 41.9836 269.564 42.0885 271.205 42.0304C277.637 41.7985 282.44 39.126 285.278 37.0002C281.055 45.0783 272.602 50.5999 262.852 50.5999C255.84 50.5999 249.496 47.7453 244.914 43.1347C243.821 40.0647 242.286 33.6873 244.859 26.4319C245.55 24.4805 246.435 22.746 247.41 21.2231Z" fill="url(#paint11_linear_75_4)"/>
                      <path d="M247.407 21.2365C246.436 22.7559 245.554 24.4857 244.864 26.4319C242.292 33.6873 243.826 40.0647 244.92 43.1347C240.37 38.5629 237.56 32.2572 237.56 25.3C237.56 11.3248 248.884 0 262.857 0C263.575 0 264.282 0.0331296 264.983 0.0938672C267.837 1.72826 271.106 4.32341 273.668 8.37627C275.485 11.2623 276.514 14.1961 277.064 16.8254C275.098 12.9274 271.67 9.90966 267.291 8.7362C258.771 6.45285 249.877 12.017 247.426 21.1641C247.419 21.1883 247.413 21.2124 247.407 21.2365Z" fill="url(#paint12_linear_75_4)"/>
                    </g>
                    <defs>
                      <linearGradient id="paint0_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint1_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint2_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint3_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint4_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint5_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint6_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint7_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint8_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint9_linear_75_4" x1="168.669" y1="41.9882" x2="265.921" y2="25.5256" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#1D379E"/>
                        <stop offset="1" stop-color="#35A7E7"/>
                      </linearGradient>
                      <linearGradient id="paint10_linear_75_4" x1="267.605" y1="9.59102" x2="275.767" y2="41.6049" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint11_linear_75_4" x1="274.28" y1="35.2719" x2="243.363" y2="32.7877" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <linearGradient id="paint12_linear_75_4" x1="251.092" y1="32.7872" x2="271.799" y2="6.00954" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#41B7E2"/>
                        <stop offset="0.3" stop-color="#35A7E7"/>
                        <stop offset="0.94" stop-color="#2664BB"/>
                        <stop offset="1" stop-color="#2664BB"/>
                      </linearGradient>
                      <clipPath id="clip0_75_4">
                        <rect width="50.6" height="50.6" fill="white" transform="translate(237.56)"/>
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <p class="school-card-meta">Lady Margaret Rd, Southall UB1 2GU</p>
              </div>
            </div>
            <div class="school-card-metrics">
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">4.1</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Rating</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-thumbs-up tw:text-green-500" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">82%</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800">Recommended</span>
              </span>
              <span class="school-card-metric">
                <span class="school-card-metric-line">
                  <i class="fa-solid fa-calendar-xmark tw:text-state-danger-ink" aria-hidden="true"></i>
                  <span class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Applications Closed</span>
                </span>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-800 tw:font-normal">(Ended Aug 23rd)</span>
              </span>
            </div>
          </div>
          <div class="school-card-courses">
            <p class="school-card-courses-label">Top Available Courses</p>
            <div class="school-card-courses-list">
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">English Literature A-Level</span>
              <span class="badge badge-chip badge-pill badge-outline-secondary badge-sm">History A-Level</span>
              <span class="school-card-courses-more">+15 more</span>
            </div>
          </div>
        </div>
        <div class="school-card-actions">
          <button type="button" class="school-card-bookmark" aria-label="Save Maplewood Academy">
            <i class="fa-light fa-bookmark" aria-hidden="true"></i>
          </button>
        </div>
      </article>
    </div>
  </div>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2 tw:border-t tw:pt-8">Course Card</h1>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Course Card (consumer-only)<br>
      <strong>COMPOSES:</strong> ofsted-tag (footer) + badge-eligibility (top-right) + card-divider
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Provider course listing card. Default horizontal layout (910×108) for results lists; <code>.course-card-compact</code> (343×185) for narrow grids. Eligibility pill floats top-right (horizontal) or top-left (compact).
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Default horizontal — 910px container</h2>
    <div class="tw:max-w-[910px]">
      <article class="course-card">
        <div class="course-card-logo">
          <div class="tw:text-primary tw:font-bold tw:text-[22px]">HR</div>
        </div>
        <div class="course-card-body">
          <h3 class="course-card-title">A-Level Further Mathematics</h3>
          <p class="course-card-meta">Hills Road Sixth Form College · Cambridge CB2 · 2 years</p>
          <div class="course-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
            <div class="course-card-footer-meta">
              <span><i class="fa-light fa-calendar tw:mr-1" aria-hidden="true"></i>Sept 2026 entry</span>
              <span><i class="fa-light fa-clipboard-list tw:mr-1" aria-hidden="true"></i>EDEXCEL</span>
            </div>
          </div>
        </div>
        <div class="course-card-eligibility">
          <span class="badge-eligibility badge-eligibility-eligible">Eligible</span>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Compact — 343px container</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Stacked layout. Eligibility pill at top-left, logo + title row, meta line, footer row at bottom.</p>
    <div class="tw:max-w-[343px]">
      <article class="course-card course-card-compact">
        <div class="course-card-eligibility">
          <span class="badge-eligibility badge-eligibility-eligible">Eligible</span>
        </div>
        <div class="tw:flex tw:items-start tw:gap-[10px]">
          <div class="course-card-logo">
            <div class="tw:text-primary tw:font-bold tw:text-[14px]">HR</div>
          </div>
          <div class="tw:flex-1 tw:min-w-0">
            <h3 class="course-card-title">A-Level Further Mathematics</h3>
            <p class="course-card-meta">Hills Road Sixth Form College</p>
          </div>
        </div>
        <p class="course-card-meta">Sept 2026 · EDEXCEL · 2 years</p>
        <div class="course-card-footer">
          <span class="ofsted-tag ofsted-tag-outstanding ofsted-tag-sm">Outstanding</span>
          <span class="card-divider"></span>
          <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">All Ofsted ratings</h2>
    <div class="tw:max-w-[910px] tw:space-y-3">
      <article class="course-card">
        <div class="course-card-logo">
          <div class="tw:text-primary tw:font-bold tw:text-[22px]">HR</div>
        </div>
        <div class="course-card-body">
          <h3 class="course-card-title">A-Level Further Mathematics</h3>
          <p class="course-card-meta">Hills Road Sixth Form College · Cambridge CB2 · 2 years</p>
          <div class="course-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="course-card-eligibility"><span class="badge-eligibility badge-eligibility-eligible">Eligible</span></div>
      </article>
      <article class="course-card">
        <div class="course-card-logo">
          <div class="tw:text-primary tw:font-bold tw:text-[22px]">GS</div>
        </div>
        <div class="course-card-body">
          <h3 class="course-card-title">A-Level Computer Science</h3>
          <p class="course-card-meta">Greenford Sixth Form · London W5 · 2 years</p>
          <div class="course-card-footer">
            <span class="ofsted-tag ofsted-tag-good">Good</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="course-card-eligibility"><span class="badge-eligibility badge-eligibility-eligible">Eligible</span></div>
      </article>
      <article class="course-card">
        <div class="course-card-logo">
          <div class="tw:text-primary tw:font-bold tw:text-[22px]">KC</div>
        </div>
        <div class="course-card-body">
          <h3 class="course-card-title">A-Level Physics</h3>
          <p class="course-card-meta">Kings College London Maths School · London SE1 · 2 years</p>
          <div class="course-card-footer">
            <span class="ofsted-tag ofsted-tag-requires">Requires Improvement</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="course-card-eligibility"><span class="badge-eligibility badge-eligibility-unknown">Check eligibility</span></div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">All eligibility states</h2>
    <div class="tw:max-w-[910px] tw:space-y-3">
      <article class="course-card">
        <div class="course-card-logo">
          <div class="tw:text-primary tw:font-bold tw:text-[22px]">HR</div>
        </div>
        <div class="course-card-body">
          <h3 class="course-card-title">A-Level English Literature</h3>
          <p class="course-card-meta">Hills Road Sixth Form College · Cambridge CB2 · 2 years</p>
          <div class="course-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="course-card-eligibility"><span class="badge-eligibility badge-eligibility-eligible">Eligible</span></div>
      </article>
      <article class="course-card">
        <div class="course-card-logo">
          <div class="tw:text-primary tw:font-bold tw:text-[22px]">HR</div>
        </div>
        <div class="course-card-body">
          <h3 class="course-card-title">A-Level Chemistry</h3>
          <p class="course-card-meta">Hills Road Sixth Form College · Cambridge CB2 · 2 years</p>
          <div class="course-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="course-card-eligibility"><span class="badge-eligibility badge-eligibility-not-eligible">Not eligible</span></div>
      </article>
      <article class="course-card">
        <div class="course-card-logo">
          <div class="tw:text-primary tw:font-bold tw:text-[22px]">HR</div>
        </div>
        <div class="course-card-body">
          <h3 class="course-card-title">A-Level Biology</h3>
          <p class="course-card-meta">Hills Road Sixth Form College · Cambridge CB2 · 2 years</p>
          <div class="course-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="course-card-eligibility"><span class="badge-eligibility badge-eligibility-unknown">Check eligibility</span></div>
      </article>
    </div>
  </div>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2 tw:border-t tw:pt-8">Event Listing Card</h1>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Event Listing Card (consumer-only)<br>
      <strong>COMPOSES:</strong> ofsted-tag (footer) + card-divider
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Consumer event listing card. Default horizontal (910×198) has a 166×166 image on the right; compact (343×358) uses an 80px cover band at the top
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Default horizontal — 910px container</h2>
    <div class="tw:max-w-[910px]">
      <article class="event-listing-card">
        <div class="event-listing-card-body">
          <div class="event-listing-card-meta-row">
            <span><i class="fa-light fa-calendar" aria-hidden="true"></i>Sat 12 Apr 2026</span>
            <span><i class="fa-light fa-clock" aria-hidden="true"></i>9:00 – 13:00</span>
            <span><i class="fa-light fa-building" aria-hidden="true"></i>In person</span>
          </div>
          <h3 class="event-listing-card-title">Sixth Form Open Day</h3>
          <p class="event-listing-card-venue">Hills Road Sixth Form College · Hills Road, Cambridge CB2 8PE</p>
          <div class="event-listing-card-audience">
            <span><i class="fa-light fa-users" aria-hidden="true"></i>Year 11 students + parents</span>
            <span><i class="fa-light fa-ticket" aria-hidden="true"></i>Booking open</span>
            <span><i class="fa-light fa-car" aria-hidden="true"></i>Free parking</span>
          </div>
          <div class="event-listing-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="event-listing-card-image">
          <div class="tw:w-full tw:h-full tw:flex tw:items-center tw:justify-center tw:text-primary tw:font-bold tw:text-[32px]">HR</div>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Compact — 343px container</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Stacked layout. 80px cover band at top; content below.</p>
    <div class="tw:max-w-[343px]">
      <article class="event-listing-card event-listing-card-compact">
        <div class="event-listing-card-image">
          <div class="tw:w-full tw:h-full tw:flex tw:items-end tw:justify-start tw:p-2 tw:text-primary tw:font-bold tw:text-[16px]">HR</div>
        </div>
        <div class="event-listing-card-body">
          <div class="event-listing-card-meta-row">
            <span><i class="fa-light fa-calendar" aria-hidden="true"></i>Sat 12 Apr</span>
            <span><i class="fa-light fa-clock" aria-hidden="true"></i>9:00 – 13:00</span>
          </div>
          <h3 class="event-listing-card-title">Sixth Form Open Day</h3>
          <p class="event-listing-card-venue">Hills Road, Cambridge CB2 8PE</p>
          <div class="event-listing-card-audience">
            <span><i class="fa-light fa-users" aria-hidden="true"></i>Year 11 + parents</span>
            <span><i class="fa-light fa-ticket" aria-hidden="true"></i>Booking open</span>
            <span><i class="fa-light fa-car" aria-hidden="true"></i>Free parking</span>
          </div>
          <div class="event-listing-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding ofsted-tag-sm">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">All Ofsted ratings (horizontal layout)</h2>
    <div class="tw:max-w-[910px] tw:space-y-3">
      <article class="event-listing-card">
        <div class="event-listing-card-body">
          <div class="event-listing-card-meta-row">
            <span><i class="fa-light fa-calendar" aria-hidden="true"></i>Sat 12 Apr 2026</span>
            <span><i class="fa-light fa-clock" aria-hidden="true"></i>9:00 – 13:00</span>
          </div>
          <h3 class="event-listing-card-title">Sixth Form Open Day</h3>
          <p class="event-listing-card-venue">Hills Road Sixth Form College · Cambridge CB2 8PE</p>
          <div class="event-listing-card-audience">
            <span><i class="fa-light fa-users" aria-hidden="true"></i>Year 11 + parents</span>
          </div>
          <div class="event-listing-card-footer">
            <span class="ofsted-tag ofsted-tag-outstanding">Outstanding</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="event-listing-card-image">
          <div class="tw:w-full tw:h-full tw:flex tw:items-center tw:justify-center tw:text-primary tw:font-bold tw:text-[32px]">HR</div>
        </div>
      </article>
      <article class="event-listing-card">
        <div class="event-listing-card-body">
          <div class="event-listing-card-meta-row">
            <span><i class="fa-light fa-calendar" aria-hidden="true"></i>Wed 16 Apr 2026</span>
            <span><i class="fa-light fa-clock" aria-hidden="true"></i>17:00 – 19:00</span>
            <span><i class="fa-light fa-video" aria-hidden="true"></i>Online</span>
          </div>
          <h3 class="event-listing-card-title">Virtual Information Evening</h3>
          <p class="event-listing-card-venue">Greenford Sixth Form · Zoom</p>
          <div class="event-listing-card-audience">
            <span><i class="fa-light fa-users" aria-hidden="true"></i>Year 10 + parents</span>
            <span><i class="fa-light fa-ticket" aria-hidden="true"></i>Registration required</span>
          </div>
          <div class="event-listing-card-footer">
            <span class="ofsted-tag ofsted-tag-good">Good</span>
            <span class="card-divider"></span>
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-semibold tw:tracking-[0.04em] tw:uppercase">Ofsted</span>
          </div>
        </div>
        <div class="event-listing-card-image">
          <div class="tw:w-full tw:h-full tw:flex tw:items-center tw:justify-center tw:text-primary tw:font-bold tw:text-[32px]">GS</div>
        </div>
      </article>
    </div>
  </div>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2 tw:border-t tw:pt-8">Career Card</h1>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Career Card (consumer-only)<br>
      <strong>COMPOSES:</strong> industry-tag (title row) + badge-status (bottom row) + caller's avatar/icon
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Career listing card. Default horizontal layout (910×108) for results lists; <code>.career-card-compact</code> (343×185) for narrow grids. Career signals (salary, demand, tariff) ride on <code>.badge-status</code> from R3j.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Default horizontal — 910px container</h2>
    <div class="tw:max-w-[910px]">
      <article class="career-card">
        <div class="career-card-avatar">
          <i class="fa-light fa-compass-drafting tw:text-primary tw:text-[36px]" aria-hidden="true"></i>
        </div>
        <div class="career-card-body">
          <div class="career-card-title-row">
            <h3 class="career-card-title">Architect</h3>
            <span class="industry-tag industry-tag-stem">STEM</span>
          </div>
          <p class="career-card-meta">Construction & Built Environment · 7-year qualification path · UK-wide</p>
          <div class="career-card-pills">
            <span class="badge-status badge-status-positive">£28K starting / £52K avg</span>
            <span class="badge-status badge-status-positive">Strong demand</span>
            <span class="badge-status badge-status-info">UCAS Tariff 120-144</span>
          </div>
        </div>
        <div class="career-card-actions">
          <button type="button" class="career-card-bookmark" aria-label="Save Architect career">
            <i class="fa-light fa-star" aria-hidden="true"></i>
          </button>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Compact — 343px container</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Stacked layout. Avatar 48×48; smaller title and meta; pills limited to 2.</p>
    <div class="tw:max-w-[343px]">
      <article class="career-card career-card-compact">
        <div class="tw:flex tw:items-start tw:gap-[10px]">
          <div class="career-card-avatar">
            <i class="fa-light fa-stethoscope tw:text-primary tw:text-[22px]" aria-hidden="true"></i>
          </div>
          <div class="tw:flex-1 tw:min-w-0">
            <div class="career-card-title-row">
              <h3 class="career-card-title">Registered Nurse</h3>
              <span class="industry-tag industry-tag-healthcare industry-tag-sm">Healthcare</span>
            </div>
            <p class="career-card-meta">BSc Nursing or apprenticeship</p>
          </div>
        </div>
        <div class="career-card-pills">
          <span class="badge-status badge-status-positive">£27K – £42K (Band 5)</span>
          <span class="badge-status badge-status-positive">Strong demand</span>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">All industry sectors</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">One card per sector — STEM / Healthcare / Arts / Finance / Trades.</p>
    <div class="tw:max-w-[910px] tw:space-y-3">
      <article class="career-card">
        <div class="career-card-avatar">
          <i class="fa-light fa-compass-drafting tw:text-primary tw:text-[36px]" aria-hidden="true"></i>
        </div>
        <div class="career-card-body">
          <div class="career-card-title-row">
            <h3 class="career-card-title">Architect</h3>
            <span class="industry-tag industry-tag-stem">STEM</span>
          </div>
          <p class="career-card-meta">Construction & Built Environment · 7-year qualification path</p>
          <div class="career-card-pills">
            <span class="badge-status badge-status-positive">£28K starting</span>
            <span class="badge-status badge-status-positive">Strong demand</span>
          </div>
        </div>
      </article>
      <article class="career-card">
        <div class="career-card-avatar">
          <i class="fa-light fa-stethoscope tw:text-primary tw:text-[36px]" aria-hidden="true"></i>
        </div>
        <div class="career-card-body">
          <div class="career-card-title-row">
            <h3 class="career-card-title">Registered Nurse</h3>
            <span class="industry-tag industry-tag-healthcare">Healthcare</span>
          </div>
          <p class="career-card-meta">BSc Nursing or 4-year apprenticeship · NHS, hospital, community</p>
          <div class="career-card-pills">
            <span class="badge-status badge-status-positive">£27K – £42K (Band 5)</span>
            <span class="badge-status badge-status-positive">Strong demand</span>
            <span class="badge-status badge-status-negative">Shift work</span>
          </div>
        </div>
      </article>
      <article class="career-card">
        <div class="career-card-avatar">
          <i class="fa-light fa-palette tw:text-primary tw:text-[36px]" aria-hidden="true"></i>
        </div>
        <div class="career-card-body">
          <div class="career-card-title-row">
            <h3 class="career-card-title">Graphic Designer</h3>
            <span class="industry-tag industry-tag-arts">Arts</span>
          </div>
          <p class="career-card-meta">BA Graphic Design or portfolio-based entry · Agencies, in-house, freelance</p>
          <div class="career-card-pills">
            <span class="badge-status badge-status-positive">£22K starting / £38K avg</span>
            <span class="badge-status badge-status-info">UCAS Tariff 96-120</span>
          </div>
        </div>
      </article>
      <article class="career-card">
        <div class="career-card-avatar">
          <i class="fa-light fa-chart-line tw:text-primary tw:text-[36px]" aria-hidden="true"></i>
        </div>
        <div class="career-card-body">
          <div class="career-card-title-row">
            <h3 class="career-card-title">Chartered Accountant</h3>
            <span class="industry-tag industry-tag-finance">Finance</span>
          </div>
          <p class="career-card-meta">ACA / ACCA training contract (3 years) · Big-4 + mid-tier firms</p>
          <div class="career-card-pills">
            <span class="badge-status badge-status-positive">£30K trainee / £60K qualified</span>
            <span class="badge-status badge-status-positive">Strong demand</span>
          </div>
        </div>
      </article>
      <article class="career-card">
        <div class="career-card-avatar">
          <i class="fa-light fa-bolt tw:text-primary tw:text-[36px]" aria-hidden="true"></i>
        </div>
        <div class="career-card-body">
          <div class="career-card-title-row">
            <h3 class="career-card-title">Electrician</h3>
            <span class="industry-tag industry-tag-trades">Trades</span>
          </div>
          <p class="career-card-meta">Level 3 apprenticeship (4 years) · Domestic, commercial, industrial</p>
          <div class="career-card-pills">
            <span class="badge-status badge-status-positive">£18K apprentice / £40K qualified</span>
            <span class="badge-status badge-status-positive">Strong demand</span>
            <span class="badge-status badge-status-info">Apprenticeship route</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2 tw:border-t tw:pt-8">Review Card</h1>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Review Card (consumer-only)<br>
      <strong>VARIANTS:</strong> Default (with initials avatar) + with image avatar
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Community review card used in the Search page "Recent Reviews" section and the
      Detail page school reviews tab. Displays reviewer identity, a recommendation
      indicator, review body text, and a 2-column stat grid with star ratings.
      Composes <code>.stars</code> for rating display.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Two-column grid (typical usage)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Layout:</strong> Use a 2-column grid (<code>tw:grid tw:grid-cols-2 tw:gap-4</code>)
        to present pairs of reviews. Avatar can be initials fallback (no <code><img></code>)
        or a real photo.
      </p>
    </div>
    <div class="tw:grid tw:grid-cols-2 tw:gap-4">
      <article class="review-card">
        <div class="review-card-header">
          <div class="review-card-avatar">Y13</div>
          <div class="review-card-identity">
            <p class="review-card-name tw:mb-0">
              Year 13 Student, 2024
              <span class="review-card-time">3 days ago</span>
            </p>
            <p class="review-card-recommended tw:mb-0">
              <i class="fa-solid fa-thumbs-up" aria-hidden="true"></i>
              Recommended
            </p>
            <p class="tw:mb-0">
              <a href="#" class="tw:text-body-xs tw:leading-body-xs tw:text-link tw:underline tw:underline-offset-2 tw:inline-flex tw:items-center tw:gap-1">
                Greenford High School
                <i class="fa-light fa-arrow-up-right-from-square tw:text-xs" aria-hidden="true"></i>
              </a>
            </p>
          </div>
          <i class="review-card-thumb fa-solid fa-thumbs-up" aria-label="Recommended"></i>
        </div>
        <p class="review-card-body">
          Absolutely love this school! The teachers genuinely care about your success and go above and beyond to help. The science department is incredible — we have amazing lab facilities and teachers who encourage independent thinking and research.
        </p>
        <div class="review-card-stats">
          <div class="review-card-stat">
            <span class="review-card-stat-label">Teaching Quality</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
          <div class="review-card-stat">
            <span class="review-card-stat-label">Student Support</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
          <div class="review-card-stat">
            <span class="review-card-stat-label">Facilities & Resources</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
          <div class="review-card-stat">
            <span class="review-card-stat-label">Opportunities & Enrichment</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </article>
      <article class="review-card">
        <div class="review-card-header">
          <div class="review-card-avatar">Y12</div>
          <div class="review-card-identity">
            <p class="review-card-name tw:mb-0">
              Year 12 Student, 2024
              <span class="review-card-time">5 days ago</span>
            </p>
            <p class="review-card-recommended tw:mb-0">
              <i class="fa-solid fa-thumbs-up" aria-hidden="true"></i>
              Recommended
            </p>
            <p class="tw:mb-0">
              <a href="#" class="tw:text-body-xs tw:leading-body-xs tw:text-link tw:underline tw:underline-offset-2 tw:inline-flex tw:items-center tw:gap-1">
                Hills Road Sixth Form College
                <i class="fa-light fa-arrow-up-right-from-square tw:text-xs" aria-hidden="true"></i>
              </a>
            </p>
          </div>
          <i class="review-card-thumb fa-solid fa-thumbs-up" aria-label="Recommended"></i>
        </div>
        <p class="review-card-body">
          An exceptional sixth form with outstanding A-level results. The breadth of subjects on offer is remarkable and the pastoral support system is second to none. Uni guidance here is truly world-class — most of my friends got into their first-choice universities.
        </p>
        <div class="review-card-stats">
          <div class="review-card-stat">
            <span class="review-card-stat-label">Teaching Quality</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
          <div class="review-card-stat">
            <span class="review-card-stat-label">Student Support</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
          <div class="review-card-stat">
            <span class="review-card-stat-label">Facilities & Resources</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
          <div class="review-card-stat">
            <span class="review-card-stat-label">Opportunities & Enrichment</span>
            <div class="stars stars-sm" aria-label="4.5 out of 5 stars">
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star" aria-hidden="true"></i>
              <i class="fa-solid fa-star-half-stroke" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </article>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><article class="review-card"> ... </article></code>
    </div>
  </div>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2 tw:border-t tw:pt-8">Shortlist Slot</h1>
</div>
<div class="tw:p-6 tw:max-w-2xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Shortlist Slot (consumer-only)<br>
      <strong>VARIANTS:</strong> shortlist-slot-filled | shortlist-slot-empty
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Fixed slot in the "Compare Your Top Choices" sidebar. Filled state shows a school logo, name, and address
      with a circular × remove button overlapping the top-right corner. Empty state shows a 72px dashed
      placeholder.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">1. Filled state</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Filled:</strong> White card, 1px line-card border, 8px radius. Logo (48×48) + name (14px bold) + address (12px neutral-500). Circular × button (22×22) overlaps top-right.
      </p>
    </div>
    <div class="tw:max-w-[280px] tw:space-y-4">
      <div class="shortlist-slot">
        <div class="shortlist-slot-filled">
          <div class="shortlist-slot-logo tw:bg-surface-tint">
            <i class="fa-regular fa-school tw:text-primary tw:text-[22px]" aria-hidden="true"></i>
          </div>
          <div class="shortlist-slot-info">
            <span class="shortlist-slot-name">Greenford High School</span>
            <span class="shortlist-slot-address">Lady Margaret Rd, Southall UB1 2GU</span>
          </div>
        </div>
        <button class="shortlist-slot-remove" type="button" aria-label="Remove Greenford High School from shortlist">
          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </button>
      </div>
      <div class="shortlist-slot">
        <div class="shortlist-slot-filled">
          <div class="shortlist-slot-logo tw:bg-surface-tint">
            <i class="fa-regular fa-graduation-cap tw:text-primary tw:text-[22px]" aria-hidden="true"></i>
          </div>
          <div class="shortlist-slot-info">
            <span class="shortlist-slot-name">Cedar Grove Secondary School</span>
            <span class="shortlist-slot-address">Cedar Road, Ealing W5 3AL</span>
          </div>
        </div>
        <button class="shortlist-slot-remove" type="button" aria-label="Remove Cedar Grove Secondary School from shortlist">
          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="shortlist-slot"><div class="shortlist-slot-filled"> … </div><button class="shortlist-slot-remove"> × </button></div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">2. Empty state</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Empty:</strong> 72px height, 8px radius, 2px dashed line-card border, surface-muted bg, neutral-300 medium text label.
      </p>
    </div>
    <div class="tw:max-w-[280px]">
      <div class="shortlist-slot">
        <div class="shortlist-slot-empty">Provider 3</div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="shortlist-slot"><div class="shortlist-slot-empty">Provider 3</div></div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">3. Full "Compare Your Top Choices" sidebar — 2 filled + 3 empty</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Composed view:</strong> 5-slot column matching the ShortlistSidebar design. Caller wraps slots in a flex-col gap-3.5 layout and adds the heading + CTA button.
      </p>
    </div>
    <div class="tw:max-w-[280px]">
      <div class="card">
        <div class="card-body">
          <div class="tw:mb-3">
            <h3 class="tw:text-[16px] tw:font-bold tw:text-neutral-900 tw:leading-tight tw:mb-1">Compare Your Top Choices</h3>
            <p class="tw:text-[12px] tw:text-neutral-500 tw:leading-[1.45] tw:m-0">Ready to decide? Choose up to 5 favourite schools to compare them all in one place.</p>
          </div>
          <div class="tw:flex tw:flex-col tw:gap-3.5">
            <div class="shortlist-slot">
              <div class="shortlist-slot-filled">
                <div class="shortlist-slot-logo tw:bg-surface-tint">
                  <i class="fa-regular fa-school tw:text-primary tw:text-[22px]" aria-hidden="true"></i>
                </div>
                <div class="shortlist-slot-info">
                  <span class="shortlist-slot-name">Greenford High School</span>
                  <span class="shortlist-slot-address">Lady Margaret Rd</span>
                </div>
              </div>
              <button class="shortlist-slot-remove" type="button" aria-label="Remove Greenford High School">
                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
              </button>
            </div>
            <div class="shortlist-slot">
              <div class="shortlist-slot-filled">
                <div class="shortlist-slot-logo tw:bg-surface-tint">
                  <i class="fa-regular fa-graduation-cap tw:text-primary tw:text-[22px]" aria-hidden="true"></i>
                </div>
                <div class="shortlist-slot-info">
                  <span class="shortlist-slot-name">Cedar Grove Secondary</span>
                  <span class="shortlist-slot-address">Cedar Road, Ealing W5</span>
                </div>
              </div>
              <button class="shortlist-slot-remove" type="button" aria-label="Remove Cedar Grove Secondary">
                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
              </button>
            </div>
            <div class="shortlist-slot">
              <div class="shortlist-slot-empty">Provider 3</div>
            </div>
            <div class="shortlist-slot">
              <div class="shortlist-slot-empty">Provider 4</div>
            </div>
            <div class="shortlist-slot">
              <div class="shortlist-slot-empty">Provider 5</div>
            </div>
          </div>
          <div class="tw:mt-3.5">
            <button class="btn btn-primary btn-block" type="button">Compare</button>
          </div>
          <div class="tw:text-center tw:mt-2">
            <a href="#" class="tw:text-[13px] tw:text-link tw:underline tw:underline-offset-2">Clear All Providers</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto">
  <h1 class="h2 tw:border-t tw:pt-8">AI Result Card</h1>
</div>
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> AI Result Card (consumer-only)<br>
      <strong>COMPOSES:</strong> card / card-interactive / card-body / card-footer + badge-eligibility + form-check + btn<br>
      <strong>STATES:</strong> Likely eligible · Within reach · Eligible—enquire · Saved · Selected to compare · Culture tags · Compact
    </p>
    <p class="tw:mb-0 tw:text-sm">
      The ranked-match card for AI Search results. Built on the generic card (shell + interactive hover + body/footer), it adds the eligibility-led meta row, the <code>✦</code> "why it matches" recap, and a footer action bar (Add to compare · Quick Apply). Every card is treated identically — the system explains why each result <em>matches</em>, it does not rank a "best" for the user, so there is no top-match treatment. Save sits as a corner icon. The whole card links to the provider profile.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Default — results list card</h2>
    <div class="tw:max-w-[760px]">
      <article class="card card-interactive ai-result-card">
        <button type="button" class="ai-result-card-bookmark" aria-label="Save Ealing Independent College">
          <i class="fa-light fa-bookmark" aria-hidden="true"></i>
        </button>
        <div class="card-body ai-result-card-body">
          <span class="ai-result-card-logo" aria-hidden="true">EIC</span>
          <div class="ai-result-card-main">
            <div class="ai-result-card-heading">
              <a href="#" class="ai-result-card-name">Ealing Independent College</a>
              <i class="fa-solid fa-circle-check ai-result-card-verified" aria-label="Verified" title="Verified on ApplicaaOne"></i>
            </div>
            <div class="ai-result-card-meta">
              <span class="badge-eligibility badge-eligibility-eligible"><i class="fa-light fa-badge-check tw:mr-1" aria-hidden="true"></i>Likely eligible</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1" aria-label="Rated 4.6 out of 5"><i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i><b>4.6</b></span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:text-state-success-ink tw:font-semibold">Outstanding</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:inline-flex tw:items-center tw:gap-1"><i class="fa-light fa-location-dot" aria-hidden="true"></i>0.6 mi</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span><span class="ai-result-card-stat-label">Outcomes</span><b>85% A*–B</b></span>
            </div>
            <div class="ai-result-card-reason">
              <i class="fa-solid fa-sparkles ai-result-card-reason-icon" aria-hidden="true"></i>
              <span>Matches all three of your subjects — Maths, Physics & Economics — as one clash-free block, and it’s the closest to you in W5.</span>
            </div>
          </div>
        </div>
        <div class="card-footer ai-result-card-footer">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="aircp-eic">
            <label class="form-check-label" for="aircp-eic">Add to compare</label>
          </div>
          <div class="ai-result-card-actions">
            <span class="ai-result-card-profile">View profile <i class="fa-light fa-arrow-right" aria-hidden="true"></i></span>
            <button type="button" class="btn btn-primary btn-sm"><i class="fa-light fa-bolt tw:mr-1" aria-hidden="true"></i>Quick Apply</button>
          </div>
        </div>
      </article>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><article class="card card-interactive ai-result-card"> … <div class="card-body ai-result-card-body"> … <div class="card-footer ai-result-card-footer"></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">States — saved · selected to compare · enquire · culture tags</h2>
    <div class="tw:max-w-[760px] tw:flex tw:flex-col tw:gap-3">
      <!-- Saved (bookmark active) -->
      <article class="card card-interactive ai-result-card">
        <button type="button" class="ai-result-card-bookmark active" aria-label="Saved: Greenford High School" aria-pressed="true">
          <i class="fa-solid fa-bookmark" aria-hidden="true"></i>
        </button>
        <div class="card-body ai-result-card-body">
          <span class="ai-result-card-logo" aria-hidden="true">GHS</span>
          <div class="ai-result-card-main">
            <div class="ai-result-card-heading">
              <a href="#" class="ai-result-card-name">Greenford High School</a>
              <i class="fa-solid fa-circle-check ai-result-card-verified" aria-label="Verified"></i>
            </div>
            <div class="ai-result-card-meta">
              <span class="badge-eligibility badge-eligibility-eligible"><i class="fa-light fa-badge-check tw:mr-1" aria-hidden="true"></i>Likely eligible</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1" aria-label="Rated 4.5 out of 5"><i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i><b>4.5</b></span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:text-state-success-ink tw:font-semibold">Outstanding</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:inline-flex tw:items-center tw:gap-1"><i class="fa-light fa-location-dot" aria-hidden="true"></i>1.2 mi</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span><span class="ai-result-card-stat-label">Outcomes</span><b>82% A*–B</b></span>
            </div>
            <div class="ai-result-card-reason">
              <i class="fa-solid fa-sparkles ai-result-card-reason-icon" aria-hidden="true"></i>
              <span>All three subjects in its sixth-form science block, with a dedicated further-maths set.</span>
            </div>
          </div>
        </div>
        <div class="card-footer ai-result-card-footer">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="aircp-ghs">
            <label class="form-check-label" for="aircp-ghs">Add to compare</label>
          </div>
          <div class="ai-result-card-actions">
            <span class="ai-result-card-profile">View profile <i class="fa-light fa-arrow-right" aria-hidden="true"></i></span>
            <button type="button" class="btn btn-primary btn-sm"><i class="fa-light fa-bolt tw:mr-1" aria-hidden="true"></i>Quick Apply</button>
          </div>
        </div>
      </article>
      <!-- Within reach + selected to compare (checkbox checked) -->
      <article class="card card-interactive ai-result-card">
        <button type="button" class="ai-result-card-bookmark" aria-label="Save Twyford C of E Academy">
          <i class="fa-light fa-bookmark" aria-hidden="true"></i>
        </button>
        <div class="card-body ai-result-card-body">
          <span class="ai-result-card-logo" aria-hidden="true">TCE</span>
          <div class="ai-result-card-main">
            <div class="ai-result-card-heading">
              <a href="#" class="ai-result-card-name">Twyford C of E Academy</a>
              <i class="fa-solid fa-circle-check ai-result-card-verified" aria-label="Verified"></i>
            </div>
            <div class="ai-result-card-meta">
              <span class="badge-eligibility badge-eligibility-not-eligible"><i class="fa-light fa-arrow-trend-up tw:mr-1" aria-hidden="true"></i>Within reach</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1" aria-label="Rated 4.3 out of 5"><i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i><b>4.3</b></span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:text-neutral-700 tw:font-semibold">Good</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:inline-flex tw:items-center tw:gap-1"><i class="fa-light fa-location-dot" aria-hidden="true"></i>2.4 mi</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span><span class="ai-result-card-stat-label">Outcomes</span><b>74% A*–B</b></span>
            </div>
            <div class="ai-result-card-reason">
              <i class="fa-solid fa-sparkles ai-result-card-reason-icon" aria-hidden="true"></i>
              <span>Offers the full combination; Physics entry asks a grade 6 — a slight stretch on your predicted grades, so worth an enquiry.</span>
            </div>
          </div>
        </div>
        <div class="card-footer ai-result-card-footer">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="aircp-tce" checked>
            <label class="form-check-label" for="aircp-tce">Add to compare</label>
          </div>
          <div class="ai-result-card-actions">
            <span class="ai-result-card-profile">View profile <i class="fa-light fa-arrow-right" aria-hidden="true"></i></span>
            <button type="button" class="btn btn-primary btn-sm"><i class="fa-light fa-bolt tw:mr-1" aria-hidden="true"></i>Quick Apply</button>
          </div>
        </div>
      </article>
      <!-- Eligible — enquire (grey unknown badge) -->
      <article class="card card-interactive ai-result-card">
        <button type="button" class="ai-result-card-bookmark" aria-label="Save Capel Manor College">
          <i class="fa-light fa-bookmark" aria-hidden="true"></i>
        </button>
        <div class="card-body ai-result-card-body">
          <span class="ai-result-card-logo" aria-hidden="true">CMC</span>
          <div class="ai-result-card-main">
            <div class="ai-result-card-heading">
              <a href="#" class="ai-result-card-name">Capel Manor College</a>
              <i class="fa-solid fa-circle-check ai-result-card-verified" aria-label="Verified"></i>
            </div>
            <div class="ai-result-card-meta">
              <span class="badge-eligibility badge-eligibility-unknown"><i class="fa-light fa-circle-question tw:mr-1" aria-hidden="true"></i>Eligible — enquire</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1" aria-label="Rated 4.5 out of 5"><i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i><b>4.5</b></span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:text-state-success-ink tw:font-semibold">Outstanding</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:inline-flex tw:items-center tw:gap-1"><i class="fa-light fa-location-dot" aria-hidden="true"></i>12 mi</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span><b>Entry varies</b></span>
            </div>
            <div class="ai-result-card-reason">
              <i class="fa-solid fa-sparkles ai-result-card-reason-icon" aria-hidden="true"></i>
              <span>Requirements vary by course and aren’t all published — a quick enquiry will confirm your options.</span>
            </div>
          </div>
        </div>
        <div class="card-footer ai-result-card-footer">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="aircp-cmc">
            <label class="form-check-label" for="aircp-cmc">Add to compare</label>
          </div>
          <div class="ai-result-card-actions">
            <span class="ai-result-card-profile">View profile <i class="fa-light fa-arrow-right" aria-hidden="true"></i></span>
            <button type="button" class="btn btn-primary btn-sm"><i class="fa-light fa-bolt tw:mr-1" aria-hidden="true"></i>Quick Apply</button>
          </div>
        </div>
      </article>
      <!-- Fit + culture tags -->
      <article class="card card-interactive ai-result-card">
        <button type="button" class="ai-result-card-bookmark" aria-label="Save Ealing Independent College">
          <i class="fa-light fa-bookmark" aria-hidden="true"></i>
        </button>
        <div class="card-body ai-result-card-body">
          <span class="ai-result-card-logo" aria-hidden="true">EIC</span>
          <div class="ai-result-card-main">
            <div class="ai-result-card-heading">
              <a href="#" class="ai-result-card-name">Ealing Independent College</a>
              <i class="fa-solid fa-circle-check ai-result-card-verified" aria-label="Verified"></i>
            </div>
            <div class="ai-result-card-meta">
              <span class="badge-eligibility badge-eligibility-eligible"><i class="fa-light fa-badge-check tw:mr-1" aria-hidden="true"></i>Likely eligible</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1" aria-label="Rated 4.6 out of 5"><i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i><b>4.6</b></span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:text-state-success-ink tw:font-semibold">Outstanding</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:inline-flex tw:items-center tw:gap-1"><i class="fa-light fa-location-dot" aria-hidden="true"></i>0.6 mi</span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span><span class="ai-result-card-stat-label">Cohort</span><b>480 students</b></span>
            </div>
            <div class="ai-result-card-tags">
              <span class="badge badge-secondary-subtle badge-sm"><i class="fa-light fa-check tw:mr-1" aria-hidden="true"></i>Small cohort</span>
              <span class="badge badge-secondary-subtle badge-sm"><i class="fa-light fa-check tw:mr-1" aria-hidden="true"></i>1:1 tutoring</span>
              <span class="badge badge-secondary-subtle badge-sm"><i class="fa-light fa-check tw:mr-1" aria-hidden="true"></i>SEND specialist</span>
            </div>
            <div class="ai-result-card-reason">
              <i class="fa-solid fa-sparkles ai-result-card-reason-icon" aria-hidden="true"></i>
              <span>Smallest year group nearby with named tutors — closest match to “small and supportive”.</span>
            </div>
          </div>
        </div>
        <div class="card-footer ai-result-card-footer">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="aircp-eic2">
            <label class="form-check-label" for="aircp-eic2">Add to compare</label>
          </div>
          <div class="ai-result-card-actions">
            <span class="ai-result-card-profile">View profile <i class="fa-light fa-arrow-right" aria-hidden="true"></i></span>
            <button type="button" class="btn btn-primary btn-sm"><i class="fa-light fa-bolt tw:mr-1" aria-hidden="true"></i>Quick Apply</button>
          </div>
        </div>
      </article>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Compact — narrow column (343px)</h2>
    <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Footer wraps full-width; meta tightens. Add <code>.ai-result-card-compact</code>.</p>
    <div class="tw:max-w-[343px]">
      <article class="card card-interactive ai-result-card ai-result-card-compact">
        <button type="button" class="ai-result-card-bookmark" aria-label="Save Greenford High School">
          <i class="fa-light fa-bookmark" aria-hidden="true"></i>
        </button>
        <div class="card-body ai-result-card-body">
          <span class="ai-result-card-logo" aria-hidden="true">GHS</span>
          <div class="ai-result-card-main">
            <div class="ai-result-card-heading">
              <a href="#" class="ai-result-card-name">Greenford High School</a>
              <i class="fa-solid fa-circle-check ai-result-card-verified" aria-label="Verified"></i>
            </div>
            <div class="ai-result-card-meta">
              <span class="badge-eligibility badge-eligibility-eligible"><i class="fa-light fa-badge-check tw:mr-1" aria-hidden="true"></i>Likely</span>
              <span class="tw:inline-flex tw:items-center tw:gap-1" aria-label="Rated 4.5 out of 5"><i class="fa-solid fa-star tw:text-yellow-500" aria-hidden="true"></i><b>4.5</b></span>
              <span class="ai-result-card-sep" aria-hidden="true"></span>
              <span class="tw:inline-flex tw:items-center tw:gap-1"><i class="fa-light fa-location-dot" aria-hidden="true"></i>1.2 mi</span>
            </div>
            <div class="ai-result-card-reason">
              <i class="fa-solid fa-sparkles ai-result-card-reason-icon" aria-hidden="true"></i>
              <span>All three subjects in its science block.</span>
            </div>
          </div>
        </div>
        <div class="card-footer ai-result-card-footer">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="aircp-ghs2">
            <label class="form-check-label" for="aircp-ghs2">Compare</label>
          </div>
          <div class="ai-result-card-actions">
            <button type="button" class="btn btn-primary btn-sm"><i class="fa-light fa-bolt tw:mr-1" aria-hidden="true"></i>Quick Apply</button>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>