.page-container{max-width: 1200px;margin: 0 auto;padding: 20px;min-height: 100vh} .page-header{text-align: center;margin-bottom: 60px;padding: 40px 0;border-bottom: 1px solid #e5e7eb} .page-header h1{font-size: 3rem;font-weight: 700;margin-bottom: 15px;background: linear-gradient(135deg,#7C3AED,#EC4899);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .page-subtitle{font-size: 1.25rem;color: #6b7280;margin-bottom: 10px;font-weight: 400} .last-updated{font-size: 0.9rem;color: #9ca3af;font-style: italic} .api-version{background: #f3f4f6;padding: 8px 16px;border-radius: 20px;font-size: 0.9rem;color: #374151;display: inline-block;margin-top: 10px} .page-content{line-height: 1.7} .page-content section{margin-bottom: 60px} .page-content h2{font-size: 2rem;font-weight: 600;margin-bottom: 25px;color: #1f2937;border-bottom: 2px solid #7C3AED;padding-bottom: 10px} .page-content h3{font-size: 1.5rem;font-weight: 600;margin: 30px 0 15px 0;color: #374151} .page-content h4{font-size: 1.25rem;font-weight: 600;margin: 25px 0 12px 0;color: #4b5563} .page-content h5{font-size: 1.1rem;font-weight: 600;margin: 20px 0 10px 0;color: #6b7280} .page-content p{margin-bottom: 15px;color: #374151} .page-content ul,.page-content ol{margin-bottom: 20px;padding-left: 25px} .page-content li{margin-bottom: 8px;color: #4b5563} .lead{font-size: 1.2rem;font-weight: 400;color: #4b5563;line-height: 1.6} .privacy-highlight,.terms-highlight,.contact-highlight,.blog-highlight,.help-highlight,.api-highlight,.dev-highlight{background: linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border: 1px solid #cbd5e1;border-radius: 12px;padding: 30px;margin-bottom: 40px;text-align: center} .privacy-highlight h2,.terms-highlight h2,.contact-highlight h2,.blog-highlight h2,.help-highlight h2,.api-highlight h2,.dev-highlight h2{margin-bottom: 15px;border: none;padding: 0} .feature-badges,.api-features,.dev-features{display: flex;gap: 10px;justify-content: center;flex-wrap: wrap;margin-top: 20px} .feature-badge{background: rgba(124,58,237,0.1);border: 1px solid rgba(124,58,237,0.3);color: #7C3AED;padding: 6px 12px;border-radius: 20px;font-size: 0.85rem;font-weight: 500;white-space: nowrap} .values-grid,.stats-grid,.categories-grid,.help-categories .categories-grid,.contact-grid,.posts-grid,.faq-grid,.resources-grid,.integration-grid,.use-cases-grid,.feature-grid,.tips-grid,.support-grid{display: grid;gap: 25px;margin-top: 30px} .values-grid{grid-template-columns: repeat(auto-fit,minmax(300px,1fr))} .stats-grid{grid-template-columns: repeat(auto-fit,minmax(200px,1fr))} .categories-grid,.help-categories .categories-grid{grid-template-columns: repeat(auto-fit,minmax(280px,1fr))} .contact-grid{grid-template-columns: repeat(auto-fit,minmax(300px,1fr))} .posts-grid{grid-template-columns: repeat(auto-fit,minmax(350px,1fr))} .faq-grid{grid-template-columns: repeat(auto-fit,minmax(400px,1fr))} .resources-grid,.integration-grid,.use-cases-grid{grid-template-columns: repeat(auto-fit,minmax(320px,1fr))} .feature-grid,.tips-grid{grid-template-columns: repeat(auto-fit,minmax(300px,1fr))} .support-grid{grid-template-columns: repeat(auto-fit,minmax(250px,1fr))} .value-card,.stat-card,.category-card,.help-category,.contact-card,.post-card,.faq-item,.resource-card,.integration-card,.use-case-card,.feature-card,.tip-card,.support-card{background: #ffffff;border: 1px solid #e5e7eb;border-radius: 12px;padding: 25px;transition: all 0.3s ease;box-shadow: 0 1px 3px rgba(0,0,0,0.1)} .value-card:hover,.category-card:hover,.help-category:hover,.contact-card:hover,.post-card:hover,.resource-card:hover,.integration-card:hover,.use-case-card:hover,.feature-card:hover,.support-card:hover{transform: translateY(-2px);box-shadow: 0 4px 12px rgba(124,58,237,0.15);border-color: #7C3AED} .value-icon,.category-icon,.contact-icon,.resource-icon,.integration-icon{font-size: 2.5rem;margin-bottom: 15px;display: block} .stat-number{font-size: 3rem;font-weight: 700;color: #7C3AED;display: block;margin-bottom: 5px} .stat-label{font-size: 0.9rem;color: #6b7280;font-weight: 500} .contact-link{color: #7C3AED;text-decoration: none;font-weight: 600;font-size: 1.1rem} .contact-link:hover{text-decoration: underline} .response-time{font-size: 0.85rem;color: #6b7280;margin-top: 10px;font-style: italic} .post-card.featured{grid-column: 1 / -1} .post-image{height: 120px;background: linear-gradient(135deg,#7C3AED,#EC4899);border-radius: 8px;margin-bottom: 15px;position: relative;display: flex;align-items: center;justify-content: center} .post-category{background: rgba(255,255,255,0.9);color: #7C3AED;padding: 4px 12px;border-radius: 15px;font-size: 0.8rem;font-weight: 600} .post-content h3{margin: 0 0 10px 0} .post-content h3 a{color: #1f2937;text-decoration: none} .post-content h3 a:hover{color: #7C3AED} .post-excerpt{color: #6b7280;font-size: 0.95rem;line-height: 1.5;margin-bottom: 15px} .post-meta{display: flex;gap: 15px;font-size: 0.85rem;color: #9ca3af} .faq-container{max-width: 800px} .faq-item h3{cursor: pointer;margin: 0 0 10px 0;padding: 15px;background: #f9fafb;border-radius: 8px;transition: background-color 0.2s ease} .faq-item h3:hover{background: #f3f4f6} .faq-answer{display: none;padding: 0 15px 15px 15px} .faq-answer ul{margin-top: 10px} .code-block,.code-snippet{background: #1f2937;color: #f9fafb;padding: 20px;border-radius: 8px;margin: 15px 0;overflow-x: auto;font-family: 'Monaco','Menlo','Ubuntu Mono',monospace;font-size: 0.9rem;line-height: 1.5} .code-snippet{padding: 10px 15px;font-size: 0.85rem} .code-block h4{color: #f9fafb;margin: 0 0 10px 0;font-size: 1rem} .api-table{width: 100%;border-collapse: collapse;margin: 20px 0;background: #ffffff;border-radius: 8px;overflow: hidden;box-shadow: 0 1px 3px rgba(0,0,0,0.1)} .api-table th,.api-table td{padding: 12px 15px;text-align: left;border-bottom: 1px solid #e5e7eb} .api-table th{background: #f9fafb;font-weight: 600;color: #374151} .api-table tr:hover{background: #f9fafb} .contact-form,.newsletter-form{max-width: 600px;margin: 30px 0} .form-row{display: grid;grid-template-columns: 1fr 1fr;gap: 20px} .form-group{margin-bottom: 20px} .form-group label{display: block;margin-bottom: 5px;font-weight: 500;color: #374151} .form-group input,.form-group select,.form-group textarea{width: 100%;padding: 12px;border: 1px solid #d1d5db;border-radius: 6px;font-size: 1rem;transition: border-color 0.2s ease} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline: none;border-color: #7C3AED;box-shadow: 0 0 0 3px rgba(124,58,237,0.1)} .checkbox-group{display: flex;align-items: center;gap: 10px} .checkbox-label{display: flex;align-items: center;gap: 8px;cursor: pointer} .submit-button,.cta-button{background: #7C3AED;color: white;padding: 12px 24px;border: none;border-radius: 6px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: background-color 0.2s ease;text-decoration: none;display: inline-block} .submit-button:hover,.cta-button:hover{background: #6d28d9} .cta-button.secondary{background: #6b7280} .cta-button.secondary:hover{background: #4b5563} .form-note,.newsletter-note{font-size: 0.85rem;color: #6b7280;margin-top: 10px} .search-box{background: #f9fafb;padding: 30px;border-radius: 12px;text-align: center;margin-bottom: 40px} .search-form{display: flex;max-width: 500px;margin: 20px auto;gap: 10px} .search-form input{flex: 1;padding: 12px;border: 1px solid #d1d5db;border-radius: 6px;font-size: 1rem} .search-form button{background: #7C3AED;color: white;padding: 12px 20px;border: none;border-radius: 6px;cursor: pointer;font-weight: 600} .popular-searches{margin-top: 15px;font-size: 0.9rem;color: #6b7280} .popular-searches a{color: #7C3AED;text-decoration: none;margin: 0 10px} .popular-searches a:hover{text-decoration: underline} .help-links{list-style: none;padding: 0;margin: 15px 0 0 0} .help-links li{margin-bottom: 8px} .help-links a{color: #7C3AED;text-decoration: none;font-size: 0.95rem} .help-links a:hover{text-decoration: underline} .guide-steps{margin-top: 20px} .step{display: flex;gap: 15px;margin-bottom: 20px;align-items: flex-start} .step-number{background: #7C3AED;color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 0.9rem;flex-shrink: 0} .step-content h4{margin: 0 0 5px 0;font-size: 1.1rem} .step-content p{margin: 0;color: #6b7280} .quick-start-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 20px;margin-top: 30px} .start-card{text-align: center;padding: 25px;border: 1px solid #e5e7eb;border-radius: 12px} .start-number{background: #7C3AED;color: white;width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 600;margin: 0 auto 15px auto} .privacy-summary,.terms-summary{background: #f0f9ff;border: 1px solid #0ea5e9;border-radius: 12px;padding: 30px;margin-top: 40px} .summary-box,.newsletter-box,.help-contact-box,.info-box{background: #f9fafb;border: 1px solid #e5e7eb;border-radius: 12px;padding: 30px;text-align: center} .summary-grid,.info-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 20px;margin-top: 20px} .summary-item,.info-item{display: flex;align-items: center;gap: 10px;text-align: left} .summary-icon{font-size: 1.5rem} .summary-text{font-size: 0.9rem} .topics-cloud{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 20px} .topic-tag{background: #f3f4f6;color: #374151;padding: 6px 12px;border-radius: 20px;text-decoration: none;font-size: 0.85rem;transition: all 0.2s ease} .topic-tag:hover{background: #7C3AED;color: white} .cta-section,.blog-cta,.dev-cta{background: linear-gradient(135deg,#7C3AED,#EC4899);color: white;padding: 60px 30px;border-radius: 12px;text-align: center;margin-top: 60px} .cta-content h2{color: white;border: none;margin-bottom: 15px} .cta-content p{color: rgba(255,255,255,0.9);font-size: 1.1rem;margin-bottom: 25px} .cta-buttons{display: flex;gap: 15px;justify-content: center;flex-wrap: wrap} .cta-button.primary{background: white;color: #7C3AED} .cta-button.primary:hover{background: #f9fafb} @media (max-width: 768px){.page-container{padding: 15px} .page-header{padding: 20px 0;margin-bottom: 40px} .page-header h1{font-size: 2rem} .page-subtitle{font-size: 1.1rem} .form-row{grid-template-columns: 1fr} .search-form{flex-direction: column} .cta-buttons{flex-direction: column;align-items: center} .feature-badges,.api-features,.dev-features{justify-content: center} .code-block,.code-snippet{font-size: 0.8rem;padding: 15px} .api-table{font-size: 0.85rem} .api-table th,.api-table td{padding: 8px 10px} } @media (max-width: 480px){.page-header h1{font-size: 1.75rem} .values-grid,.categories-grid,.help-categories .categories-grid,.contact-grid,.posts-grid,.resources-grid,.integration-grid,.use-cases-grid{grid-template-columns: 1fr} .summary-grid,.info-grid{grid-template-columns: 1fr} .quick-start-grid{grid-template-columns: 1fr} }