/* =============================================================================
 * Article page (pages/blog/post): text column + table of contents + reading progress.
 *
 * The owner asked whether the article column was too narrow and what else would help GEO. The
 * reading measure stays (720px ≈ 75 characters a line — longer lines read worse, not better);
 * the empty width beside it now carries the contents list, which is also what makes every
 * section a deep link an assistant can cite. Below 1100px the list folds into a <details> above
 * the text and the column centres as before.
 * ============================================================================= */

/* The contents column is 280px. At 240 a third of the 248 entries across the 35 live posts ran
   to three lines and one to four ("AI misses critical facts about your brand. Why the absence
   of a TL;DR ..."); at 280 it is 20 of 248 on three lines and none on four. The text column
   keeps its 720px, and the whole still fits from 1100px, where the column appears (1222 CSS px
   under the .9 zoom, against 1128 needed). */
.bpo-wrap {
  max-width: calc(720px + 64px + 280px + 64px);
  margin: 0 auto;
  padding: 0 32px;
}
.bpo-head { max-width: 720px; }

.bpo-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  column-gap: 64px;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 90px;
}
.bpo-main { min-width: 0; }

/* The article's main image, pulled 32px up so it straddles the hairline under the title block.
   It sat under that block instead: the hero is position:relative (.mkt-page-hero in
   marketing.css), and a positioned box is painted after every unpositioned one whatever the
   source order, so the hero's white background covered the image's top 32px - rounded corners
   included, and on geo-generative-engine-optimization the words printed in the picture. Relative
   with z-index 1 puts the image in the same layer as the hero's content and, coming later in the
   page, on top of it: the line now runs behind the picture and shows only either side of it. */
.bpo-cover {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: -32px 0 0;
  border-radius: 18px;
  border: 1px solid #DEE0E8;
  box-shadow: 0 26px 54px -42px rgba(20, 22, 43, 0.5);
}

/* Headings land under the sticky navigation when reached through the contents list. */
.bpo-main .mkt-prose h2,
.bpo-main .mkt-prose h3 { scroll-margin-top: 104px; }

/* The article's rhythm is `.mkt-prose > * + * { margin-top: 1.15em }` (marketing.css), but the
   `figure { margin: 0 }` and `ul, ol { margin: 0 }` resets next to it are one class-and-element
   selector stronger and win: with the post images in place, a figure hung 2px under the heading
   above it (geo-generative-engine-optimization, "SEO vs GEO") or 4px under a list, and a list
   started on the line under its lead-in paragraph with no air. Put back for the article only;
   the shared rule is not this stylesheet's to change. */
.bpo-main .mkt-prose > * + :is(figure, ul, ol) { margin-top: 1.15em; }

/* The frame pages/blog/post puts around every table: a table wider than the column scrolls on its
   own instead of pushing the page sideways (three posts, on a phone). */
.bpo-main .mkt-prose .bpo-table { overflow-x: auto; scrollbar-width: thin; }

/* --- contents list ---------------------------------------------------------- */

.bpo-side { position: sticky; top: 104px; margin-top: 40px; }

.bpo-toc ol { list-style: none; margin: 0; padding: 0; }
.bpo-toc-title,
.bpo-toc summary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #656B7E;
}
.bpo-toc--side ol {
  margin-top: 14px;
  border-left: 1px solid #E3E5EC;
  display: grid;
  gap: 2px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.bpo-toc--side a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: #5F6478;
  text-wrap: pretty;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.bpo-toc--side a:hover { color: #14162B; }
.bpo-toc--side a[aria-current] { color: #4B4CD8; border-left-color: #5B5CE6; font-weight: 500; }
.bpo-toc a:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 2px; border-radius: 4px; }

.bpo-toc--inline {
  display: none;
  margin: 28px 0 0;
  background: #FAFAFC;
  border: 1px solid #EDEEF2;
  border-radius: 14px;
  padding: 14px 18px;
}
.bpo-toc--inline summary { cursor: pointer; list-style-position: inside; }
.bpo-toc--inline ol { margin-top: 12px; display: grid; gap: 8px; counter-reset: bpo; }
.bpo-toc--inline li { counter-increment: bpo; display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.bpo-toc--inline li::before {
  content: counter(bpo, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #8C91A5;
  padding-top: 2px;
}
.bpo-toc--inline a { color: #262A47; }
.bpo-toc--inline a:hover { color: #4B4CD8; }

@media (max-width: 1099px) {
  .bpo-wrap { max-width: 764px; }
  .bpo-layout { grid-template-columns: minmax(0, 1fr); }
  .bpo-side { display: none; }
  .bpo-toc--inline { display: block; }
}

/* --- "In short" summary box ------------------------------------------------------ */

.bpo-summary {
  margin: 32px 0 0;
  padding: 20px 24px 22px;
  background: #FAFAFC;
  border: 1px solid #D6DAFB;
  border-left: 3px solid #5B5CE6;
  border-radius: 14px;
}
/* A real h2, so the phone-wide `h2 { font-size: ... !important }` in marketing.css has to be
   outranked here; the class selector wins over the element one at equal importance. */
.bpo-summary .bpo-summary-title {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px !important;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4B4CD8;
  text-align: left !important;
}
/* Same story for `p { font-size: 14px !important }` below 641px. */
.bpo-summary .bpo-summary-text {
  margin: 10px 0 0;
  font-size: 16px !important;
  line-height: 1.7;
  color: #262A47;
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .bpo-summary { margin-top: 24px; padding: 16px 18px 18px; }
  .bpo-summary .bpo-summary-text { font-size: 15px !important; line-height: 1.65; }
}

/* --- reading progress -------------------------------------------------------- */

/* `top` is set by the script in pages/blog/post to the bottom edge of the navigation. Under the
   nav (z-index 50), so the phone menu drawer, which opens below that edge, covers it. */
.bpo-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 49;
  pointer-events: none;
}
.bpo-progress i {
  display: block;
  height: 4px;
  background: #5B5CE6;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .bpo-progress i { transition: transform 0.08s linear; }
}