<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>HERO:</strong> Consumer landing hero surfaces<br>
      <strong>VARIANTS:</strong> Search | Wash
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Consolidated entry for the hero patterns. Search is the rounded-pill multi-segment
      search bar; Wash is the sky-to-white gradient hero background.
    </p>
  </div>
  <div data-controller="tabs">
    <div class="tabs" role="tablist">
      <button class="tab" role="tab" aria-selected="true" data-tabs-target="tab" data-tabs-anchor="search" data-action="click->tabs#select keydown->tabs#keydown" type="button">Search</button>
      <button class="tab" role="tab" aria-selected="false" data-tabs-target="tab" data-tabs-anchor="wash" data-action="click->tabs#select keydown->tabs#keydown" type="button">Wash</button>
    </div>
    <div class="tab-content">
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>PATTERN:</strong> Hero Search (consumer-only)<br>
            <strong>COMPOSES:</strong> (standalone — pill built from hero-search-* classes)
          </p>
          <p class="tw:mb-0 tw:text-sm">
            56px rounded-pill search bar with N field segments and a circular sky-blue submit button.
            Supports 5 search verticals: Providers (placeholder), Providers (filled), Courses, Events, Careers.
            Below the pill: Advanced Filters toggle link + result-count meta row.
          </p>
        </div>
        <!-- ── Providers (default — placeholder type) ─────────────────── -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Providers — default (placeholder type)</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Vertical: Providers.</strong>
              Type of school shows a chevron + placeholder. Where/What/Near/Within show values and tags.
              Meta row: no active-filter badge.
            </p>
          </div>
          <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg">
            <div class="hero-search">
              <div class="hero-search-pill">
                <!-- Type of school (placeholder + chevron) -->
                <div class="hero-search-field">
                  <span class="hero-search-field-label">Type of school</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value hero-search-field-value-placeholder">
                      (e.g., Sixth Form School)
                    </span>
                    <span class="hero-search-field-chevron" aria-hidden="true">
                      <i class="fa-light fa-chevron-down tw:text-xs"></i>
                    </span>
                  </div>
                </div>
                <!-- Where to study (value) -->
                <div class="hero-search-field">
                  <span class="hero-search-field-label">Where to study</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">Greenford High School</span>
                  </div>
                </div>
                <!-- What to study (tags) -->
                <div class="hero-search-field tw:flex-[1.5]">
                  <span class="hero-search-field-label">What to study</span>
                  <div class="hero-search-field-value-row">
                    <div class="hero-search-field-tags">
                      <span class="hero-search-field-tag">
                        Mathematics A-Level
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Mathematics A-Level">×</span>
                      </span>
                      <span class="hero-search-field-tag">
                        Further…
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Further Maths">×</span>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- Near to (value) -->
                <div class="hero-search-field tw:flex-[0.7]">
                  <span class="hero-search-field-label">Near to</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">KA30 8LD</span>
                  </div>
                </div>
                <!-- Search within (value) -->
                <div class="hero-search-field tw:flex-[0.9]">
                  <span class="hero-search-field-label">Search within</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">Within 10 miles</span>
                  </div>
                </div>
                <!-- Submit button -->
                <button type="button" class="hero-search-submit" aria-label="Search providers">
                  <i class="fa-light fa-magnifying-glass tw:text-lg" aria-hidden="true"></i>
                </button>
              </div>
              <!-- Meta row -->
              <div class="hero-search-meta">
                <a href="#" class="hero-search-toggle" aria-label="Open advanced filters">
                  <i class="fa-light fa-sliders" aria-hidden="true"></i>
                  Advanced Filters
                  <i class="fa-light fa-chevron-down tw:text-xs" aria-hidden="true"></i>
                </a>
                <span class="hero-search-results">
                  <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i>
                  245 potential results · Add filters to refine
                </span>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="hero-search"><div class="hero-search-pill">...</div><div class="hero-search-meta">...</div></div></code>
          </div>
        </div>
        <!-- ── Providers filled (type uses chips) ─────────────────────── -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Providers — filled (type has chips)</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Vertical: Providers filled.</strong>
              Type of school shows 2 chips (no chevron). Active-filter badge shows count of 3 on the toggle.
            </p>
          </div>
          <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg">
            <div class="hero-search">
              <div class="hero-search-pill">
                <!-- Type of school (chips, no chevron) -->
                <div class="hero-search-field tw:flex-[1.4]">
                  <span class="hero-search-field-label">Type of school</span>
                  <div class="hero-search-field-value-row">
                    <div class="hero-search-field-tags">
                      <span class="hero-search-field-tag">
                        Sixth Form & Colleges
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Sixth Form & Colleges">×</span>
                      </span>
                      <span class="hero-search-field-tag">
                        Secondary
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Secondary">×</span>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- Where to study -->
                <div class="hero-search-field tw:flex-[1.3]">
                  <span class="hero-search-field-label">Where to study</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">Greenford High School</span>
                  </div>
                </div>
                <!-- What to study (tags) -->
                <div class="hero-search-field tw:flex-[1.5]">
                  <span class="hero-search-field-label">What to study</span>
                  <div class="hero-search-field-value-row">
                    <div class="hero-search-field-tags">
                      <span class="hero-search-field-tag">
                        Mathematics A-Level
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Mathematics A-Level">×</span>
                      </span>
                      <span class="hero-search-field-tag">
                        Further…
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Further Maths">×</span>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- Near to -->
                <div class="hero-search-field tw:flex-[0.7]">
                  <span class="hero-search-field-label">Near to</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">KA30 8LD</span>
                  </div>
                </div>
                <!-- Search within -->
                <div class="hero-search-field tw:flex-[0.9]">
                  <span class="hero-search-field-label">Search within</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">Within 10 miles</span>
                  </div>
                </div>
                <!-- Submit -->
                <button type="button" class="hero-search-submit" aria-label="Search providers">
                  <i class="fa-light fa-magnifying-glass tw:text-lg" aria-hidden="true"></i>
                </button>
              </div>
              <!-- Meta row with active-filter badge -->
              <div class="hero-search-meta">
                <a href="#" class="hero-search-toggle" aria-label="Open advanced filters, 3 active">
                  <i class="fa-light fa-sliders" aria-hidden="true"></i>
                  Advanced Filters
                  <span class="hero-search-toggle-badge" aria-hidden="true">3</span>
                  <i class="fa-light fa-chevron-down tw:text-xs" aria-hidden="true"></i>
                </a>
                <span class="hero-search-results">
                  <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i>
                  48 potential results
                </span>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><span class="hero-search-toggle-badge">3</span> — badge appears only when activeFiltersCount > 0</code>
          </div>
        </div>
        <!-- ── Courses vertical ───────────────────────────────────────── -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Courses vertical</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Vertical: Courses.</strong>
              Type (chips) / What to study (chips) / Where to study (placeholder) / Near to (value) / Search within (value + chevron).
            </p>
          </div>
          <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg">
            <div class="hero-search">
              <div class="hero-search-pill">
                <!-- Type (chips) -->
                <div class="hero-search-field tw:flex-[1.3]">
                  <span class="hero-search-field-label">Type of school</span>
                  <div class="hero-search-field-value-row">
                    <div class="hero-search-field-tags">
                      <span class="hero-search-field-tag">
                        Sixth Form & Colleges
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Sixth Form & Colleges">×</span>
                      </span>
                      <span class="hero-search-field-tag">
                        Secondary
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Secondary">×</span>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- What (chips) -->
                <div class="hero-search-field tw:flex-[1.5]">
                  <span class="hero-search-field-label">What to study</span>
                  <div class="hero-search-field-value-row">
                    <div class="hero-search-field-tags">
                      <span class="hero-search-field-tag">
                        Mathematics A-Level
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Mathematics A-Level">×</span>
                      </span>
                      <span class="hero-search-field-tag">
                        Further…
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Further Maths">×</span>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- Where (placeholder) -->
                <div class="hero-search-field tw:flex-[1.3]">
                  <span class="hero-search-field-label">Where to study</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value hero-search-field-value-placeholder">
                      Search by school name
                    </span>
                  </div>
                </div>
                <!-- Near to -->
                <div class="hero-search-field tw:flex-[0.7]">
                  <span class="hero-search-field-label">Near to</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">KA30 8LD</span>
                  </div>
                </div>
                <!-- Search within (chevron) -->
                <div class="hero-search-field tw:flex-[0.9]">
                  <span class="hero-search-field-label">Search within</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">Any distance</span>
                    <span class="hero-search-field-chevron" aria-hidden="true">
                      <i class="fa-light fa-chevron-down tw:text-xs"></i>
                    </span>
                  </div>
                </div>
                <!-- Submit -->
                <button type="button" class="hero-search-submit" aria-label="Search courses">
                  <i class="fa-light fa-magnifying-glass tw:text-lg" aria-hidden="true"></i>
                </button>
              </div>
              <div class="hero-search-meta">
                <a href="#" class="hero-search-toggle" aria-label="Open advanced filters">
                  <i class="fa-light fa-sliders" aria-hidden="true"></i>
                  Advanced Filters
                  <i class="fa-light fa-chevron-down tw:text-xs" aria-hidden="true"></i>
                </a>
                <span class="hero-search-results">
                  <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i>
                  1,204 courses found
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- ── Events vertical ───────────────────────────────────────── -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Events vertical</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Vertical: Events.</strong>
              Type (chips) / What Event (large placeholder) / Near (placeholder) / Search within (value).
              Four segments only — the "What Event" field spans proportionally wider.
            </p>
          </div>
          <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg">
            <div class="hero-search">
              <div class="hero-search-pill">
                <!-- Type (chips) -->
                <div class="hero-search-field tw:flex-[1.3]">
                  <span class="hero-search-field-label">Type of school</span>
                  <div class="hero-search-field-value-row">
                    <div class="hero-search-field-tags">
                      <span class="hero-search-field-tag">
                        Sixth Form & Colleges
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Sixth Form & Colleges">×</span>
                      </span>
                      <span class="hero-search-field-tag">
                        Secondary
                        <span class="hero-search-field-tag-dismiss" aria-label="Remove Secondary">×</span>
                      </span>
                    </div>
                  </div>
                </div>
                <!-- What event (wide placeholder) -->
                <div class="hero-search-field tw:flex-[2.2]">
                  <span class="hero-search-field-label">What Event to Join</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value hero-search-field-value-placeholder">
                      Search event by provider’s name or key words
                    </span>
                  </div>
                </div>
                <!-- Near (placeholder) -->
                <div class="hero-search-field tw:flex-[0.8]">
                  <span class="hero-search-field-label">Near to</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value hero-search-field-value-placeholder">
                      Enter postcode
                    </span>
                  </div>
                </div>
                <!-- Search within (value) -->
                <div class="hero-search-field tw:flex-[0.9]">
                  <span class="hero-search-field-label">Search within</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value">Any distance</span>
                  </div>
                </div>
                <!-- Submit -->
                <button type="button" class="hero-search-submit" aria-label="Search events">
                  <i class="fa-light fa-magnifying-glass tw:text-lg" aria-hidden="true"></i>
                </button>
              </div>
              <div class="hero-search-meta">
                <a href="#" class="hero-search-toggle" aria-label="Open advanced filters">
                  <i class="fa-light fa-sliders" aria-hidden="true"></i>
                  Advanced Filters
                  <i class="fa-light fa-chevron-down tw:text-xs" aria-hidden="true"></i>
                </a>
                <span class="hero-search-results">
                  <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i>
                  87 upcoming events
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- ── Careers vertical ──────────────────────────────────────── -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Careers vertical</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Vertical: Careers.</strong>
              Single field spanning the full pill width (flex 5). Large placeholder. No segmented dividers.
            </p>
          </div>
          <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg">
            <div class="hero-search">
              <div class="hero-search-pill">
                <!-- Single wide field -->
                <div class="hero-search-field tw:flex-[5]">
                  <span class="hero-search-field-label">What career interests you</span>
                  <div class="hero-search-field-value-row">
                    <span class="hero-search-field-value hero-search-field-value-placeholder">
                      Search by job title or keyword (e.g., doctor)
                    </span>
                  </div>
                </div>
                <!-- Submit -->
                <button type="button" class="hero-search-submit" aria-label="Search careers">
                  <i class="fa-light fa-magnifying-glass tw:text-lg" aria-hidden="true"></i>
                </button>
              </div>
              <div class="hero-search-meta">
                <a href="#" class="hero-search-toggle" aria-label="Open advanced filters">
                  <i class="fa-light fa-sliders" aria-hidden="true"></i>
                  Advanced Filters
                  <i class="fa-light fa-chevron-down tw:text-xs" aria-hidden="true"></i>
                </a>
                <span class="hero-search-results">
                  <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i>
                  2,400+ career pathways
                </span>
              </div>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="hero-search-field tw:flex-[5]"> — single field spans full pill; last child border-right auto-removed.</code>
          </div>
        </div>
      </div>
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>PATTERN:</strong> Consumer Hero Wash (consumer-only)<br>
            <strong>COMPOSES:</strong> Nothing — pure background treatment.
          </p>
          <p class="tw:mb-0 tw:text-sm">
            Sky-to-white linear gradient for the hero section of consumer pages. Drop on any container without affecting its sizing or padding.
          </p>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Default — 240px tall demonstration</h2>
          <div class="consumer-hero-wash tw:h-[240px] tw:flex tw:items-center tw:justify-center tw:rounded-[8px] tw:border tw:border-neutral-translucent-100">
            <p class="tw:text-neutral-700 tw:text-sm">Container with <code>.consumer-hero-wash</code> background only — no padding or sizing applied by the pattern.</p>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="consumer-hero-wash">...</div></code>
          </div>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Paired with R3c TopNav — chrome-to-content transition</h2>
          <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Visualizes the seam where the TopNav strip ends and the wash begins. The wash starts at <code>--tw-color-secondary-100</code> (the same sky family as the TopNav's <code>#F1FAFE</code> bg) and fades to white at 60%.</p>
          <div class="tw:rounded-[8px] tw:overflow-hidden tw:border tw:border-neutral-translucent-100">
            <nav class="consumer-topnav" aria-label="Consumer search navigation">
              <ul class="consumer-topnav-list">
                <li>
                  <a href="#"
           class="consumer-topnav-item active"
           aria-current="page">
                    <i class="consumer-topnav-item-icon fa-light fa-school" aria-hidden="true"></i>
                    Search Providers
                  </a>
                </li>
                <li>
                  <a href="#"
           class="consumer-topnav-item"
           >
                    <i class="consumer-topnav-item-icon fa-light fa-book-open-cover" aria-hidden="true"></i>
                    Search Courses
                  </a>
                </li>
                <li>
                  <a href="#"
           class="consumer-topnav-item"
           >
                    <i class="consumer-topnav-item-icon fa-light fa-calendar-days" aria-hidden="true"></i>
                    Search Events
                  </a>
                </li>
                <li>
                  <a href="#"
           class="consumer-topnav-item"
           >
                    <i class="consumer-topnav-item-icon fa-light fa-briefcase" aria-hidden="true"></i>
                    Explore Careers
                  </a>
                </li>
              </ul>
            </nav>
            <div class="consumer-hero-wash tw:h-[200px] tw:flex tw:items-center tw:justify-center">
              <h2 class="h3 tw:text-primary-display">Search. Compare. Apply.</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>