Create a single `/legal` page that contains 5 legal sections as tabs:

1. Privacy Policy
2. Terms and Conditions
3. Refund Policy
4. Cookie Policy
5. Disclaimer

Core requirements:
1. Implement all 5 legal documents in one page (`/legal`) using tabs (not separate pages).
2. Each tab must load/display its own legal content clearly.
3. Keep the layout clean, readable, and consistent with the current design system.
4. Use semantic, rich HTML structure for the content (not plain text blocks only), including:
   - headings (`h1`, `h2`, `h3`)
   - paragraphs
   - ordered/unordered lists
   - tables (if needed)
   - links
   - emphasis/strong text
5. Content must be relevant to the company's actual products/services and business context
   (not generic placeholder text).

Mobile-only Table of Contents (TOC) behavior:
1. Apply this TOC behavior on mobile only (do not change tablet/desktop behavior).
2. Add a sticky Table of Contents that remains accessible while the user scrolls.
3. Use an accordion-style TOC:
   - collapsed by default
   - expand/collapse on tap
   - clear interaction states (default, expanded, focus)
4. Keep the sticky TOC compact so it does not block important content.
5. Ensure users can comfortably read the legal content while the TOC remains available.
6. TOC should reflect the heading structure of the currently active legal tab/section.

Legal/content requirements:
1. Draft all legal content in accordance with relevant Indonesian laws and regulations.
2. Ensure the policies are appropriate for the company's products/services and operational model.
3. Use legally relevant, professional wording (not generic boilerplate only).
4. If there are legal assumptions or missing business details, state them clearly for later
   legal review.
5. Final content should be review-ready, but still treated as draft pending legal validation.

Accessibility and UX requirements:
1. Tab navigation must be keyboard accessible and clearly indicate the active tab.
2. TOC accordion must be keyboard accessible with visible focus states.
3. Maintain readable typography, spacing, and contrast on mobile and desktop.
4. Prevent overlap, clipping, or layout breakage.

Acceptance criteria:
1. `/legal` page contains all 5 legal documents in tab format on a single page.
2. Mobile sticky accordion TOC works consistently for all 5 legal sections.
3. No overlap or layout breakage with header/content/TOC.
4. Tablet and desktop behavior remains unchanged (no mobile TOC behavior applied there).
5. Legal content is structured with semantic HTML and is relevant to the company context.
6. Accessibility is preserved (keyboard focus, labels, readable tap targets, clear active
   states).