/* Public best-practice guides (/best-practices). Builds on the public site bundle (site.css). */
.bp-hero { padding: 52px 0 46px; }
.bp-hero h1 { color: #fff; max-width: 820px; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.15; margin: 10px 0 14px; }
.bp-jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.bp-jump .bp-jump-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid #ffffff40; border-radius: 999px; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; }
.bp-jump .bp-jump-link:hover { border-color: var(--gold); background: #ffffff14; }
.bp-index { padding-top: 24px; padding-bottom: 56px; }
.bp-function { padding-top: 34px; scroll-margin-top: 90px; }
.bp-function-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.bp-function-head h2 { margin: 0; color: var(--navy); font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.bp-function-head p { margin: 0; color: #4a5872; }
.bp-card p { font-size: .9rem; }

.bp-guide .site-article-hero h1 { max-width: 900px; }
.bp-hero-actions { margin: 22px 0 0; }
.bp-guide .site-article-body section { scroll-margin-top: 90px; }
.bp-why { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.bp-why li { position: relative; padding: 14px 18px 14px 44px; border-radius: 12px; background: #f4f7fc; color: #24324a; line-height: 1.7; }
.bp-why li::before { content: ""; position: absolute; left: 18px; top: 22px; width: 10px; height: 10px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.bp-ladder { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bp-level { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.bp-level h3 { margin: 4px 0 6px; color: var(--navy); font-size: 1.08rem; }
.bp-level p { margin: 0 0 8px; color: #24324a; line-height: 1.7; }
.bp-level-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #b5c7e2; color: var(--navy); font-family: var(--font-display, var(--font-heading)); }
.bp-level-3 .bp-level-num { background: var(--gold); border-color: var(--gold); }
.bp-artifacts { margin: 0 0 8px; padding-left: 1.15rem; color: #34435b; }
.bp-artifacts li { margin: 3px 0; line-height: 1.6; }
.bp-next { padding: 8px 12px; border-left: 3px solid var(--gold); background: #fbf6ea; border-radius: 0 8px 8px 0; font-size: .92rem; }
.bp-legend { color: #4a5872; font-size: .88rem; }
.bp-wins { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bp-wins li { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.bp-win-title { margin: 0; color: var(--navy); font-weight: 700; line-height: 1.45; }
.bp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.bp-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid #cfd8e8; border-radius: 999px; background: #f4f7fc; color: #24324a; font-size: .74rem; font-weight: 700; }
.bp-tag-free { border-color: #9fd3ae; background: #e9f6ed; color: #155f2a; }
.bp-tag-low { border-color: #b6c8f2; background: #ecf1fd; color: #1d3f91; }
.bp-tag-budget { border-color: #f0cf8c; background: #fdf3df; color: #6b4600; }
.bp-tag-owner { background: #fff; font-weight: 600; color: #3b4a63; }
.bp-how { margin: 0; color: #34435b; font-size: .9rem; line-height: 1.65; }
.bp-pitfalls { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bp-pitfalls li { padding: 12px 16px; border-left: 3px solid #c47f00; background: #fdf6e8; border-radius: 0 10px 10px 0; color: #2b2410; line-height: 1.65; }
.bp-owners li { margin: 8px 0; line-height: 1.65; }
.bp-owners strong { color: var(--navy); margin-right: 6px; }
.bp-tip { padding: 10px 14px; border-left: 3px solid var(--gold); background: #fbf6ea; border-radius: 0 8px 8px 0; }
.bp-links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bp-links li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.bp-links a { font-weight: 700; }
.bp-links span { display: block; color: #4a5872; font-size: .8rem; font-weight: 700; margin-top: 2px; }
.bp-links p { margin: 4px 0 0; color: #34435b; font-size: .9rem; line-height: 1.6; }
.bp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 36px 0 0; }
.bp-pager a { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; color: var(--navy); font-weight: 700; text-decoration: none; }
.bp-pager a:hover { border-color: var(--sky); }
.bp-pager a[rel=next] { text-align: right; }
.bp-pager span { color: #4a5872; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.bp-glossary { padding-top: 24px; padding-bottom: 56px; }
.bp-glossary section h2 { margin: 30px 0 12px; color: var(--navy); border-bottom: 1px solid var(--border); padding-bottom: 6px; scroll-margin-top: 90px; }
.bp-glossary dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 0; }
.bp-term { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.bp-term dt { color: var(--navy); font-weight: 800; }
.bp-term dt span { display: block; color: #4a5872; font-weight: 600; font-size: .85rem; }
.bp-term dd { margin: 6px 0 0; color: #24324a; line-height: 1.6; font-size: .92rem; }
.practices-public abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
@media (max-width: 760px) {
  .bp-level { grid-template-columns: 1fr; padding: 16px; }
  .bp-pager { grid-template-columns: 1fr; }
  .bp-pager a[rel=next] { text-align: left; }
}
@media print {
  .site-header, .site-footer, .site-crumb-bar, .site-article-aside, .home-final-cta, .bp-hero-actions, .bp-pager { display: none !important; }
  .bp-level, .bp-wins li { break-inside: avoid; }
}