/* Featured Bookkeeping service in "What we do": a wide navy panel with a "New service" badge. */
.hf-bk-feature { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); align-items: center; gap: 44px; margin: 0 0 32px; padding: 40px 44px; border: 1px solid rgba(203,213,225,.16); border-left: 5px solid #43c7cb; border-radius: 22px; background: #0e1624; color: #fff; box-shadow: 0 16px 36px rgba(14,22,36,.14); }
.hf-bk-feature.is-selected { box-shadow: 0 0 0 3px #43c7cb, 0 16px 36px rgba(14,22,36,.14); }
.hf-bk-main, .hf-bk-side { min-width: 0; }
.hf-bk-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hf-bk-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg,#006fd7,#007a87); color: #fff; }
.hf-bk-new { padding: 6px 12px; border: 1px solid rgba(67,199,203,.55); border-radius: 999px; background: rgba(67,199,203,.12); color: #43c7cb; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.hf-bk-feature h3 { margin: 0 0 12px; color: #fff; font-size: clamp(30px,3.2vw,44px); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; }
.hf-bk-main p { margin: 0; max-width: 560px; color: #cbd5e1; font-size: 16px; line-height: 1.7; }
.hf-bk-side { padding: 24px; border: 1px solid rgba(67,199,203,.3); border-radius: 16px; background: rgba(67,199,203,.07); }
.hf-bk-side p { margin: 0; color: #cbd5e1; font-size: 14px; line-height: 1.7; }
.hf-bk-side strong { color: #43c7cb; }
.hf-bk-rule { color: #fff !important; font-size: 15px !important; font-weight: 600; }
.hf-bk-alt { margin-top: 8px !important; }
.hf-bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 20px; }
.hf-bk-button { min-height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: #006fd7; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(0,111,215,.18); }
.hf-bk-button:hover { background: #005eb8; }
.hf-bk-link { display: inline-flex; align-items: center; min-height: 44px; color: #43c7cb; font-size: 14px; font-weight: 700; text-decoration: none; }
.hf-bk-link:hover { color: #fff; }
.hf-bk-feature button:focus-visible, .hf-bk-feature a:focus-visible { outline: 3px solid #43c7cb; outline-offset: 3px; }
@media (max-width: 900px) { .hf-bk-feature { grid-template-columns: 1fr; gap: 26px; padding: 32px; } }
@media (max-width: 520px) { .hf-bk-feature { padding: 22px; border-radius: 16px; } .hf-bk-side { padding: 18px; } .hf-bk-button { width: 100%; } }