/* ============================================================
   BLOG POST V2
   The blog article template. Use this on every new post.

   Live on:
     /blog/how-crm-automation-helps-you-stop-losing-leads
     /blog/what-is-marketing-automation-for-service-businesses

   Six older posts still load blog-post.css. Both stylesheets are kept
   until those are migrated. They never overlap: every selector here is
   scoped under .article-v2, and a v2 page does not load blog-post.css
   at all.

   To migrate a post: copy project-docs/templates/blog-post-v2.html,
   move the content into it, swap the stylesheet link. No selector
   renaming, no per-post CSS.

   Two rules that cost several rounds to find, do not undo them:
   1. --a2-shell MUST equal --container-max (1200px) with 32px gutters
      dropping to 20px at 600, matching .nav-container. Anything else
      and the article stops lining up with the header.
   2. Masthead elements take the full width. home.css has a global
      p{max-width:65ch} that silently clamps any uncapped paragraph.

   Flat colour only. No gradients anywhere in this file.
   ============================================================ */

.article-v2{
  /* Brand, exact values */
  --a2-black:#0A0A0A;
  --a2-paper:#FAF9F5;
  --a2-warm:#F4F2EA;
  --a2-acid:#E9FF5C;
  --a2-gray:#6B6B6B;
  --a2-gray-d:#A8A8A8;

  /* Long-form body copy is darker than --a2-gray on purpose. #6B6B6B on
     #FAF9F5 passes AA at 5.06:1, but it is a thin grey to read several
     hundred words in. #2A2A2A takes the same copy to 13.62:1. --a2-gray
     stays for labels, captions and secondary lines. */
  --a2-ink:#2A2A2A;

  --a2-line:rgba(10,10,10,.14);
  --a2-line-soft:rgba(10,10,10,.08);
  --a2-line-dk:#262626;

  --a2-header-h:80px;      /* .page-wrap padding-top in home.css */

  /* MUST equal --container-max in home.css (1200px), with the same 32px
     inline padding. The header, the footer and every other page on the site
     align to that. An earlier value of 1240 put this article 20px left of the
     header logo on every screen wide enough to hit the cap. */
  --a2-shell:1200px;
  --a2-prose:760px;
  --a2-rail:220px;
  --a2-gap:64px;

  /* The pilot H1 is larger than tokens.css --h1. Kept as a local
     custom property so the deviation is visible and revertible in
     one line rather than buried in a font-size declaration. */
  --a2-h1:clamp(38px,5vw,68px);

  background-color:var(--a2-paper);
  color:var(--a2-ink);
}

/* home.css carries a global p{max-width:65ch}, which silently clamped the
   masthead kicker and byline to 429px and stopped the byline rule a third of
   the way across the page. Every paragraph in this template takes its measure
   from its own component, so the inherited cap is cleared here and the
   components opt back in below. Do not delete without re-checking the
   masthead against the featured image edge. */
.article-v2 p{max-width:none}

/* ---------- shell ---------- */
.article-v2 .a2-shell{
  width:100%;max-width:var(--a2-shell);margin-inline:auto;
  padding-inline:32px;
}
/* Matches .nav-container in home.css: 32px gutters, dropping to 20px at 600.
   Note home.css's .container switches at 768 instead, so the site is not
   internally consistent here. The header is the edge a reader actually sees
   next to the article, so the article follows the header. Do not round these
   to nicer numbers. */
@media (max-width:600px){ .article-v2 .a2-shell{padding-inline:20px} }

/* ---------- reading progress ---------- */
.article-v2 .a2-progress{
  position:fixed;left:0;top:var(--a2-header-h);height:2px;width:100%;
  z-index:80;pointer-events:none;background:transparent;
}
.article-v2 .a2-progress span{
  display:block;height:100%;width:0;background-color:var(--a2-acid);
  transform-origin:left center;
}
@media (max-width:1023px){ .article-v2{--a2-header-h:64px} }

/* ---------- masthead ---------- */
.article-v2 .a2-masthead{
  background-color:var(--a2-paper);
  padding-top:80px;padding-bottom:52px;
}
@media (max-width:1023px){ .article-v2 .a2-masthead{padding-top:52px;padding-bottom:38px} }
@media (max-width:639px){ .article-v2 .a2-masthead{padding-top:36px;padding-bottom:30px} }

.article-v2 .a2-crumbs{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--a2-gray);margin-bottom:26px;
}
.article-v2 .a2-crumbs ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:9px;
}
.article-v2 .a2-crumbs a{color:var(--a2-gray);text-decoration:none;border-bottom:1px solid transparent}
.article-v2 .a2-crumbs a:hover{color:var(--a2-black);border-bottom-color:var(--a2-black)}
.article-v2 .a2-crumbs [aria-current]{color:var(--a2-black)}
.article-v2 .a2-crumbs .a2-sep{color:var(--a2-gray-d)}
/* The last crumb is the full title. On small screens it is clamped so it
   cannot wrap to three lines; the schema always carries the full string. */
@media (max-width:639px){
  .article-v2 .a2-crumbs [aria-current]{
    display:inline-block;max-width:60vw;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;vertical-align:bottom;
  }
}

.article-v2 .a2-kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--a2-black);
}
.article-v2 .a2-kicker .a2-dot{width:3px;height:3px;background-color:var(--a2-gray-d);border-radius:50%}
.article-v2 .a2-kicker .a2-muted{color:var(--a2-gray)}

/* No cap. A 900px cap left a quarter of the masthead empty on the right and
   pushed the headline onto a third line while the rule under it ran the full
   width. The headline uses the same measure as everything else in the
   masthead. */
.article-v2 .a2-title{
  font-family:var(--font-primary);
  font-size:var(--a2-h1);font-weight:700;color:var(--a2-black);
  line-height:1.02;letter-spacing:-.04em;
  max-width:none;margin:0 0 26px;
}
@media (max-width:639px){ .article-v2 .a2-title{line-height:1.06;letter-spacing:-.03em} }

.article-v2 .a2-standfirst{
  font-family:var(--font-primary);
  font-size:clamp(17px,1.5vw,21px);font-weight:400;color:var(--a2-gray);
  line-height:1.62;max-width:940px;margin:0 0 30px;
}
.article-v2 .a2-byline{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--a2-gray);
  padding-top:20px;border-top:1px solid var(--a2-line-soft);
}
.article-v2 .a2-byline strong{color:var(--a2-black);font-weight:500}

/* ---------- featured image ---------- */
.article-v2 .a2-feature{margin:0}
.article-v2 .a2-feature img{
  display:block;width:100%;height:auto;max-width:1200px;margin-inline:auto;
  border-radius:4px;border:1px solid var(--a2-line-dk);
}

/* ---------- utility row ---------- */
.article-v2 .a2-utility{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding:14px 0;
  border-top:1px solid var(--a2-line);border-bottom:1px solid var(--a2-line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a2-gray);
}
.article-v2 .a2-copy{
  font:inherit;color:var(--a2-gray);background:none;border:0;padding:4px 2px;
  cursor:pointer;letter-spacing:inherit;text-transform:inherit;
  display:inline-flex;align-items:center;gap:8px;
}
.article-v2 .a2-copy:hover{color:var(--a2-black)}
.article-v2 .a2-copy .a2-tick{color:var(--a2-black);opacity:0}
.article-v2 .a2-copy[data-copied="1"] .a2-tick{opacity:1}

/* ---------- mobile contents ---------- */
.article-v2 .a2-toc-m{display:none;margin-top:22px;border-bottom:1px solid var(--a2-line)}
.article-v2 .a2-toc-m>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:15px 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a2-black);
}
.article-v2 .a2-toc-m>summary::-webkit-details-marker{display:none}
.article-v2 .a2-toc-m>summary::after{
  content:'+';font-family:var(--font-mono);font-size:15px;color:var(--a2-gray);line-height:1;
}
.article-v2 .a2-toc-m[open]>summary::after{content:'\2212'}
.article-v2 .a2-toc-m ol{list-style:none;margin:0;padding:0 0 16px;display:grid;gap:11px}
.article-v2 .a2-toc-m a{
  display:flex;gap:14px;text-decoration:none;color:var(--a2-black);
  font-size:15px;line-height:1.4;
}
.article-v2 .a2-toc-m a span{
  font-family:var(--font-mono);font-size:11px;color:var(--a2-gray);padding-top:2px;flex:none;
}
.article-v2 .a2-toc-m a:hover{color:var(--a2-gray)}
@media (max-width:1023px){ .article-v2 .a2-toc-m{display:block} }

/* ---------- editorial grid ---------- */
.article-v2 .a2-body{padding:56px 0 0}
@media (max-width:1023px){ .article-v2 .a2-body{padding-top:40px} }

/* The prose COLUMN is fluid; the prose TEXT is capped at --a2-prose. That is
   what lets figures and panels escape the reading measure without a negative
   margin that would overflow once the viewport drops below --a2-shell.
   At a 1240 shell: column 892, text 760. Both shrink together below that. */
.article-v2 .a2-grid{
  display:grid;grid-template-columns:var(--a2-rail) minmax(0,1fr);
  gap:var(--a2-gap);align-items:start;
}
@media (max-width:1199px){ .article-v2{--a2-rail:190px;--a2-gap:48px} }
@media (max-width:1023px){
  .article-v2 .a2-grid{grid-template-columns:minmax(0,1fr)}
  .article-v2 .a2-rail{display:none}
}

/* ---------- sticky rail ---------- */
.article-v2 .a2-rail{position:sticky;top:calc(var(--a2-header-h) + 32px)}
.article-v2 .a2-rail-h{
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a2-gray);margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--a2-line);
}
.article-v2 .a2-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.article-v2 .a2-rail a{
  display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:baseline;
  padding:7px 0 7px 10px;margin-left:-11px;
  border-left:1px solid transparent;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.45;color:var(--a2-gray);
  text-decoration:none;transition:color var(--t-fast),border-color var(--t-fast);
}
.article-v2 .a2-rail a:hover{color:var(--a2-black)}
.article-v2 .a2-rail a .a2-n{color:var(--a2-gray-d)}
.article-v2 .a2-rail a[aria-current="true"]{color:var(--a2-black);border-left-color:var(--a2-acid)}
.article-v2 .a2-rail a[aria-current="true"] .a2-n{color:var(--a2-black)}

/* ---------- prose ---------- */
.article-v2 .a2-prose{min-width:0}

/* Reading measure. :where() keeps this at zero specificity so any component
   below can opt out with a plain class selector. */
.article-v2 .a2-prose :where(p,h2,h3,ol,ul,blockquote,.a2-marker){max-width:var(--a2-prose)}
.article-v2 .a2-prose :where(.a2-wide,.a2-panel){max-width:none}
.article-v2 .a2-panel :where(h2,p,ol,ul){max-width:none}
.article-v2 .a2-panel p{max-width:700px}

.article-v2 .a2-prose p{
  font-family:var(--font-primary);font-size:17.5px;line-height:1.76;
  color:var(--a2-ink);margin:0 0 22px;
}
@media (max-width:639px){ .article-v2 .a2-prose p{font-size:16.5px;line-height:1.72} }
.article-v2 .a2-prose p:last-child{margin-bottom:0}
.article-v2 .a2-prose strong{font-weight:600;color:var(--a2-black)}

.article-v2 .a2-prose a:not(.a2-btn){
  color:var(--a2-black);text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--a2-acid);
  transition:border-color var(--t-fast),border-width var(--t-fast);
}
.article-v2 .a2-prose a:not(.a2-btn):hover{border-bottom-color:var(--a2-black)}

/* section markers + headings */
.article-v2 .a2-sec{scroll-margin-top:calc(var(--a2-header-h) + 24px)}
.article-v2 .a2-sec + .a2-sec{margin-top:80px}
@media (max-width:639px){ .article-v2 .a2-sec + .a2-sec{margin-top:56px} }

.article-v2 .a2-marker{
  display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a2-gray);margin-bottom:14px;
}
.article-v2 .a2-marker i{font-style:normal;color:var(--a2-black)}

.article-v2 .a2-prose h2{
  font-family:var(--font-primary);font-size:clamp(27px,3vw,36px);font-weight:700;
  color:var(--a2-black);line-height:1.14;letter-spacing:-.028em;margin:0 0 24px;
}
.article-v2 .a2-prose h3{
  font-family:var(--font-primary);font-size:clamp(20px,1.9vw,24px);font-weight:600;
  color:var(--a2-black);line-height:1.26;letter-spacing:-.018em;margin:48px 0 14px;
}
.article-v2 .a2-prose h3:first-child{margin-top:0}

/* ---------- pull statement ---------- */
.article-v2 .a2-pull{
  margin:44px 0;padding:6px 0 6px 26px;border-left:3px solid var(--a2-acid);
}
.article-v2 .a2-pull p{
  font-family:var(--font-primary);font-size:clamp(22px,2.4vw,30px);font-weight:600;
  color:var(--a2-black);line-height:1.3;letter-spacing:-.022em;margin:0;
}

/* ---------- numbered problem rows ---------- */
.article-v2 .a2-rows{
  list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--a2-line);
}
.article-v2 .a2-rows li{
  display:grid;grid-template-columns:44px 1fr;gap:4px 18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--a2-line-soft);
}
.article-v2 .a2-rows .a2-n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--a2-gray-d);
}
.article-v2 .a2-rows b{
  font-family:var(--font-primary);font-size:17px;font-weight:600;color:var(--a2-black);line-height:1.35;
}
/* Must not be a bare `span`: .a2-n is a span too, and matching both pushed the
   number into column 2 and bumped the <b> into the 44px number column. */
.article-v2 .a2-rows .a2-d{
  grid-column:2;font-size:15.5px;line-height:1.6;color:var(--a2-gray);
}
@media (max-width:479px){
  .article-v2 .a2-rows li{grid-template-columns:32px 1fr;gap:3px 12px}
  .article-v2 .a2-rows b{font-size:16px}
}

/* ---------- black band ---------- */
.article-v2 .a2-band{
  margin:44px 0;background-color:var(--a2-black);color:var(--a2-paper);
  padding:32px 34px;border-radius:4px;
}
.article-v2 .a2-band p{
  font-family:var(--font-primary);font-size:clamp(19px,2vw,24px);font-weight:600;
  line-height:1.38;letter-spacing:-.018em;color:var(--a2-paper);margin:0;
}
.article-v2 .a2-band em{font-style:normal;color:var(--a2-acid)}
@media (max-width:639px){ .article-v2 .a2-band{padding:26px 22px} }

/* ---------- manual / automated compare ---------- */
.article-v2 .a2-compare{
  display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0 8px;
  border:1px solid var(--a2-line);border-radius:4px;overflow:hidden;
}
.article-v2 .a2-compare>div{padding:20px 22px}
.article-v2 .a2-compare>div+div{border-left:1px solid var(--a2-line);background-color:#fff}
.article-v2 .a2-compare h4{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 14px;color:var(--a2-gray);
}
.article-v2 .a2-compare>div+div h4{color:var(--a2-black)}
.article-v2 .a2-compare ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.article-v2 .a2-compare li{
  font-size:15px;line-height:1.5;color:var(--a2-gray);
  display:grid;grid-template-columns:10px 1fr;gap:10px;align-items:baseline;
}
.article-v2 .a2-compare>div+div li{color:var(--a2-ink)}
.article-v2 .a2-compare li::before{
  content:'';width:5px;height:5px;background-color:var(--a2-gray-d);margin-top:.5em;
}
.article-v2 .a2-compare>div+div li::before{background-color:var(--a2-acid)}
@media (max-width:639px){
  .article-v2 .a2-compare{grid-template-columns:1fr}
  .article-v2 .a2-compare>div+div{border-left:0;border-top:1px solid var(--a2-line)}
}

/* ---------- wide media + panels, both fill the column past the text ---------- */
.article-v2 .a2-wide{margin:48px 0}
.article-v2 .a2-panel{margin:48px 0;padding:36px 38px;border-radius:4px}
.article-v2 .a2-panel.is-warm{background-color:var(--a2-warm)}
.article-v2 .a2-panel.is-dark{background-color:var(--a2-black);color:var(--a2-paper)}
.article-v2 .a2-panel.is-dark .a2-h{color:var(--a2-paper)}
.article-v2 .a2-panel.is-dark .a2-label{color:var(--a2-acid)}
.article-v2 .a2-panel .a2-h{margin-bottom:28px}
.article-v2 .a2-note{margin-top:26px!important;font-size:16px;line-height:1.7;color:var(--a2-gray)}
@media (max-width:639px){ .article-v2 .a2-panel{padding:26px 22px} }

.article-v2 .a2-wide img{
  display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--a2-line-dk);
}
.article-v2 figcaption{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--a2-gray);line-height:1.6;margin-top:12px;
}

/* ---------- full-width sections ---------- */
.article-v2 .a2-section{padding:88px 0}
@media (max-width:1023px){ .article-v2 .a2-section{padding:64px 0} }
@media (max-width:639px){ .article-v2 .a2-section{padding:48px 0} }
.article-v2 .a2-warm{background-color:var(--a2-warm)}
.article-v2 .a2-dark{background-color:var(--a2-black);color:var(--a2-paper)}

.article-v2 .a2-label{
  display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a2-gray);margin-bottom:18px;
}
.article-v2 .a2-dark .a2-label{color:var(--a2-acid)}
.article-v2 .a2-h{
  font-family:var(--font-primary);font-size:clamp(25px,2.9vw,34px);font-weight:700;
  color:var(--a2-black);line-height:1.18;letter-spacing:-.028em;margin:0 0 34px;max-width:780px;
}
.article-v2 .a2-dark .a2-h{color:var(--a2-paper)}

/* ---------- in practice flow ---------- */
.article-v2 .a2-flow{list-style:none;margin:0;padding:0;max-width:900px}
.article-v2 .a2-flow li{
  display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:start;
  padding:20px 0;border-top:1px solid rgba(10,10,10,.13);
}
.article-v2 .a2-flow li:last-child{border-bottom:1px solid rgba(10,10,10,.13)}
.article-v2 .a2-flow .a2-when{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a2-gray);line-height:1.5;padding-top:5px;
  display:flex;align-items:baseline;gap:8px;
}
.article-v2 .a2-flow .a2-when i{font-style:normal;color:var(--a2-black)}
.article-v2 .a2-flow b{
  display:block;font-family:var(--font-primary);font-size:18px;font-weight:600;
  color:var(--a2-black);line-height:1.3;letter-spacing:-.015em;margin-bottom:5px;
}
.article-v2 .a2-flow span{display:block;font-size:15.5px;line-height:1.62;color:var(--a2-gray)}
@media (max-width:767px){
  .article-v2 .a2-flow li{grid-template-columns:1fr;gap:7px;padding:17px 0}
  .article-v2 .a2-flow .a2-when{padding-top:0}
}

/* ---------- reporting questions ---------- */
.article-v2 .a2-qs{list-style:none;margin:0 0 34px;padding:0;border-top:1px solid var(--a2-line)}
.article-v2 .a2-qs li{
  display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--a2-line-soft);
}
.article-v2 .a2-qs .a2-n{font-family:var(--font-mono);font-size:11px;color:var(--a2-gray-d)}
.article-v2 .a2-qs p{
  margin:0;font-family:var(--font-primary);font-size:clamp(19px,2.1vw,25px);
  font-weight:600;color:var(--a2-black);line-height:1.3;letter-spacing:-.02em;
}
@media (max-width:479px){ .article-v2 .a2-qs li{grid-template-columns:38px 1fr;gap:12px} }

/* ---------- takeaway ---------- */
.article-v2 .a2-take{max-width:880px}
.article-v2 .a2-panel p.a2-chain{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:34px;
  padding-top:26px;border-top:1px solid var(--a2-line-dk);max-width:none;
}
.article-v2 .a2-chain span{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--a2-paper);
}
.article-v2 .a2-chain .a2-arw{color:var(--a2-acid)}

/* ---------- cta ---------- */
.article-v2 .a2-cta{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;
}
.article-v2 .a2-cta .a2-h{margin-bottom:16px}
.article-v2 .a2-cta p{
  font-size:16.5px;line-height:1.68;color:var(--a2-gray);margin:0;max-width:620px;
}
.article-v2 .a2-acts{display:flex;flex-direction:column;gap:12px;align-items:stretch}
@media (max-width:899px){
  .article-v2 .a2-cta{grid-template-columns:1fr;gap:28px}
  .article-v2 .a2-acts{flex-direction:row;flex-wrap:wrap}
}
.article-v2 .a2-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-primary);font-size:15px;font-weight:600;
  padding:15px 28px;border-radius:4px;text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;cursor:pointer;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.article-v2 .a2-btn-p{background-color:var(--a2-black);color:var(--a2-paper)}
.article-v2 .a2-btn-p:hover{background-color:#000;color:var(--a2-acid)}
.article-v2 .a2-btn-s{background-color:transparent;color:var(--a2-black);border-color:rgba(10,10,10,.28)}
.article-v2 .a2-btn-s:hover{border-color:var(--a2-black)}

/* ---------- author ---------- */
.article-v2 .a2-author{
  display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:22px;align-items:center;
  padding:26px 0;border-top:1px solid var(--a2-line);border-bottom:1px solid var(--a2-line);
}
.article-v2 .a2-author img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 12%;
  display:block;background-color:var(--a2-warm);
}
.article-v2 .a2-author .a2-label{margin-bottom:6px}
.article-v2 .a2-author b{
  display:block;font-family:var(--font-primary);font-size:18px;font-weight:600;
  color:var(--a2-black);letter-spacing:-.015em;margin-bottom:7px;
}
.article-v2 .a2-author p{font-size:15px;line-height:1.62;color:var(--a2-gray);margin:0;max-width:600px}
.article-v2 .a2-author .a2-more{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--a2-black);text-decoration:none;border-bottom:1px solid var(--a2-acid);white-space:nowrap;
}
.article-v2 .a2-author .a2-more:hover{border-bottom-color:var(--a2-black)}
@media (max-width:767px){
  .article-v2 .a2-author{grid-template-columns:56px minmax(0,1fr);gap:16px 18px;align-items:start}
  .article-v2 .a2-author img{width:56px;height:56px}
  .article-v2 .a2-author .a2-more{grid-column:2}
}

/* ---------- related ---------- */
.article-v2 .a2-related-h{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a2-gray);margin:0 0 26px;
}
.article-v2 .a2-cards{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
}
@media (max-width:899px){ .article-v2 .a2-cards{grid-template-columns:1fr;gap:26px} }
.article-v2 .a2-cards a{display:block;text-decoration:none;color:inherit}
.article-v2 .a2-cards img{
  display:block;width:100%;height:auto;aspect-ratio:1200/628;object-fit:cover;
  border-radius:4px;border:1px solid var(--a2-line-dk);margin-bottom:14px;
}
.article-v2 .a2-cards .a2-cat{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--a2-gray);margin-bottom:8px;
}
.article-v2 .a2-cards h3{
  font-family:var(--font-primary);font-size:17px;font-weight:600;color:var(--a2-black);
  line-height:1.34;letter-spacing:-.015em;margin:0 0 10px;
}
.article-v2 .a2-cards a:hover h3{color:var(--a2-gray)}
.article-v2 .a2-cards .a2-rt{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a2-gray-d);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.article-v2 .a2-cards a:hover .a2-rt{color:var(--a2-black)}

/* ---------- focus + motion ---------- */
.article-v2 a:focus-visible,
.article-v2 button:focus-visible,
.article-v2 summary:focus-visible{
  outline:2px solid var(--a2-black);outline-offset:3px;border-radius:2px;
}
.article-v2 .a2-dark a:focus-visible{outline-color:var(--a2-acid)}

@media (prefers-reduced-motion:reduce){
  .article-v2 *,.article-v2 *::before,.article-v2 *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
  }
  .article-v2 .a2-progress{display:none}
}

/* ---------- print ---------- */
@media print{
  .article-v2 .a2-progress,.article-v2 .a2-rail,.article-v2 .a2-utility,
  .article-v2 .a2-toc-m,.article-v2 .a2-cta,.article-v2 .a2-related{display:none}
  .article-v2 .a2-grid{grid-template-columns:1fr}
  .article-v2 .a2-wide{margin-right:0}
  .article-v2 .a2-dark{background-color:#fff!important;color:#000!important}
  .article-v2 .a2-dark .a2-h,.article-v2 .a2-band p{color:#000!important}
  .article-v2 .a2-band{border:1px solid #000}
}

/* ---------- comparison table ---------- */
/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.article-v2 .a2-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:32px 0 10px}
.article-v2 .a2-table{
  width:100%;min-width:560px;border-collapse:collapse;
  border:1px solid var(--a2-line);border-radius:4px;
}
.article-v2 .a2-table caption{
  caption-side:top;text-align:left;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--a2-gray);
  line-height:1.6;padding:0 0 14px;
}
.article-v2 .a2-table th,.article-v2 .a2-table td{
  padding:14px 18px;text-align:left;vertical-align:top;line-height:1.6;font-size:15.5px;
  border-top:1px solid var(--a2-line-soft);
}
.article-v2 .a2-table thead th{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a2-black);background-color:rgba(10,10,10,.035);
  border-top:0;
}
.article-v2 .a2-table tbody th{font-weight:600;color:var(--a2-black);width:28%}
.article-v2 .a2-table tbody td{color:var(--a2-gray)}
/* the automated column is the answer, so it carries the darker ink */
.article-v2 .a2-table tbody td:last-child{color:var(--a2-ink);font-weight:500}

/* ---------- faq accordion ---------- */
/* Native <details>, so answers stay in the DOM and the accessibility tree
   whether open or shut, and the FAQPage schema still matches the visible text. */
.article-v2 .a2-faq{border-top:1px solid var(--a2-line);margin-top:8px}
.article-v2 .a2-faq details{border-bottom:1px solid var(--a2-line-soft)}
.article-v2 .a2-faq summary{
  display:block;list-style:none;cursor:pointer;position:relative;
  padding:19px 44px 19px 0;transition:opacity var(--t-fast);
}
.article-v2 .a2-faq summary::-webkit-details-marker{display:none}
.article-v2 .a2-faq summary h3{
  font-family:var(--font-primary);font-size:16.5px;font-weight:600;color:var(--a2-black);
  line-height:1.35;margin:0;max-width:none;
}
.article-v2 .a2-faq summary:hover{opacity:.62}
.article-v2 .a2-faq summary::after{
  content:'';position:absolute;right:10px;top:25px;width:8px;height:8px;
  border-right:2px solid var(--a2-black);border-bottom:2px solid var(--a2-black);
  opacity:.45;transform:rotate(45deg);transition:transform var(--t-base),opacity var(--t-fast);
}
.article-v2 .a2-faq details[open] summary::after{transform:rotate(-135deg);opacity:.8}
.article-v2 .a2-faq .a2-faq-a{
  margin:0;padding:0 44px 22px 0;font-size:16px;line-height:1.72;color:var(--a2-gray);
}
@supports (interpolate-size:allow-keywords){
  .article-v2 .a2-faq{interpolate-size:allow-keywords}
  .article-v2 .a2-faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--t-base) ease,content-visibility var(--t-base);
    transition-behavior:allow-discrete;
  }
  .article-v2 .a2-faq details[open]::details-content{block-size:auto}
}
@media print{
  .article-v2 .a2-faq summary::after{display:none}
  .article-v2 .a2-faq details::details-content{block-size:auto!important;content-visibility:visible!important}
}