Add comprehensive /features page + allow Unsplash imagery

components/app/team-client.tsx

@@ -290,7 +290,7 @@ function BrandingCard({ orgId, branding }: { orgId: string; branding: Branding |
               </div>
             </div>
             {primaryColor.trim() && !previewHsl && (
-              <p className="text-xs text-warning">Enter a 6-digit hex colour (e.g. #116DFF).</p>
+              <p className="text-xs text-warning">Enter a 6-digit hex colour (e.g. #E65100).</p>
             )}
           </div>
           <div className="space-y-2">

components/app/waveform-player.tsx

@@ -85,7 +85,7 @@ export function WaveformPlayer({
     ctx.clearRect(0, 0, w, h);
 
     const styles = getComputedStyle(canvas);
-    const played = `hsl(${styles.getPropertyValue("--brand").trim() || "217 100% 53%"})`;
+    const played = `hsl(${styles.getPropertyValue("--brand").trim() || "21 100% 45%"})`;
     const unplayed = `hsl(${styles.getPropertyValue("--border").trim() || "0 0% 89%"})`;
 
     const n = waveform.length;