/* ── Reading Progress Bar ──
   Audit 2026-05-08: promoted to styles.css (loaded site-wide) so
   every page can ship the bar consistently — was blog.css-scoped
   when only blog posts had it. Definition lives in styles.css F66d. */

/* ── Article Layout ── */
.article-hero {
  background-color: var(--slate);
  background-image: var(--grad-noise), var(--grad-hero-glow);
  padding: 120px 0 var(--sp-8);
  position: relative;
  overflow: hidden;
}
.article-breadcrumb {
  font-size: var(--fs-sm);
  color: var(--on-dark-default);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.article-breadcrumb a {
  color: var(--on-dark-default);
  text-decoration: none;
  transition: var(--transition-color);
}
.article-breadcrumb a:hover { color: var(--orange-on-dark); }
.article-breadcrumb span { color: var(--on-dark-dim); }
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.article-category {
  background: var(--accent-alpha-12);
  border: 1px solid var(--accent-alpha-25);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
}
.article-read-time {
  font-size: var(--fs-sm);
  color: var(--on-dark-default);
}
.article-hero h1 {
  color: var(--white);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  margin: 0 0 20px;
  max-width: var(--container-prose-md);
}
.article-hero h1 em {
  color: var(--orange-on-dark);
  font-style: italic;
}
.article-hero-deck {
  /* Hero subtitle on slate — was --stone (dark gray for light bg) which
     rendered at ~2:1 contrast (AA fail). Elevated to --on-dark for 12:1
     reading-ergonomics AAA. */
  color: var(--on-dark);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: 680px;
  margin: 0 0 var(--sp-6);
}
.article-date {
  font-size: var(--fs-sm);
  color: var(--on-dark-default);
}

/* ── Article Body Layout ── */
.article-layout {
  background: var(--white);
  padding: var(--section-pad);
}
.article-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 960px) {
  /* minmax(0, 1fr) lets the column shrink below the article-body's intrinsic
     content width (long paragraphs, unbreakable strings, embedded tables,
     code samples). Plain `1fr` defaults to `minmax(auto, 1fr)` which expands
     the track to fit content — the precise mechanism that pushes the layout
     viewport past 414px on mobile and pulls fixed-positioned navbars wide. */
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-sidebar { order: -1; position: static; }
  .article-body { min-width: 0; }
}

/* ── Article Body Typography ── */
.article-body {
  max-width: 100%;
  font-size: var(--fs-md);
  /* Reading-ergonomics: NN-Group/Bringhurst optimal for long-form.
     Was 1.8 (airy), now 1.65 — reads weightier, more magazine-like. */
  line-height: 1.65;
  color: var(--body-text);
}

/* ============================================================
   DROP-CAP — editorial article opener
   ============================================================
   First letter of the first paragraph becomes a large serif
   initial cap, floated left, color-accented. Editorial tradition
   since Aldus Manutius (1495). Signals "this is long-form, worth
   your attention."

   Applied via .has-dropcap on .article-body (opt-in at page level).
   Auto-applied to all blog posts via Python migration.

   The float-left + 3-line height math aligns the cap's baseline
   with the third line of body text. Tuned for DM Serif at 3.2rem
   and DM Sans body at 18px / 1.65 line-height.
   ============================================================ */
/* Selector chain extended to cover all three long-form structures:
     1. .article-body (Tier 3 blog posts — original)
     2. .guide-body (alt blog/guide wrapper)
     3. .guide-content (Tier 1 pillar guides — dealer-holdback, finance-office-guide, used-vehicle-guide)
     4. p.has-dropcap (escape hatch for Tier 2 secondary guides — best-time-to-buy,
        cost-of-ownership, newcomer-guide, private-sale-guide, trade-in-checklist —
        which don't share a single body wrapper).
   Brand-devices audit (2026-05-06) found drop-cap on 14/16 blogs but 0/10 guides,
   inverting visual hierarchy. This extension closes that gap. */
.article-body.has-dropcap > p:first-of-type::first-letter,
.article-body > p.has-dropcap:first-of-type::first-letter,
.guide-body.has-dropcap > p:first-of-type::first-letter,
.guide-content.has-dropcap > p:first-of-type::first-letter,
.guide-content > p.has-dropcap:first-of-type::first-letter,
p.has-dropcap::first-letter {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  line-height: 0.9;
  color: var(--accent-active);
  float: left;
  margin: 0.08em 0.12em 0 0;
  padding: 0;
  font-weight: 400;
  /* Optical adjustment: serif capitals sit above baseline; nudge down */
  padding-top: 0.08em;
}

/* Respect reduced-motion users (this is visual, not animated, but
   the float can cause layout reflow on extreme resize — protect anyway) */
@media (max-width: 640px) {
  .article-body.has-dropcap > p:first-of-type::first-letter,
  .article-body > p.has-dropcap:first-of-type::first-letter,
  .guide-body.has-dropcap > p:first-of-type::first-letter,
  .guide-content.has-dropcap > p:first-of-type::first-letter,
  .guide-content > p.has-dropcap:first-of-type::first-letter,
  p.has-dropcap::first-letter {
    font-size: 3rem;   /* scale down for narrow screens */
  }
}
/* Line-length discipline — 65ch optimal per reading research.
   Applied to prose paragraphs only (not tables/callouts).
   Audit round-2 2026-05-07: extended to .guide-content and
   .guide-detail. Pillar guides (dealer-holdback, finance-office-guide,
   used-vehicle-guide) had no max-width and stretched to ~95-110ch on
   widescreen — well above NN/Bringhurst optimal. Same one-rule
   discipline now applies to all long-form prose surfaces. */
.article-body > p,
.article-body > ul,
.article-body > ol,
.guide-content > p,
.guide-content > ul,
.guide-content > ol,
.guide-detail > p,
.guide-detail > ul,
.guide-detail > ol,
.guide-detail-inner > p,
.guide-detail-inner > ul,
.guide-detail-inner > ol {
  max-width: 65ch;
}
.article-body h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--slate);
  margin: var(--sp-7) 0 var(--sp-4);
  line-height: 1.2;
  scroll-margin-top: 88px;
}
/* Editorial divider above every blog H2 except the first.
   ─── § ─── (hairlines + centered italic-serif glyph), matches the
   .editorial-divider component used elsewhere. Brand-devices audit
   (2026-05-06): editorial-divider was on 1 of 26 pages; this single
   architectural rule deploys it across all 16 blog articles with
   zero per-page HTML edits. */
.article-body h2:not(:first-of-type)::before {
  content: '\00a7';   /* § section sign */
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--accent-active);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1;
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-5);
  /* Two horizontal hairlines, one each side of the centered glyph.
     calc(50% - 28px) leaves a 56px gap in the middle for the glyph. */
  background-image:
    linear-gradient(to right, var(--border), var(--border)),
    linear-gradient(to right, var(--border), var(--border));
  background-position: left center, right center;
  background-size: calc(50% - 28px) 1px, calc(50% - 28px) 1px;
  background-repeat: no-repeat;
  /* Constrain to prose width so the line aligns with the body column. */
  max-width: 65ch;
}
.article-body h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--slate);
  margin: var(--sp-6) 0 var(--sp-3);
  scroll-margin-top: 88px;
}
/* Off-grid `20px` margin → `var(--sp-5)` (24px on grid). One rule controls
   every blog/guide paragraph rhythm site-wide; the prior 20px was a 4px
   drift below grid that compounded across long-form. */
.article-body p {
  margin: 0 0 var(--sp-5);
}
.article-body ul, .article-body ol {
  margin: 0 0 var(--sp-5);
  padding-left: 1.5em;
}
.article-body li {
  margin-bottom: var(--sp-2);
}
.article-body strong {
  color: var(--slate);
  font-weight: 600;
}
/* ============================================================
   ASIDE / MARGIN-NOTE / FOOTNOTE SYSTEM
   ============================================================
   Editorial vocabulary for long-form articles.
   Research precedent: Edward Tufte's marginalia tradition;
   NYT Magazine sidebar treatment; Wikipedia footnote pattern.

   Components:
     <aside class="article-aside">         — inline bordered aside
     <aside class="article-margin-note">   — floating margin note (wide only)
     .footnote-ref + .footnote             — numbered footnote system

   Usage example:
     <p>Body text <sup class="footnote-ref">1</sup>…</p>
     <aside class="footnote" id="fn-1">
       <sup>1</sup> Source: CADA 2024 report.
     </aside>
   ============================================================ */
.article-aside {
  border-left: 2px solid var(--accent-alpha-40);
  background: var(--accent-alpha-5);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0;
  font-size: var(--fs-sm-plus);
  line-height: 1.65;
  color: var(--ink-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 65ch;
}
.article-aside > *:first-child { margin-top: 0; }
.article-aside > *:last-child  { margin-bottom: 0; }
.article-aside-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--accent-active);
  display: block;
  margin-bottom: var(--sp-2);
}
.article-aside em,
.article-aside i { font-style: italic; color: var(--ink); }

/* Margin-note — floats right on wide screens. Inline on mobile. */
.article-margin-note {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--ink-2);
  font-style: italic;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--accent-alpha-25);
  margin: var(--sp-5) 0;
}
/* On wide screens, float into the right margin */
@media (min-width: 1100px) {
  .article-body .article-margin-note {
    float: right;
    clear: right;
    width: 220px;
    margin-right: -260px;   /* sits in the margin */
    margin-top: 0;
    padding-left: var(--sp-3);
  }
}

/* Footnote reference — superscript number */
.footnote-ref {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: 0.5em;
  color: var(--accent-active);
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.1em;
  padding: 0 0.15em;
}
.footnote-ref::before { content: "["; opacity: 0.5; }
.footnote-ref::after  { content: "]"; opacity: 0.5; }

/* Footnote body — lives at the end of the article */
.footnotes {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.footnotes h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--slate);
  margin-bottom: var(--sp-4);
}
.footnote {
  display: block;
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-4);
  text-indent: -1.5em;
}
.footnote sup {
  color: var(--accent-active);
  font-weight: 700;
  margin-right: 0.35em;
}

/* Animated underline treatment — editorial-grade link interaction.
   Uses a background-image gradient sized 0% on rest, 100% on hover,
   animated with ease-out-expo. The underline appears to "draw" from
   left to right on hover. Replaces the static text-decoration with a
   kinetic micro-interaction.

   Scoped with :not(.btn) so the underline machinery never touches
   button-class anchors. Previous architecture used a `background: none`
   override on .btn, which (because `background` is shorthand) wiped
   every button's `background-color` and `background-image` — turning
   .btn-primary into a transparent box with slate text on a slate
   parent (invisible) and .btn-outline-dark into inherit-color text
   on a slate parent (also invisible). Scoping the source rule
   removes the override entirely. */
/* Long-form prose inline-link pattern. Extended in audit round-2
   2026-05-07 to cover .guide-content (Tier 1 pillar guides:
   dealer-holdback, finance-office-guide, used-vehicle-guide) and
   .guide-detail (newcomer-guide accordion bodies, private-sale-guide
   step details). Without these selectors the inline links fall
   through the global a { color: inherit; text-decoration: none } reset
   and render visually identical to body prose — WCAG 1.4.1 fail at
   scale on every Tier 1 page. Single rule fixes hundreds of links. */
.article-body a:not(.btn),
.guide-content a:not(.btn),
.guide-detail a:not(.btn) {
  color: var(--orange-text);
  text-decoration: none;
  background-image: linear-gradient(to right,
    var(--accent-active), var(--accent-active));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;                 /* underline offset */
  transition: background-size 320ms var(--ease-out-expo),
              color 180ms ease;
}
.article-body a:not(.btn):hover,
.guide-content a:not(.btn):hover,
.guide-detail a:not(.btn):hover {
  /* --accent-hover (#C05D1A) failed AA on cream/white at body sizes.
     --accent-active (#A83D00) gives 5.98:1 on white — same warm-brick
     feel, properly readable. */
  color: var(--accent-active);
  background-size: 100% 2px;           /* thickens on hover */
  background-image: linear-gradient(to right,
    var(--accent-active), var(--accent-active));
}
/* :visited differentiation — editorial precedent (Wikipedia, NYT).
   Uses --accent-deepest (already a token) so the visited state reads
   as a deeper shade of the same brand orange. */
.article-body a:not(.btn):visited,
.guide-content a:not(.btn):visited,
.guide-detail a:not(.btn):visited {
  color: var(--accent-deepest);
}

@media (prefers-reduced-motion: reduce) {
  .article-body a:not(.btn),
  .guide-content a:not(.btn),
  .guide-detail a:not(.btn) { transition: none; }
}

/* ── Callout Boxes ── */
.callout {
  background: var(--cream);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px var(--sp-5);
  margin: var(--card-pad-lg) 0;
}
.callout-label {
  margin-bottom: var(--sp-2);
}
.callout p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--slate);
  line-height: 1.65;
}

.callout-dark {
  background: var(--slate);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px var(--sp-5);
  margin: var(--card-pad-lg) 0;
}
.callout-dark p {
  margin: 0;
  font-size: var(--fs-base);
  /* Dark callout body — was --stone (~2:1 fail). Elevated to --on-dark. */
  color: var(--on-dark);
  line-height: 1.65;
}
.callout-dark strong { color: var(--white); }

/* ── Pull Quote ── */
.pull-quote {
  border-left: 3px solid var(--orange);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  margin: 36px 0;
  /* Hanging punctuation — opening quote mark and em-dash extend into
     the left margin to maintain optical alignment. Modern browsers
     honor the property; older browsers fall back gracefully. */
  hanging-punctuation: first last;
}
.pull-quote p {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--slate);
  line-height: 1.4;
  margin: 0 0 var(--sp-3);
}
.pull-quote cite {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-style: normal;
}

/* ── CTA Block ── */
.article-cta-block {
  background-color: var(--slate);
  /* Noise texture keeps it consistent with other dark zones */
  background-image: var(--grad-noise), var(--grad-slate-glow-soft);
  border-radius: var(--radius-xl);
  padding: 36px var(--sp-6);
  margin: var(--sp-7) 0;
  text-align: center;
  /* Prominent elevation — CTA is THE moment in the article */
  box-shadow: var(--shadow-5), var(--shadow-warm);
  position: relative;
  overflow: hidden;
}
.article-cta-block h3 {
  color: var(--white);
  font-size: var(--fs-lg);
  margin: 0 0 10px;
}
.article-cta-block p {
  /* In-article dark CTA descriptor — was --stone (~2:1 fail). */
  color: var(--on-dark);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 var(--sp-5);
}
.article-cta-block .btn { margin: 0 var(--sp-2); }
@media (max-width: 768px) {
  .article-cta-block { padding: var(--card-pad-lg) var(--sp-5); }
  .article-cta-block .btn { display: block; width: 100%; margin: 0 0 10px; text-align: center; }
}

/* ── Table Wrapper (mobile scroll) ── */
.table-wrapper {
  margin: var(--card-pad-lg) 0;
}
@media (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;    margin: 28px -var(--sp-5);
    padding: 0 var(--sp-5);
  }
  .table-wrapper .article-compare-table {
    min-width: 520px;
    margin: 0;
  }
}

/* ── Article-scoped Comparison Table (inside blog posts).
   Kept distinct from the homepage .comparison-table to avoid class
   collision. Homepage table lives in homepage.css and has the
   orange Holdback column treatment. */
.article-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--card-pad-lg) 0;
  font-size: var(--fs-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.article-compare-table thead tr {
  background: var(--slate);
  color: var(--white);
}
.article-compare-table th {
  padding: 14px var(--sp-4);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.article-compare-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--slate);
}
.article-compare-table tr:last-child td { border-bottom: none; }
.article-compare-table tr:nth-child(even) td { background: var(--cream); }

/* ── Sidebar ──
   Defensive stacking: position:relative + z-index:1 ensure the sidebar's
   solid card backgrounds always paint above any article-body content,
   preventing JPEG-render bleed-through during scroll-reveal animations. */
.article-sidebar {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px); /* Modern viewport unit — corrects iOS Safari toolbar math */
  overflow-y: auto;
  z-index: var(--z-base);
}
.article-sidebar > * {
  position: relative;
  z-index: var(--z-base);
}
.sidebar-card {
  background: var(--cream);
  border-radius: var(--radius-xl);
  padding: var(--card-pad-lg) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.sidebar-card h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--slate);
  margin: 0 0 var(--sp-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-list li {
  padding: var(--sp-1half) 0;
  border-bottom: 1px solid var(--border);
}
.toc-list li:last-child { border-bottom: none; }
/* Was display:flex with gap:var(--sp-2). TOC entries wrap <abbr>
   (OMVIC, MSRP, HST, CPO, MVDA) directly inside anchor text — flex
   was splitting "The OMVIC all-in pricing rule" into 4 flex items
   with 8px gaps between each. Block + absolute-positioned dot
   restores natural inline flow. */
.toc-list a {
  display: block;
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  transition: var(--transition-color);
  line-height: 1.4;
}
.toc-list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--orange);
}
.toc-list a:hover { color: var(--orange-text); }

.sidebar-cta-card {
  background: var(--slate);
  border-radius: var(--radius-xl);
  padding: var(--card-pad-lg) var(--sp-5);
  margin-bottom: var(--sp-5);
  text-align: center;
}
.sidebar-cta-card .section-label { color: var(--orange-on-dark); margin-bottom: var(--sp-3); display: block; }

/* ── Sidebar CTA label override (audit 2026-05-06) ──
   .section-label applies text-transform: uppercase + letter-spacing
   var(--ls-widest). That's correct for short category eyebrows (≤4
   words) but breaks down for 6-8 word questioning prompts — they
   render as massive all-caps banners that fight the H3 underneath.
   Use .cta-card-label for sentence-case prompts on sidebar CTAs. */
.sidebar-cta-card .cta-card-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--orange-on-dark);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}
/* Cover both h3 and h4 — authors used either tag depending on the page's
   heading hierarchy (5 posts use h3, 11 use h4). Previous rule targeted
   only h4, so h3-authored cards rendered with the default near-black
   heading color on the slate card → effective ratio 1.00 (invisible). */
.sidebar-cta-card h3,
.sidebar-cta-card h4 {
  color: var(--white);
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-3);
  line-height: 1.3;
}
.sidebar-cta-card p {
  /* Sidebar dark-card descriptor ("Book a Consultation" panel) —
     was --stone (~2:1 fail). Elevated to --on-dark-default (11:1). */
  color: var(--on-dark-default);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 20px;
}
.sidebar-cta-card .btn { width: 100%; text-align: center; }

.related-link {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: var(--transition);
}
.related-link:last-child { border-bottom: none; }
.related-link:hover .related-link-title { color: var(--orange); }
.related-link-icon {
  width: 36px;
  height: 36px;
  background: var(--slate);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--orange);
}
.related-link-icon svg {
  width: 16px;
  height: 16px;
}
.related-link-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--slate);
  line-height: 1.3;
  transition: var(--transition-color);
  margin-bottom: 3px;
}
.related-link-sub {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

/* ── Author Box ── */
.author-box {
  background: var(--cream);
  border-radius: var(--radius-xl);
  padding: var(--card-pad-lg) var(--sp-6);
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  margin-top: 56px;
  border-top: 3px solid var(--orange);
}
.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--slate);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--orange);
  font-style: italic;
}
.author-info h4 {
  font-size: var(--fs-base);
  color: var(--slate);
  margin: 0 0 var(--sp-1half);
}
.author-info p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   READ NEXT — editorial handoff at end of article
   ============================================================
   One large, direct invitation to the next logical article.
   Replaces the generic "Related Reading" card grid when used;
   editorial precedent: The Pudding, Longreads, Pitchfork.

   <aside class="read-next">
     <span class="eyebrow">Read Next</span>
     <h3><a href="/blog/finance-office-canada">What the finance office actually sells</a></h3>
     <p class="read-next-meta">Buyer Strategy · ~9 min read</p>
   </aside>
   ============================================================ */
.read-next {
  display: block;
  margin-top: 72px;
  padding: 36px 0 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.read-next .eyebrow {
  color: var(--accent-active);
  margin-bottom: var(--sp-3);
  display: block;
}
.read-next h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-3);
  max-width: 24ch;
}
.read-next h3 a {
  color: var(--slate);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--ease-out-expo),
              color 180ms ease;
  padding-bottom: 2px;
}
.read-next h3 a:hover {
  background-size: 100% 2px;
  color: var(--accent-active);
}
.read-next h3 a::after {
  content: " →";
  color: var(--accent);
  font-style: normal;
  margin-left: 0.15em;
  transition: transform 320ms var(--ease-out-expo);
  display: inline-block;
}
.read-next h3 a:hover::after {
  transform: translateX(6px);
}
.read-next-meta {
  font-size: var(--fs-sm);
  /* Was var(--ink-3) = 3.67:1 on white — AA Large only, but this is fs-sm (14px) body.
     Upgraded to var(--ink-2) = 7.5:1 AAA for compliant meta-text reading. */
  color: var(--ink-2);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .read-next h3 a { transition: none; }
  .read-next h3 a::after { transition: none; }
}

/* ============================================================
   AUTHOR BIO ENHANCED — richer end-of-article credential box
   ============================================================
   Upgrade to the existing .author-info with: larger avatar,
   role label, credential list, three published articles, and
   a clear "more from this author" link.
   ============================================================ */
.author-bio-enhanced {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-5);
  align-items: flex-start;
  margin-top: var(--sp-7);
  padding: var(--sp-6) 0;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
}
.author-bio-avatar {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-circle);
  background: var(--slate);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-style: italic;
  flex-shrink: 0;
  /* Warm halo — subtle brand-aware elevation */
  box-shadow: var(--shadow-warm), var(--shadow-2);
}
.author-bio-name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--slate);
  margin: 0 0 var(--sp-1);
  letter-spacing: var(--ls-snug);
}
.author-bio-role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--accent-active);
  margin: 0 0 var(--sp-3);
}
.author-bio-credentials {
  font-size: var(--fs-sm);
  color: var(--body-text);
  line-height: 1.6;
  margin: 0 0 var(--sp-4);
  max-width: 62ch;
}
.author-bio-links {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.author-bio-links a {
  color: var(--accent-active);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  background-image: linear-gradient(to right, var(--accent-active), var(--accent-active));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 240ms var(--ease-out-expo);
}
.author-bio-links a:hover {
  background-size: 100% 2px;
}
@media (max-width: 640px) {
  .author-bio-enhanced {
    grid-template-columns: 1fr;
  }
  .author-bio-avatar {
    margin-bottom: var(--sp-2);
  }
}

/* ── Bottom Nav ── */
.article-bottom-nav {
  background: var(--cream);
  padding: var(--section-pad-sm);
  border-top: 1px solid var(--border);
}
.bottom-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 640px) {
  .bottom-nav-grid { grid-template-columns: 1fr; }
}
.bottom-nav-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: var(--transition);
}
.bottom-nav-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}
.bottom-nav-dir {
  margin-bottom: var(--sp-2);
}
.bottom-nav-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--slate);
  line-height: 1.3;
}
.bottom-nav-subtitle {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  margin: var(--sp-2) 0 0;
}

/* ── Warning Box ── */
.warning-box {
  background: var(--warning-bg);
  border-left: 4px solid var(--warning-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px var(--sp-5);
  margin: var(--card-pad-lg) 0;
}
.warning-box p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--slate);
  line-height: 1.65;
}
.warning-box strong { color: var(--warning-text); }

/* ── Script Box ── */
.script-box {
  background: var(--dark);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px var(--sp-5);
  margin: var(--card-pad-lg) 0;
}
.script-box-label {
  margin-bottom: var(--sp-2);
}
/* See styles.css F89 — script-box emphasis architecture rationale. */
.script-box p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--on-dark);
  line-height: 1.65;
  font-style: italic;
}
/* See styles.css F89 — strong inside script-box uses subtle emphasis
   (brighter colour + hairline underline at accent-on-dark) rather than
   bold-weight, so the quote reads continuously instead of breaking
   into bold-white interruptions mid-verbatim. */
.script-box p strong {
  color: var(--white);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-on-dark);
}

/* ── Math Block (dark) ── */
.math-block {
  background: var(--slate);
  border-radius: var(--radius-lg);
  padding: var(--card-pad-lg) var(--sp-6);
  margin: var(--card-pad-lg) 0;
  color: var(--white);
}
.math-block-label {
  margin-bottom: var(--sp-4);
}
.math-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--surface-on-dark-2);
  font-size: var(--fs-base);
}
.math-line:last-child { border-bottom: none; }
/* .math-block has slate background — every text colour below is composed
   against that. Was --stone (var(--ink-2)) at 2.1:1 FAIL; --on-dark-default
   gives ~6:1+ AA. Accent + danger swap to their on-dark variants.
   Bare <strong> inherits the global slate ink (1:1 on slate FAIL) — pin
   it to on-dark white so inline emphasis stays visible. */
.math-block strong { color: var(--on-dark); }
.math-line .label { color: var(--on-dark-default); }
.math-line .value { font-weight: 700; color: var(--white); }
.math-line .value.orange { color: var(--accent-on-dark); }     /* was --orange (4.49:1 borderline). #F39455 = 6.9:1 AAA */
.math-line .value.green { color: var(--on-dark); }              /* keep numeric value white-92 — green on slate read fine but inconsistent across browsers */
.math-line .value.red { color: var(--danger); }                 /* --danger-deep var(--danger-deep) was 2.8:1 on slate (FAIL). --danger var(--danger) = 4.5:1 AA on slate */
.math-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0 0;
  border-top: 2px solid var(--surface-on-dark-4);
  margin-top: var(--sp-1);
  font-size: var(--fs-base);
}
.math-total .label { color: var(--white); font-weight: 600; }
.math-total .value { font-weight: 700; color: var(--white); font-size: var(--fs-md); }   /* --success on slate read inconsistently across browsers; white = 7.7:1 AAA */
.math-total .value.red { color: var(--danger); }                                          /* --danger-deep was 2.8:1 on slate FAIL. --danger var(--danger) = 4.5:1 AA */

/* ── Status Badges (shared) ── */
.badge-green {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  /* alpha-10 + cream/white composes light enough that --ok-text was 4.4:1
     (just-fails AA). Reduce the wash to alpha-7 — same on-brand tint at
     a notch lighter — pushing contrast over 4.5:1 reliably. */
  background: rgba(4, 120, 87, 0.07);
  color: var(--ok-text);
  border: 1px solid var(--ok-alpha-25);
}
.badge-red {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  /* Same fix as badge-green — wash lightened from alpha-10 to alpha-7
     so --danger-deep clears 4.5:1 (was 4.3:1 borderline-fail). */
  background: rgba(220, 53, 69, 0.07);
  color: var(--danger-deep);
  border: 1px solid var(--danger-alpha-25);
}
.badge-orange {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-alpha-10);
  /* Was --orange (var(--orange)) = 2.4-2.7:1 on accent-tints (FAIL). 12px bold
     needs 4.5:1 (not "large" per WCAG). --accent-active = 5.98:1+. */
  color: var(--accent-active);
  border: 1px solid var(--accent-alpha-25);
}

/* ── Sidebar Stat Card ── */
.sidebar-stat-card {
  background: var(--cream);
  border-radius: var(--radius-xl);
  padding: var(--card-pad-lg) var(--sp-5);
  margin-bottom: var(--sp-5);
  text-align: center;
  border-top: 3px solid var(--orange);
}
.sidebar-stat-card--danger { border-top-color: var(--danger-deep); }
.sidebar-stat-label,
.stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange-text);
  margin-bottom: var(--sp-2);
}
.sidebar-stat-number,
.stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--accent-large);   /* vibrant brand orange — AA Large 3.25:1 at 36px */
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.sidebar-stat-card--danger .sidebar-stat-number,
.sidebar-stat-card--danger .stat-value { color: var(--danger-deep); }
.sidebar-stat-desc,
.stat-desc {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ── Nav Highlight (blog) ── */
.nav-highlight,
.mobile-nav-highlight,
/* ── Bottom Nav Header ── */
.bottom-nav-header,
.bottom-nav-heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange-text);
  margin-bottom: var(--sp-5);
}

/* ── Sidebar Related Card Header ── */
.sidebar-related-card h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--slate);
  margin: 0 0 var(--sp-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Touch Targets — 44px minimum on mobile (WCAG 2.5.5) ── */
@media (max-width: 768px) {
  .toc-list li {
    padding: var(--sp-2) 0;
  }

  /* Was 28px (WCAG 2.5.5 FAIL — comment claimed 44px but value was 28).
     44px = WCAG 2.2 AA Target Size (Minimum) compliance. The flex
     align with the bullet ::before keeps visual density acceptable. */
  .toc-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .article-breadcrumb a,
  .article-category {
    display: inline-block;
    padding: 10px var(--sp-3);
    min-height: 44px;
  }
}

/* ============================================================
   BLOG EMAIL CAPTURE — moved to css/styles.css (loaded sitewide).
   The footer-newsletter-band on every page reuses these classes,
   so the rules can no longer live in blog.css (which only loads
   on /blog/* routes — left non-blog pages with an unstyled
   default browser button).

   Search "EMAIL CAPTURE — reusable lead-magnet form block" in
   styles.css for the canonical definition.
   ============================================================ */

/* ============================================================
   MOBILE TABLE OVERFLOW SAFETY NET
   Any <table> inside .article-body becomes horizontally scrollable
   on mobile to prevent page overflow when tables exceed viewport.
   ============================================================ */
@media (max-width: 768px) {
  .article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;  }
}

/* ============================================================
   ARTICLE FAQ — visible Q&A block at end of blog posts
   ============================================================
   Native <details>/<summary> (zero-JS) styled to match the
   sitewide .faq-section visual language. Each FAQ block mirrors
   the FAQPage schema mainEntity so visible content === structured
   data (Google Search Central requirement for FAQ rich results).

   Markup contract:
     <section class="article-faq" aria-labelledby="article-faq-heading">
       <h2 id="article-faq-heading">Frequently Asked Questions</h2>
       <div class="article-faq-list">
         <details class="article-faq-item">
           <summary>Question text…</summary>
           <p>Answer paragraph…</p>
         </details>
       </div>
     </section>
   ============================================================ */
.article-faq {
  margin: var(--sp-8) 0 var(--sp-6);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border);
}

.article-faq h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--slate);
  margin: 0 0 var(--sp-5);
}

.article-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.article-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.article-faq-item[open] {
  border-color: var(--accent-alpha-35);
  box-shadow: 0 2px 12px var(--accent-alpha-8);
}

/* Was display:flex with gap:var(--sp-4). The flex layout treated each
   text node and inline <abbr> child as a separate flex item, inserting
   16px gaps between every word and acronym (visible on omvic-car-buyer-
   rights, finance-office-canada, etc.). Block layout + absolute-
   positioned ::after restores natural inline flow. */
.article-faq-item > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: block;
  position: relative;
  /* Right padding reserves space for the absolutely-positioned indicator */
  padding: var(--sp-4) calc(var(--sp-5) + 28px + var(--sp-3)) var(--sp-4) var(--sp-5);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.45;
  color: var(--slate);
  background: var(--white);
  transition: background-color var(--duration-fast) ease;
}

.article-faq-item > summary::-webkit-details-marker { display: none; }
.article-faq-item > summary::marker { content: ""; }

.article-faq-item > summary:hover { background: var(--cream); }

.article-faq-item > summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  background: var(--cream);
}

/* Custom + indicator that rotates 45deg → × on open. Now absolutely
   positioned so it doesn't participate in the inline text layout. */
.article-faq-item > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: var(--sp-5);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1;
  transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.article-faq-item[open] > summary::after {
  /* Combine centering translate with the open-state rotation */
  transform: translateY(-50%) rotate(45deg);
  background: var(--orange);
  border-color: var(--orange);
  color: var(--slate);
}

.article-faq-item > p {
  margin: 0;
  padding: 0 var(--sp-5) 20px;
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}

/* Reduced-motion: drop the rotation animation */
@media (prefers-reduced-motion: reduce) {
  .article-faq-item,
  .article-faq-item > summary,
  .article-faq-item > summary::after {
    transition: none;
  }
}

/* Mobile padding tightening */
@media (max-width: 768px) {
  .article-faq-item > summary {
    padding: var(--sp-4);
    font-size: var(--fs-sm);
  }
  .article-faq-item > p {
    padding: 0 var(--sp-4) var(--sp-4);
  }
}