/**
 * Long-form article module: the design system every commissioned article inherits.
 *
 * Extracted 2026-08-13 from the first commissioned article, which carried 23 KB of CSS inline in
 * the post body. Inline was wrong three ways: the bytes could not be cached across articles, only
 * an Administrator can save a <style> block at all (wp_kses strips it for Contributor and Author),
 * and every future article would carry a drifting copy of the design.
 *
 * WHAT THE EXTRACTION CHANGED, and nothing else:
 *
 * 1. EVERY selector is scoped under `.tr-article`. The source scoped 19 of 181, so rules like
 *    `.tr-btn` and `.tr-body h3` were global in all but name, behind 17 !important declarations.
 *
 * 2. THE CTA, FAQ AND EYEBROW FAMILIES are renamed `tr-` to `tra-`, by prefix, so no component is
 *    ever half renamed: tra-cta, tra-cta__inner, tra-cta__actions, tra-cta__fine, tra-eyebrow,
 *    tra-faq, tra-faq__item, tra-faq__q, tra-faq__a, tra-faq__h, tra-faq__ico.
 *    Four of those collided with live theme components (the shared FAQ accordion on the homepage,
 *    /pricing/, both integration detail pages and /government-contractors/, plus the CTA block).
 *    The scoping alone already prevented any leak, since no other page has a `.tr-article`
 *    ancestor; the rename is kept because two names meaning two things in one codebase is a trap
 *    that pays out to whoever did not write it. ARTICLE MARKUP USES THE `tra-` NAMES.
 *
 * 3. `.tr-printing` COMPOUNDS rather than descends: `.tr-article.tr-printing`, no space. article.js
 *    adds that class to the article element itself, so the descendant form the first scoping pass
 *    produced could never match, and the checklist print button printed the whole article. Caught
 *    by Aarya 2026-08-13. The one case a mechanical pass could not have known, since every other
 *    class genuinely is a descendant.
 *
 * COMMENTS ARE VERBATIM from the source. An earlier pass injected `.tr-article` into seven of them
 * because the tokenizer read comment prose as selectors; comments are parked behind placeholders
 * during scoping now.
 *
 * Verified on every extraction: 666 declarations in, 666 out, braces balanced, zero unscoped
 * selectors, zero mangled comments, exactly one @media print block.
 *
 * @package Hello_Elementor_Child
 */

/* ============================================================
   TimeRewards article module - all styles scoped to .tr-article
   ============================================================ */

.tr-article {
  --tr-navy:      #0f2c52;
  --tr-navy-700:  #16406f;
  --tr-blue:      #1e6fb8;
  --tr-blue-soft: #f1f6fb;
  --tr-green:     #6bbc05;
  --tr-green-dk:  #5aa004;
  --tr-amber:     #f5a623;
  --tr-ink:       #1f2937;
  --tr-ink-soft:  #4b5563;
  --tr-muted:     #6b7280;
  --tr-line:      #e3e9f0;
  --tr-surface:   #f7fafc;
  --tr-white:     #ffffff;
  --tr-radius:    14px;
  --tr-shadow:    0 1px 2px rgba(15,44,82,.04), 0 8px 24px rgba(15,44,82,.06);
  --tr-shadow-lg: 0 2px 4px rgba(15,44,82,.05), 0 18px 48px rgba(15,44,82,.10);
  --tr-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  font-family: var(--tr-font);
  /* Explicit background and colour: the widget may land on a section with an
     unknown background, and the module must stay legible regardless. */
  background: var(--tr-white);
  color: var(--tr-ink);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 80px;
  box-sizing: border-box;
}
.tr-article *,
.tr-article *::before,
.tr-article *::after { box-sizing: border-box; }
.tr-article p { margin: 0 0 22px; }
.tr-article a { color: var(--tr-blue); text-decoration: none; border-bottom: 1px solid rgba(30,111,184,.32); transition: border-color .18s ease, color .18s ease; }
.tr-article a:hover { color: var(--tr-navy); border-bottom-color: var(--tr-navy); }
.tr-article strong { font-weight: 650; color: var(--tr-navy); }
.tr-article em { font-style: italic; }
.tr-article /* ---------- reading progress ---------- */
.tr-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: transparent; z-index: 9999; pointer-events: none;
}
.tr-article .tr-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--tr-green), var(--tr-blue));
  transition: width .08s linear;
}
.tr-article /* ---------- header ---------- */
.tr-head { padding: 48px 0 8px; max-width: 820px; }
.tr-article .tra-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tr-green-dk); background: rgba(107,188,5,.10);
  padding: 7px 13px; border-radius: 100px; margin-bottom: 20px;
}
.tr-article .tra-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tr-green); }
.tr-article .tr-title {
  font-size: clamp(31px, 4.6vw, 50px);
  line-height: 1.12; font-weight: 800; letter-spacing: -.022em;
  color: var(--tr-navy); margin: 0 0 20px;
}
.tr-article .tr-dek {
  font-size: clamp(17px, 2vw, 20px); line-height: 1.62;
  color: var(--tr-ink-soft); margin: 0 0 26px; font-weight: 400;
}
.tr-article .tr-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  font-size: 14px; color: var(--tr-muted);
  padding-bottom: 26px; border-bottom: 1px solid var(--tr-line); margin-bottom: 8px;
}
.tr-article .tr-meta__item { display: inline-flex; align-items: center; gap: 7px; }
.tr-article .tr-meta__item svg { width: 15px; height: 15px; flex: none; stroke: var(--tr-muted); }
.tr-article /* ---------- layout ---------- */
.tr-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 1040px) {
.tr-article .tr-layout { grid-template-columns: minmax(0,1fr) 264px; gap: 60px; }
.tr-article .tr-aside { position: sticky; top: 96px; }
}
.tr-article .tr-body { max-width: 760px; min-width: 0; }
.tr-article /* ---------- table of contents ---------- */
.tr-toc {
  border-left: 2px solid var(--tr-line); padding-left: 20px;
}
.tr-article .tr-toc__label {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tr-muted); margin: 0 0 14px;
}
.tr-article .tr-toc__list { list-style: none; margin: 0; padding: 0; }
.tr-article .tr-toc__list li { margin: 0 0 3px; }
.tr-article .tr-toc__link {
  display: block; padding: 6px 0; font-size: 14px; line-height: 1.45;
  color: var(--tr-muted); border: 0; transition: color .18s ease, transform .18s ease;
}
.tr-article .tr-toc__link:hover { color: var(--tr-blue); transform: translateX(2px); border: 0; }
.tr-article .tr-toc__link.is-active { color: var(--tr-navy); font-weight: 650; }
@media (max-width: 1039px) {
.tr-article .tr-aside { order: -1; }
.tr-article .tr-toc {
    border-left: 0; padding: 20px 22px; background: var(--tr-surface);
    border: 1px solid var(--tr-line); border-radius: var(--tr-radius);
  }
.tr-article .tr-toc__list { columns: 2; column-gap: 26px; }
}
@media (max-width: 600px) {
.tr-article .tr-toc__list { columns: 1; }
}
.tr-article /* ---------- headings ---------- */
.tr-body h2 {
  font-size: clamp(24px, 3vw, 31px); line-height: 1.22; font-weight: 750;
  letter-spacing: -.016em; color: var(--tr-navy); margin: 56px 0 18px;
  scroll-margin-top: 96px;
}
.tr-article .tr-body h2:first-of-type { margin-top: 40px; }
.tr-article .tr-body h3 {
  font-size: clamp(18px, 2.2vw, 21px); line-height: 1.34; font-weight: 700;
  color: var(--tr-blue); margin: 34px 0 12px; scroll-margin-top: 96px;
}
.tr-article .tr-body ul,
.tr-article .tr-body ol { margin: 0 0 22px; padding-left: 22px; }
.tr-article .tr-body li { margin-bottom: 9px; }
.tr-article .tr-body li::marker { color: var(--tr-blue); }
.tr-article /* ---------- key takeaways ---------- */
.tr-takeaways {
  background: linear-gradient(158deg, var(--tr-navy) 0%, var(--tr-navy-700) 100%);
  border-radius: var(--tr-radius); padding: 30px 32px; margin: 36px 0 8px;
  color: #dbe6f2; box-shadow: var(--tr-shadow-lg); position: relative; overflow: hidden;
}
.tr-article .tr-takeaways::after {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(107,188,5,.20) 0%, transparent 70%);
  pointer-events: none;
}
.tr-article .tr-takeaways__label {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tr-green); margin: 0 0 18px;
}
.tr-article .tr-takeaways ul { list-style: none; margin: 0; padding: 0; }
.tr-article .tr-takeaways li {
  position: relative; padding-left: 26px; margin-bottom: 14px;
  font-size: 15.5px; line-height: 1.62;
}
.tr-article .tr-takeaways li:last-child { margin-bottom: 0; }
.tr-article .tr-takeaways li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--tr-green);
}
.tr-article .tr-takeaways strong { color: var(--tr-white); font-weight: 650; }
.tr-article /* ---------- callouts ---------- */
.tr-callout {
  display: flex; gap: 16px; background: var(--tr-blue-soft);
  border-left: 4px solid var(--tr-blue); border-radius: 0 10px 10px 0;
  padding: 22px 24px; margin: 30px 0;
}
.tr-article .tr-callout__icon { flex: none; width: 22px; height: 22px; margin-top: 2px; stroke: var(--tr-blue); }
.tr-article .tr-callout__body { min-width: 0; }
.tr-article .tr-callout__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tr-blue); margin: 0 0 7px;
}
.tr-article .tr-callout p { margin: 0 0 8px; font-size: 15.5px; }
.tr-article .tr-callout p:last-child { margin: 0; }
.tr-article .tr-callout__src { font-size: 13px; color: var(--tr-muted); }
.tr-article /* ---------- stat strip ---------- */
.tr-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px,1fr));
  gap: 14px; margin: 34px 0;
}
.tr-article .tr-stat {
  background: var(--tr-white); border: 1px solid var(--tr-line);
  border-radius: 12px; padding: 22px 20px; text-align: center;
  box-shadow: var(--tr-shadow); transition: transform .22s ease, box-shadow .22s ease;
}
.tr-article .tr-stat:hover { transform: translateY(-3px); box-shadow: var(--tr-shadow-lg); }
.tr-article .tr-stat__num {
  font-size: 30px; font-weight: 800; color: var(--tr-navy);
  letter-spacing: -.02em; line-height: 1.1; margin-bottom: 6px;
}
.tr-article .tr-stat__lbl { font-size: 13px; line-height: 1.45; color: var(--tr-muted); }
.tr-article /* ---------- interactive tool ---------- */
.tr-tool {
  border: 1px solid var(--tr-line); border-radius: var(--tr-radius);
  background: var(--tr-white); box-shadow: var(--tr-shadow);
  margin: 38px 0; overflow: hidden;
}
.tr-article .tr-tool__head {
  padding: 20px 26px; background: var(--tr-surface); border-bottom: 1px solid var(--tr-line);
}
.tr-article .tr-tool__title {
  font-size: 16px; font-weight: 700; color: var(--tr-navy); margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.tr-article .tr-tool__title svg { width: 18px; height: 18px; stroke: var(--tr-green-dk); flex: none; }
.tr-article .tr-tool__sub { font-size: 13.5px; color: var(--tr-muted); margin: 6px 0 0; }
.tr-article .tr-tool__body { padding: 26px; }
.tr-article /* ---------- clause quiz ----------
   Topic-specific interactive. The article's argument is that most of what
   people call a DCAA requirement is audit practice rather than clause text,
   which is exactly the kind of claim a reader will not take on trust from a
   vendor. So they check it themselves, one line at a time. */
.tr-quiz { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-article .tr-quiz li { margin: 0; }
.tr-article .tr-quiz li::marker { content: none; }
.tr-article .tr-quiz__item {
  border: 1px solid var(--tr-line); border-radius: 10px; overflow: hidden;
  background: var(--tr-white); transition: border-color .18s ease, box-shadow .18s ease;
}
.tr-article .tr-quiz__item:hover { border-color: #b8d0e8; box-shadow: 0 2px 10px rgba(15,44,82,.05); }
.tr-article .tr-quiz__q {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  font-family: var(--tr-font); font-size: 15.5px; font-weight: 600; color: var(--tr-navy);
  background: transparent; border: 0; padding: 14px 16px; cursor: pointer;
}
.tr-article .tr-quiz__q:focus-visible { outline: 2px solid var(--tr-blue); outline-offset: -2px; border-radius: 9px; }
.tr-article .tr-quiz__ico {
  margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tr-muted);
  transition: opacity .2s ease;
}
.tr-article .tr-quiz__q[aria-expanded="true"] .tr-quiz__ico { opacity: 0; }
.tr-article .tr-quiz__a { overflow: hidden; height: 0; transition: height .3s cubic-bezier(.3,.9,.3,1); }
.tr-article .tr-quiz__a > div { padding: 0 16px 16px; }
.tr-article .tr-quiz__verdict {
  display: inline-block; margin: 0 0 9px; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.tr-article .tr-quiz__verdict--in { background: #e8f1fa; color: #17568f; }
.tr-article .tr-quiz__verdict--out { background: #eef1f5; color: #526279; }
.tr-article .tr-quiz__a p:last-child { margin: 0; font-size: 15px; line-height: 1.64; color: var(--tr-ink-soft); }
.tr-article .tr-quiz__a p:last-child strong { color: var(--tr-navy); }
.tr-article .tr-quiz__foot {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--tr-line);
  font-size: 14.5px; line-height: 1.6; color: var(--tr-ink-soft);
}
.tr-article .tr-quiz__foot strong { color: var(--tr-navy); }
.tr-article /* ---------- table ---------- */
.tr-tablewrap { overflow-x: auto; margin: 30px 0; border-radius: 12px; border: 1px solid var(--tr-line); -webkit-overflow-scrolling: touch; }
.tr-article .tr-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.tr-article .tr-table thead th {
  background: var(--tr-navy); color: var(--tr-white); text-align: left;
  padding: 14px 18px; font-weight: 650; font-size: 14px;
}
.tr-article .tr-table td { padding: 14px 18px; border-top: 1px solid var(--tr-line); vertical-align: top; line-height: 1.55; }
.tr-article .tr-table tbody tr:nth-child(even) { background: var(--tr-surface); }
.tr-article .tr-table td:first-child { font-weight: 650; color: var(--tr-navy); }
.tr-article /* ---------- FAQ accordion ---------- */
/* Questions are real <h3>s wrapping the button: keeps heading semantics for
   search engines and screen readers while staying interactive. */
.tra-faq { margin: 26px 0 0; border-top: 1px solid var(--tr-line); }
.tr-article .tra-faq__item { border-bottom: 1px solid var(--tr-line); }
.tr-article .tr-body .tra-faq__h { margin: 0; font-size: inherit; color: inherit; font-weight: inherit; }
.tr-article .tra-faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--tr-font); font-size: 16.5px; font-weight: 650; color: var(--tr-navy);
  padding: 20px 2px; line-height: 1.45; transition: color .18s ease;
}
.tr-article .tra-faq__q:hover { color: var(--tr-blue); }
.tr-article .tra-faq__q:focus-visible { outline: 2px solid var(--tr-blue); outline-offset: 3px; border-radius: 4px; }
.tr-article .tra-faq__ico { flex: none; width: 20px; height: 20px; margin-top: 2px; position: relative; }
.tr-article .tra-faq__ico::before,
.tr-article .tra-faq__ico::after {
  content: ""; position: absolute; background: var(--tr-blue); border-radius: 2px;
  transition: transform .28s cubic-bezier(.3,.9,.3,1), opacity .2s ease;
}
.tr-article .tra-faq__ico::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.tr-article .tra-faq__ico::after { left: 9px; top: 2px; width: 2px; height: 16px; }
.tr-article .tra-faq__q[aria-expanded="true"] .tra-faq__ico::after { transform: rotate(90deg); opacity: 0; }
.tr-article .tra-faq__a { overflow: hidden; height: 0; transition: height .3s cubic-bezier(.3,.9,.3,1); }
.tr-article .tra-faq__a > div { padding: 0 2px 22px; font-size: 15.5px; line-height: 1.68; color: var(--tr-ink-soft); }
.tr-article .tra-faq__a p:last-child { margin: 0; }
.tr-article /* ---------- soft offer: the checklist ----------
   Permanent template component, added 2026-08-11.

   Every post carries a middle offer, sitting between "read the article" and
   "start a 14-day trial". A reader four weeks into researching a regulation
   is not ready to sign up for anything, and until now the only thing on the
   page for them was a trial button.

   Ungated by design: nothing to fill in, no email wall. It ships the day the
   post ships, with no dependency on a form backend.

   It sits ABOVE the trial CTA and stays visually lighter than it. If the two
   ever compete, the trial CTA loses and so does the post. */
.tr-offer {
  margin: 52px 0 0; padding: 32px 32px 28px;
  background: var(--tr-blue-soft);
  border: 1px solid #d9e5f2;
  border-radius: var(--tr-radius);
}
.tr-article .tr-offer__tag {
  display: inline-block; margin: 0 0 13px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tr-blue); background: rgba(30,111,184,.10);
  padding: 5px 11px; border-radius: 999px;
}
.tr-article .tr-body .tr-offer h2 { margin: 0 0 10px; font-size: clamp(20px,2.5vw,25px); }
.tr-article .tr-offer__lede { font-size: 16px; color: var(--tr-ink-soft); margin: 0 0 22px; max-width: 620px; }
.tr-article .tr-offer__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.tr-article .tr-offer__list li { margin: 0; }
.tr-article .tr-offer__list li::marker { content: none; }
.tr-article .tr-offer__row {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  background: var(--tr-white); border: 1px solid #e1e9f3; border-radius: 10px;
  padding: 13px 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tr-article .tr-offer__row:hover { border-color: #b8d0e8; box-shadow: 0 2px 10px rgba(15,44,82,.05); }
.tr-article .tr-offer__cb {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 21px; height: 21px; margin: 2px 0 0; padding: 0;
  border: 2px solid #b7c9dd; border-radius: 6px; background: var(--tr-white);
  cursor: pointer; position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.tr-article .tr-offer__cb:checked { background: var(--tr-green); border-color: var(--tr-green-dk); }
.tr-article .tr-offer__cb:checked::after {
  content: ""; position: absolute; left: 5.5px; top: 1.5px;
  width: 5px; height: 10px; border: solid var(--tr-white);
  border-width: 0 2.5px 2.5px 0; transform: rotate(43deg);
}
.tr-article .tr-offer__cb:focus-visible { outline: 2px solid var(--tr-blue); outline-offset: 3px; }
.tr-article .tr-offer__txt { font-size: 15.5px; line-height: 1.6; color: var(--tr-ink); }
.tr-article .tr-offer__cb:checked ~ .tr-offer__txt,
.tr-article .tr-offer__cb:checked ~ .tr-offer__txt strong { color: var(--tr-muted); }
.tr-article .tr-offer__cite { display: block; margin-top: 3px; font-size: 13px; color: var(--tr-muted); }
.tr-article .tr-offer__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  justify-content: space-between;
}
.tr-article .tr-offer__print {
  display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
  background: var(--tr-white); color: var(--tr-navy);
  border: 1px solid #c3d5e8; border-radius: 9px;
  padding: 11px 19px; font-size: 15px; font-weight: 650; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tr-article .tr-offer__print:hover { border-color: var(--tr-blue); box-shadow: 0 2px 10px rgba(15,44,82,.07); }
.tr-article .tr-offer__print:focus-visible { outline: 2px solid var(--tr-blue); outline-offset: 3px; }
.tr-article .tr-offer__print svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.tr-article .tr-offer__count { margin: 0; font-size: 14.5px; color: var(--tr-ink-soft); }
.tr-article .tr-offer__count strong { color: var(--tr-navy); }
.tr-article /* ---------- inline product moment ----------
   Permanent template component, added 2026-08-11.

   A post that only asks for the sale in its last paragraph has already lost
   the reader who was convinced in the middle. This is the mid-article moment:
   it names what the section just described, says concretely what the product
   does about it, and offers a walkthrough rather than a signup, because a
   reader mid-article is still deciding.

   Quiet by design. White card, blue rule, navy button. It sits inside the
   argument rather than interrupting it, and it never uses the accent colours
   reserved for the closing CTA. */
.tr-inline {
  margin: 34px 0; padding: 22px 24px 20px;
  background: var(--tr-white);
  border: 1px solid var(--tr-line);
  border-left: 4px solid var(--tr-blue);
  border-radius: 12px;
  box-shadow: var(--tr-shadow);
}
.tr-article .tr-inline__label {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tr-blue);
}
.tr-article .tr-inline p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.64; color: var(--tr-ink-soft); }
.tr-article .tr-inline p strong { color: var(--tr-navy); }
.tr-article .tr-inline__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.tr-article .tr-inline__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tr-navy); color: var(--tr-white); border: 0;
  border-radius: 8px; padding: 11px 20px; font-size: 14.5px; font-weight: 650;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tr-article .tr-inline__btn:hover {
  background: var(--tr-navy-700); color: var(--tr-white);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,44,82,.18);
}
.tr-article .tr-inline__btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex: none; }
.tr-article .tr-inline__alt { font-size: 14.5px; color: var(--tr-muted); }
.tr-article /* ---------- CTA ---------- */
.tra-cta {
  margin: 52px 0 0; border-radius: var(--tr-radius); overflow: hidden;
  background: linear-gradient(140deg, var(--tr-navy) 0%, var(--tr-navy-700) 100%);
  padding: 42px 38px; text-align: center; position: relative;
  box-shadow: var(--tr-shadow-lg);
}
.tr-article .tra-cta::before {
  content: ""; position: absolute; inset: 0;
  /* A soft light source, not a colour wash. The green button is the only
     green on this panel, which is the point of putting it there. */
  background: radial-gradient(ellipse at 78% 6%, rgba(255,255,255,.11) 0%, transparent 60%);
  pointer-events: none;
}
.tr-article .tra-cta__inner { position: relative; }
.tr-article .tra-cta h2 { color: var(--tr-white) !important; font-size: clamp(22px,3vw,28px); margin: 0 0 12px !important; font-weight: 750; letter-spacing: -.01em; }
.tr-article .tra-cta p { color: #c9d8ea; font-size: 16.5px; max-width: 520px; margin: 0 auto 26px; }
.tr-article .tr-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--tr-green); color: #0d2200 !important; font-weight: 700; font-size: 16px;
  padding: 15px 30px; border-radius: 9px; border: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 4px 14px rgba(107,188,5,.32);
}
.tr-article .tr-btn:hover { background: #78d006; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(107,188,5,.42); color: #0d2200 !important; }
.tr-article .tr-btn svg { width: 17px; height: 17px; stroke: currentColor; }
/* Sits under two large buttons and wraps to two lines, so it needs real separation: 16px
   read as crowded and 28px still did. The gap lives on the actions row, so it holds even
   if this line is ever changed or removed. */
.tr-article .tra-cta__fine { font-size: 13.5px; color: #9db3cc; margin: 0; line-height: 1.65; max-width: 46ch; margin-inline: auto; }
.tr-article .tra-cta__actions { margin-bottom: 40px; }
.tr-article .tra-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* .tr-btn sets colour and border with !important, so the outlined variant has
   to match that weight. Without it the secondary button renders dark green on
   navy and is effectively invisible, which browser testing caught. */
.tr-article .tr-btn--ghost {
  background: transparent; color: var(--tr-white) !important;
  border: 1.5px solid rgba(255,255,255,.55) !important; box-shadow: none;
}
.tr-article .tr-btn--ghost:hover {
  background: rgba(255,255,255,.12); color: var(--tr-white) !important;
  border-color: rgba(255,255,255,.9) !important; box-shadow: none;
}
.tr-article .tra-cta__fine a { color: #cfe0f2; border-bottom-color: rgba(207,224,242,.4); }
.tr-article .tra-cta__fine a:hover { color: var(--tr-white); border-bottom-color: var(--tr-white); }
.tr-article /* ---------- disclaimer ---------- */
.tr-disclaimer {
  margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--tr-line);
  font-size: 14px; font-style: italic; color: var(--tr-muted); line-height: 1.62;
}
.tr-article /* ---------- scroll reveal ---------- */
.tr-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.tr-article .tr-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
.tr-article *,
.tr-article *::before,
.tr-article *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
.tr-article .tr-reveal { opacity: 1; transform: none; }
}
.tr-article /* ---------- print ----------
   The checklist is the takeaway, so printing gives the reader the checklist
   and nothing else. Triggered by the button, which adds .tr-printing to the
   article and removes it again on afterprint. */
@media print {
.tr-article .tr-progress { display: none !important; }
.tr-article.tr-printing .tr-head,
.tr-article.tr-printing .tr-aside,
.tr-article.tr-printing .tr-body > *:not(.tr-offer) { display: none !important; }
.tr-article.tr-printing .tr-offer { margin: 0; padding: 0; border: 0; background: transparent; }
.tr-article.tr-printing .tr-offer__tag,
.tr-article.tr-printing .tr-offer__foot { display: none !important; }
.tr-article.tr-printing .tr-offer__row { break-inside: avoid; border-color: #cbd5e1; }
.tr-article.tr-printing .tr-reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 600px) {
.tr-article { padding: 0 18px 60px; font-size: 16.5px; }
.tr-article .tr-head { padding-top: 32px; }
.tr-article .tr-takeaways,
.tr-article .tra-cta { padding: 26px 22px; }
.tr-article .tr-offer { padding: 26px 20px 24px; }
.tr-article .tr-offer__foot { flex-direction: column; align-items: stretch; }
.tr-article .tr-offer__print { justify-content: center; }
.tr-article .tra-cta__actions { flex-direction: column; }
.tr-article .tra-cta__actions .tr-btn { justify-content: center; }
.tr-article .tr-inline { padding: 20px 18px 18px; }
.tr-article .tr-inline__actions { flex-direction: column; align-items: stretch; }
.tr-article .tr-inline__btn { justify-content: center; }
.tr-article .tr-tool__body,
.tr-article .tr-tool__head { padding: 20px; }
}

/* ###########################################################################
   BATCH 1 COMPONENTS, supplied by Aarya 2026-08-13
   ###########################################################################
   Folded in unmodified apart from this banner and the removal of their section 5,
   which duplicated the print fix already applied at its original position above.
   Accepted as sent: every selector already scoped, existing custom properties
   reused, no new tokens, no new typeface, nothing outside the palette.
   ########################################################################### */

/* ===========================================================================
   1. DECISION TOOL
   ===========================================================================
   Needed by: govcon-erp-alternatives (B2), already written against it.

   A short set of statements the reader ticks, with a verdict that updates as
   they go. Deliberately capable of recommending against us: in B2 it returns
   "an ERP is a reasonable answer for you" when the cost structure warrants it,
   which is the reason the rest of the article is believable.

   MARKUP CONTRACT

     <div class="tr-tool tr-reveal">
       <div class="tr-tool__head">
         <p class="tr-tool__title">...</p>
         <p class="tr-tool__sub">...</p>
       </div>
       <div class="tr-tool__body">
         <ul class="tr-dec" id="trDec">
           <li><label class="tr-dec__row">
             <input class="tr-dec__cb" type="checkbox" data-gate="1">
             <span class="tr-dec__txt">Statement.<span class="tr-dec__hint">Qualifier</span></span>
           </label></li>
         </ul>
         <div class="tr-verdict" id="trVerdict" role="status" aria-live="polite">
           <strong>Heading</strong>Body copy.
         </div>
       </div>
     </div>

   JS CONTRACT, for article.js: on change of any .tr-dec__cb inside #trDec,
   count the checked boxes. The box carrying data-gate is a gate rather than a
   score: when it is unchecked the verdict is always the "none" state. Otherwise
   score the remaining checked boxes and set the class on #trVerdict to
   tr-verdict--point (0 to 1), --mid (2), or --erp (3 or more), replacing its
   innerHTML with the matching copy. The article supplies the copy; happy to
   send the exact strings as a JS object if that is easier than reading them
   out of the article.
   --------------------------------------------------------------------------- */

.tr-article .tr-dec { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tr-article .tr-dec li { margin: 0; }
.tr-article .tr-dec li::marker { content: none; }
.tr-article .tr-dec__row {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  background: var(--tr-white); border: 1px solid var(--tr-line); border-radius: 10px;
  padding: 13px 15px; transition: border-color .18s ease, box-shadow .18s ease;
}
.tr-article .tr-dec__row:hover { border-color: #b8d0e8; box-shadow: 0 2px 10px rgba(15,44,82,.05); }
.tr-article .tr-dec__cb {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 21px; height: 21px; margin: 2px 0 0; padding: 0;
  border: 2px solid #b7c9dd; border-radius: 6px; background: var(--tr-white);
  cursor: pointer; position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.tr-article .tr-dec__cb:checked { background: var(--tr-navy); border-color: var(--tr-navy); }
.tr-article .tr-dec__cb:checked::after {
  content: ""; position: absolute; left: 5.5px; top: 1.5px;
  width: 5px; height: 10px; border: solid var(--tr-white);
  border-width: 0 2.5px 2.5px 0; transform: rotate(43deg);
}
.tr-article .tr-dec__cb:focus-visible { outline: 2px solid var(--tr-blue); outline-offset: 3px; }
.tr-article .tr-dec__txt { font-size: 15.5px; line-height: 1.6; color: var(--tr-ink); }
.tr-article .tr-dec__hint { display: block; margin-top: 3px; font-size: 13px; color: var(--tr-muted); }

/* One family, deepening as complexity rises. The verdict is a scale, not a set
   of warnings, and colouring it like a traffic light would say otherwise. */
.tr-article .tr-verdict {
  margin-top: 22px; padding: 18px 20px; border-radius: 10px;
  border-left: 4px solid #c9d4e0; background: var(--tr-surface);
  font-size: 15px; line-height: 1.64; color: var(--tr-ink-soft);
  transition: background .25s ease, border-color .25s ease;
}
.tr-article .tr-verdict strong { display: block; font-size: 16.5px; margin-bottom: 5px; color: var(--tr-navy); }
.tr-article .tr-verdict--point { background: #f1f6fb; border-left-color: var(--tr-blue); }
.tr-article .tr-verdict--point strong { color: #17568f; }
.tr-article .tr-verdict--mid { background: #edf2f9; border-left-color: var(--tr-navy-700); }
.tr-article .tr-verdict--mid strong { color: var(--tr-navy-700); }
.tr-article .tr-verdict--erp { background: #e9eff7; border-left-color: var(--tr-navy); }
.tr-article .tr-verdict--erp strong { color: var(--tr-navy); }


/* ===========================================================================
   2. BAR CHART
   ===========================================================================
   Needed by: the software roundup (B8, week 4), and comparison content
   generally. There is currently no way to show a proportion. tr-stats is a row
   of count-up figures, which is a different job.

   WHY INLINE SVG rather than styled divs. The guide bans inline style
   attributes, which rules out the obvious `style="width:72%"` approach for a
   CSS bar. SVG carries its geometry in presentation attributes (x, y, width,
   height), not in a style attribute, so a chart stays inside the rule with no
   exception needed. It also needs no JavaScript, which keeps it inside the
   no-script rule too. The article supplies computed geometry; the theme
   supplies colour, type and spacing.

   MARKUP CONTRACT

     <figure class="tr-chart tr-reveal">
       <figcaption class="tr-chart__title">What the chart shows</figcaption>
       <p class="tr-chart__sub">Optional one-line qualifier</p>
       <svg class="tr-chart__svg" viewBox="0 0 640 220" role="img"
            aria-label="Full sentence describing the data, for screen readers">
         <g class="tr-chart__grid">
           <line x1="150" y1="10" x2="150" y2="200"/>
         </g>
         <g class="tr-chart__series">
           <rect class="tr-chart__bar" x="150" y="18"  width="300" height="26" rx="4"/>
           <text class="tr-chart__cat" x="140" y="36">Category one</text>
           <text class="tr-chart__val" x="460" y="36">300</text>
         </g>
       </svg>
       <p class="tr-chart__src">Source: ...</p>
     </figure>

   Bars take tr-chart__bar by default. Where a chart needs to distinguish one
   series from another, add tr-chart__bar--b or --c. Three tones of the same
   family, no second hue, per the colour rule above.
   --------------------------------------------------------------------------- */

.tr-article .tr-chart {
  margin: 34px 0; padding: 24px 26px 20px;
  background: var(--tr-white); border: 1px solid var(--tr-line);
  border-radius: 12px; box-shadow: var(--tr-shadow);
}
.tr-article .tr-chart__title {
  font-size: 16px; font-weight: 700; color: var(--tr-navy); margin: 0 0 4px;
}
.tr-article .tr-chart__sub { font-size: 13.5px; color: var(--tr-muted); margin: 0 0 18px; }
.tr-article .tr-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-article .tr-chart__grid line { stroke: var(--tr-line); stroke-width: 1; }
.tr-article .tr-chart__bar { fill: var(--tr-navy); transition: fill .18s ease; }
.tr-article .tr-chart__bar--b { fill: var(--tr-blue); }
.tr-article .tr-chart__bar--c { fill: #9fb8d4; }
.tr-article .tr-chart__cat {
  fill: var(--tr-ink); font-family: var(--tr-font); font-size: 13px;
  font-weight: 600; text-anchor: end;
}
.tr-article .tr-chart__val {
  fill: var(--tr-muted); font-family: var(--tr-font); font-size: 13px; font-weight: 650;
}
.tr-article .tr-chart__src { font-size: 13px; color: var(--tr-muted); margin: 16px 0 0; }
.tr-article .tr-chart__legend {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 13.5px; color: var(--tr-ink-soft);
}
.tr-article .tr-chart__legend li { margin: 0; display: inline-flex; align-items: center; gap: 7px; }
.tr-article .tr-chart__legend li::marker { content: none; }
.tr-article .tr-chart__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--tr-navy); }
.tr-article .tr-chart__swatch--b { background: var(--tr-blue); }
.tr-article .tr-chart__swatch--c { background: #9fb8d4; }


/* ===========================================================================
   3. NUMBERED STEPS
   ===========================================================================
   Needed by: the BambooHR setup tutorial (B6, week 3), and every product
   tutorial after it. An ordered list does not carry a screenshot per step, and
   tutorials are the format with no competitor can write about our product.

   MARKUP CONTRACT

     <ol class="tr-steps">
       <li class="tr-steps__item">
         <h3 class="tr-steps__title">What the reader does</h3>
         <p>Detail.</p>
         <figure class="tr-figure">...</figure>   <!-- optional, component 4 -->
       </li>
     </ol>

   The number is generated by CSS from the list, so renumbering after an edit is
   automatic and cannot drift out of sync with the prose.
   --------------------------------------------------------------------------- */

.tr-article .tr-steps {
  list-style: none; counter-reset: tr-step; margin: 32px 0; padding: 0;
}
.tr-article .tr-steps__item {
  counter-increment: tr-step; position: relative;
  margin: 0 0 10px; padding: 22px 24px 18px 68px;
  background: var(--tr-white); border: 1px solid var(--tr-line);
  border-radius: 12px; box-shadow: var(--tr-shadow);
}
.tr-article .tr-steps__item::marker { content: none; }
.tr-article .tr-steps__item::before {
  content: counter(tr-step);
  position: absolute; left: 22px; top: 22px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--tr-navy); color: var(--tr-white);
  font-size: 14px; font-weight: 700; line-height: 30px; text-align: center;
}
.tr-article .tr-body .tr-steps__title {
  margin: 0 0 8px; font-size: 17px; line-height: 1.4;
  font-weight: 700; color: var(--tr-navy);
}
.tr-article .tr-steps__item p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.62; }
.tr-article .tr-steps__item p:last-child { margin: 0; }
.tr-article .tr-steps__item .tr-figure { margin: 14px 0 0; }
.tr-article .tr-steps__note {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 8px;
  background: var(--tr-blue-soft); border-left: 3px solid var(--tr-blue);
  font-size: 14.5px; line-height: 1.58; color: var(--tr-ink-soft);
}


/* ===========================================================================
   4. FIGURE WITH CAPTION
   ===========================================================================
   Needed by: every article carrying a screenshot, which from the tutorial
   onward is most of them. There is no image component in article.css today, so
   an <img> currently lands unstyled and full-bleed.

   MARKUP CONTRACT

     <figure class="tr-figure">
       <img src="/wp-content/uploads/..." alt="Describe what the image shows"
            width="1200" height="700" loading="lazy">
       <figcaption class="tr-figure__cap">What the reader should notice.</figcaption>
     </figure>

   Images are uploaded to the media library and referenced by their WordPress
   path. Articles never point at an external host, per the guide. width and
   height are attributes rather than styles, which keeps the layout from
   shifting as the image loads without breaking the no-inline-style rule.
   --------------------------------------------------------------------------- */

.tr-article .tr-figure { margin: 30px 0; }
.tr-article .tr-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--tr-line); border-radius: 12px;
  background: var(--tr-surface);
}
.tr-article .tr-figure__cap {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--tr-muted);
}
.tr-article .tr-figure--tight img { border-radius: 8px; }




/* ===========================================================================
   MOBILE
   =========================================================================== */

@media (max-width: 600px) {
  .tr-article .tr-chart { padding: 20px 18px 16px; }
  .tr-article .tr-steps__item { padding: 20px 18px 16px 58px; }
  .tr-article .tr-steps__item::before { left: 16px; top: 20px; width: 26px; height: 26px; line-height: 26px; font-size: 13px; }
  .tr-article .tr-verdict { padding: 16px 16px; }
}