# OnlineCoinFlips.com — Global Header Development Prompt

Act as a senior WordPress frontend developer, UI/UX designer, accessibility specialist, and vanilla JavaScript engineer.

Create a complete, premium, modern, responsive, accessible, and production-ready global header for **OnlineCoinFlips.com**.

## Project Context

- Website: OnlineCoinFlips.com
- Homepage: https://onlinecoinflips.com/
- Niche: Online coin flipping and heads-or-tails decision-making
- Primary SEO keyword: coin flip online
- CMS: WordPress
- Theme: Divi
- Integration: WP Coder
- Technologies: HTML5, CSS3, Bootstrap-compatible markup, and vanilla JavaScript
- Icons: Boxicons exclusively
- Typography: Inter
- Maximum inner width: 1350px

## Brand System

Use the official palette:

- Navy: `#464B71` — logo area, navigation, text, and primary structure
- Ocean Blue: `#118AB2` — CTA, active links, and interactive accents
- Mint: `#7CD5C7` — active indicators and subtle highlights
- Soft White: `#F2F2ED` — light surfaces and backgrounds
- White may be used for the main header surface

Maintain accessible contrast for all text, buttons, icons, focus states, and active states.

The design concept is:

**“Simple Navigation, Instant Decisions.”**

The result should feel lightweight, polished, approachable, and purpose-built for a coin-flipping utility. Avoid generic corporate styling, oversized gradients, excessive decoration, glowing effects, and distracting animation.

## Header Structure

Build one global header containing:

- Left: linked website logo
- Center: desktop navigation
- Right: primary CTA

Desktop layout:

**Logo | Navigation | CTA**

Vertically center all elements and maintain balanced spacing.

The outer header may span the viewport, but its inner container must have a maximum width of `1350px` with responsive horizontal padding.

Use the unique root wrapper:

`#ocf-global-header`

Do not create multiple header instances.

## Logo

Display the actual website logo using an editable image `src` placeholder. This is the only permitted placeholder.

Requirements:

- Link to `https://onlinecoinflips.com/`
- Alternative text: `OnlineCoinFlips.com`
- Preserve the natural aspect ratio
- Do not stretch or distort the image
- Do not substitute a fictional logo, generic icon, or placeholder text

Recommended limits:

- Desktop width: approximately 190–220px
- Desktop height: approximately 48–55px
- Mobile width: approximately 150–180px

## Navigation

Use this exact order on desktop and mobile:

1. Home
2. Features
3. About
4. Pricing
5. Blog
6. Contact
7. FAQs
8. Flip a Coin CTA

Use these exact destinations:

- Home: `https://onlinecoinflips.com/`
- Features: `https://onlinecoinflips.com/features`
- About: `https://onlinecoinflips.com/about`
- Pricing: `https://onlinecoinflips.com/pricing`
- Blog: `https://onlinecoinflips.com/blog`
- Contact: `https://onlinecoinflips.com/contact`
- FAQs: `https://onlinecoinflips.com/faqs`

Do not add, remove, reorder, or randomly shuffle the links. Do not create dropdown menus.

Desktop navigation should use:

- Inter
- Approximately 14–15px font size
- Medium font weight
- Navy text
- Comfortable spacing
- Subtle hover transitions
- Visible keyboard focus styles
- A restrained underline or bottom indicator for the active page

## Primary CTA

CTA text:

**Flip a Coin**

Destination:

`https://onlinecoinflips.com/`

Place it immediately after FAQs.

Style it with:

- Ocean-blue background
- Accessible contrasting text
- Approximately 10–12px border radius
- Comfortable padding
- Medium or semibold typography
- A valid Boxicons coin icon such as `bx-coin-stack`
- Subtle hover elevation
- Visible keyboard focus
- Restrained transitions

On mobile, place the CTA after FAQs inside the expanded menu and make it prominent and easy to tap.

Do not create another coin-flipping tool or invent an unverified anchor ID.

## Active-Page Detection

Automatically identify the active page with vanilla JavaScript.

Requirements:

- Use `window.location.pathname`
- Normalize trailing slashes
- Handle `/` as the homepage
- Use exact matching for the established navigation paths
- Do not mark Home active on unrelated pages
- Keep Blog active on article pages only when the site’s URL structure reliably identifies them as blog content
- Apply `aria-current="page"` to the active link
- Apply the active state on page load
- Use ocean-blue text plus a mint underline or indicator
- Do not communicate the active state through color alone

## Mobile Navigation

At the responsive breakpoint, replace the desktop menu with:

**Logo | Hamburger button**

Use a real button and Boxicons exclusively:

- Closed icon: `bx-menu`
- Open icon: `bx-x`

The mobile menu must:

1. Open when the toggle is activated.
2. Close when the toggle is activated again.
3. Close when a navigation link is selected.
4. Close when Escape is pressed.
5. Close when the user clicks outside the menu.
6. Close when the viewport returns to desktop width.
7. Avoid duplicate event listeners.
8. Preserve keyboard navigation.
9. Preserve the active-page indicator.
10. Restore focus to the toggle when appropriate.

Provide:

- `aria-label`
- `aria-expanded`
- `aria-controls`
- Visible focus styles
- Correct hidden-state behavior
- No focusable hidden controls
- No keyboard traps

Use a standard disclosure menu unless a modal overlay is genuinely necessary. Do not add focus trapping to a normal disclosure panel.

Use a lightweight fade, slide, or expansion transition and respect `prefers-reduced-motion`.

The mobile menu should use:

- White or soft-white background
- Navy navigation text
- Ocean-blue active states
- Subtle dividers
- Comfortable vertical spacing
- Rounded panel corners where appropriate
- CTA after FAQs
- Reliable stacking above page content

## Responsive Behavior

Large desktop, 1200px and wider:

- Logo on the left
- Seven centered navigation links
- CTA on the right

Small desktop and tablet:

- Switch to the hamburger layout when the complete navigation no longer fits comfortably
- Do not compress all seven links into an overcrowded row

Mobile, 320px–767px:

- Left-aligned logo
- Right-aligned hamburger
- Collapsible navigation
- Prominent mobile CTA
- No horizontal overflow
- No clipped or overlapping content
- Comfortable touch targets

Verify behavior at:

- 320px
- 375px
- 414px
- 768px
- 1024px
- 1280px
- 1440px

## Header Positioning

The header must work naturally within WordPress and Divi.

Do not introduce a second sticky-header system when Divi already controls sticky positioning.

If custom sticky behavior is implemented:

- Scope it to `#ocf-global-header`
- Respect the WordPress admin bar
- Keep header height stable
- Prevent page-content overlap and layout shifts
- Avoid unnecessary scroll listeners

A subtle shadow or surface adjustment after scrolling is acceptable if implemented efficiently. Do not automatically hide the header while scrolling.

## WordPress, Divi, and WP Coder Isolation

Suggested classes include:

- `ocf-header-inner`
- `ocf-header-logo`
- `ocf-header-nav`
- `ocf-header-menu`
- `ocf-header-link`
- `ocf-header-cta`
- `ocf-header-toggle`
- `ocf-header-mobile`
- `ocf-header-active`

Scope every custom selector beneath:

`#ocf-global-header`

Never use unscoped selectors targeting:

- `body`
- `html`
- `header`
- `nav`
- `a`
- `button`
- `img`
- `.container`
- `.row`
- `.btn`
- `.menu`
- `.et_pb_menu`
- `.et-l`
- `.mobile_menu_bar`

Do not override Divi’s global typography, navigation, buttons, responsive rules, or default WordPress elements.

Use an isolated IIFE or equivalent JavaScript pattern:

- No global variables
- No unnecessary dependencies
- No duplicate listeners
- No unsafe global event behavior
- Scope DOM queries to `#ocf-global-header`
- Handle missing elements safely
- Prevent repeated initialization
- Do not interfere with Divi scripts
- Do not use `document.currentScript` or `previousElementSibling` to locate the root
- Do not override `window.dispatch` or `Event.prototype`

Place the header in the WordPress/Divi global header area. Do not insert it as an additional page-level header. If the default Divi header remains enabled, configure the theme layout so only the intended global header appears. Do not hide Divi or WordPress elements through unsafe global CSS.

## Icons and Typography

Use Boxicons exclusively. Do not use Font Awesome, Bootstrap Icons, inline icon substitutes, or another icon library.

Do not load Boxicons more than once if the site already provides it.

Use Inter throughout the component without duplicating an existing font load.

Recommended dimensions:

- Desktop navigation: 14–15px
- CTA: 14–15px
- Mobile links: 16px
- Desktop header height: approximately 76–88px
- Mobile header height: approximately 64–72px

Allow the exact dimensions to adapt to the logo and available space.

## Accessibility

Ensure:

- Semantic header and navigation markup
- Accessible logo link
- Meaningful logo alternative text
- Keyboard-operable controls
- Correct ARIA attributes
- Correct `aria-current="page"` handling
- Visible focus indicators
- Accessible contrast
- Escape-key support
- Focus restoration
- Reduced-motion support
- No keyboard traps
- No hidden focusable navigation when the mobile menu is closed
- Mouse, touch, and keyboard compatibility

## Performance

Keep the component lightweight:

- Use Flexbox or CSS Grid
- Use vanilla JavaScript only
- Avoid duplicate Bootstrap, Boxicons, and font loads
- Avoid unnecessary DOM manipulation
- Avoid unnecessary scroll listeners
- Use efficient mobile transitions
- Prevent layout shifts
- Reserve appropriate logo dimensions
- Do not create multiple header instances

## Content Restrictions

Do not include:

- Placeholder navigation links
- Broken or invented URLs
- Fictional social links
- Reviews or testimonials
- Ratings
- Trust badges
- Fabricated statistics or claims
- Dropdown menus
- Dummy buttons
- Nonfunctional controls
- Duplicate headers
- Lorem ipsum
- Unfinished content
- Placeholders other than the editable logo image source

## Required Verification

Before delivery, verify that:

1. The logo exists, has an editable source, and links to the homepage.
2. Navigation order is exactly Home, Features, About, Pricing, Blog, Contact, FAQs.
3. The Flip a Coin CTA appears immediately after FAQs.
4. Every URL is correct.
5. Desktop alignment remains balanced.
6. The mobile menu opens and closes correctly.
7. Link selection closes the mobile menu.
8. Escape closes the mobile menu.
9. An outside click closes the mobile menu.
10. Desktop resizing closes and resets the mobile menu.
11. Active-page detection works correctly.
12. `aria-current="page"` is applied only to the correct link.
13. All controls are keyboard-accessible.
14. Boxicons are used exclusively.
15. Inter and the official colors are used.
16. The inner maximum width is 1350px.
17. All CSS is isolated beneath `#ocf-global-header`.
18. JavaScript is isolated and safely initialized.
19. No global Divi or WordPress elements are modified.
20. The component does not duplicate the Divi header.
21. The layout works from 320px through large desktops.
22. No horizontal overflow occurs.
23. Reduced-motion preferences are respected.
24. The implementation is accessible, lightweight, polished, and publication-ready.

## Delivery Requirements

When implementation is requested, return the entire header as one self-contained HTML/CSS/vanilla JavaScript solution suitable for the WordPress/Divi global header area through WP Coder.

The implementation must use:

- The official brand colors
- Inter
- An editable logo image source
- The exact required navigation order and URLs
- The Flip a Coin CTA immediately after FAQs
- A fully functional mobile disclosure menu
- Automatic active-page highlighting
- Boxicons exclusively
- A 1350px maximum inner width
- CSS and JavaScript scoped to `#ocf-global-header`

Do not generate the implementation until coding is explicitly requested.
# OnlineCoinFlips.com — Terms & Conditions Page Development Prompt

Create a complete, premium, professional, SEO-friendly, accessible, and fully responsive Terms & Conditions page for OnlineCoinFlips.com.

This is a development specification only. Do not generate HTML, CSS, or JavaScript when responding to this prompt unless implementation is explicitly requested in a later request.

## Project information

- Website: OnlineCoinFlips.com
- Website URL: https://onlinecoinflips.com/
- Terms URL: https://onlinecoinflips.com/terms
- Website purpose: Online heads-or-tails coin-flipping and decision-making utility
- Focus keyword: terms and conditions
- CMS: WordPress
- Theme: Divi
- Integration: WP Coder
- Frontend: HTML5, CSS3, Bootstrap-compatible markup, and vanilla JavaScript
- Icon library: Boxicons exclusively
- Typography: Inter
- Maximum inner width: 1350px
- Support email: support@onlinecoinflips.com

## Brand system

Use the following official palette:

- Navy `#464B71`: headings, legal navigation, and dark panels
- Ocean Blue `#118AB2`: links, active states, buttons, and interactive elements
- Mint `#7CD5C7`: restrained accents and icons
- Soft White `#F2F2ED`: page and light-section backgrounds
- White: primary legal-document surfaces

Maintain sufficient contrast. Use dark text on light backgrounds and white or near-white text on navy backgrounds.

## Design direction

Use the theme:

“Clear Terms. Straightforward Use.”

The page should resemble a polished editorial legal document—not a sales landing page. Prioritize readability, transparency, accessible navigation, comfortable line lengths, and clear hierarchy.

Use:

- Soft-white page background
- White document surfaces
- Navy headings
- Ocean-blue links
- Mint accents
- Thin borders and dividers
- Rounded corners
- Minimal shadows
- Generous but controlled whitespace
- Lightweight Boxicons
- Subtle circular decorative elements

Avoid excessive gradients, large illustrations, promotional statistics, fabricated trust indicators, reviews, testimonials, ratings, seals, badges, or distracting animation.

Do not create a header, footer, global navigation, or another functional coin-flipping tool.

## Required page structure

Create these sections in order:

1. Terms & Conditions Introduction
2. Overview and Acceptance of Terms
3. Interactive Table of Contents
4. About OnlineCoinFlips.com
5. Use of the Online Coin-Flipping Tool
6. Acceptable Use and User Responsibilities
7. Coin Flip Results and Randomness
8. Informational and Recreational Use
9. Website Content and Intellectual Property
10. Pricing and Paid Services
11. Third-Party Websites and Links
12. Website Availability and Changes
13. Disclaimer of Warranties
14. Limitation of Liability
15. Privacy and Personal Information
16. Changes to These Terms & Conditions
17. Applicable Law and Legal Rights
18. Contact Us About These Terms
19. Continue Exploring OnlineCoinFlips.com

Use exactly one H1 and a logical H2/H3 hierarchy.

## Introduction

Eyebrow:

“WEBSITE TERMS OF USE”

H1:

“Terms & Conditions”

Supporting copy:

“These Terms & Conditions explain the rules and important information associated with accessing and using OnlineCoinFlips.com, including its online coin-flipping tool and website content.”

Additional copy:

“Please read these terms to understand the intended use of the website, relevant responsibilities, and important limitations.”

Do not display an effective date or revision date unless the website owner supplies a genuine date. Never generate or update legal dates automatically.

## Overview and Acceptance of Terms

Explain that these terms and conditions govern access to and use of OnlineCoinFlips.com.

State that the website offers an online heads-or-tails coin-flipping experience and related informational content. Explain that the terms establish expectations, responsibilities, and relevant limitations.

If describing use as acceptance, do so carefully. Do not imply that every visitor checked a box, signed a contract, or completed an explicit consent process.

Present this section in a clean introductory panel with a subtle navy border and an appropriate Boxicon.

## Interactive Table of Contents

Use a two-column legal-document layout on desktop:

- Left: compact, optionally sticky Table of Contents
- Right: main legal content with a comfortable reading width

On mobile, place the contents before the document. An accessible expandable contents panel may be used.

Include working links to:

1. About the Website
2. Coin-Flipping Tool
3. Acceptable Use
4. Coin Flip Results
5. Informational Use
6. Intellectual Property
7. Pricing and Paid Services
8. Third-Party Links
9. Website Availability
10. Warranty Disclaimer
11. Liability
12. Privacy
13. Changes to Terms
14. Applicable Law
15. Contact Information

Requirements:

- Unique section IDs
- Working anchors
- Header-aware scroll offset
- Smooth scrolling when motion is permitted
- Reduced-motion support
- Visible keyboard focus
- Keyboard-accessible navigation
- Active-section highlighting if implemented
- No broken links or duplicate IDs
- Boxicons used only as supporting navigation cues

## About OnlineCoinFlips.com

Explain that OnlineCoinFlips.com centers on an online coin-flipping tool. Visitors may use heads or tails for simple decisions, casual games, friendly tiebreakers, and educational probability examples. The website may also offer related informational content.

Do not describe the website as a licensed gambling platform, regulated financial service, certified randomness provider, professional advisory service, or accredited educational institution.

Do not invent result history, custom coins, dashboards, accounts, APIs, or other unconfirmed features.

## Use of the Online Coin-Flipping Tool

Explain that the tool provides a digital heads-or-tails experience.

When visitors use a flip to choose between two options, they should assign one option to heads and the other to tails before initiating the flip.

Clarify that:

- The website does not make decisions on a visitor’s behalf.
- Visitors determine how to interpret and apply an outcome.
- Visitors remain responsible for resulting decisions.

Do not promise unlimited use, API access, integrations, commercial licensing, result storage, account functionality, advanced settings, or a guaranteed outcome distribution.

A small static heads-and-tails visual may be included if it improves understanding, but do not build a second interactive coin-flipping tool.

## Acceptable Use and User Responsibilities

Explain concisely that visitors should:

- Use the website lawfully.
- Avoid disrupting, damaging, or degrading its operation.
- Avoid unauthorized attempts to access website systems.
- Avoid malicious automated requests.
- Respect the website’s content and functionality.
- Avoid conduct that interferes with other visitors or website operations.

Do not invent rate limits, quotas, accounts, suspension procedures, monitoring practices, or specific enforcement systems.

## Coin Flip Results and Randomness

Explain that an ideal fair coin has a theoretical probability of:

- Heads: 50%
- Tails: 50%

Clarify that repeated outcomes are possible and short sequences are not required to contain equal numbers of heads and tails.

Use measured language such as:

“The theoretical probability of heads and tails for a fair coin is 50% for each outcome. Actual digital outcomes depend on the implementation of the tool, and individual results or short sequences should not be interpreted as guarantees of a particular distribution.”

Do not claim that the implementation is independently verified, perfectly unbiased, cryptographically secure, certified, or suitable for high-stakes use.

Explain that visitors must decide whether a coin-flip outcome is appropriate for their intended purpose.

Use a compact educational panel with balanced Heads and Tails labels and subtle mint accents. Do not add fairness or randomness badges.

## Informational and Recreational Use

Explain that coin flipping is commonly used for:

- Casual games
- Friendly tiebreakers
- Low-stakes choices
- Educational probability examples

Clarify that results and general website content are not substitutes for professional advice.

Advise visitors to use appropriate information and judgment for medical, financial, legal, safety-related, and other high-impact personal or business decisions.

Do not claim suitability for gambling, betting, regulated lotteries, financial transactions, or legally binding decisions.

## Website Content and Intellectual Property

Explain that text, designs, graphics, and other website materials may be protected under applicable intellectual-property laws.

Describe reasonable restrictions on unauthorized reproduction, redistribution, and misuse, while acknowledging applicable legal rights, exceptions, and third-party licenses.

Do not invent trademark or copyright registrations, patents, or exclusive ownership of every site element.

Do not claim ownership of WordPress, Divi, Boxicons, or other third-party components.

## Pricing and Paid Services

Accurately acknowledge the published pricing structure:

- Free: listed at $0 with a homepage CTA
- Premium monthly: $20
- Premium annual original total: $240
- Annual discount: 30%
- Discounted annual price: $168
- Annual savings: $72
- Effective monthly equivalent: $14, billed annually
- Premium CTA: directs visitors to the Contact page
- Custom: custom pricing through a contact-based inquiry

Link descriptively to:

https://onlinecoinflips.com/pricing

Explain that visitors may review published options and contact the website about Premium or Custom arrangements.

Clearly state that the available specification does not establish Premium entitlements, checkout procedures, payment methods, activation, renewal, cancellation, refunds, taxes, trials, or related commercial terms.

Do not imply that selecting Premium immediately purchases or activates a subscription.

If binding paid-service terms are needed, the actual commercial arrangements must be established before publication.

Do not recreate full pricing cards.

## Third-Party Websites and Links

Explain that the website may link to external resources and that third-party websites operate under their own terms, policies, and practices.

Clarify that external websites and services are not necessarily controlled by OnlineCoinFlips.com.

Do not invent partnerships, affiliations, advertising relationships, sponsorships, or integrations.

## Website Availability and Changes

Explain that features and content may be updated, modified, interrupted, or removed over time.

Mention that availability may be affected by maintenance, technical issues, updates, or circumstances outside the website’s control.

Do not guarantee uptime, uninterrupted access, permanent feature availability, maintenance notices, restoration schedules, monitoring systems, or service levels.

## Disclaimer of Warranties

Explain in measured language that online services can experience errors, interruptions, inaccurate information, or unexpected behavior.

Do not guarantee:

- Error-free operation
- Continuous access
- Perfectly unbiased outcomes
- Suitability for every purpose
- Complete accuracy of every informational resource

Any disclaimer must respect non-excludable rights under applicable law. Do not claim that all warranties or consumer protections are universally eliminated.

## Limitation of Liability

Explain that visitors should exercise judgment when interpreting and relying on coin-flip results.

Use measured language such as:

“Visitors should consider whether a coin-flip outcome is appropriate for their intended use. Any applicable limitations of responsibility are subject to the laws and rights that govern the circumstances.”

Do not invent a liability cap, universal waiver, mandatory arbitration, blanket damages exclusion, or waiver of statutory rights.

Do not state that OnlineCoinFlips.com can never be responsible under any circumstances.

## Privacy and Personal Information

Explain that privacy-related practices associated with visiting or contacting OnlineCoinFlips.com are addressed in the Privacy Policy.

Link descriptively to:

https://onlinecoinflips.com/privacy

Do not claim that no personal data or cookies are collected, all information is encrypted, no information is shared, or all data is automatically deleted unless verified.

Do not duplicate the full Privacy Policy.

## Changes to These Terms & Conditions

Explain that the terms and conditions may be revised to reflect changes in website functionality, business practices, or applicable requirements.

Do not invent a notice period, email-notification process, revision schedule, individual-notice requirement, or universal automatic acceptance of future changes.

Do not automatically generate or update a revision date.

## Applicable Law and Legal Rights

Explain that relevant laws, legal requirements, visitor rights, and obligations may differ according to location and circumstances.

Do not invent:

- A governing country or state
- Exclusive governing law
- A court or venue
- An arbitration forum
- A dispute-resolution authority
- A registered business location

Mention that a specific governing-law provision may be added after the website owner establishes the relevant facts and obtains appropriate legal review.

## Contact Us About These Terms

Use this supporting copy:

“If you have questions about these Terms & Conditions or the use of OnlineCoinFlips.com, you can contact us using the information below.”

Display:

- Website: OnlineCoinFlips.com
- Email: support@onlinecoinflips.com
- Email link: mailto:support@onlinecoinflips.com
- Contact page: https://onlinecoinflips.com/contact

Primary button:

- Label: Contact Us
- Destination: https://onlinecoinflips.com/contact

Present the details in a premium contact panel with a navy heading, ocean-blue button, mint accents, appropriate Boxicon, rounded corners, restrained shadow, and comfortable padding.

Do not invent a telephone number, address, legal representative, or response-time guarantee.

## Final Navigation CTA

Heading:

“Continue Exploring OnlineCoinFlips.com”

Supporting copy:

“Return to the homepage to use the coin-flipping tool or learn more about the website and its features.”

Primary CTA:

- Label: Flip a Coin Online
- Destination: https://onlinecoinflips.com/

Secondary CTA:

- Label: Explore Features
- Destination: https://onlinecoinflips.com/features

Use an understated navy panel with white text, an ocean-blue primary button, mint accents, rounded corners, and subtle circular decoration.

Do not add another coin-flipping tool.

## SEO requirements

Recommended SEO title:

“Terms and Conditions | OnlineCoinFlips.com”

Recommended meta description:

“Read the terms and conditions for OnlineCoinFlips.com, including website usage, coin flip results, user responsibilities, content, and legal information.”

Requirements:

- Use the exact focus keyword “terms and conditions” naturally.
- Include it in the SEO title and meta description.
- Use exactly one H1: “Terms & Conditions.”
- Maintain logical H2 and H3 hierarchy.
- Avoid keyword stuffing.
- Keep essential content in the initial HTML.
- Do not generate misleading structured data.
- Use descriptive internal-link text.

Approved internal URLs:

- Homepage: https://onlinecoinflips.com/
- About: https://onlinecoinflips.com/about
- Features: https://onlinecoinflips.com/features
- Pricing: https://onlinecoinflips.com/pricing
- Contact: https://onlinecoinflips.com/contact
- FAQs: https://onlinecoinflips.com/faqs
- Privacy Policy: https://onlinecoinflips.com/privacy

Do not invent other legal or service pages.

## Technical implementation requirements

If code is requested later, deliver one self-contained implementation suitable for WP Coder, with HTML, scoped CSS, and isolated vanilla JavaScript.

Do not include `html`, `head`, or `body` elements. Do not create a WordPress header, footer, or global navigation.

Use this exact unique wrapper:

`#ocf-terms-page`

Suggested class prefixes:

- `ocf-terms-intro`
- `ocf-terms-overview`
- `ocf-terms-layout`
- `ocf-terms-toc`
- `ocf-terms-content`
- `ocf-terms-section`
- `ocf-terms-note`
- `ocf-terms-contact`
- `ocf-terms-cta`

Use Bootstrap-compatible markup without requiring Bootstrap JavaScript.

### CSS isolation

Scope every custom rule beneath `#ocf-terms-page`.

Never use unscoped selectors targeting:

- `html`
- `body`
- Heading elements
- Paragraphs
- Anchors
- Buttons
- Lists
- `.container`
- `.row`
- `.card`
- `.btn`
- `.et_pb_*`

Do not alter Divi’s global typography, navigation, buttons, spacing, or modules. Avoid unnecessary `!important`.

Keep the root wrapper `position: relative`; never make it fixed or absolute and do not use a negative top margin.

### JavaScript isolation

Use an IIFE or equivalent isolated initialization pattern.

- Query the wrapper directly using `#ocf-terms-page`.
- Scope DOM queries and interactions to the wrapper.
- Do not create global variables.
- Do not use `document.currentScript` or `previousElementSibling` to locate the root.
- Do not override browser event APIs or assign `window.dispatch`.
- Avoid document- or window-level listeners that affect unrelated page content.
- Prevent duplicate initialization and event handlers.
- Handle missing elements safely.
- Respect reduced-motion preferences.
- Implement accessible contents navigation and active-section highlighting if included.
- Do not use jQuery or other JavaScript frameworks.

### Icons

Use Boxicons exclusively where icons improve comprehension or navigation.

Do not use Font Awesome, Bootstrap Icons, inline icons from unrelated libraries, or duplicate icon-library loading.

## Responsive requirements

Desktop, 1024px and wider:

- Maximum inner width of 1350px
- Two-column contents-and-document layout
- Optional sticky contents navigation
- Comfortable legal-text width and spacing

Tablet, 768px–1023px:

- Adjust sidebar and content proportions
- Preserve readable line lengths
- Reduce excessive whitespace
- Avoid cramped columns

Mobile, 320px–767px:

- Single-column layout
- Contents navigation before the document
- Responsive headings
- Comfortable body line height
- Accessible tap targets
- Compact contact panel
- Stacking CTA buttons where needed
- No horizontal overflow

Test at:

- 320px
- 375px
- 414px
- 768px
- 1024px
- 1280px
- 1440px

## Typography

Use Inter, reusing the site’s existing font loading where available.

Recommended sizes:

- H1: approximately 42–52px desktop, fluidly reduced on small screens
- H2: approximately 26–34px
- H3: approximately 18–22px
- Body: approximately 15–17px
- Contents links: approximately 14–15px
- Labels: approximately 12–14px
- Body line height: approximately 1.65–1.8

Maintain readable line lengths, consistent paragraph spacing, and clear vertical rhythm.

## Accessibility

Ensure:

- Semantic HTML5
- Exactly one H1
- Logical heading hierarchy
- Accessible contents navigation
- Correct anchor destinations
- Visible keyboard focus states
- Strong color contrast
- Comfortable tap targets
- Reduced-motion support
- Meaningful accessible labels
- Decorative graphics hidden from assistive technology
- No keyboard traps
- No controls that appear interactive without functioning
- No information communicated only through color or icons

## Performance

Keep the implementation lightweight.

- Prefer CSS Grid and Flexbox.
- Use minimal vanilla JavaScript.
- Avoid animation libraries and unnecessary dependencies.
- Prevent layout shifts.
- Avoid loading duplicate fonts or icons.
- Use efficient DOM operations.
- Maintain smooth mobile scrolling.
- Remain compatible with WordPress caching and optimization plugins.

## Legal accuracy restrictions

Do not invent:

- A registered company or legal entity
- Registration details
- Headquarters or physical address
- Governing jurisdiction
- Court venue
- Arbitration requirements
- Minimum user age
- Account requirements
- Billing workflows
- Refund or cancellation policies
- Automatic renewals
- Payment processors
- Taxes or transaction fees
- Service-level guarantees
- Verified or certified randomness
- Proprietary technologies
- Security certifications
- Copyright or trademark registrations
- Liability caps
- Legal approval or attorney-review claims

Do not include placeholders, fabricated statistics, reviews, testimonials, ratings, seals, badges, fictional dates, incomplete sections, or “coming soon” language.

If a provision depends on an unknown legal, operational, or commercial fact, omit the unsupported detail and identify it separately for the website owner to resolve before publication.

## Owner decisions required before publication

Flag these unresolved matters outside the visitor-facing legal copy:

- Whether and when paid Premium services will become operational
- Premium entitlements and fulfillment arrangements
- Checkout, payment, renewal, cancellation, and refund terms
- Any genuine effective or revision date
- Governing-law and dispute-resolution provisions
- Any website practices that must align with the Privacy Policy

Do not convert these unresolved matters into placeholders within the page.

## Final quality assurance

Before delivery, verify:

- Exactly one H1 is present.
- “Terms and conditions” appears naturally in the title, meta description, and content.
- Every required section is included once.
- All Table of Contents anchors work.
- IDs are unique.
- Active navigation works if implemented.
- Probability explanations are accurate.
- No unsupported randomness claim appears.
- No unconfirmed website feature is introduced.
- Pricing figures match the supplied specification.
- No invented payment, renewal, refund, or cancellation policy appears.
- No governing jurisdiction, arbitration clause, or liability cap is invented.
- The Privacy Policy, Pricing, Contact, Homepage, and Features links are correct.
- The support email is correct.
- Only Boxicons are used.
- All CSS is scoped to `#ocf-terms-page`.
- JavaScript is isolated and safely initialized.
- Divi and WordPress global elements remain unaffected.
- No header or footer is generated.
- The page is readable at all required viewport widths.
- No horizontal overflow occurs.
- Keyboard and reduced-motion behavior are supported.
- No placeholders, badges, testimonials, fabricated statistics, or misleading legal claims appear.
- The result is visually polished and technically production-ready without presenting unresolved legal facts as established.