/* Editorial presentation shared by the three article layouts. */
.bp_hero, .bt_hero, .ba_hero {
  background: #0c1b2e;
  text-align: left;
  padding: 84px 32px 76px;
}
.bp_hero_glow, .bt_hero_glow, .ba_hero_glow { display: none; }
/* The static radial glow is replaced by the same animated silk aurora the blog
   index and marketing hero use; aurora-silk.js binds every .aurora_silk_canvas. */
.bp_atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bp_atmosphere .aurora_silk_canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.bp_hero_inner, .bt_hero_inner, .ba_hero_inner { position: relative; z-index: 1; }
/* Masthead was entirely white on navy. Carry the brand orange through the byline
   and the Sections control so the type has a hierarchy instead of one flat tone. */
.bp_meta > span:first-child, .bt_meta > span:first-child, .ba_meta > span:first-child {
  color: var(--ss-orange, #ee6723);
  font-weight: var(--fw-medium, 500);
}
.bp_sections_button { color: var(--ss-orange, #ee6723); border-bottom-color: currentColor; }
.bp_sections_button:hover { color: #ff8a4c; }
.bp_lede, .bt_lede { border-left: 2px solid rgba(238,103,35,.55); padding-left: 18px; }
.bp_hero_inner, .bt_hero_inner, .ba_hero_inner { max-width: 900px; text-align: left; }
.bp_hero_inner { margin: 0 auto; }
.bp_eyebrow, .bt_eyebrow, .ba_eyebrow {
  gap: 10px;
  padding: 0;
  margin-bottom: 24px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.bp_eyebrow_dot, .bt_eyebrow_dot, .ba_eyebrow_dot {
  width: 18px;
  height: 2px;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
.bp_eyebrow_text, .bt_eyebrow_text, .ba_eyebrow_text {
  color: #c7d1df;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
}
.bp_title, .bt_title, .ba_title {
  max-width: 900px;
  font-size: clamp(32px, 3.7vw, 50px);
  line-height: 1.19;
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin-bottom: 24px;
}
.ba_title { max-width: 780px; font-size: clamp(30px, 3.2vw, 42px); }
.ba_hero { padding-top: 66px; padding-bottom: 64px; }
.bp_lede, .bt_lede {
  max-width: 760px;
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.75;
  color: #becada;
}
.bp_meta, .bt_meta, .ba_meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  line-height: 1.8;
  color: #b7c4d4;
}
.bp_hero_tags { justify-content: flex-start; gap: 8px; margin-top: 26px; }
.bp_hero_tags .bp_tag {
  padding: 5px 9px;
  background: transparent;
  border-color: rgba(213,224,238,.19);
  border-radius: 4px;
  color: #c7d1df;
  font-size: 11px;
}
.bp_tag::before { content: none; }
/* The breadcrumb was a light band wedged between the dark nav and the dark
   masthead, cutting the header into three stripes. It belongs to the masthead:
   same navy, no border, so nav -> breadcrumb -> hero reads as one block. */
.bp_breadcrumb, .bt_breadcrumb, .ba_back {
  margin-top: 64px;
  background: #0c1b2e;
  border-bottom: 0;
  padding: 18px 0 0;
}
/* The affordance was inverted: the current page (not clickable) sat at .74 while
   the links sat at .52, so the one item you cannot click looked the most
   important. Links are now the brighter, underlined elements and the current
   page is the quiet one — which also makes the nesting read left-to-right. */
.bp_breadcrumb_inner, .bt_breadcrumb_inner { gap: 4px; }
.bp_breadcrumb_inner a, .bt_breadcrumb_inner a {
  color: rgba(255,255,255,.82);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.28);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .16s ease, text-decoration-color .16s ease, background-color .16s ease;
}
.bp_breadcrumb_inner a:hover, .bt_breadcrumb_inner a:hover {
  color: #fff;
  text-decoration-color: var(--ss-orange, #ee6723);
  background: rgba(255,255,255,.07);
}
.bp_breadcrumb_inner a:focus-visible, .bt_breadcrumb_inner a:focus-visible {
  outline: 2px solid var(--ss-orange, #ee6723);
  outline-offset: 2px;
}
/* Separators sit between the steps, not on them, so they stay quiet and give the
   trail its rhythm. */
.bp_breadcrumb_sep, .bt_breadcrumb_sep { color: rgba(255,255,255,.3); margin: 0 3px; }
/* Where you are: legible, but plainly not a control. */
.bp_crumb_current, .bt_crumb_current {
  color: rgba(255,255,255,.55);
  font-weight: 400;
  text-decoration: none;
  padding: 2px 0;
}
/* The hero carries the top padding now, so it does not double up. */
.bp_hero, .bt_hero, .ba_hero { padding-top: 40px; }
.bp_breadcrumb_inner, .bt_breadcrumb_inner { max-width: 964px; font-size: 12px; }
.ba_back_inner { max-width: 964px; }
.bp_hero_image { max-width: 1012px; margin-top: 36px; }
.bp_hero_image img { border-radius: 6px; box-shadow: none; border: 1px solid #e8edf2; }
.bp_article, .ba_article {
  box-sizing: border-box;
  max-width: 768px;
  padding: 64px 24px 72px;
}
.bp_article, .bt_article, .ba_article {
  color: #39485b;
  font-size: 17px;
  line-height: 1.85;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.bt_layout { max-width: 1068px; grid-template-columns: minmax(0, 720px) 220px; gap: 64px; padding-top: 64px; }
.bt_article { max-width: 720px; }
.bp_article p, .bt_article p, .ba_article p { margin-bottom: 1.4em; }
.bp_article h2, .bt_article h2, .ba_article h2 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.025em;
  color: #102237;
  margin: 2.2em 0 .8em;
}
.bp_article h3, .bt_article h3, .ba_article h3 {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #102237;
  margin: 1.8em 0 .7em;
}
.bp_article h4, .bt_article h4, .ba_article h4 { font-size: 18px; line-height: 1.5; font-weight: 600; }
.bp_article img, .bt_article img, .ba_article img { border-radius: 5px; }
.bp_article blockquote, .bt_article blockquote, .ba_article blockquote {
  padding: 8px 0 8px 24px;
  border-left: 2px solid #d8e0e9;
  color: #263d57;
  font-size: 19px;
  line-height: 1.75;
  font-style: normal;
  margin: 2em 0;
}
.bp_article pre, .bt_article pre, .ba_article pre { border-radius: 6px; padding: 24px; line-height: 1.75; }
.bp_article li, .bt_article li, .ba_article li { margin-bottom: .6em; }
.bp_article .bp_toc {
  background: #f8fafc;
  border: 1px solid #e5eaf0;
  border-radius: 6px;
  box-shadow: none;
  padding: 26px 28px;
  margin-bottom: 42px;
}
.bp_toc a { font-size: 14px; line-height: 1.65; }
.bp_toc_label, .bt_toc_label { font-size: 10px; letter-spacing: .12em; color: #5c6d81; }
.bt_toc a { font-size: 12px; line-height: 1.7; padding-top: 8px; padding-bottom: 8px; }
.bp_post_footer, .ba_footer, .bp_tags_footer { max-width: 768px; border-color: #e6ebf0; }
.bt_post_footer { border-color: #e6ebf0; }
.bp_tags_footer .bp_tag { border-radius: 4px; background: #f8fafc; border-color: #e6ebf0; }
.bp_related, .bt_related { background: #f8fafc; padding-top: 64px; padding-bottom: 72px; border-top-color: #e6ebf0; }
.bp_related_head { text-align: left; margin-bottom: 28px; }
.bp_related_card, .bt_related_card { border-radius: 6px; box-shadow: none; border-color: #e1e7ee; padding: 28px; }
.bp_related_card:hover, .bt_related_card:hover { transform: none; box-shadow: none; border-color: #aab8c8; }
.bp_related_card::before, .bt_related_card::before { display: none; }
.bp_related_card_title, .bt_related_card_title { font-size: 18px; line-height: 1.55; font-weight: 600; }
.bp_related_card_cat, .bt_related_card_cat { font-size: 10px; letter-spacing: .1em; }
@media (max-width: 900px) {
  .bt_layout { grid-template-columns: minmax(0, 720px); max-width: 768px; gap: 32px; }
}
@media (max-width: 640px) {
  .bp_hero, .bt_hero, .ba_hero { padding: 52px 22px 46px; }
  .bp_title, .bt_title, .ba_title { font-size: 30px; line-height: 1.23; margin-bottom: 22px; }
  .bp_lede, .bt_lede { font-size: 16px; line-height: 1.8; }
  .bp_hero_image { margin-top: 24px; padding: 0 20px; }
  .bp_article, .ba_article { padding: 42px 22px 52px; }
  .bt_layout { padding: 42px 22px 52px; }
  .bp_article, .bt_article, .ba_article { font-size: 16px; line-height: 1.85; }
  .bp_article h2, .bt_article h2, .ba_article h2 { font-size: 24px; }
  .bp_article h3, .bt_article h3, .ba_article h3 { font-size: 20px; }
  .bp_article .bp_toc { padding: 22px 18px; }
  .bp_article pre, .bt_article pre, .ba_article pre { padding: 18px; }
  .bp_related_grid, .bt_related_grid { grid-template-columns: minmax(0, 1fr); }
  .bp_related_card, .bt_related_card { padding: 24px; }
}
/* Existing author-provided captions retain their text and a quiet hierarchy. */
.bp_article figure, .bt_article figure, .ba_article figure { margin: 2em 0; max-width: 100%; }
.bp_article figcaption, .bt_article figcaption, .ba_article figcaption,
.bp_article .caption, .bt_article .caption, .ba_article .caption {
  margin: 12px auto 0;
  max-width: 640px;
  color: #617185;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.bp_article pre, .bt_article pre, .ba_article pre {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  background: #0c1b2e;
  color: #edf3fa;
  border: 1px solid #26384e;
  scrollbar-width: thin;
  tab-size: 2;
}
.bp_article pre code, .bt_article pre code, .ba_article pre code {
  display: block;
  min-width: min-content;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  white-space: inherit;
  overflow-wrap: normal;
  word-break: normal;
}
.bp_article .highlight, .bt_article .highlight, .ba_article .highlight { max-width: 100%; min-width: 0; }
.bp_article pre:focus-visible, .bt_article pre:focus-visible, .ba_article pre:focus-visible,
.bp_toc summary:focus-visible, .bt_toc summary:focus-visible,
.bp_toc a:focus-visible, .bt_toc a:focus-visible {
  outline: 2px solid var(--ss-orange);
  outline-offset: 4px;
}
.bp_toc summary, .bt_toc summary {
  display: list-item;
  cursor: pointer;
  padding: 4px 0;
  line-height: 1.65;
  margin: 0;
}
.bp_toc summary::before { display: none; }
.bp_toc summary::marker, .bt_toc summary::marker { color: #9c511f; }
.bp_toc details[open] summary, .bt_toc details[open] summary { margin-bottom: 20px; }
.bp_toc a { min-height: 32px; align-items: center; }
.bt_toc[hidden] { display: none !important; }
.bp_related_grid, .bt_related_grid { align-items: stretch; }
.bp_related_card, .bt_related_card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bp_related_card .blog_card_media, .bt_related_card .blog_card_media {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-bottom: 1px solid #e1e7ee;
  border-radius: 0;
  overflow: hidden;
}
.bp_related_card .blog_card_media img, .bt_related_card .blog_card_media img { width: 100%; height: 100%; object-fit: cover; }
.bp_related_card_body, .bt_related_card_body { padding: 24px; }
.bp_related_card_title, .bt_related_card_title { margin-bottom: 0; }
@media (max-width: 900px) {
  .bt_toc { display: block; position: static; grid-row: 1; width: 100%; padding: 22px; background: #f8fafc; border: 1px solid #e5eaf0; border-radius: 6px; }
  .bt_toc a { min-height: 36px; }
  .bp_article .bp_toc { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp_article *, .bt_article *, .ba_article *,
  .bp_related *, .bt_related *, .bp_toc *, .bt_toc * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* A compact editorial masthead keeps the story, artwork and byline together. */
.bp_hero, .bt_hero, .ba_hero {
  padding: clamp(40px, 5vw, 72px) 32px;
  border-bottom: 1px solid rgba(192, 211, 236, .12);
}
.bp_hero_inner, .bt_hero_inner, .ba_hero_inner { max-width: 900px; margin-inline: auto; }
.bp_eyebrow, .bt_eyebrow, .ba_eyebrow { margin-bottom: 20px; }
.bp_eyebrow_text, .bt_eyebrow_text, .ba_eyebrow_text {
  color: #f29559;
  font-size: 11px;
  letter-spacing: .14em;
}
.bp_title, .bt_title, .ba_title {
  max-width: 22ch;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin: 0 0 22px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.bp_lede, .bt_lede {
  max-width: 66ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  margin: 0 0 28px;
  color: #c0cddd;
  text-wrap: pretty;
}
.bp_meta, .bt_meta, .ba_meta { font-size: 13px; color: #b6c5d7; gap: 12px; }
.bp_meta time, .bt_meta time, .ba_meta time { font-variant-numeric: tabular-nums; }
.bp_hero_image { max-width: 964px; margin-top: 32px; }
.bp_hero_image img {
  max-height: 560px;
  object-fit: contain;
  background: #f4f7fa;
  border-radius: 12px;
}
.bp_article, .bt_article, .ba_article { text-wrap: pretty; }
.bp_article h2, .bt_article h2, .ba_article h2,
.bp_article h3, .bt_article h3, .ba_article h3 { scroll-margin-top: 100px; text-wrap: balance; }
.bp_article a, .bt_article a, .ba_article a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bp_article a:focus-visible, .bt_article a:focus-visible, .ba_article a:focus-visible,
.bp_related_card:focus-visible, .bt_related_card:focus-visible {
  outline: 2px solid #c5551b;
  outline-offset: 5px;
  border-radius: 3px;
}
.bp_article blockquote, .bt_article blockquote, .ba_article blockquote {
  border-left-color: #ee6723;
  background: transparent;
}
.bp_article .bp_toc, .bt_toc {
  border-radius: 10px;
  background: #f7f9fc;
}
.bp_toc_label, .bt_toc_label { font-size: 11px; }
.bp_related_card, .bt_related_card {
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bp_related_card:hover, .bt_related_card:hover {
  border-color: #bdcbdc;
  box-shadow: 0 8px 28px rgba(13, 34, 58, .06);
}
.bp_related_card .blog_card_media img, .bt_related_card .blog_card_media img { object-fit: contain; }
.bp_related_card_body, .bt_related_card_body { padding: 24px; }
@media (max-width: 640px) {
  .bp_hero, .bt_hero, .ba_hero { padding: 36px 24px 32px; }
  .bp_title, .bt_title, .ba_title { font-size: clamp(30px, 7.6vw, 40px); line-height: 1.17; margin-bottom: 18px; }
  .bp_lede, .bt_lede { font-size: 15px; line-height: 1.75; margin-bottom: 22px; }
  .bp_eyebrow, .bt_eyebrow, .ba_eyebrow { margin-bottom: 16px; }
  .bp_meta, .bt_meta, .ba_meta { font-size: 12px; gap: 9px; }
  .bp_hero_image { margin-top: 24px; padding-inline: 24px; }
  .bp_hero_image img { border-radius: 8px; }
}

/* Keep location navigation below the fixed global header at every width. */
.bp_breadcrumb_inner, .bt_breadcrumb_inner { flex-wrap: nowrap; min-width: 0; }
.bp_breadcrumb_inner a, .bt_breadcrumb_inner a { flex-shrink: 0; }
.bp_crumb_current, .bt_crumb_current { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.blog_reading_time{white-space:nowrap;font-size:12px;color:inherit}
.bp_meta,.bt_meta,.ba_meta{flex-wrap:wrap}

/* A consistent reading surface across essays, technical guides and announcements. */
:is(.bp_article, .bt_article, .ba_article) {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:is(.bp_article, .bt_article, .ba_article) > :first-child { margin-top: 0; }
:is(.bp_article, .bt_article, .ba_article) :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: 0; }
:is(.bp_article, .bt_article, .ba_article) :is(ul, ol) { padding-left: 1.4em; }
:is(.bp_article, .bt_article, .ba_article) li::marker { color: #a95729; }
:is(.bp_article, .bt_article, .ba_article) li > :is(ul, ol) { margin-top: .6em; margin-bottom: .6em; }
:is(.bp_article, .bt_article, .ba_article) p a {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: #d8a48a;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .18s ease, text-decoration-color .18s ease;
}
:is(.bp_article, .bt_article, .ba_article) p a:hover { text-decoration-color: currentColor; }
:is(.bp_article, .bt_article, .ba_article) blockquote {
  border-radius: 0 10px 10px 0;
  background: #f7f9fc;
  padding: 22px 26px;
  margin: 2em 0;
}
:is(.bp_article, .bt_article, .ba_article) blockquote > :last-child { margin-bottom: 0; }
:is(.bp_article, .bt_article, .ba_article) :not(pre) > code {
  padding: .14em .38em;
  font: .85em/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #24435f;
  background: #f1f4f8;
  border: 1px solid #e0e7ef;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
:is(.bp_article, .bt_article, .ba_article) pre {
  margin: 2em 0;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
/* Keep wide source tables usable on small screens without shrinking their text. */
:is(.bp_article, .bt_article, .ba_article) table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 2em 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid #e0e7ef;
  border-radius: 10px;
  border-spacing: 0;
  border-collapse: separate;
  font-size: 14px;
  line-height: 1.65;
  scrollbar-width: thin;
}
:is(.bp_article, .bt_article, .ba_article) :is(th, td) {
  min-width: 128px;
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e6ebf1;
}
:is(.bp_article, .bt_article, .ba_article) th { background: #f2f5f9; color: #203750; font-weight: 600; }
:is(.bp_article, .bt_article, .ba_article) tbody tr:nth-child(even) { background: #fafbfd; }
:is(.bp_article, .bt_article, .ba_article) tbody tr:last-child td { border-bottom: 0; }
:is(.bp_article, .bt_article, .ba_article) hr { margin: 3em 0; border: 0; border-top: 1px solid #e0e7ef; }
.bp_article .bp_toc { background: #fff; border-color: #dfe6ee; padding: 24px 28px; }
.bp_toc ol { gap: 2px; }
.bp_toc li { margin-bottom: 0; }
.bp_toc a { border-bottom: 0; padding: 7px 0; color: #40556e; }
.bp_toc a::before { font-variant-numeric: tabular-nums; color: #a95729; }
.bp_toc .lvl3 a { font-size: 13px; color: #63758b; }
.bt_toc { background: transparent; max-height: calc(100dvh - 124px); overflow-y: auto; scrollbar-width: thin; }
.bt_toc a { color: #5a6e86; padding-block: 10px; }
.bt_toc a.is-active { color: #a04c1c; background: #fff5ee; border-left-color: #e86a25; }
.bp_post_footer, .bt_post_footer { padding-top: 28px; padding-bottom: 28px; }
.bp_share a, .bt_share a {
  width: 44px;
  height: 44px;
  border: 1px solid #dde5ee;
  background: #fff;
  color: #37506d;
}
.bp_share a:focus-visible, .bt_share a:focus-visible, .ba_footer a:focus-visible {
  outline: 2px solid #c5551b;
  outline-offset: 4px;
}
.bp_related_card_body, .bt_related_card_body { flex: 1; }
.bp_related_card_title, .bt_related_card_title { text-wrap: pretty; }
@media (max-width: 900px) {
  .bt_toc { max-height: none; overflow: visible; background: #fff; }
}
@media (max-width: 640px) {
  :is(.bp_article, .bt_article, .ba_article) blockquote { font-size: 17px; padding: 18px 20px; }
  :is(.bp_article, .bt_article, .ba_article) :is(th, td) { padding: 12px 14px; }
  .bp_article .bp_toc { padding: 20px; }
  .bp_toc a, .bt_toc a { min-height: 40px; }
  .bp_post_footer { margin-inline: 24px; padding-inline: 0; }
  .bp_tags_footer { margin-inline: 24px; padding-inline: 0; }
}

/* Verified product and documentation paths for readers who want to go deeper. */
.blog_resources {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 28px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #f8fafc;
}
.blog_resources h2 {
  margin: 0 0 20px;
  color: #6b7c90;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog_resources_list { list-style: none; padding: 0; margin: 0; }
.blog_resources_list li { margin: 0; padding: 0; }
.blog_resources_list li + li { border-top: 1px solid #e0e7ef; margin-top: 20px; padding-top: 20px; }
.blog_resources_list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0;
  color: #17334f;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
.blog_resources_list a span { color: #b45c29; }
.blog_resources_list a:hover { color: #a44d20; }
.blog_resources_list a:focus-visible { outline: 2px solid #c5551b; outline-offset: 4px; border-radius: 2px; }
.blog_resources_list p { margin: 7px 0 0; color: #5e7086; font-size: 14px; line-height: 1.75; }
.bt_article .blog_resources { margin-top: 40px; }
@media (max-width: 768px) {
  .blog_resources { margin-inline: 24px; padding: 24px; }
  :is(.bp_article, .bt_article, .ba_article) .blog_resources { margin-inline: 0; }
}

/* Quiet contents navigation: a slim disclosure, not a callout card. */
.bp_article .bp_toc{background:transparent;border:0;border-bottom:1px solid #e2e8ef;border-radius:0;padding:0;margin:0 0 28px;box-shadow:none}
.bp_toc .bp_toc_label{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:10px 0;margin:0;font-size:13px;line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none;color:#40556e;list-style:none}
.bp_toc .bp_toc_label::-webkit-details-marker{display:none}
.bp_toc .bp_toc_label::marker{content:""}
.bp_toc .bp_toc_label::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:4px;margin-top:-4px;flex:none}
.bp_toc details[open] .bp_toc_label{margin-bottom:4px}
.bp_toc details[open] .bp_toc_label::after{transform:rotate(225deg);margin-top:4px}
.bp_toc .bp_toc_details>ol{margin:0;padding:0 0 16px;gap:0}
.bp_toc a{padding:8px 0;font-size:14px;text-decoration:none}
.bp_toc li.lvl2>a::before{display:none}
.bp_toc .lvl3{padding-left:16px}
@media(min-width:1240px){.bp_article .bp_toc{border-bottom:0;border-left:1px solid #e2e8ef;padding-left:18px;margin-top:4px}.bp_toc .bp_toc_label{font-size:12px;min-height:36px}.bp_toc a{font-size:13px}}

/* Uninterrupted article body; section navigation lives in an on-demand dialog. */
.bp_article{display:block;max-width:768px;padding-top:40px}
.bp_sections_button{font:inherit;font-size:12px;color:#d4dfed;background:transparent;border:0;border-bottom:1px solid #65758a;padding:5px 0;margin-left:10px;cursor:pointer;min-height:32px}
.bp_sections_button:hover{color:#fff;border-color:#ee6723}
.bp_sections_dialog{width:calc(100% - 40px);max-width:560px;max-height:80dvh;padding:28px;border:1px solid #dfe6ed;border-radius:16px;background:#fff;color:#172d47;box-shadow:0 24px 80px #09162633;overflow-y:auto}
.bp_sections_dialog::backdrop{background:rgba(9,22,38,.5);backdrop-filter:blur(3px)}
.bp_sections_header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.bp_sections_header h2{font-size:20px;letter-spacing:-.4px;line-height:1.3;margin:0;color:#172d47}
.bp_sections_header button{width:40px;height:40px;flex:none;border:1px solid #e1e7ee;background:#f7f9fb;border-radius:50%;font-size:24px;color:#43566d;cursor:pointer}
.bp_section_links ol{list-style:none;padding:0;margin:0}
.bp_section_links li{border-top:1px solid #edf0f4;margin:0}
.bp_section_links a{display:block;padding:16px 4px;font-size:15px;line-height:1.5;color:#314a66;text-decoration:none}
.bp_section_links .lvl3 a{padding-left:20px;font-size:14px;color:#65758b}
.bp_section_links a:hover,.bp_section_links a[aria-current="true"]{color:#a64b20;background:#fff9f4}
.bp_sections_button:focus-visible,.bp_sections_dialog :focus-visible{outline:2px solid #ee6723;outline-offset:3px}
@media(max-width:640px){.bp_sections_dialog{padding:20px;max-height:85dvh}.bp_article{padding-top:28px}}

/* Consistent reading rhythm: spacing separates sections without decorative rules. */
.bp_article h2::before{display:none}
:is(.bp_article,.bt_article,.ba_article){line-height:1.75}
:is(.bp_article,.bt_article,.ba_article) p{margin:0 0 1.1em}
:is(.bp_article,.bt_article,.ba_article) h2{margin:1.65em 0 .6em;padding-top:0}
:is(.bp_article,.bt_article,.ba_article) h3{margin:1.45em 0 .55em}
:is(.bp_article,.bt_article,.ba_article)>:first-child{margin-top:0}
:is(.bp_article,.bt_article,.ba_article) li>p{margin-bottom:.5em}

/* Inline X mark sits with the Font Awesome brand glyphs (FA5 has no X icon). */
.bp_share svg.bp_share_x,.bt_share svg.bp_share_x{width:14px;height:14px;display:block}
.bp_share a,.bt_share a,.bp_share_native{display:inline-flex;align-items:center;justify-content:center}
.bp_share_native{background:none;cursor:pointer;color:inherit;position:relative}
/* Match the circular anchors beside it: the button was 13px wide, under the 24px
   minimum target size and easy to miss entirely. */
.bp_share a,.bt_share a,.bp_share_native{width:34px;height:34px;border-radius:50%;border:1px solid #e2e8f0;flex:0 0 auto}
.bp_share_native:hover{background:var(--ss-navy,#172d47);color:#fff;border-color:var(--ss-navy,#172d47)}
.bp_share_native[data-share-state="busy"]{opacity:.6}
.bp_share_status{position:absolute;left:50%;transform:translateX(-50%);bottom:-22px;white-space:nowrap;font-size:11px;color:var(--ss-orange,#ee6723)}