/* ==========================================================================
   Bigsun — Blog Detail Design System  (APPROVED: "Homepage style")
   file: /blog/css/blog-detail.css      version token in pages: ?v=20261005

   One stylesheet for every blog detail page (Template A + Template B).
   Part 1 = structure/typography/components.   Part 2 = homepage-style skin
   (colour tokens sampled from bigsunworld.com; edit PART 2 §0 to retheme).
   Scoped under body.bsw-blog — it cannot leak onto other pages.
   ========================================================================== */
/* ======================= PART 1 — STRUCTURE & COMPONENTS ======================= */
/* 0. TOKENS ------------------------------------------------------------- */
body.bsw-blog {
  --bsw-ink: #0f1f2b;          /* headings, strong text            */
  --bsw-text: #293945;         /* article body text                */
  --bsw-muted: #5c6c78;        /* meta, captions, dates            */
  --bsw-border: #e1e7ec;       /* hairlines / dividers             */
  --bsw-surface: #f5f8fa;      /* quiet backgrounds (tables, code) */
  --bsw-accent: #005f73;       /* links, buttons (from existing CTA colour) */
  --bsw-accent-strong: #004556;/* hover / pressed                  */
  --bsw-accent-soft: #e6f1f3;  /* tint                             */
  --bsw-hero-1: #061b27;       /* title band gradient              */
  --bsw-hero-2: #0a3a4a;
  --bsw-radius: 10px;
  --bsw-font: inherit;         /* inherits the site font — no extra webfont */
  --bsw-measure: 44rem;        /* comfortable line length (~70 chars)       */
  --bsw-wrap: 1200px;          /* shared page width: title band + article align on the same left edge */
}

/* 1. TITLE BAND ----------------------------------------------------------
   Stays DARK on purpose: the transparent header sits on top of it and its
   logo/nav are white until the page is scrolled (existing header JS).        */
body.bsw-blog :is(section.page-title-section,.bsw-title) {
  background-image: linear-gradient(135deg, var(--bsw-hero-1) 0%, var(--bsw-hero-2) 100%) !important; /* beats inline image */
  background-color: var(--bsw-hero-1);
  min-height: 0;
  height: auto;
  padding-bottom: clamp(36px, 5vw, 64px);
  text-align: left;
}
body.bsw-blog :is(section.page-title-section,.bsw-title)::before,
body.bsw-blog :is(section.page-title-section,.bsw-title)::after { display: none; }
/* purely decorative animated dots */
body.bsw-blog :is(section.page-title-section,.bsw-title) > .rounded-circle { display: none !important; }

body.bsw-blog :is(section.page-title-section,.bsw-title) > .container,
body.bsw-blog :is(section.blogs,.bsw-blogs) > .container {
  width: 100%;
  max-width: var(--bsw-wrap);
  margin-left: auto;
  margin-right: auto;
}
body.bsw-blog :is(section.page-title-section,.bsw-title) .row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.bsw-blog :is(section.page-title-section,.bsw-title) .row > [class*="col-"] { width: 100%; }

body.bsw-blog :is(section.page-title-section,.bsw-title) h1 {
  margin: 0;
  padding: 0;
  max-width: 22em;
  text-align: left;
  color: #fff;
  font-family: var(--bsw-font);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-transform: none;
  text-shadow: none;
  text-wrap: balance;
}

/* breadcrumb shown above the title (visual order only) */
body.bsw-blog :is(section.page-title-section,.bsw-title) .row > [class*="col-"]:nth-child(2) { order: -1; }
body.bsw-blog :is(section.page-title-section,.bsw-title) ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
body.bsw-blog :is(section.page-title-section,.bsw-title) ul li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
body.bsw-blog :is(section.page-title-section,.bsw-title) ul li::before,
body.bsw-blog :is(section.page-title-section,.bsw-title) ul li::after { content: none; }
body.bsw-blog :is(section.page-title-section,.bsw-title) ul li + li::before {
  content: "/";
  display: inline-block;
  margin: 0 0.65em;
  color: rgba(255, 255, 255, 0.38);
}
body.bsw-blog :is(section.page-title-section,.bsw-title) ul li a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
body.bsw-blog :is(section.page-title-section,.bsw-title) ul li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* the 2nd crumb is an empty JS placeholder on most pages — hide while empty */
body.bsw-blog :is(section.page-title-section,.bsw-title) ul li:has(> a > #PageTitle2:empty) { display: none; }

/* 2. PAGE LAYOUT --------------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) {
  background: #fff;
  padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
}
@media (min-width: 992px) {
  /* roomier gap between article and sidebar — added as column padding so the row never overflows its container */
  body.bsw-blog :is(section.blogs,.bsw-blogs) .row > .col-lg-4 { padding-left: 3rem; }
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .posts,
body.bsw-blog :is(section.blogs,.bsw-blogs) .posts :is(.post,.bsw-post) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .posts :is(.post,.bsw-post) .content { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; }

/* 3. FEATURED IMAGE ------------------------------------------------------
   Space is reserved with aspect-ratio (no layout shift). Image is NOT lazy-
   loaded here (it is the LCP element) and its src/alt are untouched.          */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-img,.bsw-post-img) { margin: 0 0 1.75rem; padding: 0; overflow: visible; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-img,.bsw-post-img) img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bsw-surface);
  box-shadow: none;
}

/* 4. META LINE (author · date · category) -------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta { margin: 0; padding: 0; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--bsw-border);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--bsw-muted);
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  color: inherit;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta li::before,
body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta li::after { content: none; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta li i { color: var(--bsw-accent); font-size: 0.85em; margin: 0; opacity: 0.9; }

/* 5. CTA BUTTONS --------------------------------------------------------- */
body.bsw-blog a.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border: 1.5px solid var(--bsw-accent);
  border-radius: 8px;
  background: var(--bsw-accent);
  color: #fff;
  font-family: var(--bsw-font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  animation: none !important;       /* removes the blinking / pulsing */
  transform: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
body.bsw-blog a.cta-button:hover,
body.bsw-blog a.cta-button:active,
body.bsw-blog a.cta-button:focus-visible {
  background: var(--bsw-accent-strong);
  border-color: var(--bsw-accent-strong);
  color: #fff;
  box-shadow: none;
  animation: none !important;
  transform: none !important;
}
/* in-article CTA: quiet, left-aligned, outlined — it sits before the text */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) .content > .cta-widget {
  text-align: left !important;      /* beats inline style */
  margin: 1.35rem 0 0 !important;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) .content > .cta-widget .cta-button {
  background: transparent;
  color: var(--bsw-accent);
  padding: 0.65rem 1.15rem;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) .content > .cta-widget .cta-button::after { content: "\2192"; font-weight: 400; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) .content > .cta-widget .cta-button:hover { background: var(--bsw-accent); color: #fff; }

/* 6. ARTICLE TYPOGRAPHY --------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) {
  margin: 1.75rem 0 0;
  padding: 0;
  max-width: var(--bsw-measure);
  font-family: var(--bsw-font);
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--bsw-text);
  text-align: left !important;      /* Template A forces "justify" inline */
  overflow-wrap: break-word;
  word-wrap: break-word;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) > :first-child { margin-top: 0; }

body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p { margin: 0 0 1.25em; color: var(--bsw-text); font-size: inherit; line-height: inherit; text-align: left; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) strong,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) b { color: var(--bsw-ink); font-weight: 600; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) em,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) i { color: inherit; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p:empty { display: none; }          /* e.g. <p class="special …"></p> */

/* --- headings -----------------------------------------------------------
   H2 level: real <h2>, the FAQ heading (h3.blg) and the pseudo-headings
   <p class="bsw-h2"><strong>…</strong></p> that the bulk script marks.     */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h2,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2 {
  margin: 2.75rem 0 1rem;
  padding: 0;
  font-family: var(--bsw-font);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--bsw-ink);
  text-align: left;
  text-transform: none;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h2::before,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-bottom: 0.7rem;
  background: var(--bsw-accent);
  border-radius: 2px;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2 strong { font: inherit; color: inherit; }

/* H3 level */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3:not(.blg),
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h3 {
  margin: 2rem 0 0.6rem;
  padding: 0;
  font-family: var(--bsw-font);
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--bsw-ink);
  text-align: left;
  text-transform: none;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h3 strong { font: inherit; color: inherit; }

/* H4 level */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h4,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h5,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h6 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--bsw-font);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bsw-ink);
}

/* a heading never hangs from the previous block */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2 + p.bsw-h3 { margin-top: 1.25rem; }

/* --- lists -------------------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) ul,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) ol { margin: 0 0 1.35em; padding-left: 1.4em; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) ul { list-style: disc outside; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) ol { list-style: decimal outside; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) li { margin: 0 0 0.45em; padding-left: 0.2em; line-height: inherit; color: var(--bsw-text); }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) li::before { content: none; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) li::marker { color: var(--bsw-accent); font-weight: 600; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) li > ul,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) li > ol { margin: 0.5em 0 0.2em; }

/* --- ranked list written as <p><strong>1. Name</strong><br>text</p> ------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p:has(> strong:first-child + br) {
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--bsw-border);
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p:has(> strong:first-child + br):not(:has(+ p > strong:first-child + br)) {
  border-bottom: 1px solid var(--bsw-border);
  margin-bottom: 1.5em;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p:has(> strong:first-child + br) > strong { display: block; margin-bottom: 0.15rem; font-size: 1.05em; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p:has(> strong:first-child + br) > br { display: none; }

/* --- links -------------------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) a {
  color: var(--bsw-accent);
  text-decoration: underline;
  text-decoration-color: rgba(0, 95, 115, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) a:hover { color: var(--bsw-accent-strong); text-decoration-color: currentColor; }

/* --- images, figures ---------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) img { display: block; max-width: 100%; height: auto; margin: 1.75rem 0; border-radius: var(--bsw-radius); }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) figure { margin: 1.75rem 0; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) figure img { margin: 0; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) figcaption { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.5; color: var(--bsw-muted); }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) iframe,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) video { max-width: 100%; border-radius: var(--bsw-radius); }

/* --- quotes ------------------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) blockquote {
  margin: 1.75rem 0;
  padding: 0.15rem 0 0.15rem 1.25rem;
  border: 0;
  border-left: 3px solid var(--bsw-accent);
  background: none;
  font-size: 1.12em;
  line-height: 1.65;
  color: var(--bsw-ink);
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) blockquote p:last-child { margin-bottom: 0; }

/* --- tables: scroll inside themselves, never widen the page -------------
   (the pages ship site-wide rules: blue thead, box-shadow, centred 11px mobile text — reset here) */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  background: none;
  box-shadow: none;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table thead,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table tbody,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table tr { background: none; color: inherit; text-align: left; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table tbody tr:hover { background: var(--bsw-surface); }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table th,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table td {
  padding: 0.7rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--bsw-border);
  font-size: inherit;
  text-align: left;
  vertical-align: top;
  min-width: 7rem;
  width: auto;
  white-space: normal;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table thead th,
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table tr:first-child th {
  background: var(--bsw-surface);
  color: var(--bsw-ink);
  font-weight: 600;
  border-bottom: 2px solid var(--bsw-border);
}

body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--bsw-border); opacity: 1; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) code { padding: 0.12em 0.35em; border-radius: 4px; background: var(--bsw-surface); color: var(--bsw-ink); font-size: 0.9em; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) pre { overflow-x: auto; margin: 1.5rem 0; padding: 1rem 1.15rem; border-radius: var(--bsw-radius); background: var(--bsw-surface); font-size: 0.9rem; line-height: 1.6; }
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) pre code { padding: 0; background: none; }

/* 7. FAQ (accordion — existing JS toggles .active on .faq) ---------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3.blg {
  margin: 3.25rem 0 1.1rem !important;     /* beats inline margin:auto */
  padding: 0;
  border: 0;
  font-family: var(--bsw-font);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--bsw-ink);
  text-align: left;
  text-transform: none;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3.blg::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-bottom: 0.7rem;
  background: var(--bsw-accent);
  border-radius: 2px;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3.blg + br { display: none; }

body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container { margin: 0; padding: 0; max-width: var(--bsw-measure); }
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bsw-border);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq:first-child { border-top: 1px solid var(--bsw-border); }
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-question {
  position: relative;
  margin: 0;
  padding: 1.05rem 2.5rem 1.05rem 0;
  background: none;
  border: 0;
  font-family: var(--bsw-font);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--bsw-ink);
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq:hover .faq-question { color: var(--bsw-accent); }
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-toggle-icon {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  width: 14px;
  height: 14px;
  margin: -7px 0 0;
  padding: 0;
  background: none;
  border: 0;
  transform: none;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-toggle-icon::before,
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-toggle-icon::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--bsw-accent);
  transition: transform 0.22s ease;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-toggle-icon::after { transform: rotate(90deg); }
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq.active .faq-toggle-icon::after { transform: rotate(0deg); }

body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-answer {
  display: block;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bsw-text);
  transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease, visibility 0s linear 0.28s;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq.active .faq-answer {
  max-height: 40rem;
  padding: 0 0 1.15rem;
  visibility: visible;
  opacity: 1;
  transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease, visibility 0s;
}

/* 8. SIDEBAR -------------------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar { padding-left: 0; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget {
  margin: 0 0 2rem !important;
  padding: 0 0 2rem !important;      /* beats inline padding on "Follow Us" */
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bsw-border);
  border-radius: 0;
  box-shadow: none;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget-title { margin: 0 0 1rem; padding: 0; border: 0; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget-title h6 {
  margin: 0 0 1rem !important;
  padding: 0;
  border: 0;
  font-family: var(--bsw-font);
  font-size: 0.78rem;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bsw-muted);
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget-title h6::before,
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget-title h6::after { content: none; }

/* recent posts */
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .d-flex { gap: 0.9rem; align-items: flex-start; margin: 0 0 1.1rem !important; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .d-flex .flex-shrink-0 { margin: 0 !important; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget .Round-Img {
  display: block;
  width: 72px;
  height: 72px;
  max-width: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bsw-surface);
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .d-flex h4 {
  margin: 0 0 0.3rem;
  font-family: var(--bsw-font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .d-flex h4 a { color: var(--bsw-ink); text-decoration: none; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .d-flex h4 a:hover { color: var(--bsw-accent); }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .display-30 { font-size: 0.8rem; color: var(--bsw-muted); line-height: 1.4; }

/* sidebar CTA */
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar > .cta-widget { text-align: left !important; margin: 0 0 2rem !important; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar > .cta-widget .cta-button { width: 100%; justify-content: center; }

/* services: plain link rows instead of gradient buttons */
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-widget { margin-top: 0 !important; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-widget .widget-title h6 { margin-bottom: 0.4rem !important; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container { display: flex; flex-direction: column; gap: 0; padding: 0; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn {
  display: flex;
  align-items: center;
  padding: 0.8rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bsw-border);
  border-radius: 0;
  box-shadow: none;
  color: var(--bsw-ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transform: none;
  animation: none;
  opacity: 1;                       /* legacy CSS starts at 0 and relies on the fade-in we turn off */
  transition: color 0.15s ease, padding-left 0.15s ease;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn:last-child { border-bottom: 0; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn::before { content: none; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn::after { content: "\203A"; margin-left: auto; color: var(--bsw-muted); font-size: 1.25rem; line-height: 1; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn i { width: 1.6rem; margin: 0; font-size: 1rem; color: var(--bsw-accent); }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn:hover { color: var(--bsw-accent); padding-left: 0.25rem; box-shadow: none; transform: none; }

/* follow us */
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .social-icons { display: flex; gap: 0.5rem; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 1px solid var(--bsw-border);
  border-radius: 50%;
  background: none;
  color: var(--bsw-muted);
  font-size: 0.9rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .social-icons a:hover { color: var(--bsw-accent); border-color: var(--bsw-accent); background: none; }

/* promo panel — the one deliberate block of colour; overrides its inline styles */
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget.buy-software-poster {
  margin: 0 !important;
  padding: 1.5rem !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, var(--bsw-hero-1), var(--bsw-hero-2)) !important;
  color: #fff !important;
  text-align: left !important;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster #lottie-software { height: 150px !important; margin-bottom: 0.75rem !important; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster h5 { margin: 0 0 0.5rem !important; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: #fff; }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster p { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster a.cta-button {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0.7rem 1.2rem !important;
  border: 1.5px solid #fff;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--bsw-accent) !important;
  font-weight: 600 !important;
}
body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster a.cta-button:hover { background: transparent !important; color: #fff !important; }

/* 9. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--bsw-border); }
  body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0; }
  body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont),
  body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container { max-width: none; }
}
@media (max-width: 575.98px) {
  body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) { font-size: 1rem; line-height: 1.72; }
  body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-img,.bsw-post-img) img { border-radius: 10px; }
  body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h2,
  body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2 { margin-top: 2.25rem; }
  body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta { gap: 0.3rem 1.1rem; font-size: 0.85rem; }
  body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) .content > .cta-widget .cta-button { width: 100%; justify-content: center; }
}

/* 10. ACCESSIBILITY ------------------------------------------------------- */
body.bsw-blog :is(section.blogs,.bsw-blogs) a:focus-visible,
body.bsw-blog :is(section.page-title-section,.bsw-title) a:focus-visible {
  outline: 2px solid var(--bsw-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
body.bsw-blog :is(section.page-title-section,.bsw-title) a:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  body.bsw-blog a.cta-button,
  body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) a,
  body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-answer,
  body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-toggle-icon::before,
  body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-toggle-icon::after { transition: none !important; }
}

/* 11. TEMPLATE COMPATIBILITY HOOKS -----------------------------------------
   Both templates share the same skeleton, so almost nothing is template-
   specific. Hooks are kept (body.bsw-tpl-a / body.bsw-tpl-b) for the rare page
   that needs a one-off fix without touching the shared rules above.
     Template A:  article wrapper has inline text-align:justify  -> handled in §6
     Template B:  none
   -------------------------------------------------------------------------- */


/* ======================= PART 2 — HOMEPAGE-STYLE SKIN ======================= */
/* ==========================================================================
   VARIANT D — "Homepage style"   (layer on top of blog-detail.css)
   Tokens sampled from the live bigsunworld.com homepage screenshot.
   Light header + light title band, indigo accent, spaced uppercase labels,
   heavy near-black headlines, rounded cards, tick-mark lists, numbered sections.
   ========================================================================== */

/* 0. TOKENS (sampled from the homepage) ---------------------------------- */
html body.bsw-blog {
  --bsw-ink: #191a1f;
  --bsw-text: #34363e;
  --bsw-muted: #5b5e66;
  --bsw-border: #e4e5e8;
  --bsw-surface: #fbfcfd;
  --bsw-accent: #5266cd;
  --bsw-accent-strong: #4353b3;
  --bsw-accent-soft: #f1f4fe;
  --bsw-accent-line: #cfd6f3;
  --bsw-ok: #3d7858;
  --bsw-hero-1: #4d60c4;
  --bsw-hero-2: #4353b3;
  --bsw-radius: 12px;
  /* Fonts: set to the families the homepage already loads (headline looks like Plus Jakarta Sans / Manrope,
     body like Source Sans 3 — CONFIRM from homepage CSS). System fallbacks keep the page fast if not loaded. */
  --bsw-font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --bsw-font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* 1. HEADER — white, hairline, like the homepage ---------------------------
   (header markup/JS untouched; logo is swapped visually with the homepage logo asset) */
html body.bsw-blog header.transparent-header {
  position: relative !important;
  background: #fff;
  padding: 0;
  border-bottom: 1px solid var(--bsw-border);
}
html body.bsw-blog header .navbar-brand {
  display: block;
  width: 170px;
  height: 40px;
  margin: 18px 0;
  background: url("/images/bigsun-logo.png") left center / contain no-repeat;
}
html body.bsw-blog header .navbar-brand img { visibility: hidden; width: 100%; height: 100%; }  /* JS still swaps src; just not shown */
html body.bsw-blog header .navbar-nav > li > a {
  color: var(--bsw-ink) !important;
  font-family: var(--bsw-font);
  font-size: 1.0625rem;
  font-weight: 500;
  text-shadow: none;
}
html body.bsw-blog header .navbar-nav > li > a:hover { color: var(--bsw-accent) !important; }
html body.bsw-blog header .navbar-nav > li:last-child > a {          /* "Contact Us" -> primary button */
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: var(--bsw-accent);
  color: #fff !important;
  font-weight: 600;
}
html body.bsw-blog header .navbar-nav > li:last-child > a:hover { background: var(--bsw-accent-strong); }

/* 2. TITLE BAND — light, label + big headline ------------------------------- */
html body.bsw-blog :is(section.page-title-section,.bsw-title) {
  background-image: none !important;
  background-color: var(--bsw-surface);
  padding: clamp(44px, 6vw, 88px) 0 clamp(40px, 5vw, 68px);
  border-bottom: 1px solid var(--bsw-border);
}
html body.bsw-blog :is(section.page-title-section,.bsw-title) .row { gap: 18px; }
html body.bsw-blog :is(section.page-title-section,.bsw-title) .row::before {          /* eyebrow label, like "BUSINESS SOFTWARE BUILT AROUND…" */
  content: "BIGSUN BLOG";
  order: -2;
  font-family: var(--bsw-font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bsw-accent);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);   /* align with the headline (row has negative margins) */
}
html body.bsw-blog :is(section.page-title-section,.bsw-title),
html body.bsw-blog :is(section.blogs,.bsw-blogs) { font-family: var(--bsw-font); }
html body.bsw-blog :is(section.page-title-section,.bsw-title) h1 {
  max-width: 19em;
  color: var(--bsw-ink);
  font-family: var(--bsw-font-head);
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
html body.bsw-blog :is(section.page-title-section,.bsw-title) .row > [class*="col-"]:nth-child(2) { order: 1; }   /* breadcrumb sits under the headline */
html body.bsw-blog :is(section.page-title-section,.bsw-title) ul li,
html body.bsw-blog :is(section.page-title-section,.bsw-title) ul li a { color: var(--bsw-muted); font-size: 0.95rem; }
html body.bsw-blog :is(section.page-title-section,.bsw-title) ul li a:hover { color: var(--bsw-accent); }
html body.bsw-blog :is(section.page-title-section,.bsw-title) ul li + li::before { color: var(--bsw-accent-line); }
html body.bsw-blog :is(section.page-title-section,.bsw-title) a:focus-visible { outline-color: var(--bsw-accent); }

/* 3. FEATURED IMAGE + META --------------------------------------------------- */
html body.bsw-blog :is(section.blogs,.bsw-blogs) { padding-top: clamp(36px, 4.5vw, 64px); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-img,.bsw-post-img) img {
  border-radius: 20px;
  border: 1px solid var(--bsw-border);
  background: var(--bsw-accent-soft);
  box-shadow: 0 24px 56px -30px rgba(82, 102, 205, 0.45);
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta { gap: 0.5rem 1.4rem; align-items: center; font-size: 0.95rem; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta li i { color: var(--bsw-accent); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .post-meta ul.meta li:last-child {      /* category -> pill, moved first */
  order: -1;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--bsw-accent-soft);
  color: var(--bsw-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 4. BUTTONS (primary = filled indigo, secondary = white outline) ---------------- */
html body.bsw-blog a.cta-button {
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--bsw-accent);
  border-radius: 10px;
  background: var(--bsw-accent);
  font-family: var(--bsw-font);
  font-size: 1.0625rem;
  font-weight: 600;
}
html body.bsw-blog a.cta-button:hover,
html body.bsw-blog a.cta-button:focus-visible { background: var(--bsw-accent-strong); border-color: var(--bsw-accent-strong); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) .content > .cta-widget .cta-button {
  background: #fff;
  border-color: #cfd1d7;
  color: var(--bsw-ink);
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) .content > .cta-widget .cta-button:hover { background: #fff; border-color: var(--bsw-accent); color: var(--bsw-accent); }

/* 5. ARTICLE ---------------------------------------------------------------------- */
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) { font-size: 1.125rem; line-height: 1.75; color: var(--bsw-text); counter-reset: bsw; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p { color: var(--bsw-text); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) strong,
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) b { color: var(--bsw-ink); font-weight: 700; }

/* headings: heavy near-black + small numbered indigo label (01, 02 …) */
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h2,
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2,
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3.blg {
  margin: 3.25rem 0 1rem !important;
  font-family: var(--bsw-font-head);
  font-weight: 800;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--bsw-ink);
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) > :first-child { margin-top: 0 !important; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h2:not(.bsw-nonum),
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2:not(.bsw-nonum) { counter-increment: bsw; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h2::before,
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2::before,
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3.blg::before {
  content: counter(bsw, decimal-leading-zero);
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 0.55rem;
  background: none;
  border-radius: 0;
  font-family: var(--bsw-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--bsw-accent);
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h2.bsw-nonum::before { content: none; }       /* already says "Step 1:" */
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3.blg::before { content: "FAQ"; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) h3:not(.blg),
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p.bsw-h3 {
  font-family: var(--bsw-font-head);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* tick-mark lists (like the homepage "✓" lists) */
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) ul { list-style: none; padding-left: 0; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) ul > li { position: relative; padding-left: 2.1rem; margin-bottom: 0.6em; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) ul > li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.28em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--bsw-accent-soft);
  color: var(--bsw-accent);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

/* ranked list rows */
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p:has(> strong:first-child + br) { padding: 1.15rem 0; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) p:has(> strong:first-child + br) > strong { font-family: var(--bsw-font-head); font-weight: 700; color: var(--bsw-ink); }

/* links, quotes, tables */
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) a { color: var(--bsw-accent); text-decoration-color: var(--bsw-accent-line); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) a:hover { color: var(--bsw-accent-strong); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) blockquote {
  padding: 1.2rem 1.5rem;
  border: 0;
  border-radius: 14px;
  background: var(--bsw-accent-soft);
  font-family: var(--bsw-font-head);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table thead th,
html body.bsw-blog :is(section.blogs,.bsw-blogs) :is(.post,.bsw-post) :is(.post-cont,.bsw-post-cont) table tr:first-child th { background: var(--bsw-accent-soft); border-bottom-color: var(--bsw-accent-line); font-family: var(--bsw-font-head); }

/* 6. FAQ — rounded cards with "+" ---------------------------------------------------- */
html body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq {
  margin: 0 0 0.75rem;
  padding: 0 1.4rem;
  border: 1px solid var(--bsw-border);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq:first-child { border-top: 1px solid var(--bsw-border); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq:hover { background: #fff; border-color: var(--bsw-accent-line); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq.active { background: var(--bsw-accent-soft); border-color: var(--bsw-accent-line); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-question { font-family: var(--bsw-font-head); font-weight: 700; font-size: 1.02rem; padding: 1.15rem 2.25rem 1.15rem 0; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .faq-container .faq-toggle-icon { right: 0; }

/* 7. SIDEBAR — one level of rounded white cards ------------------------------------------ */
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget {
  margin: 0 0 1.25rem !important;
  padding: 1.5rem !important;
  border: 1px solid var(--bsw-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 36px -26px rgba(25, 26, 31, 0.28);
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget-title h6 {
  font-family: var(--bsw-font);
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  color: var(--bsw-accent);
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget .Round-Img { width: 76px; height: 76px; border-radius: 14px; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .d-flex h4 { font-family: var(--bsw-font-head); font-weight: 700; letter-spacing: -0.01em; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .d-flex h4 a:hover { color: var(--bsw-accent); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar > .cta-widget { margin: 0 0 1.25rem !important; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar > .cta-widget .cta-button { background: var(--bsw-accent); color: #fff; border-color: var(--bsw-accent); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar > .cta-widget .cta-button:hover { background: var(--bsw-accent-strong); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-widget { padding: 1.5rem 1.5rem 0.9rem !important; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn { padding: 0.7rem 0; font-family: var(--bsw-font-head); font-weight: 600; font-size: 0.95rem; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-right: 0.8rem;
  border-radius: 10px;
  background: var(--bsw-accent-soft);
  font-size: 0.95rem;
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .service-buttons-container .service-btn::after { content: "\2192"; font-size: 1rem; color: var(--bsw-accent); }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .social-icons a:hover { color: var(--bsw-accent); border-color: var(--bsw-accent); }

/* promo panel = the homepage's indigo "Bigsun ERP" card */
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .widget.buy-software-poster {
  padding: 1.75rem !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 85% 0%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(160deg, #5266cd, #4353b3) !important;
  box-shadow: 0 24px 48px -24px rgba(67, 83, 179, 0.7);
}
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster h5 { font-family: var(--bsw-font-head); font-weight: 800; letter-spacing: -0.02em; font-size: 1.25rem; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster a.cta-button { color: var(--bsw-accent) !important; border-color: #fff; }
html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar .buy-software-poster a.cta-button:hover { color: #fff !important; background: transparent !important; }

@media (max-width: 991.98px) {
  html body.bsw-blog header .navbar-brand { margin: 12px 0; }
  html body.bsw-blog :is(section.blogs,.bsw-blogs) .side-bar { border-top: 0; padding-top: 0; }
}


/* ======================= PART 3 — "GET A FREE DEMO" WIDGET =======================
   Replaces the old side-edge slide-in with:
     closed : a small "Book a Demo" pill, bottom-right
     open   : a compact card, bottom-right (desktop)  /  a bottom sheet (phone)
   Same HTML + same scripts (toggleForm, submitDemoForm, reCAPTCHA) — CSS only.            */
html body.bsw-blog .demo-form-wrapper {
  position: fixed;
  top: auto;
  right: 20px;
  bottom: 20px;
  left: auto;
  width: auto;                                   /* Template A ships width:100% for phones — reset */
  max-width: none;
  transform: none;
  z-index: 1000;
}
/* closed state: the pill (the old tab shows a bare "➤" glyph; hide it and draw a labelled pill) */
html body.bsw-blog .demo-form-wrapper .toggle-btn {
  position: static;
  transform: none;
  width: 10.75rem;                               /* fixed width: no shift when the web font swaps in */
  justify-content: center;
  padding: 0.85rem 0;
  border: 0;
  border-radius: 999px;
  background: var(--bsw-accent);
  color: #fff;
  font-size: 0;                                  /* hides the ➤ glyph */
  line-height: 1;
  box-shadow: 0 14px 30px -10px rgba(67, 83, 179, 0.7);
  transition: background-color 0.18s ease, transform 0.18s ease;
}
html body.bsw-blog .demo-form-wrapper .toggle-btn.show { display: inline-flex; align-items: center; gap: 0.4rem; }
html body.bsw-blog .demo-form-wrapper .toggle-btn::before {
  content: "Book a Demo";
  font-family: var(--bsw-font);
  font-size: 1rem;
  font-weight: 600;
}
html body.bsw-blog .demo-form-wrapper .toggle-btn::after { content: "\2192"; font-size: 1rem; }
html body.bsw-blog .demo-form-wrapper .toggle-btn:hover { background: var(--bsw-accent-strong); transform: translateY(-2px); }
html body.bsw-blog .demo-form-wrapper .toggle-btn:focus-visible { outline: 3px solid var(--bsw-accent-line); outline-offset: 3px; }

/* open state: card */
html body.bsw-blog .demo-form-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 372px;
  max-width: calc(100vw - 32px);
  max-height: min(88vh, 720px);
  max-height: min(88dvh, 720px);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 1.4rem;
  border: 1px solid var(--bsw-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px -28px rgba(25, 26, 31, 0.5), 0 2px 8px rgba(25, 26, 31, 0.06);
  font-family: var(--bsw-font);
  margin: 0;
  transform: none;                               /* Template A slides the phone sheet with translateY — reset */
  transition: none;
}
html body.bsw-blog .demo-form-container:not(.hidden) { animation: bsw-demo-pop 0.22s ease-out; }
@keyframes bsw-demo-pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
html body.bsw-blog .demo-form-container h3 {
  margin: 0 2rem 1rem 0;
  font-family: var(--bsw-font-head);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bsw-ink);
}
html body.bsw-blog .demo-form-container h3::before {
  content: "BIGSUN ERP";
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--bsw-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bsw-accent);
}
html body.bsw-blog .demo-form-container .close-btn {
  top: 0.9rem;
  right: 0.9rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: var(--bsw-surface);
  color: var(--bsw-muted);
  font-size: 0.8rem;
  line-height: 2rem;
  text-align: center;
}
html body.bsw-blog .demo-form-container .close-btn:hover { background: var(--bsw-accent-soft); color: var(--bsw-accent); }
html body.bsw-blog .demo-form-container .demo-form input,
html body.bsw-blog .demo-form-container .demo-form textarea {
  display: block;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #cfd1d7;
  border-radius: 10px;
  background: #fff;
  color: var(--bsw-ink);
  font-family: var(--bsw-font);
  font-size: 1rem;                                 /* 16px: stops iOS zooming into the field */
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html body.bsw-blog .demo-form-container .demo-form textarea { min-height: 5.5rem; resize: vertical; }
html body.bsw-blog .demo-form-container .demo-form input::placeholder,
html body.bsw-blog .demo-form-container .demo-form textarea::placeholder { color: #8a8d96; }
html body.bsw-blog .demo-form-container .demo-form input:focus,
html body.bsw-blog .demo-form-container .demo-form textarea:focus { border-color: var(--bsw-accent); box-shadow: 0 0 0 3px var(--bsw-accent-soft); outline: none; }
html body.bsw-blog .demo-form-container .g-recaptcha { min-height: 78px; margin: 0 0 0.9rem; transform-origin: 0 0; }   /* reserves the widget's space: no jump */
html body.bsw-blog .demo-form-container .demo-form button[type="submit"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--bsw-accent);
  color: #fff;
  font-family: var(--bsw-font);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
html body.bsw-blog .demo-form-container .demo-form button[type="submit"]:hover { background: var(--bsw-accent-strong); }
html body.bsw-blog .demo-form-container .form-loader .spinner { border-top-color: var(--bsw-accent); }

/* "Thank you" modal */
html body.bsw-blog .modal { background: rgba(25, 26, 31, 0.55); padding: 1rem; }
html body.bsw-blog .modal .modal-content {
  width: 100%;
  max-width: 420px;
  padding: 2rem 2rem 1.75rem;
  border-radius: 20px;
  box-shadow: 0 30px 70px -28px rgba(25, 26, 31, 0.6);
  font-family: var(--bsw-font);
  text-align: left;
}
html body.bsw-blog .modal .modal-content h2 { margin: 0 0 0.5rem; font-family: var(--bsw-font-head); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bsw-ink); }
html body.bsw-blog .modal .modal-content p { margin: 0; color: var(--bsw-muted); line-height: 1.6; }
html body.bsw-blog .modal .modal-content .close-modal { top: 0.9rem; right: 1rem; color: var(--bsw-muted); font-size: 1rem; }

/* keep the theme's back-to-top button clear of the pill */
html body.bsw-blog .scroll-to-top { bottom: 84px; }

/* phones: bottom sheet instead of a card */
@media (max-width: 767.98px) {
  html body.bsw-blog .demo-form-wrapper { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: auto; width: auto; z-index: 1000; }
  html body.bsw-blog .demo-form-container {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: 84vh;
    max-height: 84dvh;
    padding: 1.25rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px -20px rgba(25, 26, 31, 0.45);
  }
  html body.bsw-blog .demo-form-container:not(.hidden) { animation-name: bsw-demo-sheet; }
  html body.bsw-blog .demo-form-container .demo-form textarea { min-height: 4.25rem; }
  html body.bsw-blog .scroll-to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes bsw-demo-sheet { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 360px) { html body.bsw-blog .demo-form-container .g-recaptcha { transform: scale(0.88); } }
@media (prefers-reduced-motion: reduce) {
  html body.bsw-blog .demo-form-container:not(.hidden) { animation: none; }
  html body.bsw-blog .demo-form-wrapper .toggle-btn { transition: none; }
}