/* Scoped to the How it works page; content remains managed in the backend. */
#how-it-works-page { clear: both; background: #f4f8fc; color: #102a4c; }
#how-it-works-page *, #how-it-works-page *::before, #how-it-works-page *::after { box-sizing: border-box; }
#how-it-works-page .container { width: 100%; max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
#how-it-works-page .how-page-hero { padding: 48px 0; background: #102a4c; }
#how-it-works-page .how-page-hero h1 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.25; }
#how-it-works-page .how-page-body.container { display: flow-root; clear: both; margin-top: 0 !important; padding-top: 48px !important; padding-bottom: 64px !important; }
#how-it-works-page .how-page-content { padding: 36px 40px; border: 1px solid #e2eaf3; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(26,57,91,.05); font-size: 16px; line-height: 1.8; color: #536881; overflow-wrap: anywhere; }
#how-it-works-page .how-page-content :is(h1,h2,h3,h4,h5,h6) { margin: 28px 0 14px; color: #102a4c; font-weight: 700; line-height: 1.35; }
#how-it-works-page .how-page-content > :first-child { margin-top: 0; }
#how-it-works-page .how-page-content h2 { font-size: 27px; }
#how-it-works-page .how-page-content :is(h3,h4) { font-size: 22px; }
#how-it-works-page .how-page-content p { margin: 0 0 18px; color: #536881; }
#how-it-works-page .how-page-content a { color: var(--directory-primary); text-decoration: underline; text-underline-offset: 3px; }
#how-it-works-page .how-page-content :is(ul,ol) { padding-left: 26px; margin: 16px 0 24px; }
#how-it-works-page .how-page-content li { margin: 10px 0; padding-left: 4px; }
#how-it-works-page .how-page-content li::marker { color: var(--directory-primary); font-weight: 700; }
#how-it-works-page .how-page-content img { max-width: 100%; height: auto; border-radius: 10px; }
#how-it-works-page .how-page-content blockquote { margin: 24px 0; padding: 18px 24px; border-left: 4px solid var(--directory-primary); background: var(--directory-primary-soft); border-radius: 0 8px 8px 0; }
#how-it-works-page .how-page-action { margin-top: 28px; text-align: center; }
#how-it-works-page .how-page-action a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; min-height: 46px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
@media (max-width: 767px) {
    #how-it-works-page .container { padding-left: 16px; padding-right: 16px; }
    #how-it-works-page .how-page-hero { padding: 32px 0; }
    #how-it-works-page .how-page-body.container { padding-top: 28px !important; padding-bottom: 40px !important; }
    #how-it-works-page .how-page-content { padding: 24px 20px; font-size: 15px; }
}