Monthly/Annual Pricing Toggle — Membership Decision Variant

What it does

• Single billing-cycle toggle — one switch at the top of the pricing block flips every card between monthly and annual
• Live price recalculation — prices, badges, and savings labels update across all cards the moment the toggle flips
• Annual savings callout — when annual is selected, a "save X%" badge appears on each card to anchor the value
• Recommended-plan highlight — one plan stays visually emphasized regardless of billing cycle to anchor the buyer's choice
• Per-tier feature lists — each plan card shows the included features so buyers can compare horizontally
• Direct-to-checkout CTA — every card's button passes the selected billing cycle straight to checkout

Best use cases

• Membership site owners — letting members self-select monthly vs annual billing in one decision
• SaaS businesses — running standard tiered pricing with a billing-cycle toggle
• Subscription-based course creators — offering an evergreen membership with annual savings
• Community and coaching memberships — anchoring annual as the better-value default
• Tools and apps — giving buyers a clear monthly entry point and a discounted annual upgrade

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for the toggle track, active-state highlight, plan card backgrounds, recommended-plan accent, savings badge, and CTA buttons
• Fonts — one professional font with a heavier weight for plan names and prices and a regular weight for feature lists
• Copy — toggle labels (monthly/annual), plan names, prices for both cycles, savings percentage, feature lists per plan, and CTA copy
• Images — optional small icons next to feature rows; otherwise text-only
• Behavior — choose the toggle's default state, whether savings are shown as a percentage or dollar amount, and how billing cycle is passed to checkout