website refactor

apps/website/components/shared/Accordion.tsx

@@ -35,7 +35,7 @@ export const Accordion = ({
   };
 
   return (
-    <Surface variant="muted" rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
+    <Surface variant="muted" rounded="lg" border={true} overflow="hidden">
       <Box
         as="button"
         onClick={handleToggle}

apps/website/components/shared/Modal.tsx

@@ -88,16 +88,14 @@ export const Modal = ({
         variant="default" 
         rounded="lg" 
         shadow="xl" 
-        style={{ 
-          width: '100%', 
-          maxWidth: sizeMap[size], 
-          maxHeight: '90vh', 
-          overflow: 'hidden',
-          display: 'flex',
-          flexDirection: 'column',
-          position: 'relative',
-          border: '1px solid var(--ui-color-border-default)'
-        }}
+        width="100%" 
+        maxWidth={sizeMap[size]} 
+        maxHeight="90vh" 
+        overflow="hidden"
+        display="flex"
+        flexDirection="column"
+        position="relative"
+        border={true}
       >
         <Box 
           display="flex"