.barsel-guide-page { margin: 0; background: #fff; color: #172033; font-family: "DM Sans", sans-serif; }
.barsel-guide-page main { max-width: none; margin: 0; padding: 0; }
.barsel-guide-page *, .barsel-guide-page *::before, .barsel-guide-page *::after { box-sizing: border-box; }
.barsel-guide-page [id] { scroll-margin-top: 6rem; }
.bg-wrap { width: min(100%, 72rem); margin-inline: auto; padding-inline: 1.5rem; }
.bg-breadcrumb { margin-bottom: 1.5rem; font-size: .875rem; }
.bg-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: #1d4ed8; text-underline-offset: .2em; }
.bg-eyebrow { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; }
.bg-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: .65rem 1.2rem; border: 2px solid #2563eb; border-radius: .375rem; background: #2563eb; color: #fff; font: inherit; font-weight: 600; text-align: center; text-decoration: none; }
.bg-action:hover { background: #1d4ed8; border-color: #1d4ed8; }
.bg-layout { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 44rem); gap: 4rem; align-items: start; padding-block: 3rem; }
.bg-contents { position: sticky; top: 6rem; }
.bg-contents p { margin: 0 0 .5rem; font-weight: 700; }
.bg-contents a { display: flex; align-items: center; min-height: 44px; padding-block: .5rem; color: #1d4ed8; line-height: 1.4; text-underline-offset: .2em; }
.bg-copy { min-width: 0; font-size: 1.0625rem; line-height: 1.75; }
.bg-copy p { margin: 0 0 1.2rem; }
.bg-copy .bg-reviewed { font-size: .875rem; color: #435168; }
.bg-copy h2 { margin: 2.5rem 0 1rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.bg-copy a { color: #1d4ed8; text-underline-offset: .2em; overflow-wrap: anywhere; }
.bg-copy .bg-action { color: #fff; }
.bg-copy ul, .bg-copy ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
.bg-copy li { padding-left: .15rem; margin-bottom: .65rem; }
.bg-copy table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; line-height: 1.55; }
.bg-copy caption { text-align: left; margin-bottom: .65rem; font-size: .875rem; color: #435168; }
.bg-copy th, .bg-copy td { padding: .8rem .65rem; border-bottom: 1px solid #d6deeb; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.bg-copy thead { background: #eef4ff; }
.bg-copy th { font-weight: 600; }
.bg-copy th[scope="row"] { width: 29%; }
.bg-note, .bg-example, .bg-next { padding: 1.25rem; border-radius: .5rem; background: #eef4ff; }
.bg-example { margin: 1.25rem 0; }
.bg-example .bg-eyebrow { color: #435168; }
.bg-example p:last-child, .bg-next p:last-child { margin-bottom: 0; }
.bg-equation { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.bg-equation strong { font-size: 1.8rem; font-weight: 700; }
.bg-sources a { display: inline-flex; align-items: center; min-height: 44px; }
.bg-next { margin-top: 2.5rem; }
.bg-next h2 { margin-top: 0; }
.bg-next .bg-action { margin-bottom: 1rem; }
.barsel-guide-page :is(a, button):focus-visible { outline: 3px solid #172033; outline-offset: 4px; }
@media (max-width: 760px) {
  .bg-wrap { padding-inline: 1.25rem; }
  .bg-breadcrumb { margin-bottom: .75rem; }
  .bg-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1.75rem; }
  .bg-contents { position: static; }
  .bg-copy { font-size: 1rem; line-height: 1.7; }
  .bg-copy th, .bg-copy td { padding: .7rem .4rem; }
  .bg-copy th[scope="row"] { width: 34%; }
  .bg-action { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .barsel-guide-page { scroll-behavior: auto; } }