/* ---------- 1. cg-lock.css : CrownGlobe theme core ---------- */
/* ==========================================================================
   CROWNGLOBE DESIGN LOCK - THEME CORE  v1.0
   --------------------------------------------------------------------------
   This file reproduces every rule from the live crownglobe.com theme
   (wp-content/themes/crown-globe) that a blog article depends on, with ZERO
   external dependencies. No fonts to fetch, no Bootstrap, no images, no CDN.

   WHEN TO LOAD IT
   ---------------
   OFF crownglobe.com  (another AI, a staging site, a local file, a client
                        preview, any other CMS):
                        <link href="cg-lock.css">   <-- this file, FIRST
                        <link href="cg-blog.css">   <-- modules, SECOND

   ON crownglobe.com   DO NOT LOAD THIS FILE. The live theme already provides
                        everything here and loading both will cause conflicts.
                        Load only cg-blog.css, after the theme stylesheet.

   Every value below is copied from the live theme. Do not edit them. If the
   live theme changes, re-derive this file - never adjust it by eye.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS - the single source of truth
   -------------------------------------------------------------------------- */
:root {
  /* The live theme declares --inter: "Inter" with no fallback, because it
     loads Inter from Google Fonts. Off-site that font may not be present,
     so the lock carries a fallback stack on the token itself. Metrics are
     unaffected; only the glyphs differ if Inter is unavailable. */
  --inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cg-container: 1620px;

  /* brand */
  --blue: #1e88e5;
  --black: #111111;
  --dark: #1a1a1a;
  --grey: #555555;
  --white: #ffffff;

  /* surfaces */
  --lightblue: #e5f1fc;
  --light-blue-bg: #f8fcff;
  --blue-card-bg: #eff6ff;
  --blue-ring-color: #cee9ff;
  --tab-bg-color: #fffffa;

  /* accents - cycled in this exact order via :nth-child(6n+N) */
  --green-light: #17ad87;
  --yellow: #f2c200;
  --orange: #bc4923;
  --purple: #b007ed;
  --cyan-light: #00cfd9;
  --pink: #E51EB3;

  /* lines */
  --border-color: #dfdfdf;
  --light-grey-border-color: #e1e1e1;
  --border-card-color: #dedede;

  /* elevation */
  --blue-btn-shadow:
    0 12.292px 18.438px -3.688px rgba(30, 136, 229, .25),
    0 4.917px 7.375px -4.917px rgba(30, 136, 229, .25);

  /* type scale */
  --font-54: 54px; --font-52: 52px; --font-46: 46px; --font-44: 44px;
  --font-36: 36px; --font-32: 32px; --font-30: 30px; --font-26: 26px;
  --font-24: 24px; --font-22: 22px; --font-20: 20px; --font-18: 18px;
  --font-16: 16px; --font-14: 14px;
}

/* --------------------------------------------------------------------------
   2. FONT
   The live site loads Inter from Google Fonts. This file does NOT fetch it,
   so that the lock works offline and inside sandboxed previews. If Inter is
   not installed locally the stack below degrades to the closest system face
   and every metric in this file still holds.

   To match the live site exactly, add ONE line to your <head>:
   
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. RESET - exactly what the theme resets, nothing more
   -------------------------------------------------------------------------- */
* { padding: 0; margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  width: 100%;
  font-family: var(--inter);
  background: var(--white);
  /* Bootstrap Reboot sets this on crownglobe.com and several components
     inherit it (table cells, list items, footer text). v6.2 fidelity fix. */
  color: #212529;
  /* crownglobe.com loads Bootstrap 5 site-wide, so every element inherits
     Reboot's body line-height of 1.5 unless a rule overrides it. Several
     components (hero chips, sidebar text, table cells) depend on it. These
     three lines reproduce the inherited baseline. Without them the design
     is subtly tighter than the live site. */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Bootstrap Reboot gives every heading line-height 1.2 and the theme only
   overrides it for h1, h2 and h3. h4/h5/h6 therefore inherit 1.2 on the live
   site - without this line they would inherit body's 1.5 and every sidebar
   card and card heading would sit ~7px taller than the real thing. */
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; }
p, ul { margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* crownglobe.com carries no global image reset - the theme sizes every
   image per component - so this is scoped to the article, where the blog
   modules rely on it, and cannot reach the site header or footer. */
.blog-detail-grid img, .blog-article-body img, .article-banner { max-width: 100%; height: auto; }
section[id], div[id], h2[id], h3[id] { scroll-margin-top: 130px; }

/* --------------------------------------------------------------------------
   4. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1 {
  color: var(--black); font-family: var(--inter);
  font-size: var(--font-54); font-weight: 800;
  line-height: 136%; text-transform: capitalize;
}
h1 span { color: var(--blue); }
h2 {
  color: var(--black); font-family: var(--inter); text-align: center;
  font-size: var(--font-36); font-weight: 800; line-height: 122%;
}
h3 {
  color: var(--black); font-family: var(--inter);
  font-size: var(--font-26); font-weight: 600;
  line-height: 140%; text-transform: capitalize;
}
p {
  color: var(--grey); font-family: var(--inter);
  font-size: var(--font-20); font-weight: 400; line-height: 134%;
}
p b { color: var(--black); font-weight: 700; }

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.cg-container { width: 100%; max-width: var(--cg-container); margin: 0 auto; }
.py-80 { padding: 80px 0; }
.pt-80 { padding-top: 80px; }
.pb-80 { padding-bottom: 80px; }

/* Utility classes the markup uses. Bootstrap declares every one of these with
   !important, and that matters: .mb-4 must beat .hero-meta-wrapper's own
   margin-bottom the way it does on the live site. Reproduce them exactly. */
.text-center { text-align: center !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.w-100 { width: 100% !important; }
.justify-content-center { justify-content: center !important; }

/* Bootstrap Reboot's form-element normalisation. Without it a <button> falls
   back to the browser's own font and metrics, and the sidebar print button
   sits at a different height from the live site. */
button, input, optgroup, select, textarea {
  margin: 0; font-family: inherit; font-size: inherit; line-height: inherit;
}
button { border-radius: 0; text-transform: none; cursor: pointer; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/* --------------------------------------------------------------------------
   6. HERO BAND
   The live theme paints this with an SVG. The gradient below is the
   equivalent flat rendering and is what you get off-site.
   -------------------------------------------------------------------------- */
/* The live theme paints this band with common-bg-gradiant.svg. That exact SVG
   is inlined below as a data URI, so the hero is pixel-identical off-site with
   no image to host and no request to make. */
.common-bg-gradient {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg4NiIgaGVpZ2h0PSIxMjY3IiB2aWV3Qm94PSIwIDAgMTg4NiAxMjY3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTAxOF8xMTM2OCkiPgo8cmVjdCB3aWR0aD0iMTg4NiIgaGVpZ2h0PSIxMjY2LjgyIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTAxOF8xMTM2OCkiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAxXzEwMThfMTEzNjgpIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZl8xMDE4XzExMzY4KSI+CjxwYXRoIGQ9Ik0xNjk4Ljc4IC0yNDEuOTE5QzE4MDIuMzkgLTMxNS4zMjMgMTk0NS44OCAtMjkwLjgzNiAyMDE5LjI5IC0xODcuMjI1Vi0xODcuMjI1QzIwOTIuNjkgLTgzLjYxNTEgMjA2OC4yIDU5Ljg4MjcgMTk2NC41OSAxMzMuMjg2VjEzMy4yODZDMTg2MC45OCAyMDYuNjkgMTcxNy40OCAxODIuMjAyIDE2NDQuMDggNzguNTkyMVY3OC41OTIxQzE1NzAuNjggLTI1LjAxODEgMTU5NS4xNiAtMTY4LjUxNiAxNjk4Ljc4IC0yNDEuOTE5Vi0yNDEuOTE5WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzEwMThfMTEzNjgpIiBmaWxsLW9wYWNpdHk9IjAuNiIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIxX2ZfMTAxOF8xMTM2OCkiPgo8cGF0aCBkPSJNMTMxMC4yMSAxMzA2LjdDMTI2OS4yMiAxMjMwLjQxIDEyOTcuODMgMTEzNS4zMyAxMzc0LjEyIDEwOTQuMzNWMTA5NC4zM0MxNDUwLjQxIDEwNTMuMzQgMTU0NS40OSAxMDgxLjk1IDE1ODYuNDkgMTE1OC4yNFYxMTU4LjI0QzE2MjcuNDkgMTIzNC41MyAxNTk4Ljg4IDEzMjkuNjEgMTUyMi41OCAxMzcwLjYxVjEzNzAuNjFDMTQ0Ni4yOSAxNDExLjYxIDEzNTEuMjEgMTM4Mi45OSAxMzEwLjIxIDEzMDYuN1YxMzA2LjdaIiBmaWxsPSJ1cmwoI3BhaW50Ml9saW5lYXJfMTAxOF8xMTM2OCkiIGZpbGwtb3BhY2l0eT0iMC43NCIvPgo8L2c+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIyX2ZfMTAxOF8xMTM2OCkiPgo8cGF0aCBkPSJNMjA4My4xMSA4NTAuOTE0QzIwNDcuNSA3ODQuNjYyIDIwNzIuMzUgNzAyLjA5NCAyMTM4LjYgNjY2LjQ5MVY2NjYuNDkxQzIyMDQuODUgNjMwLjg4OSAyMjg3LjQyIDY1NS43MzUgMjMyMy4wMiA3MjEuOTg2VjcyMS45ODZDMjM1OC42MyA3ODguMjM4IDIzMzMuNzggODcwLjgwNiAyMjY3LjUzIDkwNi40MDlWOTA2LjQwOUMyMjAxLjI4IDk0Mi4wMTEgMjExOC43MSA5MTcuMTY1IDIwODMuMTEgODUwLjkxNFY4NTAuOTE0WiIgZmlsbD0iI0ZGRkFCNiIgZmlsbC1vcGFjaXR5PSIwLjE1Ii8+CjwvZz4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl8xMDE4XzExMzY4KSI+CjxwYXRoIGQ9Ik0tNDYuODExMSAzMDcuMzc3Qy04Mi40MTM0IDI0MS4xMjUgLTU3LjU2NzUgMTU4LjU1NyA4LjY4Mzg4IDEyMi45NTRWMTIyLjk1NEM3NC45MzUyIDg3LjM1MiAxNTcuNTA0IDExMi4xOTggMTkzLjEwNiAxNzguNDQ5VjE3OC40NDlDMjI4LjcwOSAyNDQuNzAxIDIwMy44NjMgMzI3LjI2OSAxMzcuNjExIDM2Mi44NzJWMzYyLjg3MkM3MS4zNTk5IDM5OC40NzQgLTExLjIwODggMzczLjYyOCAtNDYuODExMSAzMDcuMzc3VjMwNy4zNzdaIiBmaWxsPSIjRkZGQUI2IiBmaWxsLW9wYWNpdHk9IjAuMTUiLz4KPC9nPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyNF9mXzEwMThfMTEzNjgpIj4KPHBhdGggZD0iTTg3NC42NzkgMzUuNzU0QzgyOS44OTQgLTQ3LjU4NjEgODYxLjE0OCAtMTUxLjQ1MiA5NDQuNDg4IC0xOTYuMjM4Vi0xOTYuMjM4QzEwMjcuODMgLTI0MS4wMjMgMTEzMS42OSAtMjA5Ljc2OSAxMTc2LjQ4IC0xMjYuNDI5Vi0xMjYuNDI5QzEyMjEuMjcgLTQzLjA4ODUgMTE5MC4wMSA2MC43Nzc3IDExMDYuNjcgMTA1LjU2M1YxMDUuNTYzQzEwMjMuMzMgMTUwLjM0OSA5MTkuNDY1IDExOS4wOTQgODc0LjY3OSAzNS43NTRWMzUuNzU0WiIgZmlsbD0idXJsKCNwYWludDNfbGluZWFyXzEwMThfMTEzNjgpIiBmaWxsLW9wYWNpdHk9IjAuNyIvPgo8L2c+CjwvZz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzEwMThfMTEzNjgiIHg9IjEzMjguNTciIHk9Ii01NTcuNDMzIiB3aWR0aD0iMTAwNi4yMyIgaGVpZ2h0PSIxMDA2LjIzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjkxLjMwMjUiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xMDE4XzExMzY4Ii8+CjwvZmlsdGVyPgo8ZmlsdGVyIGlkPSJmaWx0ZXIxX2ZfMTAxOF8xMTM2OCIgeD0iMTA1My4zOCIgeT0iODM3LjQ5NyIgd2lkdGg9Ijc4OS45NDkiIGhlaWdodD0iNzg5Ljk0OCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI5MS4zMDI1IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMTAxOF8xMTM2OCIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyMl9mXzEwMThfMTEzNjgiIHg9IjE4MzYuMDQiIHk9IjQxOS40MjIiIHdpZHRoPSI3MzQuMDU1IiBoZWlnaHQ9IjczNC4wNTYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iOTEuMzAyNSIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzEwMThfMTEzNjgiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjNfZl8xMDE4XzExMzY4IiB4PSItMjkzLjg4IiB5PSItMTI0LjExNSIgd2lkdGg9IjczNC4wNTUiIGhlaWdodD0iNzM0LjA1NiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI5MS4zMDI1IiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMTAxOF8xMTM2OCIvPgo8L2ZpbHRlcj4KPGZpbHRlciBpZD0iZmlsdGVyNF9mXzEwMThfMTEzNjgiIHg9IjYxMC45ODMiIHk9Ii00NTkuOTMzIiB3aWR0aD0iODI5LjE5NCIgaGVpZ2h0PSI4MjkuMTkzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjkxLjMwMjUiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl8xMDE4XzExMzY4Ii8+CjwvZmlsdGVyPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTAxOF8xMTM2OCIgeDE9Ii0yMTIuMzIzIiB5MT0iLTE0My41MjYiIHgyPSIxMDkyLjEyIiB5Mj0iMTc5OS43MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjREJFQkZGIi8+CjxzdG9wIG9mZnNldD0iMC4yODE0MDYiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMC41MjI4NjMiIHN0b3AtY29sb3I9IiNGQUY1RkYiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkRGMkY4Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl8xMDE4XzExMzY4IiB4MT0iMTg4Ni4zOCIgeTE9Ii0zNzQuODI4IiB4Mj0iMTc3Ni45OSIgeTI9IjI2Ni4xOTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzUxQTJGRiIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50Ml9saW5lYXJfMTAxOF8xMTM2OCIgeDE9IjEyMzUuOTgiIHkxPSIxMTY4LjU3IiB4Mj0iMTY2MC43MiIgeTI9IjEyOTYuMzgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0MyN0FGRiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkI2NEI2IiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXJfMTAxOF8xMTM2OCIgeDE9Ijc5My41ODgiIHkxPSItMTE1LjE0NiIgeDI9IjEyNTcuNTciIHkyPSIyNC40NzE5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNDMjdBRkYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZCNjRCNiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KPC9saW5lYXJHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xMDE4XzExMzY4Ij4KPHJlY3Qgd2lkdGg9IjE4ODYiIGhlaWdodD0iMTI2Ni44MiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPGNsaXBQYXRoIGlkPSJjbGlwMV8xMDE4XzExMzY4Ij4KPHJlY3Qgd2lkdGg9IjE4ODYiIGhlaWdodD0iMTI2Ni44MiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.common-bg-gradient-light {
  background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
}
.hero-content-centered { display: block; }
/* exact live-theme rule - do not add text-align or text-transform here,
   they come from the base h1 and from .text-center on the parent */
.hero-content-centered h1 {
  font-size: var(--font-54);
  line-height: 1.2;
  margin-bottom: 20px;
}
.hero-content-centered p {
  font-size: var(--font-20); color: var(--grey);
  max-width: 800px; margin: 0 auto;
}
.hero-meta-wrapper { display: flex; gap: 14px; margin-bottom: 25px; flex-wrap: wrap; }
.hero-chip {
  background: rgba(30, 136, 229, .1); color: var(--blue);
  padding: 8px 22px; border-radius: 50px;
  font-size: var(--font-14); font-weight: 700;
  border: 1px solid rgba(30, 136, 229, .2);
}
.hero-chip.date,
.hero-chip.is-read {
  background: var(--white); color: var(--grey); border-color: var(--border-color);
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
a.common-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  color: var(--white); text-align: center; font-family: var(--inter);
  font-size: var(--font-18); font-weight: 600; line-height: 134%;
  border-radius: 12px; background: var(--blue);
  box-shadow: 0 12px 18px -4px rgba(30, 136, 229, .25),
              0 4px 8px -4px rgba(30, 136, 229, .25);
  padding: 20px 26px;
  transition: all .4s cubic-bezier(.23, 1, .32, 1);
  z-index: 1;
}
a.common-btn::before,
a.common-btn-white::before,
a.common-btn-white-blue-border::before {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition: all .6s ease; z-index: -1;
}
a.common-btn:hover {
  background: #2196f3;
  box-shadow: 0 20px 30px -10px rgba(30, 136, 229, .4),
              0 10px 15px -5px rgba(30, 136, 229, .3);
}
a.common-btn:hover::before,
a.common-btn-white:hover::before,
a.common-btn-white-blue-border:hover::before { left: 100%; }
a.common-btn:active,
a.common-btn-white:active,
a.common-btn-white-blue-border:active { transform: translateY(-2px) scale(.98); }

a.common-btn-white,
a.common-btn-white-blue-border {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  color: var(--blue); text-align: center; font-family: var(--inter);
  font-size: var(--font-18); font-weight: 600; line-height: 134%;
  padding: 18px 24px; border-radius: 12px;
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, .05);
  transition: all .4s cubic-bezier(.23, 1, .32, 1);
  z-index: 1; background-color: var(--white);
}
a.common-btn-white { border: 1px solid var(--light-grey-border-color); }
a.common-btn-white-blue-border { border: 1px solid var(--blue); }
a.common-btn-white:hover,
a.common-btn-white-blue-border:hover {
  background: var(--blue); color: var(--white);
  box-shadow: 0 15px 35px -10px rgba(30, 136, 229, .5);
}

/* --------------------------------------------------------------------------
   8. SECTION HEADER
   -------------------------------------------------------------------------- */
.section-header { text-align: center; margin-bottom: 50px; }
.section-header span {
  display: inline-block; padding: 6px 16px;
  background: var(--white); border: 1px solid var(--light-grey-border-color);
  color: var(--blue); border-radius: 50px;
  font-size: var(--font-18); font-weight: 600; margin-bottom: 10px;
}
.section-header p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   9. ARTICLE GRID AND SIDEBAR
   -------------------------------------------------------------------------- */
.blog-detail-grid {
  display: grid; grid-template-columns: 1fr 400px;
  gap: 60px; align-items: stretch;
}
.blog-content-area { min-width: 0; }
.blog-sidebar-area { flex-shrink: 0; height: 100%; }
.sticky-sidebar-content { position: sticky; top: 120px; }
.sidebar-wrapper {
  background: var(--white); padding: 35px; border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  margin-bottom: 30px;
}
.sidebar-wrapper h4 {
  font-size: var(--font-22); font-weight: 800; margin-bottom: 30px;
  color: var(--black); text-transform: uppercase; letter-spacing: 1px;
}
/* NOTE: the live theme has NO .sidebar-wrapper p rule, so sidebar paragraphs
   inherit the base p (20px / 134%). Do not add one here - a smaller size
   was tried and it made the rail 8px shorter than the real site. */

.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li { margin-bottom: 12px; }
.category-list li:last-child { margin-bottom: 0; }
.category-list li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--light-blue-bg); border-radius: 12px;
  color: var(--black); font-size: var(--font-16); font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1); border: 1px solid transparent;
}
.category-list li a span {
  font-size: var(--font-14); color: var(--blue); background: var(--white);
  padding: 4px 12px; border-radius: 50px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05); transition: all .3s ease;
}
.category-list li a:hover {
  background: var(--blue); color: var(--white);
  box-shadow: 0 8px 20px rgba(30, 136, 229, .15);
}
.category-list li a:hover span { color: var(--blue); background: var(--white); transform: scale(1.1); }

/* --------------------------------------------------------------------------
   10. BANNER
   -------------------------------------------------------------------------- */
.article-banner {
  width: 100%; border-radius: 24px; margin-bottom: 50px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .08);
}

/* --------------------------------------------------------------------------
   11. ARTICLE BODY - the typography the whole design rests on
   -------------------------------------------------------------------------- */
.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4,
.blog-article-body h5 { scroll-margin-top: 150px; }

.blog-article-body h2 {
  text-align: left; margin: 50px 0 25px;
  font-size: var(--font-32); font-weight: 800; color: var(--black);
  padding-left: 18px; border-left: 5px solid var(--blue);
  line-height: 1.2; text-transform: none;
}
.blog-article-body h2:first-child { margin-top: 0; }
.blog-article-body h3 {
  margin: 40px 0 15px; font-size: var(--font-26);
  font-weight: 700; color: var(--black);
}
.blog-article-body h4 {
  margin: 30px 0 12px; font-size: var(--font-22);
  font-weight: 700; color: var(--black);
}
.blog-article-body h5 {
  margin: 25px 0 10px; font-size: var(--font-18); font-weight: 700;
  color: var(--black); text-transform: uppercase; letter-spacing: 1px;
}
.blog-article-body p {
  margin-bottom: 25px; font-size: var(--font-18);
  line-height: 1.6; color: var(--grey);
}
.blog-article-body a {
  color: var(--blue); font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px; transition: all .3s ease;
}
.blog-article-body a:hover { color: var(--black); text-decoration-color: var(--blue); }

.blog-article-body ul,
.blog-article-body ol { margin-bottom: 35px; padding-left: 25px; margin-left: 0; }
.blog-article-body li {
  margin-bottom: 15px; color: var(--grey);
  font-size: var(--font-18); line-height: 1.6; position: relative;
}
.blog-article-body ul li { list-style: none; }
.blog-article-body ul li::before {
  content: ""; position: absolute; left: -25px; top: 10px;
  width: 10px; height: 10px; background: var(--blue); border-radius: 50%;
}
.blog-article-body ol { counter-reset: blog-counter; list-style: none; }
.blog-article-body ol li { counter-increment: blog-counter; }
.blog-article-body ol li::before {
  content: counter(blog-counter) "."; position: absolute; left: -25px;
  font-weight: 800; color: var(--blue);
}
.blog-article-body b,
.blog-article-body strong { color: var(--black); }

.blog-article-body table {
  width: 100%; margin: 40px 0; border-collapse: collapse;
  background: var(--white); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-color);
}
.blog-article-body th {
  background: var(--lightblue); padding: 20px; font-weight: 700;
  text-align: left; color: var(--black);
  border-bottom: 2px solid var(--blue-ring-color);
}
.blog-article-body td {
  padding: 18px 20px; border-bottom: 1px solid var(--border-color); color: var(--grey);
}
.blog-article-body tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   12. EXPLORE STRIP
   -------------------------------------------------------------------------- */
.explore-links-section {
  background: linear-gradient(180deg, var(--white) 0%, var(--light-blue-bg) 100%);
  position: relative; overflow: hidden;
}
.explore-links-section::before {
  content: ""; position: absolute; top: -10%; right: -5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,136,229,.05) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.explore-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  position: relative; z-index: 2;
}
.explore-card {
  background: var(--white); border-radius: 24px; padding: 50px 40px 40px;
  border: 1px solid var(--border-color); box-shadow: 0 15px 40px rgba(0,0,0,.02);
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 250px; position: relative; overflow: hidden;
  text-decoration: none !important;
}
.explore-card .card-num {
  position: absolute; top: 30px; right: 40px;
  font-size: 80px; font-weight: 900; line-height: 1;
  color: var(--black); opacity: .04;
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  font-family: var(--inter); user-select: none;
}
.explore-card .card-content {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; width: 100%; flex-grow: 1; z-index: 2;
}
.explore-card h3 {
  font-size: var(--font-26); font-weight: 800; color: var(--black);
  margin-top: 10px; margin-bottom: 40px; line-height: 1.3;
  transition: color .4s cubic-bezier(.16, 1, .3, 1); text-transform: none;
}
.explore-card .card-link {
  display: inline-flex; align-items: center; justify-content: space-between;
  font-size: var(--font-18); font-weight: 700; color: var(--grey);
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  border-top: 1px solid var(--light-grey-border-color);
  padding-top: 24px; width: 100%;
}
.explore-card .arrow-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--light-blue-bg); display: flex;
  align-items: center; justify-content: center; color: var(--grey);
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
}
.explore-card .arrow-circle svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
  transform: translate(0, 0); transform-origin: center;
}
.explore-card.card-brand { border-top: 4px solid var(--green-light); }
.explore-card.card-brand .card-num { color: var(--green-light); }
.explore-card.card-anim { border-top: 4px solid var(--blue); }
.explore-card.card-anim .card-num { color: var(--blue); }
.explore-card.card-mktg { border-top: 4px solid var(--orange); }
.explore-card.card-mktg .card-num { color: var(--orange); }
.explore-card:hover { transform: translateY(-10px); }
.explore-card.card-brand:hover {
  background-color: #f1fffa; border-color: var(--green-light);
  box-shadow: 0 20px 40px rgba(23, 173, 135, .08);
}
.explore-card.card-brand:hover h3 { color: var(--green-light); }
.explore-card.card-brand:hover .card-link { color: var(--green-light); border-top-color: rgba(23,173,135,.2); }
.explore-card.card-brand:hover .arrow-circle { background-color: var(--green-light); color: var(--white); }
.explore-card.card-anim:hover {
  background-color: #f4faff; border-color: var(--blue);
  box-shadow: 0 20px 40px rgba(30, 136, 229, .08);
}
.explore-card.card-anim:hover h3 { color: var(--blue); }
.explore-card.card-anim:hover .card-link { color: var(--blue); border-top-color: rgba(30,136,229,.2); }
.explore-card.card-anim:hover .arrow-circle { background-color: var(--blue); color: var(--white); }
.explore-card.card-mktg:hover {
  background-color: #fff7f5; border-color: var(--orange);
  box-shadow: 0 20px 40px rgba(188, 73, 35, .08);
}
.explore-card.card-mktg:hover h3 { color: var(--orange); }
.explore-card.card-mktg:hover .card-link { color: var(--orange); border-top-color: rgba(188,73,35,.2); }
.explore-card.card-mktg:hover .arrow-circle { background-color: var(--orange); color: var(--white); }
.explore-card:hover .card-num { opacity: .12; transform: scale(1.05); }
.explore-card:hover .arrow-circle svg { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   13. ACCORDION - self-contained, no Bootstrap required
   Markup is identical to Bootstrap 5's collapse accordion, so the same HTML
   works on crownglobe.com (where Bootstrap drives it) and anywhere else
   (where cg-blog.js drives it). Do not change the markup.
   -------------------------------------------------------------------------- */
.accordion { --cg-acc-icon: 16px; }
.accordion-item {
  border: none; background-color: var(--blue-card-bg);
  border-radius: 12px !important; margin-bottom: 20px; overflow: hidden;
}
.accordion-header { margin: 0; }
.accordion-button {
  position: relative; display: flex; align-items: center; width: 100%;
  font-family: var(--inter);
  font-size: var(--font-20); font-weight: 600; color: var(--black);
  padding: 24px; background-color: transparent; line-height: normal;
  box-shadow: none; border: 0; text-align: left; cursor: pointer;
  transition: color .2s ease;
}
.accordion-button::after {
  content: ""; flex-shrink: 0; margin-left: auto; margin-right: 10px;
  width: var(--cg-acc-icon); height: var(--cg-acc-icon);
  background-repeat: no-repeat; background-size: var(--cg-acc-icon);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111111'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition: transform .2s ease-in-out;
}
.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }
.accordion-button:not(.collapsed) { color: var(--black); }
.accordion-button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.accordion-collapse { overflow: hidden; }
/* closed by default; .show opens. Bootstrap uses the same contract. */
.accordion-collapse.collapse:not(.show) { display: none; }
.accordion-body { padding: 0 24px 24px; }
.accordion-body p { font-size: var(--font-18); color: var(--grey); line-height: 1.6; margin: 0; }
.accordion-body p + p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   Every rule below was extracted directly from
   wp-content/themes/crown-globe/css/responsive.css and verified by comparing
   computed styles against the live stack at ten viewport widths.

   Do NOT tidy these breakpoints into round numbers and do NOT merge blocks.
   The theme uses 1700 / 1440 / 1299 / 1199 / 1023 / 991 / 767 / 575 and each
   one carries specific rules. Changing any of them breaks the design lock.
   -------------------------------------------------------------------------- */
@media (max-width: 1700px) {
  .cg-container { max-width: calc(100% - 160px); }
}

@media (max-width: 1440px) {
  :root { --font-54: 48px; --font-52: 40px; --font-46: 40px; --font-44: 38px; --font-36: 32px; }
  .blog-detail-grid { gap: 30px; }
}

@media (max-width: 1299px) {
  :root { --font-54: 42px; --font-52: 40px; --font-46: 36px; --font-44: 34px; --font-36: 28px; --font-26: 22px; }
  .cg-container { max-width: 90%; }
  .py-80 { padding: 70px 0; }
  .pt-80 { padding-top: 70px; }
  .pb-80 { padding-bottom: 70px; }
}

@media (max-width: 1199px) {
  .blog-detail-grid { grid-template-columns: 1fr 350px; }
  .sidebar-wrapper { position: static; margin-bottom: 40px; }
}

@media (max-width: 1023px) {
  :root {
    --font-54: 34px; --font-52: 33px; --font-46: 30px; --font-44: 28px;
    --font-36: 24px; --font-30: 22px; --font-26: 20px; --font-24: 20px;
    --font-22: 18px; --font-20: 16px; --font-18: 16px;
  }
  /* NOTE: the theme flips article and sidebar at 1023px, not 767px. On tablets
     and phones the sidebar renders ABOVE the article. That is the live
     behaviour - see "Known theme issues" in the rule book. */
  .blog-detail-grid { display: flex; flex-direction: column-reverse; }
  .sidebar-wrapper { margin-bottom: 20px; }
}

@media (max-width: 991px) {
  .section-header { margin-bottom: 30px; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
  :root { --font-16: 14px; }
  .py-80 { padding: 50px 0; }
  .pt-80 { padding-top: 50px; }
  .pb-80 { padding-bottom: 50px; }
  .hero-content-centered h1 { font-size: var(--font-32); }
  .blog-article-body h2 { font-size: var(--font-26); }
  .blog-article-body p { font-size: var(--font-16); }
  a.common-btn,
  a.common-btn-white,
  a.common-btn-white-blue-border { padding: 12px 16px; }
  .explore-grid { grid-template-columns: 1fr; gap: 20px; }
  .explore-card { padding: 40px 30px 30px; min-height: 200px; }
}

@media (max-width: 575px) {
  .py-80 { padding: 40px 0; }
  .pt-80 { padding-top: 40px; }
  .pb-80 { padding-bottom: 40px; }
  .sidebar-wrapper { padding: 20px; }
  .explore-card { padding: 20px; min-height: 150px; }
  .explore-card h3 { margin-bottom: 30px; }
  .explore-card .card-num { top: 20px; right: 20px; font-size: 50px; }
  .explore-card .card-link { padding-top: 14px; }
}

/* ---------- 2. cg-chrome.css : live header + footer (PREVIEW ONLY) ---------- */
/*!
 * cg-chrome.css - CrownGlobe site header + footer, preview build (v6.2)
 * ---------------------------------------------------------------------------
 * The real crownglobe.com header and footer markup is used verbatim in every
 * sample. This file carries EXACTLY the CSS those two regions need, machine
 * extracted from the live stack (bootstrap.min.css + style.css + responsive.css)
 * by matching every rule against the real header/footer DOM and discarding any
 * rule that also matches an element inside the article body. Nothing here can
 * therefore change how the article renders.
 *
 * PREVIEW ONLY. Never enqueue this in WordPress - the live theme already
 * outputs its own header, footer and CSS.
 * ---------------------------------------------------------------------------
 */
:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}
:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}


/* NOTE ON BASE RULES
   Bootstrap's Reboot and the theme's own global reset (* { margin:0; padding:0;
   box-sizing:border-box }, p/ul reset, a { text-decoration:none }, the button
   font inheritance) are already carried by cg-lock.css, which loads first and
   is a verified reproduction of the live stack. Nothing is repeated here, so
   the header and footer inherit exactly the base they inherit on the live
   site - and the article is untouched by anything in this file. */

/* ===== from bootstrap.min.css ===== */
hr{margin: 1rem 0px; color: inherit; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: var(--bs-border-width) solid; opacity: 0.25;}
ul ul{margin-bottom: 0px;}
.navbar{--bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0.5rem; --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65); --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8); --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-brand-padding-y: 0.3125rem; --bs-navbar-brand-margin-end: 1rem; --bs-navbar-brand-font-size: 1.25rem; --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1); --bs-navbar-nav-link-padding-x: 0.5rem; --bs-navbar-toggler-padding-y: 0.25rem; --bs-navbar-toggler-padding-x: 0.75rem; --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15); --bs-navbar-toggler-border-radius: var(--bs-border-radius); --bs-navbar-toggler-focus-width: 0.25rem; --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);}
.navbar-brand{padding-top: var(--bs-navbar-brand-padding-y); padding-bottom: var(--bs-navbar-brand-padding-y); margin-right: var(--bs-navbar-brand-margin-end); font-size: var(--bs-navbar-brand-font-size); color: var(--bs-navbar-brand-color); text-decoration: none; white-space: nowrap;}
.navbar-brand:focus,.navbar-brand:hover{color: var(--bs-navbar-brand-hover-color);}
.navbar-nav{--bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 0.5rem; --bs-nav-link-font-weight: ; --bs-nav-link-color: var(--bs-navbar-color); --bs-nav-link-hover-color: var(--bs-navbar-hover-color); --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color); display: flex; flex-direction: column; padding-left: 0px; margin-bottom: 0px; list-style: none;}
.navbar-collapse{flex-basis: 100%; flex-grow: 1; align-items: center;}
.navbar-toggler{padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x); font-size: var(--bs-navbar-toggler-font-size); line-height: 1; color: var(--bs-navbar-color); background-color: transparent; border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); border-radius: var(--bs-navbar-toggler-border-radius); transition: var(--bs-navbar-toggler-transition);}
@media (prefers-reduced-motion: reduce){.navbar-toggler{transition: none;}}
.navbar-toggler:hover{text-decoration: none;}
.navbar-toggler:focus{text-decoration: none; outline: 0px; box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);}
.navbar-toggler-icon{display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-image: var(--bs-navbar-toggler-icon-bg); background-repeat: no-repeat; background-position: center center; background-size: 100%;}
@media (min-width: 1200px){.navbar-expand-xl{flex-wrap: nowrap; justify-content: flex-start;}
.navbar-expand-xl .navbar-nav{flex-direction: row;}
.navbar-expand-xl .navbar-collapse{display: flex !important; flex-basis: auto;}
.navbar-expand-xl .navbar-toggler{display: none;}}
@keyframes progress-bar-stripes { 
  0% { background-position-x: 1rem; }
}
@keyframes spinner-border { 
  100% { transform: rotate(360deg); }
}
@keyframes spinner-grow { 
  0% { transform: scale(0); }
  50% { opacity: 1; transform: none; }
}
@keyframes placeholder-glow { 
  50% { opacity: 0.2; }
}
@keyframes placeholder-wave { 
  100% { mask-position: -200% 0%; }
}
.align-text-top{vertical-align: text-top !important;}
.d-inline-block{display: inline-block !important;}
.d-flex{display: flex !important;}
.shadow-sm{box-shadow: var(--bs-box-shadow-sm) !important;}
.border-0{border: 0px !important;}
.flex-row{flex-direction: row !important;}
.justify-content-end{justify-content: flex-end !important;}
.align-items-center{align-items: center !important;}
.me-0{margin-right: 0px !important;}
.p-0{padding: 0px !important;}
.py-0{padding-top: 0px !important; padding-bottom: 0px !important;}
.gap-2{gap: 0.5rem !important;}
.gap-3{gap: 1rem !important;}
.bg-white{--bs-bg-opacity: 1; background-color: rgba(var(--bs-white-rgb),var(--bs-bg-opacity)) !important;}
/* ===== from theme-style.css ===== */
.pt-80{padding-top: 80px;}
a.common-btn-white-blue-border::before{content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: 0.6s; z-index: -1;}
a.common-btn-white-blue-border:hover::before{left: 100%;}
a.common-btn-white-blue-border:active{transform: translateY(-2px) scale(0.98);}
a.common-btn-white-blue-border{display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; color: var(--blue); text-align: center; font-family: var(--inter); font-size: var(--font-18); font-style: normal; font-weight: 600; line-height: 134%; padding: 18px 24px; border-radius: 12px; border: 1px solid var(--blue); box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 15px -3px; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; background-color: var(--white);}
a.common-btn-white-blue-border:hover{background: var(--blue); color: var(--white); box-shadow: rgba(30, 136, 229, 0.5) 0px 15px 35px -10px;}
a.common-btn-white-blue-border:active{transform: translateY(-2px) scale(0.98);}
.navbar-brand img{object-fit: contain;}
.header-cta{display: flex; align-items: center; gap: 20px; flex-wrap: wrap;}
.responsive-cta{display: none;}
header.custom-header{border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 20px 0px; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; background-color: var(--white);}
.cg-custom-menu{width: 100%; position: relative;}
.cg-custom-menu > ul{display: flex; list-style: none; gap: 40px; align-items: center; justify-content: center; margin: 0px; padding: 0px;}
.cg-custom-menu > ul > li{padding: 10px 0px; position: relative;}
.cg-custom-menu > ul > li.static-mega{position: static;}
.cg-custom-menu > ul > li > a{color: var(--black); text-decoration: none; font-size: var(--font-18); font-weight: 600; transition: color 0.3s; display: flex; align-items: center; font-family: var(--inter); position: relative; padding: 10px 0px;}
.cg-custom-menu > ul > li.has-mega > a::after{content: ""; width: 6px; height: 6px; border-right: 1.8px solid currentcolor; border-bottom: 1.8px solid currentcolor; transform: rotate(45deg); transition: 0.3s; margin-left: 8px; margin-top: -3px;}
.cg-custom-menu > ul > li.has-mega:hover > a::after{transform: rotate(-135deg); margin-top: 3px;}
.cg-custom-menu > ul > li > a::before{content: ""; position: absolute; bottom: -2px; left: 0px; width: 0px; height: 2px; background-color: var(--blue); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.cg-custom-menu > ul > li > a:hover::before{width: 100%;}
.cg-custom-menu > ul > li:hover > a{color: var(--blue);}
.cg-custom-menu > ul > li > .mega-menu{position: absolute; top: calc(100% + 15px); left: 50%; transform-origin: center top; transform: translateX(-50%) translateY(20px) scaleY(0.95); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(25px); box-shadow: rgba(30, 136, 229, 0.15) 0px 40px 80px -20px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; border-radius: 16px; border-top: 4px solid var(--blue); padding: 30px; display: flex; flex-wrap: wrap; max-width: 90vw; gap: 60px; opacity: 0; visibility: hidden; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100; min-width: max-content;}
.cg-custom-menu .mega-column{display: flex; flex-direction: column;}
.cg-custom-menu .mega-heading{font-weight: 800; font-size: var(--font-18); color: var(--black); margin-bottom: 24px; display: block; text-transform: uppercase; letter-spacing: 0.5px; position: relative; padding-bottom: 12px; transition: color 0.3s;}
.cg-custom-menu .mega-heading::after{content: ""; position: absolute; left: 0px; bottom: 0px; width: 30px; height: 2px; background: var(--blue); border-radius: 2px; transition: width 0.3s;}
.cg-custom-menu .mega-heading:hover{color: var(--blue);}
.cg-custom-menu .mega-heading:hover::after{width: 50px;}
.cg-custom-menu .mega-column ul{list-style: none; padding: 0px; margin: 0px; display: flex; flex-direction: column; gap: 16px;}
.cg-custom-menu .mega-column ul li{padding: 0px;}
.cg-custom-menu .mega-column ul li a{color: var(--grey); font-size: var(--font-16); font-weight: 500; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; position: relative;}
.cg-custom-menu .mega-column ul li a::before{content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%) scale(0); width: 6px; height: 6px; background-color: var(--blue); border-radius: 50%; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.cg-custom-menu .mega-column ul li a:hover{color: var(--blue); transform: translateX(16px);}
.cg-custom-menu .mega-column ul li a:hover::before{transform: translateY(-50%) scale(1);}
.footer-section{background-color: var(--light-blue-bg);}
.footer-grid{display: grid; grid-template-columns: 300px 1fr 1fr 1fr; gap: 40px; padding-bottom: 0px;}
.footer-logo img{max-width: 220px;}
.footer-card{border-radius: 20px; border: 1px solid rgb(30, 136, 229); background: linear-gradient(120deg, rgb(228, 243, 255) -1.34%, rgb(249, 252, 255) 63.46%, rgb(228, 243, 255) 100%); height: fit-content; padding: 30px;}
.footer-column h4{color: var(--dark); font-family: var(--inter); font-size: var(--font-20); font-weight: 600; margin-bottom: 40px; position: relative;}
.footer-column h4::before{content: ""; position: absolute; left: 0px; height: 2px; width: 50px; bottom: -20px; background-color: var(--dark);}
.footer-column ul{display: flex; flex-direction: column; gap: 12px; list-style-type: none;}
.footer-column ul li a{color: var(--grey); font-size: var(--font-16); font-weight: 500; line-height: 150%; transition: 0.3s;}
.footer-column ul li a:hover{color: var(--blue); padding-left: 5px;}
.footer-bottom-grid{padding: 20px 0px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;}
footer hr{opacity: 1; margin: 0px;}
.terms-condition ul{list-style: none; display: flex; gap: 30px;}
.terms-condition ul li,.copyright p,.design-by p{color: var(--grey); font-family: var(--inter); font-size: var(--font-14); font-weight: 600; line-height: 150%;}
.terms-condition ul li:not(:first-of-type){position: relative;}
.terms-condition ul li:not(:first-of-type)::before{content: ""; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); height: 6px; width: 6px; background-color: var(--grey); border-radius: 50%;}
.footer-contact-links{display: flex; align-items: start; flex-flow: column wrap; justify-content: space-between; gap: 20px; padding-top: 20px;}
.footer-contact-links ul li{list-style-type: none;}
.footer-contact-links ul:first-of-type li{display: flex; align-items: center; gap: 10px;}
.footer-contact-links ul:first-of-type li a{color: var(--grey); font-size: var(--font-18); font-weight: 500; line-height: 190%; transition: 0.3s;}
.footer-contact-links ul:last-of-type{display: flex; gap: 6px;}
.footer-contact-links ul:last-of-type li{min-width: 42px; min-height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--blue); transition: 0.3s;}
.footer-contact-links ul:last-of-type li img{transition: 0.3s;}
.footer-contact-links ul:last-of-type li:hover{background-color: var(--blue);}
.footer-contact-links ul:last-of-type li:hover img{filter: brightness(0) invert(1);}
@keyframes pulse { 
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 var(--pulse-color, rgba(23, 173, 135, 0.4)); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: rgba(23, 173, 135, 0) 0px 0px 0px 10px; }
  100% { transform: scale(1); opacity: 1; box-shadow: rgba(23, 173, 135, 0) 0px 0px 0px 0px; }
}
@keyframes dot-glow-pulse { 
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(3.5); opacity: 0; }
}
@keyframes chip-pulse { 
  0% { box-shadow: 0 0 0 0 var(--blue); }
  70% { box-shadow: rgba(23, 95, 173, 0) 0px 0px 0px 10px; }
  100% { box-shadow: rgba(23, 53, 173, 0) 0px 0px 0px 0px; }
}
@keyframes pulse-glow { 
  0% { filter: drop-shadow(rgba(30, 136, 229, 0.2) 0px 0px 20px); transform: scale(1); }
  50% { filter: drop-shadow(rgba(30, 136, 229, 0.5) 0px 0px 50px); transform: scale(1.02); }
  100% { filter: drop-shadow(rgba(30, 136, 229, 0.2) 0px 0px 20px); transform: scale(1); }
}
@keyframes pulse-glow-success { 
  0% { filter: drop-shadow(rgba(30, 136, 229, 0.2) 0px 0px 20px); transform: scale(1); }
  50% { filter: drop-shadow(rgba(30, 136, 229, 0.5) 0px 0px 50px); transform: scale(1.02); }
  100% { filter: drop-shadow(rgba(30, 136, 229, 0.2) 0px 0px 20px); transform: scale(1); }
}
.footer-bottom-grid a:hover{color: var(--blue);}
.footer-bottom-grid a{transition: 0.3s ease-in-out;}
.services-columns{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 80px;}
/* ===== from theme-responsive.css ===== */
@media (min-width: 1300px){.navbar-toggler,.mobile-menu-header{display: none;}
.navbar-collapse{display: flex; visibility: visible; position: static; transform: none; height: auto;}
.cg-custom-menu > ul > li:hover > .mega-menu{opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px) scaleY(1); top: 100%;}}
@media (max-width: 1599px){.cg-custom-menu > ul{gap: 30px;}
.header-cta a{padding: 12px 26px;}
.navbar-brand{max-width: 200px;}}
@media (max-width: 1440px){.cg-custom-menu > ul{gap: 30px;}
.cg-custom-menu > ul > li > a{font-size: var(--font-16);}
.cg-custom-menu > ul > li > .mega-menu{gap: 30px; padding: 24px 30px;}
.cg-custom-menu .mega-heading{font-size: var(--font-16); margin-bottom: 15px;}}
@media (max-width: 1399px){.cg-custom-menu > ul{gap: 24px;}
.cg-custom-menu > ul{gap: 20px;}}
@media (max-width: 1299px){.footer-grid{grid-template-columns: repeat(2, 1fr); gap: 30px;}
.pt-80{padding-top: 70px;}
.navbar-expand-xl .navbar-toggler{display: block !important;}
.navbar-collapse{background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(25px); position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; padding: 0px; z-index: 1000; transition: 0.5s cubic-bezier(0.85, 0, 0.15, 1); transform: translateY(-100%); display: flex; flex-direction: column; visibility: hidden; max-width: 100%; box-shadow: none;}
.mobile-menu-header{display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: var(--white);}
.mobile-menu-header .close-btn{width: 40px; height: 40px; background: var(--lightblue); color: var(--blue); border-radius: 50%; font-size: 32px; align-items: center; justify-content: center; border: none; line-height: 1; transition: 0.3s; display: flex !important;}
.mobile-menu-header .close-btn:hover{background: var(--blue); color: var(--white); transform: rotate(90deg);}
.cg-custom-menu{overflow-y: auto; flex-grow: 1; width: 100%; padding: 10px 20px;}
.cg-custom-menu > ul{flex-direction: column; align-items: flex-start; width: 100%; gap: 0px;}
.cg-custom-menu > ul > li{width: 100%; padding: 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.05);}
.cg-custom-menu > ul > li > a{width: 100%; padding: 15px 0px; justify-content: space-between; font-size: var(--font-22); position: relative; font-weight: 700; color: var(--black);}
.cg-custom-menu > ul > li > a::after{display: none;}
.cg-custom-menu > ul > li.has-mega > a::after{display: block; content: "+"; font-size: var(--font-26); font-weight: 400; position: static; width: auto; height: auto; bottom: auto; left: auto; background: none; transform: none; transition: transform 0.3s; border: none;}
.cg-custom-menu > ul > li > .mega-menu{position: static; transform: none; box-shadow: none; border: none; border-radius: 0px; padding: 0px; flex-direction: column; gap: 0px; background: transparent; display: none; min-width: 100%; opacity: 1; visibility: visible;}
.cg-custom-menu .mega-column{background-color: var(--lightblue); border-radius: 12px; margin: 8px 15px; overflow: hidden;}
.cg-custom-menu .mega-column > .inner-menu > li > a{padding: 12px 20px; font-size: var(--font-18); font-weight: 500; display: block; color: var(--grey);}
.cg-custom-menu .mega-heading{font-size: var(--font-20); font-weight: 600; margin-bottom: 0px; padding: 12px 20px; color: var(--black); display: flex; justify-content: space-between; align-items: center; width: 100%;}
.cg-custom-menu .mega-heading::after{display: none;}
.cg-custom-menu .mega-column.has-inner-mega > a.mega-heading::after{display: block; content: "+"; font-size: var(--font-26); font-weight: 400; position: static; width: auto; height: auto; bottom: auto; left: auto; background: none; transform: none; transition: transform 0.3s;}
.cg-custom-menu .mega-column.has-inner-mega .inner-menu{display: none; padding-left: 20px; padding-bottom: 15px;}
.cg-custom-menu .mega-column.has-inner-mega .inner-menu li a{padding: 8px 20px; font-size: var(--font-16); color: var(--grey); display: block;}
.navbar-toggler{width: 48px; height: 48px; background-color: var(--blue); border-radius: 12px; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px -5px; border: 1px solid rgba(0, 0, 0, 0.05); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.navbar-toggler:active{transform: scale(0.9);}
.navbar-toggler:focus{box-shadow: none !important;}
.navbar-toggler .navbar-toggler-icon{width: 22px; height: 2px; background-color: var(--white); position: relative; transition: 0.3s; background-image: none !important;}
.navbar-toggler .navbar-toggler-icon::before,.navbar-toggler .navbar-toggler-icon::after{content: ""; position: absolute; right: 0px; height: 2px; background-color: var(--white); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.navbar-toggler .navbar-toggler-icon::before{top: -7px; width: 100%;}
.navbar-toggler .navbar-toggler-icon::after{bottom: -7px; width: 14px;}
.navbar-toggler:hover .navbar-toggler-icon::after{width: 22px;}
.cg-custom-menu .mega-column ul{gap: 0px;}
.services-columns{grid-template-columns: repeat(2, 1fr); gap: 12px;}
.footer-grid{padding-bottom: 30px;}}
@media (max-width: 1199px){.header-cta{display: none;}
.responsive-cta{display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; gap: 20px; padding: 20px;}}
@media (max-width: 767px){.footer-grid{grid-template-columns: 1fr;}
.footer-bottom-grid{flex-direction: column; text-align: center; gap: 15px;}
.pt-80{padding-top: 50px;}
a.common-btn-white-blue-border{padding: 12px 16px;}
.services-columns{grid-template-columns: 1fr;}
.services-columns{padding-bottom: 50px;}}
@media (max-width: 575px){.footer-column h4{margin-bottom: 15px;}
.services-columns{padding-bottom: 40px;}
.pt-80{padding-top: 40px;}
.footer-column h4::before{bottom: -8px;}
.footer-logo img{width: 100%;}
.footer-contact-links ul:last-of-type{flex-wrap: wrap;}
.mobile-menu-header a img{max-width: 200px;}}
@media (max-width: 389px){.cg-custom-menu .mega-heading{font-size: 14px;}
.cg-custom-menu .mega-column{margin: 8px 0px;}
.mobile-menu-header{padding: 20px 10px;}
.responsive-cta{grid-template-columns: 1fr; gap: 10px;}
.terms-condition ul{flex-direction: column; justify-content: center; align-items: center; gap: 4px;}
.terms-condition ul li:not(:first-of-type)::before{display: none;}}

/* ==========================================================================
   BEHAVIOUR FIXUPS - the Bootstrap collapse states the site header depends
   on, scoped so they can never reach the article's FAQ accordion, plus the
   top padding the live theme puts on <main> to clear its fixed header.
   ========================================================================== */
.custom-header .navbar-collapse.collapse:not(.show) { display: none; }
@media (min-width: 1300px) {
  .custom-header .navbar-collapse.collapse:not(.show) { display: flex; }
}
.custom-header .navbar-collapse.collapse.show { transform: translateY(0); visibility: visible; }

main { padding-top: 98px; }
@media (max-width: 575px) { main { padding-top: 90px; } }

/* ---------- 3. cg-blog.css : blog module library (SHIPS) ---------- */
/* ==========================================================================
   CrownGlobe Blog Module Library  v5.0
   --------------------------------------------------------------------------
   THEME-LOCKED. This file adds ONLY the editorial modules that the live
   crown-globe theme does not already ship. It never redefines a colour,
   font, radius or spacing value of its own - every value below resolves to a
   variable already declared in
   /wp-content/themes/crown-globe/css/style.css  :root
   so the blog can never drift away from the rest of crownglobe.com.

   Base typography, H2/H3, paragraphs, lists, links and tables come from the
   theme's own .blog-article-body rules. Do not duplicate them here.

   Scope: every rule is nested under .blog-article-body or .cg-blog-*
   so nothing in this file can leak into another page template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Local aliases - resolve to theme variables, with a hard fallback that
      equals the live value, so the file still renders correctly if it is
      ever loaded before the theme stylesheet.
   -------------------------------------------------------------------------- */
.blog-article-body,
.cg-blog-rail,
.cg-blog-hero-extras {
  --cg-blue: var(--blue, #1e88e5);
  --cg-black: var(--black, #111111);
  --cg-grey: var(--grey, #555555);
  --cg-white: var(--white, #ffffff);
  --cg-lightblue: var(--lightblue, #e5f1fc);
  --cg-soft-bg: var(--light-blue-bg, #f8fcff);
  --cg-card-bg: var(--blue-card-bg, #eff6ff);
  --cg-ring: var(--blue-ring-color, #cee9ff);
  --cg-line: var(--border-color, #dfdfdf);
  --cg-line-2: var(--light-grey-border-color, #e1e1e1);
  --cg-green: var(--green-light, #17ad87);
  --cg-yellow: var(--yellow, #f2c200);
  --cg-orange: var(--orange, #bc4923);
  --cg-purple: var(--purple, #b007ed);
  --cg-cyan: var(--cyan-light, #00cfd9);
  --cg-radius-lg: 20px;
  --cg-radius-md: 16px;
  --cg-radius-sm: 12px;
  --cg-shadow-sm: 0 10px 30px rgba(0, 0, 0, .05);
  --cg-shadow-md: 0 10px 40px rgba(0, 0, 0, .03);

  /* Derived values the live theme does not (yet) define.
     These are the ONLY non-theme colours in this file. Each is here because
     the theme has no token for the job. Rule book 11.3 recommends adding them
     to the theme :root, after which these four lines can be deleted. */
  --cg-amber-text: #a07800;   /* accessible amber - theme --yellow is 1.6:1 on white, fails WCAG */
  --cg-on-dark:    #d2dfe8;   /* body text on a black surface */
  --cg-on-dark-2:  #8fd2ff;   /* accent text on a black surface */
  --cg-on-dark-3:  #8c9aa5;   /* de-emphasised text on a black surface */
  --cg-tint-orange:#fdeee9;   /* 8% tints of the accent colours, for severity chips */
  --cg-tint-amber: #fdf6e0;
  --cg-tint-green: #e6f7f2;
}

/* --------------------------------------------------------------------------
   1. KICKER  - the small section number/label above an H2.
      Mirrors the theme's .section-header span pill.
   -------------------------------------------------------------------------- */
.blog-article-body .cg-kicker {
  display: inline-block;
  padding: 6px 16px;
  margin: 50px 0 14px;
  background: var(--cg-white);
  border: 1px solid var(--cg-line-2);
  color: var(--cg-blue);
  border-radius: 50px;
  font-size: var(--font-14, 14px);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1.4;
}
.blog-article-body .cg-kicker + h2 { margin-top: 0; }
.blog-article-body > .cg-kicker:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   2. KEY TAKEAWAYS / QUICK ANSWER
      The answer box reuses the theme's H2 blue left-rule language.
   -------------------------------------------------------------------------- */
.blog-article-body .cg-answer {
  background: var(--cg-card-bg);
  border-left: 5px solid var(--cg-blue);
  border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
  padding: 28px 30px;
  margin: 0 0 30px;
}
.blog-article-body .cg-answer p { margin: 0; font-size: var(--font-20, 20px); line-height: 1.6; }
.blog-article-body .cg-answer p + p { margin-top: 14px; }
.blog-article-body .cg-answer strong,
.blog-article-body .cg-answer b { color: var(--cg-black); }

.blog-article-body .cg-takeaways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 40px;
}
.blog-article-body .cg-takeaway {
  background: var(--cg-white);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg);
  padding: 24px;
  box-shadow: var(--cg-shadow-md);
}
.blog-article-body .cg-takeaway b {
  display: block;
  color: var(--cg-blue);
  font-size: var(--font-16, 16px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.blog-article-body .cg-takeaway span {
  display: block;
  color: var(--cg-grey);
  font-size: var(--font-16, 16px);
  line-height: 1.55;
}
/* accent rotation matches the theme's 6n card colour cycle */
.blog-article-body .cg-takeaway:nth-child(6n+1) { border-top: 4px solid var(--cg-blue); }
.blog-article-body .cg-takeaway:nth-child(6n+2) { border-top: 4px solid var(--cg-green); }
.blog-article-body .cg-takeaway:nth-child(6n+3) { border-top: 4px solid var(--cg-yellow); }
.blog-article-body .cg-takeaway:nth-child(6n+4) { border-top: 4px solid var(--cg-orange); }
.blog-article-body .cg-takeaway:nth-child(6n+5) { border-top: 4px solid var(--cg-purple); }
.blog-article-body .cg-takeaway:nth-child(6n+6) { border-top: 4px solid var(--cg-cyan); }

/* --------------------------------------------------------------------------
   3. CARD GRIDS  - built on the theme's .common-card look
   -------------------------------------------------------------------------- */
.blog-article-body .cg-grid-2,
.blog-article-body .cg-grid-3,
.blog-article-body .cg-grid-4 { display: grid; gap: 24px; margin: 0 0 40px; }
.blog-article-body .cg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-article-body .cg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-article-body .cg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.blog-article-body .cg-card {
  background: var(--cg-white);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg);
  padding: 30px;
  box-shadow: var(--cg-shadow-md);
  transition: all .3s ease;
}
.blog-article-body .cg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 136, 229, .1);
}
.blog-article-body .cg-card.is-soft { background: var(--cg-soft-bg); }
.blog-article-body .cg-card h3,
.blog-article-body .cg-card h4 { margin-top: 0; }
.blog-article-body .cg-card > :last-child { margin-bottom: 0; }

/* stat figure */
.blog-article-body .cg-stat {
  display: block;
  font-size: var(--font-44, 44px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--cg-black);
  margin-bottom: 10px;
  letter-spacing: -.5px;
}
.blog-article-body .cg-stat.is-blue   { color: var(--cg-blue); }
.blog-article-body .cg-stat.is-green  { color: var(--cg-green); }
.blog-article-body .cg-stat.is-orange { color: var(--cg-orange); }
.blog-article-body .cg-stat-label {
  display: block;
  color: var(--cg-black);
  font-weight: 700;
  font-size: var(--font-18, 18px);
  margin-bottom: 6px;
}
.blog-article-body .cg-stat-note {
  display: block;
  color: var(--cg-grey);
  font-size: var(--font-16, 16px);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. PROCESS FLOW  - numbered steps
   -------------------------------------------------------------------------- */
.blog-article-body .cg-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 40px;
}
.blog-article-body .cg-flow.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-article-body .cg-flow.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-article-body .cg-node {
  background: var(--cg-soft-bg);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg);
  padding: 26px 24px;
}
.blog-article-body .cg-node .cg-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cg-radius-sm);
  background: var(--cg-blue);
  color: var(--cg-white);
  font-weight: 800;
  font-size: var(--font-20, 20px);
  margin-bottom: 16px;
}
.blog-article-body .cg-node:nth-child(6n+1) .cg-num { background: var(--cg-blue); }
.blog-article-body .cg-node:nth-child(6n+2) .cg-num { background: var(--cg-green); }
.blog-article-body .cg-node:nth-child(6n+3) .cg-num { background: var(--cg-yellow); }
.blog-article-body .cg-node:nth-child(6n+4) .cg-num { background: var(--cg-orange); }
.blog-article-body .cg-node:nth-child(6n+5) .cg-num { background: var(--cg-purple); }
.blog-article-body .cg-node:nth-child(6n+6) .cg-num { background: var(--cg-cyan); }
.blog-article-body .cg-node h3,
.blog-article-body .cg-node h4 { margin: 0 0 8px; font-size: var(--font-20, 20px); }
.blog-article-body .cg-node p { margin: 0; font-size: var(--font-16, 16px); line-height: 1.55; }

/* --------------------------------------------------------------------------
   5. TIMELINE  - dated events (regulatory updates, transformation stories)
   -------------------------------------------------------------------------- */
.blog-article-body .cg-timeline { position: relative; margin: 0 0 40px; padding-left: 0; }
.blog-article-body .cg-timeline::before {
  content: "";
  position: absolute;
  left: 13px; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--cg-ring);
}
.blog-article-body .cg-event { position: relative; padding: 0 0 26px 48px; }
.blog-article-body .cg-event:last-child { padding-bottom: 0; }
.blog-article-body .cg-event::before {
  content: "";
  position: absolute;
  left: 5px; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cg-blue);
  border: 4px solid var(--cg-ring);
}
.blog-article-body .cg-event-date {
  display: inline-block;
  font-size: var(--font-14, 14px);
  font-weight: 800;
  color: var(--cg-blue);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.blog-article-body .cg-event h3,
.blog-article-body .cg-event h4 { margin: 0 0 8px; font-size: var(--font-20, 20px); }
.blog-article-body .cg-event p { margin: 0; font-size: var(--font-16, 16px); line-height: 1.55; }

/* --------------------------------------------------------------------------
   6. CALLOUT / METHOD / EDITOR NOTE
   -------------------------------------------------------------------------- */
.blog-article-body .cg-callout {
  background: var(--cg-card-bg);
  border: 1px solid var(--cg-ring);
  border-radius: var(--cg-radius-md);
  padding: 26px 28px;
  margin: 0 0 40px;
}
.blog-article-body .cg-callout > :last-child { margin-bottom: 0; }
.blog-article-body .cg-callout-title {
  display: block;
  font-weight: 800;
  color: var(--cg-black);
  font-size: var(--font-18, 18px);
  margin-bottom: 10px;
}
.blog-article-body .cg-method {
  background: var(--cg-soft-bg);
  border: 1px dashed var(--cg-blue);
  border-radius: var(--cg-radius-md);
  padding: 24px 26px;
  margin: 0 0 40px;
}
.blog-article-body .cg-method p { font-size: var(--font-16, 16px); margin: 0; line-height: 1.6; }
.blog-article-body .cg-method .cg-callout-title { color: var(--cg-blue); }

/* --------------------------------------------------------------------------
   7. RISK / STATUS COLOUR WORDS  (used inside tables)
   -------------------------------------------------------------------------- */
.blog-article-body .cg-risk-high   { color: var(--cg-orange); font-weight: 700; }
.blog-article-body .cg-risk-medium { color: var(--cg-amber-text);          font-weight: 700; }
.blog-article-body .cg-risk-low    { color: var(--cg-green);  font-weight: 700; }
.blog-article-body .cg-tag {
  display: inline-block;
  background: var(--cg-lightblue);
  color: var(--cg-blue);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: var(--font-14, 14px);
  font-weight: 800;
  letter-spacing: .3px;
}

/* --------------------------------------------------------------------------
   7b. TABLE SCROLL WRAPPER
       The theme styles .blog-article-body table already; this only stops a
       wide table from forcing the page body to scroll sideways.
   -------------------------------------------------------------------------- */
.blog-article-body .cg-table-scroll {
  overflow-x: auto;
  margin: 40px 0;
  border-radius: var(--cg-radius-md);
  -webkit-overflow-scrolling: touch;
}
.blog-article-body .cg-table-scroll table { margin: 0; min-width: 640px; }
.blog-article-body .cg-table-scroll + .cg-method { margin-top: -14px; }

/* --------------------------------------------------------------------------
   8. CHECKLIST / RED-FLAG LIST
      The theme already styles UL bullets blue; these are the tick / warn
      variants used by checklist and diagnostic formats.
   -------------------------------------------------------------------------- */
.blog-article-body ul.cg-check,
.blog-article-body ul.cg-flags { padding-left: 34px; }
.blog-article-body ul.cg-check li::before,
.blog-article-body ul.cg-flags li::before {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  left: -34px; top: 0;
  font-weight: 800;
  font-size: var(--font-18, 18px);
  line-height: 1.6;
}
.blog-article-body ul.cg-check li::before { content: "\2713"; color: var(--cg-green); }
.blog-article-body ul.cg-flags li::before { content: "\0021"; color: var(--cg-orange); }

/* --------------------------------------------------------------------------
   9. COMPARISON PANELS  (X vs Y, before/after)
   -------------------------------------------------------------------------- */
.blog-article-body .cg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 40px; }
.blog-article-body .cg-compare > div {
  border-radius: var(--cg-radius-lg);
  padding: 30px;
  border: 1px solid var(--cg-line);
  background: var(--cg-white);
}
.blog-article-body .cg-compare > div:first-child { background: var(--cg-soft-bg); }
.blog-article-body .cg-compare > div:last-child  { background: var(--cg-card-bg); border-color: var(--cg-ring); }
.blog-article-body .cg-compare h3,
.blog-article-body .cg-compare h4 { margin-top: 0; }
.blog-article-body .cg-compare > div > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. EXPERT QUOTE
   -------------------------------------------------------------------------- */
.blog-article-body .cg-expert {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--cg-soft-bg);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg);
  padding: 30px;
  margin: 0 0 40px;
}
.blog-article-body .cg-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--cg-blue);
  color: var(--cg-white);
  display: grid; place-items: center;
  font-weight: 800; font-size: var(--font-24, 24px);
}
.blog-article-body .cg-quote {
  font-size: var(--font-22, 22px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--cg-black);
  border-left: 4px solid var(--cg-blue);
  padding-left: 20px;
  margin-bottom: 14px;
}
.blog-article-body .cg-expert cite {
  font-style: normal;
  font-size: var(--font-16, 16px);
  color: var(--cg-grey);
}
.blog-article-body .cg-expert cite b { color: var(--cg-black); }

/* --------------------------------------------------------------------------
   10b. BUTTON RESET INSIDE THE ARTICLE BODY  -- REQUIRED
       The theme styles `.blog-article-body a` as a blue underlined text link
       (specificity 0,2,0), which beats the theme's own `a.common-btn` rule
       (0,1,1). Without this reset every button inside the article renders as
       blue text on a blue fill and is invisible. Do not remove.
   -------------------------------------------------------------------------- */
.blog-article-body a.common-btn,
.blog-article-body a.common-btn-white,
.blog-article-body a.common-btn-white-blue-border,
.blog-article-body a.common-btn-ghost {
  text-decoration: none;
  font-weight: 600;
}
.blog-article-body a.common-btn { color: var(--cg-white); }
.blog-article-body a.common-btn:hover { color: var(--cg-white); text-decoration: none; }
.blog-article-body a.common-btn-white,
.blog-article-body a.common-btn-white-blue-border { color: var(--cg-blue); }
.blog-article-body a.common-btn-white:hover,
.blog-article-body a.common-btn-white-blue-border:hover { color: var(--cg-white); }

/* --------------------------------------------------------------------------
   11. INLINE CTA  - three per article, at regular intervals.
       Uses the theme's own button classes inside.
   -------------------------------------------------------------------------- */
.blog-article-body .cg-inline-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  border-radius: var(--cg-radius-lg);
  padding: 34px 36px;
  margin: 50px 0;
  border: 1px solid var(--cg-ring);
  background: var(--cg-card-bg);
}
.blog-article-body .cg-inline-cta .cg-cta-eyebrow {
  display: block;
  font-size: var(--font-14, 14px);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cg-blue);
  margin-bottom: 8px;
}
.blog-article-body .cg-inline-cta .cg-cta-title {
  font-size: var(--font-26, 26px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--cg-black);
  margin: 0 0 10px;
}
.blog-article-body .cg-inline-cta p {
  margin: 0;
  font-size: var(--font-18, 18px);
  line-height: 1.55;
  color: var(--cg-grey);
}
.blog-article-body .cg-inline-cta a { text-decoration: none; }

/* solid blue variant - CTA 2 */
.blog-article-body .cg-inline-cta.is-blue {
  background: var(--cg-blue);
  border-color: var(--cg-blue);
  box-shadow: 0 12px 18px -4px rgba(30, 136, 229, .25), 0 4px 8px -4px rgba(30, 136, 229, .25);
}
.blog-article-body .cg-inline-cta.is-blue .cg-cta-eyebrow,
.blog-article-body .cg-inline-cta.is-blue .cg-cta-title,
.blog-article-body .cg-inline-cta.is-blue p { color: var(--cg-white); }
.blog-article-body .cg-inline-cta.is-blue p { opacity: .92; }

/* dark variant - CTA 3 / closing */
.blog-article-body .cg-inline-cta.is-dark {
  background: var(--cg-black);
  border-color: var(--cg-black);
}
.blog-article-body .cg-inline-cta.is-dark .cg-cta-eyebrow { color: var(--cg-on-dark-2); }
.blog-article-body .cg-inline-cta.is-dark .cg-cta-title { color: var(--cg-white); }
.blog-article-body .cg-inline-cta.is-dark p { color: var(--cg-on-dark); }

/* --------------------------------------------------------------------------
   12. CLOSING CTA BLOCK
   -------------------------------------------------------------------------- */
.blog-article-body .cg-closing-cta {
  background: var(--cg-blue);
  border-radius: var(--cg-radius-lg);
  padding: 50px;
  text-align: center;
  margin: 50px 0 0;
  box-shadow: 0 12px 18px -4px rgba(30, 136, 229, .25);
}
.blog-article-body .cg-closing-cta h2 {
  color: var(--cg-white);
  border-left: none;
  padding-left: 0;
  text-align: center;
  margin: 0 0 16px;
}
.blog-article-body .cg-closing-cta p {
  color: var(--cg-white);
  opacity: .92;
  max-width: 720px;
  margin: 0 auto 30px;
}
.blog-article-body .cg-closing-cta .cg-cta-buttons {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.blog-article-body .cg-closing-cta a.common-btn {
  background: var(--cg-white);
  color: var(--cg-blue);
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, .12);
}
.blog-article-body .cg-closing-cta a.common-btn:hover { background: var(--cg-white); color: var(--cg-black); }
.blog-article-body .cg-closing-cta a.common-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--cg-radius-sm);
  border: 1px solid rgba(255, 255, 255, .6);
  color: var(--cg-white);
  font-size: var(--font-18, 18px);
  font-weight: 600;
  padding: 18px 24px;
  text-decoration: none;
  transition: all .4s cubic-bezier(.23, 1, .32, 1);
}
.blog-article-body .cg-closing-cta a.common-btn-ghost:hover {
  background: var(--cg-white); color: var(--cg-blue); border-color: var(--cg-white);
}

/* --------------------------------------------------------------------------
   13. FAQ  - Bootstrap 5 accordion, styled exactly like .faq-section on the
       live service pages so the blog FAQ and the service FAQ are identical.
   -------------------------------------------------------------------------- */
.blog-article-body .cg-faq .accordion-item {
  border: none;
  background-color: var(--cg-card-bg);
  border-radius: var(--cg-radius-sm) !important;
  margin-bottom: 20px;
  overflow: hidden;
}
.blog-article-body .cg-faq .accordion-button {
  font-size: var(--font-20, 20px);
  font-weight: 600;
  color: var(--cg-black);
  padding: 24px;
  background-color: transparent;
  line-height: normal;
  box-shadow: none;
}
.blog-article-body .cg-faq .accordion-button:not(.collapsed) { color: var(--cg-black); }
.blog-article-body .cg-faq .accordion-button::after { background-size: 16px; width: 16px; height: 16px; margin-right: 10px; }
.blog-article-body .cg-faq .accordion-body { padding: 0 24px 24px; }
.blog-article-body .cg-faq .accordion-body p { font-size: var(--font-18, 18px); color: var(--cg-grey); line-height: 1.6; margin: 0; }
.blog-article-body .cg-faq .accordion-body p + p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   14. SOURCES / REFERENCES
   -------------------------------------------------------------------------- */
.blog-article-body .cg-sources {
  border-top: 2px solid var(--cg-line);
  margin-top: 50px;
  padding-top: 30px;
}
.blog-article-body .cg-sources h3 {
  font-size: var(--font-18, 18px);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 18px;
}
.blog-article-body .cg-sources ol { margin-bottom: 0; }
.blog-article-body .cg-sources li { font-size: var(--font-16, 16px); }

/* review / disclosure strip */
.blog-article-body .cg-review-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--cg-line);
  margin-top: 30px; padding-top: 24px;
}
.blog-article-body .cg-review-strip span {
  font-size: var(--font-14, 14px);
  color: var(--cg-grey);
  background: var(--cg-soft-bg);
  border: 1px solid var(--cg-line);
  border-radius: 50px;
  padding: 8px 16px;
}
.blog-article-body .cg-disclaimer {
  margin-top: 20px;
  font-size: var(--font-14, 14px);
  color: var(--cg-grey);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   15. SIDEBAR: table of contents card
       Sits inside the theme's existing .sidebar-wrapper, so it inherits the
       card's padding, radius, border and shadow.
   -------------------------------------------------------------------------- */
.cg-toc-list { list-style: none; margin: 0; padding: 4px 0; max-height: 52vh; overflow-y: auto; scroll-padding-block: 12px; overscroll-behavior: contain; }
.cg-toc-list li { margin-bottom: 4px; }
.cg-toc-list a {
  display: block;
  padding: 9px 14px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--grey, #555);
  font-size: var(--font-16, 16px);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.cg-toc-list a:hover { color: var(--blue, #1e88e5); background: var(--light-blue-bg, #f8fcff); }
.cg-toc-list a.is-active {
  background: var(--light-blue-bg, #f8fcff);
  border-left-color: var(--blue, #1e88e5);
  color: var(--blue, #1e88e5);
  font-weight: 700;
}
.cg-toc-list a.cg-toc-l3 { padding-left: 28px; font-size: var(--font-14, 14px); }

/* reading progress bar - pinned under the live sticky header */
.cg-progress {
  position: fixed; left: 0; right: 0; top: 0;
  height: 3px; z-index: 9999; pointer-events: none;
}
.cg-progress span { display: block; width: 0; height: 100%; background: var(--blue, #1e88e5); transition: width .1s linear; }

/* hero chips row already exists in theme (.hero-meta-wrapper / .hero-chip);
   this adds only the read-time chip variant */
.hero-chip.is-read { background: var(--white, #fff); color: var(--grey, #555); border-color: var(--border-color, #dfdfdf); }

/* --------------------------------------------------------------------------
   16. RESPONSIVE - mirrors the theme's own breakpoints exactly
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  .blog-article-body .cg-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-article-body .cg-takeaways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-article-body .cg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .blog-article-body .cg-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .blog-article-body .cg-inline-cta { grid-template-columns: 1fr; padding: 28px; }
  .blog-article-body .cg-closing-cta { padding: 40px 28px; }
  .cg-toc-list { max-height: none; }
}
@media (max-width: 767px) {
  .blog-article-body .cg-flow,
  .blog-article-body .cg-flow.is-4,
  .blog-article-body .cg-flow.is-3,
  .blog-article-body .cg-grid-2,
  .blog-article-body .cg-grid-3,
  .blog-article-body .cg-grid-4,
  .blog-article-body .cg-takeaways,
  .blog-article-body .cg-compare { grid-template-columns: 1fr; }
  .blog-article-body .cg-expert { grid-template-columns: 1fr; text-align: left; }
  .blog-article-body .cg-avatar { margin-bottom: 6px; }
  .blog-article-body .cg-kicker { margin-top: 40px; }
  .blog-article-body .cg-answer { padding: 22px 24px; }
}

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .cg-progress,
  .blog-sidebar-area,
  .blog-article-body .cg-inline-cta,
  .blog-article-body .cg-closing-cta { display: none !important; }
  .blog-detail-grid { display: block !important; }
  .blog-article-body .cg-card,
  .blog-article-body .cg-node,
  .blog-article-body table { break-inside: avoid; }
}

/* ==========================================================================
   PART 2 - FORMAT SIGNATURE MODULES
   --------------------------------------------------------------------------
   The modules above are shared. Everything below belongs to a specific blog
   FORMAT and gives it its own page architecture, so a reader can tell a
   compliance guide from a case study from a checklist at a glance.

   Same rule as Part 1: every value resolves to a live theme variable.
   Per-format usage limits are in rule book section 5.
   ========================================================================== */

/* -- 01 INDUSTRY DEEP DIVE -------------------------------------------------
   At-a-glance panel, revenue layers, KPI matrix, maturity ladder. */
.blog-article-body .cg-atglance {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg);
  overflow: hidden; margin: 0 0 44px; background: var(--cg-white);
  box-shadow: var(--cg-shadow-sm);
}
.blog-article-body .cg-atglance > div { padding: 28px 26px; border-right: 1px solid var(--cg-line); }
.blog-article-body .cg-atglance > div:last-child { border-right: none; }
.blog-article-body .cg-atglance dt {
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--cg-blue); margin-bottom: 10px;
}
.blog-article-body .cg-atglance dd {
  margin: 0; font-size: var(--font-18, 18px); line-height: 1.5; color: var(--cg-black); font-weight: 600;
}
.blog-article-body .cg-atglance dd span { display: block; font-weight: 400; color: var(--cg-grey);
  font-size: var(--font-16, 16px); margin-top: 6px; }

.blog-article-body .cg-layers { margin: 0 0 44px; }
.blog-article-body .cg-layer {
  display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--cg-line);
}
.blog-article-body .cg-layer:last-child { border-bottom: none; }
.blog-article-body .cg-layer-name {
  font-size: var(--font-22, 22px); font-weight: 800; color: var(--cg-black); line-height: 1.3;
  padding-left: 16px; border-left: 4px solid var(--cg-blue);
}
.blog-article-body .cg-layer:nth-child(6n+2) .cg-layer-name { border-left-color: var(--cg-green); }
.blog-article-body .cg-layer:nth-child(6n+3) .cg-layer-name { border-left-color: var(--cg-yellow); }
.blog-article-body .cg-layer:nth-child(6n+4) .cg-layer-name { border-left-color: var(--cg-orange); }
.blog-article-body .cg-layer:nth-child(6n+5) .cg-layer-name { border-left-color: var(--cg-purple); }
.blog-article-body .cg-layer:nth-child(6n+6) .cg-layer-name { border-left-color: var(--cg-cyan); }
.blog-article-body .cg-layer-body > :last-child { margin-bottom: 0; }

.blog-article-body .cg-ladder { counter-reset: rung; margin: 0 0 44px; }
.blog-article-body .cg-rung {
  counter-increment: rung; position: relative; padding: 26px 30px 26px 96px;
  background: var(--cg-soft-bg); border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg); margin-bottom: 14px;
}
.blog-article-body .cg-rung::before {
  content: "STAGE " counter(rung); position: absolute; left: 26px; top: 28px;
  font-size: var(--font-14, 14px); font-weight: 800; color: var(--cg-blue);
  letter-spacing: .5px; width: 60px; line-height: 1.3;
}
.blog-article-body .cg-rung h4 { margin: 0 0 8px; }
.blog-article-body .cg-rung p { margin: 0; font-size: var(--font-16, 16px); }

/* -- 02 STATE / LOCAL COMPLIANCE -------------------------------------------
   Obligation strip, filing calendar, exemption matrix. Reads like a manual. */
.blog-article-body .cg-oblig {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border: 2px solid var(--cg-blue); border-radius: var(--cg-radius-lg);
  overflow: hidden; margin: 0 0 44px;
}
.blog-article-body .cg-oblig > div { padding: 26px 28px; background: var(--cg-card-bg);
  border-right: 1px solid var(--cg-ring); }
.blog-article-body .cg-oblig > div:last-child { border-right: none; }
.blog-article-body .cg-oblig-q {
  display: block; font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--cg-blue); margin-bottom: 10px;
}
.blog-article-body .cg-oblig-a { font-size: var(--font-20, 20px); font-weight: 700;
  color: var(--cg-black); line-height: 1.35; margin: 0 0 8px; }
.blog-article-body .cg-oblig p { margin: 0; font-size: var(--font-16, 16px); }

.blog-article-body .cg-calendar { margin: 0 0 44px; border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg); overflow: hidden; }
.blog-article-body .cg-cal-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px;
  padding: 22px 26px; border-bottom: 1px solid var(--cg-line); background: var(--cg-white);
}
.blog-article-body .cg-cal-row:last-child { border-bottom: none; }
.blog-article-body .cg-cal-row:nth-child(odd) { background: var(--cg-soft-bg); }
.blog-article-body .cg-cal-when {
  font-size: var(--font-16, 16px); font-weight: 800; color: var(--cg-blue);
  text-transform: uppercase; letter-spacing: .5px; line-height: 1.4;
}
.blog-article-body .cg-cal-what { font-size: var(--font-16, 16px); line-height: 1.55; }
.blog-article-body .cg-cal-what b { display: block; color: var(--cg-black); margin-bottom: 4px;
  font-size: var(--font-18, 18px); }

/* -- 03 MULTI-STATE COMPARISON --------------------------------------------
   Wide matrix with a pinned first column, plus per-state cards. */
.blog-article-body .cg-matrix { overflow-x: auto; margin: 0 0 44px;
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-md); }
.blog-article-body .cg-matrix table { margin: 0; min-width: 860px; border: none; border-radius: 0; }
.blog-article-body .cg-matrix th:first-child,
.blog-article-body .cg-matrix td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--cg-white);
  border-right: 2px solid var(--cg-ring); font-weight: 700; color: var(--cg-black);
}
.blog-article-body .cg-matrix th:first-child { background: var(--cg-lightblue); z-index: 3; }
.blog-article-body .cg-matrix td { font-size: var(--font-16, 16px); }

.blog-article-body .cg-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; margin: 0 0 44px; }
.blog-article-body .cg-state {
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg);
  background: var(--cg-white); overflow: hidden; box-shadow: var(--cg-shadow-md);
}
.blog-article-body .cg-state-head {
  background: var(--cg-soft-bg); padding: 20px 26px; border-bottom: 1px solid var(--cg-line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.blog-article-body .cg-state-head h3,
.blog-article-body .cg-state-head h4 { margin: 0; font-size: var(--font-22, 22px); }
.blog-article-body .cg-state-body { padding: 24px 26px; }
.blog-article-body .cg-state-body dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; }
.blog-article-body .cg-state-body dt { font-size: var(--font-14, 14px); font-weight: 800;
  color: var(--cg-grey); text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; }
.blog-article-body .cg-state-body dd { margin: 0; font-size: var(--font-16, 16px);
  color: var(--cg-black); line-height: 1.5; }

/* -- 04 REGULATORY / TAX UPDATE -------------------------------------------
   Dated brief bar and per-change blocks. Urgent, scannable. */
.blog-article-body .cg-changebar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--cg-black); border-radius: var(--cg-radius-lg);
  overflow: hidden; margin: 0 0 44px;
}
.blog-article-body .cg-changebar > div { padding: 26px 24px; border-right: 1px solid rgba(255,255,255,.12); }
.blog-article-body .cg-changebar > div:last-child { border-right: none; }
.blog-article-body .cg-changebar dt { font-size: var(--font-14, 14px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: var(--cg-on-dark-2); margin-bottom: 8px; }
.blog-article-body .cg-changebar dd { margin: 0; color: var(--cg-white);
  font-size: var(--font-18, 18px); font-weight: 600; line-height: 1.45; }

.blog-article-body .cg-change {
  border: 1px solid var(--cg-line); border-left: 5px solid var(--cg-blue);
  border-radius: 0 var(--cg-radius-lg) var(--cg-radius-lg) 0;
  padding: 28px 30px; margin: 0 0 20px; background: var(--cg-white);
}
.blog-article-body .cg-change.is-action { border-left-color: var(--cg-orange); background: var(--cg-soft-bg); }
.blog-article-body .cg-change.is-watch  { border-left-color: var(--cg-green); }
.blog-article-body .cg-change-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.blog-article-body .cg-change-meta span {
  font-size: var(--font-14, 14px); font-weight: 700; padding: 5px 14px; border-radius: 50px;
  background: var(--cg-card-bg); color: var(--cg-blue); border: 1px solid var(--cg-ring);
}
.blog-article-body .cg-change h3,
.blog-article-body .cg-change h4 { margin: 0 0 10px; }
.blog-article-body .cg-change > p:last-child { margin-bottom: 0; }

/* -- 05 MISTAKES & RISKS ---------------------------------------------------
   Numbered mistake unit: symptom / cost / detect / fix. The body IS these. */
.blog-article-body .cg-mistake {
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg);
  margin: 0 0 24px; overflow: hidden; background: var(--cg-white); box-shadow: var(--cg-shadow-md);
}
.blog-article-body .cg-mistake-head {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: center;
  padding: 24px 28px; background: var(--cg-soft-bg); border-bottom: 1px solid var(--cg-line);
}
.blog-article-body .cg-mistake-no {
  width: 56px; height: 56px; border-radius: var(--cg-radius-sm); background: var(--cg-orange);
  color: var(--cg-white); display: grid; place-items: center;
  font-size: var(--font-24, 24px); font-weight: 800;
}
.blog-article-body .cg-mistake-head h3,
.blog-article-body .cg-mistake-head h4 { margin: 0; font-size: var(--font-22, 22px); }
.blog-article-body .cg-sev {
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  padding: 7px 16px; border-radius: 50px; white-space: nowrap;
}
.blog-article-body .cg-sev.high   { background: var(--cg-tint-orange); color: var(--cg-orange); }
.blog-article-body .cg-sev.medium { background: var(--cg-tint-amber); color: var(--cg-amber-text); }
.blog-article-body .cg-sev.low    { background: var(--cg-tint-green); color: var(--cg-green); }
.blog-article-body .cg-mistake-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog-article-body .cg-mistake-grid > div { padding: 24px 28px; border-right: 1px solid var(--cg-line); }
.blog-article-body .cg-mistake-grid > div:last-child { border-right: none; }
.blog-article-body .cg-mistake-grid dt {
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--cg-blue); margin-bottom: 10px;
}
.blog-article-body .cg-mistake-grid dd { margin: 0; font-size: var(--font-16, 16px);
  line-height: 1.55; color: var(--cg-grey); }

/* -- 06 DIAGNOSTIC / RED FLAGS --------------------------------------------
   Symptom checker rows and a self-score block. */
.blog-article-body .cg-symptoms { margin: 0 0 44px; border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg); overflow: hidden; }
.blog-article-body .cg-symptom {
  display: grid; grid-template-columns: 44px 1fr 190px; gap: 20px; align-items: start;
  padding: 22px 26px; border-bottom: 1px solid var(--cg-line); background: var(--cg-white);
}
.blog-article-body .cg-symptom:last-child { border-bottom: none; }
.blog-article-body .cg-symptom:nth-child(even) { background: var(--cg-soft-bg); }
.blog-article-body .cg-symptom-box {
  width: 26px; height: 26px; border: 2px solid var(--cg-blue); border-radius: 6px; margin-top: 2px;
}
.blog-article-body .cg-symptom-text { font-size: var(--font-18, 18px); line-height: 1.5; color: var(--cg-black); }
.blog-article-body .cg-symptom-text span { display: block; color: var(--cg-grey);
  font-size: var(--font-16, 16px); margin-top: 5px; }
.blog-article-body .cg-symptom-zone {
  font-size: var(--font-14, 14px); font-weight: 800; color: var(--cg-blue);
  text-transform: uppercase; letter-spacing: .5px; text-align: right; padding-top: 4px;
}
.blog-article-body .cg-score {
  background: var(--cg-black); border-radius: var(--cg-radius-lg); padding: 36px 40px; margin: 0 0 44px;
}
.blog-article-body .cg-score h3, .blog-article-body .cg-score h4 { color: var(--cg-white); margin: 0 0 18px; }
.blog-article-body .cg-score-rows { display: grid; gap: 12px; }
.blog-article-body .cg-score-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 22px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12);
}
.blog-article-body .cg-score-row b { color: var(--cg-on-dark-2); font-size: var(--font-20, 20px); font-weight: 800; }
.blog-article-body .cg-score-row span { color: var(--cg-on-dark); font-size: var(--font-16, 16px); line-height: 1.5; }

/* -- 07 HOW-TO / PROCESS ---------------------------------------------------
   Full-width numbered steps. Each step: action, verify, common error. */
.blog-article-body .cg-prereq {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 44px;
}
.blog-article-body .cg-prereq > div {
  background: var(--cg-card-bg); border: 1px solid var(--cg-ring);
  border-radius: var(--cg-radius-md); padding: 22px 24px;
}
.blog-article-body .cg-prereq dt { font-size: var(--font-14, 14px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px; color: var(--cg-blue); margin-bottom: 8px; }
.blog-article-body .cg-prereq dd { margin: 0; font-size: var(--font-18, 18px);
  font-weight: 600; color: var(--cg-black); line-height: 1.45; }

.blog-article-body .cg-step {
  display: grid; grid-template-columns: 84px 1fr; gap: 28px;
  padding: 34px 0; border-top: 2px solid var(--cg-line);
}
.blog-article-body .cg-step:last-of-type { border-bottom: 2px solid var(--cg-line); margin-bottom: 44px; }
.blog-article-body .cg-step-no {
  width: 68px; height: 68px; border-radius: 50%; background: var(--cg-blue); color: var(--cg-white);
  display: grid; place-items: center; font-size: var(--font-30, 30px); font-weight: 800;
}
.blog-article-body .cg-step h3, .blog-article-body .cg-step h4 { margin: 6px 0 12px; }
.blog-article-body .cg-step-note {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--cg-line); font-size: var(--font-16, 16px);
}
.blog-article-body .cg-step-note b {
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; padding-top: 2px;
}
.blog-article-body .cg-step-note.verify b { color: var(--cg-green); }
.blog-article-body .cg-step-note.error  b { color: var(--cg-orange); }
.blog-article-body .cg-step-note span { line-height: 1.55; }

/* -- 08 CHECKLIST / DUE DILIGENCE -----------------------------------------
   Grouped, printable. The checklist is the article, not a decoration. */
.blog-article-body .cg-scope {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg);
  background: var(--cg-soft-bg); overflow: hidden; margin: 0 0 44px;
}
.blog-article-body .cg-scope > div { padding: 24px; border-right: 1px solid var(--cg-line); }
.blog-article-body .cg-scope > div:last-child { border-right: none; }
.blog-article-body .cg-scope dt { font-size: var(--font-14, 14px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px; color: var(--cg-blue); margin-bottom: 8px; }
.blog-article-body .cg-scope dd { margin: 0; font-size: var(--font-18, 18px); color: var(--cg-black);
  font-weight: 600; line-height: 1.45; }

.blog-article-body .cg-cl-group {
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg);
  overflow: hidden; margin: 0 0 24px; background: var(--cg-white);
}
.blog-article-body .cg-cl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 28px; background: var(--cg-lightblue); border-bottom: 1px solid var(--cg-ring);
}
.blog-article-body .cg-cl-head h3, .blog-article-body .cg-cl-head h4 { margin: 0; font-size: var(--font-22, 22px); }
.blog-article-body .cg-cl-count {
  font-size: var(--font-14, 14px); font-weight: 800; color: var(--cg-blue);
  background: var(--cg-white); border-radius: 50px; padding: 6px 16px; white-space: nowrap;
}
.blog-article-body ul.cg-cl-items { list-style: none; margin: 0; padding: 0; }
.blog-article-body ul.cg-cl-items li {
  display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start;
  padding: 18px 28px; margin: 0; border-bottom: 1px solid var(--cg-line);
  font-size: var(--font-18, 18px); line-height: 1.55;
}
.blog-article-body ul.cg-cl-items li:last-child { border-bottom: none; }
.blog-article-body ul.cg-cl-items li::before {
  content: ""; position: static; width: 24px; height: 24px; border: 2px solid var(--cg-blue);
  border-radius: 6px; background: none; margin-top: 2px;
}
.blog-article-body ul.cg-cl-items li em {
  display: block; font-style: normal; color: var(--cg-grey);
  font-size: var(--font-16, 16px); margin-top: 5px;
}

/* -- 09 COST / PRICING / BENCHMARK ----------------------------------------
   Weighted driver bars, exclusions, TCO worksheet. */
.blog-article-body .cg-drivers { margin: 0 0 44px; }
.blog-article-body .cg-driver {
  display: grid; grid-template-columns: 260px 1fr 120px; gap: 24px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--cg-line);
}
.blog-article-body .cg-driver:last-child { border-bottom: none; }
.blog-article-body .cg-driver-name { font-size: var(--font-18, 18px); font-weight: 700; color: var(--cg-black); }
.blog-article-body .cg-driver-name span { display: block; font-weight: 400; color: var(--cg-grey);
  font-size: var(--font-16, 16px); margin-top: 4px; line-height: 1.45; }
.blog-article-body .cg-bar { height: 14px; background: var(--cg-lightblue); border-radius: 50px; overflow: hidden; }
.blog-article-body .cg-bar i { display: block; height: 100%; background: var(--cg-blue); border-radius: 50px; }
.blog-article-body .cg-driver:nth-child(6n+2) .cg-bar i { background: var(--cg-green); }
.blog-article-body .cg-driver:nth-child(6n+3) .cg-bar i { background: var(--cg-orange); }
.blog-article-body .cg-driver:nth-child(6n+4) .cg-bar i { background: var(--cg-purple); }
.blog-article-body .cg-driver:nth-child(6n+5) .cg-bar i { background: var(--cg-cyan); }
.blog-article-body .cg-driver-val {
  font-size: var(--font-14, 14px); font-weight: 800; color: var(--cg-blue);
  text-transform: uppercase; letter-spacing: .5px; text-align: right;
}
.blog-article-body .cg-tco {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg); overflow: hidden; margin: 0 0 44px;
}
.blog-article-body .cg-tco > div { padding: 30px 32px; }
.blog-article-body .cg-tco > div:first-child { background: var(--cg-soft-bg); border-right: 1px solid var(--cg-line); }
.blog-article-body .cg-tco h4 { margin: 0 0 16px; }
.blog-article-body .cg-tco ul { margin: 0; }
.blog-article-body .cg-tco li { font-size: var(--font-16, 16px); }

/* -- 10 COMPARISON / DECISION ---------------------------------------------
   Verdict box first, then head-to-head and a scorecard. */
.blog-article-body .cg-verdict {
  border: 2px solid var(--cg-blue); border-radius: var(--cg-radius-lg);
  overflow: hidden; margin: 0 0 44px;
}
.blog-article-body .cg-verdict-head {
  background: var(--cg-blue); color: var(--cg-white); padding: 20px 30px;
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
}
.blog-article-body .cg-verdict-rows { background: var(--cg-white); }
.blog-article-body .cg-verdict-row {
  display: grid; grid-template-columns: 230px 1fr; gap: 26px;
  padding: 24px 30px; border-bottom: 1px solid var(--cg-line);
}
.blog-article-body .cg-verdict-row:last-child { border-bottom: none; }
.blog-article-body .cg-verdict-row b { font-size: var(--font-20, 20px); color: var(--cg-black); line-height: 1.35; }
.blog-article-body .cg-verdict-row span { font-size: var(--font-16, 16px); color: var(--cg-grey); line-height: 1.6; }

.blog-article-body .cg-scorecard { overflow-x: auto; margin: 0 0 44px; border-radius: var(--cg-radius-md); }
.blog-article-body .cg-scorecard table { margin: 0; min-width: 700px; }
.blog-article-body .cg-dots { white-space: nowrap; letter-spacing: 3px; color: var(--cg-blue); font-size: 18px; }
.blog-article-body .cg-dots i { opacity: .18; font-style: normal; }

/* -- 11 CASE STUDY ---------------------------------------------------------
   Result strip, then a narrative arc. */
.blog-article-body .cg-result {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-radius: var(--cg-radius-lg); overflow: hidden; margin: 0 0 44px;
  background: var(--cg-black);
}
.blog-article-body .cg-result > div { padding: 30px 26px; border-right: 1px solid rgba(255,255,255,.12); }
.blog-article-body .cg-result > div:last-child { border-right: none; }
.blog-article-body .cg-result dt { font-size: var(--font-14, 14px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: var(--cg-on-dark-2); margin-bottom: 12px; }
.blog-article-body .cg-result dd { margin: 0; }
.blog-article-body .cg-result .was { color: var(--cg-on-dark-3); font-size: var(--font-18, 18px);
  text-decoration: line-through; display: block; margin-bottom: 4px; }
.blog-article-body .cg-result .now { color: var(--cg-white); font-size: var(--font-32, 32px);
  font-weight: 800; line-height: 1.1; display: block; }

.blog-article-body .cg-arc { margin: 0 0 44px; }
.blog-article-body .cg-arc-stage {
  position: relative; padding: 0 0 40px 46px; border-left: 2px solid var(--cg-ring);
}
.blog-article-body .cg-arc-stage:last-child { border-left-color: transparent; padding-bottom: 0; }
.blog-article-body .cg-arc-stage::before {
  content: ""; position: absolute; left: -11px; top: 4px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--cg-blue); border: 4px solid var(--cg-white);
  box-shadow: 0 0 0 2px var(--cg-ring);
}
.blog-article-body .cg-arc-label {
  display: inline-block; font-size: var(--font-14, 14px); font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--cg-blue); margin-bottom: 10px;
}
.blog-article-body .cg-arc-stage > :last-child { margin-bottom: 0; }

/* -- 12 GROWTH / CFO STRATEGY ---------------------------------------------
   Thesis statement, stage bar, decision framework. Prose-led. */
.blog-article-body .cg-thesis {
  border-top: 4px solid var(--cg-blue); border-bottom: 1px solid var(--cg-line);
  padding: 34px 0 30px; margin: 0 0 44px;
}
.blog-article-body .cg-thesis-label {
  display: block; font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--cg-blue); margin-bottom: 14px;
}
.blog-article-body .cg-thesis p {
  font-size: var(--font-26, 26px); line-height: 1.45; font-weight: 600;
  color: var(--cg-black); margin: 0;
}
.blog-article-body .cg-stagebar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 44px;
}
.blog-article-body .cg-stagebar > div {
  background: var(--cg-soft-bg); border-top: 4px solid var(--cg-blue); padding: 24px 22px;
}
.blog-article-body .cg-stagebar > div:nth-child(2) { border-top-color: var(--cg-green); }
.blog-article-body .cg-stagebar > div:nth-child(3) { border-top-color: var(--cg-orange); }
.blog-article-body .cg-stagebar > div:nth-child(4) { border-top-color: var(--cg-purple); }
.blog-article-body .cg-stagebar dt { font-size: var(--font-18, 18px); font-weight: 800;
  color: var(--cg-black); margin-bottom: 10px; }
.blog-article-body .cg-stagebar dd { margin: 0; font-size: var(--font-16, 16px);
  color: var(--cg-grey); line-height: 1.55; }
.blog-article-body .cg-framework {
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg);
  padding: 34px 36px; margin: 0 0 44px; background: var(--cg-soft-bg);
}
.blog-article-body .cg-framework ol { margin: 0; counter-reset: fw; list-style: none; padding-left: 0; }
.blog-article-body .cg-framework li {
  counter-increment: fw; position: relative; padding-left: 56px; margin-bottom: 22px;
  font-size: var(--font-18, 18px); line-height: 1.6;
}
.blog-article-body .cg-framework li:last-child { margin-bottom: 0; }
.blog-article-body .cg-framework li::before {
  content: counter(fw); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%; background: var(--cg-blue); color: var(--cg-white);
  display: grid; place-items: center; font-size: var(--font-16, 16px); font-weight: 800;
}
.blog-article-body .cg-framework li b { display: block; color: var(--cg-black); margin-bottom: 4px; }

/* -- 13 SERVICE BUYER GUIDE -----------------------------------------------
   Question units: ask / strong answer / weak answer. */
.blog-article-body .cg-qa {
  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-lg);
  overflow: hidden; margin: 0 0 20px; background: var(--cg-white);
}
.blog-article-body .cg-qa-q {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center;
  padding: 22px 26px; background: var(--cg-card-bg); border-bottom: 1px solid var(--cg-ring);
}
.blog-article-body .cg-qa-no {
  width: 40px; height: 40px; border-radius: 50%; background: var(--cg-blue); color: var(--cg-white);
  display: grid; place-items: center; font-size: var(--font-16, 16px); font-weight: 800;
}
.blog-article-body .cg-qa-q h4, .blog-article-body .cg-qa-q h3 { margin: 0; font-size: var(--font-20, 20px); }
.blog-article-body .cg-qa-a { display: grid; grid-template-columns: 1fr 1fr; }
.blog-article-body .cg-qa-a > div { padding: 22px 26px; }
.blog-article-body .cg-qa-a > div:first-child { border-right: 1px solid var(--cg-line); }
.blog-article-body .cg-qa-a dt {
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; margin-bottom: 10px;
}
.blog-article-body .cg-qa-a > div:first-child dt { color: var(--cg-green); }
.blog-article-body .cg-qa-a > div:last-child dt { color: var(--cg-orange); }
.blog-article-body .cg-qa-a dd { margin: 0; font-size: var(--font-16, 16px);
  line-height: 1.55; color: var(--cg-grey); }

/* -- 14 TECHNOLOGY / AUTOMATION -------------------------------------------
   Layered stack diagram and a configuration table. */
.blog-article-body .cg-stack { margin: 0 0 44px; }
.blog-article-body .cg-stack-layer {
  display: grid; grid-template-columns: minmax(145px, .72fr) minmax(0, 2fr) minmax(190px, .9fr);
  gap: 20px; align-items: center;
  padding: 24px; border: 1px solid var(--cg-line); border-radius: var(--cg-radius-md);
  margin-bottom: 10px; background: var(--cg-white);
}
.blog-article-body .cg-stack-layer:nth-child(6n+1) { border-left: 6px solid var(--cg-blue); }
.blog-article-body .cg-stack-layer:nth-child(6n+2) { border-left: 6px solid var(--cg-green); }
.blog-article-body .cg-stack-layer:nth-child(6n+3) { border-left: 6px solid var(--cg-yellow); }
.blog-article-body .cg-stack-layer:nth-child(6n+4) { border-left: 6px solid var(--cg-orange); }
.blog-article-body .cg-stack-layer:nth-child(6n+5) { border-left: 6px solid var(--cg-purple); }
.blog-article-body .cg-stack-layer:nth-child(6n+6) { border-left: 6px solid var(--cg-cyan); }
.blog-article-body .cg-stack-name {
  min-width: 0; font-size: var(--font-20, 20px); font-weight: 800;
  line-height: 1.35; color: var(--cg-black);
}
.blog-article-body .cg-stack-desc { min-width: 0; font-size: var(--font-16, 16px); line-height: 1.55; }
.blog-article-body .cg-stack-desc > :first-child { margin-top: 0; }
.blog-article-body .cg-stack-desc > :last-child { margin-bottom: 0; }
.blog-article-body .cg-stack-tag {
  width: 100%; min-width: 0; box-sizing: border-box;
  font-size: var(--font-14, 14px); font-weight: 700; line-height: 1.45; color: var(--cg-blue);
  background: var(--cg-card-bg); border-radius: 28px; padding: 14px 18px; text-align: center;
}
.blog-article-body .cg-arrow { text-align: center; color: var(--cg-ring); font-size: 22px; line-height: 1; margin: 2px 0; }

/* -- 15 KNOWLEDGE EXPLAINER / FAQ -----------------------------------------
   Definition box and a glossary. The Q&A set is the body, not an appendix. */
.blog-article-body .cg-defn {
  border-left: 6px solid var(--cg-blue); background: var(--cg-card-bg);
  border-radius: 0 var(--cg-radius-lg) var(--cg-radius-lg) 0;
  padding: 34px 38px; margin: 0 0 44px;
}
.blog-article-body .cg-defn-term {
  display: block; font-size: var(--font-30, 30px); font-weight: 800;
  color: var(--cg-black); margin-bottom: 14px; line-height: 1.2;
}
.blog-article-body .cg-defn p { font-size: var(--font-20, 20px); line-height: 1.6; margin: 0 0 14px; }
.blog-article-body .cg-defn p:last-child { margin-bottom: 0; }
.blog-article-body .cg-defn-pron {
  font-size: var(--font-16, 16px); color: var(--cg-grey); font-style: italic; margin-bottom: 14px; display: block;
}
.blog-article-body .cg-glossary { margin: 0 0 44px; border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg); overflow: hidden; }
.blog-article-body .cg-gloss-row {
  display: grid; grid-template-columns: 240px 1fr; gap: 26px;
  padding: 20px 26px; border-bottom: 1px solid var(--cg-line); background: var(--cg-white);
}
.blog-article-body .cg-gloss-row:last-child { border-bottom: none; }
.blog-article-body .cg-gloss-row:nth-child(even) { background: var(--cg-soft-bg); }
.blog-article-body .cg-gloss-row b { font-size: var(--font-18, 18px); color: var(--cg-black); }
.blog-article-body .cg-gloss-row span { font-size: var(--font-16, 16px); line-height: 1.55; color: var(--cg-grey); }

/* -- 16 ORIGINAL RESEARCH / PILLAR ----------------------------------------
   Numbered findings, prominent method, cluster hub. */
.blog-article-body .cg-finding {
  display: grid; grid-template-columns: 92px 1fr; gap: 28px;
  padding: 30px 0; border-bottom: 1px solid var(--cg-line);
}
.blog-article-body .cg-finding:first-of-type { border-top: 2px solid var(--cg-black); }
.blog-article-body .cg-finding-no {
  font-size: var(--font-46, 46px); font-weight: 800; color: var(--cg-blue);
  line-height: 1; letter-spacing: -2px;
}
.blog-article-body .cg-finding h3, .blog-article-body .cg-finding h4 { margin: 0 0 10px; }
.blog-article-body .cg-finding > div > :last-child { margin-bottom: 0; }
.blog-article-body .cg-finding-tag {
  display: inline-block; font-size: var(--font-14, 14px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px; color: var(--cg-grey);
  border: 1px solid var(--cg-line); border-radius: 50px; padding: 5px 14px; margin-bottom: 12px;
}
.blog-article-body .cg-hub {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--cg-line); border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius-lg); overflow: hidden; margin: 0 0 44px;
}
.blog-article-body .cg-hub a {
  background: var(--cg-white); padding: 24px 28px; text-decoration: none;
  display: block; transition: background .3s ease;
}
.blog-article-body .cg-hub a:hover { background: var(--cg-soft-bg); }
.blog-article-body .cg-hub a b { display: block; color: var(--cg-black); font-size: var(--font-18, 18px);
  margin-bottom: 6px; line-height: 1.4; }
.blog-article-body .cg-hub a span { color: var(--cg-grey); font-size: var(--font-16, 16px); font-weight: 400; }

/* -- RESPONSIVE for Part 2 ------------------------------------------------- */
@media (max-width: 1399px) {
  .blog-article-body .cg-atglance,
  .blog-article-body .cg-changebar,
  .blog-article-body .cg-result,
  .blog-article-body .cg-scope,
  .blog-article-body .cg-stagebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-article-body .cg-atglance > div:nth-child(-n+2),
  .blog-article-body .cg-scope > div:nth-child(-n+2) { border-bottom: 1px solid var(--cg-line); }
  .blog-article-body .cg-driver { grid-template-columns: 200px 1fr 100px; }
}
@media (max-width: 1199px) {
  .blog-article-body .cg-states { grid-template-columns: 1fr; }
  .blog-article-body .cg-layer { grid-template-columns: 160px 1fr; gap: 22px; }
}
@media (max-width: 991px) {
  .blog-article-body .cg-oblig,
  .blog-article-body .cg-prereq,
  .blog-article-body .cg-mistake-grid,
  .blog-article-body .cg-qa-a,
  .blog-article-body .cg-tco { grid-template-columns: 1fr; }
  .blog-article-body .cg-oblig > div,
  .blog-article-body .cg-mistake-grid > div,
  .blog-article-body .cg-qa-a > div { border-right: none; border-bottom: 1px solid var(--cg-line); }
  .blog-article-body .cg-oblig > div:last-child,
  .blog-article-body .cg-mistake-grid > div:last-child,
  .blog-article-body .cg-qa-a > div:last-child { border-bottom: none; }
  .blog-article-body .cg-tco > div:first-child { border-right: none; border-bottom: 1px solid var(--cg-line); }
  .blog-article-body .cg-stack-layer { grid-template-columns: minmax(150px, .65fr) minmax(0, 1.35fr); }
  .blog-article-body .cg-stack-tag { grid-column: 1 / -1; justify-self: stretch; }
  .blog-article-body .cg-hub { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .blog-article-body .cg-atglance,
  .blog-article-body .cg-changebar,
  .blog-article-body .cg-result,
  .blog-article-body .cg-scope,
  .blog-article-body .cg-stagebar { grid-template-columns: 1fr; }
  .blog-article-body .cg-atglance > div,
  .blog-article-body .cg-scope > div { border-right: none; border-bottom: 1px solid var(--cg-line); }
  .blog-article-body .cg-changebar > div,
  .blog-article-body .cg-result > div { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }
  .blog-article-body .cg-layer,
  .blog-article-body .cg-cal-row,
  .blog-article-body .cg-step,
  .blog-article-body .cg-finding,
  .blog-article-body .cg-driver,
  .blog-article-body .cg-verdict-row,
  .blog-article-body .cg-gloss-row,
  .blog-article-body .cg-stack-layer,
  .blog-article-body .cg-state-body dl { grid-template-columns: 1fr; gap: 12px; }
  .blog-article-body .cg-layer-name { border-left: none; padding-left: 0;
    border-bottom: 3px solid var(--cg-blue); padding-bottom: 8px; }
  .blog-article-body .cg-symptom { grid-template-columns: 30px 1fr; }
  .blog-article-body .cg-symptom-zone { grid-column: 2; text-align: left; padding-top: 0; }
  .blog-article-body .cg-mistake-head { grid-template-columns: 56px 1fr; }
  .blog-article-body .cg-sev { grid-column: 2; justify-self: start; }
  .blog-article-body .cg-rung { padding: 66px 24px 24px; }
  .blog-article-body .cg-rung::before { top: 24px; }
  .blog-article-body .cg-step-no { width: 52px; height: 52px; font-size: var(--font-22, 22px); }
  .blog-article-body .cg-step-note { grid-template-columns: 1fr; gap: 6px; }
  .blog-article-body .cg-finding-no { font-size: var(--font-36, 36px); }
  .blog-article-body .cg-thesis p { font-size: var(--font-22, 22px); }
  .blog-article-body .cg-defn { padding: 26px 24px; }
  .blog-article-body .cg-defn-term { font-size: var(--font-24, 24px); }
  .blog-article-body .cg-score { padding: 26px 24px; }
  .blog-article-body .cg-score-row { grid-template-columns: 1fr; gap: 4px; }
  .blog-article-body .cg-framework { padding: 26px 22px; }
  .blog-article-body ul.cg-cl-items li { padding: 16px 20px; }
}

/* print: checklists and steps should carry the boxes */
@media print {
  .blog-article-body .cg-symptom-box,
  .blog-article-body ul.cg-cl-items li::before { border-color: #333 !important; }
  .blog-article-body .cg-mistake,
  .blog-article-body .cg-step,
  .blog-article-body .cg-cl-group,
  .blog-article-body .cg-qa,
  .blog-article-body .cg-finding { break-inside: avoid; }
}

/* ==========================================================================
   PART 3 - HERO AND SIDEBAR VARIANTS
   The hero band, grid and explore strip are identical in every format - that
   is the theme lock. What varies is the payload under the H1 and which
   sidebar cards appear. Rule book section 5 says which format uses which.
   ========================================================================== */

/* hero deck - a standfirst line, for narrative formats */
.hero-content-centered .cg-hero-deck {
  font-size: var(--font-22, 22px); line-height: 1.55; color: var(--grey, #555);
  max-width: 780px; margin: 22px auto 0;
}

/* hero stats - three figures, for research and case study */
.hero-content-centered .cg-hero-stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px;
}
.hero-content-centered .cg-hero-stats > div {
  background: var(--white, #fff); border: 1px solid var(--border-color, #dfdfdf);
  border-radius: 16px; padding: 18px 30px; min-width: 170px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
}
.hero-content-centered .cg-hero-stats b {
  display: block; font-size: var(--font-32, 32px); font-weight: 800;
  color: var(--blue, #1e88e5); line-height: 1.1;
}
.hero-content-centered .cg-hero-stats span {
  display: block; font-size: var(--font-16, 16px); color: var(--grey, #555); margin-top: 6px;
}

/* hero facts - labelled pairs, for compliance and regulatory update */
.hero-content-centered .cg-hero-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 30px;
  background: var(--white, #fff); border: 1px solid var(--border-color, #dfdfdf);
  border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
}
.hero-content-centered .cg-hero-facts > div {
  min-width: 0; padding: 20px 28px; border-right: 1px solid var(--border-color, #dfdfdf);
  border-bottom: 1px solid var(--border-color, #dfdfdf); text-align: left;
}
.hero-content-centered .cg-hero-facts > div:nth-child(2n) { border-right: none; }
.hero-content-centered .cg-hero-facts > div:nth-last-child(-n+2) { border-bottom: none; }
.hero-content-centered .cg-hero-facts dt {
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--blue, #1e88e5); margin-bottom: 6px;
}
.hero-content-centered .cg-hero-facts dd {
  margin: 0; font-size: var(--font-18, 18px); font-weight: 600; color: var(--black, #111);
}

/* hero jump links - for reference and checklist formats */
.hero-content-centered .cg-hero-jump {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px;
}
.hero-content-centered .cg-hero-jump a {
  background: var(--white, #fff); border: 1px solid var(--border-color, #dfdfdf);
  border-radius: 50px; padding: 10px 22px; font-size: var(--font-16, 16px);
  font-weight: 600; color: var(--blue, #1e88e5); text-decoration: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.hero-content-centered .cg-hero-jump a:hover {
  background: var(--blue, #1e88e5); color: var(--white, #fff);
  border-color: var(--blue, #1e88e5); box-shadow: 0 8px 20px rgba(30, 136, 229, .18);
}

/* sidebar: key-facts card */
.sidebar-wrapper .cg-rail-facts { margin: 0; }
.sidebar-wrapper .cg-rail-facts dt {
  font-size: var(--font-14, 14px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--blue, #1e88e5); margin-bottom: 4px;
}
.sidebar-wrapper .cg-rail-facts dd {
  margin: 0 0 16px; font-size: var(--font-16, 16px); line-height: 1.5; color: var(--grey, #555);
}
.sidebar-wrapper .cg-rail-facts dd:last-child { margin-bottom: 0; }
.sidebar-wrapper .cg-rail-note { font-size: var(--font-16, 16px); line-height: 1.55; margin: 0; }
.sidebar-wrapper [data-cg-print] { cursor: pointer; }

@media (max-width: 767px) {
  .hero-content-centered .cg-hero-facts { grid-template-columns: 1fr; }
  .hero-content-centered .cg-hero-facts > div { border-right: none;
    border-bottom: 1px solid var(--border-color, #dfdfdf); }
  .hero-content-centered .cg-hero-facts > div:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--border-color, #dfdfdf);
  }
  .hero-content-centered .cg-hero-facts > div:last-child { border-bottom: none; }
  .hero-content-centered .cg-hero-stats > div { flex: 1 1 100%; }
  .hero-content-centered .cg-hero-deck { font-size: var(--font-18, 18px); }
}
@media print { .cg-rail-print { display: none !important; } }

/* The theme's button rules are anchor-scoped (a.common-btn...), so a <button>
   element carrying the same class inherits none of it. This gives the sidebar
   print button the identical treatment without touching the theme. */
.sidebar-wrapper button.common-btn-white-blue-border {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--inter, inherit);
  font-size: var(--font-18, 18px); font-weight: 600; line-height: 134%;
  color: var(--blue, #1e88e5); background-color: var(--white, #fff);
  border: 1px solid var(--blue, #1e88e5); border-radius: 12px;
  padding: 18px 24px;
  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, .05);
  transition: all .4s cubic-bezier(.23, 1, .32, 1);
}
.sidebar-wrapper button.common-btn-white-blue-border:hover {
  background: var(--blue, #1e88e5); color: var(--white, #fff);
  box-shadow: 0 15px 35px -10px rgba(30, 136, 229, .5);
}
.sidebar-wrapper button.common-btn-white-blue-border:active { transform: translateY(-2px) scale(.98); }

/* ==========================================================================
   FEATURED-IMAGE PLACEHOLDER  (v6.2)
   Rendered by cg-blog.js only when the banner image is missing. Holds the
   exact box .article-banner would have held, so the page never reflows and
   a preview never shows a broken-image icon.
   ========================================================================== */
.cg-banner-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 24px; margin-bottom: 50px;
  background: linear-gradient(150deg, #f8fcff 0%, #eff6ff 55%, #e5f1fc 100%);
  border: 1px solid var(--border-color, #dfdfdf);
  box-shadow: 0 15px 45px rgba(0, 0, 0, .08);
  text-align: center; padding: 24px;
}
.cg-banner-placeholder span {
  font-size: var(--font-14, 14px); font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--blue, #1e88e5);
}
.cg-banner-placeholder em {
  font-style: normal; font-size: var(--font-16, 16px); color: var(--grey, #555555);
  word-break: break-all; max-width: 560px;
}
@media (max-width: 767px) {
  .cg-banner-placeholder { border-radius: 16px; margin-bottom: 32px; }
}

/* ==========================================================================
   CTA BUTTONS ON COLOURED SURFACES  (v6.2 fix)
   The theme's .common-btn is a blue fill with white text. Inside the blue or
   black inline CTA band that fill is the same colour as the band, so the
   button reads as bare text with no visible surface. On any coloured band the
   button is inverted to a white surface with blue text - the identical
   treatment the closing CTA block already uses, so the two stay consistent.
   ========================================================================== */
.blog-article-body .cg-inline-cta.is-blue a.common-btn,
.blog-article-body .cg-inline-cta.is-dark a.common-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cg-white);
  color: var(--cg-blue);
  border: 1px solid var(--cg-white);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .22);
}
.blog-article-body .cg-inline-cta.is-blue a.common-btn:hover,
.blog-article-body .cg-inline-cta.is-dark a.common-btn:hover {
  background: var(--cg-white); color: var(--cg-black); border-color: var(--cg-white);
}
.blog-article-body .cg-inline-cta.is-dark a.common-btn { box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .5); }
@media (max-width: 767px) {
  .blog-article-body .cg-inline-cta.is-blue a.common-btn,
  .blog-article-body .cg-inline-cta.is-dark a.common-btn { width: 100%; }
}