From e6f42ea8b6ed63dec438b5805bf055704c27bd51 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 27 Apr 2026 15:51:26 +0000
Subject: [PATCH 1/4] fix: align sales form colors with website semantic tokens

- Update Textarea component to use semantic tokens (border-line-structure,
  bg-surface-bg, ring-line-cta, etc.) instead of old shadcn defaults
  (border-input, bg-background, ring-ring) which resolve to blueish-grey
- Update checkbox container border from border-input to border-line-structure
- Add accent-line-cta to native checkboxes so checked state uses the
  site's CTA color instead of browser-default blue
- Align border-radius to rounded-[2px] to match Input and Select components

Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>
---
 components/ContactSalesForm.tsx | 4 ++--
 components/ui/textarea.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/ContactSalesForm.tsx b/components/ContactSalesForm.tsx
index a54b4b7fde..435778ff01 100644
--- a/components/ContactSalesForm.tsx
+++ b/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>
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index f04a655929..ce520a9079 100644
--- a/components/ui/textarea.tsx
+++ b/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}

From a6b5ab9e4d6ff9e02bae7a916c23f59cdc7d5e52 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 28 Apr 2026 09:20:04 +0000
Subject: [PATCH 2/4] fix: update video embed border to use site semantic
 tokens

- Replace default 'border' (blueish-grey --border variable) with
  'border border-line-structure' on video tab content panels
- Add corner-box-corners for consistent decorative brackets matching
  CTA boxes and other site elements
- Align iframe border-radius to rounded-[2px] for consistency

Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>
---
 components/watchOrBookDemo/WatchWalkthroughs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/watchOrBookDemo/WatchWalkthroughs.tsx b/components/watchOrBookDemo/WatchWalkthroughs.tsx
index 813d9605cd..7834f4b105 100644
--- a/components/watchOrBookDemo/WatchWalkthroughs.tsx
+++ b/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="p-4 mx-auto mt-2 max-w-2xl 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>

From 2933de195b9a5d77bdb6db4c3b4b7cefbd564517 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 28 Apr 2026 09:35:01 +0000
Subject: [PATCH 3/4] fix: scope corner brackets to video card and remove
 bottom radius

- Add 'relative' so corner-box-corners pseudo-element is contained
  within the video card instead of escaping to a page-level ancestor
- Add 'rounded-none' to override the base TabsContent rounded-b-lg
  that caused mismatched bottom border radius

Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>
---
 components/watchOrBookDemo/WatchWalkthroughs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/watchOrBookDemo/WatchWalkthroughs.tsx b/components/watchOrBookDemo/WatchWalkthroughs.tsx
index 7834f4b105..f283d49e96 100644
--- a/components/watchOrBookDemo/WatchWalkthroughs.tsx
+++ b/components/watchOrBookDemo/WatchWalkthroughs.tsx
@@ -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 border border-line-structure corner-box-corners bg-stripe-pattern"
+              className="relative 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>

From 3cddc6cee57c6c823289f57708110e6c18719017 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 28 Apr 2026 09:41:07 +0000
Subject: [PATCH 4/4] fix: make corner brackets visible by overriding
 overflow-hidden

The base TabsContent has overflow-hidden which clips the corner-box-corners
pseudo-element that sits at -1px inset. Add overflow-visible to override.

Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>
---
 components/watchOrBookDemo/WatchWalkthroughs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/watchOrBookDemo/WatchWalkthroughs.tsx b/components/watchOrBookDemo/WatchWalkthroughs.tsx
index f283d49e96..4e3a1edbe8 100644
--- a/components/watchOrBookDemo/WatchWalkthroughs.tsx
+++ b/components/watchOrBookDemo/WatchWalkthroughs.tsx
@@ -71,7 +71,7 @@ function WatchWalkthroughsInner({ className }: { className?: string }) {
             <TabsContent
               key={tab.id}
               value={tab.id}
-              className="relative p-4 mx-auto mt-2 max-w-2xl rounded-none border border-line-structure corner-box-corners 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>