Accordion FAQ — SaaS Pricing Variant

What it does

• Click-to-expand answers — each pricing question opens to reveal a focused, sales-aware answer with a smooth height-grow animation
• One open at a time — opening a new row closes the previous one, keeping the page tidy and the buyer's attention focused
• Sharp, business-tone styling — tighter spacing, confident type, and an icon indicator that rotates as the row opens — designed to read as trustworthy and clear
• Optimized for objection-handling copy — row titles are written as buyer questions; answers reduce the friction between curiosity and purchase
• Scannable on first glance — the closed state lets buyers spot the objection that matches theirs and tap straight to it

Best use cases

• SaaS pricing pages — billing questions, plan limits, cancellation, upgrades
• Course sales pages — payment plans, refund policy, lifetime access vs subscription
• Membership pages — what's included, billing cycle, who it's for
• Service businesses — package comparisons, what's not included, scope clarifications
• Agencies and consultants — engagement models, retainer terms, project minimums

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 page background, row background, divider lines, title text, body text, and the indicator icon. Lean into your brand's primary + neutral palette for a confident commercial feel.
• Fonts — two roles: a clean sans heading for the questions, and a readable body font for the answers. Geometric sans pairs work especially well here.
• Copy — each row is one buyer objection turned into a question + a concise answer. Five to twelve rows covers most pricing pages.
• Images — none by default. Optional inline icons or small comparison tables can sit inside an expanded answer when helpful.
• Behavior — control whether one row opens at a time or multiple, and tune the open/close animation speed