:root{
  --ob-max: 1040px;
}
.container-ob{ max-width: var(--ob-max); }
.hero{
  background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,0));
  border: 1px solid rgba(13,110,253,.15);
}
.sticky-toc{
  top: 1rem;
}
.badge {
  background: #0e4765;
}
.badge-soft{
  background: rgba(13,110,253,.10);
  border: 1px solid rgba(13,110,253,.20);
  color: #0b57d0;
  font-weight: 600;
}
.callout{
  border-left: 4px solid #ffc107;
  background: rgba(255,193,7,.08);
}

.state-card { 
  transition: transform .08s ease, box-shadow .08s ease; 
}
.state-card:hover { 
  transform: translateY(-1px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.06); 
}
.state-card:active { transform: translateY(0); }
.pill { 
  font-size: .85rem; 
}
.small-muted { 
  color: #6c757d; font-size: .9rem; 
}
#bookmarkBtn i {
  opacity: .85;
}
#bookmarkBtn:hover i {
  opacity: 1;
}
.section-anchor{ scroll-margin-top: 90px; }
.footer-links a{ text-decoration: none; }
.disclaimer {
  padding: 20px;
  font-size: 12px;
}

.navbar {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.ob-logo {
  height: 56px;  /* default: mobile-first */
  width: auto;
  display: block;
}

@media (max-width: 360px) { /* Small phones */
  .ob-logo {
    height: 48px;
  }
}

@media (min-width: 768px) { /* Tablets and up */
  .ob-logo {
    height: 64px;
  }
}

@media (min-width: 1200px) { /* Large desktop */
  .ob-logo {
    height: 68px;
  }
}