/* ═════════════════════════════════════════════════════════════════
   EcomDune blog: loaded on /blog pages only, on top of marketing.css (same tokens).
   Reading comes first: one calm column at a comfortable measure, the extras (side panel, summary,
   comparison, FAQs) placed where a reader looks for them and kept visually quieter than the text.
   ═════════════════════════════════════════════════════════════════ */

.bl-shell { background: #fff; color: var(--tc-graphite); padding-top: calc(var(--tc-nav-h) + 1rem); }
.bl-wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
/* Plain links take the text colour (the site stylesheet makes bare links blue); links with a class of their own set their own. */
.bl-shell a:not([class]), .bl-shell .bl-card-link, .bl-shell .bl-pager-link { color: inherit; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.bl-breadcrumb { margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--tc-fog); }
.bl-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.bl-breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; color: var(--tc-ash); }
.bl-breadcrumb a { text-decoration: none; }
.bl-breadcrumb a:hover { color: var(--tc-graphite); text-decoration: underline; }

/* ── Small labels ───────────────────────────────────────────── */
.bl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.bl-tag { padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 500; color: var(--tc-graphite); background: var(--tc-cloud); border-radius: 999px; }
.bl-type { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tc-fog); }

/* ── Index ──────────────────────────────────────────────────── */
.bl-index-hero { margin: calc(-1 * (var(--tc-nav-h) + 1rem)) 0 0; padding: calc(var(--tc-nav-h) + 3.5rem) 1.25rem 3rem; text-align: center; background: radial-gradient(60rem 22rem at 50% 0, #E8F0FE 0, rgba(232, 240, 254, 0) 70%), linear-gradient(#F7F9FC, #fff); border-bottom: 1px solid var(--tc-mist); }
.bl-index-hero-inner { max-width: 46rem; margin: 0 auto; }
.bl-breadcrumb-center ol { justify-content: center; }
.bl-breadcrumb-center { margin-bottom: 1rem; }
.bl-index-hero h1 { margin: 0 0 0.9rem; font-size: clamp(2.1rem, 5vw, 3.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.bl-index-lede { margin: 0 auto 1.75rem; max-width: 36rem; font-size: 1.1875rem; line-height: 1.6; color: var(--tc-slate); }
.bl-index-body { padding-top: 3rem; }
.bl-index-head { max-width: 46rem; margin-bottom: 1.75rem; }
.bl-index-head h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 4.2vw, 2.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.bl-index-head p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--tc-slate); }
.bl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.bl-filter {
  padding: 0.4rem 0.95rem; font-size: 0.875rem; font-weight: 500; color: var(--tc-slate); text-decoration: none;
  border: 1px solid var(--tc-mist); border-radius: 999px; transition: border-color var(--tc-fast), color var(--tc-fast);
}
.bl-filter:hover { border-color: var(--tc-graphite); color: var(--tc-graphite); }
.bl-filter.is-active { color: #fff; background: var(--tc-graphite); border-color: var(--tc-graphite); }
.bl-section-title { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.bl-featured { margin-bottom: 3rem; }
.bl-featured-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.bl-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr; }
.bl-empty { padding: 3rem 0; color: var(--tc-fog); }

.bl-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--tc-mist); border-radius: 1rem; transition: box-shadow var(--tc-base), transform var(--tc-base), border-color var(--tc-base); }
.bl-card:hover { border-color: var(--tc-ash); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); transform: translateY(-2px); }
.bl-card-link { display: block; text-decoration: none; }
.bl-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tc-cloud); }
.bl-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--tc-slow); }
.bl-card:hover .bl-card-media img { transform: scale(1.03); }
.bl-card-media.is-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; font-size: 2.25rem; color: rgba(29, 29, 29, 0.6); background: linear-gradient(135deg, #D8F3E8, #D6E6FC); }
.bl-card-media.is-placeholder span { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(29, 29, 29, 0.55); }
.bl-card-media.is-listicle { background: linear-gradient(135deg, #FFE8BF, #F8D9F5); }
.bl-card-media.is-how-to { background: linear-gradient(135deg, #C9EFEA, #CBE8F8); }
.bl-card-media.is-comparison { background: linear-gradient(135deg, #E0D8FB, #D6E6FC); }
.bl-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.1rem 1.25rem 1.25rem; }
.bl-card-title { margin: 0 0 0.5rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.bl-card-title a { text-decoration: none; }
.bl-card-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-card-excerpt { flex: 1; margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--tc-slate); }
.bl-card-foot { margin: 0; font-size: 0.8125rem; color: var(--tc-fog); }
.bl-card.is-large .bl-card-title { font-size: 1.6rem; line-height: 1.25; }
.bl-card.is-large .bl-card-excerpt { font-size: 1.0625rem; }

.bl-pager { display: flex; align-items: center; justify-content: space-between; margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--tc-mist); font-size: 0.9375rem; }
.bl-pager-link { padding: 0.45rem 1rem; font-weight: 500; text-decoration: none; border: 1px solid var(--tc-mist); border-radius: 999px; }
.bl-pager-link:hover { border-color: var(--tc-graphite); }
.bl-pager-state { color: var(--tc-fog); }

.bl-index-cta { margin-top: 4rem; }
.bl-index-cta .mk-cta-inner { max-width: 52rem; }
.bl-index-cta .mk-h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); text-wrap: balance; }
.bl-index-cta .bl-cta-text { max-width: 36rem; margin-left: auto; margin-right: auto; }

/* ── Author ─────────────────────────────────────────────────── */
.bl-avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 0.8125rem; font-weight: 600;
  color: #fff; text-decoration: none; background: var(--tc-graphite); border-radius: 50%;
}
.bl-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.0625rem; }
.bl-author-head { display: flex; gap: 1.25rem; margin-bottom: 2.5rem; max-width: 46rem; }
.bl-author-head h1 { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.bl-author-head p { margin: 0.5rem 0 0; line-height: 1.65; color: var(--tc-slate); }
.bl-author-head .bl-author-role { margin-top: 0.25rem; color: var(--tc-fog); }
.bl-author-links { display: flex; gap: 1rem; font-size: 0.9375rem; }
.bl-author-links .bl-linkedin { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.bl-author-links .bl-linkedin i { font-size: 1.1rem; color: #0A66C2; }
.bl-author-links .bl-linkedin:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-author-links a { font-weight: 500; color: var(--tc-graphite); text-decoration: underline; text-underline-offset: 3px; }

/* ── Article layout ─────────────────────────────────────────── */
.bl-article-layout { display: block; padding-bottom: 3rem; }
.bl-article { min-width: 0; max-width: 46rem; margin: 0 auto; }
.bl-toc-col { display: none; }

.bl-progress { position: fixed; top: var(--tc-nav-h); left: 0; right: 0; z-index: 40; height: 3px; background: transparent; }
.bl-progress span { display: block; height: 100%; background: #2563EB; transform: scaleX(0); transform-origin: 0 50%; }
.bl-preview-bar { margin: 0 0 1rem; padding: 0.65rem 1.25rem; font-size: 0.875rem; color: #7A4B00; text-align: center; background: #FFF4D6; border-bottom: 1px solid #F3DDA0; }

.bl-header h1 { margin: 0 0 1rem; font-size: clamp(2rem, 4.4vw, 2.875rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; }
.bl-dek { margin: 0 0 1.5rem; font-size: 1.25rem; line-height: 1.55; color: var(--tc-slate); }
.bl-byline { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 0; margin-bottom: 1.5rem; border-top: 1px solid var(--tc-mist); border-bottom: 1px solid var(--tc-mist); }
.bl-byline-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.9375rem; }
.bl-byline-name a { font-weight: 500; color: var(--tc-graphite); text-decoration: none; }
.bl-byline-name a:hover { text-decoration: underline; }
.bl-byline-name .bl-byline-linkedin { margin-left: 0.5rem; font-weight: 400; font-size: 0.95rem; color: var(--tc-fog); text-decoration: none; }
.bl-byline-name .bl-byline-linkedin:hover { color: #0A66C2; text-decoration: none; }
.bl-byline-role { margin-left: 0.5rem; }
.bl-byline-role, .bl-byline-dates { color: var(--tc-fog); font-size: 0.875rem; }
.bl-cover { margin: 0 0 2rem; }
.bl-cover img { display: block; width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--tc-mist); }

/* ── Quick summary ──────────────────────────────────────────── */
.bl-tldr { margin: 0 0 2rem; padding: 1.25rem 1.5rem; background: #F2F6FE; border: 1px solid #D6E3FB; border-left: 4px solid #2563EB; border-radius: 0.75rem; }
.bl-tldr h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1D4ED8; }
.bl-tldr ul { margin: 0; padding-left: 1.2rem; }
.bl-tldr li::marker { color: #2563EB; }
.bl-tldr li { margin: 0 0 0.45rem; font-size: 1.0625rem; line-height: 1.6; }
.bl-tldr li:last-child { margin-bottom: 0; }

/* ── Comparison ─────────────────────────────────────────────── */
.bl-compare { margin: 0 0 2.25rem; }
.bl-compare h2 { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 600; }
.bl-table-wrap { overflow-x: auto; border: 1px solid var(--tc-mist); border-radius: 0.75rem; }
.bl-table-wrap:focus-visible { outline: 2px solid var(--tc-graphite); outline-offset: 2px; }
.bl-table-wrap table, .bl-prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9375rem; }
.bl-table-wrap th, .bl-table-wrap td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tc-mist); }
.bl-table-wrap thead th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tc-slate); background: var(--tc-cloud); white-space: nowrap; }
.bl-table-wrap tbody tr:last-child th, .bl-table-wrap tbody tr:last-child td { border-bottom: 0; }
.bl-table-wrap tbody th { font-weight: 600; white-space: nowrap; }
.bl-table-wrap tr.is-pick th, .bl-table-wrap tr.is-pick td { background: #F1FAF6; }
.bl-pick { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #0B6B4C; background: #D6F2E6; border-radius: 999px; }

/* ── Table of contents ──────────────────────────────────────── */
.bl-toc ol { margin: 0; padding: 0; list-style: none; }
.bl-toc a { display: block; padding: 0.35rem 0.75rem; font-size: 0.875rem; line-height: 1.4; color: var(--tc-slate); text-decoration: none; border-left: 2px solid var(--tc-mist); }
.bl-toc a:hover { color: var(--tc-graphite); }
.bl-toc a.is-active { font-weight: 500; color: var(--tc-graphite); border-left-color: var(--tc-graphite); }
.bl-toc li.is-sub a { padding-left: 1.5rem; font-size: 0.8125rem; }
.bl-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.bl-toc-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; font-size: 1rem; color: var(--tc-fog); background: transparent; border: 1px solid transparent; border-radius: 0.5rem; }
.bl-toc-toggle:hover { color: var(--tc-graphite); background: var(--tc-cloud); }
.bl-toc-toggle:focus-visible { outline: 2px solid var(--tc-graphite); outline-offset: 1px; }
.bl-toc-title { margin-bottom: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-fog); }
.bl-toc-mobile { margin: 0 0 2rem; border: 1px solid var(--tc-mist); border-radius: 0.75rem; }
.bl-toc-mobile summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; font-size: 0.9375rem; font-weight: 500; cursor: pointer; list-style: none; }
.bl-toc-mobile summary::-webkit-details-marker { display: none; }
.bl-toc-mobile summary::marker { content: ""; }
.bl-toc-mobile summary:focus-visible { outline: 2px solid var(--tc-graphite); outline-offset: 2px; border-radius: 0.5rem; }
.bl-toc-chevron { font-size: 0.8rem; color: var(--tc-fog); transition: transform var(--tc-base); }
.bl-toc-mobile[open] .bl-toc-chevron { transform: rotate(180deg); }
.bl-toc-mobile ol { padding: 0 0.5rem 0.75rem; }

/* ── Body ───────────────────────────────────────────────────── */
.bl-prose { font-size: 1.125rem; line-height: 1.75; color: #262626; }
.bl-prose > :first-child { margin-top: 0; }
.bl-prose p, .bl-prose ul, .bl-prose ol { margin: 0 0 1.25rem; }
.bl-prose h2 { margin: 3rem 0 1rem; font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; scroll-margin-top: calc(var(--tc-nav-h) + 1.5rem); }
.bl-prose h3 { margin: 2.25rem 0 0.75rem; font-size: 1.3125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; scroll-margin-top: calc(var(--tc-nav-h) + 1.5rem); }
.bl-prose h4 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; font-weight: 600; }
.bl-prose li { margin-bottom: 0.45rem; }
.bl-prose li > ul, .bl-prose li > ol { margin: 0.45rem 0 0; }
.bl-prose strong { font-weight: 600; }
.bl-prose a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--tc-blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bl-prose a:hover { text-decoration-color: var(--tc-graphite); }
.bl-prose blockquote { margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem; font-size: 1.1875rem; color: var(--tc-slate); border-left: 3px solid var(--tc-ash); }
.bl-prose img { display: block; max-width: 100%; height: auto; margin: 1.75rem 0; border-radius: 0.75rem; border: 1px solid var(--tc-mist); }
.bl-prose figure { margin: 1.75rem 0; }
.bl-prose figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--tc-fog); }
.bl-prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--tc-mist); }
.bl-prose code { padding: 0.1rem 0.35rem; font-size: 0.9em; background: var(--tc-cloud); border-radius: 0.3rem; }
.bl-prose pre { margin: 1.5rem 0; padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; color: #F1F1F1; background: var(--tc-graphite); border-radius: 0.75rem; }
.bl-prose pre code { padding: 0; color: inherit; background: none; }
.bl-prose .bl-table-wrap { margin: 1.75rem 0; }
.bl-anchor { margin-left: 0.4rem; font-weight: 400; color: var(--tc-ash); text-decoration: none !important; opacity: 0; transition: opacity var(--tc-fast); }
.bl-prose h2:hover .bl-anchor, .bl-prose h3:hover .bl-anchor, .bl-anchor:focus { opacity: 1; }

/* ── Calls to action ────────────────────────────────────────── */
.bl-cta-inline { display: flex; flex-direction: column; gap: 1rem; margin: 2.5rem 0; padding: 1.25rem 1.5rem; background: var(--tc-cloud); border: 1px solid var(--tc-mist); border-radius: 1rem; }
.bl-cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 1.15rem; color: #fff; background: var(--tc-graphite); border-radius: 0.65rem; }
.bl-cta-copy { display: flex; flex: 1; flex-direction: column; gap: 0.2rem; font-size: 0.9375rem; line-height: 1.5; color: var(--tc-slate); }
.bl-cta-copy strong { font-size: 1.0625rem; font-weight: 600; color: var(--tc-graphite); }
.bl-cta-inline .mk-btn-cta { align-self: flex-start; }

.mk-cta.bl-cta-bottom { margin: 3rem 0 2.5rem; padding: 3.5rem 1.5rem; border: 1px solid var(--tc-mist); border-radius: 1.25rem; }
.bl-cta-bottom .mk-cta-inner { max-width: 52rem; }
.bl-cta-bottom .mk-h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); text-wrap: balance; }
.bl-cta-bottom .bl-cta-text { max-width: 36rem; margin-left: auto; margin-right: auto; }
.bl-cta-text { margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.7; color: var(--tc-slate); }
.bl-cta-alt { margin: 1rem 0 0; font-size: 0.9375rem; }
.bl-cta-alt a { font-weight: 500; color: var(--tc-slate); text-decoration: underline; text-underline-offset: 4px; }
.bl-cta-alt a:hover { color: var(--tc-graphite); }
.bl-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--tc-fog); }

/* ── FAQ ────────────────────────────────────────────────────── */
.bl-faq { margin: 3.25rem 0 0; scroll-margin-top: calc(var(--tc-nav-h) + 1.5rem); }
.bl-faq h2 { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
/* The accordion itself is the landing page's (.mk-faq-*); only spacing and the multi-paragraph answer are set here */
.bl-faq .mk-faq-toggle-all { margin: 0 0 0.25rem auto; }
.bl-faq .mk-faq-answer p { margin: 0 0 0.75rem; }
.bl-faq .mk-faq-answer p:last-child { margin-bottom: 0; }

/* ── Author card ────────────────────────────────────────────── */

/* ── Continue learning ──────────────────────────────────────── */
.bl-more { padding: 3.5rem 0 4rem; background: var(--tc-cloud); }

/* ── Larger screens ─────────────────────────────────────────── */
@media (min-width: 640px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-cta-inline { flex-direction: row; align-items: center; }
  .bl-cta-inline .mk-btn-cta { align-self: center; white-space: nowrap; }
}
@media (min-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The lead card spans both rows; the other two stack beside it as compact
     rows (image left, text right) and share its height, so nothing floats. */
  .bl-featured-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
  .bl-featured-grid .bl-card.is-large { grid-row: span 2; }
  .bl-featured-grid .bl-card:not(.is-large) { flex-direction: row; align-items: stretch; gap: 0; }
  .bl-featured-grid .bl-card:not(.is-large) .bl-card-link { flex: 0 0 42%; }
  .bl-featured-grid .bl-card:not(.is-large) .bl-card-media { height: 100%; aspect-ratio: auto; min-height: 7rem; }
  .bl-featured-grid .bl-card:not(.is-large) .bl-card-body { justify-content: center; }
  .bl-featured-grid .bl-card:not(.is-large) .bl-card-excerpt { display: none; }
  .bl-featured-grid .bl-card.is-large .bl-card-link { display: flex; flex: 1; }
  .bl-featured-grid .bl-card.is-large .bl-card-media { aspect-ratio: auto; width: 100%; min-height: 14rem; }
  .bl-featured-grid .bl-card:not(.is-large) .bl-card-media { min-height: 8.5rem; }
}
/* Two columns when there is room: the contents on the left, the article beside it. */
@media (min-width: 1100px) {
  .bl-article-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; max-width: 1320px; transition: grid-template-columns var(--tc-base), column-gap var(--tc-base); }
  /* Folded: only the toggle is left at the edge, and the article settles in the middle at a comfortable reading width. */
  .bl-article-layout.is-toc-collapsed { grid-template-columns: minmax(2rem, 1fr) minmax(0, 62rem) minmax(2rem, 1fr); column-gap: 2rem; }
  .is-toc-collapsed .bl-prose > *, .is-toc-collapsed .bl-header h1, .is-toc-collapsed .bl-dek { max-width: none; }
  .is-toc-collapsed .bl-toc-title, .is-toc-collapsed #toc-list { display: none; }
  .is-toc-collapsed .bl-toc-head { justify-content: flex-start; }
  .bl-article { max-width: none; margin: 0; }
  /* Three grid cells: the contents and the article share the first row; the FAQs, closing call to action and author sit in a second row under
     the article. The contents column is only as tall as the first row, so its sticky position ends where the FAQs begin. */
  .bl-toc-col { grid-column: 1; grid-row: 1; }
  .bl-article-main { grid-column: 2; grid-row: 1; }
  .bl-article-end { grid-column: 2; grid-row: 2; }
  /* The columns use the full width, but running text keeps a readable line length; tables, images and call-outs use all of it. */
  .bl-prose > p, .bl-prose > ul, .bl-prose > ol, .bl-prose > blockquote, .bl-prose > h2, .bl-prose > h3, .bl-prose > h4 { max-width: 56rem; }
  .bl-header h1, .bl-dek { max-width: 56rem; }
  .bl-toc-col { display: block; }
  .bl-rail-sticky { position: sticky; top: calc(var(--tc-nav-h) + 1.5rem); }
  .bl-toc-rail { max-height: calc(100vh - var(--tc-nav-h) - 3rem); overflow-y: auto; }
  .bl-toc-mobile { display: none !important; }
}

/* The floating call to action: the brand's orange, dark text for contrast, a close button that stays out of the way. */
.bl-float { position: fixed; left: 50%; bottom: 1.25rem; z-index: 45; transform: translateX(-50%); }
.bl-float[hidden] { display: none; }
.bl-float-cta {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.35rem; font-size: 1rem; font-weight: 600; color: var(--tc-graphite); text-decoration: none;
  background: #F59E2B; border-radius: 999px; box-shadow: 0 8px 24px rgba(245, 158, 43, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform var(--tc-fast), background var(--tc-fast), box-shadow var(--tc-fast);
}
.bl-float-cta:hover { background: #FFB04D; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(245, 158, 43, 0.5), 0 3px 8px rgba(0, 0, 0, 0.18); }
.bl-float-cta:focus-visible { outline: 3px solid var(--tc-graphite); outline-offset: 3px; }
.bl-float-cta svg { width: 1.1em; height: 1.1em; }
.bl-float-close {
  position: absolute; top: -0.55rem; right: -0.55rem;
  display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; font-size: 0.7rem; color: var(--tc-slate);
  background: #fff; border: 1px solid var(--tc-mist); border-radius: 50%; box-shadow: var(--tc-shadow-sm);
}
.bl-float-close:hover { color: var(--tc-graphite); border-color: var(--tc-graphite); }
@media (max-width: 480px) { .bl-float { bottom: 0.75rem; } .bl-float-cta { padding: 0.7rem 1.1rem; font-size: 0.9375rem; } }

@media (prefers-reduced-motion: reduce) {
  .bl-card-media img { transition: none; }
}