# OnlineCoinFlips.com Pricing Page — Development Prompt

Act as a senior WordPress frontend architect, SaaS pricing strategist, UI/UX designer, SEO specialist, accessibility specialist, and vanilla JavaScript engineer.

Create a complete, visually distinctive, responsive, accessible, and production-ready pricing page for **OnlineCoinFlips.com**.

## Project Requirements

- Website: OnlineCoinFlips.com
- Domain: https://onlinecoinflips.com/
- CMS: WordPress
- Theme: Divi
- Integration: WP Coder
- Frontend: HTML5, CSS3, Bootstrap-compatible markup, vanilla JavaScript
- Icons: Boxicons exclusively
- Typography: Inter
- Maximum inner width: 1350px
- Support email: support@onlinecoinflips.com
- SEO focus keyword: coin flip online pricing

Do not generate a WordPress header, navigation, footer, checkout, or coin-flipping interface.

## Brand System

Use these official colors:

- Navy: `#464B71`
- Ocean Blue: `#118AB2`
- Mint: `#7CD5C7`
- Soft White: `#F2F2ED`
- White may be used for card surfaces.

Maintain accessible contrast. Use dark text on light surfaces and white or near-white text on dark surfaces.

## Pricing Configuration

Create exactly three plans:

1. Free — `$0`
2. Premium — `$20/month` or `$168/year`
3. Custom — `Custom Pricing`

Premium annual pricing must be calculated from a central JavaScript configuration:

- Monthly price: `20`
- Annual discount: `30`
- Currency: `USD`
- Original annual total: `$240`
- Annual discount amount: `$72`
- Discounted annual total: `$168`
- Effective monthly equivalent: `$14`

Never present `$14` as an amount charged monthly. Clearly state that the annual plan is billed as one `$168` yearly payment.

## Product-Accuracy Rules

Do not invent plan entitlements, limits, account requirements, integrations, support levels, service guarantees, commercial rights, customization features, downloads, analytics, saved results, API access, or billing policies.

Do not claim that Custom includes development, integrations, dedicated support, enterprise services, or special access.

Use **Featured Plan** for Premium. Do not use “Most Popular.”

Exclude unconfirmed entitlements from the publication-ready interface.

## Page Structure

Create these sections in order:

1. Pricing introduction
2. Monthly/Yearly billing selector
3. Three pricing cards
4. Premium pricing breakdown
5. Plan comparison
6. Plan-selection guide
7. Annual Premium pricing benefits
8. Billing transparency
9. Pricing FAQs
10. Final CTA

## 1. Pricing Introduction

Eyebrow:

**SIMPLE PRICING OPTIONS**

H1:

**Online Coin Flip Pricing**

Description:

“Compare the Free, Premium, and Custom pricing options for OnlineCoinFlips.com. Review the available pricing information and choose how you'd like to get started or make an inquiry.”

Supporting note:

“Premium is available with monthly pricing or a discounted annual billing option.”

Use a premium editorial layout with a soft-white background, navy heading, ocean-blue eyebrow, restrained mint accents, balanced whitespace, and subtle coin-inspired circular outlines.

## 2. Billing Selector

Heading:

**Choose Your Billing Period**

Description:

“Compare Premium's monthly price with its discounted annual billing option.”

Provide an accessible pill-shaped segmented control with:

- Monthly
- Yearly
- Monthly selected by default

Changing the selection must instantly synchronize every relevant Premium price display without reloading the page.

Monthly state:

- `$20`
- `/month`
- “Billed monthly”

Yearly state:

- `$168/year`
- `$240/year` struck through
- `30% OFF`
- “Save $72 annually”
- “Equivalent to $14/month”
- “Billed annually as one $168 payment”

Requirements:

- Keyboard operability
- Correct ARIA states
- Visible active and focus states
- No layout shifting
- Restrained transitions
- Reduced-motion support
- Free and Custom prices remain unchanged

## 3. Pricing Cards

Heading:

**Find the Right Pricing Option**

Description:

“Start with the Free option, review Premium billing, or contact OnlineCoinFlips.com to discuss a custom request.”

Show exactly three equal-width desktop cards in this order:

**Free | Premium | Custom**

Premium must be centered and visually emphasized. Adapt gracefully for tablets and stack in the same order on mobile.

### Free

- Plan: **Free**
- Price: **$0**
- Billing label: **Free**
- Tagline: **Start with the coin flip tool**
- Best for: **Everyday Coin Tosses**

Description:

“Visit OnlineCoinFlips.com to use the existing coin-flipping experience for simple heads-or-tails decisions.”

Include only:

- Access to the existing homepage coin-flip experience
- Heads-or-tails decision-making
- Homepage access
- General website information and resources

CTA:

- Label: **Get Started Free**
- URL: https://onlinecoinflips.com/

### Premium

- Plan: **Premium**
- Badge: **Featured Plan**
- Tagline: **Monthly or Annual Pricing**
- Best for: **Premium Pricing Inquiries**

Description:

“Premium offers a choice between monthly billing and a discounted annual price. Review the billing details and contact OnlineCoinFlips.com for information about Premium access and included capabilities.”

Show the synchronized monthly or yearly pricing state.

Include only:

- Monthly billing option
- Annual billing option
- 30% annual discount
- $72 savings compared with twelve monthly payments
- Contact-based Premium inquiry

CTA:

- Label: **Choose Premium**
- URL: https://onlinecoinflips.com/contact

The CTA must always lead to the Contact page. Do not create checkout behavior.

### Custom

- Plan: **Custom**
- Price: **Custom Pricing**
- Tagline: **Discuss Your Requirements**
- Best for: **Specific Website Requirements**

Description:

“Have a specific request related to OnlineCoinFlips.com? Contact us to describe your requirements and ask whether a suitable arrangement is available.”

Include only:

- Contact-based inquiry
- Opportunity to describe requirements
- Individual discussion of a request
- No fixed public price established

CTA:

- Label: **Contact Us**
- URL: https://onlinecoinflips.com/contact

## 4. Premium Pricing Breakdown

Heading:

**How Premium Pricing Works**

Description:

“Premium has a monthly price of $20 and an annual option that reduces the total cost compared with paying monthly for twelve months.”

Display:

- Monthly billing: “$20 per month, or $240 over twelve monthly payments.”
- Annual billing: “$168 for one year with the 30% annual discount applied.”
- Annual savings: “Choosing the annual price saves $72 compared with twelve payments of $20.”
- Monthly equivalent: “The annual price works out to $14 per month when divided across twelve months, but the full $168 is billed annually.”

Use the central JavaScript configuration for every calculated amount.

## 5. Plan Comparison

Heading:

**Compare Free, Premium, and Custom**

Description:

“Review the confirmed pricing and contact options for each plan.”

Create an accessible comparison table containing only:

| Detail | Free | Premium | Custom |
|---|---|---|---|
| Price | $0 | $20/month or $168/year | Custom Pricing |
| Annual discount | Not applicable | 30% | Not specified |
| Annual savings | Not applicable | $72 | Not specified |
| Getting started | Homepage | Contact page | Contact page |
| Primary purpose | Coin-flip access | Premium inquiry | Specific requirements inquiry |

Use correct row and column associations. On narrow screens, allow scrolling inside the table container without causing whole-page overflow.

## 6. Plan-Selection Guide

Heading:

**Which Pricing Option Should You Choose?**

Description:

“Your next step depends on whether you want to use the existing coin flip tool or ask about a pricing arrangement.”

Include three concise steps:

1. **Start with Free**  
   “Choose Free to visit the homepage and use the existing heads-or-tails experience.”  
   CTA: **Get Started Free**

2. **Ask About Premium**  
   “Choose Premium if you're interested in the published monthly or annual pricing and want more information before proceeding.”  
   CTA: **Choose Premium**

3. **Discuss a Custom Request**  
   “Choose Custom if you have a specific requirement and want to ask whether an arrangement is available.”  
   CTA: **Contact Us**

Use an editorial decision-guide layout rather than another set of pricing cards.

## 7. Annual Premium Pricing Benefits

Heading:

**Why Consider Annual Premium Pricing?**

Description:

“The confirmed advantage of annual Premium billing is the lower total price compared with twelve monthly payments.”

Include:

1. **Lower Annual Total**  
   “Pay $168 annually instead of $240 across twelve monthly payments.”  
   Boxicon: `bx-purchase-tag`

2. **Clear Savings**  
   “The annual option provides a $72 reduction, equal to a 30% discount.”  
   Boxicon: `bx-wallet`

3. **Simple Price Comparison**  
   “Review the monthly and yearly amounts before contacting the website about Premium.”  
   Boxicon: `bx-calculator`

## 8. Billing Transparency

Heading:

**Premium Billing Explained**

Description:

“Review the confirmed pricing calculations before making a Premium inquiry.”

Explain:

- Premium costs $20 monthly.
- Twelve monthly payments total $240.
- The annual discount is 30%.
- The annual price is $168.
- Annual savings are $72.
- The effective monthly equivalent is $14.
- Annual billing means one yearly payment, not monthly $14 payments.

Do not state or imply anything about renewals, refunds, cancellation, trials, payment methods, gateways, taxes, activation, account creation, or credit-card requirements.

## 9. Pricing FAQs

Heading:

**OnlineCoinFlips.com Pricing FAQs**

Introduction:

“Find answers to common questions about Free, Premium, Custom pricing, and annual billing.”

Create an accessible accordion containing these questions and answers:

1. **Is there a Free option?**  
   “Yes. The Free option is listed at $0 and links to the existing coin flip tool on the OnlineCoinFlips.com homepage.”

2. **How much does Premium cost?**  
   “Premium is priced at $20 per month. An annual billing option is also listed at $168 per year.”

3. **How does the annual discount work?**  
   “The original annual amount is $240, based on twelve monthly payments of $20. A 30% discount reduces that amount by $72 to $168.”

4. **How much can I save with yearly Premium pricing?**  
   “The annual option saves $72 compared with twelve monthly payments.”

5. **Does the annual plan cost $14 every month?**  
   “No. The annual price is $168 billed yearly. Dividing that amount by twelve gives an effective monthly equivalent of $14.”

6. **What is included in Premium?**  
   “The published pricing information establishes Premium's monthly and annual prices. For details about its included capabilities, use the Contact page to make an inquiry.”

7. **What does Custom Pricing mean?**  
   “Custom Pricing means a fixed public amount is not specified. You can contact OnlineCoinFlips.com to describe your requirements and ask about available options.”

8. **How do I inquire about Premium?**  
   “Visit the Contact page and send a message explaining that you're interested in Premium.”

9. **Can I ask about specific requirements?**  
   “Yes. The Contact page allows you to describe your requirements and submit an inquiry.”

10. **Does the Pricing page process payments?**  
    “No payment or checkout system is established in this pricing specification. The Premium and Custom buttons direct visitors to the Contact page.”

Accordion requirements:

- Native button controls
- Unique IDs
- Correct `aria-expanded` and `aria-controls`
- Keyboard accessibility
- Boxicons for indicators
- Smooth height transitions
- Reduced-motion support
- No dependency on or conflict with Divi accordions

## 10. Final CTA

Heading:

**Ready to Get Started with OnlineCoinFlips.com?**

Description:

“Use the existing coin flip tool or contact us to learn more about Premium and Custom pricing.”

Primary CTA:

- **Get Started Free**
- https://onlinecoinflips.com/

Secondary CTA:

- **Contact Us**
- https://onlinecoinflips.com/contact

Use a premium navy panel with white text, mint decoration, accessible buttons, rounded corners, generous spacing, and subtle coin-inspired graphics.

## Technical Output Requirements

When implementation is requested, return one complete self-contained WP Coder implementation containing HTML, scoped CSS, and isolated vanilla JavaScript.

Use one unique root wrapper:

`#ocf-pricing-page`

All page-specific CSS selectors and JavaScript DOM queries must remain scoped to this wrapper.

Use distinctive class prefixes such as:

- `ocf-pricing-intro`
- `ocf-pricing-toggle`
- `ocf-pricing-grid`
- `ocf-pricing-card`
- `ocf-pricing-comparison`
- `ocf-pricing-billing`
- `ocf-pricing-faq`
- `ocf-pricing-cta`

Requirements:

- No PHP, React, Vue, Tailwind, or jQuery
- No global CSS selectors
- No global JavaScript variables
- No duplicate event listeners
- No global document/window listeners affecting the page
- Never use `document.currentScript` or `previousElementSibling` to locate the wrapper
- Never override `window.dispatch` or `Event.prototype`
- Root wrapper may use `position: relative`, but never fixed or absolute positioning
- No negative top margin on the root
- Bootstrap-compatible markup
- Boxicons exclusively
- Avoid loading duplicate icon libraries
- Reliable isolated initialization
- Correct USD currency formatting
- Centralized derived calculations
- Responsive at 320, 375, 414, 768, 1024, 1280, and 1440 pixels
- No page-level horizontal overflow
- Semantic headings with exactly one H1
- Visible focus indicators
- Sufficient contrast
- Reduced-motion support

## SEO Requirements

Recommended SEO title:

**Coin Flip Online Pricing | Free, Premium & Custom**

Recommended meta description:

**Compare coin flip online pricing at OnlineCoinFlips.com. Review Free, Premium, and Custom options, including monthly and annual Premium rates.**

Use “coin flip online pricing” naturally without keyword stuffing. Maintain a logical H1–H3 hierarchy and use real internal links. Do not create misleading pricing structured data.

## Prohibited Content

Do not include:

- Unconfirmed product features or limits
- Unsupported Custom services
- Invented billing or legal policies
- Checkout or payment processing
- Fake reviews or testimonials
- Ratings or popularity statistics
- Verification badges
- Urgency messages or countdowns
- Unsupported payment methods
- Placeholder content
- Lorem ipsum
- Broken links
- Duplicate coin-flipping tools
- Header, navigation, or footer

## Final Quality Assurance

Before delivery, verify:

- Exactly three plans appear.
- Free is `$0`.
- Premium defaults to `$20/month`.
- Annual calculations produce `$240`, `$72`, `$168`, and `$14`.
- Yearly billing is identified as one annual payment.
- Custom shows “Custom Pricing.”
- The billing toggle synchronizes all Premium displays.
- Premium is labeled “Featured Plan.”
- Free links to the homepage.
- Premium and Custom link to the Contact page.
- The comparison table agrees with the pricing cards.
- All FAQ controls function accessibly.
- All CSS and JavaScript are isolated to the wrapper.
- Inter, Boxicons, and the official palette are used.
- Inner content never exceeds 1350px.
- The implementation is responsive and Divi-safe.
- No unverified commercial or product claims appear.