/* BLOG-BUILD: 2026-09-25-v4 */
/* ═══════════════════════════════════════════════════════════
   Cyble Blog Single — Preview B
   All selectors scoped under .cbp-page or :root
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --cbp-red:      #CC0000;
  --cbp-red-h:    #A30000;
  --cbp-red-s:    #FEE7E7;
  --cbp-ink:      #0A0A0A;
  --cbp-t2:       #414651;
  --cbp-t3:       #606060;
  --cbp-t4:       #8B8B8B;
  --cbp-bg:       #ffffff;
  --cbp-bg2:      #F7F7F8;
  --cbp-border:   #E9EAEB;
  --cbp-bsoft:    #D8D9E0;
  --cbp-deep:     linear-gradient(135deg,#000 0%,#2A0000 38%,#6b0808 72%,#8A0101 100%);
  --cy-ctrl-bg:   #fff;
  --cy-ctrl-border: #D8D9E0;

  /* ── Sticky offset ────────────────────────────────────────────────────
     Anything pinned below the site header (the TOC rail, the sidebar, and
     the scroll-margin on anchor targets) has to clear whatever the header
     actually is. It used to be hardcoded, which was already a guess and
     became wrong outright with the hand-coded header: that one stacks a
     40px topbar + 72px nav + 42px ticker = 154px, so a rail pinned at
     100px slid ~54px underneath it.

     assets/js/site-header.js measures the header and publishes the real
     number as --cy-hdr-h (getBoundingClientRect, re-run by a
     ResizeObserver and again after webfonts land). So read that instead
     of guessing, and the value self-corrects if the ticker or the topbar
     is ever switched off.

     The fallback is deliberately 88px, not 100px: the header CSS and JS
     are only enqueued when CYBLE_STATIC_HEADER is on (see
     inc/enqueue.php), so with the switch OFF --cy-hdr-h is never set and
     this resolves to 88 + 12 = 100px -- exactly today's value. That keeps
     the kill switch a true rollback rather than a different-looking page.

     One token, not three. The old values drifted (100 / 88 / 120 for rail,
     heading and subscribe anchor) with no reason behind the differences;
     they now converge, which also means they converge to 100px in the
     rollback state. A <=20px shift on an anchor jump in a state we only
     enter to recover from a problem is a fair trade for one number to
     maintain instead of three. */
  --cbp-stick:    calc(var(--cy-hdr-h, 88px) + 12px);
  --cy-ctrl-text: #0A0A0A;
  --theme-transition: background .3s, color .3s, border-color .3s;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] {
  --cbp-ink:    #EDEDF0;
  --cbp-t2:     #B0B2BA;
  --cbp-t3:     #80828C;
  --cbp-t4:     #5a5c66;
  --cbp-bg:     #0D0D10;
  --cbp-bg2:    #16161A;
  --cbp-border: #2A2A32;
  --cbp-bsoft:  #38383E;
  --cbp-red-s:  rgba(204,0,0,.15);
  --cy-ctrl-bg: #1e1e24;
  --cy-ctrl-border: #38383E;
  --cy-ctrl-text: #EDEDF0;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; max-width: 100%; }
/* Scoped to the template only — must not touch header/footer images */
.cbp-page img { max-width: 100%; height: auto; }
/* Mobile safety net — nothing may exceed the viewport */
@media (max-width: 860px) {
  .cbp-article a, .cbp-article span, .cbp-article .callout,
  .cbp-article iframe, .cbp-article embed, .cbp-article video {
    max-width: 100% !important; box-sizing: border-box !important;
  }
  .cbp-shell { max-width: 100vw !important; }
  /* Plugin-injected elements (callouts, tooltips) that sit outside the article */
  .callout, span.title, .callout * {
    max-width: 100% !important; box-sizing: border-box !important;
    overflow-wrap: break-word !important; white-space: normal !important;
  }
}

body.cbp-page {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--cbp-bg);
  color: var(--cbp-ink);
  -webkit-font-smoothing: antialiased;
  transition: var(--theme-transition);
}
.cbp-page a { color: inherit; text-decoration: none; }
.cbp-page img { max-width: 100%; display: block; }

/* ── Read progress bar ──
   Sits on the header's bottom edge, not across its top. It is position:fixed,
   so top:0 pinned it to the viewport and it drew a red line straight over the
   sticky header. --cy-hdr-h is the measured header height published by
   assets/js/site-header.js, so the bar tracks the header through every
   breakpoint instead of needing a number per layout.

   Fallback is 0px on purpose: with CYBLE_STATIC_HEADER off the variable is
   never set and the bar returns to the top of the viewport, exactly where it
   is today. Rollback stays a one-line change in wp-config.php.

   z-index drops below the header's 900 so an open mega panel covers the bar
   rather than having it painted across the panel's top edge. */
#cbp-prog {
  position: fixed; top: var(--cy-hdr-h, 0px); left: 0; height: 3px; width: 0;
  background: var(--cbp-red); z-index: 899;
  transition: width .08s linear;
}

/* ── Suppress the duplicate progress bar ──
   WPCode snippet 71535 ("Reading Progress Bar") prints its own bar on every
   is_single() view -- #progress-bar-container, position:fixed, top:0,
   z-index:9999 -- which predates this header and draws a second red line
   across the very top of the viewport, above the topbar. It does the same
   job as #cbp-prog above, only in the wrong place and un-aware of the
   header height.

   The real fix is deactivating that snippet in WPCode; this rule only hides
   the element so the duplicate is gone without waiting on a plugin change.
   If the snippet is ever retired this rule simply matches nothing. */
#progress-bar-container { display: none !important; }

/* ── Dark / Light theme toggle button ── */


/* ── Shell ── */
.cbp-wrap { width: 100%; margin: 0; padding: 0; }
.cbp-shell { max-width: 100%; width: 100%; padding: 0 80px; }
@media (max-width: 1024px) { .cbp-shell { max-width: 100%; padding: 0 40px; } }
@media (max-width: 768px) { .cbp-shell { max-width: 100%; padding: 0 20px; } }

/* Override Astra container so our template goes full width */
.cbp-title-band,
.cbp-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
body.single .ast-container,
body.single .content-area,
body.single #primary,
body.single .entry-content,
body.single .ast-article-single { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.single .site-content { padding: 0 !important; }
body.single .ast-separate-container .ast-article-single,
body.single #content .ast-container { max-width: 100% !important; padding: 0 !important; }

/* ══════════════════════════════════════════
   TITLE BAND
══════════════════════════════════════════ */
.cbp-title-band {
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.52) 75%, rgba(0,0,0,.3) 100%),
    linear-gradient(rgba(80,0,0,.3), rgba(80,0,0,.3)),
    #000;
  position: relative; overflow: hidden;
  padding: 48px 0 52px;
}
.cbp-title-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(145deg, transparent 40%, rgba(204,0,0,.07) 60%, transparent 80%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.007) 3px, rgba(255,255,255,.007) 4px);
}
.cbp-tb-gfx {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 65% 50%, #000 30%, transparent 75%);
}
.cbp-tb-rings {
  position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
  width: 520px; height: 520px; pointer-events: none; opacity: .13;
}
.cbp-tb-glow {
  position: absolute; right: 8%; top: 50%; transform: translateY(-50%);
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(204,0,0,.42) 0%, rgba(140,0,0,.18) 40%, transparent 70%);
  filter: blur(72px); pointer-events: none;
}
.cbp-tb-glow2 {
  position: absolute; left: -5%; top: -30%;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,10,60,.32), transparent 68%);
  filter: blur(56px); pointer-events: none;
}
.cbp-tb-inner { position: relative; }

/* Band breadcrumb */
.cbp-tb-crumb {
  display: flex; align-items: center; gap: 8px;
  font: 500 12.5px/1 'Poppins', sans-serif;
  color: rgba(255,255,255,.42); margin-bottom: 24px; flex-wrap: wrap;
}
.cbp-tb-crumb a { color: rgba(255,255,255,.42) !important; transition: color .18s; }
.cbp-tb-crumb a:hover { color: #fff !important; }
.cbp-tb-crumb .sep { color: rgba(255,255,255,.18); }
.cbp-tb-crumb .cur { color: rgba(255,255,255,.75); font-weight: 600;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Band category pills */
.cbp-tb-cats { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.cbp-tb-cats a, .cbp-tb-cats span {
  font: 700 10.5px/1 'Poppins', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(204,0,0,.3); border: 1px solid rgba(204,0,0,.44);
  padding: 7px 13px; border-radius: 6px; transition: background .18s;
}
.cbp-tb-cats span { cursor: default; }

/* Band title */
.cbp-tb-title {
  font: 600 clamp(20px,2.4vw,32px)/1.2 'Poppins', sans-serif;
  letter-spacing: -.025em; margin: 0 0 18px; max-width: 820px; color: #fff;
}

/* Band excerpt */
.cbp-tb-excerpt {
  font: 400 17px/1.65 'Poppins', sans-serif;
  color: rgba(255,255,255,.68); margin: 0 0 26px; max-width: 700px;
}

/* Band meta row */
.cbp-tb-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cbp-tb-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.cbp-tb-meta-info .when { font: 500 13px/1 'Poppins', sans-serif; color: rgba(255,255,255,.72); }
.cbp-tb-reviews {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; margin-left: auto; flex-shrink: 0;
}
.cbp-tb-reviews .cy-g2-right { display: flex; align-items: center; flex-shrink: 0; }
.cbp-tb-reviews #g2-write-a-review-container { max-height: 48px; overflow: hidden; }
.cbp-gps-wrap {
  max-height: 48px; max-width: 180px; overflow: hidden;
  display: flex; align-items: center; flex-shrink: 0;
}
.cbp-gps-wrap img,
.cbp-gps-wrap iframe,
.cbp-gps-wrap > * { max-height: 48px !important; max-width: 180px !important; height: auto !important; }
.cbp-tb-share { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 768px) {
  .cbp-tb-reviews { display: none !important; }
  .cbp-tb-share { margin-left: 0; }
  .cbp-tb-meta { gap: 10px; flex-wrap: wrap; }
  .cbp-tb-meta-info { min-width: 0; flex: 1 1 100%; }
  .cbp-tb-cats { margin-left: 0 !important; }
  .cbp-tb-inner { padding: 32px 0 28px; }
  .cbp-tb-title { font-size: clamp(22px, 5vw, 32px) !important; }
  /* Hide oversized decorative elements causing overflow */
  .cbp-tb-rings { display: none !important; }
  .cbp-tb-glow { width: 200px !important; height: 200px !important; right: -50px !important; }
  .cbp-tb-glow2 { width: 160px !important; height: 160px !important; left: -60px !important; }
  .cbp-title-band { overflow: hidden !important; max-width: 100vw; }
}
/* Mobile reviews below CTA */
.cbp-mobile-reviews { display: none; }
@media (max-width: 768px) {
  .cbp-mobile-reviews {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--cbp-border);
  }
  .cbp-gps-wrap-mobile { max-height: 48px; max-width: 180px; overflow: hidden; display: flex; align-items: center; }
  .cbp-gps-wrap-mobile img,
  .cbp-gps-wrap-mobile iframe,
  .cbp-gps-wrap-mobile > * { max-height: 48px !important; max-width: 180px !important; height: auto !important; }
}
.cbp-tb-share a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); transition: all .2s;
}
.cbp-tb-share a:hover { background: var(--cbp-red); color: #fff; border-color: var(--cbp-red); transform: translateY(-2px); }

/* ══════════════════════════════════════════
   3-COLUMN BODY GRID
══════════════════════════════════════════ */
.cbp-grid {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) 330px;
  gap: 56px;
  padding: 52px 0 80px;
  align-items: start;
}
@media (max-width: 1024px) {
  .cbp-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 40px; }
  .cbp-toc  { display: none; }
}
@media (max-width: 860px) {
  /* minmax(0,1fr) stops grid children from expanding the column */
  .cbp-grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto; gap: 40px; }
  .cbp-grid > * { min-width: 0 !important; max-width: 100% !important; }
  .cbp-article, .cbp-article * { min-width: 0 !important; max-width: 100% !important; overflow-wrap: break-word; word-wrap: break-word; }
  .cbp-article table { display: block; overflow-x: auto; }
  .cbp-toc { display: none !important; grid-row: unset; }
  #cbpMain { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; }
  .cbp-sidebar { grid-column: 1 !important; grid-row: 2 !important; position: static !important; width: 100% !important; min-width: 0 !important; }
  .cbp-demo-mini { display: none !important; }
}

/* ══════════════════════════════════════════
   LEFT: TABLE OF CONTENTS
══════════════════════════════════════════ */
.cbp-toc { position: sticky; top: var(--cbp-stick); }
.cbp-toc-head {
  font: 700 10.5px 'Poppins', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cbp-t4); margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--cbp-border);
}
.cbp-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cbp-toc a {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-radius: 8px;
  font: 500 13px/1.45 'Poppins', sans-serif;
  color: var(--cbp-t2); border-left: 2px solid transparent; transition: all .18s;
}
.cbp-toc a .cbp-tn { font: 600 10.5px 'Poppins', sans-serif; color: var(--cbp-t4); margin-top: 2px; flex-shrink: 0; }
.cbp-toc a:hover { background: var(--cbp-bg2); color: var(--cbp-ink); }
.cbp-toc a.cbp-active {
  background: var(--cbp-red-s); color: var(--cbp-red);
  border-left-color: var(--cbp-red); font-weight: 600;
}
[data-theme="dark"] .cbp-toc a.cbp-active { background: rgba(204,0,0,.15); }
.cbp-toc a.cbp-active .cbp-tn { color: var(--cbp-red); }

.cbp-toc-share {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--cbp-border);
  display: flex; align-items: center; gap: 8px;
}
.cbp-toc-share .share-lbl {
  font: 600 10.5px 'Poppins', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cbp-t4); margin-right: 2px;
}
.cbp-toc-share a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cbp-bg2); border: 1px solid var(--cbp-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cbp-t2); transition: all .2s;
}
.cbp-toc-share a:hover { background: var(--cbp-red); color: #fff; border-color: var(--cbp-red); }

/* ══════════════════════════════════════════
   CENTRE: ARTICLE FEATURED IMAGE
══════════════════════════════════════════ */
.cbp-article-hero {
  border-radius: 14px; overflow: hidden;
  background: var(--cbp-deep);
  position: relative; margin-bottom: 40px;
}
.cbp-article-hero img { width: 100% !important; height: auto !important; display: block; border-radius: 14px; max-width: 100% !important; }
/* Overlay tint when featured image present */
.cbp-article-hero.has-image::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(120,0,0,.18); mix-blend-mode: multiply; pointer-events: none;
}
/* Fallback gradient when no featured image */
.cbp-article-hero.no-image {
  display: flex; align-items: flex-end;
}
.cbp-article-hero.no-image .cbp-hero-inner {
  position: absolute; inset: 0;
}
.cbp-hero-grid-fx {
  position: absolute; inset: 0; opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 20%, transparent 75%);
  pointer-events: none;
}
.cbp-hero-glow {
  position: absolute; right: -80px; top: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(204,0,0,.45), transparent 62%);
  filter: blur(48px); pointer-events: none;
}


/* ══════════════════════════════════════════
   CENTRE: ARTICLE BODY
══════════════════════════════════════════ */
.cbp-article { font: 400 16px/1.82 'Poppins', sans-serif; color: var(--cbp-ink); }

.cbp-article .lead,
.cbp-article .cbp-lead {
  font: 400 18px/1.68 'Poppins', sans-serif; color: var(--cbp-ink); margin: 0 0 28px;
}

/* Headings */
.cbp-article h2,
.cbp-article .entry-content h2 {
  font: 700 22px/1.35 'Poppins', sans-serif; letter-spacing: -.01em;
  margin: 48px 0 16px; scroll-margin-top: var(--cbp-stick);
  position: relative; padding-left: 16px; color: var(--cbp-ink);
}
.cbp-article h2::before,
.cbp-article .entry-content h2::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; background: var(--cbp-red); border-radius: 2px;
}
.cbp-article h3,
.cbp-article .entry-content h3 {
  font: 600 18px/1.4 'Poppins', sans-serif; margin: 32px 0 12px; color: var(--cbp-ink);
}

/* Paragraphs */
.cbp-article p,
.cbp-article .entry-content p { margin: 0 0 20px; color: var(--cbp-t2); }

/* Inline links */
.cbp-article a,
.cbp-article .entry-content a {
  color: var(--cbp-red); font-weight: 600;
  border-bottom: 1px solid rgba(204,0,0,.28); transition: border-color .18s;
}
.cbp-article a:hover,
.cbp-article .entry-content a:hover { border-bottom-color: var(--cbp-red); }

/* Bullet lists */
.cbp-article ul,
.cbp-article .entry-content ul {
  margin: 0 0 24px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 14px;
}
.cbp-article ul li,
.cbp-article .entry-content ul li {
  position: relative; padding-left: 32px; color: var(--cbp-t2);
}
.cbp-article ul li::before,
.cbp-article .entry-content ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 18px; height: 18px; border-radius: 5px; background: var(--cbp-red-s);
}
[data-theme="dark"] .cbp-article ul li::before,
[data-theme="dark"] .cbp-article .entry-content ul li::before { background: rgba(204,0,0,.2); }
.cbp-article ul li::after,
.cbp-article .entry-content ul li::after {
  content: ""; position: absolute; left: 6px; top: 14px;
  width: 6px; height: 6px; border-radius: 2px; background: var(--cbp-red);
}

/* Blockquote */
.cbp-article blockquote,
.cbp-article .entry-content blockquote {
  background: var(--cbp-deep); color: #fff;
  border-radius: 14px; padding: 26px 28px; margin: 36px 0;
  font: 400 17px/1.62 'Poppins', sans-serif;
  border: 0; position: relative; overflow: hidden;
}
.cbp-article blockquote::before,
.cbp-article .entry-content blockquote::before {
  content: "\201C"; position: absolute; top: -14px; left: 18px;
  font: 800 90px 'Poppins', sans-serif; color: rgba(255,255,255,.14); line-height: 1;
}
.cbp-article blockquote p,
.cbp-article .entry-content blockquote p {
  position: relative; color: rgba(255,255,255,.92); margin: 0; padding-left: 16px;
}

/* Images inside content */
.cbp-article img,
.cbp-article .entry-content img { border-radius: 10px; margin: 24px 0; }

/* Inline code */
.cbp-article code,
.cbp-article .entry-content code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13.5px; background: var(--cbp-bg2);
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--cbp-border); color: var(--cbp-red);
}

/* ══════════════════════════════════════════
   CTA CAROUSEL
══════════════════════════════════════════ */
.cbp-cta-carousel {
  margin-top: 48px; position: relative;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.48);
}
.cbp-cta-track {
  display: flex; flex-wrap: nowrap;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.cbp-cta-card {
  flex: 0 0 100%; width: 100%; min-width: 100%;
  min-height: 200px; position: relative; color: #fff;
  display: flex; align-items: center; overflow: hidden;
}
.cbp-cta-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.cbp-cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,4,10,1) 0%, rgba(4,4,10,1) 40%, rgba(4,4,10,.8) 60%, rgba(4,4,10,.2) 100%);
}
.cbp-cta-card:nth-child(2) .cbp-cta-overlay {
  background: linear-gradient(90deg, rgba(4,4,10,1) 0%, rgba(4,4,10,1) 45%, rgba(4,4,10,.88) 65%, rgba(4,4,10,.55) 100%);
}
.cbp-cta-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 3;
  background: linear-gradient(180deg, transparent, var(--cbp-red) 30%, var(--cbp-red) 70%, transparent);
}
.cbp-cc-content {
  position: relative; z-index: 2;
  padding: 28px 40px; flex: 1; min-width: 0; max-width: 640px;
  display: flex; flex-direction: column; justify-content: center;
}
.cbp-cc-ey { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.cbp-cc-ey .logo { font: 800 12px 'Poppins', sans-serif; letter-spacing: .08em; color: #fff; }
.cbp-cc-ey .badge {
  font: 700 9px 'Poppins', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); padding: 3px 9px; border-radius: 4px;
}
.cbp-cc-content h3 {
  font: 800 clamp(18px,2.1vw,24px)/1.2 'Poppins', sans-serif;
  letter-spacing: -.02em; margin: 0 0 8px; color: #fff;
}
.cbp-cc-content h3 .r { color: var(--cbp-red); }
.cbp-cc-desc {
  font: 400 13px/1.58 'Poppins', sans-serif;
  color: rgba(255,255,255,.5); margin: 0 0 20px; max-width: 520px;
}
.cbp-cc-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cbp-cc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cbp-red); color: #fff;
  font: 700 13px 'Poppins', sans-serif;
  padding: 11px 24px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(204,0,0,.48);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.cbp-cc-btn:hover { background: #ffffff !important; color: #CC0000 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 32px rgba(0,0,0,.3) !important; border-bottom: 0 !important; }

/* ══════════════════════════════════════════
   TAGS
══════════════════════════════════════════ */
.cbp-tags { display: flex; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.cbp-tags a, .cbp-tags span {
  font: 600 11px 'Poppins', sans-serif; color: var(--cbp-t3);
  background: var(--cbp-bg2); border: 1px solid var(--cbp-border);
  padding: 7px 12px; border-radius: 6px; transition: all .18s;
}
.cbp-tags a:hover, .cbp-tags span:hover {
  border-color: var(--cbp-red); color: var(--cbp-red); background: var(--cbp-red-s);
}

/* ══════════════════════════════════════════
   RIGHT: SIDEBAR
══════════════════════════════════════════ */
.cbp-sidebar { position: sticky; top: var(--cbp-stick); display: flex; flex-direction: column; gap: 18px; }

/* Subscribe card */
#cbp-subscribe { scroll-margin-top: var(--cbp-stick); }
.cbp-sub-card {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--cbp-border);
  background: var(--cbp-bg);
  box-shadow: 0 12px 32px rgba(15,23,42,.07);
}
[data-theme="dark"] .cbp-sub-card { box-shadow: 0 12px 32px rgba(0,0,0,.24); }

.cbp-sub-card .cyble-form-wrap { padding: 0; }
.cbp-sub-card .cy-card { border: 0 !important; border-radius: 16px !important; box-shadow: none !important; }
.cbp-sub-card .cy-card__head { padding: 24px 24px 8px !important; }
.cbp-sub-card .cy-card__body { padding: 12px 24px 24px !important; }

/* Form internals */
.cy-eyebrow {
  font: 700 10px 'Poppins', sans-serif !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: var(--cbp-red) !important; margin-bottom: 6px !important;
}
.cy-title { font: 700 18px/1.25 'Poppins', sans-serif !important; color: var(--cbp-ink) !important; margin-bottom: 6px !important; }
html[data-theme="dark"] .cy-title { color: #EDEDF0 !important; }
html[data-theme="dark"] .cbp-sub-card h1, html[data-theme="dark"] .cbp-sub-card h2 { color: #EDEDF0 !important; }

/* Subscribe card full dark mode */
html[data-theme="dark"] .cbp-sub-card,
html[data-theme="dark"] .cbp-sub-card .cy-card,
html[data-theme="dark"] .cbp-sub-card .cyble-form-wrap { background: #16161A !important; border-color: #2A2A32 !important; }
html[data-theme="dark"] .cbp-sub-card .cy-card__head { background: #16161A !important; }
html[data-theme="dark"] .cbp-sub-card .cy-card__body { background: #16161A !important; }
html[data-theme="dark"] .cy-eyebrow { color: var(--cbp-red) !important; }
html[data-theme="dark"] .cy-sub { color: #80828C !important; }
html[data-theme="dark"] .cy-field label { color: #B0B2BA !important; }
html[data-theme="dark"] .cy-check .ct { color: #B0B2BA !important; }
html[data-theme="dark"] .cy-assure { color: #5a5c66 !important; }
html[data-theme="dark"] .cy-control { background: #1e1e24 !important; border-color: #38383E !important; color: #EDEDF0 !important; }
html[data-theme="dark"] .cy-check .box { background: #1e1e24 !important; border-color: #38383E !important; }
[data-theme="dark"] .cbp-sub-card { background: #16161A !important; border-color: #2A2A32 !important; }
[data-theme="dark"] .cy-control { background: #1e1e24 !important; border-color: #38383E !important; color: #EDEDF0 !important; }
[data-theme="dark"] .cbp-sub-card .cy-card { background: #16161A !important; }
[data-theme="dark"] .cbp-toc a { color: #B0B2BA !important; }
[data-theme="dark"] .cbp-toc-head { color: #5a5c66 !important; border-color: #2A2A32 !important; }
[data-theme="dark"] .cbp-tn { color: #5a5c66 !important; }

/* ── Force all headings to be visible in dark mode (overrides Astra hardcoded styles) ── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .cbp-article h1,
[data-theme="dark"] .cbp-article h2,
[data-theme="dark"] .cbp-article h3,
[data-theme="dark"] .cbp-article h4,
[data-theme="dark"] .cbp-article .entry-content h1,
[data-theme="dark"] .cbp-article .entry-content h2,
[data-theme="dark"] .cbp-article .entry-content h3,
[data-theme="dark"] .entry-title,
[data-theme="dark"] .cy-title,
[data-theme="dark"] p,
[data-theme="dark"] .cbp-article p,
[data-theme="dark"] .cbp-article .entry-content p,
[data-theme="dark"] body,
[data-theme="dark"] .cbp-page { color: var(--cbp-ink) !important; }

/* Keep title band text always white regardless of theme */
[data-theme="dark"] .cbp-title-band h1,
[data-theme="dark"] .cbp-title-band p,
[data-theme="dark"] .cbp-tb-title,
[data-theme="dark"] .cbp-tb-excerpt { color: #fff !important; }

/* Keep article link colour in dark mode */
[data-theme="dark"] .cbp-article a,
[data-theme="dark"] .cbp-article .entry-content a { color: var(--cbp-red) !important; }

/* Keep blockquote text white in dark mode */
[data-theme="dark"] .cbp-article blockquote p,
[data-theme="dark"] .cbp-article .entry-content blockquote p { color: rgba(255,255,255,.92) !important; }
[data-theme="dark"] .cy-sub { color: #80828C !important; }
[data-theme="dark"] .cy-field label { color: #B0B2BA !important; }
[data-theme="dark"] .cy-check .ct { color: #B0B2BA !important; }
.cy-sub { font: 400 13px/1.5 'Poppins', sans-serif !important; color: var(--cbp-t3) !important; }
.cy-field { margin-bottom: 12px; }
.cy-field label { display: block; font: 600 12px 'Poppins', sans-serif; color: var(--cbp-t2); margin-bottom: 6px; }
.cy-req { color: var(--cbp-red); }
.cy-input-icon { position: relative; }
.cy-input-icon .ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--cbp-t4); pointer-events: none;
}
.cy-control {
  width: 100%; height: 44px; border: 1px solid var(--cy-ctrl-border);
  border-radius: 8px; padding: 0 14px 0 36px;
  font: 15px 'Poppins', sans-serif; outline: none;
  background: var(--cy-ctrl-bg); color: var(--cy-ctrl-text);
  transition: all .2s;
}
.cy-control:focus { border-color: var(--cbp-red); box-shadow: 0 0 0 3px rgba(204,0,0,.1); }
.cy-privacy { margin-top: 4px; }
.cy-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cy-check input[type=checkbox] { display: none; }
.cy-check .box {
  width: 17px; height: 17px; min-width: 17px; border: 1.5px solid var(--cbp-bsoft);
  border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--cy-ctrl-bg); transition: all .18s; color: #fff;
}
.cy-check input:checked ~ .box { background: var(--cbp-red); border-color: var(--cbp-red); }
.cy-check .ct { font: 400 12px/1.45 'Poppins', sans-serif; color: var(--cbp-t2); }
/* Scoped to #cbp-subscribe, and it has to stay scoped.
   The header's "Get Demo" button is also .cy-btn .cy-btn-primary. Bare
   .cy-btn-primary has the same specificity as .cy-btn, single-post.css is
   enqueued after site-header.css, so the later rule won the tie and the
   subscribe form's styling (9px radius, width:100%, height:46px, border:0)
   leaked onto the header button on every blog post -- which is why Get Demo
   and Login stopped matching. knowledge-hub.css already scoped its copy to
   #kh-subscribe; this one was missed. */
#cbp-subscribe .cy-actions { padding: 0; }
#cbp-subscribe .cy-btn-primary {
  width: 100%; height: 46px; background: var(--cbp-red); color: #fff;
  border: 0; border-radius: 9px; font: 700 14px 'Poppins', sans-serif;
  cursor: pointer; transition: background .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px;
}
#cbp-subscribe .cy-btn-primary:hover { background: var(--cbp-red-h); }
.cy-assure {
  display: flex; align-items: center; gap: 7px;
  font: 500 11.5px 'Poppins', sans-serif; color: var(--cbp-t3); justify-content: center;
}
.cy-assure svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--cbp-t4); }

/* Demo mini card */
.cbp-demo-mini {
  border-radius: 16px;
  background: linear-gradient(145deg,#0A0A0D 0%,#1a0000 50%,#2d0000 100%);
  color: #fff; padding: 0; position: relative; overflow: hidden;
  border: 1px solid rgba(204,0,0,.2);
}
.cbp-demo-mini .cbp-gfx {
  position: absolute; inset: 0; opacity: .16;
  background-image: linear-gradient(rgba(204,0,0,.3) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(204,0,0,.3) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
}
.cbp-demo-mini .cbp-glow2 {
  position: absolute; bottom: -40px; right: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(204,0,0,.35), transparent 65%);
  filter: blur(24px); pointer-events: none;
}
.cbp-demo-mini .cbp-c { position: relative; padding: 22px 22px 20px; }
.cbp-dm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cbp-dm-head .cbp-ic {
  width: 40px; height: 40px; border-radius: 10px; background: var(--cbp-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 0 16px rgba(204,0,0,.55);
}
.cbp-dm-head-lbl { display: flex; flex-direction: column; gap: 2px; }
.cbp-dm-eyebrow { font: 700 9px 'Poppins', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(204,0,0,.85); }
.cbp-demo-mini h4 { font: 700 15px/1.2 'Poppins', sans-serif; margin: 0; color: #fff; }
.cbp-dm-stats {
  display: flex; flex-direction: column; gap: 0; margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 10px; overflow: hidden;
}
.cbp-dm-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cbp-dm-stat:last-child { border-bottom: 0; }
.cbp-dm-stat .lbl { font: 500 11px 'Poppins', sans-serif; color: rgba(255,255,255,.45); letter-spacing: .02em; }
.cbp-dm-stat .val { font: 800 16px/1 'Poppins', sans-serif; color: #fff; letter-spacing: -.02em; }
.cbp-dm-stat .stars { display: flex; gap: 2px; margin-top: 2px; }
.cbp-dm-stat .stars svg { width: 10px; height: 10px; fill: var(--cbp-red); }
.cbp-dm-stat .val-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cbp-demo-mini a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cbp-red); color: #fff;
  font: 700 13px 'Poppins', sans-serif; height: 42px; border-radius: 9px;
  transition: background .2s, transform .2s;
}
.cbp-demo-mini a:hover { background: #fff !important; color: var(--cbp-red) !important; transform: translateY(-1px); border-bottom: 0 !important; }


/* ══════════════════════════════════════════
   PREV / NEXT NAVIGATION
══════════════════════════════════════════ */
.cbp-prevnext {
  width: 100%; margin: 0 auto; padding: 0 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 60px;
}
@media (max-width: 1024px) { .cbp-prevnext { padding: 0 40px; } }
@media (max-width: 768px) { .cbp-prevnext { grid-template-columns: 1fr; padding: 0 20px; } }

.cbp-pn-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--cbp-bg); border: 1px solid var(--cbp-border);
  border-radius: 14px; padding: 20px 24px;
  transition: border-color .2s, transform .2s;
  text-decoration: none; color: inherit;
}
.cbp-pn-card:hover { border-color: var(--cbp-red); transform: translateY(-2px); }
.cbp-pn-card.next { flex-direction: row-reverse; text-align: right; }
.cbp-pn-arrow {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--cbp-bg2); border: 1px solid var(--cbp-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cbp-t3); transition: all .2s;
}
.cbp-pn-card:hover .cbp-pn-arrow { background: var(--cbp-red); border-color: var(--cbp-red); color: #fff; }
.cbp-pn-label { font: 600 10px/1 'Poppins', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cbp-t4); margin-bottom: 6px; }
.cbp-pn-title { font: 600 14px/1.4 'Poppins', sans-serif; color: var(--cbp-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ══════════════════════════════════════════
   RECENT POSTS GRID
══════════════════════════════════════════ */
.cbp-recent {
  width: 100%; margin: 56px auto 80px; padding: 0 80px;
}
@media (max-width: 1024px) { .cbp-recent { padding: 0 40px; } }
@media (max-width: 768px) { .cbp-recent { padding: 0 20px; margin: 40px auto 60px; } }

.cbp-recent-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 16px;
  border-bottom: 1px solid var(--cbp-border);
}
.cbp-recent-head h3 {
  font: 700 18px/1 'Poppins', sans-serif; color: var(--cbp-ink);
  display: flex; align-items: center; gap: 10px;
}
.cbp-recent-head h3::before {
  content: ""; width: 3px; height: 18px;
  background: var(--cbp-red); border-radius: 2px; display: inline-block;
}
.cbp-recent-head a {
  font: 600 12px 'Poppins', sans-serif; color: var(--cbp-red);
  display: flex; align-items: center; gap: 5px;
  border-bottom: 0 !important;
}
.cbp-recent-head a:hover { color: var(--cbp-red-h); }

.cbp-recent-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .cbp-recent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .cbp-recent-grid { grid-template-columns: 1fr; } }

.cbp-rc {
  background: var(--cbp-bg); border: 1px solid var(--cbp-border);
  border-radius: 14px; overflow: hidden;
  transition: border-color .2s, transform .2s;
  display: flex; flex-direction: column;
}
.cbp-rc:hover { border-color: var(--cbp-red); transform: translateY(-3px); }

.cbp-rc-img {
  overflow: hidden; max-height: 220px;
  background: var(--cbp-deep); position: relative; flex-shrink: 0;
}
.cbp-rc-img img { width: 100%; height: auto; display: block; transition: transform .4s; }
.cbp-rc:hover .cbp-rc-img img { transform: scale(1.04); }
.cbp-rc-img-fallback {
  width: 100%; height: 100%;
  background: var(--cbp-deep);
  display: flex; align-items: center; justify-content: center;
}
.cbp-rc-img-fallback svg { opacity: .25; }

.cbp-rc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.cbp-rc-cat {
  font: 700 9.5px/1 'Poppins', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cbp-red); background: var(--cbp-red-s);
  padding: 5px 10px; border-radius: 5px; display: inline-block;
  margin-bottom: 12px; align-self: flex-start;
}
.cbp-rc-title {
  font: 600 15px/1.45 'Poppins', sans-serif; color: var(--cbp-ink);
  margin-bottom: 14px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cbp-rc-title:hover { color: var(--cbp-red); }
.cbp-rc-meta {
  font: 500 11px/1 'Poppins', sans-serif; color: var(--cbp-t4);
  display: flex; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--cbp-border);
}
.cbp-rc-meta .sep { color: var(--cbp-border); }

/* ── Copy-link toast ── */
#cbp-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: #0A0A0D; color: #fff; font: 600 13px 'Poppins', sans-serif;
  padding: 11px 22px; border-radius: 10px; z-index: 9999;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
#cbp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
* { box-sizing: border-box; }

/* ══ MOBILE OVERFLOW + LAYOUT FIXES ══ */
@media (max-width: 860px) {
  /* 0. Hero side padding — must not be flattened by the overflow rules */
  .cbp-title-band .cbp-shell,
  .cbp-tb-inner { padding-left: 20px !important; padding-right: 20px !important; }
  .cbp-shell { padding-left: 20px !important; padding-right: 20px !important; }
  /* 1. Article text cropping — hard-constrain the column and everything in it */
  .cbp-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cbp-grid > * { min-width: 0 !important; max-width: 100% !important; }
  .cbp-article { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
  .cbp-article * { max-width: 100% !important; overflow-wrap: break-word !important; word-break: break-word !important; }

  /* 2. CTA carousel cropping — card must match the track, not overflow it */
  .cbp-cta-carousel { max-width: 100% !important; overflow: hidden !important; }
  .cbp-cta-track { max-width: 100% !important; }
  .cbp-cta-card { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; }
  .cbp-cta-card .cbp-cc-content, .cbp-cta-card .kh-cc-content { max-width: 100% !important; padding: 22px 20px !important; }

  /* 3. FAQ block — remove the default list indent */
  .cbp-article .saswp-faq-block-section ol,
  .cbp-article .saswp-faq-block-section ul,
  .cbp-article ol.saswp-faq-block-section,
  .cbp-article ul.saswp-faq-block-section {
    padding-left: 0 !important; margin-left: 0 !important; list-style: none !important;
  }
  .cbp-article .saswp-faq-block-section li { margin-left: 0 !important; padding-left: 0 !important; list-style: none !important; }
  .cbp-article .saswp-faq-question-title,
  .cbp-article .saswp-faq-answer-text { margin-left: 0 !important; padding-left: 0 !important; }

  /* 4. Tables and code scroll internally rather than breaking the page */
  .cbp-article table { display: block; overflow-x: auto; }
  .cbp-article pre { overflow-x: auto; }
}

/* ══ FAQ block — remove default list indent (all screen sizes) ══ */
.cbp-article .saswp-faq-block-section,
.cbp-article ol.saswp-faq-block-section,
.cbp-article ul.saswp-faq-block-section {
  padding-left: 0 !important; margin-left: 0 !important; list-style: none !important;
}
.cbp-article .saswp-faq-block-section li,
.cbp-article .saswp-faq-block-section > li {
  padding-left: 0 !important; margin-left: 0 !important; list-style: none !important;
}
.cbp-article .saswp-faq-block-section li::marker { content: none !important; }
.cbp-article .saswp-faq-question-title,
.cbp-article .saswp-faq-answer-text { padding-left: 0 !important; margin-left: 0 !important; }

/* ══ Subscribe consent — identical in blog and KH ══ */
.cyb-consent { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 2px 0 0 !important; box-shadow: none !important; }
.cyb-consent-row {
  display: flex !important; flex-direction: row !important; align-items: flex-start !important;
  gap: 10px !important; cursor: pointer !important;
  border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important;
}
.cyb-consent-input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
.cyb-consent-box {
  width: 18px !important; height: 18px !important; min-width: 18px !important; flex-shrink: 0 !important;
  margin-top: 1px !important;
  border: 1.5px solid #D8D9E0 !important; border-radius: 4px !important; background: #fff !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: transparent !important; transition: background .15s, border-color .15s, color .15s;
}
.cyb-consent-box svg { width: 11px !important; height: 11px !important; }
.cyb-consent-input:checked ~ .cyb-consent-box { background: #CC0000 !important; border-color: #CC0000 !important; color: #fff !important; }
.cyb-consent-input:focus-visible ~ .cyb-consent-box { outline: 2px solid #CC0000; outline-offset: 2px; }
.cyb-consent-text {
  font: 400 12px/1.45 'Poppins', sans-serif !important; color: #414651 !important;
  white-space: normal !important; display: block !important;
}
.cyb-consent-note {
  font: 400 10.5px/1.45 'Poppins', sans-serif !important; color: #9A9AA2 !important;
  margin: 6px 0 0 0 !important; padding: 0 !important;
}
.cyb-consent-note a { color: #CC0000 !important; font-weight: 600 !important; text-decoration: none; border-bottom: 1px solid rgba(204,0,0,.3); }
.cyb-consent-note a:hover { border-bottom-color: #CC0000; }
.cyb-consent-err { display: none; color: #d92d20; font: 600 12px/1.4 'Poppins', sans-serif; margin: 8px 0 0 0; }

/* ══ Mobile: subscribe form must stay in the flow so #subscribe anchors work ══ */
@media (max-width: 860px) {
  #cbpMain { grid-row: 1 !important; }
  .cbp-sidebar { display: flex !important; grid-row: 2 !important; position: static !important; width: 100% !important; }
  .cbp-sidebar .cbp-sub-card { width: 100% !important; }
}