.best-practices-guide {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.best-practices-guide h2 { margin-top: 2.8rem; }
.best-practices-guide h3 { margin: .4rem 0 1rem; font-size: 1.25rem; line-height: 1.35; }
.best-practices-guide .practice-jumps {
  display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 2rem;
}
.best-practices-guide .practice-jumps a {
  padding: .4rem .8rem; border: 1px solid #3a3457; border-radius: 999px;
  background: #1b172c; color: #d1bcff; font-size: .9rem; text-decoration: none;
}
.best-practices-guide .practice-jumps a:hover { background: #2b2240; }
.best-practices-guide .practice-jumps a:focus-visible { outline: 2px solid #bda4ff; outline-offset: 3px; }
.best-practices-guide .practice-grid { display: grid; gap: 1rem; margin: 1.3rem 0 1.6rem; }
.best-practices-guide .practice-horizons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.best-practices-guide .practice-checks,
.best-practices-guide .practice-clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.best-practices-guide .practice-card {
  --practice-accent: #bda4ff;
  min-width: 0; padding: 1.25rem; border: 1px solid #303247;
  border-top: 3px solid var(--practice-accent); border-radius: 14px;
  background: linear-gradient(145deg, #191b2b, #11141d 80%);
  font-size: 1rem; line-height: 1.7;
}
.best-practices-guide .practice-mint { --practice-accent: #63e5c4; background: linear-gradient(145deg, #142b2a, #11191d 80%); }
.best-practices-guide .practice-blue { --practice-accent: #54d1e8; background: linear-gradient(145deg, #142632, #11171f 80%); }
.best-practices-guide .practice-purple { --practice-accent: #bda4ff; background: linear-gradient(145deg, #261e3b, #15131f 80%); }
.best-practices-guide .practice-gold { --practice-accent: #ffe174; background: linear-gradient(145deg, #2b261b, #19171b 80%); }
.best-practices-guide .practice-eyebrow {
  color: var(--practice-accent); font-size: .76rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.best-practices-guide .practice-card p { margin: .6rem 0; }
.best-practices-guide .practice-card p:last-child { margin-bottom: 0; }
.best-practices-guide .practice-card dl { margin: 0; }
.best-practices-guide .practice-card dt {
  margin: 1rem 0 .35rem; color: var(--practice-accent); font-size: .76rem;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.best-practices-guide .practice-card dd { margin: 0; }
.best-practices-guide .practice-card a { text-underline-offset: 3px; }
.best-practices-guide .practice-note {
  padding: 1rem 1.2rem; margin: 1.2rem 0; border-left: 3px solid #bda4ff;
  background: #1b1728; border-radius: 0 12px 12px 0;
}
.best-practices-guide .practice-mappings { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.best-practices-guide .practice-mappings span {
  padding: .3rem .7rem; background: #16282e; border: 1px solid #2a4c55;
  border-radius: 8px; color: #8be5ed; font-size: .95rem;
}
.best-practices-guide .practice-state {
  display: inline-block; margin: .15rem .2rem .15rem 0; padding: .1rem .5rem;
  border: 1px solid currentColor; border-radius: 6px; font-size: .82rem; font-weight: 700;
}
.best-practices-guide .practice-call { color: #71efb4; }
.best-practices-guide .practice-hvl { color: #54d1e8; }
.best-practices-guide .practice-put { color: #ff9b9b; }
.best-practices-guide .practice-visible { color: #63e5c4; }
.best-practices-guide .practice-offscreen { color: #78caff; }
.best-practices-guide .practice-filtered { color: #ffe174; }
.best-practices-guide .practice-disabled { color: #bdc6d8; }
.best-practices-guide .practice-tools .practice-card { border-top-width: 1px; border-left: 3px solid var(--practice-accent); }
.best-practices-guide .practice-tools h3 { margin-bottom: .5rem; }
@media (max-width: 1100px) {
  .best-practices-guide .practice-horizons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .best-practices-guide .practice-horizons,
  .best-practices-guide .practice-checks,
  .best-practices-guide .practice-clocks { grid-template-columns: minmax(0, 1fr); }
  .best-practices-guide .practice-card { padding: 1.15rem; }
}
