/* Scoped styles for the article to ensure it looks good on the site */ .flowlock-article { color: #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.75; max-width: 780px; margin: 0 auto; padding: 20px; } .flowlock-article h1 { font-size: 2.5rem; font-weight: 800; color: #ffffff; margin-bottom: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; } .flowlock-article h2 { font-size: 1.85rem; font-weight: 700; color: #ffffff; margin-top: 2.5rem; margin-bottom: 1rem; border-left: 4px solid #6366F1; /* Brand Accent */ padding-left: 15px; } .flowlock-article h3 { font-size: 1.4rem; font-weight: 600; color: #a5b4fc; /* Lighter Indigo */ margin-top: 2rem; margin-bottom: 0.75rem; } .flowlock-article p { margin-bottom: 1.5rem; font-size: 1.1rem; color: #cbd5e1; } .flowlock-article strong { color: #ffffff; font-weight: 700; } .flowlock-article ul, .flowlock-article ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .flowlock-article li { margin-bottom: 0.75rem; font-size: 1.1rem; color: #cbd5e1; } .flowlock-article a { color: #818cf8; text-decoration: none; border-bottom: 1px solid rgba(129, 140, 248, 0.3); transition: all 0.2s ease; } .flowlock-article a:hover { color: #ffffff; border-bottom-color: #ffffff; } /* AdSense Container */ .flowlock-ad-container { background: #1e2029; border: 1px dashed #4f5b75; padding: 20px; margin: 2rem 0; text-align: center; border-radius: 8px; } /* Callout Box */ .flowlock-callout { background: rgba(99, 102, 241, 0.1); /* Low opacity brand color */ border: 1px solid #6366F1; padding: 1.5rem; border-radius: 8px; margin: 2rem 0; } /* CTA Footer */ .flowlock-cta { margin-top: 4rem; padding: 2.5rem; background: linear-gradient(145deg, #1e2029 0%, #16181d 100%); border-radius: 12px; text-align: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } .flowlock-cta h2 { border: none; padding: 0; text-align: center; margin-top: 0; } .flowlock-btn { display: inline-block; background-color: #6366F1; color: white !important; padding: 14px 28px; border-radius: 50px; font-weight: 600; font-size: 1.1rem; margin-top: 1rem; border: none; text-decoration: none; transition: background 0.2s; } .flowlock-btn:hover { background-color: #4f46e5; } .flowlock-small { font-size: 0.9rem; color: #94a3b8; }