/*
 * Single article — 2026-08 redesign, scoped to .jba-root.
 *
 * Ported from the Claude Design project 019e0121-b38a-7580-ae83-e8eef8d6da70
 * ("article.html"). The design's values are kept verbatim; its tokens are
 * re-declared locally as --jba-* so nothing depends on the app design system
 * being present, and so the page cannot be reached by the theme's global rules.
 *
 * NOTE ON ORANGE: the design uses the product palette's Sunset #FF7922 rather
 * than the website's #FF6603. That is intentional — this is the design's own
 * token — and it is the one visible difference from the rest of the marketing
 * site. Change --jba-orange here if the brand ever wants them unified.
 *
 * PROSE MAPS ONTO EXISTING MARKUP. Articles are not being rewritten, so the
 * design's block styles are attached to what the WYSIWYG already emits:
 *   blockquote            → quote with the orange left bar
 *   hr                    → grey divider
 *   .wp-caption + p.wp-caption-text, figure + figcaption → figure box + caption
 *   table                 → rounded, header fill, hover rows
 *   ul / ol               → orange markers, numbers as round orange dots
 * The design's other blocks (callout, pull quote, stat strip, inline CTA) are
 * available as .jba-* classes and as the shortcodes in inc/jba-article.php.
 */

.jba-root {
  --jba-orange: #FF7922;
  --jba-orange-hover: #FF8A3D;
  --jba-orange-press: #CC5E15;
  --jba-orange-tint: #FFF2E9;
  --jba-orange-line: #FFD9BD;

  --jba-ink: #1A1A1A;
  --jba-body: #424B63;
  --jba-muted: #666666;
  --jba-faint: #A0A5B1;
  --jba-grey-30: #B7B7B7;

  --jba-border: #E6E6E6;
  --jba-border-subtle: #ECEDEF;
  --jba-bg-app: #F6F8FB;
  --jba-bg-alt: #FAFAFA;

  --jba-link: #FF7922;   /* article links — Jibble orange, replacing the design's #1C69FF */
  --jba-green: #2CBF5A;
  --jba-green-bg: #F0F9ED;
  --jba-green-line: #BFE5C2;
  --jba-green-ink: #1F8A4A;
  --jba-warn-bg: #FFF6E0;
  --jba-warn-line: #F5DD8A;
  --jba-warn-ink: #AD920D;

  --jba-r-sm: 4px;
  --jba-r-md: 8px;
  --jba-r-lg: 12px;
  --jba-r-pill: 100px;

  /* How far below the top the sticky rails park. The site header is sticky, so
     this clears it; kept as a variable because single-articles.js measures the
     real header at runtime and overrides it. */
  --jba-sticky-top: 96px;

  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--jba-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* The design inherits 14px/20px from its token sheet's `html, body` rule; every
     block that needs something else sets its own. Without this the small text
     (meta row, card meta, roles) fell back to the UA's `normal` and each of those
     lines came out ~2px short — measured against the design render at 1280. */
  font-size: 14px;
  line-height: 20px;
}

.jba-root *, .jba-root *::before, .jba-root *::after { box-sizing: border-box; }
/* :where() keeps this reset at zero specificity for the element part, so a plain
   single-class component rule further down still wins. Written as `.jba-root h1,
   ...` it outranked every one of them — which is why the title's 16px bottom
   margin (and anything else like it) silently never applied. */
.jba-root :where(h1, h2, h3, h4, h5, p, ul, ol, li, figure, blockquote, table) {
  margin: 0; padding: 0; font-family: inherit;
}
.jba-root img { max-width: 100%; height: auto; display: block; }
.jba-root a { text-decoration: none; }
.jba-root button { font-family: inherit; }
.jba-root ::selection { background: var(--jba-orange-tint); color: var(--jba-orange-press); }

/* Kill the blue focus ring Mac (Safari/Chrome) paints on buttons and
   button-like links for pointer interaction; keep a visible ring for keyboard
   users via :focus-visible. Same treatment as the calculator pages. */
.jba-root button, .jba-root a { -webkit-tap-highlight-color: transparent; }
.jba-root button:focus, .jba-root button:active,
.jba-root a:focus, .jba-root a:active { outline: none; box-shadow: none; }
.jba-root button:focus-visible, .jba-root a:focus-visible {
  outline: 2px solid var(--jba-orange); outline-offset: 2px; border-radius: var(--jba-r-sm);
}

/* ── Reading progress ────────────────────────────────────────────── */
.jba-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 1200; pointer-events: none;
}
.jba-progress-fill {
  display: block; height: 100%; width: 0;
  background: var(--jba-orange); transition: width .08s linear;
}

/* ── Hero ────────────────────────────────────────────────────────── */
.jba-hero { border-bottom: 1px solid var(--jba-border); background: var(--jba-bg-app); }
.jba-hero-inner { max-width: 880px; margin: 0 auto; padding: 56px 32px 40px; }

.jba-title {
  font-size: 44px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--jba-ink); margin: 0 0 16px; text-wrap: balance;
}
.jba-deck, .jba-deck p {
  font-size: 18px; line-height: 28px; color: var(--jba-body);
  margin: 0; text-wrap: pretty; max-width: 720px;
}
.jba-deck { margin-bottom: 28px; }
.jba-deck p + p { margin-top: 12px; }
.jba-deck a { color: var(--jba-link); font-weight: 600; font-size: 0.67em; }

.jba-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--jba-border);
}
.jba-author { display: flex; align-items: center; gap: 10px; }
.jba-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #FFB079, #FF7922);
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--jba-orange-tint);
}
.jba-avatar--img { object-fit: cover; }
.jba-avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.jba-author-name { font-size: 14px; font-weight: 700; color: var(--jba-ink); }
.jba-author-name a { color: inherit; }
.jba-author-name a:hover { color: var(--jba-orange); }
.jba-author-role { font-size: 12px; color: var(--jba-muted); }
.jba-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--jba-grey-30); flex: none; }
.jba-meta-item { font-size: 13px; color: var(--jba-muted); display: inline-flex; align-items: center; gap: 6px; }
.jba-meta-item .jba-i { flex: none; }

.jba-hero-img-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px 40px; }
.jba-hero-img {
  aspect-ratio: 21 / 9; border-radius: var(--jba-r-md); overflow: hidden;
  border: 1px solid var(--jba-border); background: var(--jba-bg-alt);
}
.jba-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Featured-image caption. Mirrors the in-body figure treatment further down this
   file (.jba-prose figcaption) so a caption reads the same whether the image is
   the hero or sits in the article body: same size, colour, padding and a hairline
   separating it from the picture.

   The caption is attached to the SAME box as the image rather than floating
   underneath it, which is why the captioned variant squares off the image's
   bottom corners and drops its bottom border -- otherwise the box would show two
   borders and a rounded seam through the middle. Without a caption nothing
   changes: .jba-hero-figure is a bare wrapper and .jba-hero-img keeps all four
   corners, so every existing article renders byte-identically. */
.jba-hero-figure { margin: 0; }
.jba-hero-figure--captioned .jba-hero-img {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.jba-hero-caption {
  margin: 0; padding: 12px 16px; font-size: 13px; line-height: 30px;
  color: var(--jba-muted); background: #fff; text-align: left;
  border: 1px solid var(--jba-border); border-top: 0;
  border-bottom-left-radius: var(--jba-r-md);
  border-bottom-right-radius: var(--jba-r-md);
}
/* Photo credits are usually a link; match the in-body caption link exactly. */
.jba-hero-caption a { color: var(--jba-link); font-weight: 600; font-size: 0.67em; }
.jba-hero-caption a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────────── */
.jba-shell {
  max-width: 1240px; margin: 0 auto; padding: 48px 32px 96px;
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 48px; align-items: start;
}

/* The rails stick once the article scrolls under the header. position:sticky on
   a grid item needs align-self:start (set above) and a scroll container that
   isn't clipped — hence no overflow on .jba-shell. */
.jba-toc-rail, .jba-cta-rail { position: sticky; top: var(--jba-sticky-top); align-self: start; }
.jba-toc-sticky {
  max-height: calc(100vh - var(--jba-sticky-top) - 32px);
  display: flex; flex-direction: column; min-height: 0;
}
/* Only the list of headings scrolls. The "In this article" label and the share row
   stay put, so the share buttons show on every article however many headings it
   has — previously they sat inside the scroller and dropped out of view on any
   article with a long contents list. */
.jba-toc { display: flex; flex-direction: column; min-height: 0; }
.jba-toc[hidden] { display: none; }   /* the JS unhides it once the list is built */
.jba-toc-list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.jba-toc-list::-webkit-scrollbar { width: 6px; }
.jba-toc-list::-webkit-scrollbar-thumb { background: var(--jba-border); border-radius: 3px; }

.jba-toc-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jba-faint); margin-bottom: 12px;
}
.jba-toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.jba-toc-list li { display: block; }
.jba-toc-list a {
  display: block; padding: 8px 12px; font-size: 13px; line-height: 18px;
  color: var(--jba-body); border-left: 2px solid var(--jba-border-subtle);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.jba-toc-list a:hover { color: var(--jba-ink); background: var(--jba-bg-app); }
.jba-toc-list a.is-active {
  color: var(--jba-orange); border-left-color: var(--jba-orange);
  font-weight: 700; background: var(--jba-orange-tint);
}
.jba-toc-list li.lvl-3 a { padding-left: 24px; font-size: 12.5px; color: var(--jba-muted); }
.jba-toc-list li.lvl-3 a.is-active { color: var(--jba-orange); }

.jba-toc-share { flex: 0 0 auto; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--jba-border); }
.jba-toc-rail .jba-toc-share:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.jba-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.jba-share-btn {
  width: 36px; height: 36px; border-radius: var(--jba-r-sm);
  border: 1px solid var(--jba-border); background: #fff;
  display: grid; place-items: center; cursor: pointer; color: var(--jba-body);
  padding: 0; transition: border-color .12s ease, color .12s ease;
}
.jba-share-btn:hover { border-color: var(--jba-orange); color: var(--jba-orange); }
.jba-share-btn.is-done { border-color: var(--jba-green); color: var(--jba-green); }

/* mobile share row lives under the article; the rail owns it on desktop */
.jba-share-mobile { display: none; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--jba-border); }
.jba-share-mobile .jba-share-btn { width: 40px; height: 40px; }

/* ── Prose ───────────────────────────────────────────────────────── */
.jba-prose { color: var(--jba-body); font-size: 17px; line-height: 30px; max-width: 612px; min-width: 0; }
.jba-prose > * + * { margin-top: 24px; }
.jba-prose p { margin: 0; }
/* Body-copy links: Jibble orange, and a third smaller than the text they sit in.
   Scoped to prose-level containers on purpose — the share buttons, the author name
   and the CTA buttons are also <a> tags inside .jba-prose and must keep their own
   size and colour. */
.jba-prose p a, .jba-prose li a, .jba-prose blockquote a,
.jba-prose .jba-callout-body a, .jba-prose figcaption a,
.jba-prose .jba-figure-caption a, .jba-prose td a, .jba-prose th a,
.jba-prose details a, .jba-prose .faq-a a {
  color: var(--jba-link); font-weight: 600; font-size: 0.67em;
}
.jba-prose p a:hover, .jba-prose li a:hover, .jba-prose blockquote a:hover,
.jba-prose .jba-callout-body a:hover, .jba-prose figcaption a:hover,
.jba-prose .jba-figure-caption a:hover, .jba-prose td a:hover,
.jba-prose details a:hover { text-decoration: underline; }
.jba-prose strong, .jba-prose b { color: var(--jba-ink); font-weight: 700; }
.jba-prose em, .jba-prose i { font-style: italic; }

.jba-prose h2 {
  font-size: 28px; line-height: 36px; font-weight: 800; color: var(--jba-ink);
  letter-spacing: -0.015em; margin-top: 56px; margin-bottom: 0;
  scroll-margin-top: calc(var(--jba-sticky-top) - 8px);
}
.jba-prose h2 + p { margin-top: 16px; }
.jba-prose h3 {
  font-size: 20px; line-height: 28px; font-weight: 700; color: var(--jba-ink);
  margin-top: 36px; margin-bottom: 0;
  scroll-margin-top: calc(var(--jba-sticky-top) - 8px);
}
.jba-prose h3 + p { margin-top: 12px; }
.jba-prose h4 { font-size: 17px; line-height: 26px; font-weight: 700; color: var(--jba-ink); margin-top: 28px; }

/* lists — orange markers, and numbers as round orange dots */
.jba-prose ul, .jba-prose ol { padding-left: 22px; }
.jba-prose ul li, .jba-prose ol li { margin-bottom: 10px; padding-left: 4px; display: list-item; }
.jba-prose ul li::marker { color: var(--jba-orange); }
.jba-prose ol { list-style: none; padding-left: 0; counter-reset: jba-ol; }
.jba-prose ol > li {
  counter-increment: jba-ol; position: relative;
  padding-left: 40px; padding-top: 1px; list-style: none;
}
.jba-prose ol > li::before {
  content: counter(jba-ol);
  position: absolute; left: 0; top: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--jba-orange-tint); color: var(--jba-orange-press);
  font-size: 13px; font-weight: 800; line-height: 26px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.jba-prose ol ol { margin-top: 10px; }
.jba-prose li > ul, .jba-prose li > ol { margin-top: 10px; }

/* grey divider */
.jba-prose hr { border: 0; border-top: 1px solid var(--jba-border); margin: 48px 0; height: 0; }

/* lead paragraph (opt-in: add class jba-lead) */
.jba-prose .jba-lead {
  font-size: 19px; line-height: 32px; color: var(--jba-ink); font-weight: 600;
  border-left: 3px solid var(--jba-orange); padding-left: 20px;
}

/* Code and shortcode samples. There was no rule for these at all, so a long line —
   and a shortcode tag is long by nature — pushed the whole article sideways. Wrap
   inside the block, and scroll the block rather than the page if it still cannot
   fit. wptexturize() skips <pre> and <code>, so quotes shown in here stay straight,
   which is what makes a sample safe to copy back out. */
.jba-prose pre {
  margin: 14px 0 30px; padding: 14px 16px;
  background: var(--jba-bg-app); border: 1px solid var(--jba-border);
  border-radius: var(--jba-r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 21px; color: var(--jba-ink);
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto;
}
.jba-prose :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em; background: var(--jba-bg-app);
  border: 1px solid var(--jba-border); border-radius: 5px; padding: 1px 5px;
}

/* quote with the orange left bar — every blockquote in existing content */
.jba-prose blockquote {
  border-left: 3px solid var(--jba-orange); padding: 2px 0 2px 20px;
  font-size: 19px; line-height: 32px; color: var(--jba-ink); font-weight: 600;
}
.jba-prose blockquote p { margin: 0; }
.jba-prose blockquote p + p { margin-top: 12px; }
.jba-prose blockquote a { color: var(--jba-link); }
/* the author name in the bio box is a link to their LinkedIn: heading, not body copy */
.jba-prose .jba-author-bio-name a { color: inherit; font-size: inherit; font-weight: inherit; }
.jba-prose blockquote cite,
.jba-prose blockquote footer {
  display: block; margin-top: 12px; font-size: 13px; font-weight: 600;
  font-style: normal; color: var(--jba-muted);
}

/* pull quote — orange rules above and below */
.jba-prose .jba-pullquote, .jba-prose blockquote.jba-pullquote {
  border: 0; border-top: 2px solid var(--jba-orange); border-bottom: 2px solid var(--jba-orange);
  padding: 28px 0; margin: 40px 0;
  font-size: 24px; line-height: 36px; font-weight: 700; color: var(--jba-ink);
  letter-spacing: -0.01em; text-wrap: balance;
}
.jba-prose .jba-pullquote-attr {
  font-size: 13px; font-weight: 600; color: var(--jba-muted);
  margin-top: 12px; text-transform: none; letter-spacing: 0;
}

/* callouts */
.jba-prose .jba-callout {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px;
  background: var(--jba-orange-tint); border: 1px solid var(--jba-orange-line);
  border-radius: var(--jba-r-md); padding: 20px 22px; color: var(--jba-ink);
}
.jba-callout-icon { width: 24px; height: 24px; color: var(--jba-orange-press); display: block; }
.jba-callout-title {
  font-size: 14px; font-weight: 800; color: var(--jba-orange-press);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.jba-callout-body { font-size: 15px; line-height: 24px; color: var(--jba-ink); }
.jba-callout-body p { margin: 0; }
.jba-callout-body p + p { margin-top: 10px; }
.jba-callout-body a { color: var(--jba-link); font-weight: 600; }
.jba-prose .jba-callout.is-tip { background: var(--jba-green-bg); border-color: var(--jba-green-line); }
.jba-callout.is-tip .jba-callout-icon, .jba-callout.is-tip .jba-callout-title { color: var(--jba-green-ink); }
.jba-prose .jba-callout.is-warn { background: var(--jba-warn-bg); border-color: var(--jba-warn-line); }
.jba-callout.is-warn .jba-callout-icon, .jba-callout.is-warn .jba-callout-title { color: var(--jba-warn-ink); }

/* figures — the block editor's <figure>, the classic editor's .wp-caption, and
   the [jba_figure] shortcode all land on the same box */
.jba-prose figure,
.jba-prose .wp-caption,
.jba-prose .jba-figure {
  margin: 32px 0; border: 1px solid var(--jba-border); border-radius: var(--jba-r-md);
  overflow: hidden; background: var(--jba-bg-app); width: auto !important; max-width: 100%;
}
.jba-prose figure img,
.jba-prose .wp-caption img,
.jba-prose .jba-figure img { width: 100%; height: auto; }
.jba-prose figcaption,
.jba-prose .wp-caption-text,
.jba-prose .jba-figure-caption {
  padding: 12px 16px; margin: 0; font-size: 13px; line-height: 30px;
  color: var(--jba-muted); border-top: 1px solid var(--jba-border); background: #fff; text-align: left;
}
/* a bare image in the flow still gets the rounded treatment */
.jba-prose > img, .jba-prose p > img { border-radius: var(--jba-r-md); border: 1px solid var(--jba-border); }

/* stat strip */
.jba-prose .jba-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 32px 0;
  border: 1px solid var(--jba-border); border-radius: var(--jba-r-md);
  overflow: hidden; background: #fff;
}
/* One column per stat, so a two-up fills the strip at 50/50 instead of leaving an
   empty third cell, and a four-up stays on one row instead of wrapping 3 + 1. The
   count comes from the shortcode as jba-stats--N; three stays the default above so
   any strip written before this class existed is unaffected. */
.jba-prose .jba-stats--1 { grid-template-columns: 1fr; }
.jba-prose .jba-stats--2 { grid-template-columns: repeat(2, 1fr); }
.jba-prose .jba-stats--4 { grid-template-columns: repeat(4, 1fr); }
/* Four cells share the same 612px of prose, so buy the width back from the padding
   rather than letting the numbers wrap. */
.jba-prose .jba-stats--4 .jba-stat { padding: 20px 14px; }

/* belt and braces for the wpautop debris the shortcode already strips: nothing
   but a .jba-stat may take up a cell of the strip */
.jba-prose .jba-stats br,
.jba-prose .jba-stats > p:empty { display: none; }
.jba-stat { padding: 24px; border-right: 1px solid var(--jba-border); }
.jba-stat:last-child { border-right: 0; }
.jba-stat-num {
  font-size: 32px; font-weight: 800; color: var(--jba-orange);
  letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.jba-stat-label { font-size: 13px; line-height: 18px; color: var(--jba-body); margin-top: 8px; }

/* tables — rounded, header fill; the JS wraps wide ones in a scroller.
   Scoped to .jba-root rather than .jba-prose so EVERY table in the article picks
   this up with no class of its own — including one inside shortcode output, or in
   an FAQ answer, which sits outside the prose wrapper. Same specificity as before
   (one class + one element), so nothing that used to win stops winning. */
.jba-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; max-width: 100%; }
.jba-root table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--jba-border); border-radius: var(--jba-r-md);
  font-size: 14px; background: #fff;
  margin: 24px 0;   /* the :where() reset zeroes it; an unwrapped table needs rhythm */
}
/* `overflow: hidden` used to sit in the rule above, to clip the corners. It never
   worked: overflow does not apply to table elements, so browsers ignore it and the
   filled header paints straight over the rounded top corners. The corner cells
   carry the radius instead — see the end of this section. */
.jba-table-scroll > table { margin: 0; }
/* comparison tables mark support with a green Yes and a muted No, as the design does */
.jba-root table .yes { color: var(--jba-green); font-weight: 700; }
.jba-root table .no { color: #B7B7B7; }   /* design token --jb-dusk-30 */
.jba-root th, .jba-root td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  /* border: 0 first — the site's global table CSS paints a 1px black rule on all
     four sides, which the design does not have. Only the bottom rule is ours. */
  border: 0; border-bottom: 1px solid var(--jba-border);
  line-height: 30px;   /* the design lets cells inherit the prose line-height */
}
/* The whole <thead> is filled, not just its <th> cells: `> tr > *` matches th and
   td alike, so a header row built from <td> — which is what HTML pasted from Word
   or Google Docs produces — reads identically to a proper one. */
.jba-root thead > tr > * {
  background: var(--jba-bg-app); font-weight: 700; color: var(--jba-ink);
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
/* …and a table that never got a header row in the editor reads its FIRST ROW as
   one. No <thead> and no <th> anywhere is exactly what TinyMCE produces for a
   typed or pasted table — every article table on the site is that shape — so the
   header treatment above is applied to row one instead of leaving the table
   headerless.
   THE OPT-OUT IS A CLASS. `table:not([class])` skips any table an editor or a
   shortcode has already styled (the `dotted` tables in the older articles, for
   one), so putting any class on a table turns this off and nothing that already
   looks deliberate is touched.
   Kept as its OWN rule, never merged into the selector list above: one unknown
   selector invalidates a whole rule, so an engine without :has() must drop this
   and keep the real <thead> styling. */
.jba-root table:not([class]):not(:has(thead, th)) > tbody:first-of-type > tr:first-child > td,
.jba-root table[class=""]:not(:has(thead, th)) > tbody:first-of-type > tr:first-child > td {
  background: var(--jba-bg-app); font-weight: 700; color: var(--jba-ink);
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}
.jba-root tbody tr:last-child td { border-bottom: 0; }
.jba-root tbody tr:hover { background: var(--jba-bg-app); }

/* Corner cells carry the radius, so the header fill and the row hover fill both
   stay inside the table's outline. The tbody variants cover a table with no thead;
   the tfoot variants cover one that ends in a footer row. */
.jba-root table > thead:first-child > tr:first-child > *:first-child,
.jba-root table > tbody:first-child > tr:first-child > *:first-child { border-top-left-radius: var(--jba-r-md); }
.jba-root table > thead:first-child > tr:first-child > *:last-child,
.jba-root table > tbody:first-child > tr:first-child > *:last-child { border-top-right-radius: var(--jba-r-md); }
.jba-root table > tbody:last-child > tr:last-child > *:first-child,
.jba-root table > tfoot:last-child > tr:last-child > *:first-child { border-bottom-left-radius: var(--jba-r-md); }
.jba-root table > tbody:last-child > tr:last-child > *:last-child,
.jba-root table > tfoot:last-child > tr:last-child > *:last-child { border-bottom-right-radius: var(--jba-r-md); }

/* Word and Google Docs paste width/height attributes and inline styles onto the
   table and its cells. Left alone they outrank everything above — a fixed pixel
   width breaks the mobile scroller, and border="1" reinstates the default frame. */
.jba-root table[width], .jba-root table[style*="width"] { width: 100% !important; }
.jba-root table[border] { border: 1px solid var(--jba-border) !important; }
.jba-root th[width], .jba-root td[width],
.jba-root th[height], .jba-root td[height] { width: auto !important; height: auto !important; }
.jba-root td[style*="border"], .jba-root th[style*="border"] {
  border-top: 0 !important; border-right: 0 !important; border-left: 0 !important;
  border-bottom: 1px solid var(--jba-border) !important;
}

/* inline product CTA — one or two buttons */
.jba-prose .jba-product-cta {
  border: 1px solid var(--jba-border); border-radius: 16px;
  background: linear-gradient(120deg, var(--jba-orange-tint) 0%, transparent 60%), #fff;
  padding: 32px 36px; margin: 40px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.jba-product-cta-eyebrow {
  font-size: 11px; font-weight: 800; color: var(--jba-orange-press);
  text-transform: uppercase; letter-spacing: .08em;
}
.jba-product-cta-title {
  font-size: 22px; line-height: 28px; font-weight: 800; color: var(--jba-ink);
  margin: 8px 0 10px; letter-spacing: -0.015em; text-wrap: balance;
}
.jba-product-cta-body { font-size: 14px; line-height: 22px; color: var(--jba-body); max-width: 380px; }
.jba-product-cta-body p { margin: 0; }
.jba-product-cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
.jba-prose .jba-cta-btn-primary, .jba-prose .jba-cta-btn-secondary,
.jba-cta-btn-primary, .jba-cta-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 26px; border-radius: 10px;
  font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.jba-prose .jba-cta-btn-primary, .jba-cta-btn-primary { background: var(--jba-orange); color: #fff; }
.jba-prose .jba-cta-btn-primary:hover { background: var(--jba-orange-hover); text-decoration: none; }
.jba-prose .jba-cta-btn-secondary, .jba-cta-btn-secondary { background: #fff; color: var(--jba-orange); border: 1.5px solid var(--jba-orange); }
.jba-prose .jba-cta-btn-secondary:hover { background: var(--jba-orange-tint); text-decoration: none; }

/* FAQ (<details>) */
.jba-prose details {
  border-bottom: 1px solid var(--jba-border); padding: 20px 0;
}
.jba-prose details + details { margin-top: 0; }
.jba-prose details summary {
  font-size: 17px; font-weight: 700; color: var(--jba-ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none;
}
.jba-prose details summary::-webkit-details-marker { display: none; }
.jba-prose details[open] summary { color: var(--jba-orange); }

/* author bio */
.jba-author-bio {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 24px;
  border: 1px solid var(--jba-border); border-radius: var(--jba-r-md);
  background: #fff; margin-top: 56px;
}
.jba-author-bio-name { font-size: 16px; font-weight: 800; color: var(--jba-ink); }
.jba-author-bio-name a { color: inherit; }
.jba-author-bio-name a:hover { color: var(--jba-orange); }
.jba-author-bio-role { font-size: 13px; color: var(--jba-muted); margin-top: 2px; }
.jba-author-bio-text { font-size: 14px; line-height: 22px; color: var(--jba-body); margin-top: 10px; }
.jba-author-bio-text p { margin: 0; }
.jba-author-bio-text p + p { margin-top: 10px; }
.jba-author-bio-links { display: flex; gap: 12px; margin-top: 12px; font-size: 13px; }
/* the bio box sits inside .jba-prose, so it would inherit the smaller inline link
   size — it is a UI label, not body copy, so it keeps its own 13px */
.jba-author-bio-links a { color: var(--jba-link); font-weight: 600; font-size: 13px; }

/* ── Right rail CTA ──────────────────────────────────────────────── */
.jba-cta-card {
  padding: 4px 16px 16px; border: 1px solid var(--jba-orange-line); border-radius: 14px;
  background: linear-gradient(180deg, #FFF6EE 0%, #FFFFFF 70%);
  text-align: center; box-shadow: 0 6px 20px rgba(255,121,34,.10);
}
.jba-cta-illu { position: relative; width: 100%; height: 92px; margin-bottom: 4px; display: grid; place-items: center; }
/* A per-article illustration replaces the inline SVG. Contained, not cropped —
   the uploads are logos and spot drawings, and cover would clip them. */
.jba-cta-illu img { width: 100%; height: 100%; object-fit: contain; }
.jba-cta-title {
  font-size: 16px; line-height: 21px; font-weight: 800; color: var(--jba-ink);
  letter-spacing: -0.02em; margin-bottom: 14px; text-wrap: balance;
}
.jba-cta-primary {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px;
  background: var(--jba-orange); color: #fff; border-radius: 9px;
  font-weight: 800; font-size: 13px; margin-bottom: 6px; letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(255,121,34,.30);
  transition: background .12s ease, transform .12s ease;
}
.jba-cta-primary:hover { background: var(--jba-orange-hover); transform: translateY(-1px); }
.jba-cta-secondary {
  display: flex; align-items: center; justify-content: center; height: 34px;
  background: transparent; color: var(--jba-orange); border-radius: 9px;
  font-weight: 700; font-size: 12.5px; transition: background .12s ease;
}
.jba-cta-secondary:hover { background: var(--jba-orange-tint); }

/* ── Related ─────────────────────────────────────────────────────── */
.jba-related { background: var(--jba-bg-app); border-top: 1px solid var(--jba-border); }
.jba-related-inner { max-width: 1240px; margin: 0 auto; padding: 64px 32px 80px; }
.jba-related-eyebrow {
  font-size: 11px; font-weight: 800; color: var(--jba-orange);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.jba-related .jba-related-title {
  font-size: 28px; line-height: 36px; font-weight: 800; color: var(--jba-ink);
  letter-spacing: -0.015em; margin: 0 0 32px;
}
.jba-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jba-related-card { color: inherit; }   /* never the browser's default link blue */
.jba-related-card {
  background: #fff; border: 1px solid var(--jba-border); border-radius: var(--jba-r-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .12s ease, transform .12s ease;
}
.jba-related-card:hover { border-color: var(--jba-orange); transform: translateY(-2px); }
.jba-related-thumb { aspect-ratio: 16 / 9; background: var(--jba-bg-alt); overflow: hidden; }
.jba-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jba-related-thumb--ph.v1 {
  background: radial-gradient(circle at 30% 20%, var(--jba-orange-tint) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, #E5EFFF 0%, transparent 50%), var(--jba-bg-alt);
}
.jba-related-thumb--ph.v2 {
  background: radial-gradient(circle at 70% 30%, #E0F4E5 0%, transparent 50%),
              radial-gradient(circle at 20% 70%, var(--jba-orange-tint) 0%, transparent 50%), var(--jba-bg-alt);
}
.jba-related-thumb--ph.v3 {
  background: radial-gradient(circle at 50% 50%, #FFF1D1 0%, transparent 50%),
              radial-gradient(circle at 10% 90%, #ECDFFA 0%, transparent 50%), var(--jba-bg-alt);
}
.jba-related-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.jba-related-card-title {
  font-size: 17px; line-height: 24px; font-weight: 700; color: var(--jba-ink);
  /* 8px top, as the design has it — its card title carries that margin even
     though the card has no category label above it. */
  margin: 8px 0 12px; text-wrap: balance;
}
.jba-related-meta { font-size: 12px; color: var(--jba-muted); margin-top: auto; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .jba-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .jba-cta-rail { display: none; }
}
@media (max-width: 1100px) {
  .jba-shell { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .jba-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .jba-shell { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 72px; }
  .jba-toc-rail { display: none; }
  .jba-prose { max-width: none; }
  .jba-share-mobile { display: block; }
  .jba-hero-inner { padding: 40px 24px 32px; }
  .jba-hero-img-wrap { padding: 0 24px 32px; }
  .jba-title { font-size: 34px; line-height: 42px; }
  .jba-deck, .jba-deck p { font-size: 17px; line-height: 27px; }
  .jba-prose h2 { font-size: 24px; line-height: 32px; margin-top: 44px; }
  .jba-prose h3 { font-size: 19px; line-height: 27px; margin-top: 30px; }
  .jba-related-inner { padding: 48px 24px 64px; }
  .jba-related-title { font-size: 24px; line-height: 32px; }
}
@media (max-width: 640px) {
  .jba-shell { padding: 28px 18px 56px; }
  .jba-hero-inner { padding: 32px 18px 28px; }
  .jba-hero-img-wrap { padding: 0 18px 28px; }
  .jba-title { font-size: 28px; line-height: 36px; }
  .jba-prose { font-size: 16px; line-height: 28px; }
  .jba-prose h2 { font-size: 22px; line-height: 30px; }
  .jba-prose .jba-product-cta { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .jba-product-cta-actions { flex-direction: column; }
  .jba-prose .jba-cta-btn-primary, .jba-prose .jba-cta-btn-secondary,
.jba-cta-btn-primary, .jba-cta-btn-secondary { width: 100%; }
  .jba-prose .jba-pullquote { font-size: 20px; line-height: 30px; padding: 22px 0; margin: 32px 0; }
  .jba-author-bio { grid-template-columns: 1fr; gap: 14px; }
  .jba-related-inner { padding: 40px 18px 56px; }
  .jba-meta { gap: 12px; }
  .jba-hero-img { aspect-ratio: 16 / 9; }
}

/* 600px — the design stacks its related grid here. The stat strip has no design
   rule at all (the mock simply overflows below ~545px); three cells still fit at
   640 at the desktop width of 199px, so they stack from here down as well. */
@media (max-width: 600px) {
  .jba-related-grid { grid-template-columns: 1fr; }
  .jba-prose .jba-stats { grid-template-columns: 1fr; }
  .jba-stat { border-right: 0; border-bottom: 1px solid var(--jba-border); }
  .jba-stat:last-child { border-bottom: 0; }
}
@media (max-width: 420px) {
  .jba-title { font-size: 25px; line-height: 33px; }
  .jba-prose .jba-callout { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .jba-root *, .jba-root *::before { transition: none !important; }
  .jba-related-card:hover, .jba-cta-primary:hover { transform: none; }
}

@media print {
  .jba-toc-rail, .jba-cta-rail, .jba-progress, .jba-share-mobile, .jba-related { display: none !important; }
  .jba-shell { display: block; padding: 0; }
  .jba-prose { max-width: none; }
}

/* ── RTL ─────────────────────────────────────────────────────────────
   `.rtl` is the class WordPress puts on <body> for a right-to-left locale, so
   these only apply to /ar/ — the one RTL language of the fifteen this template
   is translated into.

   Deliberately last in the file, and deliberately narrow: each rule names one
   element whose text the design centres or left-aligns by default and which
   reads wrong mirrored. A blanket `.rtl { text-align: right }` would also flip
   the meta row, the share rail and the card bodies, which already inherit the
   correct direction from the document.
   ------------------------------------------------------------------ */
.rtl h1.jba-title {
  text-align: right;
}
.rtl .jba-toc-label {
  text-align: right;
}
.rtl .jba-author-bio-name {
  text-align: right;
}
.rtl .jba-author-bio-role {
  text-align: right;
}
.rtl .jba-related-inner {
  text-align: right;
}