/* Frankly — blog post template ("The Sheet on the Table").
   Scoped to .blog-post-page. Tokens, tags, avatars, the Next-step offers,
   buttons, and the subscribe form come from blog-base.css (.fk-blog, the same
   wrapper element).

   The post is one sheet of paper on the cream table.

   Breakpoints: 1200px (citation notes move into the sheet's margin),
   1100px (the In-brief note hangs off the sheet's edge), 820px and 520px
   (the pair nav.module.css already uses). */

/* ── Stage: the table the sheet sits on ─────────────────────── */

.blog-post-page .bp-stage {
  max-width: calc(860px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.blog-post-page .bp-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bp-body);
  text-decoration: none;
  transition: color 150ms var(--bp-ease);
}
.blog-post-page .bp-crumb:hover { color: var(--fk-teal-700); }
.blog-post-page .bp-crumb svg { transition: transform 150ms var(--bp-ease); }
.blog-post-page .bp-crumb:hover svg { transform: translateX(-2px); }

/* ── The sheet ─────────────────────────────────────────────── */

.blog-post-page .bp-sheet {
  position: relative;
  max-width: 860px;
  background: var(--bp-paper);
  border: 1px solid var(--bp-hair);
  border-radius: 20px;
  padding: var(--bp-pad) var(--bp-pad) 0;
}

/* ── Head: tag, title, dek, byline, In-brief, Jump-to ──────── */

.blog-post-page .bp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.blog-post-page .bp-head__main { order: 1; }
.blog-post-page .bp-head > :not(.bp-head__main):not(.bp-jump) { order: 2; }
.blog-post-page .bp-jump { order: 3; }

.blog-post-page .bp-title {
  margin: 0;
  font-size: clamp(34px, 3.9vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bp-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.blog-post-page .bp-dek {
  margin: 20px 0 0;
  max-width: 36em;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--bp-body);
  text-wrap: pretty;
}

.blog-post-page .bp-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--bp-body);
}
.blog-post-page .bp-byline__avatars { display: inline-flex; }
.blog-post-page .bp-byline__avatars > * + * { margin-left: -10px; }
.blog-post-page .bp-byline__names a {
  color: var(--bp-ink);
  font-weight: 600;
  text-decoration: none;
}
.blog-post-page .bp-byline__names a:hover {
  color: var(--fk-teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-post-page .bp-byline__facts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}
.blog-post-page .bp-byline__tag {
  min-height: 28px;
  padding: 3px 12px;
}
.blog-post-page .bp-byline__meta {
  color: var(--bp-muted);
  font-variant-numeric: tabular-nums;
}
.blog-post-page .bp-byline__meta + .bp-byline__meta::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--bp-muted);
  vertical-align: middle;
}

/* In-brief note: a teal-wash card held by a paper clip. */
.blog-post-page .bp-brief {
  position: relative;
  margin-top: 32px;
  padding: 30px 24px 22px;
  background: var(--fk-teal-50);
  border: 1px solid var(--fk-teal-100);
  border-radius: 16px;
}
.blog-post-page .bp-brief__clip {
  position: absolute;
  top: -22px;
  right: 30px;
  z-index: 1;
  color: var(--fk-teal-700);
}
.blog-post-page .bp-brief__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fk-teal-700);
}
.blog-post-page .bp-brief__list {
  list-style: none;
  counter-reset: brief;
  margin: 0;
  padding: 0;
}
.blog-post-page .bp-brief__list li {
  counter-increment: brief;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  padding-block: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--bp-ink);
}
.blog-post-page .bp-brief__list li + li { border-top: 1px solid var(--fk-teal-100); }
.blog-post-page .bp-brief__list li:last-child { padding-bottom: 0; }
.blog-post-page .bp-brief__list li::before {
  content: counter(brief);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--fk-teal-700);
  font-variant-numeric: tabular-nums;
}

/* Jump-to chips: the sheet's tab stops. */
.blog-post-page .bp-jump {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--bp-hair);
}
.blog-post-page .bp-jump__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bp-muted);
}
.blog-post-page .bp-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-post-page .bp-jump__list li { margin: 0; }
.blog-post-page .bp-jump__list a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid var(--bp-hair);
  border-radius: var(--r-full);
  background: var(--bp-paper);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bp-body);
  text-decoration: none;
  transition: border-color 150ms var(--bp-ease), color 150ms var(--bp-ease), background-color 150ms var(--bp-ease);
}
@media (hover: hover) {
  .blog-post-page .bp-jump__list a:hover {
    border-color: var(--fk-teal-600);
    color: var(--fk-teal-700);
  }
}
.blog-post-page .bp-jump__list a[aria-current] {
  border-color: var(--fk-teal-600);
  background: var(--fk-teal-50);
  color: var(--fk-teal-700);
}

/* Desktop: the note is clipped onto the sheet's top-right corner, its top
   edge above the sheet and about a third of it off the right edge. It floats
   (with negative margins) so the headline wraps around whatever part of it
   sits on the sheet, however many takeaways it holds. Keys off the note
   itself: HubSpot leaves an empty module wrapper when a post has none. */
@media (min-width: 1100px) {
  .blog-post-page .bp-stage:has(.bp-brief) {
    max-width: calc(860px + 110px + 2 * var(--gutter));
    padding-right: calc(var(--gutter) + 110px);
  }
  .blog-post-page .bp-head:has(.bp-brief) { display: block; }
  .blog-post-page .bp-head:has(.bp-brief) > :not(.bp-head__main):not(.bp-jump) {
    float: right;
    position: relative;
    z-index: 2;
    width: 300px;
    margin: calc(-1 * var(--bp-pad) - 36px) calc(-1 * var(--bp-pad) - 110px) 24px 36px;
  }
  .blog-post-page .bp-head .bp-brief { margin-top: 0; }
  /* The clip grips note and sheet together, crossing the sheet's top edge. */
  .blog-post-page .bp-head .bp-brief__clip {
    top: -8px;
    right: auto;
    left: 150px;
  }
  .blog-post-page .bp-head:has(.bp-brief) .bp-jump { clear: both; }
}

/* ── Featured image ────────────────────────────────────────── */

.blog-post-page .bp-feature {
  margin: 36px 0 0;
}
.blog-post-page .bp-feature img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--bp-sand);
}
/* No intrinsic size from HubSpot: reserve the box before the image loads. */
.blog-post-page .bp-feature img:not([height]) { aspect-ratio: 16 / 9; }

/* ── Docked reading bar ────────────────────────────────────── */

.blog-post-page .bp-main { position: relative; }

.blog-post-page .bp-readbar {
  position: sticky;
  top: var(--bp-nav-h, 0px);
  z-index: 30;
  height: 0;
}
.blog-post-page .bp-readbar__bar {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--bp-pad));
  right: calc(-1 * var(--bp-pad));
  display: flex;
  align-items: center;
  min-height: 54px;
  padding-inline: var(--bp-pad);
  background: var(--bp-paper);
  border-bottom: 1px solid var(--bp-hair);
  opacity: 0;
  transform: translateY(-8px);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 160ms var(--bp-ease), transform 200ms var(--bp-ease), clip-path 200ms var(--bp-ease), visibility 0s linear 200ms;
}
.blog-post-page .bp-docked .bp-readbar__bar {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 -60vh 0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 200ms var(--bp-ease), transform 200ms var(--bp-ease), clip-path 200ms var(--bp-ease), visibility 0s;
}
.blog-post-page .bp-readbar__toggle {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--bp-ink);
  cursor: pointer;
}
.blog-post-page .bp-readbar__label {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--bp-muted);
}
.blog-post-page .bp-readbar__current {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.blog-post-page .bp-readbar__chev {
  flex-shrink: 0;
  color: var(--bp-muted);
  transition: transform 150ms var(--bp-ease);
}
.blog-post-page .bp-readbar__toggle[aria-expanded="true"] .bp-readbar__chev { transform: rotate(180deg); }
.blog-post-page .bp-readbar__toggle:hover .bp-readbar__current { color: var(--fk-teal-700); }

.blog-post-page .bp-readbar__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}
.blog-post-page .bp-readbar__progress span {
  display: block;
  height: 100%;
  background: var(--fk-teal-600);
  transform: scaleX(0);
  transform-origin: left center;
}

.blog-post-page .bp-readbar__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: var(--bp-pad);
  width: min(440px, calc(100% - 2 * var(--bp-pad)));
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: 8px;
  background: var(--bp-paper);
  border: 1px solid var(--bp-hair);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(23, 22, 15, 0.14);
}
.blog-post-page .bp-readbar__menu ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-post-page .bp-readbar__menu li { margin: 0; }
.blog-post-page .bp-readbar__menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--bp-body);
  text-decoration: none;
}
.blog-post-page .bp-readbar__menu a:hover { background: var(--bp-cream); color: var(--bp-ink); }
.blog-post-page .bp-readbar__menu a[aria-current] {
  background: var(--fk-teal-50);
  color: var(--fk-teal-700);
  font-weight: 600;
}

/* ── Body: the author's rich text ──────────────────────────── */

.blog-post-page .bp-body {
  position: relative;
  max-width: var(--bp-measure);
  margin-top: 44px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--bp-body);
  overflow-wrap: break-word;
}
.blog-post-page .bp-body p,
.blog-post-page .bp-body ul,
.blog-post-page .bp-body ol,
.blog-post-page .bp-body figure,
.blog-post-page .bp-body table {
  margin: 0 0 1.2em;
}
.blog-post-page .bp-body > :first-child,
.blog-post-page .bp-body > .hs_cos_wrapper > :first-child { margin-top: 0; }

.blog-post-page .bp-body h2 {
  margin: 2.1em 0 0.55em;
  font-size: clamp(25px, 2.6vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bp-ink);
  text-wrap: balance;
  scroll-margin-top: calc(var(--bp-nav-h, 0px) + 76px);
}
.blog-post-page .bp-body h3 {
  margin: 1.8em 0 0.45em;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bp-ink);
  scroll-margin-top: calc(var(--bp-nav-h, 0px) + 76px);
}
.blog-post-page .bp-body h4 {
  margin: 1.6em 0 0.4em;
  font-size: 18px;
  font-weight: 600;
  color: var(--bp-ink);
}

.blog-post-page .bp-body a {
  color: var(--fk-teal-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--fk-teal-400);
  transition: color 150ms var(--bp-ease), text-decoration-color 150ms var(--bp-ease);
}
.blog-post-page .bp-body a:hover {
  color: var(--fk-teal-700);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.blog-post-page .bp-body strong,
.blog-post-page .bp-body b { font-weight: 600; color: var(--bp-ink); }

.blog-post-page .bp-body ul,
.blog-post-page .bp-body ol { padding-left: 1.35em; }
.blog-post-page .bp-body li { margin-bottom: 0.45em; line-height: 1.65; }
.blog-post-page .bp-body li::marker { color: var(--fk-teal-600); font-weight: 600; }

.blog-post-page .bp-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.blog-post-page .bp-body figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bp-muted);
}

.blog-post-page .bp-body hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--bp-hair);
}

.blog-post-page .bp-body code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bp-sand);
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--bp-ink);
}

.blog-post-page .bp-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.blog-post-page .bp-body th,
.blog-post-page .bp-body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bp-hair);
  text-align: left;
  vertical-align: top;
}
.blog-post-page .bp-body th {
  background: var(--bp-sand);
  font-weight: 600;
  color: var(--bp-ink);
}

/* Pull quote: a plain blockquote, set between two teal hairlines. */
.blog-post-page .bp-body blockquote {
  margin: 2.2em 0;
  padding: 1.1em 0;
  border-top: 1px solid var(--fk-teal-600);
  border-bottom: 1px solid var(--fk-teal-600);
  font-size: clamp(21px, 2.3vw, 26px);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--bp-ink);
  text-wrap: balance;
}
.blog-post-page .bp-body blockquote p { margin: 0; }
.blog-post-page .bp-body blockquote p + p { margin-top: 0.6em; }
.blog-post-page .bp-body blockquote cite,
.blog-post-page .bp-body blockquote footer {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--bp-muted);
}

/* Stat callout: a blockquote that opens with a bold figure. */
.blog-post-page .bp-body blockquote.bp-stat {
  padding: 26px 30px;
  border: 0;
  border-radius: 16px;
  background: var(--bp-sand);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--bp-body);
  text-wrap: pretty;
}
.blog-post-page .bp-body blockquote.bp-stat .bp-stat__num {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(46px, 6vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--bp-ink);
  font-variant-numeric: tabular-nums;
}

/* Citation numbers (enhanced from <sup>). */
.blog-post-page .bp-sup { line-height: 0; }
.blog-post-page .bp-cite {
  display: inline-grid;
  place-items: center;
  min-width: 1.55em;
  height: 1.55em;
  margin-left: 1px;
  padding: 0 0.35em;
  border: 1px solid var(--fk-teal-100);
  border-radius: var(--r-full);
  background: var(--fk-teal-50);
  font: 700 0.72em/1 var(--font-brand);
  color: var(--fk-teal-700);
  vertical-align: 0.55em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms var(--bp-ease), border-color 150ms var(--bp-ease);
}
.blog-post-page .bp-cite:hover,
.blog-post-page .bp-cite[aria-expanded="true"] {
  background: var(--fk-teal-100);
  border-color: var(--fk-teal-600);
}

.blog-post-page .bp-note {
  margin: -0.4em 0 1.4em;
  padding: 14px 18px 16px;
  background: var(--fk-teal-50);
  border: 1px solid var(--fk-teal-100);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--bp-body);
  transition: opacity 200ms var(--bp-ease), transform 200ms var(--bp-ease);
}
.blog-post-page .bp-note--enter { opacity: 0; transform: translateY(-4px); }
.blog-post-page .bp-note--margin {
  position: absolute;
  left: calc(100% + 36px);
  width: var(--bp-note-w, 220px);
  margin: 0;
}
.blog-post-page .bp-note__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -6px -8px 4px 0;
}
.blog-post-page .bp-note__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fk-teal-700);
}
.blog-post-page .bp-note__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bp-muted);
  cursor: pointer;
}
.blog-post-page .bp-note__close:hover { background: var(--fk-teal-100); color: var(--bp-ink); }
.blog-post-page .bp-note__text a { word-break: break-word; }
.blog-post-page .bp-note__jump {
  display: inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

/* References list (the final "References" / "Fuentes" section). */
.blog-post-page .bp-body h2.bp-refs__title {
  margin-top: 2.8em;
  padding-top: 1.4em;
  border-top: 1px solid var(--bp-hair);
  font-size: 19px;
  letter-spacing: -0.01em;
}
.blog-post-page .bp-body ol.bp-refs {
  padding-left: 1.6em;
  font-size: 15px;
  line-height: 1.6;
}
.blog-post-page .bp-body ol.bp-refs li {
  position: relative;
  margin-bottom: 0.7em;
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: 6px;
  scroll-margin-top: calc(var(--bp-nav-h, 0px) + 90px);
  transition: background-color 600ms var(--bp-ease);
}
.blog-post-page .bp-body ol.bp-refs li::marker {
  color: var(--bp-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.blog-post-page .bp-body ol.bp-refs li:target { background: var(--fk-teal-50); }
.blog-post-page .bp-backref {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 50%;
  color: var(--fk-teal-700);
}
.blog-post-page .bp-body a.bp-backref { text-decoration: none; }
.blog-post-page .bp-backref:hover { background: var(--fk-teal-50); }

/* ── Foot of the article: tags, share, author ──────────────── */

.blog-post-page .bp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  max-width: var(--bp-measure);
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--bp-hair);
}
.blog-post-page .bp-foot__tags,
.blog-post-page .bp-foot__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.blog-post-page .bp-foot__label {
  margin-right: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bp-muted);
}
.blog-post-page .bp-foot__tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-post-page .bp-foot__tags li { margin: 0; }

.blog-post-page .bp-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--bp-hair);
  border-radius: var(--r-full);
  background: var(--bp-paper);
  font: 500 14px/1 var(--font-brand);
  color: var(--bp-body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms var(--bp-ease), color 150ms var(--bp-ease);
}
@media (hover: hover) {
  .blog-post-page .bp-share:hover { border-color: var(--fk-teal-600); color: var(--fk-teal-700); }
}
.blog-post-page .bp-share.is-done { border-color: var(--fk-green-400); color: var(--fk-green-600); }

.blog-post-page .bp-authors {
  display: grid;
  gap: 24px;
  max-width: var(--bp-measure);
  margin-top: 36px;
}
.blog-post-page .bp-author {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.blog-post-page .bp-author p { margin: 0; }
.blog-post-page .bp-author__name {
  margin-top: 4px !important;
  font-size: 17px;
  font-weight: 600;
  color: var(--bp-ink);
}
.blog-post-page .bp-author__bio {
  margin-top: 6px !important;
  font-size: 15px;
  line-height: 1.6;
}
.blog-post-page .bp-author__more {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fk-teal-600);
  text-decoration: none;
}
.blog-post-page .bp-author__more:hover { color: var(--fk-teal-700); text-decoration: underline; text-underline-offset: 3px; }

.blog-post-page .bp-comments {
  max-width: var(--bp-measure);
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--bp-hair);
}

/* ── Next step: the sand band at the foot of the sheet ─────── */

.blog-post-page .bp-next {
  margin: 64px calc(-1 * var(--bp-pad)) 0;
  padding: clamp(28px, 4.5vw, 56px) var(--bp-pad);
  background: var(--bp-sand);
  border-top: 1px solid var(--bp-hair);
  border-radius: 0 0 19px 19px;
}

/* Subscribe row: HubSpot's blog_subscribe form, restyled in place. */
.blog-post-page .bp-subscribe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px 48px;
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3.5vw, 36px);
  border-top: 1px solid var(--bp-hair-strong);
}

/* ── Keep reading, back on the table ───────────────────────── */

.blog-post-page .bp-more {
  max-width: 860px;
  margin-top: clamp(56px, 7vw, 88px);
}
.blog-post-page .bp-more__title {
  margin: 0 0 24px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bp-ink);
}
.blog-post-page .bp-more__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-post-page .bp-more__list li { display: flex; margin: 0; }
.blog-post-page .bp-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--bp-paper);
  border: 1px solid var(--bp-hair);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms var(--bp-ease), box-shadow 200ms var(--bp-ease);
}
@media (hover: hover) {
  .blog-post-page .bp-card:hover {
    border-color: var(--fk-teal-400);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}
.blog-post-page .bp-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bp-sand);
}
.blog-post-page .bp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 22px 24px 24px;
}
.blog-post-page .bp-card__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bp-ink);
  text-wrap: balance;
  transition: color 150ms var(--bp-ease);
}
@media (hover: hover) {
  .blog-post-page .bp-card:hover .bp-card__title { color: var(--fk-teal-700); }
}
.blog-post-page .bp-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13.5px;
  color: var(--bp-muted);
  font-variant-numeric: tabular-nums;
}
.blog-post-page .bp-card__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--bp-muted);
  vertical-align: middle;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 820px) {
  .blog-post-page .bp-subscribe { grid-template-columns: minmax(0, 1fr); }
  .blog-post-page .bp-body { font-size: 17px; }
}

@media (max-width: 520px) {
  .blog-post-page .bp-stage { padding-inline: 10px; }
  .blog-post-page .bp-crumb { margin-left: 10px; }
  .blog-post-page .bp-more { padding-inline: var(--bp-pad); }
  .blog-post-page .bp-sheet { border-radius: 16px; }
  .blog-post-page .bp-next { border-radius: 0 0 15px 15px; }
  .blog-post-page .bp-body blockquote.bp-stat { padding: 22px; }
  .blog-post-page .bp-jump { grid-template-columns: minmax(0, 1fr); }
  .blog-post-page .bp-jump__list { gap: 6px; }
}