/* ============================================================
   Article v2 — single blog article template (July 2026 redesign)

   Scoped under .article-v2 (templates/single-blog.twig), enqueued only on
   is_singular('blog') AFTER the global bundle (enqueue/article.php) so
   equal-specificity rules here win by source order.

   Standalone on purpose: build/css/style.min.css currently contains
   redesign rules missing from src/styles SCSS, so the Gulp pipeline is
   frozen until that divergence is resolved. Do not port this into SCSS yet.

   Tokens mirror the live compiled CSS: navy #061A31, blue #008DF3,
   ink #101828/#1D2939, hairline #E7ECF4, chip #CFEDFE, radii 8/12/16.
   Link blue is #0A66C2 (brand #008DF3 fails WCAG 4.5:1 on white).
   ============================================================ */

.article-v2 {
  --a2-navy: #061A31;
  --a2-blue: #008DF3;
  --a2-ink-heading: #061A31;
  --a2-ink-body: #1D2939;
  --a2-ink-muted: #475467;
  --a2-ink-faint: #667085;
  --a2-hairline: #E7ECF4;
  --a2-wash: #F8F9FC;
  --a2-link: #0A66C2;
  --a2-link-hover: #085096;
  --a2-on-navy-body: #B9C6DB;
  --a2-on-navy-accent: #A5DEFD;
  --a2-on-navy-faint: #A9B8CC;
  --a2-radius-s: 8px;
  --a2-radius-m: 12px;
  --a2-radius-l: 16px;
  --a2-shadow: 0 1px 2px 0 rgba(16, 24, 40, .05);
  --a2-measure: 680px;
  --a2-hero-max: 1020px;
  --a2-serif: 'DM Serif Display', Georgia, serif;

  font-size: 17px;
  line-height: 1.7;
  color: var(--a2-ink-body);
}
@media (min-width: 768px) {
  .article-v2 { font-size: 19px; }
}

/* Header visibility on articles.
   The global header bar (.header__controls) is transparent until scroll;
   light PAGES opt into a permanent translucent navy bar via the
   dark_header ACF field (-> .header--dark), but that field only exists on
   the page post type, so blog posts rendered a white-on-white nav over the
   new light template. Replicate the exact .header--dark treatment here —
   this stylesheet loads only on single blog articles, so no other page's
   nav changes. */
.header .header__controls {
  background: rgba(6, 26, 49, .9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Reading progress bar (JS-inserted into the sticky .header) */
.header .article-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--a2-blue);
  pointer-events: none;
}

/* ============================================================
   ARTICLE HEADER (light — replaces the gradient hero band)
   ============================================================ */
/* Top padding includes the header bar height: .header collapses to
   height 0 (message-not-loaded) and its 72/80px controls bar overflows
   on top of the page, so content must clear it plus breathing room. */
.article-v2 .article-head { padding-top: 112px; } /* 72px bar + 40px */
@media (min-width: 768px) { .article-v2 .article-head { padding-top: 144px; } } /* 80px bar + 64px */
.article-v2 .article-head__inner {
  max-width: var(--a2-measure);
  margin-inline: auto;
}
.article-v2 .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--a2-ink-muted);
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.article-v2 .crumbs a { color: var(--a2-ink-muted); text-decoration: none; }
.article-v2 .crumbs a:hover { color: var(--a2-link); text-decoration: underline; }
.article-v2 .crumbs li + li::before {
  content: '/';
  color: #98A2B3;
  margin-right: 8px;
}
.article-v2 .crumbs li:last-child,
.article-v2 .crumbs li:last-child a { color: var(--a2-ink-heading); }

.article-v2 .article-title {
  font-family: var(--a2-serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.35rem + 2.7vw, 3.25rem); /* 34 → 52px */
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--a2-ink-heading);
  margin: 0 0 20px;
  text-wrap: balance;
}
.article-v2 .article-standfirst {
  font-size: 19px;
  line-height: 1.55;
  color: var(--a2-ink-muted);
  margin: 0 0 28px;
  text-wrap: pretty;
}
@media (min-width: 768px) { .article-v2 .article-standfirst { font-size: 21px; } }

.article-v2 .byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--a2-hairline);
  font-size: 15px;
  color: var(--a2-ink-muted);
}
.article-v2 .byline__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--a2-navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.article-v2 .byline__name { font-weight: 600; color: var(--a2-ink-heading); }
.article-v2 .byline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article-v2 .byline__meta .dot { color: #98A2B3; }
.article-v2 .article-head--no-hero .byline { border-bottom: 1px solid var(--a2-hairline); }

/* ---------- Hero image (optional) ---------- */
.article-v2 .article-hero {
  max-width: var(--a2-hero-max);
  margin: 8px auto 0;
}
.article-v2 .article-hero figure { margin: 0; }
.article-v2 .article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--a2-radius-m);
  display: block;
}
@media (min-width: 768px) { .article-v2 .article-hero img { border-radius: var(--a2-radius-l); } }

/* ============================================================
   LAYOUT — share rail | prose | table of contents
   ============================================================ */
.article-v2 .article-layout {
  padding-top: 40px;
  padding-bottom: 24px;
}
@media (min-width: 768px) { .article-v2 .article-layout { padding-top: 56px; } }
@media (min-width: 1200px) {
  .article-v2 .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(var(--a2-measure), 100%) minmax(0, 1fr);
    column-gap: 48px;
  }
}
.article-v2 .article-column {
  display: block;
  max-width: var(--a2-measure);
  margin-inline: auto;
  min-width: 0;
}
@media (min-width: 1200px) {
  .article-v2 .article-column { grid-column: 2; margin-inline: 0; }
}

/* Share rail (desktop only) — wraps parts/blog-share.twig anchors */
.article-v2 .share-rail { display: none; }
@media (min-width: 1200px) {
  .article-v2 .share-rail {
    display: block;
    grid-column: 1;
    justify-self: end;
  }
  .article-v2 .share-rail__inner {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
.article-v2 .article-share a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--a2-radius-s);
  border: 1px solid #DDE3F3;
  background: #fff;
  box-shadow: var(--a2-shadow);
  color: var(--a2-ink-faint);
  text-decoration: none;
  transition: transform .2s ease, color .2s ease, border-color .2s ease;
}
.article-v2 .article-share a:hover { transform: translateY(-2px); color: var(--a2-navy); border-color: #B9C6DB; }
.article-v2 .article-share a svg,
.article-v2 .article-share a .icon {
  width: 17px; height: 17px;
  fill: #98A2B3;
  transition: fill .2s ease;
}
.article-v2 .article-share a:hover svg { fill: var(--a2-navy); }
/* Copy-link with label (bottom variant) */
.article-v2 .article-share a.blog-detail__share {
  width: auto;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--a2-navy);
}
.article-v2 .article-share a.copied {
  background: var(--a2-navy);
  border-color: var(--a2-navy);
  color: #fff;
}
.article-v2 .article-share a.copied svg { fill: #fff; }

/* Table of contents (desktop right rail) */
.article-v2 .toc { display: none; }
@media (min-width: 1200px) {
  .article-v2 .toc {
    display: block;
    grid-column: 3;
    justify-self: start;
    width: 100%;
    max-width: 232px;
    min-width: 0;
  }
  .article-v2 .toc__inner { position: sticky; top: 120px; }
}
.article-v2 .toc__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--a2-ink-faint);
  margin: 0 0 12px;
}
.article-v2 .toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--a2-hairline);
}
.article-v2 .toc__list a {
  display: block;
  padding: 6px 0 6px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--a2-ink-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1.5px;
  transition: color .15s ease, border-color .15s ease;
}
.article-v2 .toc__list a:hover { color: var(--a2-ink-heading); }
.article-v2 .toc__list a.active {
  color: var(--a2-ink-heading);
  font-weight: 600;
  border-left-color: var(--a2-blue);
}

/* Mobile TOC */
.article-v2 .toc-mobile {
  border: 1px solid var(--a2-hairline);
  border-radius: var(--a2-radius-m);
  margin: 0 0 32px;
}
@media (min-width: 1200px) { .article-v2 .toc-mobile { display: none; } }
.article-v2 .toc-mobile summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--a2-ink-heading);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.article-v2 .toc-mobile summary::-webkit-details-marker { display: none; }
.article-v2 .toc-mobile summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid var(--a2-ink-faint);
  border-bottom: 2px solid var(--a2-ink-faint);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.article-v2 .toc-mobile[open] summary::after { transform: rotate(-135deg); }
.article-v2 .toc-mobile ul { list-style: none; margin: 0; padding: 0 18px 12px; }
.article-v2 .toc-mobile li a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: var(--a2-ink-muted);
  text-decoration: none;
  border-top: 1px solid var(--a2-hairline);
}
.article-v2 .toc-mobile li a:hover { color: var(--a2-link); }

/* ============================================================
   PROSE — the article content model
   (Selectors are kept at .article-v2 .prose <el> so they out-rank or
   source-order-beat the legacy .editor / .blog-detail__editor rules.)
   ============================================================ */
.article-v2 .prose { font-size: 17px; }
@media (min-width: 768px) { .article-v2 .prose { font-size: 19px; } }
.article-v2 .prose > * { margin-top: 0; margin-bottom: 24px; }
.article-v2 .prose p {
  font-size: inherit;
  line-height: 1.75;
  color: var(--a2-ink-body);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.article-v2 .prose a {
  color: var(--a2-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(10, 102, 194, .4);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.article-v2 .prose a:hover { color: var(--a2-link-hover); text-decoration-color: currentColor; }
/* Buttons inside prose must not inherit link styling */
.article-v2 .prose a.btn, .article-v2 .prose a.btn:hover { color: #fff; text-decoration: none; }
.article-v2 .prose strong, .article-v2 .prose b { font-weight: 650; color: var(--a2-ink-heading); }

.article-v2 .prose h2 {
  font-family: var(--a2-serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2rem); /* 26 → 32px */
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--a2-ink-heading);
  margin: 56px 0 16px;
  text-wrap: balance;
}
/* Historical articles carry in-body h1s until phase 2 normalizes them */
.article-v2 .prose h1 {
  font-family: var(--a2-serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);
  line-height: 1.2;
  color: var(--a2-ink-heading);
  margin: 56px 0 16px;
}
.article-v2 .prose h3 {
  font-family: inherit;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--a2-ink-heading);
  margin: 40px 0 12px;
  text-wrap: balance;
}
.article-v2 .prose h4 {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--a2-ink-heading);
  margin: 32px 0 10px;
}
.article-v2 .prose h2:first-child,
.article-v2 .prose h3:first-child { margin-top: 0; }
/* Bold-wrapped headings from pasted content */
.article-v2 .prose h1 b, .article-v2 .prose h2 b, .article-v2 .prose h3 b,
.article-v2 .prose h1 strong, .article-v2 .prose h2 strong, .article-v2 .prose h3 strong {
  font-weight: inherit;
  color: inherit;
}

.article-v2 .prose ul, .article-v2 .prose ol {
  display: block;
  padding-left: 26px;
  margin: 0 0 28px;
}
.article-v2 .prose li {
  font-size: inherit;
  color: var(--a2-ink-body);
  margin-bottom: 10px;
  padding-left: 4px;
}
.article-v2 .prose li::marker { color: var(--a2-blue); }
.article-v2 .prose ol li::marker { color: var(--a2-ink-heading); font-weight: 600; font-size: .9em; }
.article-v2 .prose li > ul, .article-v2 .prose li > ol { margin: 10px 0 0; }

.article-v2 .prose blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--a2-hairline);
}
.article-v2 .prose blockquote p {
  font-family: var(--a2-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: #344054;
  margin-bottom: 12px;
}
@media (min-width: 768px) { .article-v2 .prose blockquote p { font-size: 24px; } }
.article-v2 .prose blockquote p:last-of-type { margin-bottom: 0; }
.article-v2 .prose blockquote cite {
  display: block;
  font-family: 'Inter', Arial, sans-serif;
  font-style: normal;
  font-size: 15px;
  color: var(--a2-ink-faint);
  margin-top: 10px;
}

.article-v2 .prose figure { margin: 40px 0; }
.article-v2 .prose figure img,
.article-v2 .prose p > img {
  max-width: 100%;
  height: auto;
  border-radius: var(--a2-radius-m);
  display: block;
}
.article-v2 .prose figcaption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--a2-ink-faint);
  margin-top: 10px;
  text-align: center;
}

.article-v2 .prose hr {
  border: 0;
  height: 1px;
  background: var(--a2-hairline);
  margin: 48px 0;
}

/* Tables (base theme leaves them completely unstyled) */
.article-v2 .prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  margin: 36px 0;
  border: 1px solid var(--a2-hairline);
  border-radius: var(--a2-radius-m);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-v2 .prose thead th {
  background: var(--a2-wash);
  font-weight: 600;
  color: var(--a2-ink-heading);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--a2-hairline);
  white-space: nowrap;
}
.article-v2 .prose tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--a2-hairline);
  color: var(--a2-ink-body);
  vertical-align: top;
}
.article-v2 .prose tbody tr:last-child td { border-bottom: 0; }

/* Code */
.article-v2 .prose code {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  background: #F4F5FB;
  border: 1px solid var(--a2-hairline);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--a2-ink-heading);
}
.article-v2 .prose pre {
  background: var(--a2-navy);
  color: #DCE6F5;
  border-radius: var(--a2-radius-m);
  padding: 20px 24px;
  overflow-x: auto;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 36px 0;
}
.article-v2 .prose pre code {
  background: none; border: 0; padding: 0;
  color: inherit; font-size: inherit;
}

/* Raw iframes (legacy YouTube embeds) — JS upgrades these to facades;
   this is the no-JS fallback */
.article-v2 .prose iframe {
  max-width: 100%;
  border: 0;
  border-radius: var(--a2-radius-m);
}

/* ============================================================
   LEGACY CONTENT NEUTRALIZERS
   The article body still renders through the theme's ACF blocks
   (.editor/.blog-detail__editor wrappers, box view, article-button).
   These flatten the old boxed layout into the new reading column.
   ============================================================ */
.article-v2 .prose .editor,
.article-v2 .prose .blog-detail__editor {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.article-v2 .prose .editor .in { max-width: 100%; width: 100%; }

/* The old grey panel (article-editor "box" view) becomes the bordered
   summary card — no background fill */
.article-v2 .prose .blog-detail__box {
  background: transparent;
  border: 1px solid var(--a2-hairline);
  border-radius: var(--a2-radius-l);
  max-width: none;
  margin: 36px 0;
  padding: 24px 24px 12px;
}
@media (min-width: 768px) { .article-v2 .prose .blog-detail__box { padding: 28px 32px 16px; } }
.article-v2 .prose .blog-detail__box p { font-size: 16px; color: var(--a2-ink-body); margin-bottom: 16px; }
.article-v2 .prose .blog-detail__box li { font-size: 16px; }
@media (min-width: 768px) {
  .article-v2 .prose .blog-detail__box p,
  .article-v2 .prose .blog-detail__box li { font-size: 17px; }
}
.article-v2 .prose .blog-detail__box h2,
.article-v2 .prose .blog-detail__box h3 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--a2-ink-heading);
  margin: 0 0 14px;
}

/* article-button block wrapper */
.article-v2 .prose .blog-detail__button {
  max-width: none;
  margin: 48px 0;
  text-align: center;
}
.article-v2 .prose .blog-detail__button p {
  font-style: italic;
  font-weight: 500;
  color: var(--a2-ink-heading);
  margin-bottom: 16px;
}

/* ============================================================
   INLINE NEWSLETTER SIGNUP (injected server-side, navy card)
   Styles the shared .lp-email-form markup contract fully — the scoped
   capture-form-block.css selectors do not reach inside .article-signup.
   ============================================================ */
.article-v2 .article-signup {
  position: relative;
  overflow: hidden;
  background: var(--a2-navy);
  border-radius: var(--a2-radius-l);
  padding: 32px 24px;
  margin: 48px 0;
}
@media (min-width: 768px) { .article-v2 .article-signup { padding: 40px 44px; } }
.article-v2 .article-signup::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 141, 243, .28), transparent);
  pointer-events: none;
}
.article-v2 .article-signup__inner { position: relative; max-width: 480px; }
.article-v2 .article-signup .article-signup__heading {
  font-family: var(--a2-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
}
.article-v2 .article-signup .article-signup__text {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--a2-on-navy-body);
  margin: 0 0 22px;
}
.article-v2 .article-signup .lp-email-form__row,
.article-v2 .article-signup .lp-email-form__name-row { display: flex; gap: 10px; }
.article-v2 .article-signup .lp-email-form__name-row { margin-bottom: 12px; }
@media (max-width: 480px) {
  .article-v2 .article-signup .lp-email-form__row,
  .article-v2 .article-signup .lp-email-form__name-row { flex-direction: column; }
}
.article-v2 .article-signup .lp-email-form__input {
  flex: 1;
  min-width: 0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px; /* never below 16px: <16px triggers iOS Safari focus zoom */
  color: var(--a2-ink-heading);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--a2-radius-s);
  padding: 12px 16px;
}
.article-v2 .article-signup .lp-email-form__input::placeholder { color: var(--a2-ink-faint); }
.article-v2 .article-signup .lp-email-form__input:focus-visible { outline: 2px solid var(--a2-blue); outline-offset: 1px; }
.article-v2 .article-signup .lp-email-form__btn {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #1077D7; /* 4.5:1 with white; the brand gradient's dark end */
  border: 0;
  border-radius: var(--a2-radius-s);
  padding: 12px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease;
}
.article-v2 .article-signup .lp-email-form__btn:hover { background: #0A66C2; }
.article-v2 .article-signup .lp-email-form__btn:disabled { opacity: .7; cursor: default; }
.article-v2 .article-signup .lp-email-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--a2-on-navy-faint);
  margin: 0 0 14px;
  cursor: pointer;
}
.article-v2 .article-signup .lp-email-form__consent input { margin-top: 3px; accent-color: var(--a2-blue); }
.article-v2 .article-signup .lp-email-form__status {
  font-size: 14px;
  color: var(--a2-on-navy-accent);
  margin: 10px 0 0;
  min-height: 1em;
}
.article-v2 .article-signup .lp-email-form__status--error { color: #FDA29B; }
.article-v2 .article-signup .lp-email-form__success {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.article-v2 .article-signup .lp-email-form__success svg { flex-shrink: 0; }

/* ============================================================
   ARTICLE FOOT — share row, author box, disclosure
   ============================================================ */
.article-v2 .article-foot {
  max-width: var(--a2-measure);
  margin-inline: auto;
}
.article-v2 .share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--a2-hairline);
  padding: 24px 0;
  margin-top: 24px;
}
.article-v2 .share-row__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--a2-ink-heading);
  margin-right: 8px;
}
.article-v2 .author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-top: 1px solid var(--a2-hairline);
  padding: 28px 0;
}
.article-v2 .author-box .byline__avatar { width: 48px; height: 48px; font-size: 16px; }
.article-v2 .author-box__name {
  font-size: 16px;
  font-weight: 650;
  color: var(--a2-ink-heading);
  margin: 2px 0 4px;
}
.article-v2 .author-box__bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--a2-ink-muted);
  margin: 0;
}
.article-v2 .article-disclosure {
  border-top: 1px solid var(--a2-hairline);
  padding: 24px 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--a2-ink-faint);
}
.article-v2 .article-disclosure p { margin: 0 0 8px; }
.article-v2 .article-disclosure a { color: var(--a2-ink-faint); }

/* ============================================================
   VIDEO FACADE (JS builds these from legacy embeds/links)
   ============================================================ */
.article-v2 .video-embed {
  position: relative;
  margin: 40px 0;
  border-radius: var(--a2-radius-m);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--a2-navy);
}
@media (min-width: 768px) { .article-v2 .video-embed { border-radius: var(--a2-radius-l); } }
.article-v2 .video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}
.article-v2 .video-embed__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: linear-gradient(to top, rgba(6, 26, 49, .45), rgba(6, 26, 49, 0) 45%);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.article-v2 .video-embed__play {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(6, 26, 49, .82);
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.article-v2 .video-embed__play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.article-v2 .video-embed__btn:hover .video-embed__play { background: var(--a2-blue); transform: scale(1.06); }
.article-v2 .video-embed__btn:focus-visible { outline: 3px solid var(--a2-blue); outline-offset: -3px; }
.article-v2 .video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  border-radius: 0;
  max-width: none;
}

/* ============================================================
   KEEP READING (cards reuse the global .blog-card styles)
   ============================================================ */
.article-v2 .related { padding: 64px 0 80px; }
.article-v2 .related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.article-v2 .related__title {
  font-family: var(--a2-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  color: var(--a2-ink-heading);
  margin: 0;
}
.article-v2 .related__all {
  font-size: 15px;
  font-weight: 600;
  color: var(--a2-link);
  text-decoration: none;
  white-space: nowrap;
}
.article-v2 .related__all:hover { text-decoration: underline; }
.article-v2 .related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

/* ============================================================
   CONVERSION BAND (site-signature navy full-bleed)
   ============================================================ */
.article-v2 .cta-band {
  background: var(--a2-navy);
  padding: 72px 0;
  text-align: center;
}
@media (min-width: 768px) { .article-v2 .cta-band { padding: 96px 0; } }
.article-v2 .cta-band__title {
  font-family: var(--a2-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  color: #fff;
  margin: 0 0 12px;
  text-wrap: balance;
}
.article-v2 .cta-band__sub {
  font-size: 18px;
  color: var(--a2-on-navy-accent);
  margin: 0 0 32px;
}

/* ============================================================
   COMPARISON CONTENT COMPONENTS
   Rendered by define/comparison-components.php from the
   [bo_takeaways] / [bo_compare] / [bo_faq] shortcodes. The FAQ
   component has no styles of its own: it renders standard
   prose h2/h3/p. Design reference:
   website-files/blog-components/chosen-components-preview.html
   ============================================================ */
.article-v2 { --a2-col-wash: #F2F9FF; }

/* ---------- Key takeaways (ruled ledger) ---------- */
.article-v2 .prose .bo-takeaways {
  margin: 40px 0;
  padding: 26px 0 8px;
  border-top: 1px solid var(--a2-ink-heading);
  border-bottom: 1px solid var(--a2-hairline);
}
.article-v2 .prose .bo-takeaways h2.bo-takeaways__title {
  font-family: var(--a2-serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  color: var(--a2-ink-heading);
  margin: 0 0 20px;
}
.article-v2 .prose .bo-takeaways__list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bo-kt;
}
.article-v2 .prose .bo-takeaways__list li {
  counter-increment: bo-kt;
  position: relative;
  padding: 0 0 18px 44px;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--a2-ink-body);
}
@media (min-width: 768px) {
  .article-v2 .prose .bo-takeaways__list li { font-size: 17px; }
}
.article-v2 .prose .bo-takeaways__list li::marker { content: ''; }
.article-v2 .prose .bo-takeaways__list li::before {
  content: counter(bo-kt);
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--a2-serif);
  font-size: 23px;
  line-height: 1.5;
  color: var(--a2-blue);
}
.article-v2 .prose .bo-takeaways__list li + li {
  border-top: 1px solid var(--a2-hairline);
  padding-top: 18px;
}
.article-v2 .prose .bo-takeaways__list li + li::before { top: 16px; }

/* ---------- Comparison table (editorial spec table, navy header) ---------- */
.article-v2 .prose .bo-compare { margin: 36px 0; }
.article-v2 .prose .bo-compare__scroll {
  border: 1px solid var(--a2-hairline);
  border-radius: var(--a2-radius-m);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat local,
    linear-gradient(to right, rgba(16,24,40,.08), rgba(16,24,40,0)) left / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(16,24,40,.08), rgba(16,24,40,0)) right / 14px 100% no-repeat scroll,
    #fff;
}
/* Overrides the generic .prose table treatment (display:block etc.) */
.article-v2 .prose .bo-compare table {
  display: table;
  width: 100%;
  min-width: 640px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  overflow: visible;
}
.article-v2 .prose .bo-compare caption {
  caption-side: bottom;
  text-align: left;
  font-size: 13px;
  line-height: 1.55;
  color: var(--a2-ink-faint);
  padding: 12px 16px;
  border-top: 1px solid var(--a2-hairline);
}
.article-v2 .prose .bo-compare th,
.article-v2 .prose .bo-compare td { padding: 13px 16px; vertical-align: top; }
.article-v2 .prose .bo-compare thead th {
  position: sticky;
  top: 0;
  background: var(--a2-navy);
  color: #fff;
  text-align: left;
  font-size: 15px;
  font-weight: 650;
  border-bottom: 0;
  white-space: normal;
  z-index: 2;
}
.article-v2 .prose .bo-compare .bo-compare__brand-sub {
  display: block;
  font-size: 12px;
  font-weight: 450;
  color: var(--a2-on-navy-body);
  margin-top: 1px;
}
.article-v2 .prose .bo-compare thead th.bo-compare__corner {
  position: sticky;
  left: 0;
  z-index: 3;
}
.article-v2 .prose .bo-compare tbody th[scope="row"] {
  position: sticky;
  left: 0;
  background: #fff;
  text-align: left;
  font-weight: 600;
  color: var(--a2-ink-heading);
  width: 176px;
  min-width: 176px;
  max-width: 176px;
  z-index: 1;
  box-shadow: inset -1px 0 0 var(--a2-hairline);
}
.article-v2 .prose .bo-compare tbody th,
.article-v2 .prose .bo-compare tbody td {
  border-bottom: 1px solid var(--a2-hairline);
  color: var(--a2-ink-body);
}
.article-v2 .prose .bo-compare tbody tr:last-child th,
.article-v2 .prose .bo-compare tbody tr:last-child td { border-bottom: 0; }
.article-v2 .prose .bo-compare td.bo-compare__lead { background: var(--a2-col-wash); }
@media (prefers-reduced-motion: no-preference) {
  .article-v2 .prose .bo-compare tbody td { transition: background .15s ease; }
}
.article-v2 .prose .bo-compare tbody tr:hover td:not(.bo-compare__lead) {
  background: var(--a2-wash);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .article-v2 *, .article-v2 *::before, .article-v2 *::after,
  .header .article-progress {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}