/* ============================================================================
   Blog — article page
   ---------------------------------------------------------------------------
   Two columns on desktop: the article at a reading measure, a sticky column
   beside it. Everything is prefixed `bp-`, `toc`, `share` or `promo`, because
   a page stylesheet is global once bundled and a bare `.table` or `.note`
   would reach every other page on the site.
   ========================================================================= */

.bp {
  background: var(--white);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  /* Body prose. Held here rather than taken from the global step because
     beside the contents column the text runs the full width of the page and
     wants setting a size up from the rest of the site. */
  --bp-prose: var(--fs-md);
}

/* The banner: breadcrumbs, title, summary and byline, on the wash. It is a
   band rather than a background on the whole page because the wash needs an
   end — painted on `.bp` it ran on under the opening paragraphs and the two
   never separated.

   The hairline is the breaker. One pixel rather than a tonal step, because
   the band's own colour is already most of the signal; a heavier rule would
   read as a divider between two pages. */
.bp-banner {
  background-color: var(--page);
  background-image: var(--page-wash);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset 0 -1px 0 var(--blue-200);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
}
/* The body starts clear of the breaker rather than against it. */
.bp-banner + .container { padding-top: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }

/* --- Breadcrumbs and head --------------------------------------------------- */

.bp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.bp-crumbs li + li::before { content: '/'; margin-inline-end: 0.5rem; color: var(--blue-300); }
.bp-crumbs a { color: var(--blue-600); text-decoration: none; }
.bp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.bp-head { max-width: 54rem; margin-top: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.bp-kicker {
  margin: 0 0 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.bp-title { margin: 0; color: var(--blue-900); text-wrap: balance; }
.bp-sum { margin: clamp(1rem, 0.85rem + 0.8vw, 1.5rem) 0 0; color: var(--text-secondary); text-wrap: pretty; }

.bp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.85rem, 0.7rem + 1vw, 1.75rem);
  margin-top: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  padding-top: clamp(1rem, 0.85rem + 0.8vw, 1.35rem);
  /* Top rule only. The banner closes on its own hairline a little below, and
     two lines that close together read as a boxed-in row. */
  border-top: 1px solid var(--blue-200);
}
.bp-by { display: grid; margin: 0; }
.bp-by b { font-size: var(--fs-sm); color: var(--blue-900); }
.bp-by span { font-size: var(--fs-xs); color: var(--text-secondary); }
.bp-dates { margin: 0; font-size: var(--fs-xs); color: var(--text-secondary); }

/* --- Share ------------------------------------------------------------------ */

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-inline-start: auto; }
.share__k { font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); }
.share__list { display: flex; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.share__btn {
  display: grid;
  place-items: center;
  /* 40px: a comfortable target without the control dominating the byline. */
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out-soft), color var(--d-fast) var(--ease-out-soft);
}
.share__btn:hover { background: var(--blue-500); color: #fff; }
/* The width is reserved so the row does not jump when the confirmation
   appears — but only where there is width to spare. */
.share__said { font-size: var(--fs-xs); font-weight: 700; color: var(--blue-600); min-width: 5.5rem; }
@media (max-width: 420px) { .share__said { min-width: 0; } }
.share--foot { margin-inline-start: 0; }

/* --- The two columns -------------------------------------------------------- */

.bp-grid {
  display: grid;
  gap: clamp(1.75rem, 1.4rem + 3vw, 4rem);
  /* No top margin: the space under the breaker is the container's padding.
     Both would stack, and on desktop the collapsible contents between them is
     display:none, so there is nothing to separate. */
  margin-top: 0;
}
@media (min-width: 1040px) {
  /* ~72/28. The sidebar has a floor in rem so the contents never wrap to one
     word a line at the breakpoint. */
  .bp-grid {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    /* Column only: below this width the two stack and want the larger gap. */
    column-gap: 60px;
  }
  /* A line this long needs the larger size to stay readable. */
  .bp { --bp-prose: 1.125rem; }
}
.bp-body { min-width: 0; max-width: 46rem; }
/* Beside the contents the article runs the width of the page, edge to edge
   with the header, so the body takes its whole column and the only space
   left of the contents is the column gap. The cap above still governs the
   narrower layout, where there is no second column to end the line.
   It has to follow that cap rather than sit with the other desktop rules:
   a media query carries no specificity of its own, so declared earlier it
   simply loses. */
@media (min-width: 1040px) { .bp-body { max-width: none; } }
/* Grid children default to min-content, which lets a wide table push the
   column past the viewport instead of scrolling inside its own wrapper. */
.bp-grid > * { min-width: 0; }

.bp-side { min-width: 0; }
@media (min-width: 1040px) {
  .bp-sticky {
    position: sticky;
    /* Clears the sticky site header. */
    top: 6rem;
    display: grid;
    gap: 1.25rem;
    /* The contents list is capped and scrolls inside itself, so the column
       does not grow past the viewport and the CTA below stays on screen.
       This remains as a floor for a very short window. */
    max-height: calc(100vh - 7.5rem);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* --- Table of contents ------------------------------------------------------ */

.toc {
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.toc__k {
  margin: 0 0 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.toc__list { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }

/* Only the entries scroll. The heading is their sibling rather than part of
   the scrolling box, so it holds its place while they move under it, and the
   card below the contents stays in view instead of being pushed off by a
   long article. The mobile disclosure is left alone: it is closed by
   default and has the whole page to open into. */
.toc:not(.toc--mobile) .toc__list {
  /* 350px wherever the window has room for it. On a shorter one the list
     gives way instead of the card: the reserve is what the heading, the gap,
     the card and the offsets below the list come to, so the card keeps its
     place on screen rather than being the thing that falls off the bottom. */
  max-height: max(9rem, min(250px, 100vh - 28rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for the scrollbar, so the longest entry is not set underneath it. */
  padding-inline-end: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--blue-300) transparent;
}
.toc:not(.toc--mobile) .toc__list::-webkit-scrollbar { width: 6px; }
.toc:not(.toc--mobile) .toc__list::-webkit-scrollbar-track { background: transparent; }
.toc:not(.toc--mobile) .toc__list::-webkit-scrollbar-thumb {
  border-radius: var(--r-pill);
  background: var(--blue-300);
}
.toc__item a {
  display: block;
  padding: 0.4rem 0.6rem;
  /* The bar that marks the current entry is always present and transparent,
     so nothing shifts when it appears. */
  border-inline-start: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out-soft), background var(--d-fast) var(--ease-out-soft);
}
.toc__item a:hover { background: var(--blue-50); color: var(--blue-800); }
.toc__item--h3 a { padding-inline-start: 1.5rem; font-size: var(--fs-xs); }
/* Not colour alone: the current entry also gains a bar and a heavier weight. */
.toc__item.is-current a {
  border-inline-start-color: var(--blue-500);
  background: var(--blue-50);
  font-weight: 700;
  color: var(--blue-800);
}

/* Only ever in flow below 1040px, where it needs air on both sides. */
.toc--mobile { margin-block: 0 clamp(1.5rem, 1.2rem + 1.5vw, 2rem); }
.toc--mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-800);
  cursor: pointer;
  list-style: none;
}
.toc--mobile > summary::-webkit-details-marker { display: none; }
.toc--mobile > summary svg { transition: rotate var(--d-fast) var(--ease-out-soft); }
.toc--mobile[open] > summary svg { rotate: 180deg; }
.toc--mobile nav { padding: 0.6rem 0.25rem 0; }
@media (min-width: 1040px) { .toc--mobile { display: none; } }
@media (max-width: 1039px) { .bp-side .toc { display: none; } }

/* --- Article body ----------------------------------------------------------- */

/* Every heading is a scroll target, so each one clears the sticky header when
   it is jumped to from the contents. */
.bp-h2, .bp-h3 { scroll-margin-top: 6.5rem; }

.bp-h2 {
  margin: clamp(2.25rem, 1.8rem + 2vw, 3.25rem) 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--blue-900);
  text-wrap: balance;
}
.bp-h3 {
  margin: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) 0 0.6rem;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-800);
}
.bp-p {
  margin: 0 0 1.1rem;
  font-size: var(--bp-prose);
  line-height: 1.72;
  color: var(--text-secondary);
  text-wrap: pretty;
}
/* The direct answer under a question heading. */
.bp-answer {
  margin: 0 0 1.25rem;
  padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem) clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
  border-inline-start: 3px solid var(--blue-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--blue-50);
  font-size: var(--bp-prose);
  line-height: 1.65;
  font-weight: 600;
  color: var(--blue-900);
}

/* base.css resets `list-style: none` on every ul and ol, so a list here had
   the indent of a list and none of the markers — the text simply sat pushed
   to the right with nothing explaining why. Markers are drawn rather than
   restored, so they take the brand colours and line up with the first line of
   text at any size. */
.bp-ul, .bp-ol { display: grid; gap: 0.55rem; margin: 0 0 1.25rem; padding: 0; }
.bp-ul li, .bp-ol li {
  position: relative;
  padding-inline-start: 1.9rem;
  font-size: var(--bp-prose);
  line-height: 1.65;
  color: var(--text-secondary);
}
.bp-ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.45rem;
  /* `em` so the dot tracks the first line whatever the text is set at. */
  top: 0.68em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--blue-400);
}
.bp-ol { counter-reset: bp-ol; }
.bp-ol li { counter-increment: bp-ol; }
.bp-ol li::before {
  content: counter(bp-ol);
  position: absolute;
  inset-inline-start: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--blue-100);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue-700);
}

.bp-note, .bp-cta, .bp-verify {
  margin: clamp(1.5rem, 1.25rem + 1vw, 2rem) 0;
  padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  border-radius: var(--r-lg);
}
.bp-note { background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-200); }
.bp-note__k { margin: 0 0 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-800); }
.bp-note__d { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--blue-900); }

/* Unmissable on purpose: an unchecked claim, waiting to be answered and
   removed before this article goes out. */
.bp-verify { background: var(--yellow-200); box-shadow: inset 0 0 0 1px var(--yellow-500); }
.bp-verify__k {
  margin: 0 0 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow-700);
}
.bp-verify__d { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--blue-900); }

/* --- Manual checks ---------------------------------------------------------
   Each item is a thing to do and what the result of doing it tells you. They
   are set as two lines in a bordered row rather than one run-on bullet,
   because the instruction is what a reader scans for and the explanation is
   what they read once they have found it. */
.bp-checks {
  display: grid;
  gap: 0.6rem;
  margin: clamp(1.25rem, 1rem + 0.8vw, 1.75rem) 0;
  padding: 0;
  counter-reset: bp-check;
}
.bp-checks li {
  position: relative;
  counter-increment: bp-check;
  padding: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem) clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
  padding-inline-start: 3.2rem;
  border-radius: var(--r-md);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-100);
}
.bp-checks li::before {
  content: counter(bp-check);
  position: absolute;
  inset-inline-start: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
  top: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--blue-500);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--white);
}
.bp-checks b {
  display: block;
  font-size: var(--bp-prose);
  font-weight: 700;
  line-height: 1.45;
  color: var(--blue-900);
}
.bp-checks span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Key takeaways --------------------------------------------------------
   The article in brief, above the first section, for a reader deciding
   whether the next twelve minutes are worth it. A step deeper in tint than
   the callouts further down so it reads as the summary rather than as another
   aside, with the yellow rule to mark it as the one panel of its kind. */
.bp-tk {
  margin: 0 0 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  padding: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
  border-radius: var(--r-lg);
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.bp-tk__k {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blue-900);
}
.bp-tk__k::after {
  content: '';
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-top: 0.6rem;
  border-radius: var(--r-pill);
  background: var(--yellow-400);
}
.bp-tk__short {
  margin: 0.85rem 0 0;
  font-size: var(--bp-prose);
  line-height: 1.65;
  color: var(--blue-900);
  text-wrap: pretty;
}

/* The toggle. Both engines' default markers are removed and replaced by the
   label and chevron, so the control says which way it goes in words and not
   by the arrow alone. */
.bp-tk__more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bp-tk__more > summary::-webkit-details-marker { display: none; }
.bp-tk__more > summary::marker { content: ''; }
.bp-tk__more > summary:hover { color: var(--blue-800); }
.bp-tk__more > summary:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* One of the two words is hidden by the open state rather than swapped in
   script, so the label cannot fall out of step with the disclosure however
   it was toggled. */
.bp-tk__more > summary .bp-tk__hide,
.bp-tk__more[open] > summary .bp-tk__show { display: none; }
.bp-tk__more[open] > summary .bp-tk__hide { display: inline; }
.bp-tk__more[open] > summary svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .bp-tk__more > summary svg { transition: transform 0.18s ease; }
}

.bp-tk__list { display: grid; gap: 0.5rem; margin: 0.95rem 0 0; padding: 0; }
.bp-tk__list li {
  position: relative;
  padding-inline-start: 1.65rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--blue-900);
  text-wrap: pretty;
}
.bp-tk__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.3rem;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--blue-500);
}

.bp-cta {
  display: grid;
  gap: 1rem;
  background: var(--blue-900);
}
@media (min-width: 620px) { .bp-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.bp-cta__k { margin: 0 0 0.3rem; font-size: var(--fs-md); font-weight: 700; color: var(--text-on-ink); }
.bp-cta__d { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-on-ink-2); }

.bp-tablewrap { margin: clamp(1.5rem, 1.25rem + 1vw, 2rem) 0; overflow-x: auto; }
.bp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bp-table th, .bp-table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--blue-100);
  text-align: start;
  vertical-align: top;
  line-height: 1.55;
}
.bp-table thead th { background: var(--blue-50); font-weight: 700; color: var(--blue-800); white-space: nowrap; }
.bp-table tbody th { font-weight: 700; color: var(--blue-900); }
.bp-table td { color: var(--text-secondary); }

.bp-faq { display: grid; gap: 0.6rem; margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0; }
.bp-q { border-radius: var(--r-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--blue-200); }
.bp-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-900);
  cursor: pointer;
  list-style: none;
}
.bp-q > summary::-webkit-details-marker { display: none; }
.bp-q > summary svg { flex: none; transition: rotate var(--d-fast) var(--ease-out-soft); }
.bp-q[open] > summary svg { rotate: 180deg; }
.bp-q[open] { box-shadow: inset 0 0 0 1px var(--blue-300); }
.bp-q > p { margin: 0; padding: 0 1.1rem 1.1rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-secondary); }

.bp-foot { margin-top: clamp(2rem, 1.6rem + 2vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--blue-100); }

/* --- The sidebar card -------------------------------------------------------- */

.bp-bot {
  padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  border-radius: var(--r-lg);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.bp-bot__k {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-900);
}
.bp-bot__d { margin: 0 0 1rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-secondary); }

/* --- The modal ---------------------------------------------------------------- */

.promo {
  width: min(56rem, 92vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: 0 40px 90px -40px rgb(6 24 56 / 0.7);
  overflow: visible;
}
.promo::backdrop { background: rgb(9 38 83 / 0.55); backdrop-filter: blur(2px); }
.promo[open] { animation: promo-in 0.22s var(--ease-out-soft) both; }
@keyframes promo-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) {
  .promo[open] { animation: none; }
  .promo__x, .share__btn { transition: none; }
}

.promo__panel {
  display: grid;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.75rem);
  max-height: 92vh;
  overflow: auto;
  border-radius: inherit;
}
@media (min-width: 760px) {
  .promo__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; }
}
.promo__x {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-700);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out-soft);
}
.promo__x:hover { background: var(--blue-100); }

.promo__k {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue-900);
  text-wrap: balance;
}
.promo__d { margin: 0 0 1.1rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.promo__list { display: grid; gap: 0.6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.promo__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--blue-900);
}
.promo__list svg { flex: none; margin-top: 0.2rem; color: var(--blue-500); }

/* The drawn stand-in for a product screenshot. */
.promo__art { min-width: 0; }
.promo__shot {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: var(--r-lg);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.promo__bar { display: flex; gap: 0.3rem; }
.promo__bar i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--blue-300); }
.promo__ask {
  justify-self: end;
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
  background: var(--blue-500);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: #fff;
}
.promo__say {
  display: grid;
  gap: 0.35rem;
  width: 80%;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--blue-100);
}
.promo__say i { height: 0.5rem; border-radius: var(--r-pill); background: var(--blue-100); }
.promo__say i:last-child { width: 60%; }
.promo__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.promo__chips em {
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--blue-700);
}
.promo__foot { margin: 0.85rem 0 0; font-size: 0.7rem; text-align: center; color: var(--text-secondary); }

/* ============================================================================
   Blog — index (/blog)
   ========================================================================= */

.bx-hero {
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(2rem, 1.5rem + 3vw, 3.5rem);
  background: var(--blue-50);
}
.bx-eyebrow {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.bx-title { margin: 0.75rem 0 0; max-width: 20ch; color: var(--blue-900); text-wrap: balance; }
.bx-lead { margin: 1.25rem 0 0; max-width: 56ch; color: var(--text-secondary); text-wrap: pretty; }

.bx-list-wrap { background: var(--white); }

/* Six columns, so one row can hold one card, two or three without any of the
   three widths needing a fraction that does not divide cleanly. */
.bx-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 0.85rem + 1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-item { display: grid; min-width: 0; grid-column: span 6; }

@media (min-width: 720px) {
  .bx-item--2, .bx-item--3 { grid-column: span 3; }
}
@media (min-width: 1060px) {
  .bx-item--3 { grid-column: span 2; }
}

.bx-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--blue-100);
  text-decoration: none;
  transition: background var(--d-fast) var(--ease-out-soft),
              box-shadow var(--d-fast) var(--ease-out-soft),
              transform var(--d-base) var(--ease-out-soft);
}
.bx-card:hover { transform: translateY(-3px); background: var(--blue-200); box-shadow: var(--e-1); }
.bx-card:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }

.bx-card__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--blue-900);
  text-wrap: balance;
}
.bx-card:hover .bx-card__k { text-decoration: underline; text-underline-offset: 4px; }

/* Held to three lines so a row of cards keeps one baseline. The whole summary
   is on the article itself, which is one click away. */
.bx-card__d {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--blue-800);
  text-wrap: pretty;
}

/* Category, byline, length and date, separated by dots drawn between the
   items rather than typed into the markup — so a screen reader reads four
   values and not a line of punctuation. */
.bx-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  margin: 0;
  padding-top: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--blue-700);
}
.bx-card__rest { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; margin-top: auto; }

.bx-card__facts { display: flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.bx-card__facts > * + *::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
}
.bx-card__cat { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.bx-card__by { font-weight: 700; }

/* --- The lead card -------------------------------------------------------
   The newest article, across the full width, in the brand yellow the demo
   button uses. Navy on yellow is the strongest pairing the palette has, which
   is the point: one thing on this page should be unmistakably first. */
.bx-card--lead {
  position: relative;
  gap: 0.85rem;
  padding-bottom: clamp(2.6rem, 2.2rem + 1.5vw, 3.4rem);
  background: var(--yellow-300);
  overflow: hidden;
}
.bx-card--lead:hover { background: var(--yellow-400); }
.bx-card--lead .bx-card__k {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.bx-card--lead .bx-card__d {
  -webkit-line-clamp: 2;
  max-width: 95ch;
  font-size: var(--fs-md);
  color: var(--blue-900);
}
.bx-card--lead .bx-card__meta { color: var(--blue-900); padding-top: 0.15rem; }

/* The comb along the foot. Repeating gradients rather than elements: there is
   nothing here to announce and nothing to keep in the DOM. */
/* A full-width card that is not the lead. The title takes the left column
   and everything else the right, so the band is filled without borrowing
   the yellow that marks the newest article. */
.bx-card--wide .bx-card__k { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.bx-card--wide .bx-card__d { -webkit-line-clamp: 3; }
@media (min-width: 1000px) {
  .bx-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  }
  .bx-card--wide .bx-card__rest { margin-top: 0; }
}

.bx-card__comb {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  background:
    repeating-linear-gradient(90deg, var(--yellow-500) 0 2px, transparent 2px 7px);
  opacity: .65;
}

@media (prefers-reduced-motion: reduce) {
  .bx-card, .bx-card:hover { transition: none; transform: none; }
}

/* --- Terminology -----------------------------------------------------------
   The definitions the rest of the article leans on, so they are a panel rather
   than seven more bullets. Each term gets its own card: the word is the thing
   a reader scans for, and in a bulleted run it was buried mid-sentence behind
   an em dash.

   Two columns, because the definitions are short; a seventh card alone on a
   row would read as a loose end, so an odd last one spans the width. */
.bp-terms {
  display: grid;
  gap: 0.6rem;
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 clamp(1.5rem, 1.25rem + 1vw, 2rem);
  padding: 0;
}
@media (min-width: 620px) {
  .bp-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-term:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.bp-term {
  position: relative;
  min-width: 0;
  padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem) clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  /* The accent bar is what makes the panel read as one object rather than as
     a grid of unrelated boxes. */
  border-inline-start: 3px solid var(--blue-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--blue-50);
}
.bp-term dt {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-900);
}
.bp-term dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- Figures ---------------------------------------------------------------
   A drawn diagram on a pale ground, with the caption doing the explaining.
   Full-bleed inside the article column so the drawing has room to be read at
   the width the text is set to. */
.bp-fig {
  margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) 0;
}
.bp-fig__art {
  padding: clamp(1rem, 0.85rem + 1vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-100);
}
.bp-fig figcaption {
  margin-top: 0.85rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.bf { display: block; width: 100%; height: auto; }
/* The drawing takes the brand blue; the labels are darker so they stay
   readable against the pale ground the figure sits on. */
.bf-ink { color: var(--blue-500); }
.bf text { fill: var(--blue-900); stroke: none; font-family: var(--font-ui, inherit); }
.bf-lbl { font-size: 13px; font-weight: 700; }
.bf-tag { font-size: 11px; font-weight: 700; text-anchor: middle; fill: var(--blue-700); }
.bf-sm { font-size: 11.5px; fill: var(--text-secondary); }