feat: display salon rules as bullet points instead of dense paragraphs

Each rule's body text is split into sentences and rendered as a dash
list, matching Mira's request for less dense, easier-to-scan rules.

src/pages/Rules.module.css

@@ -20,9 +20,28 @@
   margin: 0 0 0.35rem;
 }
 
-.section p {
+.points {
   color: var(--color-charcoal);
   margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.points li {
+  position: relative;
+  padding-left: 1rem;
+  margin-bottom: 0.35rem;
+}
+
+.points li:last-child {
+  margin-bottom: 0;
+}
+
+.points li::before {
+  content: '\2013';
+  position: absolute;
+  left: 0;
+  color: var(--color-gold);
 }
 
 .cta {

src/pages/Rules.tsx

@@ -5,6 +5,13 @@ import RuleIcon from '../components/RuleIcon'
 import { fetchRules, type RuleSection } from '../data/rules'
 import styles from './Rules.module.css'
 
+function splitIntoPoints(body: string): string[] {
+  return body
+    .split(/(?<=[.!?])\s+/)
+    .map((sentence) => sentence.trim())
+    .filter(Boolean)
+}
+
 function Rules() {
   const [rules, setRules] = useState<RuleSection[]>([])
   const [error, setError] = useState('')
@@ -31,7 +38,11 @@ function Rules() {
             <RuleIcon iconKey={rule.iconKey} />
             <div>
               <h2>{rule.title}</h2>
-              <p>{rule.body}</p>
+              <ul className={styles.points}>
+                {splitIntoPoints(rule.body).map((point, pointIndex) => (
+                  <li key={pointIndex}>{point}</li>
+                ))}
+              </ul>
             </div>
           </div>
         </ScrollReveal>