From a3ab4a0eba2bde100d790119be8fbba1df9996dd Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Mon, 8 Jun 2026 13:08:35 +0000
Subject: [PATCH] feat: polish recruiter faq and cta

---
 site/src/pages/use-cases/recruiters.astro | 24 +++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/use-cases/recruiters.astro b/site/src/pages/use-cases/recruiters.astro
index c7c11a365..c36e62948 100644
--- a/site/src/pages/use-cases/recruiters.astro
+++ b/site/src/pages/use-cases/recruiters.astro
@@ -615,14 +615,14 @@ const faq: [string, string][] = [
   </section>
 
   <!-- ============================================================
-       FAQ · same animated pattern as product pages, 3 questions
+       FAQ · shared accordion pattern
   ============================================================ -->
   <section class="bg-[color:var(--surface-1)]/40 border-b border-[color:var(--border)] py-20 md:py-24">
     <div class="container-page grid lg:grid-cols-[1fr_1.8fr] gap-12 lg:gap-20 items-start">
       <div class="lg:sticky lg:top-24" style="align-self: start;">
         <div class="text-[11px] uppercase tracking-[0.18em] text-muted-foreground font-mono mb-3">Recruiter FAQ</div>
         <h2 class="text-[28px] md:text-[36px] font-semibold tracking-[-0.025em] leading-[1.08] text-heading">
-          Three questions recruiters ask first.
+          A few questions recruiters ask first.
         </h2>
       </div>
       <div class="divide-y divide-[color:var(--border)]" data-faq>
@@ -631,7 +631,7 @@ const faq: [string, string][] = [
             <button type="button" class="faq-trigger group w-full flex items-start justify-between gap-4 py-3 text-left" aria-expanded="false">
               <span class="text-[15.5px] font-medium text-heading group-hover:text-[#0369a1] transition-colors">{q}</span>
               <span class="faq-icon shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-white ring-1 ring-[color:var(--border)] text-foreground/60 transition-transform duration-300 ease-out">
-                <Icon name="plus" size={12} />
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
               </span>
             </button>
             <div class="faq-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
@@ -664,7 +664,23 @@ const faq: [string, string][] = [
   </section>
 
   <CTA
-    title="Reach candidates from your face, not a shared mailbox."
+    title="Set up a mailbox for each recruiter."
+    description="Connect a mailbox, let it warm up in the premium pool, and send your first candidate emails."
     primaryLabel="Start free trial"
   />
+
+  <!-- Staggered reveal for the workspace suppression list. -->
+  <style is:inline>
+    @keyframes rs1-supp-in {
+      from { opacity: 0.25; transform: translateY(4px); }
+      to   { opacity: 1;    transform: translateY(0); }
+    }
+    .supp-endpoint {
+      animation: rs1-supp-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+      animation-delay: var(--d, 0ms);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .supp-endpoint { animation: none; opacity: 1; transform: none; }
+    }
+  </style>
 </Layout>