fix: align sales form colors with website semantic tokens (#2876)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>

Author: felixkrrr

components/ContactSalesForm.tsx

@@ -266,7 +266,7 @@ export function ContactSalesForm() {
                   <span className="text-destructive">*</span>
                 )}
               </FormLabel>
-              <div className="space-y-2 rounded-md border border-input p-3">
+              <div className="space-y-2 rounded-[2px] border border-line-structure p-3">
                 {FORM_FIELDS.enterpriseRequirements.options.map((option) => (
                   <label
                     key={option.value}
@@ -276,7 +276,7 @@ export function ContactSalesForm() {
                       type="checkbox"
                       checked={selectedRequirements.includes(option.value)}
                       onChange={() => toggleRequirement(option.value)}
-                      className="h-4 w-4 rounded border-input"
+                      className="h-4 w-4 rounded-[2px] border-line-structure accent-line-cta"
                     />
                     {option.label}
                   </label>

components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[80px] w-full rounded-[2px] border border-line-structure bg-surface-bg px-3 py-2 text-base text-text-secondary shadow-sm ring-offset-surface-bg placeholder:text-text-disabled focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-line-cta focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       ref={ref}

components/watchOrBookDemo/WatchWalkthroughs.tsx

@@ -18,7 +18,7 @@ function VideoPlayer({ videoId, title }: VideoPlayerProps) {
   return (
     <iframe
       width="100%"
-      className="aspect-[16/9] rounded mt-3"
+      className="aspect-[16/9] rounded-[2px] mt-3"
       src={`https://www.youtube-nocookie.com/embed/${videoId}`}
       title={title}
       frameBorder="0"
@@ -71,7 +71,7 @@ function WatchWalkthroughsInner({ className }: { className?: string }) {
             <TabsContent
               key={tab.id}
               value={tab.id}
-              className="p-4 mx-auto mt-2 max-w-2xl rounded border bg-stripe-pattern"
+              className="relative overflow-visible p-4 mx-auto mt-2 max-w-2xl rounded-none border border-line-structure corner-box-corners bg-stripe-pattern"
             >
               <div className="mb-6">
                 <h3 className="mb-2 text-xl font-semibold">{tab.title}</h3>