/* /faq and /how-to (marketing.faq / marketing.how_to). Page-local, so the
   shared marketing stylesheet stays untouched. */
.hp-wrap { max-width: 860px; }
.hp-top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.hp-page h2 { margin-top: 2rem; }
.hp-qa { padding: 14px 0; border-bottom: 1px solid var(--border, #e5e1da); }
.hp-page .hp-qa h3 { margin: 0 0 6px; font-size: 1.08rem; line-height: 1.35; }
.hp-qa p { margin: 0 0 6px; line-height: 1.55; }
.hp-qa .mk-plans { margin-top: 12px; }
.hp-price { font-size: 0.98rem; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.hp-steps { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: none; }
.hp-step { padding: 16px 0 14px; border-bottom: 1px solid var(--border, #e5e1da); }
.hp-page .hp-step h2 { margin: 0 0 6px; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.hp-step p { margin: 0 0 6px; line-height: 1.55; }
.hp-step-num {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--primary, #2f6f4f); color: #fff; font-size: 1rem; font-weight: 700;
}
.hp-page, .hp-page p, .hp-page h1, .hp-page h2, .hp-page h3 { overflow-wrap: break-word; }
@media (max-width: 480px) {
    .hp-actions .mk-btn { flex: 1 1 100%; text-align: center; }
}