@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); .win-cmp-app { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; color: #1e293b !important; background-color: #f8fafc !important; line-height: 1.5 !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 0 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .win-cmp-app *, .win-cmp-app *::before, .win-cmp-app *::after { box-sizing: border-box !important; } .win-cmp-app h2 { font-family: 'Inter', sans-serif !important; font-size: 1.875rem !important; line-height: 1.25 !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 0.75rem 0 !important; padding: 0 !important; letter-spacing: -0.025em !important; border: none !important; } .win-cmp-app h3 { font-family: 'Inter', sans-serif !important; font-size: 1.25rem !important; line-height: 1.35 !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 0.5rem 0 !important; padding: 0 !important; border: none !important; } .win-cmp-app h4 { font-family: 'Inter', sans-serif !important; font-size: 1.125rem !important; line-height: 1.4 !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; padding: 0 !important; } .win-cmp-app p { font-family: 'Inter', sans-serif !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: #475569 !important; margin: 0 0 1rem 0 !important; padding: 0 !important; } .win-cmp-app p:last-child { margin-bottom: 0 !important; } .win-cmp-container { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .win-cmp-container-narrow { max-width: 850px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .win-cmp-section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; position: relative !important; } .win-cmp-bg-light { background-color: #f8fafc !important; } .win-cmp-bg-white { background-color: #ffffff !important; } .win-cmp-border-y { border-top: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important; } .win-cmp-grid-2 { display: grid !important; grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 1.5rem !important; } @media (min-width: 768px) { .win-cmp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .win-cmp-app h2 { font-size: 2.25rem !important; } } .win-cmp-hero { background: linear-gradient(180deg, rgba(238, 247, 255, 0.7) 0%, #ffffff 60%, #f8fafc 100%) !important; text-align: center !important; padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; overflow: hidden !important; } .win-cmp-hero-content { max-width: 768px !important; margin: 0 auto !important; } .win-cmp-gradient-text { background: linear-gradient(135deg, #0078d4 0%, #00c4ff 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; display: inline !important; } .win-cmp-badge-sub { font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #0078d4 !important; margin-bottom: 0.375rem !important; display: block !important; } .win-cmp-btn-group { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.875rem !important; margin-top: 1.75rem !important; } @media (min-width: 640px) { .win-cmp-btn-group { flex-direction: row !important; } } .win-cmp-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 0.875rem 1.5rem !important; border-radius: 0.75rem !important; font-size: 0.9375rem !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.2s ease !important; border: 1px solid transparent !important; outline: none !important; } .win-cmp-btn-primary { background-color: #0078d4 !important; color: #ffffff !important; box-shadow: 0 10px 15px -3px rgba(0, 120, 212, 0.25) !important; } .win-cmp-btn-primary:hover { background-color: #005a9e !important; transform: translateY(-1px) !important; } .win-cmp-btn-secondary { background-color: #ffffff !important; color: #334155 !important; border-color: #cbd5e1 !important; } .win-cmp-btn-secondary:hover { background-color: #f1f5f9 !important; } .win-cmp-btn-dark { background-color: #0f172a !important; color: #ffffff !important; } .win-cmp-btn-dark:hover { background-color: #1e293b !important; } .win-cmp-btn-full { width: 100% !important; } .win-cmp-btn-nowrap { white-space: nowrap !important; font-size: 0.8125rem !important; } .win-cmp-upgrade-note { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; font-size: 0.8125rem !important; color: #64748b !important; margin-top: 1.75rem !important; } .win-cmp-grid-hero { max-width: 980px !important; margin: 3rem auto 0 auto !important; } .win-cmp-glass-card { background: linear-gradient(145deg, #f0f7ff 0%, #ffffff 100%) !important; backdrop-filter: blur(12px) !important; border: 1px solid #d0e3ff !important; border-radius: 1rem !important; padding: 1.5rem !important; box-shadow: 0 4px 15px -3px rgba(0, 120, 212, 0.08) !important; position: relative !important; text-align: left !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; overflow: hidden !important; } .win-cmp-glass-card:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 25px -5px rgba(0, 120, 212, 0.15) !important; } .win-cmp-card-pro { border: 2px solid #0078d4 !important; background: linear-gradient(145deg, #dbeafe 0%, #ffffff 55%, #eff6ff 100%) !important; } .win-cmp-card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0.875rem !important; } .win-cmp-pro-ribbon { position: absolute !important; top: 0 !important; right: 0 !important; background-color: #0078d4 !important; color: #ffffff !important; font-size: 0.6875rem !important; font-weight: 700 !important; padding: 0.25rem 0.75rem !important; border-bottom-left-radius: 0.5rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; z-index: 10 !important; } .win-cmp-tag { padding: 0.25rem 0.625rem !important; border-radius: 0.375rem !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; display: inline-block !important; } .win-cmp-tag-home { background-color: #e0f2fe !important; color: #0369a1 !important; } .win-cmp-tag-pro { background-color: #d9edff !important; color: #004578 !important; } .win-cmp-tag-mb { margin-bottom: 1rem !important; } .win-cmp-price-tag { font-size: 1.5rem !important; font-weight: 800 !important; color: #0f172a !important; } .win-cmp-price-pro { color: #0078d4 !important; } .win-cmp-list { list-style: none !important; padding: 0 !important; margin: 0 0 1.5rem 0 !important; } .win-cmp-list li { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-size: 0.84rem !important; color: #334155 !important; margin-bottom: 0.5rem !important; } .win-cmp-sec-header { text-align: center !important; max-width: 768px !important; margin: 0 auto 3rem auto !important; } .win-cmp-table-wrapper { background-color: #ffffff !important; border-radius: 1rem !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important; overflow: hidden !important; } .win-cmp-table-responsive { overflow-x: auto !important; } .win-cmp-table { width: 100% !important; border-collapse: collapse !important; text-align: left !important; font-size: 0.875rem !important; } .win-cmp-table th { background-color: #ffffff !important; padding: 1.25rem 1.5rem !important; font-size: 1.05rem !important; font-weight: 800 !important; color: #0f172a !important; border-bottom: 2px solid #0f172a !important; } .win-cmp-th-feature { width: 50% !important; } .win-cmp-th-home { width: 25% !important; text-align: center !important; color: #0078d4 !important; } .win-cmp-th-pro { width: 25% !important; text-align: center !important; color: #0078d4 !important; } .win-cmp-table td { padding: 1.125rem 1.5rem !important; border-bottom: 1px solid #e2e8f0 !important; vertical-align: middle !important; } .win-cmp-cat-row td { background-color: #f1f5f9 !important; font-weight: 700 !important; color: #0078d4 !important; font-size: 0.875rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 0.75rem 1.5rem !important; } .win-cmp-feature-title { color: #0f172a !important; display: block !important; font-size: 0.95rem !important; } .win-cmp-feature-desc { font-size: 0.8125rem !important; color: #64748b !important; display: block !important; margin-top: 0.2rem !important; } .win-cmp-td-none { text-align: center !important; color: #94a3b8 !important; font-weight: 600 !important; } .win-cmp-td-center { text-align: center !important; } .win-cmp-td-pro { text-align: center !important; background-color: #f0f7ff !important; } .win-cmp-td-txt-home { text-align: center !important; font-weight: 700 !important; color: #334155 !important; } .win-cmp-td-txt-pro { text-align: center !important; background-color: #f0f7ff !important; font-weight: 800 !important; color: #0078d4 !important; } .win-cmp-check-icon { width: 1.5rem !important; height: 1.5rem !important; color: #0078d4 !important; display: inline-block !important; } .win-cmp-check-circle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.75rem !important; height: 1.75rem !important; border-radius: 50% !important; border: 2px solid #0078d4 !important; color: #0078d4 !important; } .win-cmp-pricing-grid { max-width: 890px !important; margin: 0 auto !important; } .win-cmp-pricing-card { background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%) !important; border-radius: 1rem !important; padding: 2rem !important; border: 1px solid #cbe2ff !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; text-align: left !important; box-shadow: 0 4px 15px -3px rgba(0, 120, 212, 0.05) !important; overflow: hidden !important; } .win-cmp-pricing-card-pro { background: linear-gradient(180deg, #dbeafe 0%, #ffffff 50%, #eff6ff 100%) !important; color: #0f172a !important; border: 2px solid #0078d4 !important; box-shadow: 0 10px 25px -5px rgba(0, 120, 212, 0.18) !important; position: relative !important; } .win-cmp-pricing-sub { font-size: 0.75rem !important; color: #64748b !important; margin-top: 0.25rem !important; } .win-cmp-pricing-sub-pro { font-size: 0.75rem !important; color: #475569 !important; margin-top: 0.25rem !important; } .win-cmp-pricing-box { margin: 1.5rem 0 !important; } .win-cmp-price-val { font-size: 2.25rem !important; font-weight: 800 !important; color: #0f172a !important; } .win-cmp-price-val-pro { font-size: 2.25rem !important; font-weight: 800 !important; color: #0078d4 !important; } .win-cmp-price-period { font-size: 0.8125rem !important; color: #64748b !important; display: block !important; margin-top: 0.25rem !important; } .win-cmp-badge-pop { position: absolute !important; top: -0.875rem !important; left: 50% !important; transform: translateX(-50%) !important; background-color: #0078d4 !important; color: #ffffff !important; font-size: 0.75rem !important; font-weight: 700 !important; padding: 0.25rem 1rem !important; border-radius: 9999px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; z-index: 10 !important; } .win-cmp-download-banner { margin-top: 3rem !important; max-width: 890px !important; margin-left: auto !important; margin-right: auto !important; background: linear-gradient(135deg, #dbeafe 0%, #f0f7ff 50%, #ffffff 100%) !important; border: 1px solid #93c5fd !important; border-radius: 1rem !important; padding: 1.75rem 2rem !important; color: #0f172a !important; display: flex !important; flex-direction: column !important; gap: 1.25rem !important; align-items: center !important; justify-content: space-between !important; box-shadow: 0 6px 20px -4px rgba(0, 120, 212, 0.12) !important; } @media (min-width: 768px) { .win-cmp-download-banner { flex-direction: row !important; } } .win-cmp-download-info { display: flex !important; align-items: flex-start !important; gap: 1rem !important; text-align: left !important; } .win-cmp-dl-icon-box { width: 3rem !important; height: 3rem !important; background-color: #d9edff !important; border-radius: 0.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #0078d4 !important; flex-shrink: 0 !important; } .win-cmp-dl-desc { font-size: 0.8125rem !important; margin-top: 0.25rem !important; } .win-cmp-faq-header { text-align: center !important; margin-bottom: 2.5rem !important; } .win-cmp-faq-item { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 0.75rem !important; margin-bottom: 0.75rem !important; overflow: hidden !important; } .win-cmp-faq-btn { width: 100% !important; padding: 1.25rem !important; text-align: left !important; font-weight: 700 !important; color: #0f172a !important; background: transparent !important; border: none !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.95rem !important; list-style: none !important; } .win-cmp-faq-btn::-webkit-details-marker, .win-cmp-faq-btn::marker { display: none !important; } .win-cmp-faq-item[open] .win-cmp-faq-arrow { transform: rotate(180deg) !important; } .win-cmp-faq-arrow { transition: transform 0.2s ease !important; } .win-cmp-faq-content { padding: 0 1.25rem 1.25rem 1.25rem !important; font-size: 0.875rem !important; color: #475569 !important; border-top: 1px solid #f1f5f9 !important; padding-top: 0.75rem !important; } .win-cmp-icon { width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle !important; } .win-cmp-icon-sm { width: 1rem !important; height: 1rem !important; } .win-cmp-icon-lg { width: 1.5rem !important; height: 1.5rem !important; } .win-cmp-ic-green { color: #10b981 !important; } .win-cmp-ic-blue { color: #0078d4 !important; } .win-cmp-str-dark { color: #0f172a !important; } .win-cmp-str-slate { color: #334155 !important; }