feat(checkout v3): Update step header styling (#97680)

Closes
https://linear.app/getsentry/issue/BIL-1201/update-checkout-step-component
Figma:
https://www.figma.com/design/4ICnO5MHVqkm6JV0TKzf7H/Checkout-Redesign?node-id=2682-35410&t=HhE5uBzZqURJKr0h-1

This just deals with updating the step header styling, not building out
the new steps. Per discussion with @itsdangold, we will not add
collapsible steps right now. [We will also not be porting over the
legacy
toggle](https://sentry.slack.com/archives/C08BMQJ2VFE/p1754683225769579?thread_ts=1754680793.775069&cid=C08BMQJ2VFE).

<img width="268" height="76" alt="Screenshot 2025-08-12 at 11 45 42 AM"
src="https://github.com/user-attachments/assets/c56b0fe1-8f34-4435-bae7-c55642b24e74"
/>

Author: isabellaenriquez

static/gsApp/views/amCheckout/steps/stepHeader.spec.tsx

@@ -87,4 +87,23 @@ describe('StepHeader', () => {
     expect(onEdit).not.toHaveBeenCalled();
     await userEvent.click(screen.getByText(mockTitle));
   });
+
+  it('renders for new checkout', function () {
+    render(
+      <StepHeader
+        isNewCheckout
+        title={mockTitle}
+        stepNumber={stepNumber}
+        onEdit={onEdit}
+        isActive={false}
+        isCompleted={false}
+      />
+    );
+
+    expect(screen.getByText(mockTitle)).toBeInTheDocument();
+    expect(screen.queryByText(`${stepNumber}.`)).not.toBeInTheDocument();
+    expect(screen.queryByTestId('icon-check-mark')).not.toBeInTheDocument();
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Expand section')).not.toBeInTheDocument();
+  });
 });

static/gsApp/views/amCheckout/steps/stepHeader.tsx

@@ -23,6 +23,7 @@ type Props = {
    */
   canSkip?: boolean;
   checkoutTier?: PlanTier;
+  isNewCheckout?: boolean;
   onToggleLegacy?: (tier: string) => void;
   organization?: Organization;
   trailingItems?: React.ReactNode;
@@ -39,17 +40,30 @@ function StepHeader({
   onToggleLegacy,
   checkoutTier,
   organization,
+  isNewCheckout,
 }: Props) {
   const canEdit = !isActive && (isCompleted || canSkip);
   const toggleTier = getToggleTier(checkoutTier);
   const onEditClick = canEdit ? () => onEdit(stepNumber) : undefined;
+  const dataTestId = `header-${kebabCase(title)}`;
+
+  if (isNewCheckout) {
+    return (
+      <Flex justify="between">
+        <NewCheckoutStepTitle id={`step-${stepNumber}`} data-test-id={dataTestId}>
+          {title}
+        </NewCheckoutStepTitle>
+        {trailingItems && <div>{trailingItems}</div>}
+      </Flex>
+    );
+  }
 
   return (
     <Header
       isActive={isActive}
       canEdit={canEdit}
       onClick={onEditClick}
-      data-test-id={`header-${kebabCase(title)}`}
+      data-test-id={dataTestId}
     >
       <Flex justify="between">
         <StepTitle>
@@ -119,3 +133,8 @@ const EditStep = styled('div')`
   gap: ${space(1)};
   align-items: center;
 `;
+
+const NewCheckoutStepTitle = styled('div')`
+  font-size: ${p => p.theme.fontSize['2xl']};
+  font-weight: ${p => p.theme.fontWeight.bold};
+`;