Create a complete, modern, professional, accessible, SEO-friendly, fully responsive Terms & Conditions page for GenogramMakers.com. The implementation will be used in WordPress with the Divi Theme and WP Coder. Do not generate implementation code during the planning stage. When implementation is explicitly requested later, return exactly three fenced blocks in this order: `html`, `css`, and `js`, with no text outside those blocks. ## Project details - Website: https://genogrammakers.com/ - Brand: Genogram Makers - Website type: Online Genogram Maker / SaaS - Page: Terms & Conditions - URL: `/terms` - Focus keyword: `terms and conditions` - Support email: `support@genogrammakers.com` - Platform: WordPress, Divi Theme, WP Coder - Technology: HTML5, CSS3, Bootstrap-compatible markup, vanilla JavaScript - Typography: Inter - Icons: Boxicons exclusively - Maximum inner width: 1350px Brand colors: - Orange: `#FF9E20` - Deep teal: `#215E61` - Charcoal: `#1D2128` - Soft grey: `#F4F2F2` - White may be used for reading surfaces. ## Core objective Design a premium SaaS legal-document page explaining the rules, responsibilities, limitations, and conditions associated with Genogram Makers and its available services. The page must be original, website-specific, easy to read, legally cautious, and visually consistent with the brand. It must not appear overly promotional. Do not create a website header, footer, primary navigation, or duplicate genogram editor. ## Legal-content safeguards Do not invent or infer material contractual terms. In particular, do not fabricate: - The operator’s legal identity - Business addresses or registration details - Governing law or court jurisdiction - Arbitration, mediation, or dispute procedures - Liability caps or indemnification duties - Warranty exclusions - Refund or cancellation rules - Automatic-renewal conditions - Payment-processing arrangements - Tax or invoice policies - Account suspension or termination powers - Age or geographic restrictions - User-content ownership transfers or service licenses - Commercial-use permissions - Service-level or uptime commitments - Effective or last-updated dates Do not treat standard SaaS boilerplate as approved for this website. Where a section depends on unverified facts, include only neutral, factual public-facing information that remains accurate without the missing term. Exclude unresolved clauses from the live page and list the missing decisions separately for owner and legal approval. The final live page must contain no placeholders, drafting notes, bracketed instructions, or statements that imply the terms are legally finalized when essential provisions remain unapproved. Any binding legal provisions must be reviewed by a qualified legal professional familiar with the applicable jurisdiction before publication. ## Prohibited content Do not include: - Lorem ipsum or dummy copy - Fake businesses, representatives, addresses, or phone numbers - Fabricated functionality or feature entitlements - Customer reviews, testimonials, or ratings - Invented usage statistics, awards, or partnerships - Certifications, compliance badges, or security seals - Unsupported guarantees or privacy claims - Claims of AI analysis, clinical diagnosis, professional certification, unlimited storage, cloud collaboration, or guaranteed exports unless independently verified ## Required page structure Create these sections in this order: 1. Terms & Conditions Introduction 2. Overview and Acceptance of Terms 3. Description of Genogram Makers 4. Eligibility and Access 5. Acceptable Website Use 6. User Responsibilities 7. Genogram Content and Family Information 8. Intellectual Property 9. Free, Premium, and Custom Plans 10. Payments, Billing, and Subscriptions 11. Third-Party Services and External Links 12. Educational and Informational Purpose 13. Website Availability and Changes 14. Disclaimers and Limitations 15. Privacy and Personal Information 16. Suspension or Termination of Access 17. Changes to These Terms & Conditions 18. Applicable Law and Dispute Resolution 19. Contact Information 20. Related Legal and Support Resources ## Hero Use a compact legal-page hero with: - Eyebrow: “LEGAL INFORMATION” - H1: “Terms & Conditions” - Description: “Read the Genogram Makers Terms & Conditions to understand the rules and conditions relating to use of our website and available services.” - Additional text: “These terms provide information about website access, responsible use, genogram content, available plans, and other important considerations.” - A minimal document-related Boxicon - A subtle relationship-node decoration - A thin orange accent Use a soft-grey background, teal label, charcoal heading, and balanced spacing. Do not use a full-screen hero or display an effective date unless the owner supplies an approved date. ## Section requirements ### Overview and Acceptance of Terms Explain that the page describes rules and conditions associated with using `https://genogrammakers.com/` and its available services. Do not state that browsing, registration, or continued use creates an enforceable agreement unless the acceptance mechanism has been legally approved. Confirm separately whether express acceptance, registration acceptance, paid-plan agreements, or additional service terms exist. ### About the Genogram Makers Website Explain that Genogram Makers is an online website focused on creating and understanding genograms. Define genograms as visual diagrams representing family members, generations, and relationships through structured symbols and connecting lines. State that available capabilities may depend on the current implementation and applicable plan. Include contextual internal links to: - Homepage: `/` - Features: `/features` - Pricing: `/pricing` ### Eligibility and Website Access Describe only verified access conditions. Do not invent account requirements, minimum ages, organizational support, geographic restrictions, identity verification, or subscription requirements. ### Acceptable Use of the Website Address reasonable, owner-approved conduct such as lawful use, respect for privacy and intellectual property, avoiding unauthorized access, avoiding deliberate disruption, and avoiding harmful misuse of family information. If approved, present “Appropriate Use” and “Restricted Conduct” in a compact two-column layout. Do not imply unapproved enforcement powers. ### User Responsibilities Explain that genograms can contain information about family members and personal relationships. Encourage users to: - Review information before relying on it - Respect other people’s privacy - Avoid unnecessary sensitive details - Use and share genograms responsibly - Understand the limits of diagram-based information - Follow applicable laws when handling personal information Use careful guidance rather than unreasonable guarantees or liability transfers. ### Genogram Content and Family Information Explain that family, relationship, and other personal information may be sensitive. Encourage users to consider sensitivity before entering or sharing information. Link to `/privacy`. Do not state how information is saved, stored, shared, processed, uploaded, or deleted until those behaviors are verified. Do not transfer ownership of user diagrams. If the service requires a limited operational content license, it must be accurately defined and approved before publication. Use a restrained teal-tinted information panel without trust badges. ### Intellectual Property Distinguish among: - Original Genogram Makers branding and website material - Third-party libraries, fonts, and assets - User-provided information and user-created diagrams - Exported output and any approved usage permissions Do not claim ownership of third-party material, invent trademark registrations, prohibit every conceivable use, or grant unapproved commercial permissions. ### Available Plans Present a compact summary: - Free: `$0`; destination `/` - Premium monthly: `$20 per month` - Premium annual: `$168 per year` - Annual discount: `30%` - Annual savings compared with twelve monthly payments: `$72` - Custom: Custom Pricing; contact-based inquiry Explain that current features and conditions must be reviewed on `/pricing` and in any approved service terms. Do not invent quotas, storage, exports, seats, support levels, integrations, or unlimited access. ### Payments, Billing, and Subscriptions Display the confirmed pricing mathematics clearly: - Monthly Premium: `$20 per month` - Annual Premium: `$168 per year` - Twelve monthly payments: `$240` - Annual savings: `$72` - Annual discount: `30%` - Effective annual-plan equivalent: `$14 per month, billed annually` The Premium CTA currently leads to the Contact page. Do not imply that submitting the form completes a purchase or activates a subscription. Do not describe checkout, providers, taxes, invoices, automatic renewal, cancellation, refunds, or price-change rules until verified and approved. Do not include an interactive billing toggle. ### Third-Party Services and External Links State neutrally that the website may link to external websites or resources and that visitors should review the terms and policies of services they choose to use. Do not identify hosting, analytics, payment, email, embedded-content, or other providers unless verified. Do not imply endorsements or partnerships. ### Educational and Informational Use Include these concepts: - Genograms are visual tools for organizing family relationships and related information. - Interpretation depends on the accuracy, completeness, and context of the information represented. - Information about genograms is not a substitute for professional medical, psychological, legal, or other specialized advice. - A genogram does not independently diagnose a condition, establish medical risk, or provide a complete assessment of family circumstances. Use a restrained educational notice with a small information icon. ### Website Availability and Changes Use balanced language about possible maintenance, interruptions, technical limitations, updates, and feature changes. Do not promise 100% uptime, invent a service-level agreement, or claim an unrestricted right to remove paid functionality. ### Disclaimers and Limitations Provide factual explanations about educational information, user-provided information, diagram accuracy, website availability, reliance on displayed information, and third-party services. Do not include sweeping “at your own risk” language, total warranty exclusions, waivers of all claims, nominal liability caps, indemnification, or exclusions of all damages without jurisdiction-specific legal approval. ### Privacy and Personal Information Explain that use of Genogram Makers may involve personal information depending on the features used and information supplied. Direct visitors to `/privacy` for applicable data-handling practices. Do not claim local-only processing, zero retention, end-to-end encryption, HIPAA compliance, automatic deletion, or no third-party sharing unless verified. ### Suspension or Termination of Access Do not imply accounts exist or invent suspension, deletion, termination, notice, cancellation, or appeal procedures. Publish this section only with neutral verified information or approved account terms. ### Changes to These Terms & Conditions Do not invent notification periods, effective dates, automatic acceptance mechanisms, version-retention practices, or effects on paid subscriptions. The publication and notice process must be approved before binding language is added. ### Applicable Law and Dispute Resolution Do not identify any governing country, state, province, court, arbitration procedure, mediation requirement, class-action waiver, deadline, or attorney-fee obligation without owner and legal approval. If these provisions are unavailable, omit unverified binding clauses from the live content and identify them in the separate approval checklist. ### Contact Create a premium dark-teal contact panel containing: - Heading: “Questions About These Terms?” - Text: “If you have questions about these Terms & Conditions or the use of Genogram Makers, you can contact us using the information below.” - Website: `https://genogrammakers.com/` - Email: `support@genogrammakers.com` - Email link: `mailto:support@genogrammakers.com` - CTA: “Contact Us” - CTA destination: `/contact` Use white text, soft-grey supporting copy, an orange CTA, an envelope Boxicon, and rounded corners. Do not invent a phone number, address, location, or response-time promise. ### Related Information Create four compact resource cards: - Privacy Policy — `/privacy` — “Read information about website privacy practices.” - FAQs — `/faqs` — “Find answers to common questions.” - Pricing — `/pricing` — “Review the published pricing options.” - Contact — `/contact` — “Send questions or feedback.” Use white surfaces, thin borders, teal Boxicons, rounded corners, and orange hover accents. ## Layout and visual direction Use the concept “Clear Terms, Clear Connections.” The page should resemble a premium SaaS documentation or legal page, with: - Soft-grey page background - White legal-document surface - Deep-teal headings and links - Charcoal body copy - Orange active states and accents - Thin dividers - Rounded containers - Minimal shadows - Restrained family-relationship node details - Comfortable paragraph spacing and reading measure Avoid oversized illustrations, stock photography, strong gradients, repetitive card grids, heavy animations, and dramatic warning graphics. On desktop, use a roughly 25/75 two-column composition: - Left: sticky “On This Page” table of contents - Right: legal content The sticky behavior must remain compatible with Divi. On smaller screens, switch to a single-column layout and provide an accessible, functional mobile section navigator. ## Table of contents behavior Every item must link to its corresponding section. Implement: - Correct URL fragments - Accessible anchor navigation - Active-section highlighting - Orange active indicator - Keyboard support - Scroll offsets so sticky website elements do not obscure headings - Reduced-motion support - Browser history compatibility Use `IntersectionObserver` for active-section detection. Avoid continuous global scroll handlers. On mobile, use an accessible collapsible navigation or native select control that genuinely navigates to each section. ## Implementation constraints When code is requested: - Output exactly three fenced blocks: `html`, `css`, and `js`. - Place no prose outside the blocks. - The HTML block must contain one root wrapper `div` only as its top-level node. - Use the unique wrapper class `.ggm-terms-page-2026`. - Do not place `