/* Highlight Panel — dark teal overlay panel with checklist + CTAs. */
.highlight-panel { background: var(--brand-white); padding: 100px 0; }
/* min-height + flex-center is deliberate, not cosmetic: .highlight-panel-bg and
   .highlight-panel-overlay are position:absolute (removed from flow), so without an
   explicit min-height here, the panel's rendered height comes ONLY from the card's
   own content — collapsing the whole panel down to just the card when content is
   short and leaving the bg/overlay with nothing meaningful to fill. */
.highlight-panel-box { position: relative; overflow: hidden; border-radius: 20px; min-height: 480px; display: flex; align-items: center; padding: 66px;}
.highlight-panel-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.highlight-panel-overlay { position: absolute; inset: 0; background: var(--brand-black); opacity: 0.75; }
.highlight-panel-card { position: relative; z-index: 1; width: 100%; padding: 66px; display: flex; flex-direction: column; gap: 32px; background-color: rgba(255,255,255,.85); border-radius: 20px;}
.highlight-panel-card h2 { color: var(--brand-white); }
.highlight-panel-inner { display: flex; flex-direction: column; gap: 24px; max-width: 700px; }
.highlight-panel-inner p { font-family: var(--font-body); font-size: 18px; line-height: 26px; margin: 0; }
.highlight-panel-inner strong { color: var(--brand-white); }
.highlight-panel-inner a { color: var(--brand-white); text-decoration: underline; }
/* Rich-text content (WYSIWYG) produces a plain <ul> — style it with the same
   checkmark look the old hardcoded .checklist markup had, since admin-typed
   lists here won't include the fa-check <i> icon markup. */
.highlight-panel-inner ul { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.highlight-panel-inner ul li {
    position: relative;
    padding-left: 28px;
    font-family: var(--font-body);
}
.highlight-panel-inner ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-teal);
    font-weight: 700;
}
.highlight-panel-actions { display: flex; gap: 16px; }

@media (max-width: 991.98px) {
    .highlight-panel-box { min-height: 0; }
    .highlight-panel-card { padding: 48px; }
}

@media (max-width: 767.98px) {
    .highlight-panel { padding: 56px 0; }
    .highlight-panel-card { padding: 32px; }
    .highlight-panel-actions { flex-direction: column; }
    .highlight-panel-actions .btn { width: 100%; justify-content: center; }
}